@charset "UTF-8"; .mod-freeHTML #firsttank1203-wrapper h1, .mod-freeHTML #firsttank1203-wrapper h2, .mod-freeHTML #firsttank1203-wrapper h3 { margin: 0; font-size: 100%; } .mod-freeHTML #firsttank1203-wrapper ul { margin: 0; padding: 0; list-style: none; } .mod-freeHTML #firsttank1203-wrapper p { margin: 0; } .mod-freeHTML #firsttank1203-wrapper img { height: auto; max-width: 100%; width: auto; } .mod-freeHTML #firsttank1203-wrapper img[src$=".svg"] { width: 100%; } .mod-freeHTML #firsttank1203-wrapper sup { font-size: 0.714em; } .mod-freeHTML #firsttank1203-wrapper * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML #firsttank1203-wrapper *::after, .mod-freeHTML #firsttank1203-wrapper *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .mod-freeHTML #firsttank1203-wrapper input[type=text] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 100%; padding: 0; border: none; height: 1.5em; } .mod-freeHTML #firsttank1203-wrapper table { border-collapse: collapse; border: none; border-spacing: 0; } .mod-freeHTML #firsttank1203-wrapper th, .mod-freeHTML #firsttank1203-wrapper td { vertical-align: top; border: none; font-weight: normal; text-align: left; } .mod-freeHTML #firsttank1203-wrapper caption { text-align: left; } /* ======================================== common style ========================================*/ .mod-freeHTML #firsttank1203-wrapper * { min-height: 0vw; /* Safari clamp関数対策 */ font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif; font-feature-settings: "palt"; font-size: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .u-pc { display: none; } } @media (min-width: 641px) { .mod-freeHTML #firsttank1203-wrapper .u-sp { display: none; } } .mod-freeHTML #firsttank1203-wrapper .iBlock { font-size: 1em; /* フォントサイズを継承しなかった */ display: inline-block; } .mod-freeHTML #firsttank1203-wrapper .l-inner { width: 84.375%; max-width: 900px; margin: 0 auto; } .mod-freeHTML #firsttank1203-wrapper .l-heading { margin: 0 auto 40px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .l-heading { margin-bottom: 6.25vw; } } .mod-freeHTML #firsttank1203-wrapper .l-heading__txt { color: #ea5b02; font-size: 2.4em; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .l-heading__txt { font-size: clamp(1em, 5vw, 2em); } } .mod-freeHTML #firsttank1203-wrapper .l-heading__txt--line { padding-bottom: 7px; background: linear-gradient(transparent 94%, #ea5b02 0%); letter-spacing: 0.05em; line-height: 1.75em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .l-heading__txt--line { padding-bottom: 5px; } } .mod-freeHTML #firsttank1203-wrapper .l-notes li { letter-spacing: 0.05em; line-height: 1.5em; display: inline; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .l-notes li { font-size: min(2.8125vw, 1.1em); } } .mod-freeHTML #firsttank1203-wrapper .l-notes__link { text-decoration: underline; } .mod-freeHTML #firsttank1203-wrapper .l-notes__link:hover { text-decoration: none; } /* ======================================== kv style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .kv__img img { width: 100%; max-width: none; } /* ======================================== intro style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .intro .l-inner { max-width: 680px; padding-top: 120px; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro .l-inner { padding-top: 12.5vw; flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .intro__txt { margin-right: 10.2941176471%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro__txt { margin: 0 auto 5.5555555556%; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro__txt__copy { text-align: center; } } .mod-freeHTML #firsttank1203-wrapper .intro__txt__copy .marker { padding: 0.2em; background: #ea5b02; color: #FFFFFF; font-size: clamp(1.7em, 1.8333333333vw, 2.2em); letter-spacing: 0.1em; line-height: 2em; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro__txt__copy .marker { padding: 0.25em 0.5em; font-size: clamp(1em, 4.6875vw, 1.9em); letter-spacing: 0.05em; line-height: 2.25em; } } .mod-freeHTML #firsttank1203-wrapper .intro__txt__model { font-size: clamp(2em, 2.25vw, 2.7em); font-weight: bold; letter-spacing: 0.05em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro__txt__model { margin-top: 0.5em; font-size: clamp(1em, 5.625vw, 2.2em); text-align: center; } } .mod-freeHTML #firsttank1203-wrapper .intro__img { width: 50.7352941176%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .intro__img { width: 70.3703703704%; } } /* ======================================== anchor style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .anchor .l-inner { max-width: 800px; padding-top: 70px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor .l-inner { width: 87.5%; padding-top: 9.375vw; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor .l-heading { width: 96.4285714286%; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.125%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor__list { grid-template-columns: repeat(1, 1fr); gap: 4.6875vw 0; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list__item { position: relative; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor__list__item { padding-right: 2.5%; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::before, .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::after { content: ""; width: 100%; height: 80.8510638298%; display: block; position: absolute; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::before, .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::after { width: 87.5%; height: 100%; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::before { background: #FFFFFF; bottom: 0; right: 0; z-index: -1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::before { right: 2.5%; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::after { background: #c3c3c3; opacity: 0.8; bottom: -5px; right: -5px; z-index: -2; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .anchor__list__item::after { bottom: -4%; right: 1.25%; } } .mod-freeHTML #firsttank1203-wrapper .anchor__list__item:hover::after, .mod-freeHTML #firsttank1203-wrapper .anchor__list__item:focus::after { opacity: 0.6; } /* ======================================== point style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .point .l-inner { padding-top: 130px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point .l-inner { padding-top: 15.625vw; } } .mod-freeHTML #firsttank1203-wrapper .point__ttl { text-align: center; margin-bottom: 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ttl { margin-bottom: 7.8125vw; } } .mod-freeHTML #firsttank1203-wrapper .point__ttl__wrap { position: relative; font-size: 5em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ttl__wrap { font-size: clamp(1em, 8.125vw, 3.3em); } } .mod-freeHTML #firsttank1203-wrapper .point__ttl__num { width: 9em; display: inline-block; } @media (min-width: 641px) { .mod-freeHTML #firsttank1203-wrapper .point__ttl__num { position: absolute; top: 50%; left: -30px; transform: translate(-100%, -50%); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ttl__num { width: 16.25vw; margin: 0 auto 3.125vw; display: block; } } .mod-freeHTML #firsttank1203-wrapper .point__ttl__txt { padding-bottom: 0.1em; background: linear-gradient(transparent 78%, #ffdb00 0%); color: #ea5b02; font-family: "Yu Mincho Medium", "游明朝 Medium", YuMincho, "游明朝体", serif; font-size: 1em; font-weight: 600; letter-spacing: 0.1em; display: inline; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ttl__txt { letter-spacing: 0.05em; } } .mod-freeHTML #firsttank1203-wrapper .point__txt { margin-bottom: 60px; font-size: 1.6em; font-weight: bold; letter-spacing: 0.15em; line-height: 2em; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__txt { margin-bottom: 7.8125vw; font-size: clamp(1em, 3.75vw, 1.5em); letter-spacing: 0.05em; } } .mod-freeHTML #firsttank1203-wrapper .point__compact { margin: 0 2.7777777778%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 5.8823529412%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__compact { margin: 0; grid-template-columns: repeat(1, 1fr); gap: 9.375vw 0; } } .mod-freeHTML #firsttank1203-wrapper .point__compact__img + .l-notes { width: 36.5%; margin: 1em 6.25% 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__compact__img + .l-notes { width: 39.2592592593%; margin-right: 0; } } .mod-freeHTML #firsttank1203-wrapper .point__app { padding: 5.5555555556%; background: #fcecde; border-radius: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app { padding: 6.7796610169% 4.2372881356%; border-radius: 3.125vw; } } .mod-freeHTML #firsttank1203-wrapper .point__app__name { margin-bottom: 20px; display: flex; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__name { margin-bottom: 3.125vw; } } .mod-freeHTML #firsttank1203-wrapper .point__app__name__icon { width: 60px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__name__icon { width: 17.4074074074%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__name__txt { margin-left: 1.25em; font-size: 1.6em; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__name__txt { margin-left: 1em; font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank1203-wrapper .point__app__txt { font-size: 1.4em; font-weight: bold; letter-spacing: 0.05em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__txt { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank1203-wrapper .point__app__function { margin: 40px 0 60px; display: flex; align-content: space-between; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function { margin: 7.4074074074% auto; flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .point__app__function__img { width: 31.25%; margin-right: 6.25%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function__img { width: 62.962962963%; margin: 0 auto 5.5555555556%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__function__list { width: 62.5%; display: flex; flex-wrap: wrap; align-content: space-between; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function__list { width: 100%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li { width: 22%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li { width: 22.2222222222%; margin-bottom: 3.7037037037%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li:not(:nth-child(4n)) { margin-right: 4%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li:not(:nth-child(4n)) { margin-right: 3.7037037037%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li img { border: solid 1px #eeba2f; border-radius: 8px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__function__list li img { border-radius: 1.5625vw; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step { display: flex; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step { margin: 3.125vw auto 0; flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step__item { width: 33.33333%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__item { width: 100%; text-align: left; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__item:last-of-type .point__app__step__img { width: 29.6296296296%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step__num { width: 70px; margin: 0 auto 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__num { width: 14.8148148148%; margin: 0 1.8518518519% 0 0; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step__txt { margin-bottom: 20px; font-size: 1.6em; font-weight: bold; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__txt { margin: 0; font-size: clamp(1em, 3.75vw, 1.5em); text-align: left; flex-shrink: 0; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step__img { height: 75px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__img { width: 18.5185185185%; height: auto; margin-left: auto; } } @media (min-width: 641px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__img img { height: 100%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__step__arrow { height: 9px; margin: auto 1.3333333333%; border-left: solid 18px #ea5b02; border-top: solid 18px transparent; border-bottom: solid 18px transparent; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__step__arrow { width: 4.375vw; height: 2.1875vw; margin: 3.125vw 4.0625vw; border-top: solid 2.1875vw #ea5b02; border-left: solid 2.1875vw transparent; border-right: solid 2.1875vw transparent; border-bottom: none; } } .mod-freeHTML #firsttank1203-wrapper .point__app--flex { margin-top: 30px; display: flex; align-items: center; } @media (min-width: 641px) { .mod-freeHTML #firsttank1203-wrapper .point__app--flex { padding-right: 3.3333333333%; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app--flex { margin-top: 5.5555555556%; flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .point__app__line--txt .point__app__txt { margin-bottom: 1.25em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__line--txt .point__app__txt { margin-bottom: 0.5em; } } .mod-freeHTML #firsttank1203-wrapper .point__app__line--img { width: 30.487804878%; flex-shrink: 0; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__line--img { width: 75.9259259259%; margin-top: 5.5555555556%; } } .mod-freeHTML #firsttank1203-wrapper .point__app__line--img .l-notes { margin: 10px 0 0 15.3846153846%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__app__line--img .l-notes { margin: 0.5em 0 0; } } .mod-freeHTML #firsttank1203-wrapper .point__cost { max-width: 600px; margin: 0 auto 70px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost { width: 100%; margin-bottom: 18.5185185185%; } } .mod-freeHTML #firsttank1203-wrapper .point__cost__item--std { max-width: 547px; margin: 0 auto; } .mod-freeHTML #firsttank1203-wrapper .point__cost__name { font-weight: bold; } .mod-freeHTML #firsttank1203-wrapper .point__cost__name--std { color: #b99c00; font-size: 1.8em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost__name--std { font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank1203-wrapper .point__cost__name--ft { color: #ea5b02; font-size: 2.6em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost__name--ft { font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow { margin: 40px auto 30px; color: #ea5b02; font-size: 1.4em; font-weight: bold; line-height: 1.75em; text-align: center; position: relative; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow { margin: 7.4074074074% auto 3.7037037037%; font-size: clamp(1em, 3.75vw, 1.5em); line-height: 1.5em; } } .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow::after { content: ""; border-top: solid 70px #fcecde; border-left: solid 70px transparent; border-right: solid 70px transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow::after { border-width: 5.5em; } } .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow .big { font-size: 1.42857em; letter-spacing: 0.1em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__cost__arrow .big { font-size: 1.25em; } } .mod-freeHTML #firsttank1203-wrapper .point__sheets { margin-bottom: 50px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__sheets { margin-bottom: 9.2592592593%; } } .mod-freeHTML #firsttank1203-wrapper .point__ink { padding-top: 70px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ink { padding-top: 14.8148148148%; } } .mod-freeHTML #firsttank1203-wrapper .point__ink__img { max-width: 420px; margin: 0 auto 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point__ink__img { margin-bottom: 7.4074074074%; } } .mod-freeHTML #firsttank1203-wrapper .point__ink .l-notes { text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .point#link-point02 .l-inner { width: 92.1875%; } } .mod-freeHTML #firsttank1203-wrapper .point#link-point02 .l-inner .point__ttl, .mod-freeHTML #firsttank1203-wrapper .point#link-point02 .l-inner .point__txt { width: 91.5254237288%; margin-left: auto; margin-right: auto; } .mod-freeHTML #firsttank1203-wrapper .point#link-point03 .l-inner { max-width: 800px; } /* ======================================== feature style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .feature .l-inner { max-width: 800px; padding-top: 120px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .feature .l-inner { padding-top: 18.75vw; } } .mod-freeHTML #firsttank1203-wrapper .feature__bnr { display: block; position: relative; z-index: 1; } .mod-freeHTML #firsttank1203-wrapper .feature__bnr::before, .mod-freeHTML #firsttank1203-wrapper .feature__bnr::after { content: ""; width: 100%; height: 100%; display: block; position: absolute; } .mod-freeHTML #firsttank1203-wrapper .feature__bnr::before { border: solid 3px #ea5b02; top: 0; left: 0; z-index: 2; } .mod-freeHTML #firsttank1203-wrapper .feature__bnr::after { background: #c3c3c3; opacity: 0.8; bottom: -5px; right: -5px; z-index: -1; } .mod-freeHTML #firsttank1203-wrapper .feature__bnr__txt { padding: 1.25em 1.25em 0; background: #ea5b02; color: #FFFFFF; font-size: clamp(1.8em, 2vw, 2.4em); font-weight: bold; letter-spacing: 0.06em; text-align: center; display: block; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .feature__bnr__txt { font-size: clamp(1em, 3.75vw, 1.5em); } } /* ======================================== banner style ========================================*/ .mod-freeHTML #firsttank1203-wrapper .banner .l-inner { padding: 120px 0; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner .l-inner { padding: 18.75vw 0 10.9375vw; } } .mod-freeHTML #firsttank1203-wrapper .banner__ttl { margin-bottom: 40px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__ttl { margin-bottom: 1.5em; } } .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt { color: #ea5b02; font-size: 2.4em; font-weight: bold; letter-spacing: 0.1em; display: inline-block; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt { font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt::before, .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt::after { content: ""; width: 1px; height: 70%; background: #ea5b02; display: block; position: absolute; top: 50%; transform-origin: bottom center; } .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt::before { left: -0.5em; transform: translateY(-50%) rotate(-30deg); } .mod-freeHTML #firsttank1203-wrapper .banner__ttl__txt::after { right: -0.5em; transform: translateY(-50%) rotate(30deg); } .mod-freeHTML #firsttank1203-wrapper .banner__big { margin-bottom: 40px; border: solid 1px #c3c3c3; display: grid; grid-template-columns: 43.3333333333% 56.6666666667%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__big { margin-bottom: 7.4074074074%; grid-template-columns: 1fr; } } .mod-freeHTML #firsttank1203-wrapper .banner__big__detail { position: relative; } .mod-freeHTML #firsttank1203-wrapper .banner__big__detail__btn { width: 48.2352941176%; position: absolute; left: 50%; top: 79%; transform: translate(-50%, 0); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__big__detail__btn { width: 68.5185185185%; top: 77.8443113772%; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference { margin-top: 100px; padding: 4.4444444444%; background: #fcecde; border-radius: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference { margin-top: 18.5185185185%; padding: 9.2592592593% 5.5555555556%; border-radius: 3.125vw; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl { max-width: 720px; margin: 0 auto; text-align: center; display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl { flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl__logo { width: 55px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl__logo { width: 16.6666666667%; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl .l-heading { margin: 0 2.7777777778%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl .l-heading { margin: 10px 0 0; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl .l-heading__txt { font-size: 1.6em; } .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl .l-heading__txt--line { padding-bottom: 5px; line-height: 2em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__ttl .l-heading__txt--line { padding-bottom: 4px; font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__item { max-width: 720px; margin: 3.3333333333% auto 0.5em; padding-left: 0.75em; font-size: 1.4em; letter-spacing: 0.1em; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__item { margin-top: 6.25%; font-size: clamp(1em, 3.4375vw, 1.4em); letter-spacing: 0; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__item::before { content: ""; width: 0.3571428571em; height: 1em; background: #ea5b02; display: inline-block; position: absolute; top: 0; left: 0; transform: translateY(0.3em); } .mod-freeHTML #firsttank1203-wrapper .banner__reference__list { max-width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__list { flex-direction: column; } } .mod-freeHTML #firsttank1203-wrapper .banner__reference__list li { width: calc(33.33333% - 1em); margin-right: 1em; font-size: 1.4em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference__list li { width: 100%; margin: 0; font-size: clamp(1em, 3.4375vw, 1.4em); } } .mod-freeHTML #firsttank1203-wrapper .banner__reference + .l-heading { margin-top: 100px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__reference + .l-heading { margin-top: 18.5185185185%; } } .mod-freeHTML #firsttank1203-wrapper .banner__wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.3333333333%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank1203-wrapper .banner__wrap { grid-template-columns: repeat(1, 1fr); gap: 4.6875vw 0; } } .mod-freeHTML #firsttank1203-wrapper .banner__wrap__item a img { border: solid 0.5px #c3c3c3; }/*# sourceMappingURL=enjoy-with-family.css.map */