@charset "utf-8"; /* ========================================================== よくある質問（FAQ）　page-faq.css スコープ ========================================================== */ /* PC ---------------------------------------------------------- */ @media screen and (min-width: 768px), print { #faq main { width: 1100px; margin: 0 auto; } #faq .faq-cate { margin-bottom: 90px; } #faq .faq-cate-ttl { font-weight: bold; font-size: 26px; letter-spacing: 0.1em; line-height: 1.4; color: #111; padding: 0 0 18px 2px; border-bottom: 1px solid #111; margin-bottom: 32px; } #faq .faq-list { margin: 0; padding: 0; list-style: none; } #faq .faq-item { background: #fff; border: 1px solid #dcdcdc; margin-bottom: 20px; } #faq .faq-q { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 24px 80px 24px 24px; cursor: pointer; } #faq .faq-q:hover { background: #f8f8f8; } #faq .faq-badge { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; margin-right: 18px; font-family: 'Barlow', sans-serif; font-size: 20px; font-weight: 500; line-height: 1; } #faq .faq-badge--q { background: #1a1a1a; color: #fff; } #faq .faq-badge--a { background: #fff; color: #1a1a1a; border: 1px solid #1a1a1a; } #faq .faq-q__text { font-weight: bold; font-size: 17px; letter-spacing: 0.05em; line-height: 1.6; color: #111; } /* ＋／−トグル（CSSのみ） */ #faq .faq-toggle { position: absolute; top: 50%; right: 24px; width: 18px; height: 18px; margin-top: -9px; } #faq .faq-toggle::before, #faq .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 0; width: 18px; height: 2px; margin-top: -1px; background: #1a1a1a; transition: transform 0.3s; } #faq .faq-toggle::after { transform: rotate(90deg); } #faq .faq-item.is-open .faq-toggle::after { transform: rotate(0deg); } /* 回答（開閉アニメは外側 .faq-a、A横並びは内側 .faq-a__inner に分離） */ #faq .faq-a { display: none; border-top: 1px dotted #ccc; } #faq .faq-a__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 24px 24px 28px; background: #f8f8f8; } #faq .faq-a__text { min-width: 0; font-size: 15px; letter-spacing: 0.05em; line-height: 1.9; color: #333; padding-top: 6px; } #faq .faq-a__text a { color: #111; text-decoration: underline; } /* 登録0件時 */ #faq .faq-note { text-align: center; font-size: 16px; letter-spacing: 0.05em; padding: 60px 0; } } /* SP ---------------------------------------------------------- */ @media screen and (max-width: 767px) { #faq main { width: auto; margin: 0 4.106vw; } #faq .faq-cate { margin-bottom: 14vw; } #faq .faq-cate-ttl { font-weight: bold; font-size: 5vw; letter-spacing: 0.1em; line-height: 1.5; color: #111; padding: 0 0 3vw 0.5vw; border-bottom: 1px solid #111; margin-bottom: 5vw; } #faq .faq-list { margin: 0; padding: 0; list-style: none; } #faq .faq-item { background: #fff; border: 1px solid #dcdcdc; margin-bottom: 3.5vw; } #faq .faq-q { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 4vw 11vw 4vw 3.5vw; cursor: pointer; } #faq .faq-badge { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 7.5vw; height: 7.5vw; border-radius: 50%; margin-right: 3vw; font-family: 'Barlow', sans-serif; font-size: 4vw; font-weight: 500; line-height: 1; } #faq .faq-badge--q { background: #1a1a1a; color: #fff; } #faq .faq-badge--a { background: #fff; color: #1a1a1a; border: 1px solid #1a1a1a; } #faq .faq-q__text { font-weight: bold; font-size: 3.8vw; letter-spacing: 0.05em; line-height: 1.6; color: #111; } /* ＋／−トグル（CSSのみ） */ #faq .faq-toggle { position: absolute; top: 50%; right: 3.5vw; width: 4vw; height: 4vw; margin-top: -2vw; } #faq .faq-toggle::before, #faq .faq-toggle::after { content: ""; position: absolute; top: 50%; left: 0; width: 4vw; height: 2px; margin-top: -1px; background: #1a1a1a; transition: transform 0.3s; } #faq .faq-toggle::after { transform: rotate(90deg); } #faq .faq-item.is-open .faq-toggle::after { transform: rotate(0deg); } /* 回答（開閉アニメは外側 .faq-a、A横並びは内側 .faq-a__inner に分離） */ #faq .faq-a { display: none; border-top: 1px dotted #ccc; } #faq .faq-a__inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 4vw 3.5vw 5vw; background: #f8f8f8; } #faq .faq-a__text { min-width: 0; font-size: 3.6vw; letter-spacing: 0.05em; line-height: 1.9; color: #333; padding-top: 1.2vw; } #faq .faq-a__text a { color: #111; text-decoration: underline; } /* 登録0件時 */ #faq .faq-note { text-align: center; font-size: 3.8vw; letter-spacing: 0.05em; padding: 12vw 0; } }