@charset "UTF-8"; /* Scss Document */ /* Scss Document */ /*--------------- 追加 reset ---------------*/ *, *::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:visited { color: inherit; } li { list-style: none; } /*--------------- 共通 ---------------*/ html { font-size: 62.5%; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { width: 100%; margin: 0 auto; color: #333; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-feature-settings: "halt" on; font-weight: 400; font-size: 1.6rem; font-style: normal; line-height: 1.5; -webkit-font-feature-settings: "palt"; -moz-font-feature-settings: "palt"; -ms-font-feature-settings: "palt"; -o-font-feature-settings: "palt"; font-feature-settings: "palt"; } @media only screen and (max-width: 640px) { body { min-width: 100%; font-size: 3.75vw; } } a:hover { opacity: 0.6; transition: 0.5s; } a.-anchor { color: #244abd; text-decoration: underline; } img { width: auto; max-width: 100%; height: auto; max-height: 100%; vertical-align: bottom; } .inner { width: 100%; max-width: 1200px; min-width: 1200px; margin: 0 auto; padding: 0 30px; } @media only screen and (max-width: 640px) { .inner { width: 100%; min-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._w { max-width: 1920px; padding: 0 40px; } @media only screen and (max-width: 640px) { .inner._w { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._m { max-width: 958px; min-width: auto; padding: 0 40px; } @media only screen and (max-width: 640px) { .inner._m { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .inner._xs { max-width: 1010px; padding: 0 30px; } @media only screen and (max-width: 640px) { .inner._xs { max-width: 100%; padding: 0 calc(30 / 640 * 100vw); } } .flex_wrap { -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-align-items: flex-start; -moz-align-items: flex-start; -ms-align-items: flex-start; -o-align-items: flex-start; align-items: flex-start; justify-content: space-between; } /*--------------- テキスト関係 ---------------*/ .p { /*　基本のテキスト　*/ /*　に設定のもの font-size: 1.6rem; line-height: 1.5; @include css3(font-feature-settings, "palt"); @include sp { min-width: 100%; font-size: calc((24/640)*100vw); } */ } .p_center { text-align: center !important; } .p_pc_center { text-align: center !important; } @media only screen and (max-width: 640px) { .p_pc_center { text-align: left !important; } } .left { text-align: left !important; } .right { text-align: right !important; } .center { text-align: center; } @keyframes marquee { 0% { /* 開始時: 右端（親要素の外側）に配置 */ transform: translateX(300%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ transform: translateX(-100%); } } @keyframes marquee-sp { 0% { /* 開始時: 右端（親要素の外側）に配置 */ transform: translateX(100%); } 100% { /* 終了時: 左端（テキストの幅分左に移動） */ transform: translateX(-100%); } } /*--------------- main ---------------*/ .c-ttl__wide { background-color: #654B29; color: #fff; font-size: 2rem; font-weight: bold; text-align: center; padding: 0.4rem 0 0.8rem; } .c-ttl { background-color: #654B29; color: #fff; font-size: 2rem; font-weight: bold; text-align: center; padding: 0.4rem 0 0.8rem; width: 56.7rem; margin: 0 auto; isolation: isolate; } @media only screen and (max-width: 640px) { .c-ttl { width: 80%; } } .c-ttl_l { width: 65.4rem; } @media only screen and (max-width: 1600px) { .c-ttl_l { width: 56.7rem; } } @media only screen and (max-width: 640px) { .c-ttl_l { width: 80%; } } .c-body__container { padding-top: 1.5rem; background-color: #FBFBE7; padding: 3.6rem 4.4rem 2.4rem; margin-top: -2rem; z-index: -1; } @media only screen and (max-width: 640px) { .c-body__container { padding: calc(36 / 640 * 100vw) calc(20 / 640 * 100vw) calc(24 / 640 * 100vw); } } .c-block { border-bottom: 1px solid #b78f5b; padding: 2.5rem 0; } .c-block:last-child { border-bottom: none; } .c-block__ttl { text-align: center; color: #FE0031; font-size: 2.2rem; font-weight: 700; } @media only screen and (max-width: 640px) { .c-block__ttl { font-size: calc(26 / 640 * 100vw); } } .c-block__container { padding: 0 1.5rem; } @media only screen and (max-width: 640px) { .c-block__container { padding: 0 calc(15 / 640 * 100vw); } } .c-sttl { text-align: center; } .c-sttl h3, .c-sttl p { color: #654B29; font-size: 1.8rem; font-weight: 500; border: 1px solid #654B29; border-radius: 100vw; width: 18.7rem; padding: 0.4rem 0; margin: 0 auto; } .c-button a { display: block; text-align: center; font-size: 1.8rem; color: #654B29; background-color: #fff; border: 1px solid #654B29; border-radius: 100vw; width: 37.5rem; margin: 0 auto; padding: 0.3rem 0 0.7rem; } @media only screen and (max-width: 640px) { .c-button a { width: 90%; height: 4.7rem; padding: 0; line-height: 4.7rem; } } /*--------------- footer ---------------*/ .footer .content { background: #654B29; padding: 3.1rem 0 6.3rem; } @media only screen and (max-width: 640px) { .footer .content { padding: calc(31 / 640 * 100vw) 0 calc(63 / 640 * 100vw); } } .footer .inner { max-width: 1120px; min-width: 1120px; } @media only screen and (max-width: 1200px) { .footer .inner { max-width: 100%; min-width: 100%; } } @media only screen and (max-width: 958px) { .footer .inner { padding: 0 calc(20 / 958 * 100vw); } } .footer__ttl { font-weight: 600; font-size: 2rem; color: #654B29; background: #fff; border-radius: 100vw; width: 35.4rem; text-align: center; margin: 0 auto; padding: 0.5rem 0; } @media only screen and (max-width: 640px) { .footer__ttl { font-size: calc(24 / 640 * 100vw); width: calc(500 / 640 * 100vw); } } .contact__wrapper { display: flex; padding: 4rem 6rem 2.6rem; justify-content: space-between; border-bottom: 1px solid #b78f5b; } @media only screen and (max-width: 1200px) { .contact__wrapper { padding: 4rem 2rem 2.6rem; } } @media only screen and (max-width: 958px) { .contact__wrapper { padding: calc(40 / 958 * 100vw) calc(20 / 958 * 100vw) calc(26 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .contact__wrapper { padding: calc(20 / 640 * 100vw) calc(40 / 640 * 100vw); } } .contact__body { color: #fff; } .contact__ttl { font-size: 1.8rem; background: #EB5505; color: #fff; font-weight: 500; text-align: center; width: 8.9rem; margin: 0 auto; border-radius: 100vw; padding: 0.3rem 0 0.5rem; } .contact__tel { display: flex; align-items: center; margin-top: 1.3rem; } @media only screen and (max-width: 640px) { .contact__tel { flex-direction: column; } } .contact__tel-ttl { font-size: 1.5rem; font-weight: 700; border: 0.5px solid #fff; border-radius: 100vw; width: 16.6rem; text-align: center; padding: 0.6rem 0; margin-right: 1.9rem; } @media only screen and (max-width: 1200px) { .contact__tel-ttl { width: 14rem; } } @media only screen and (max-width: 958px) { .contact__tel-ttl { font-size: calc(15 / 958 * 100vw); width: calc(140 / 958 * 100vw); margin-right: calc(19 / 958 * 100vw); padding: calc(6 / 640 * 100vw) 0; } } @media only screen and (max-width: 640px) { .contact__tel-ttl { font-size: calc(20 / 640 * 100vw); width: calc(185 / 640 * 100vw); padding: calc(6 / 640 * 100vw) 0; } } .contact__tel-num { font-size: 2.8rem; font-weight: 700; } @media only screen and (max-width: 958px) { .contact__tel-num { font-size: calc(28 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .contact__tel-num { font-size: calc(30 / 640 * 100vw); margin-top: calc(5 / 640 * 100vw); } } .contact__info { display: flex; align-items: center; margin-top: 2.5rem; } @media only screen and (max-width: 640px) { .contact__info { flex-direction: column; margin-top: calc(20 / 640 * 100vw); } } .contact__info-ttl { font-size: 1.5rem; font-weight: 700; border: 0.5px solid #fff; border-radius: 100vw; width: 16.6rem; text-align: center; padding: 0.6rem 0; margin-right: 1.9rem; } @media only screen and (max-width: 1200px) { .contact__info-ttl { width: 14rem; } } @media only screen and (max-width: 958px) { .contact__info-ttl { font-size: calc(15 / 958 * 100vw); width: calc(140 / 958 * 100vw); margin-right: calc(19 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .contact__info-ttl { font-size: calc(20 / 640 * 100vw); width: calc(185 / 640 * 100vw); } } .contact__info-txt { font-size: 1.5rem; font-weight: 700; } @media only screen and (max-width: 958px) { .contact__info-txt { font-size: calc(15 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .contact__info-txt { font-size: calc(20 / 640 * 100vw); margin-top: calc(5 / 640 * 100vw); } } .contact__ttl-paypay { background: #E70012; } .contact__bottom { color: #fff; } .contact__bottom .contact__info { justify-content: center; } @media only screen and (max-width: 640px) { .contact__bottom .contact__info { flex-direction: row; margin-top: calc(25 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .pc { display: none !important; } } @media only screen and (max-width: 958px) { .tab { display: none !important; } } .sp { display: none !important; } @media only screen and (max-width: 640px) { .sp { display: block !important; } } .white { color: #fff !important; } .anchor { margin-top: -124px; padding-top: 124px; } .page__nav { margin-bottom: 9rem; } @media only screen and (max-width: 640px) { .page__nav { margin-bottom: calc(50 / 640 * 100vw); } } .animation { opacity: 0; } .isFade { opacity: 0; position: relative; bottom: -3em; } .isFade.isPlay { animation: fadein 1s cubic-bezier(0.07, 0.64, 0.3, 0.94) forwards; } @keyframes fadein { 0% { opacity: 0; bottom: -3em; } 100% { opacity: 1; bottom: 0; } } .fade-in-up { opacity: 0; transform: translateY(24px); transition: opacity 2s, transform 1s; } .fade-in-up.is-in-view { opacity: 1; transform: translateY(0); } .fade-in-down { opacity: 0; transform: translateY(-24px); transition: opacity 2s, transform 1s; } .fade-in-down.is-in-view { opacity: 1; transform: translateY(0); } .fade-in { opacity: 0; transition: opacity 1s; } .fade-in.is-in-view { opacity: 1; } /*--------------- mv ---------------*/ .mv__txt { background: #FFFCC9; } .mv__txt p { font-size: 3.8rem; font-weight: 700; text-align: center; padding: 1.6rem 0 1.8rem; } @media only screen and (max-width: 1600px) { .mv__txt p { font-size: calc(30 / 1600 * 100vw); } } @media only screen and (max-width: 640px) { .mv__txt p { font-size: calc(32 / 640 * 100vw); padding: calc(16 / 640 * 100vw) 0 calc(18 / 640 * 100vw); } } /*--------------- page nav ---------------*/ .nav { background-color: #654B29; } .nav__list { display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 640px) { .nav__list { align-items: baseline; } } .nav__item { width: 26.5rem; height: 9rem; border-right: 2px solid #FFFCC9; } @media only screen and (max-width: 958px) { .nav__item { height: calc(145 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item { width: calc(265 / 640 * 100vw); height: calc(145 / 640 * 100vw); } } .nav__item:first-child { border-left: 2px solid #FFFCC9; } @media only screen and (max-width: 640px) { .nav__item:first-child p { margin-top: calc(10 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item:last-child p { margin-top: calc(10 / 640 * 100vw); } } .nav__item a { display: flex; align-items: center; justify-content: center; height: 9rem; } @media only screen and (max-width: 958px) { .nav__item a { height: calc(145 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item a { flex-direction: column; height: auto; vertical-align: top; padding: calc(20 / 640 * 100vw) 0; line-height: normal; } } .nav__item p { font-size: 2rem; color: #fff; font-weight: 700; } @media only screen and (max-width: 958px) { .nav__item p { font-size: calc(24 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .nav__item p { font-size: calc(22 / 640 * 100vw); text-align: center; } } .nav__item-img { height: 4.7rem; aspect-ratio: 46/50; margin-right: 1rem; } @media only screen and (max-width: 640px) { .nav__item-img { width: calc(46 / 640 * 100vw); height: calc(50 / 640 * 100vw); margin-right: 0; } } .nav__item-img img { width: 100%; } /*--------------- news ---------------*/ .news .content { background-color: #FFFCC9; padding: 8rem 0 8.1rem; } @media only screen and (max-width: 640px) { .news .content { padding: calc(80 / 640 * 100vw) 0 calc(81 / 640 * 100vw); } } .news__table table { width: 100%; margin-top: 1.5rem; } @media only screen and (max-width: 640px) { .news__table table { margin-top: calc(15 / 640 * 100vw); } } .news__table tr { border-bottom: 1px solid #b78f5b; } .news__table th { display: block; text-align: left; font-size: 1.4rem; font-weight: 400; width: 64.3428571429%; margin: 1.6rem auto 0; } @media only screen and (max-width: 958px) { .news__table th { width: 90%; } } .news__table td { display: block; margin: 0.1rem auto 1.8rem; font-weight: 500; width: 64.3428571429%; } @media only screen and (max-width: 958px) { .news__table td { width: 90%; } } .news__btn { margin-top: 3.7rem; } /*--------------- campaign-info ---------------*/ .campaign-info .content { padding: 10rem 0 6rem; } @media only screen and (max-width: 640px) { .campaign-info .content { padding: calc(100 / 640 * 100vw) 0 calc(60 / 640 * 100vw); } } .campaign-info__txt { font-weight: 500; margin-top: 1.6rem; padding: 0 1.5rem; } .campaign-info__desc { margin-top: 1.5em; font-size: 1.4rem; font-weight: 500; } .period { margin-top: 1.5rem; } .period__item { display: flex; align-items: center; width: 48.8rem; margin: 0 auto; } @media only screen and (max-width: 640px) { .period__item { width: 100%; } } .period__item + .period__item { margin-top: 2rem; } .period_type { font-size: 1.8rem; color: #fff; font-weight: 500; background-color: #EB5505; width: 8.9rem; text-align: center; padding: 0.3rem 0 0.5rem; border-radius: 100vw; margin-right: 1.5rem; } .period_type-paypay { background-color: #E70012; } .period__date { font-weight: 500; } .point { margin-top: 2rem; padding: 0 1.5rem; } .point th { font-weight: 500; width: 5.7rem; } @media only screen and (max-width: 640px) { .point th { display: block; margin-top: 1rem; width: 100%; text-align: left; } } .point td { font-weight: 500; } @media only screen and (max-width: 640px) { .point td { display: block; } } /*--------------- target ---------------*/ .target__period { display: flex; justify-content: center; gap: 3rem; } @media only screen and (max-width: 640px) { .target__period { gap: calc(30 / 640 * 100vw); } } .target__period-type { background-color: #EB5505; border-radius: 8px; color: #fff; font-size: 1.4rem; font-weight: 500; padding: 0.8rem 1.1rem 1rem 1.3rem; } @media only screen and (max-width: 640px) { .target__period-type { padding: calc(10 / 640 * 100vw) calc(10 / 640 * 100vw) calc(10 / 640 * 100vw) calc(12 / 640 * 100vw); font-size: calc(21 / 640 * 100vw); } } .target__period-type-paypay { background-color: #E70012; } .target__period-img { width: 10.6rem; margin: 2.1rem auto 4rem; } @media only screen and (max-width: 640px) { .target__period-img { margin: calc(21 / 640 * 100vw) auto calc(40 / 640 * 100vw); } } .target__period-txt { font-weight: 500; margin-left: 13rem; } @media only screen and (max-width: 1600px) { .target__period-txt { margin-left: calc(130 / 1600 * 100vw); } } @media only screen and (max-width: 640px) { .target__period-txt { margin-left: 0; } } .target__detail { display: flex; } @media only screen and (max-width: 640px) { .target__detail { flex-direction: column; } } .target__detail-img { width: 7.9rem; margin-right: 2rem; } @media only screen and (max-width: 640px) { .target__detail-img { margin: 0 auto 2rem; } } .target__detail-list { flex: 1; margin-top: 0.5rem; } .target__detail-item { display: flex; align-items: center; } .target__detail-item + .target__detail-item { margin-top: 2rem; } @media only screen and (max-width: 640px) { .target__detail-item + .target__detail-item { margin-top: calc(10 / 640 * 100vw); } } .target__detail-ttl { color: #654B29; font-weight: 500; border: 1px solid #654B29; border-radius: 100vw; width: 11.1rem; height: 3.7rem; text-align: center; padding: 0.6rem 0 0.7rem; margin-right: 1.6rem; } @media only screen and (max-width: 640px) { .target__detail-ttl { width: calc(120 / 640 * 100vw); height: calc(42 / 640 * 100vw); font-size: calc(20 / 640 * 100vw); padding: calc(6 / 640 * 100vw) 0 calc(7 / 640 * 100vw); } } .target__detail-txt { flex: 1; font-weight: 500; } @media only screen and (max-width: 640px) { .target__detail-txt { font-size: calc(23 / 640 * 100vw); } } .target__detail-txt span { font-size: 1.4rem; margin-left: 1rem; } @media only screen and (max-width: 640px) { .target__detail-txt span { font-size: calc(16 / 640 * 100vw); line-height: 0.8; } } /*--------------- points-target ---------------*/ .points-target .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .points-target .content { padding-top: calc(60 / 640 * 100vw); } } .points-target__block { padding: 0.6rem 0 2rem; } @media only screen and (max-width: 640px) { .points-target__block { padding: calc(15 / 640 * 100vw) 0 calc(20 / 640 * 100vw); } } .points-target__textblock { padding-bottom: 0; } @media only screen and (max-width: 640px) { .points-target__textblock { padding-top: calc(25 / 640 * 100vw); } } .points-target__txt { font-weight: 500; } /*--------------- campaign-target ---------------*/ .campaign-target .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .campaign-target .content { padding-top: calc(60 / 640 * 100vw); } } .points-target__desc { font-size: 1.4rem; font-weight: 500; text-align: center; } .campaign-target__sttl p { width: 22rem; } .campaign-target__txt { text-align: center; font-weight: 500; margin-top: 1.6rem; } @media only screen and (max-width: 958px) { .campaign-target__txt { font-size: calc(22 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .campaign-target__txt { font-size: calc(18 / 640 * 100vw); margin-top: calc(16 / 640 * 100vw); } } .howto { margin-top: 3rem; } .howto--paypay { margin-top: 7.7rem; position: relative; /* &::after { content: "ダミー"; position: absolute; font-size: 10rem; font-weight: 800; top: 50%; left: 50%; color: blue; transform: translate(-50%, -50%); } */ } .howto--paypay .howto__item-txtarea { height: 5rem; } @media only screen and (max-width: 958px) { .howto--paypay .howto__item-txtarea { height: calc(40 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .howto--paypay .howto__item-txtarea { height: auto; } } .howto--paypay .howto__item-num { background-color: #E70012; } .howto__ttl { background-color: #EB5505; color: #fff; font-size: 1.8rem; font-weight: 500; text-align: center; width: 8.9rem; border-radius: 100vw; padding: 0.3rem 0 0.5rem; margin: 0 auto; } .howto__ttl-paypay { background-color: #E70012; } .howto__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 5rem 3rem; margin-top: 2.7rem; } @media only screen and (max-width: 958px) { .howto__list { gap: calc(30 / 958 * 100vw) calc(20 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .howto__list { grid-template-columns: repeat(1, 1fr); gap: calc(50 / 640 * 100vw) 0; } } .howto__item-txtarea { display: flex; height: 8.6rem; } @media only screen and (max-width: 958px) { .howto__item-txtarea { height: calc(90 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .howto__item-txtarea { height: auto; } } .howto__item-num { background-color: #EB5505; color: #fff; font-size: 1.8rem; width: 2.7rem; height: 2.7rem; line-height: normal; border-radius: 100vw; text-align: center; margin-right: 0.6rem; } .howto__txt { flex: 1; } @media only screen and (max-width: 958px) { .howto__txt { font-size: calc(16 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .howto__txt { font-size: calc(22 / 640 * 100vw); } } .howto__img { height: 28rem; width: auto; text-align: center; margin-top: 1.4rem; } @media only screen and (max-width: 958px) { .howto__img { height: calc(280 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .howto__img { height: calc(300 / 640 * 100vw); } } /*--------------- excluded ---------------*/ .excluded .content { padding-top: 7.9rem; } @media only screen and (max-width: 640px) { .excluded .content { padding-top: calc(80 / 640 * 100vw); } } .c-block__excluded { padding: 1.4rem 0 2rem; } .excluded__wrapper { display: flex; } @media only screen and (max-width: 640px) { .excluded__wrapper { flex-direction: column; gap: calc(20 / 640 * 100vw); } } .excluded__ttl { width: 18.7rem; height: 3.4rem; margin-right: 6rem; font-size: 1.8rem; font-weight: 500; color: #654B29; text-align: center; border: 1px solid; border-radius: 100vw; padding-top: 0.2rem; } @media only screen and (max-width: 640px) { .excluded__ttl { margin: 0 auto; font-size: calc(24 / 640 * 100vw); height: calc(47 / 640 * 100vw); width: calc(187 / 640 * 100vw); } } .excluded__ttl-l { height: 6.2rem; } @media only screen and (max-width: 640px) { .excluded__ttl-l { height: calc(47 / 640 * 100vw); width: calc(300 / 640 * 100vw); } } .excluded__list { flex: 1; } @media only screen and (max-width: 640px) { .excluded__list { padding-left: calc(30 / 640 * 100vw); } } .excluded__item { list-style: disc; } /*--------------- usage ---------------*/ .usage .content { background: #FFFCC9; margin: 6rem 0; padding: 5.7rem 0; } @media only screen and (max-width: 640px) { .usage .content { margin: calc(60 / 640 * 100vw) 0; padding: calc(57 / 640 * 100vw) 0; } } .accordion-trigger { background-color: #654B29; color: #fff; font-size: 2rem; text-align: center; width: 100%; padding: 1.8rem 0 1.5rem; } .usage__ttl { background: #EB5505; border: 2px solid #654B29; border-radius: 4px; color: #fff; font-size: 2rem; width: 10.8rem; text-align: center; padding: 0.5rem 0 1rem; margin: 0 auto; isolation: isolate; margin-top: 3rem; } .usage__ttl-paypay { background: #E70012; } .c-body__container--usage { background: #fff; border: 2px solid #654B29; border-radius: 4px; } .c-body__container--usage-paypay .c-block { position: relative; /* &::after { content: "ダミー"; position: absolute; font-size: 10rem; font-weight: 800; top: 50%; left: 50%; color: blue; transform: translate(-50%, -50%); } */ } .usage__img img { width: 100%; } .usage__img + .usage__img { margin-top: 2rem; } .usage__link { margin-top: 3rem; } .usage__link a { color: #EB5505; font-weight: 600; text-decoration: underline; } @media only screen and (max-width: 640px) { .usage__link a { font-size: calc(22 / 640 * 100vw); } } .usage__link-paypay a { color: #E70012; } /*--------------- instructions ---------------*/ .instructions .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .instructions .content { padding-top: calc(60 / 640 * 100vw); } } .instructions .c-block { border-bottom: none; } .instructions__ttl { background-color: #EB5505; color: #fff; font-size: 1.8rem; font-weight: 500; text-align: center; width: 8.9rem; border-radius: 100vw; padding: 0.3rem 0 0.5rem; margin: 0 auto; } .instructions__ttl-paypay { background: #E70012; } .instructions__img { width: 90%; margin: 3rem auto 0; } @media only screen and (max-width: 640px) { .instructions__img { width: 100%; margin: calc(30 / 640 * 100vw) auto 0; } } .instructions__img img { width: 100%; } /*--------------- support ---------------*/ .support .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .support .content { padding-top: calc(60 / 640 * 100vw); } } .support__wrapper { margin-top: 2rem; } .support__txt { font-size: 1.8rem; font-weight: 500; width: 50rem; margin: 0 auto 2rem; } @media only screen and (max-width: 640px) { .support__txt { width: 100%; font-size: calc(24 / 640 * 100vw); } } .support__info { border-top: 2px solid #654B29; border-bottom: 2px solid #654B29; padding: 2rem 0; text-align: center; } @media only screen and (max-width: 640px) { .support__info { padding: calc(20 / 640 * 100vw) 0; } } .support__info-name { font-size: 3rem; } @media only screen and (max-width: 640px) { .support__info-name { font-size: 2.4rem; } } .support__info-tel { font-size: 2.5rem; font-weight: bold; margin-top: 1rem; } .support__info-time { margin-top: 0.5rem; } .support__howto { width: 80%; margin: 2rem auto; } @media only screen and (max-width: 958px) { .support__howto { width: 100%; } } .support__howto-mttl { margin-bottom: 1rem; } .support__howto-ttl { font-size: 1.8rem; margin-bottom: 1rem; } @media only screen and (max-width: 640px) { .support__howto-ttl { font-size: calc(22 / 640 * 100vw); } } .support__howto-list { display: flex; flex-direction: column; gap: 0.7rem; } .shop { background: #fff; padding: 2rem 4rem 4rem; } @media only screen and (max-width: 640px) { .shop { padding: calc(20 / 640 * 100vw) 0 calc(40 / 640 * 100vw); } } .shop__ttl { font-size: 2.2rem; text-align: center; } .shop__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 2rem; margin-top: 2rem; } @media only screen and (max-width: 958px) { .shop__list { grid-template-columns: repeat(1, 1fr); width: 77%; margin: 2rem auto 0; } } @media only screen and (max-width: 640px) { .shop__list { width: 90%; } } .shop__item-name { font-size: 2.2rem; font-weight: 500; padding-left: 2.5rem; position: relative; } @media only screen and (max-width: 640px) { .shop__item-name { font-size: calc(26 / 640 * 100vw); line-height: normal; padding-left: calc(28 / 640 * 100vw); } } .shop__item-name::before { content: "●"; color: #EB5505; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 640px) { .shop__item-name::before { transform: none; top: 7%; } } .shop__item-name.paypay::before { color: #E70012; } .shop__item-info { margin-left: 2rem; } @media only screen and (max-width: 640px) { .shop__item-add { font-size: calc(18 / 640 * 100vw); } } @media only screen and (max-width: 640px) { .shop__item-tel { font-size: calc(22 / 640 * 100vw); } } .c-block--paypay { position: relative; /* &::after { content: "ダミー"; position: absolute; font-size: 10rem; top: 20%; left: 50%; color: blue; transform: translate(-50%, -50%); display: none; } */ } /*--------------- attention ---------------*/ .attention .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .attention .content { padding-top: calc(60 / 640 * 100vw); } } .c-ttl__au { background-color: #EB5505; } .attention__list { display: flex; flex-direction: column; gap: 2rem; gap: 2.4rem; } @media only screen and (max-width: 640px) { .attention__list { gap: calc(20 / 640 * 100vw); } } .attention__item-txt { font-weight: 500; padding-left: 1.5rem; position: relative; } .attention__item-txt::before { content: "・"; position: absolute; left: 0; color: #333; } .attention__s-list { margin-left: 1rem; } .attention__s-item { font-weight: 500; position: relative; padding-left: 1.5rem; } @media only screen and (max-width: 640px) { .attention__s-item { padding-left: calc(25 / 640 * 100vw); } } .attention__s-item::before { content: "ー"; position: absolute; left: 0; color: #333; } .attention__desc { font-weight: 500; padding-left: 4.2rem; position: relative; } @media only screen and (max-width: 640px) { .attention__desc { padding-left: calc(42 / 640 * 100vw); } } .attention__desc::before { content: ""; position: absolute; background: url("../image/Icon_megaphone.png") no-repeat center center; background-size: contain; width: 3.1rem; height: 2.4rem; left: 0; top: 0; } @media only screen and (max-width: 640px) { .attention__desc::before { width: calc(31 / 640 * 100vw); height: calc(24 / 640 * 100vw); top: 2%; } } .attention__button { margin-top: 2.5rem; } .attention__btn { display: block; color: #fff !important; background-color: #EB5505; border-radius: 100vw; width: fit-content; padding: 0.8rem 5rem 0.9rem 2.5rem; margin: 0 auto; position: relative; } @media only screen and (max-width: 958px) { .attention__btn { font-size: calc(21 / 958 * 100vw); } } @media only screen and (max-width: 640px) { .attention__btn { font-size: calc(22 / 640 * 100vw); text-align: center; } } .attention__btn::after { content: ""; position: absolute; background: url("../image/icon-arrow02.png") no-repeat center center; background-size: contain; width: 0.7rem; height: 1.1rem; top: 50%; transform: translateY(-50%); right: 1.6rem; } .c-ttl__paypay { background-color: #E70012; } .attention__desc-paypay { position: relative; } .attention__desc-paypay::before { content: ""; position: absolute; background: url("../image/icon_megaphone02.png") no-repeat center center; background-size: contain; width: 3.1rem; height: 2.4rem; left: 0; top: 0; } @media only screen and (max-width: 640px) { .attention__desc-paypay::before { width: calc(31 / 640 * 100vw); height: calc(24 / 640 * 100vw); top: 2%; } } /*--------------- privacy ---------------*/ .privacy .content { padding-top: 6rem; } @media only screen and (max-width: 640px) { .privacy .content { padding-top: calc(60 / 640 * 100vw); } } .c-block--privacy { padding-top: 0.9rem; } .privacy__list { margin-bottom: 1.6rem; } .privacy__item { font-weight: 500; padding-left: 1.5rem; position: relative; } .privacy__item::before { content: "・"; position: absolute; left: 0; color: #333; } .privacy__link + .privacy__link { margin-top: 1rem; } .privacy__link-ttl { font-weight: 500; } .privacy__link-url { color: #244abd; text-decoration: underline; display: block; word-break: break-all; } /*--------------- warning ---------------*/ .warning .content { padding: 4rem 0 8rem; } @media only screen and (max-width: 640px) { .warning .content { padding: calc(40 / 640 * 100vw) 0 calc(80 / 640 * 100vw); } } .warning__container { background: #E70012; border-radius: 1.5rem; padding: 2.5rem 2rem 3.8rem; text-align: center; } .warning__ttl { text-align: center; background-color: #ffff4c; padding: 0.5rem 0 0.6rem; border-radius: 100vw; width: 65.6rem; margin: 0 auto; } @media only screen and (max-width: 958px) { .warning__ttl { width: 100%; } } .warning__ttl img { margin-bottom: 0.5rem; margin-right: 1rem; } .warning__ttl span { font-size: 2.2rem; font-weight: 800; } .warning__subttl { font-size: 1.9rem; font-weight: 800; color: #fff; margin: 2rem 0 2.3rem; } @media only screen and (max-width: 640px) { .warning__subttl { font-size: calc(24 / 640 * 100vw); margin: calc(20 / 640 * 100vw) 0 calc(23 / 640 * 100vw); } } .warning__txt { color: #fff; font-weight: 700; } @media only screen and (max-width: 640px) { .warning__txt { text-align: left; } } .warning__txt + .warning__txt { margin-top: 1rem; } .warning__txt-storong { background: #fff; color: #E70012; font-size: 1.9rem; font-weight: 800; width: 50.5rem; margin: 2.3rem auto 0; padding: 0.8rem 0; } @media only screen and (max-width: 640px) { .warning__txt-storong { width: 100%; font-size: calc(24 / 640 * 100vw); } }/*# sourceMappingURL=common.css.map */