@charset "UTF-8";
/* ID:252/254 モーダル展開中は背景の をスクロールロックする */
body.is-modal-open{
overflow: hidden;
/* iOS Safari 対策: position fixed よりも overflow:hidden + 高さ固定で十分 */
touch-action: none;
}
/*ーーーーーーーーーーーーーーーーーー
base
ーーーーーーーーーーーーーーーーーー*/
:root {
/* color */
--white-color: #ffffff;
--gray-color:#626262;
--text-color: #181818;
--text2-color: #BDBDBD;
--text3-color: #474747;
--text4-color: #A1A1A1;
--text5-color: #F6F6F6;
--text6-color: #828282;
--text7-color: #292929;
--bg-color: #F7F5F0;
--bg2-color: #F3F1EC;
--border-color: #E1E1E1;
--accent-color-red: #D7263D;
--accent-color-yellow: #FFBD00;
--accent-color-teal: #1F7B82;
--accent-color-black: #171719;
--accent-color-blue: #305C89;
--accent-color-purple: #7D54B2;
--accent-color-orange: #E6513F;
--accent-color-teal-bg: #E0F2F1;
/* header - height */
--pc-headerHeight:111px;
--sp-headerHeight:95px;
--pc-headerTopHeight:72px;
--sp-headerTopHeight:56px;
/* width */
--wh1440:min(1440px,100%);
--wh1280:min(1280px,90%);
--wh1060:min(1060px,90%);
--wh620:min(620px,90%);
--wh550:min(550px,90%);
/* padding */
--pd80:clamp(3rem, 2.49rem + 2.09vw, 5rem) 0;
/* box-shadow */
--box-shadow:0 0 0 1px rgba(0, 0, 0, 0.06), 0 1px 2px -1px rgba(0, 0, 0, 0.06), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
--box-shadow-animation: 0 0 0 1px rgba(0, 0, 0, 0.12),0 1px 2px -1px rgba(0, 0, 0, 0.12),0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
line-height: 1.5;
overflow-wrap: break-word;
letter-spacing: 0.025rem;
font-family: "MFW-PIshiiGothicStdN-R", sans-serif;
font-style: normal;
color: var(--text-color);
font-size: 15px;
overflow-x: hidden;
background: none;
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt";
&.no-scroll {
overflow: hidden;
}
}
img {
width: 100%;
height: auto;
}
.pc-only {
display: block;
}
.tb-only {
display: none;
}
.sp-only {
display: none;
}
@media screen and (max-width: 768px) {
.pc-only {
display: none;
}
.tb-only {
display: block;
}
}
@media screen and (max-width: 576px) {
.sp-only {
display: block;
}
}
/*ーーーーーーーーーーーーーーーーーー
subPage - FV
ーーーーーーーーーーーーーーーーーー*/
.p-subFv{
padding: 80px 16px;
text-align: center;
}
/* ID:448 Piano ログイン/会員登録モーダルを画面の上下中央に表示。
モーダル高さ > viewport 時は flex 中央配置のままだとオーバーレイをスクロール
できず下部のフォーム/ボタンが操作不能になるため、overflow-y: auto を付与し
オーバーレイ全体をスクロール可能にする。
さらに max-height 制約 (90vh) は中身に応じて自然に伸縮させるため none に。
※ 5/5 山下担当 fix で .tp-modal セレクタが追加されたが、Piano モーダル本体の
高さが SDK 側で大きくなり 90vh 制約とぶつかるケースが本番で発生したため。 */
[id^="tp-modal"],
.tp-modal {
display: flex !important;
/* ID:447 (5/12 長谷川差戻) Piano モーダルを画面の上下中央に。
overflow-y: auto と padding でモーダル高さ > viewport の時もスクロール可。 */
align-items: center !important;
justify-content: center !important;
overflow-y: auto !important;
padding: 5vh 0 !important;
}
[id^="tp-modal"] .tp-container-inner,
[id^="tp-modal"] .tp-iframe-wrapper,
.tp-modal .tp-container-inner,
.tp-modal .tp-iframe-wrapper,
[id^="tp-modal"] iframe,
.tp-modal iframe {
margin: auto !important;
max-height: none !important;
}
/* ID:449 (5/12 長谷川差戻) ログイン等のモーダルを開いた瞬間に「黒いテンプレート」
が一瞬全画面表示される問題を解消。Piano SDK が iframe をロードする前の
または .tp-iframe-wrapper のデフォルト背景 (#000) が見える前に
transparent に上書きして、fade-in アニメで自然に表示する。 */
[id^="tp-modal"] .tp-iframe-wrapper,
.tp-modal .tp-iframe-wrapper {
background-color: transparent !important;
}
[id^="tp-modal"] iframe,
.tp-modal iframe {
background-color: transparent !important;
}
/* ID:451 SP ログインフォームを画面いっぱいでなく左右余白を確保 */
.user-login-form,
.user-pass {
padding-left: 16px;
padding-right: 16px;
max-width: 480px;
margin-inline: auto;
}
@media screen and (max-width: 480px) {
.user-login-form,
.user-pass {
padding-left: 24px;
padding-right: 24px;
}
}
/* ID:449 パスワード再設定の見出しとメールアドレスの間に 24px の余白 */
.user-pass label,
.user-pass .form-item-mail,
.user-pass .form-item-name {
margin-top: 24px;
}
.user-pass h2,
.user-pass .form-item-mail label,
.user-pass .form-item-name label {
margin-bottom: 24px;
}
/* ID:452 SP ログインのアカウントとメールアドレスの余白を増やす */
@media screen and (max-width: 480px) {
.user-login-form .form-item-name,
.user-login-form .form-item-pass {
margin-top: 32px;
}
}
.p-subFv__title{
font-size: 32px;
font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
}
.p-subFv__text{
margin-top: 30px;
}
/*ーーーーーーーーーーーーーーーーーー
common
ーーーーーーーーーーーーーーーーーー*/
/* width ーーーーーーーーーー*/
.c-wh1280{
width: var(--wh1280);
margin-inline: auto;
}
.c-wh1060{
width: var(--wh1060);
margin-inline: auto;
}
.c-wh620{
width: var(--wh620);
margin-inline: auto;
}
.c-wh550{
width: var(--wh550);
margin-inline: auto;
}
/* font ーーーーーーーーーー*/
.c-mincho{
font-family: "MFW-PKawaraMinchoProN-M";
font-style: normal;
letter-spacing: 0;
line-height: 1.4;
}
.c-titleGothic{
font-family: "MFW-PIshiiGothicStdN-M";
}
/* title ーーーーーーーーーー*/
.c-mainTitle{
font-family: "MFW-PKawaraMinchoProN-M";
font-style: normal;
font-size: clamp(1.75rem, 1.471rem + 1.14vw, 2.5rem);
}
.c-cardAnimationTitle span{
border-bottom: 1px solid transparent;
}
.c-featureLinkTitle span{
border-bottom: 1px solid transparent;
}
/* arrow ーーーーーーーーーー */
.c-arrow{
position: relative;
display: inline-block;
&::after {
background: url("../images/arrow.svg") no-repeat center center / contain;
display: inline-block;
content: "";
aspect-ratio: 1 / 2;
width: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
}
/* link */
.c-titleLink{
border: 1px solid transparent;
}
/* button */
.c-buttonOutline-yellow,
.c-buttonOutline-teal,
.c-buttonOutline-red,
.c-buttonOutline-blue,
.c-buttonOutline-black,
.c-buttonFill-yellow,
.c-buttonFill-white,
.c-buttonFill-teal,
.c-buttonFill-red,
.c-buttonFill-blue,
.c-buttonFill-black{
padding: 12px 16px 10px;
width: fit-content;
display: block;
font-family: "MFW-PIshiiGothicStdN-M";
text-align: center;
}
.c-button--medium {
padding: 16px 20px;
}
.c-button--large {
padding: 24px;
}
/* Outline button */
.c-buttonOutline-yellow{
border: 1px solid var(--accent-color-yellow);
color: var(--accent-color-yellow);
}
.c-buttonOutline-teal{
border: 1px solid var(--accent-color-teal);
color: var(--accent-color-teal);
}
.c-buttonOutline-red{
border: 1px solid var(--accent-color-red);
color: var(--accent-color-red);
}
.c-buttonOutline-blue{
border: 1px solid var(--accent-color-blue);
color: var(--accent-color-blue);
}
.c-buttonOutline-black{
border: 1px solid var(--accent-color-black);
color: var(--accent-color-black);
}
/* Fill button */
.c-buttonFill-yellow{
background: var(--accent-color-yellow);
color: var(--accent-color-black);
}
.c-buttonFill-white{
background: var(--white-color);
color: var(--accent-color-black);
}
.c-buttonFill-teal{
background: var(--accent-color-teal);
color: var(--white-color);
}
.c-buttonFill-red{
background: var(--accent-color-red);
color: var(--white-color);
}
.c-buttonFill-blue{
background: var(--accent-color-blue);
color: var(--white-color);
}
.c-buttonFill-black{
background: var(--accent-color-black);
color: var(--white-color);
}
@media screen and (max-width: 1024px){
.c-buttonOutline-yellow,
.c-buttonOutline-teal,
.c-buttonOutline-red,
.c-buttonOutline-blue,
.c-buttonOutline-black,
.c-buttonFill-yellow,
.c-buttonFill-white,
.c-buttonFill-teal,
.c-buttonFill-red,
.c-buttonFill-blue,
.c-buttonFill-black{
width: 100%;
}
}
/* audio movie icon */
/* audio-button.svg / movie-button.svg の再生アイコンを常にサムネ最前面に表示する（z-index: 2） */
.c-audio,
.c-movie,
.c-audio-s,
.c-movie-s,
.c-audio-b,
.c-movie-b{
position: relative;
&::after{
content: "";
display: inline-block;
background: url("../images/audio-button.svg") no-repeat center center / contain;
aspect-ratio: 1 / 1;
width: 48px;
position: absolute;
bottom: 16px;
left: 16px;
z-index: 2;
}
}
.c-movie,
.c-movie-s{
&::after{
background: url("../images/movie-button.svg") no-repeat center center / contain;
}
}
/* audio movie icon - s */
.c-audio-s,
.c-movie-s{
&::after{
width: 32px;
bottom: 8px;
left: 8px;
}
}
/* audio movie icon - black */
.c-audio-b,
.c-movie-b{
&::after {
background: url("../images/audio-button-b.svg") no-repeat center center / contain;
width: 32px;
vertical-align: middle;
margin-left: 6px;
margin-top: -2px;
position: initial;
}
}
.c-movie-b{
&::after{
background: url("../images/movie-button-b.svg") no-repeat center center / contain;
}
}
/* audio movie bg */
.c-audio,
.c-movie,
.c-audio-s,
.c-movie-s,
.c-audio-b,
.c-movie-b{
z-index: 1;
overflow: hidden;
background: none!important;
object-fit: cover;
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-image: var(--bg);
-ms-filter: blur(30px);
filter: blur(30px);
inset: -30px;
transform: scale(1.08);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
}
/* ebook */
.c-thumbTrimmingNg--m.c-ebook {
background: var(--bg-color);
/* ID:266 /article/ 新着一覧で電子書籍サムネが切れる対応:
書籍表紙は縦長 (約 2:3) なので contain で中央配置、上下は背景色でパディング */
aspect-ratio: 3 / 2;
overflow: hidden;
img {
border: 2px solid #fff;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
}
/* caption */
.c-mv__image {
position: relative;
}
.c-mv__caption {
position: absolute;
bottom: 0;
left: 0;
color: var(--text5-color);
background: rgba(23, 23, 25, .4);
font-size: 13px;
padding: 4px 8px;
}
/*ーーーーーーーーーーーーーーーーーー
common parts
ーーーーーーーーーーーーーーーーーー*/
/* heading ーーーーーーーーーーーーー*/
.c-heading{
display: flex;
align-items: center;
justify-content: space-between;
}
.c-headingLink-teal{
font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
font-weight: 500;
color: var(--accent-color-teal);
/* ID:345 「すべて見る」フォントサイズを 16-20px に拡大 */
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
border-bottom: 1px solid transparent;
line-height: 1;
margin-bottom: 4px;
}
.c-headingLink-blue{
color: var(--accent-color-blue);
/* ID:345 同様にサイズ拡大 */
font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
border-bottom: 1px solid transparent;
line-height: 1;
}
/* meta ーーーーーーーーーーーーー*/
.c-meta{
display: flex;
align-items: center;
justify-content: space-between;
}
.c-metaCategory{
font-size: 13px;
color: var(--accent-color-teal);
/* ID:389/402/421 カテゴリ表記をRからMへ */
font-family: "MFW-PIshiiGothicStdN-M", sans-serif;
font-weight: 500;
}
/* badge ーーーーーーーーーーーーー*/
.c-badgeList{
display: flex;
gap: 4px;
align-items: center;
flex: none;
li{
font-size: 11px;
padding: 0 2px;
}
}
/* 背景白用 */
.c-badgeItem--new,.c-badgeItem--pr{
background: var(--accent-color-black);
border: 1px solid var(--accent-color-black);
color: var(--white-color);
}
.c-badgeItem--free{
background: var(--white-color);
border: 1px solid var(--accent-color-black);
/* ID:264 ベージュ背景(連載・特集のエピソード)等で親のテキスト色を継承して読めなくなる対策 */
color: var(--accent-color-black);
}
/* 背景黒用 */
.c-badgeItem--newB{
background: var(--white-color);
border: 1px solid var(--white-color);
}
.c-badgeItem--freeB{
border: 1px solid var(--white-color);
color: var(--white-color);
}
/* author ーーーーーーーーーーーーー*/
.c-authorWrap{
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
line-height: 1;
}
.c-articleCard__author {
display: inline-flex;
align-items: center;
gap: 6px;
}
.c-authorIcon{
width: 20px;
display: inline;
vertical-align: middle;
border-radius: 99vw;
border: 1.25px solid var(--accent-color-teal);
padding: 1px;
height: 20px;
object-fit: cover;
flex-shrink: 0;
}
.c-authorIconMail{
width: 16px;
display: inline;
margin-left: 8px;
vertical-align: middle;
margin-top: 2px;
}
.c-authorName{
color: var(--text3-color);
font-size: 13px;
display: inline;
vertical-align: middle;
}
.c-authorNameAdd{
margin-left: 2px;
}
@media (max-width: 767px) {
.c-authorWrap{
line-height: 1.5;
}
}
/* message ーーーーーーーーーーーーー*/
.p-massage1{
padding: clamp(3rem, 2.49rem + 2.09vw, 5rem) 0 40px;
}
.p-massage2{
padding: 40px 0 80px;
}
.p-massage2--articleBottom{
/* ID:418 記事下部のニュースレターCTAのみ背面にベージュ背景を敷く */
background: var(--bg-color);
}
.c-massage__inner {
background-color: #1F7B82 !important;
background: var(--accent-color-teal, #1F7B82) !important;
padding: 48px clamp(1.5rem, 1.118rem + 1.57vw, 3rem);
display: flex;
align-items: center;
justify-content: space-between;
}
.c-massage__headingTitle{
font-size: clamp(1.75rem, 1.559rem + 0.78vw, 2.5rem);
font-family:"MFW-PKawaraMinchoProN-M", serif;
font-weight: 500;
color: var(--white-color);
}
.c-massage__headingText{
margin-top: clamp(1rem, 0.873rem + 0.52vw, 1.5rem);
font-size: clamp(0.938rem, 0.906rem + 0.13vw, 1.063rem);
color: var(--white-color);
}
.c-massage__link{
background: var(--white-color);
color: var(--text-color);
}
@media screen and (max-width: 1024px){
.p-massage2{
/* ID:413 ニュースレター購読パネルのSP上下余白を全配置で統一 */
padding: 48px 0;
}
.c-massage__inner{
flex-direction: column;
}
.c-massage__link{
margin-top: 32px;
}
}
/* サムネ トリミングなし用 ーーーーーーーーーー */
/* s */
.c-thumbTrimmingNg--s{
background: var(--accent-color-red);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
img{
width: fit-content;
height: fit-content;
object-fit: contain!important;
max-width: calc(100% - 40px);
max-height: calc(100% - 24px);
}
}
/* m */
.c-thumbTrimmingNg--m{
background: #B4372B;
display: flex;
align-items: center;
justify-content: center;
height: max-content;
img{
width: fit-content;
height: fit-content;
object-fit: contain!important;
max-width: calc(100% - 60px);
max-height: calc(100% - 40px);
}
}
.c-thumbTrimmingNg--l{
background: var(--accent-color-red);
display: flex;
align-items: center;
justify-content: center;
height: max-content;
img{
width: fit-content;
height: fit-content;
object-fit: contain!important;
max-width: calc(100% - 96px);
max-height: calc(100% - 64px);
}
}
/* movie 差分 ーーーーーーーーーー*/
.p-original__listItem.c-movie{
& .p-originalEpisode__title{
position: relative;
&::after{
background: url("../images/movie-button-s.svg") no-repeat center center / contain;
display: inline-block;
content: "";
aspect-ratio: 8 / 5;
width: 32px;
vertical-align: sub;
margin-left: 4px;
}
}
}
/* swiper 矢印 ーーーーーーーーーー*/
.swiper-container{
position: relative;
}
.swiper-button-prev,
.swiper-button-next {
height: 40px;
width: 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.swiper-button-next{
right: -25px !important;
}
.swiper-button-prev{
left: -25px !important;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
box-shadow: none;
opacity: .4;
}
@media (max-width: 1024px) {
.swiper-container {
padding-bottom: 24px;
}
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-horizontal>.swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
height: 1px;
background: rgba(224, 242, 241, 1);
}
.swiper-scrollbar-drag {
background: var(--accent-color-teal);
}
}
/* ページャー */
.c-pager{
display: flex;
align-items: center;
gap: 4px;
margin-top: 24px;
}
.c-pager--prev,
.c-pager--next{
width: 40px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.swiper-button-lock {
display: none !important;
}
@media (max-width: 1024px) {
.c-pager--prev,
.c-pager--next {
width: 48px;
}
}
/* 前へ次への矢印カスタマイズ */
.swiper-button-prev::after,
.swiper-button-next::after {
content: "";
display: block;
width: 100%;
height: 100%;
}
/* 前へ */
.swiper-button-prev::after {
background: url("../images/button-l-g.svg") no-repeat center center / contain;
}
/* 次へ */
.swiper-button-next::after {
background: url("../images/button-r-g.svg") no-repeat center center / contain;
}
.swiper-button-prev {
transition: opacity 250ms ease, transform 250ms ease;
}
.is-nav-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(6px);
}
@media screen and (max-width: 1024px){
.is-nav-hidden {
opacity: 1;
pointer-events: none;
transform: none;
}
}
/*ーーーーーーーーーーーーーーーーーー
記事詳細 common
ーーーーーーーーーーーーーーーーーー*/
/* font size */
.c-fs17{
font-size: 17px;
}
.c-fs13{
font-size: 13px;
}
/* margin */
.c-mg4{
margin-top: 4px;
}
.p-articleContant{
& .c-contentIntroText,
.c-contentIndexWrap,
.c-contentTitle--h3,
.c-contentText,
.c-contentFigre,
.c-contentaudioWrap,
.c-contentmovieWrap,
.c-content2column,
.c-contentQuoteWrap,
.c-content2columnBetween,
.c-contentFigreEbook,
.c-contentMovie,
.c-contentFigreAudio{
margin: 40px 0;
}
/* ID:414 リード文 上下罫線。Figma 仕様 (Era-CL-EX node 3070:76867):
- border: 0.5px solid #FFBD00 (Provocative Yellow 500 = --accent-color-yellow)
- padding: 32px 16px
上下罫線で本文との明確な区切りを作る。長井藍さん 5/7 差戻 (色違い) を反映。 */
& .c-contentIntroText{
padding: 32px 16px;
margin: 56px 0 !important;
border-top: 0.5px solid var(--accent-color-yellow);
border-bottom: 0.5px solid var(--accent-color-yellow);
}
/* 目次 */
/* ID:396 目次ボックスと小見出し間の余白を増加 */
& .c-contentIndexWrap{
background: var(--bg-color);
padding: 32px;
margin-bottom: 64px !important;
}
& .c-contentIndexTitle{
font-size: 20px;
font-family: "MFW-PIshiiGothicStdN-M";
}
& .c-contentIndexListWrap{
margin-top: 16px;
}
& .c-contentIndexListItem{
list-style-position: inside;
list-style-type: decimal;
border-top: 1px solid #E9E5DC;
color: var(--text3-color);
padding: 8px 0;
}
/* ID:394 「目次」見出しとリスト先頭の間に罫線を入れない */
& .c-contentIndexListItem:first-child{
border-top: none;
}
/* 本編 ーーーーーーーーーー*/
/* タイトル */
& .c-contentTitle--h3{
font-size: 24px;
font-family: "MFW-PIshiiGothicStdN-M";
}
/* テキスト */
& .c-contentIntroText{
a{
color: var(--accent-color-teal);
}
}
/* ボタン */
.c-contentTealButton{
background: var(--accent-color-teal);
color: var(--white-color);
padding: 16px 20px;
text-align: center;
}
.c-content3columnButton{
display: flex;
gap: 24px;
}
.c-content2columnButton{
border: 1px solid var(--accent-color-teal);
display: flex;
align-items: center;
text-align: center;
a{
background: var(--white-color);
padding: 16px 20px;
color: var(--accent-color-teal);
}
& .c-content2columnButton--R{
border-left: 1px solid var(--accent-color-teal);
}
}
/* 動画 */
.c-contentMovie{
iframe{
aspect-ratio: 16 / 9;
width: 100%;
}
}
/* 画像（通常） */
& .c-contentFigre{
width: fit-content;
margin-inline: auto;
figcaption{
color: var(--text3-color);
margin-top: 4px;
a{
color: var(--accent-color-teal);
}
}
}
/* 画像（大） */
& .c-contentFigre--l{
width: min(1280px, 90vw);
margin-left: calc((100% - min(1280px, 90vw)) / 2);
margin-right: calc((100% - min(1280px, 90vw)) / 2);
}
/* 画像（電子書籍、音声） */
.c-contentFigreEbook,
.c-contentFigreAudio{
background: var(--bg-color);
padding: 40px;
aspect-ratio: 3 / 2;
box-shadow: var(--box-shadow);
display: flex;
align-items: center;
justify-content: center;
height: max-content;
img {
height: 100%;
object-fit: contain ;
width: auto;
}
}
/* 2カラム */
& .c-content2column{
display: flex;
gap: clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
& .c-content2column--figre{
figcaption{
color: var(--text3-color);
margin-top: 4px;
}
}
& .c-content2column--text,
.c-content2column--figre{
flex-basis: 50%;
}
}
/* 2カラム between */
.c-content2columnBetween{
display: flex;
justify-content: space-between;
align-items: center;
}
/* 引用 */
/* ID:397 引用「”」マークのサイズを拡大 (20px → 36px) */
& .c-contentQuoteWrap{
background: var(--bg-color);
padding: clamp(4.25rem, 4.123rem + 0.52vw, 4.75rem) clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem) clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem) clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
position: relative;
&::before {
background: url("../images/article/quote.svg") no-repeat center center / contain;
display: inline-block;
content: "";
aspect-ratio: 19 / 20;
width: 36px;
position: absolute;
top: clamp(1.5rem, 1.341rem + 0.65vw, 2.125rem);
}
}
& .c-contentFooter{
padding: clamp(2.5rem, 1.863rem + 2.61vw, 5rem) 0;
border-top: 1px solid var(--border-color);
}
/* 筆者 ーーーーーーーーーー */
& .c-contentAuthorListWrap{
background: var(--bg-color);
padding: 20px clamp(1.5rem, 1.245rem + 1.05vw, 2.5rem);
}
& .c-contentAuthorListItem {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 20px 0;
border-top: 1px solid var(--border-color);
position: relative;
&:first-child{
border: none;
}
}
& .c-contentAuthorListItem--img{
/* No.26 横長・縦長の画像でも正円になるよう明示的に幅と高さを指定。
padding を外側に保持するため box-sizing: content-box にする。 */
flex: 0 0 64px;
width: 64px;
height: 64px;
box-sizing: content-box;
aspect-ratio: 1/1;
object-fit: cover;
border-radius: 99vw;
border: 2px solid var(--accent-color-teal);
padding: 2px;
}
& .c-contentAuthorListItem--textWrap{
flex-basis: calc(100% - 64px);
padding-right: 108px;
& .text{
font-size: 13px;
margin-top: 8px;
}
& .name{
font-family: "MFW-PIshiiGothicStdN-M";
}
& .link{
margin-top: 12px;
color: var(--accent-color-teal);
font-size: 13px;
padding-right: 15px;
&::after {
background: url("../images/arrow-teal.svg") no-repeat center center / contain;
}
}
& .follow{
position: absolute;
right: 0;
top: 20px;
background: var(--white-color);
border-radius: 99vw;
border: 1px solid var(--accent-color-teal);
font-size: 13px;
color: var(--accent-color-teal);
padding: 4px 8px;
cursor: pointer;
transition: all 0.2s ease;
}
& .follow.is-followed{
background: var(--accent-color-teal);
color: var(--white-color);
}
& .follow:disabled{
opacity: 0.5;
cursor: wait;
background: #e0e0e0;
color: #666;
border-color: #bbb;
}
}
/* iconlist */
& .c-contentAuthorIconFlex{
display: flex;
justify-content: space-between;
align-items: center;
}
& .c-contentAuthorIconFlex2{
padding-top: 24px;
}
/* ID:400 シンプル版 記事下のアクションボタン群を右寄せに */
.p-articleContantSimple & .c-contentAuthorIconFlex{
justify-content: flex-end;
}
.p-articleContantSimple & .c-contentAuthorIconFlex .c-contentIconPenWrap{
margin-right: auto;
}
& .c-contentAuthorIconSmileWrap,
.c-contentAuthorIconListWrap,
.c-contentAuthorIconSmileItem,
.c-contentAuthorIconListItem--keep a{
display: flex;
align-items: center;
}
& .c-contentAuthorIconSmileWrap{
gap: 8px;
flex-wrap: wrap;
}
& .c-contentAuthorIconListWrap{
border: 1px solid var(--text-color);
}
& .c-contentAuthorIconListItem{
padding: 8px;
&:not(:first-child){
border-left: 1px solid var(--text-color);
}
}
& .c-contentAuthorIconListItem--keep a{
& .text{
flex: none;
margin-left: 4px;
}
}
/* ID:292 リアクションボタン (学びになった/活用したい/面白かった)
SmileMain (img + label) と count (.add) の2列flex。
旧CSSは .c-contentAuthorIconSmile (img) と .add に flex-basis を当てていたが、
新HTML構造では img が Main 内にネストされて直接の flex 子ではないため適用されず、
.add の flex-basis: calc(100% - 24px) が count を肥大化させていた。 */
& .c-contentAuthorIconSmileItem{
gap: 6px;
border-radius: 99vw;
border: 1px solid var(--border-color);
padding: 8px 12px;
white-space: nowrap;
flex-shrink: 0;
& .c-contentAuthorIconSmileMain{
display: inline-flex;
align-items: center;
gap: 4px;
}
& .c-contentAuthorIconSmile{
width: 20px;
height: 20px;
flex: none;
}
& .c-contentAuthorIconSmileLabel{
font-size: 13px;
line-height: 1;
}
& .add{
flex: none;
font-size: 13px;
line-height: 1;
color: var(--text3-color, #666);
}
}
& .c-contentIconPenWrap {
display: flex;
align-items: center;
& .add {
margin-left: 4px;
line-height: 1;
}
}
& .c-contentIconPen {
width: 24px;
}
& .c-contentCategory,
.c-contentFollow,
.c-contentTag{
margin-top: 40px;
}
& .c-contentCategoryListWrap,
.c-contentFollowListWrap,
.c-contentTagListWrap{
margin-top: 12px;
}
/* ID:401 (5/12 原差戻) 記事下カテゴリ「カテゴリ」見出しを M (500) に */
& .c-contentCategoryTitle{
font-weight: 500;
}
& .c-contentCategoryListItem{
margin: 2px;
display: inline-block;
a{
font-size: 13px;
color: var(--accent-color-teal);
line-height: 1.25;
/* ID:401 (5/12 原差戻) カテゴリ名も M (500) に */
font-weight: 500;
}
}
& .c-contentFollowListItem{
margin: 6px 1px;
display: inline-block;
a, .c-contentFollowBtn{
font-size: 13px;
color: var(--accent-color-teal);
padding: 4px 30px 4px 8px;
border-radius: 99vw;
border: 1px dashed var(--accent-color-teal);
line-height: 1.25;
position: relative;
background: var(--white-color);
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
&::after{
background: url("../images/plus-teal.svg") no-repeat center center / contain;
display: inline-block;
content: "";
aspect-ratio: 1 / 1;
width: 20px;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 6px;
}
}
.c-contentFollowBtn.is-followed{
border-style: solid;
background: var(--accent-color-teal);
color: var(--white-color);
&::after{
display: none;
}
}
.c-contentFollowBtn:disabled{
opacity: 0.6;
cursor: wait;
}
.c-contentFollowBtnIcon{
margin-left: 4px;
}
}
& .c-contentTagListItem{
display: inline-block;
margin: 6px 1px;
a{
font-size: 13px;
padding: 4px 8px;
border-radius: 99vw;
border: 1px solid var(--text-color);
line-height: 1.25;
}
}
}
@media screen and (max-width: 1024px){
.p-articleContant {
& .c-content2column,.c-content2columnBetween {
flex-direction: column;
gap: 24px;
align-items: flex-start;
}
& .c-contentTealButton{
width: 100%;
}
& .c-contentAuthorListItem{
display: block;
}
& .c-contentAuthorListItem--img{
/* No.26 SP も正円維持 (display:block で flex 解除されるため明示) */
width: 64px;
height: 64px;
flex: none;
}
& .c-contentAuthorListItem--textWrap{
margin-top: 16px;
padding-right: 0;
}
& .c-content3columnButton{
flex-direction: column;
gap: 24px;
width: 100%;
}
& .c-content2columnButton {
a {
flex-basis: 50%;
}
}
}
}
/*ーーーーーーーーーーーーーーーーーー
記事4カラムレイアウト
ーーーーーーーーーーーーーーーーーー*/
.c-cardGrid__headingTitle {
font-size: 28px;
font-family: "MFW-PKawaraMinchoProN-M", serif;
}
.c-cardGrid {
background: var(--bg-color);
padding: var(--pd80);
}
.c-cardGrid__listWrap {
display: flex;
gap: 48px 20px;
}
.c-cardGrid__listWrap.swiper-wrapper {
margin-top: 32px;
gap: unset;
}
.c-cardGrid__listItem {
background: var(--white-color);
width: calc((100% - 60px) / 4);
height: auto;
box-shadow: var(--box-shadow);
margin-bottom: 4px;
}
.c-cardGrid__body {
padding: 24px;
}
.c-cardGrid__title {
font-size: 17px;
margin-top: 16px;
flex-grow: 1;
}
.c-cardGrid__thumb {
aspect-ratio: 3/2;
}
.c-cardGrid__thumb img {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.c-cardGrid__title {
padding-bottom: 16px;
margin-top: 13px;
}
.c-cardGrid__summary {
padding-top: 16px;
border-top: 1px solid var(--border-color);
}
.c-cardGrid__vol {
color: var(--text6-color);
}
.c-cardGrid__lead {
font-size: 17px;
margin-top: 4px;
}
@media screen and (max-width: 1024px) {
.c-cardGrid {
overflow: hidden;
}
.c-cardGrid__listWrap.swiper-wrapper {
margin-top: 24px;
}
.c-cardGrid-slider .swiper {
overflow: visible;
}
}
/* follow error toast */
.follow-error-toast {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
background: #d32f2f;
color: #fff;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
z-index: 10000;
animation: fadeInUp 0.3s ease;
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateX(-50%) translateY(10px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.follow-error-toast { animation: none; }
}
/* ID:346 訪問済みカードタイトルを薄く表示する。
:visited は仕様上 opacity を変更できないため、color プロパティで疑似的に
"opacity 40%" 相当の色（text-color と bg-color の 40:60 ブレンド）に切り替える。
※ p-serialCard / p-seriesListCard はタイトルが の兄弟構造になっており、
ブラウザのプライバシー保護により :has(:visited) は CSS 的に効かないため、
CTA ボタンなど :visited 直接スタイルでカバーするか別途検討が必要。 */
.c-articleCard a:visited .c-articleCard__title,
.p-mediaCard a:visited .p-mediaCard__title,
.p-foresightCard a:visited .p-foresightCard__title,
.p-insightCard a:visited .p-insightCard__title,
.p-documentary a:visited .p-documentary__title,
.p-internationalCategory a:visited .p-internationalCategory__title,
.p-weekly-shinchoCard a:visited .p-weekly-shinchoCard__title,
.p-rankingCard a:visited .p-rankingCard__title,
.p-newsCard a:visited .p-newsCard__title,
.p-latestCard a:visited .p-latestCard__title,
.c-cardAnimation a:visited .c-cardAnimationTitle {
color: color-mix(in srgb, var(--text-color) 40%, var(--bg-color));
}
/* ID:391 / ID:399 / ID:351 グローバル: 無効カルーセル矢印を fade out (alpha 0) で非表示 */
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden;
transition: opacity 0.15s ease-in-out;
}
/* ID:389 / ID:402 / ID:421 カテゴリ名・メモ件数のフォントウェイト R→M */
.c-metaCategory,
.c-articleCard__meta,
.p-articleMeta__category,
.p-articleMeta__memoCount,
.p-articleSimple__category,
.p-articleSimple__memoCount,
.p-articleVideo__category,
.p-articleRich__category,
.p-articleRich__memoCount {
font-weight: 500;
}