@charset "UTF-8"; /* @include animation(anime-opening_face 4s ease 0.5s); @include keyframes(anime-opening_face){ 0% { transform: translate(-50%,100%); } 30% { transform: translate(-50%,0); } 70% { transform: translate(-50%,0); } 100%{ transform: translate(-50%,100%); } } */ /* ======================================== common style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper.js-page_loaded { opacity: 1; } .mod-freeHTML #firsttank-202309-wrapper h1, .mod-freeHTML #firsttank-202309-wrapper h2, .mod-freeHTML #firsttank-202309-wrapper h3 { margin: 0; font-size: 100%; } .mod-freeHTML #firsttank-202309-wrapper ul { margin: 0; padding: 0; list-style: none; } .mod-freeHTML #firsttank-202309-wrapper p { margin: 0; } .mod-freeHTML #firsttank-202309-wrapper img { height: auto; max-width: 100%; width: auto; } .mod-freeHTML #firsttank-202309-wrapper img[src$=".svg"] { width: 100%; } .mod-freeHTML #firsttank-202309-wrapper sup { font-size: 0.714em; } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper *::after, .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper input[type=text] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 100%; padding: 0; border: none; height: 1.5em; } .mod-freeHTML #firsttank-202309-wrapper table { border-collapse: collapse; border: none; border-spacing: 0; } .mod-freeHTML #firsttank-202309-wrapper th, .mod-freeHTML #firsttank-202309-wrapper td { vertical-align: top; border: none; font-weight: normal; text-align: left; } .mod-freeHTML #firsttank-202309-wrapper caption { text-align: left; } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .u-pc { display: none; } } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .u-sp { display: none; } } .mod-freeHTML #firsttank-202309-wrapper .iBlock { font-size: 1em; /* フォントサイズを継承しなかった */ display: inline-block; } .mod-freeHTML #firsttank-202309-wrapper .l-inner { width: 84.375%; max-width: 900px; margin: 0 auto; padding: 120px 0; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-inner { padding: 10.9375vw 0; } } .mod-freeHTML #firsttank-202309-wrapper .l-title { margin-bottom: 40px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-title { margin-bottom: 6.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .l-title__txt { padding-bottom: 10px; background: linear-gradient(transparent 95%, #ea5b02 0%); color: #ea5b02; font-size: 3em; letter-spacing: 0.05em; line-height: 1.75em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-title__txt { padding-bottom: 4px; font-size: clamp(1em, 5.625vw, 2.3em); } } .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .big { padding: 0 0.2em; font-size: 1.66667em; display: inline-block; vertical-align: baseline; transform: translateY(0.1em); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .big { padding: 0 0.1em; } } .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .sub { display: block; line-height: 1em; } .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .sub--mid { font-size: 0.8em; } .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .sub--small { font-size: 0.66667em; line-height: 1.4em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-title__txt .sub--small { font-size: 0.76923em; } } .mod-freeHTML #firsttank-202309-wrapper .l-heading { text-align: center; } .mod-freeHTML #firsttank-202309-wrapper .l-heading--alone { margin-bottom: 120px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-heading--alone { margin-bottom: 9.375vw; } } .mod-freeHTML #firsttank-202309-wrapper .l-heading__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 #firsttank-202309-wrapper .l-heading__txt { font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank-202309-wrapper .l-heading__txt::before, .mod-freeHTML #firsttank-202309-wrapper .l-heading__txt::after { content: ""; width: 1px; height: 70%; background: #ea5b02; display: block; position: absolute; top: 50%; transform-origin: bottom center; } .mod-freeHTML #firsttank-202309-wrapper .l-heading__txt::before { left: -0.5em; transform: translateY(-50%) rotate(-30deg); } .mod-freeHTML #firsttank-202309-wrapper .l-heading__txt::after { right: -0.5em; transform: translateY(-50%) rotate(30deg); } .mod-freeHTML #firsttank-202309-wrapper .l-txt { font-size: 1.6em; letter-spacing: 0.15em; line-height: 2em; text-align: center; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-txt { font-size: clamp(1em, 3.75vw, 1.5em); letter-spacing: 0.05em; line-height: 1.75em; } } .mod-freeHTML #firsttank-202309-wrapper .l-txt sup { margin-right: 0.25em; letter-spacing: normal; } .mod-freeHTML #firsttank-202309-wrapper .l-notes li { letter-spacing: 0.05em; line-height: 1.5em; display: inline; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-notes li { font-size: min(2.8125vw, 1.1em); } } .mod-freeHTML #firsttank-202309-wrapper .l-notes__link { text-decoration: underline; } .mod-freeHTML #firsttank-202309-wrapper .l-notes__link:hover { text-decoration: none; } .mod-freeHTML #firsttank-202309-wrapper .l-btn { padding: 0.5em 2em; background: #ea5b02; border-radius: 10em; color: #FFFFFF; font-size: clamp(1em, 1vw, 1.2em); line-height: 1.25em; display: inline-block; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .l-btn { font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank-202309-wrapper .l-btn--wrap { text-align: center; } .mod-freeHTML #firsttank-202309-wrapper .l-btn__txt { padding-right: 1em; font-size: 1em; text-align: left; display: inline-block; position: relative; } .mod-freeHTML #firsttank-202309-wrapper .l-btn__txt::after { content: ""; width: 0.53571em; height: 0.53571em; border-top: solid 1px #FFFFFF; border-right: solid 1px #FFFFFF; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(45deg); } /* ======================================== kv style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .kv__img img { width: 100%; max-width: none; } /* ======================================== anchor style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .anchor .l-inner { max-width: 800px; padding: 80px 0 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .anchor .l-inner { width: 87.5%; padding: 10.9375vw 0 0; } } .mod-freeHTML #firsttank-202309-wrapper .anchor__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.125%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .anchor__list { grid-template-columns: repeat(1, 1fr); gap: 4.6875vw 0; } } .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item { position: relative; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item { padding-right: 1.0714285714%; } } .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::before, .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::after { content: ""; width: 100%; height: 80.8510638298%; display: block; position: absolute; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::before, .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::after { width: 87.8571428571%; height: 100%; } } .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::before { background: #FFFFFF; bottom: 0; right: 0; z-index: -1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item::before { right: 1.0714285714%; } } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .anchor__list__item::after { bottom: -4%; right: 0; } } .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item:hover::after, .mod-freeHTML #firsttank-202309-wrapper .anchor__list__item:focus::after { opacity: 0.6; } /* ======================================== point style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .point .l-inner { padding: 80px 0 150px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point .l-inner { padding: 12.5vw 0; } } .mod-freeHTML #firsttank-202309-wrapper .point#link-point01 .l-inner, .mod-freeHTML #firsttank-202309-wrapper .point#link-point02 .l-inner { padding-bottom: 80px; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point#link-point01 .l-inner, .mod-freeHTML #firsttank-202309-wrapper .point#link-point02 .l-inner { width: 92.1875%; padding-bottom: 12.5vw; } } .mod-freeHTML #firsttank-202309-wrapper .point#link-point01 .l-inner::after, .mod-freeHTML #firsttank-202309-wrapper .point#link-point02 .l-inner::after { content: ""; width: 100px; height: 0.25px; background: #000000; display: block; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point#link-point01 .l-inner::after, .mod-freeHTML #firsttank-202309-wrapper .point#link-point02 .l-inner::after { width: 12.5vw; } } .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.img02 { margin: 20px 0 40px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.img02 { margin: 1em 0 6.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .point__ttl { margin-bottom: 40px; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__ttl { margin-bottom: 6.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .point__ttl__txt { height: 110px; display: inline-block; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__ttl__txt { height: auto; } } .mod-freeHTML #firsttank-202309-wrapper .point__ttl__txt__img { height: 100%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__ttl__txt__img { height: 17.1875vw; } } .mod-freeHTML #firsttank-202309-wrapper .point__ttl__num { width: 90px; } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .point__ttl__num { position: absolute; top: 50%; left: -30px; transform: translate(-100%, -50%); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__ttl__num { width: 16.25vw; margin: 0 auto 4.6875vw; display: block; } } .mod-freeHTML #firsttank-202309-wrapper .point__img { margin: 0 auto; } .mod-freeHTML #firsttank-202309-wrapper .point__img.img01 { max-width: 430px; margin-top: 40px; margin-bottom: 80px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__img.img01 { margin-top: 6.25vw; margin-bottom: 12.5vw; } } .mod-freeHTML #firsttank-202309-wrapper .point__img.img02 { max-width: 585px; } .mod-freeHTML #firsttank-202309-wrapper .point__cost { margin: 40px auto 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost { width: 91.5254237288%; margin: 6.25vw auto; } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__box { margin: 0 auto; } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost__box--std { width: 53.8888888889%; max-width: 485px; } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__box--ft { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 5.5555555556%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost__box--ft { grid-template-columns: repeat(1, 1fr); gap: 3.125vw 0; } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__box--ink { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 6.6666666667%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost__box--ink { grid-template-columns: repeat(1, 1fr); gap: 6.25vw 0; } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__model { color: #ea5b02; font-size: 2em; font-weight: bold; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost__model { margin-left: 0; font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__model--std { color: #bda000; } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .point__cost__arrow { margin: 6.25vw auto 3.125vw; font-size: clamp(1em, 3.75vw, 1.5em); line-height: 1.5em; } } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .point__cost__arrow::after { border-width: 5.5em; } } .mod-freeHTML #firsttank-202309-wrapper .point__cost__arrow .big { font-size: 1.42857em; letter-spacing: 0.1em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__cost__arrow .big { font-size: 1.25em; } } .mod-freeHTML #firsttank-202309-wrapper .point__speed { margin-top: 50px; display: flex; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__speed { margin-top: 9.375vw; flex-direction: column; } } .mod-freeHTML #firsttank-202309-wrapper .point__speed__comparison { width: 50%; margin-right: 8.8888888889%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__speed__comparison { width: 100%; margin: 0 auto; } } .mod-freeHTML #firsttank-202309-wrapper .point__speed__comparison .l-notes { margin-top: 15px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__speed__comparison .l-notes { margin-top: 3.125vw; } } .mod-freeHTML #firsttank-202309-wrapper .point__speed__img { width: 33.3333333333%; margin-right: 7.7777777778%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point__speed__img { width: 77.7777777778%; margin: 3.7037037037% auto 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.notes-ink, .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.notes-ft { width: 91.5254237288%; margin: 0 auto; } } .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.notes-ft { margin-bottom: 80px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .point .l-notes.notes-ft { margin-bottom: 15.625vw; } } /* ======================================== summary style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .summary { background: #fcecde; } .mod-freeHTML #firsttank-202309-wrapper .summary .l-inner { width: 100%; max-width: 930px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary .l-inner { padding-bottom: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .summary__img { margin-bottom: 20px; text-align: center; position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img { margin-bottom: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt { color: #ea5b02; font-size: clamp(1.8em, 2vw, 2.4em); font-weight: bold; letter-spacing: 0.05em; line-height: 1.6em; text-align: center; display: inline-block; position: absolute; } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt { bottom: 61.3333333333%; left: 50%; transform: translateX(-50%); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt { position: relative; font-size: clamp(1em, 5.3125vw, 2.1em); } } .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt .big { font-size: 1.25em; letter-spacing: 0.05em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt .big { font-size: 1.17647em; } } .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::before, .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::after { content: ""; width: 1px; height: 5em; background: #ea5b02; display: block; position: absolute; bottom: 0; transform-origin: bottom center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::before, .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::after { height: 4em; bottom: 0.25em; } } .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::before { left: -1.25em; transform: rotate(-20deg); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::before { left: -0.5em; transform: rotate(-18deg); } } .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::after { right: -1.25em; transform: rotate(20deg); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__img__txt::after { right: -0.5em; transform: rotate(18deg); } } .mod-freeHTML #firsttank-202309-wrapper .summary__list { width: 84.375%; max-width: 680px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 5.8823529412%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .summary__list { width: 95.3125%; gap: 0 1.6393442623%; } } .mod-freeHTML #firsttank-202309-wrapper .summary__list__item .l-notes { margin-top: 0.5em; } .mod-freeHTML #firsttank-202309-wrapper .summary__list__item .l-notes li { letter-spacing: normal; display: inline-block; } /* ======================================== lineup style ========================================*/ @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup .l-inner { width: 100%; } } .mod-freeHTML #firsttank-202309-wrapper .lineup .l-title { margin-bottom: 60px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup .l-title { margin-bottom: 9.375vw; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__wrap { margin-left: 7.8125%; position: relative; overflow-x: scroll; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__wrap + .l-notes { width: 84.375%; margin: 0 auto; } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl { margin-bottom: 30px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl { width: 200vw; margin: 0 7.8125% 3.125vw 0; display: inline-block; } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr { background: #FFFFFF; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr:nth-of-type(even) { background: #fcecde; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr.tr-last-btn { background: #FFFFFF; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr.tr-last-btn td { border: none; border-top: solid 1px #c3c3c3; padding: 1.6666666667% 1.1111111111% 0; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr.tr-last-btn td .l-btn { width: 100%; padding: 0.5em 0; font-size: clamp(1em, 1vw, 1.2em); } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr.tr-last-btn td .l-btn { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr th { border: solid 1px #c3c3c3; border-bottom: none; padding: 0 1.1111111111% 10px; text-align: center; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr th .l-btn { width: 100%; padding: 0.5em 0; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr th .l-btn { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl tr td { color: #ea5b02; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; text-align: center; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__item { margin: 1.25em 0 1em; color: #000000; font-size: clamp(1em, 1.3333333333vw, 1.6em); font-weight: bold; line-height: 1.2em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__item { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__item .small { font-size: 0.875em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__item .small { font-size: 0.85em; } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic { padding: 0 5.7142857143% 10px; white-space: nowrap; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic { padding: 0 2.1875vw 1.5625vw; } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic li { height: 3em; background: #FFFFFF; margin-bottom: 5px; font-size: clamp(1em, 1.5vw, 1.8em); font-weight: bold; line-height: 1.25em; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic li { font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic li .small { font-size: 0.72222em; font-weight: normal; line-height: 1.25em; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic li.none { background: none; border: solid 1px #FFFFFF; color: #FFFFFF; position: relative; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__basic li.none::after { content: ""; width: 105%; height: 1px; background: #FFFFFF; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-19deg); } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__network { padding: 0 5.7142857143% 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__network { padding: 0 2.1875vw 1.5625vw; } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__network li { height: 3.375em; background: #fcecde; margin-bottom: 5px; font-size: clamp(1em, 1.3333333333vw, 1.6em); font-weight: bold; letter-spacing: 0.05em; line-height: 1.25em; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__network li { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__sheets { margin-bottom: 0.75em; font-size: clamp(1em, 1.3333333333vw, 1.6em); line-height: 1.2em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__sheets { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__sheets .big { padding: 0 0.1em; font-size: 1.625em; font-weight: bold; display: inline-block; vertical-align: baseline; transform: translateY(0.05em); } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__sheets .small { font-size: 0.8125em; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink { margin-bottom: 0.5em; font-size: clamp(1em, 1.5vw, 1.8em); font-weight: bold; letter-spacing: 0.05em; line-height: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink { font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail { margin-bottom: 1.5em; font-size: clamp(1em, 1.3333333333vw, 1.6em); font-weight: bold; line-height: 1.2em; display: inline-block; position: relative; z-index: 1; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail { margin-bottom: 1em; font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail::before, .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail::before { width: 120%; height: 105%; border: solid 1.5px #ea5b02; z-index: -2; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__ink__detail::after { content: ""; background: #FFFFFF; width: 108%; height: 110%; z-index: -1; } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__cost, .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__time { margin-bottom: 1.5em; font-size: clamp(1em, 1.3333333333vw, 1.6em); line-height: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__cost, .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__time { margin-bottom: 1.25em; font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__cost .big, .mod-freeHTML #firsttank-202309-wrapper .lineup__tbl__time .big { padding: 0 0.1em; font-size: 1.625em; font-weight: bold; display: inline-block; vertical-align: baseline; transform: translateY(0.03em); } /* ======================================== relief style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .relief { background: #fcecde; } .mod-freeHTML #firsttank-202309-wrapper .relief .l-inner { max-width: 800px; } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .relief .l-title { margin-bottom: 60px; } } .mod-freeHTML #firsttank-202309-wrapper .relief__wrap { margin-bottom: 40px; display: grid; grid-template-columns: 5fr 3fr; border-radius: 10px; box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3); position: relative; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__wrap { margin: 7.8125vw 0 0; grid-template-columns: repeat(1, 1fr); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__wrap + .l-notes { margin-top: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .relief__img { background: #FFFFFF; border-radius: 10px 0 0 10px; display: flex; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__img { border-radius: 10px 10px 0 0; } } .mod-freeHTML #firsttank-202309-wrapper .relief__img img { border-radius: 10px 0 0 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__img img { border-radius: 10px 10px 0 0; } } .mod-freeHTML #firsttank-202309-wrapper .relief__txt { display: flex; justify-content: center; align-items: center; } .mod-freeHTML #firsttank-202309-wrapper .relief__txt__p { margin: 1em; font-size: clamp(1.1em, 1.1666666667vw, 1.4em); font-weight: bold; letter-spacing: 0.05em; line-height: 1.75em; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__txt__p { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .relief__balloon { width: 6.6666666667vw; max-width: 80px; height: 6.6666666667vw; max-height: 80px; position: absolute; top: -16.6666666667%; right: -5.625%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .relief__balloon { width: 17.1875vw; max-width: none; height: 17.1875vw; max-height: none; top: -9.7087378641%; right: -5.5555555556%; } } /* ======================================== app style ========================================*/ @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app .l-inner { width: 92.1875%; } } .mod-freeHTML #firsttank-202309-wrapper .app .l-txt { margin-bottom: 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app .l-txt { margin-bottom: 6.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__wrap { padding: 4.4444444444% 5.5555555556%; background: #fcecde; border-radius: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__wrap { padding: 4.0677966102%; border-radius: 10px; } } .mod-freeHTML #firsttank-202309-wrapper .app__wrap:not(:last-of-type) { margin-bottom: 30px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__wrap:not(:last-of-type) { margin-bottom: 3.125vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__wrap--flex { display: flex; justify-content: space-between; align-items: center; } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .app__wrap--flex { padding-right: 2.2222222222%; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__wrap--flex { flex-direction: column; } } .mod-freeHTML #firsttank-202309-wrapper .app__wrap .l-notes { margin-top: 10px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__wrap .l-notes { margin-top: 3.125vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__name { margin-bottom: 20px; display: flex; align-items: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__name { margin-bottom: 3.125vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__name__icon { width: 60px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__name__icon { width: 16.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__name__txt { margin-left: 1.25em; font-size: 1.6em; font-weight: bold; line-height: 1.5em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__name__txt { margin-left: 1em; font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank-202309-wrapper .app__txt { font-size: 1.4em; font-weight: bold; line-height: 1.75em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__txt { font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .app__step { max-width: 750px; margin: 40px auto 0; display: flex; justify-content: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step { margin: 3.125vw auto 0; flex-direction: column; } } .mod-freeHTML #firsttank-202309-wrapper .app__step__item { width: 29.3333333333%; text-align: center; display: flex; flex-direction: column; justify-content: space-between; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__item { width: 100%; text-align: left; flex-direction: row; justify-content: flex-start; align-items: center; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__item:last-of-type .app__step__img { width: 35.0553505535%; } } .mod-freeHTML #firsttank-202309-wrapper .app__step__num { width: 70px; margin: 0 auto; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__num { width: 12.5vw; margin: 0 1.5625vw 0 0; } } .mod-freeHTML #firsttank-202309-wrapper .app__step__txt { margin: 1em 0; font-size: 1.6em; font-weight: bold; line-height: 1.5em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__txt { margin: 0; font-size: clamp(1em, 3.75vw, 1.5em); flex-shrink: 0; } } .mod-freeHTML #firsttank-202309-wrapper .app__step__img { height: 76px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__img { width: 18.4501845018%; height: auto; margin-left: auto; } } .mod-freeHTML #firsttank-202309-wrapper .app__step__img img { height: 100%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__step__img img { height: auto; } } .mod-freeHTML #firsttank-202309-wrapper .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 #firsttank-202309-wrapper .app__step__arrow { width: 4.375vw; height: 2.1875vw; margin: 1.5625vw 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 #firsttank-202309-wrapper .app__flex--left { width: 66.265060241%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__flex--left { width: 100%; } } .mod-freeHTML #firsttank-202309-wrapper .app__flex--right { width: 31.3253012048%; margin-top: 1em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__flex--right { width: 75.6457564576%; margin-top: 6.25vw; } } .mod-freeHTML #firsttank-202309-wrapper .app__flex--right .app__line + .l-notes { margin-left: 15.3846153846%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .app__flex--right .app__line + .l-notes { margin: 0; } } /* ======================================== function style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .function { background: #fcecde; } .mod-freeHTML #firsttank-202309-wrapper .function .l-inner { max-width: 600px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function .l-inner { width: 92.1875%; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function .l-title { margin-bottom: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .function .l-txt { margin-bottom: 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function .l-txt { margin-bottom: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .function__wrap { margin-bottom: 100px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__wrap { margin-bottom: 12.5vw; } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__wrap--flex { display: flex; flex-direction: column; justify-content: flex-end; } } .mod-freeHTML #firsttank-202309-wrapper .function__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__grid { gap: 0 6.7796610169%; } } .mod-freeHTML #firsttank-202309-wrapper .function__grid .function__wrap { margin-bottom: 80px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__grid .function__wrap { margin-bottom: 12.5vw; } } .mod-freeHTML #firsttank-202309-wrapper .function__grid .l-title { margin-bottom: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__grid .l-title { margin-bottom: 4.6875vw; } } .mod-freeHTML #firsttank-202309-wrapper .function__grid .l-title__txt { padding-bottom: 7px; font-size: 2.4em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__grid .l-title__txt { padding-bottom: 4px; font-size: clamp(1em, 4.0625vw, 1.6em); } } .mod-freeHTML #firsttank-202309-wrapper .function__img { position: relative; } .mod-freeHTML #firsttank-202309-wrapper .function__img__balloon { width: 46.2962962963%; position: absolute; bottom: -22.5%; left: -16.6666666667%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__img__balloon { width: 43.6363636364%; bottom: -25%; left: -10.9090909091%; } } .mod-freeHTML #firsttank-202309-wrapper .function__detail { margin-top: 20px; font-size: 1.4em; font-weight: bold; line-height: 1.75em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__detail { margin-top: 1em; font-size: clamp(1em, 3.125vw, 1.2em); } } .mod-freeHTML #firsttank-202309-wrapper .function .l-notes { margin-top: 20px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function .l-notes { margin-top: 1em; } } .mod-freeHTML #firsttank-202309-wrapper .function__txt { color: #ea5b02; font-size: 1.8em; font-weight: bold; text-align: center; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .function__txt { font-size: clamp(1em, 3.75vw, 1.5em); } } /* ======================================== product style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .product { /*----- 2311バナー追加 -----*/ } .mod-freeHTML #firsttank-202309-wrapper .product .l-inner { max-width: 800px; } .mod-freeHTML #firsttank-202309-wrapper .product__wrap { display: grid; grid-template-columns: repeat(2, 1fr); } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__wrap { grid-template-columns: repeat(1, 1fr); } } .mod-freeHTML #firsttank-202309-wrapper .product__box { /*----- 2311バナー追加 -----*/ } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box { padding-bottom: 12.5vw; } } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:nth-of-type(odd) { padding-right: 7.5%; } } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:nth-of-type(odd) { padding-right: 0; } } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:nth-of-type(even) { border-left: solid 1px #fcecde; padding-left: 7.5%; } } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:nth-of-type(even) { border-left: none; padding-left: 0; } } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:not(:nth-of-type(-n+2)) { padding-top: 12.5%; } } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:not(:nth-of-type(-n+2)) { padding-top: 0; } } @media (min-width: 641px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:not(:nth-last-of-type(-n+2)) { border-bottom: solid 1px #fcecde; padding-bottom: 12.5%; } } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box:not(:nth-last-of-type(-n+2)) { border-bottom: none; } } .mod-freeHTML #firsttank-202309-wrapper .product__box--logo { display: flex; justify-content: center; align-items: center; } .mod-freeHTML #firsttank-202309-wrapper .product__box .l-btn { font-size: 1.4em; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__box .l-btn { font-size: clamp(1.8em, 2vw, 2.4em); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .product__box .l-btn { font-size: clamp(1em, 3.75vw, 1.5em); } } .mod-freeHTML #firsttank-202309-wrapper .product__box:last-of-type { padding-bottom: 0; } .mod-freeHTML #firsttank-202309-wrapper .product__logo { max-width: 250px; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__logo { width: 51.8518518519%; } } .mod-freeHTML #firsttank-202309-wrapper .product__detail { margin-bottom: 30px; display: flex; align-items: center; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__detail { margin-bottom: 6.25vw; justify-content: center; } } .mod-freeHTML #firsttank-202309-wrapper .product__detail__img { margin-right: 10px; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__detail__img { margin-right: 1.8518518519%; } } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list { font-size: clamp(1em, 1vw, 1.2em); display: grid; grid-template-columns: repeat(3, 6em); grid-template-rows: repeat(3, 5.5em); gap: 5px; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__detail__list { font-size: clamp(1.5em, 1.6666666667vw, 2em); } } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .product__detail__list { font-size: min(2.8125vw, 1.1em); grid-template-columns: repeat(3, 5.5em); grid-template-rows: repeat(3, 5em); gap: 3px; } } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li { background: #fcecde; border-radius: 6px; color: #ea5b02; font-size: 1em; line-height: 1.2em; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; z-index: 2; } @media screen and (max-width: 800px) { .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li { border-radius: 4px; } } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub { font-size: 1em; line-height: 1.25em; position: relative; z-index: -1; } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub::before, .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub::after { content: ""; width: 125%; height: 100%; background: #fcecde; display: block; position: absolute; left: 50%; } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub::before { top: 0; transform: translate(-50%, -100%); } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub::after { bottom: 0; transform: translate(-50%, 100%); } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li .adf-sub .parentheses { width: 125%; height: 230%; border: solid 1px #ea5b02; border-radius: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li.none { background: none; border: solid 1px #fcecde; color: #fcecde; position: relative; } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li.none::after { content: ""; width: 130%; height: 1px; background: #fcecde; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-40deg); } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li.none .adf-sub::before, .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li.none .adf-sub::after { background-color: #FFFFFF; } .mod-freeHTML #firsttank-202309-wrapper .product__detail__list li.none .adf-sub .parentheses { border-color: #fcecde; } .mod-freeHTML #firsttank-202309-wrapper .product__beginner { width: 84.375%; max-width: 900px; margin: 0 auto 120px; border: solid 1px #c3c3c3; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .product__beginner { margin: 0 auto 10.9375vw; } } /* ======================================== banner style ========================================*/ .mod-freeHTML #firsttank-202309-wrapper .banner .l-inner { padding-top: 0; } .mod-freeHTML #firsttank-202309-wrapper .banner .l-heading--alone { margin-bottom: 40px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .banner .l-heading--alone { margin-bottom: 7.4074074074%; } } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .banner__big { margin-bottom: 7.4074074074%; grid-template-columns: 1fr; } } .mod-freeHTML #firsttank-202309-wrapper .banner__big__detail { position: relative; } .mod-freeHTML #firsttank-202309-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 #firsttank-202309-wrapper .banner__big__detail__btn { width: 68.5185185185%; top: 77.8443113772%; } } .mod-freeHTML #firsttank-202309-wrapper .banner .l-title { margin-top: 80px; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .banner .l-title { margin-top: 14.8148148148%; } } .mod-freeHTML #firsttank-202309-wrapper .banner .l-title__txt { font-size: 2.4em; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .banner .l-title__txt { font-size: clamp(1em, 4.375vw, 1.8em); } } .mod-freeHTML #firsttank-202309-wrapper .banner__wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3.3333333333%; } @media screen and (max-width: 640px) { .mod-freeHTML #firsttank-202309-wrapper .banner__wrap { grid-template-columns: repeat(1, 1fr); gap: 4.6875vw 0; } }/*# sourceMappingURL=tco.css.map */