@charset "UTF-8"; /* ======================================= reset ======================================= */ /*** The new CSS reset - version 1.11.2 (last updated 15.11.2023) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input[type="radio"], input[type="checkbox"]):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :focus-visible { outline: none; } /* ======================================= layout ======================================= */ :root { --font_color: #3e3a39; --strong_color: #000; --primary_color: #501d84; --secondary_color: #2b449f; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { overscroll-behavior: none; } body { background: #fff; color: var(--font_color); font-family: "Hiragino Mincho Pro", "游明朝体", "ヒラギノ明朝 Pro", "Yu Mincho", serif; font-weight: 400; line-height: 1; margin: auto; width: 100%; } @media only screen and (max-width: 767px) { body { font-size: 3.733vw; } } @media only screen and (min-width: 768px) { body { font-size: 1.852vw; } } @media only screen and (min-width: 1080px) { body { font-size: 20px; min-width: 1080px; } } .noto { font-family: "Noto Sans JP", serif; } .caslon { font-family: "Libre Caslon Text", serif; } a { color: var(--font_color); text-decoration: none; } img { vertical-align: bottom; width: 100%; } .wrapper { width: 100%; } @media only screen and (min-width: 1080px) { .wrapper { margin: auto; max-width: 1080px; } } @media only screen and (min-width: 768px) { .sp_only { display: none !important; } } @media only screen and (max-width: 767px) { .pc_only { display: none !important; } } strong { font-weight: 700; } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } /* ======================================= header ======================================= */ .header { background: #fff; left: 0; position: sticky; top: 0; width: 100%; z-index: 100; } @media only screen and (max-width: 767px) { .header { width: 100vw; } } .header__logo { align-items: center; display: flex; } @media only screen and (max-width: 767px) { .header__logo { background: #fff; gap: 2.667vw; height: 13.333vw; padding: 0 3.6vw 0; position: relative; z-index: 5; } } @media only screen and (min-width: 768px) { .header__logo { gap: 1.667vw; height: 9.815vw; } } @media only screen and (min-width: 1080px) { .header__logo { gap: 18px; height: 106px; } } @media only screen and (max-width: 767px) { .header__logo__company { width: 23.867vw; } } @media only screen and (min-width: 768px) { .header__logo__company { width: 16.574vw; } } @media only screen and (min-width: 1080px) { .header__logo__company { width: 179px; } } @media only screen and (max-width: 767px) { .header__logo__brand { width: 22.667vw; } } @media only screen and (min-width: 768px) { .header__logo__brand { width: 15.741vw; } } @media only screen and (min-width: 1080px) { .header__logo__brand { width: 170px; } } @media (any-hover: hover) { .header__logo__link:hover { opacity: 0.8; } } @media only screen and (max-width: 767px) { .toggle { background: transparent; box-sizing: content-box; cursor: pointer; display: block; height: 9.333vw; padding: 0; position: fixed; right: 2.667vw; top: 2vw; width: 9.333vw; z-index: 110; } } @media only screen and (max-width: 767px) { .toggle__bar { background: var(--font_color); display: block; height: 0.8vw; left: 1.067vw; position: absolute; transform-origin: 0; transition: all .3s linear; width: 7.2vw; } .toggle__bar--top { top: 1.467vw; } .toggle__bar--middle { top: 4.133vw; } .toggle__bar--bottom { top: 6.8vw; } } @media only screen and (max-width: 767px) { .nav { background-color: #2a5579; left: 0; max-height: 100vh; max-height: 100dvh; opacity: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; position: fixed; top: -100vh; transition: all .5s linear; visibility: hidden; width: 100%; } } @media only screen and (min-width: 768px) { .nav { padding: 0.926vw 0 1.389vw; } } @media only screen and (min-width: 1080px) { .nav { padding: 10px 0 15px; } } @media only screen and (min-width: 768px) { .nav__list { border-left: 1px solid #333333; display: flex; justify-content: space-between; width: 100%; } } @media only screen and (min-width: 768px) { .nav__item { flex-grow: 1; display: flex; justify-content: center; border-right: 1px #333333 solid; } } @media only screen and (max-width: 767px) { .nav__item:not(:last-child) { border-bottom: 2px dotted #fff; } } .nav__item__link { display: block; white-space: nowrap; position: relative; font-weight: 500; } @media only screen and (max-width: 767px) { .nav__item__link { color: #fff; padding: 5.067vw 12vw; font-size: 4vw; } } @media only screen and (min-width: 768px) { .nav__item__link { padding: 0 2.5vw; font-size: 1.759vw; line-height: 2.632; } } @media only screen and (min-width: 1080px) { .nav__item__link { padding: 0 27px; font-size: 19px; } } @media only screen and (any-hover: hover) and (max-width: 767px) { .nav__item__link:hover { background: rgba(255, 255, 255, 0.2); } } @media only screen and (any-hover: hover) and (min-width: 768px) { .nav__item__link:hover { color: var(--secondary_color); } } @media only screen and (max-width: 767px) { .is_nav--open .toggle__bar--top { transform: rotate(45deg) translate(0.63vw, -0.53vw); } .is_nav--open .toggle__bar--middle { display: none; } .is_nav--open .toggle__bar--bottom { transform: rotate(-45deg) translate(0.63vw, 0.53vw); } .is_nav--open .nav { opacity: 1; top: 13.333vw; visibility: visible; } } /* ======================================= kv:キーヴィジュアル ======================================= */ .kv { background: 0 / cover no-repeat; position: relative; } @media only screen and (max-width: 767px) { .kv { background-image: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/kv_bg_sp.jpg); height: 153.333vw; } } @media only screen and (min-width: 768px) { .kv { background-image: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/kv_bg.jpg); height: 112.963vw; } } @media only screen and (min-width: 1080px) { .kv { height: 1220px; } } @media only screen and (max-width: 767px) { .kv__lead { width: 100%; } } @media only screen and (min-width: 768px) { .kv__lead { width: 100%; } } @media only screen and (min-width: 1080px) { .kv__lead { width: 1080px; } } /* ======================================= item-lineup: ======================================= */ .item-lineup { height: auto; } @media only screen and (max-width: 767px) { .item-lineup { padding-top: 10.933vw; } } @media only screen and (min-width: 768px) { .item-lineup { padding-top: 7.407vw; } } @media only screen and (min-width: 1080px) { .item-lineup { padding-top: 80px; } } .item-lineup__wrap { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .item-lineup__wrap { column-gap: 5.333vw; } } @media only screen and (min-width: 768px) { .item-lineup__wrap { column-gap: 5.556vw; } } @media only screen and (min-width: 1080px) { .item-lineup__wrap { column-gap: 60px; } } @media only screen and (max-width: 767px) { .item-lineup__box { width: 43.467vw; } } @media only screen and (min-width: 768px) { .item-lineup__box { width: 30.185vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box { width: 326px; } } @media only screen and (min-width: 768px) { .item-lineup__box:nth-of-type(2) .item-box__wrap { column-gap: 0.926vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box:nth-of-type(2) .item-box__wrap { column-gap: 10px; } } .item-lineup__box .item-box__wrap { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .item-lineup__box .item-box__wrap { width: 43.467vw; column-gap: 2.667vw; margin-bottom: 4.267vw; } } @media only screen and (min-width: 768px) { .item-lineup__box .item-box__wrap { width: 30.185vw; column-gap: 1.852vw; margin-bottom: 2.963vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box .item-box__wrap { width: 326px; column-gap: 20px; margin-bottom: 32px; } } @media only screen and (max-width: 767px) { .item-lineup__box .item-box__img { width: 18.667vw; } } @media only screen and (min-width: 768px) { .item-lineup__box .item-box__img { width: 12.963vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box .item-box__img { width: 140px; } } .item-lineup__box .item-box__color { color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .item-lineup__box .item-box__color { margin-top: 4vw; font-size: 3.467vw; } } @media only screen and (min-width: 768px) { .item-lineup__box .item-box__color { margin-top: 1.481vw; font-size: 2.407vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box .item-box__color { margin-top: 16px; font-size: 26px; } } .item-lineup__box .item-lineup__name { color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; text-align: center; border: 2px #3e3a39 solid; } @media only screen and (max-width: 767px) { .item-lineup__box .item-lineup__name { margin: 4.267vw auto 0; font-size: 4.267vw; width: 43.467vw; height: 6.933vw; line-height: 6.933vw; border-radius: 3.467vw; } } @media only screen and (min-width: 768px) { .item-lineup__box .item-lineup__name { margin: 2.963vw auto 0; font-size: 2.963vw; width: 30.185vw; height: 4.815vw; line-height: 4.815vw; border-radius: 2.407vw; } } @media only screen and (min-width: 1080px) { .item-lineup__box .item-lineup__name { margin: 32px auto 0; font-size: 32px; width: 326px; height: 52px; line-height: 52px; border-radius: 26px; } } .item-lineup__lead { text-align: center; } @media only screen and (max-width: 767px) { .item-lineup__lead { scroll-padding-top: 14.667vw; margin: 10.933vw auto 0; } } @media only screen and (min-width: 768px) { .item-lineup__lead { scroll-padding-top: 10.185vw; margin: 5.648vw auto 0; } } @media only screen and (min-width: 1080px) { .item-lineup__lead { scroll-padding-top: 110px; margin: 61px auto 0; } } .item-lineup__lead-highlight { display: block; color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; display: block; position: relative; } @media only screen and (max-width: 767px) { .item-lineup__lead-highlight { font-size: 5.333vw; } } @media only screen and (min-width: 768px) { .item-lineup__lead-highlight { font-size: 3.704vw; } } @media only screen and (min-width: 1080px) { .item-lineup__lead-highlight { font-size: 40px; } } .item-lineup__lead-highlight::after, .item-lineup__lead-highlight::before { content: ""; display: block; background: #3e3a39; position: absolute; top: 50%; transform: translate(0%, -50%); left: 0; height: 1px; } @media only screen and (max-width: 767px) { .item-lineup__lead-highlight::after, .item-lineup__lead-highlight::before { width: 13.333vw; } } @media only screen and (min-width: 768px) { .item-lineup__lead-highlight::after, .item-lineup__lead-highlight::before { width: 23.148vw; } } @media only screen and (min-width: 1080px) { .item-lineup__lead-highlight::after, .item-lineup__lead-highlight::before { width: 250px; } } .item-lineup__lead-highlight::before { left: auto; right: 0; } .item-lineup__lead-emphasis { color: #3e3a39; font-weight: 700; display: block; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .item-lineup__lead-emphasis { margin-top: 2.267vw; font-size: 7.733vw; line-height: 10vw; } } @media only screen and (min-width: 768px) { .item-lineup__lead-emphasis { margin-top: 1.574vw; font-size: 5.37vw; line-height: 6.944vw; } } @media only screen and (min-width: 1080px) { .item-lineup__lead-emphasis { margin-top: 17px; font-size: 58px; line-height: 75px; } } .item-lineup__img { display: block; } @media only screen and (max-width: 767px) { .item-lineup__img { margin-top: 4.667vw; } } @media only screen and (min-width: 768px) { .item-lineup__img { margin-top: 3.796vw; } } @media only screen and (min-width: 1080px) { .item-lineup__img { margin-top: 41px; } } /* ======================================= feature:トレループの特長 ======================================= */ .feature { background-color: #f9dbe8; position: relative; text-align: center; } @media only screen and (max-width: 767px) { .feature { margin-top: 17.067vw; margin-bottom: 17.333vw; padding-bottom: 8.133vw; } } @media only screen and (min-width: 768px) { .feature { margin-top: 14.63vw; margin-bottom: 6.944vw; padding-bottom: 7.5vw; } } @media only screen and (min-width: 1080px) { .feature { margin-top: 158px; margin-bottom: 74px; padding-bottom: 81px; } } .feature .feature__title { position: absolute; left: 50%; transform: translate(-50%, 0%) skewX(-20deg); display: inline-block; background-color: #c5307a; white-space: nowrap; } @media only screen and (max-width: 767px) { .feature .feature__title { top: -5.333vw; } } @media only screen and (min-width: 768px) { .feature .feature__title { top: -4.259vw; } } @media only screen and (min-width: 1080px) { .feature .feature__title { top: -46px; } } .feature .feature__title--txt { display: inline-block; padding: 0 0.5em; color: #fff; font-weight: 700; transform: skewX(20deg); } @media only screen and (max-width: 767px) { .feature .feature__title--txt { font-size: 6.667vw; line-height: 10.4vw; } } @media only screen and (min-width: 768px) { .feature .feature__title--txt { font-size: 4.63vw; line-height: 7.222vw; } } @media only screen and (min-width: 1080px) { .feature .feature__title--txt { font-size: 50px; line-height: 78px; } } .feature .feature__lead { display: inline-block; color: #c4307a; font-weight: 900; letter-spacing: 0.04em; position: relative; } @media only screen and (max-width: 767px) { .feature .feature__lead { padding-top: 10.533vw; font-size: 4.4vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .feature .feature__lead { padding-top: 5.463vw; font-size: 3.056vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .feature .feature__lead { padding-top: 59px; font-size: 33px; line-height: 60px; } } .feature .feature__lead::after { content: ''; position: absolute; background: url("../images/feature_lead_bg.png") no-repeat center/100%; } @media only screen and (max-width: 767px) { .feature .feature__lead::after { top: 7.333vw; left: -6vw; width: 8.267vw; height: 6.933vw; } } @media only screen and (min-width: 768px) { .feature .feature__lead::after { top: 2.685vw; left: -5.278vw; width: 5.741vw; height: 4.815vw; } } @media only screen and (min-width: 1080px) { .feature .feature__lead::after { top: 29px; left: -57px; height: 14px; width: 62px; height: 52px; } } .feature .feature__subtitle { display: inline-block; color: #c4307a; font-weight: 700; letter-spacing: 0.04em; position: relative; } @media only screen and (max-width: 767px) { .feature .feature__subtitle { margin-top: 0vw; font-size: 4.4vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .feature .feature__subtitle { margin-top: 0.926vw; font-size: 3.056vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .feature .feature__subtitle { margin-top: 10px; font-size: 33px; line-height: 60px; } } .feature .feature__subtitle::after, .feature .feature__subtitle::before { content: ''; position: absolute; } @media only screen and (max-width: 767px) { .feature .feature__subtitle::after, .feature .feature__subtitle::before { background: url("../images/feature__star_l_sp.png") no-repeat center/100%; top: -14.667vw; left: 2.8vw; width: 5.867vw; height: 7.733vw; } } @media only screen and (min-width: 768px) { .feature .feature__subtitle::after, .feature .feature__subtitle::before { background: url("../images/feature__star_l.png") no-repeat center/100%; top: -2.5vw; left: -6.574vw; width: 4.722vw; height: 6.574vw; } } @media only screen and (min-width: 1080px) { .feature .feature__subtitle::after, .feature .feature__subtitle::before { top: -27px; left: -71px; width: 51px; height: 71px; } } .feature .feature__subtitle::before { content: ''; position: absolute; } @media only screen and (max-width: 767px) { .feature .feature__subtitle::before { background: url("../images/feature__star_r_sp.png") no-repeat center/100%; top: 16vw; left: auto; right: 8.133vw; } } @media only screen and (min-width: 768px) { .feature .feature__subtitle::before { background: url("../images/feature__star_r.png") no-repeat center/100%; top: -2.5vw; left: auto; right: -6.574vw; } } @media only screen and (min-width: 1080px) { .feature .feature__subtitle::before { top: -27px; left: auto; right: -71px; } } .feature .feature__subtitle-hl { color: #231815; position: relative; display: inline-block; z-index: 1; } @media only screen and (max-width: 767px) { .feature .feature__subtitle-hl { font-size: 8.267vw; line-height: 11.733vw; } } @media only screen and (min-width: 768px) { .feature .feature__subtitle-hl { font-size: 5.741vw; line-height: 1; } } @media only screen and (min-width: 1080px) { .feature .feature__subtitle-hl { font-size: 62px; line-height: 1; } } .feature .feature__subtitle-hl::after { z-index: -1; content: ''; position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff000; } @media only screen and (max-width: 767px) { .feature .feature__subtitle-hl::after { bottom: 1.067vw; height: 1.867vw; } } @media only screen and (min-width: 768px) { .feature .feature__subtitle-hl::after { bottom: -0.37vw; height: 1.296vw; } } @media only screen and (min-width: 1080px) { .feature .feature__subtitle-hl::after { bottom: -4px; height: 14px; } } .feature .feature__subtitle-hl .txt-sm { font-size: 80%; } .feature .feature__subtitle-hl .txt-pink { color: #c4307a; } .feature .feature__wrap { display: flex; justify-content: center; align-items: center; } @media only screen and (max-width: 767px) { .feature .feature__wrap { display: block; margin-top: 4.933vw; } } @media only screen and (min-width: 768px) { .feature .feature__wrap { gap: 2.593vw; margin-top: 3.426vw; } } @media only screen and (min-width: 1080px) { .feature .feature__wrap { gap: 28px; margin-top: 37px; } } .feature .feature__box { background-color: #fff; } @media only screen and (max-width: 767px) { .feature .feature__box { width: 90.667vw; margin: 0 auto 4.533vw; padding: 6vw 0; border-radius: 6vw; } } @media only screen and (min-width: 768px) { .feature .feature__box { width: 44.444vw; height: 59.259vw; padding-top: 4.167vw; border-radius: 3.704vw; } } @media only screen and (min-width: 1080px) { .feature .feature__box { width: 480px; height: 640px; padding-top: 45px; border-radius: 40px; } } @media only screen and (max-width: 767px) { .feature .feature__box-img { width: 49.867vw; margin: 4vw auto 0; } } @media only screen and (min-width: 768px) { .feature .feature__box-img { width: 34.63vw; margin: 2.778vw auto 0; } } @media only screen and (min-width: 1080px) { .feature .feature__box-img { width: 374px; margin: 30px auto 0; } } .feature .feature__box-title { display: inline-block; padding: 0 0.4em; color: #fff; font-weight: 700; background-color: #c4307a; } @media only screen and (max-width: 767px) { .feature .feature__box-title { font-size: 3.733vw; line-height: 5.867vw; } } @media only screen and (min-width: 768px) { .feature .feature__box-title { font-size: 2.13vw; line-height: 3.333vw; } } @media only screen and (min-width: 1080px) { .feature .feature__box-title { font-size: 23px; line-height: 36px; } } .feature .feature__box-title--em { color: #fff57f; } @media only screen and (max-width: 767px) { .feature .feature__box-title--em { margin-top: 1.333vw; font-size: 6.4vw; line-height: 8.533vw; } } @media only screen and (min-width: 768px) { .feature .feature__box-title--em { margin-top: 0.926vw; font-size: 3.704vw; line-height: 4.815vw; } } @media only screen and (min-width: 1080px) { .feature .feature__box-title--em { margin-top: 10px; font-size: 40px; line-height: 52px; } } /* ======================================= movie:動画 ======================================= */ .movie .movie_wrap { position: relative; margin: 0 auto; } @media only screen and (max-width: 767px) { .movie .movie_wrap { width: 100%; height: 59.733vw; } } @media only screen and (min-width: 768px) { .movie .movie_wrap { width: 79.444vw; height: 46.296vw; } } @media only screen and (min-width: 1080px) { .movie .movie_wrap { width: 858px; height: 500px; } } /* ======================================= scene:scene使用イメージ ======================================= */ @media only screen and (max-width: 767px) { .scene { background: url(../images/scene_bg_sp.jpg) center top no-repeat; background-size: 102.4vw 326.933vw; height: 326.933vw; padding-top: 13.333vw; } } @media only screen and (min-width: 768px) { .scene { background: url(../images/scene_bg.jpg) center top no-repeat; background-size: 100vw 217.5vw; height: 217.5vw; padding-top: 11.481vw; } } @media only screen and (min-width: 1080px) { .scene { background-size: 1080px 2349px; height: 2349px; padding-top: 124px; } } .scene__title { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .scene__title { margin-left: 8.533vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .scene__title { margin-left: 8.241vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .scene__title { margin-left: 89px; font-size: 26px; line-height: 60px; } } .scene__title--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .scene__title--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .scene__title--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .scene__title--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } @media only screen and (max-width: 767px) { .scene__textwrap { margin: 13.333vw 0 0 8vw; } } @media only screen and (min-width: 768px) { .scene__textwrap { display: flex; margin: 10.556vw 0 0 6.481vw; } } @media only screen and (min-width: 1080px) { .scene__textwrap { display: flex; margin: 114px 0 0 70px; } } .scene__textwrap .scene__text1 { font-weight: 700; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .scene__textwrap .scene__text1 { font-size: 8.267vw; line-height: 12.533vw; } } @media only screen and (min-width: 768px) { .scene__textwrap .scene__text1 { font-size: 4.63vw; line-height: 6.667vw; } } @media only screen and (min-width: 1080px) { .scene__textwrap .scene__text1 { font-size: 50px; line-height: 72px; } } @media only screen and (max-width: 767px) { .scene__textwrap .scene__text2 { width: 53.067vw; } } @media only screen and (min-width: 768px) { .scene__textwrap .scene__text2 { margin-left: 2.407vw; width: 28.333vw; } } @media only screen and (min-width: 1080px) { .scene__textwrap .scene__text2 { margin-left: 26px; width: 306px; } } .scene__img1, .scene__img2 { width: 100%; } .scene__img3 { position: relative; } .scene__img3 .scene__caption { position: absolute; display: flex; align-items: center; justify-content: center; background: url(../images/scene_caption.png) center top no-repeat; background-size: contain; } @media only screen and (max-width: 767px) { .scene__img3 .scene__caption { top: 8.533vw; left: 4.8vw; width: 40.267vw; height: 40.267vw; } } @media only screen and (min-width: 768px) { .scene__img3 .scene__caption { top: 4.259vw; left: 9.074vw; width: 27.963vw; height: 27.963vw; } } @media only screen and (min-width: 1080px) { .scene__img3 .scene__caption { top: 46px; left: 98px; width: 302px; height: 302px; } } .scene__img3 .scene__caption .scene__caption-text { font-weight: 700; color: #ffffff; letter-spacing: 0.02em; text-align: center; } @media only screen and (max-width: 767px) { .scene__img3 .scene__caption .scene__caption-text { padding-top: 2.4vw; font-size: 4vw; line-height: 6vw; } } @media only screen and (min-width: 768px) { .scene__img3 .scene__caption .scene__caption-text { padding-top: 1.667vw; font-size: 2.778vw; line-height: 4.167vw; } } @media only screen and (min-width: 1080px) { .scene__img3 .scene__caption .scene__caption-text { padding-top: 18px; font-size: 30px; line-height: 45px; } } /* ======================================= new-feature:トレループプレミアムの新機能 ======================================= */ @media only screen and (max-width: 767px) { .new-feature { margin-top: 15.333vw; padding-bottom: 16vw; } } @media only screen and (min-width: 768px) { .new-feature { margin-top: 2.315vw; padding-bottom: 10.741vw; } } @media only screen and (min-width: 1080px) { .new-feature { margin-top: 25px; padding-bottom: 116px; } } .new-feature .new-feature__title-wrap { width: 100%; background-color: #2a5579; color: #fff; font-weight: 700; letter-spacing: 0.04em; position: relative; text-align: center; } @media only screen and (max-width: 767px) { .new-feature .new-feature__title-wrap { display: block; height: 29.333vw; padding-top: 4.267vw; font-size: 7.733vw; line-height: 10vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__title-wrap { display: flex; justify-content: center; align-items: center; height: 11.111vw; padding-top: 0.648vw; font-size: 5.37vw; line-height: 6.944vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__title-wrap { height: 120px; padding-top: 7px; font-size: 58px; line-height: 75px; } } .new-feature .new-feature__title-em { position: absolute; left: 0; color: #fff; background-color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; padding: 0 1.0em 0 0.4em; display: inline-block; } @media only screen and (max-width: 767px) { .new-feature .new-feature__title-em { top: -7.333vw; font-size: 6.667vw; line-height: 10.4vw; padding: 0 1.0em 0 0.5em; clip-path: polygon(0 0, 100% 0, calc(100% - $clip-tb) 100%, 0 100%); } } @media only screen and (min-width: 768px) { .new-feature .new-feature__title-em { top: -5.093vw; font-size: 4.63vw; line-height: 7.222vw; clip-path: polygon(0 0, 100% 0, calc(100% - $clip-tb) 100%, 0 100%); } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__title-em { top: -55px; font-size: 50px; line-height: 78px; clip-path: polygon(0 0, 100% 0, calc(100% - $clip-tb) 100%, 0 100%); } } .new-feature .new-feature__title-sm { font-size: 80%; } .new-feature .new-feature__caption-wrap { display: flex; align-items: center; } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption-wrap { margin: 8vw 0 5.333vw 4.933vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption-wrap { margin: 3.981vw 0 2.593vw 5.926vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption-wrap { margin: 43px 0 28px 64px; } } .new-feature .new-feature__caption-wrap .new-feature__circle { display: flex; align-items: center; justify-content: center; color: #2a5579; font-weight: 700; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption-wrap .new-feature__circle { width: 21.333vw; height: 21.333vw; border-radius: 10.667vw; border: 0.267vw #2a5579 solid; font-size: 4.8vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption-wrap .new-feature__circle { width: 14.815vw; height: 14.815vw; border-radius: 7.407vw; border: 2px #2a5579 solid; font-size: 3.333vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption-wrap .new-feature__circle { width: 160px; height: 160px; border-radius: 80px; border: 2px #2a5579 solid; font-size: 36px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption-wrap .new-feature__textwrap1 { margin: 0 0 0 3.333vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption-wrap .new-feature__textwrap1 { margin: 0 0 0 2.593vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption-wrap .new-feature__textwrap1 { margin: 0 0 0 28px; } } .new-feature .new-feature__caption-wrap .new-feature__caption { font-weight: 700; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption-wrap .new-feature__caption { font-size: 8.267vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption-wrap .new-feature__caption { font-size: 4.63vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption-wrap .new-feature__caption { font-size: 50px; } } .new-feature .new-feature__caption-wrap .new-feature__caption-under { margin-top: 24px; font-size: 20px; font-weight: 500; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption-wrap .new-feature__caption-under { margin-top: 4.267vw; font-size: 3.733vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption-wrap .new-feature__caption-under { margin-top: 2.037vw; font-size: 1.852vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption-wrap .new-feature__caption-under { margin-top: 22px; font-size: 20px; } } .new-feature .new-feature__imgwrap1 { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap1 { align-items: center; flex-direction: column; row-gap: 6.667vw; } .new-feature .new-feature__imgwrap1 .new-feature__img1, .new-feature .new-feature__imgwrap1 .new-feature__img2 { width: 80vw; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap1 { column-gap: 2.963vw; } .new-feature .new-feature__imgwrap1 .new-feature__img1, .new-feature .new-feature__imgwrap1 .new-feature__img2 { width: 42.963vw; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap1 { column-gap: 32px; } .new-feature .new-feature__imgwrap1 .new-feature__img1, .new-feature .new-feature__imgwrap1 .new-feature__img2 { width: 464px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__point { margin: 8.667vw auto 0; width: 90.667vw; height: 102.4vw; background: url(../images/new-feature_point_sp.png) center top no-repeat; background-size: cover; padding: 56.267vw 0 0 0; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__point { margin: 5.556vw auto 0; width: 76.852vw; height: 20.556vw; background: url(../images/new-feature_point.png) center top no-repeat; background-size: cover; padding: 3.519vw 0 0 7.963vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__point { margin: 60px auto 0; width: 830px; height: 222px; padding: 38px 0 0 86px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__point__caption { margin: 0; font-size: 6.667vw; font-weight: 700; letter-spacing: 0.04em; text-align: center; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__point__caption { margin-left: 16.111vw; font-size: 3.426vw; font-weight: 700; letter-spacing: 0.04em; line-height: 4.444vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__point__caption { margin-left: 174px; font-size: 37px; line-height: 48px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__point__text { width: 77.333vw; margin: 3.733vw auto 0; font-size: 3.733vw; font-weight: 500; letter-spacing: 0.04em; line-height: 6.933vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__point__text { margin-top: 1.481vw; font-size: 1.852vw; font-weight: 500; letter-spacing: 0.04em; line-height: 3.148vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__point__text { margin-top: 16px; font-size: 20px; line-height: 34px; } } .new-feature .new-feature__caption2 { text-align: center; letter-spacing: 0.08em; font-weight: 700; color: #333333; } @media only screen and (max-width: 767px) { .new-feature .new-feature__caption2 { margin: 13.333vw auto 0; width: 90.667vw; font-size: 6.667vw; line-height: 10vw; padding-bottom: 4vw; background: url(../images/new-feature_line_sp.png) bottom center no-repeat; background-size: 90.667vw 1px; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__caption2 { margin: 7.963vw auto 0; width: 88.889vw; font-size: 4.074vw; padding-bottom: 2.037vw; background: url(../images/new-feature_line.png) bottom center no-repeat; background-size: 88.889vw 0.185vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__caption2 { margin: 86px auto 0; width: 960px; font-size: 44px; padding-bottom: 22px; background-size: 960px 2px; } } .new-feature .new-feature__caption2 .dot-text { padding-top: 0.3em; background-position: top left -1px; background-repeat: repeat-x; background-size: 1.05em 0.5em; background-image: radial-gradient(0.08em 0.08em at center center, #2a5579, #2a5579 100%, transparent, transparent); } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap2 { display: block; margin: 6.4vw auto 0; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap2 { display: flex; justify-content: center; margin-top: 4.352vw; column-gap: 3.889vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap2 { margin-top: 47px; column-gap: 42px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap2 .new-feature__img3 { margin: 0 auto; width: 90.667vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap2 .new-feature__img3 { width: 56.019vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap2 .new-feature__img3 { width: 605px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__textwrap { width: 100%; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__textwrap { width: 28.704vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__textwrap { width: 310px; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__caption { width: 90.667vw; margin: 0 auto; padding: 9.067vw 0 4.267vw 0; font-size: 5.867vw; font-weight: 700; text-align: center; letter-spacing: 0.04em; line-height: 1; border-bottom: 0.267vw #3e3a39 solid; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__caption { padding: 2.407vw 0 2.037vw 0; font-size: 3.426vw; font-weight: 700; letter-spacing: 0.04em; line-height: 5.185vw; border-bottom: 1px #3e3a39 solid; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__caption { padding: 26px 0 22px 0; font-size: 37px; line-height: 56px; border-bottom: 1px #3e3a39 solid; } } @media only screen and (max-width: 767px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__text { width: 90.667vw; margin: 3.733vw auto 0; padding: 0; font-size: 3.733vw; font-weight: 500; letter-spacing: 0.04em; line-height: 6.933vw; } } @media only screen and (min-width: 768px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__text { padding: 2.407vw 0 2.037vw 0; font-size: 1.852vw; font-weight: 500; letter-spacing: 0.04em; line-height: 3.148vw; } } @media only screen and (min-width: 1080px) { .new-feature .new-feature__imgwrap2 .new-feature__img3__text { padding: 26px 0 22px 0; font-size: 20px; line-height: 34px; } } /* ======================================= handy:ハンディ伸縮　取り出してそのままハンディ使い伸縮すれば高いところに ======================================= */ .handy { position: relative; } @media only screen and (max-width: 767px) { .handy { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/handy_bg_sp.jpg) center top no-repeat; background-size: 100% 183.6vw; height: 183.6vw; } } @media only screen and (min-width: 768px) { .handy { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/handy_bg.jpg) center top no-repeat; background-size: 100% 93.889vw; height: 93.889vw; } } @media only screen and (min-width: 1080px) { .handy { background-size: 100% 1014px; height: 1014px; } } .handy .handy__title { background-color: #2a5579; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; letter-spacing: 0.04em; font-weight: 700; } @media only screen and (max-width: 767px) { .handy .handy__title { font-size: 7.733vw; line-height: 16vw; height: 16vw; } } @media only screen and (min-width: 768px) { .handy .handy__title { font-size: 5.37vw; line-height: 11.111vw; height: 11.111vw; } } @media only screen and (min-width: 1080px) { .handy .handy__title { font-size: 58px; height: 120px; line-height: 120px; } } @media only screen and (max-width: 767px) { .handy .handy__title-sm { padding-top: 1.867vw; font-size: 6.4vw; line-height: 16vw; } } @media only screen and (min-width: 768px) { .handy .handy__title-sm { padding-top: 1.296vw; font-size: 4.444vw; line-height: 11.111vw; } } @media only screen and (min-width: 1080px) { .handy .handy__title-sm { padding-top: 14px; font-size: 48px; line-height: 120px; } } .handy .handy__circle { position: absolute; display: flex; align-items: center; justify-content: center; background-color: #2a5579; color: #ffffff; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .handy .handy__circle { top: 18.933vw; left: 72vw; width: 25.867vw; height: 25.867vw; border-radius: 12.933vw; font-size: 4.8vw; line-height: 5.733vw; } } @media only screen and (min-width: 768px) { .handy .handy__circle { top: 18.056vw; left: 79.63vw; width: 17.963vw; height: 17.963vw; border-radius: 8.981vw; font-size: 3.333vw; line-height: 3.981vw; } } @media only screen and (min-width: 1080px) { .handy .handy__circle { top: 195px; left: 860px; width: 194px; height: 194px; border-radius: 97px; font-size: 36px; line-height: 43px; } } .handy .handy__lead { color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; text-align: left; writing-mode: vertical-rl; } @media only screen and (max-width: 767px) { .handy .handy__lead { margin-top: 97.037vw; margin-left: 68vw; font-size: 5.867vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .handy .handy__lead { margin-top: 27.87vw; margin-left: 83.426vw; font-size: 2.778vw; line-height: 5.185vw; } } @media only screen and (min-width: 1080px) { .handy .handy__lead { margin-top: 301px; margin-left: 901px; font-size: 30px; line-height: 56px; } } .handy .item-box__wrap { display: flex; justify-content: center; position: absolute; } @media only screen and (max-width: 767px) { .handy .item-box__wrap { top: 123.6vw; left: 14vw; width: 43.467vw; column-gap: 2.667vw; } } @media only screen and (min-width: 768px) { .handy .item-box__wrap { top: 56.204vw; left: 53.889vw; width: 30.185vw; column-gap: 1.852vw; } } @media only screen and (min-width: 1080px) { .handy .item-box__wrap { top: 607px; left: 582px; width: 326px; column-gap: 20px; } } @media only screen and (max-width: 767px) { .handy .item-box__img { width: 15.467vw; } } @media only screen and (min-width: 768px) { .handy .item-box__img { width: 10.741vw; } } @media only screen and (min-width: 1080px) { .handy .item-box__img { width: 116px; } } .handy .item-box__color { color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .handy .item-box__color { margin-top: 2.667vw; font-size: 2.747vw; } } @media only screen and (min-width: 768px) { .handy .item-box__color { margin-top: 1.481vw; font-size: 1.759vw; } } @media only screen and (min-width: 1080px) { .handy .item-box__color { margin-top: 16px; font-size: 19px; } } /* ======================================= details:商品詳細 ======================================= */ .details { position: relative; } @media only screen and (max-width: 767px) { .details { margin-top: 8vw; } } @media only screen and (min-width: 768px) { .details { margin-top: 3.704vw; } } @media only screen and (min-width: 1080px) { .details { margin-top: 40px; } } .details .details__title { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .details .details__title { margin-left: 8.533vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .details .details__title { margin-left: 5.741vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .details .details__title { margin-left: 62px; font-size: 26px; line-height: 60px; } } .details .details__title--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .details .details__title--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .details .details__title--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .details .details__title--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } .details .details__img1 { width: 100%; } @media only screen and (max-width: 767px) { .details .details__img1 { margin-top: 0vw; } } @media only screen and (min-width: 768px) { .details .details__img1 { margin-top: -0.741vw; } } @media only screen and (min-width: 1080px) { .details .details__img1 { margin-top: -8px; } } .details .details__img2 { position: absolute; } @media only screen and (max-width: 767px) { .details .details__img2 { top: 124vw; right: 6.933vw; width: 32vw; } } @media only screen and (min-width: 768px) { .details .details__img2 { top: -2.593vw; right: 2.13vw; width: 22.222vw; } } @media only screen and (min-width: 1080px) { .details .details__img2 { top: -28px; right: 23px; width: 240px; } } /* ======================================= howToUse:使用方法 ======================================= */ .howToUse { position: relative; } @media only screen and (max-width: 767px) { .howToUse { margin-top: 0.4vw; padding-bottom: 11.333vw; } } @media only screen and (min-width: 768px) { .howToUse { margin-top: 0.278vw; padding-bottom: 10.37vw; } } @media only screen and (min-width: 1080px) { .howToUse { margin-top: 3px; padding-bottom: 112px; } } .howToUse .howToUse__title { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .howToUse .howToUse__title { margin-left: 8.267vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__title { margin-left: 5.741vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__title { margin-left: 62px; font-size: 26px; line-height: 60px; } } .howToUse .howToUse__title--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .howToUse .howToUse__title--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__title--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__title--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } .howToUse .howToUse__list { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .howToUse .howToUse__list { flex-direction: column; align-items: center; margin-top: 17.867vw; row-gap: 20.8vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list { margin-top: 20.741vw; column-gap: 1.667vw; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__list { margin-top: 224px; column-gap: 18px; } } .howToUse .howToUse__list > li { background: rgba(42, 82, 121, 0.2); position: relative; } @media only screen and (max-width: 767px) { .howToUse .howToUse__list > li { width: 90.667vw; height: auto; padding-bottom: 10.667vw; border-radius: 2.667vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list > li { width: 28.519vw; height: 46.296vw; border-radius: 1.852vw; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__list > li { width: 308px; height: 500px; border-radius: 20px; } } .howToUse .howToUse__list > li::after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; } @media only screen and (max-width: 767px) { .howToUse .howToUse__list > li::after { height: 82.667vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list > li::after { height: 28.704vw; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__list > li::after { height: 310px; } } @media only screen and (max-width: 767px) { .howToUse .howToUse__list > li:nth-of-type(1)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img1_sp.png) center/100% no-repeat; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list > li:nth-of-type(1)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img1.png) center/100% no-repeat; } } @media only screen and (max-width: 767px) { .howToUse .howToUse__list > li:nth-of-type(2)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img2_sp.png) center/100% no-repeat; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list > li:nth-of-type(2)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img2.png) center/100% no-repeat; } } @media only screen and (max-width: 767px) { .howToUse .howToUse__list > li:nth-of-type(3)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img3_sp.png) center/100% no-repeat; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list > li:nth-of-type(3)::after { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/howToUse_img3.png) center/100% no-repeat; } } .howToUse .howToUse__list__title { display: flex; justify-content: center; align-items: center; position: absolute; left: 50%; transform: translate(-50%, 0%); background-color: #5886a5; border-radius: 100%; } @media only screen and (max-width: 767px) { .howToUse .howToUse__list__title { top: -14.667vw; width: 29.333vw; height: 29.333vw; color: #ffffff; font-size: 4.533vw; font-weight: 700; letter-spacing: 0.04em; line-height: 6.133vw; text-align: center; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list__title { top: -18.148vw; width: 20.37vw; height: 20.37vw; color: #ffffff; font-size: 2.593vw; font-weight: 700; letter-spacing: 0.04em; line-height: 3.704vw; text-align: center; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__list__title { top: -196px; width: 220px; height: 220px; font-size: 28px; line-height: 40px; } } @media only screen and (max-width: 767px) { .howToUse .howToUse__list__text { margin: 83.2vw auto 0; width: 76.667vw; font-size: 3.733vw; font-weight: 500; letter-spacing: 0.04em; line-height: 6.933vw; } .howToUse .howToUse__list__text--note { margin: 1.6vw auto 0; width: 76.667vw; font-size: 2.667vw; line-height: 5.333vw; } } @media only screen and (min-width: 768px) { .howToUse .howToUse__list__text { margin: 28.981vw auto 0; width: 24.074vw; font-size: 1.852vw; font-weight: 500; letter-spacing: 0.04em; line-height: 3.148vw; } .howToUse .howToUse__list__text--note { margin: 0.926vw auto 0; width: 24.074vw; font-size: 1.296vw; line-height: 2.222vw; letter-spacing: 0.04em; } } @media only screen and (min-width: 1080px) { .howToUse .howToUse__list__text { margin: 313px auto 0; width: 260px; font-size: 20px; line-height: 34px; } .howToUse .howToUse__list__text--note { margin: 10px auto 0; width: 260px; font-size: 14px; line-height: 24px; } } /* ======================================= placeOfUse:PLACE OF USE 使用場所 ======================================= */ .placeOfUse { position: relative; } @media only screen and (max-width: 767px) { .placeOfUse { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_bg_sp.jpg) center top no-repeat; background-size: 100% 221.6vw; height: auto; padding-bottom: 13.333vw; } } @media only screen and (min-width: 768px) { .placeOfUse { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_bg.jpg) center top no-repeat; background-size: 100% 166.667vw; height: auto; padding-bottom: 9.815vw; } } @media only screen and (min-width: 1080px) { .placeOfUse { background-size: 100% 1800px; padding-bottom: 106px; } } .placeOfUse .placeOfUse__title { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__title { margin-left: 8.533vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__title { margin-left: 5.741vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__title { margin-left: 62px; font-size: 26px; line-height: 60px; } } .placeOfUse .placeOfUse__title--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__title--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__title--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__title--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } .placeOfUse .placeOfUse__list { display: flex; flex-wrap: wrap; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__list { width: 90.667vw; margin: 5.333vw auto 0; justify-content: center; gap: 3.733vw 3.2vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__list { width: 89.352vw; margin: 4.63vw auto 0; justify-content: center; gap: 3.704vw 3.241vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list { width: 965px; margin: 50px auto 0; gap: 40px 35px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__list li { width: 43.733vw; height: 34.8vw; padding-top: 27.2vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__list li { width: 43.056vw; height: 34.259vw; padding-top: 26.852vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li { width: 465px; height: 370px; padding-top: 290px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__list li .placeOfUse__list__text { font-size: 3.467vw; font-weight: 700; color: #ffffff; letter-spacing: 0.04em; line-height: 7.467vw; text-align: center; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__list li .placeOfUse__list__text { font-size: 2.593vw; font-weight: 700; color: #ffffff; letter-spacing: 0.04em; line-height: 7.407vw; text-align: center; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li .placeOfUse__list__text { font-size: 28px; line-height: 80px; } } .placeOfUse .placeOfUse__list li:nth-of-type(1) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list1.png) center top no-repeat; background-size: contain; } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li:nth-of-type(1) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list1_sp.png) center top no-repeat; background-size: contain; } } .placeOfUse .placeOfUse__list li:nth-of-type(2) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list2.png) center top no-repeat; background-size: contain; } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li:nth-of-type(2) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list2_sp.png) center top no-repeat; background-size: contain; } } .placeOfUse .placeOfUse__list li:nth-of-type(3) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list3.png) center top no-repeat; background-size: contain; } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li:nth-of-type(3) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list3_sp.png) center top no-repeat; background-size: contain; } } .placeOfUse .placeOfUse__list li:nth-of-type(4) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list4.png) center top no-repeat; background-size: contain; } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__list li:nth-of-type(4) { background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_list4_sp.png) center top no-repeat; background-size: contain; } } .placeOfUse .placeOfUse__stairs-wrap { display: flex; flex-direction: column; justify-content: center; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap { width: 25.867vw; margin-top: 14.4vw; margin-left: 5.333vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap { width: 17.963vw; margin-top: 12.407vw; margin-left: 3.704vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap { width: 194px; margin-top: 134px; margin-left: 40px; } } .placeOfUse .placeOfUse__stairs-wrap .stairs__circle { display: flex; align-items: center; justify-content: center; background-color: #2a5579; color: #ffffff; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__circle { width: 25.867vw; height: 25.867vw; border-radius: 12.933vw; font-size: 4.8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__circle { width: 17.963vw; height: 17.963vw; border-radius: 8.981vw; font-size: 3.333vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__circle { width: 194px; height: 194px; border-radius: 97px; font-size: 36px; } } .placeOfUse .placeOfUse__stairs-wrap .stairs__lead { display: flex; align-items: center; color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; writing-mode: vertical-rl; font-feature-settings: initial; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__lead { margin-top: 3.056vw; font-size: 5.867vw; line-height: 10.667vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__lead { margin-top: 3.056vw; font-size: 2.778vw; line-height: 5.185vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap .stairs__lead { margin-top: 33px; font-size: 30px; line-height: 56px; } } .placeOfUse .placeOfUse__stairs-wrap .item-box__wrap { display: flex; justify-content: center; position: absolute; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__wrap { top: 160vw; left: 33.333vw; width: 43.467vw; column-gap: 2.667vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__wrap { top: 124.722vw; left: 16.759vw; width: 30.185vw; column-gap: 1.111vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__wrap { top: 1347px; left: 181px; width: 326px; column-gap: 12px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__img { width: 15.467vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__img { width: 10.741vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__img { width: 116px; } } .placeOfUse .placeOfUse__stairs-wrap .item-box__color { color: #3e3a39; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__color { margin-top: 2.667vw; font-size: 2.747vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__color { margin-top: 1.481vw; font-size: 1.759vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__stairs-wrap .item-box__color { margin-top: 16px; font-size: 19px; } } .placeOfUse .placeOfUse__datails__title { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__datails__title { margin-top: 19.867vw; margin-left: 8.533vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__datails__title { margin-top: 16.574vw; margin-left: 5.926vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__datails__title { margin-top: 179px; margin-left: 64px; font-size: 26px; line-height: 60px; } } .placeOfUse .placeOfUse__datails__title--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__datails__title--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__datails__title--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__datails__title--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } .placeOfUse .placeOfUse__datails__img1 { position: relative; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__datails__img1 { width: 100%; margin: -46.667vw auto 0; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__datails__img1 { width: 100%; margin-top: -31.111vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__datails__img1 { width: 1080px; margin-top: -336px; } } .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt { position: absolute; border-radius: 100%; color: #fff; display: flex; justify-content: center; align-items: center; text-align: center; font-weight: 700; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt { top: 56vw; left: 12.8vw; width: 34.667vw; height: 34.667vw; font-size: 3.733vw; line-height: 5.333vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt { top: 41.667vw; left: 38.426vw; width: 17.222vw; height: 17.222vw; font-size: 1.852vw; line-height: 2.593vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt { top: 462px; left: 424px; width: 190px; height: 190px; font-size: 20px; line-height: 28px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt.placeOfUse__datails__img1_txt2 { top: 109.467vw; left: 60.4vw; width: 30.667vw; height: 30.667vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt.placeOfUse__datails__img1_txt2 { top: 64.815vw; left: 74.815vw; width: 14.352vw; height: 14.352vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__datails__img1 .placeOfUse__datails__img1_txt.placeOfUse__datails__img1_txt2 { top: 709px; left: 818px; width: 170px; height: 170px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__lead { margin-top: 15.733vw; width: 100%; height: 14.933vw; background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_lead_bg_sp.png) center bottom 1.733vw no-repeat; background-size: 102.4vw 11.467vw; font-size: 5.867vw; font-weight: 700; letter-spacing: 0.04em; line-height: 7.467vw; text-align: center; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__lead { margin-top: 7.593vw; width: 100%; height: 3.981vw; background: url(/wp-content/themes/gekiochikun/assets/img/torelooppremium/placeOfUse_lead_bg.png) center top no-repeat; background-size: cover; font-size: 3.704vw; font-weight: 700; letter-spacing: 0.04em; line-height: 3.981vw; text-align: center; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__lead { margin-top: 82px; width: 100%; height: 43px; font-size: 40px; line-height: 43px; } } .placeOfUse .placeOfUse__imagewrap1 { display: flex; justify-content: center; column-gap: 35px; margin-top: 40px; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__imagewrap1 { column-gap: 3.2vw; margin-top: 5.333vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__imagewrap1 { column-gap: 3.241vw; margin-top: 3.704vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__imagewrap1 { column-gap: 35px; margin-top: 40px; } } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__imagewrap1 .placeOfUse__img465w { width: 43.733vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__imagewrap1 .placeOfUse__img465w { width: 43.056vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__imagewrap1 .placeOfUse__img465w { width: 465px; } } .placeOfUse .placeOfUse__title2 { color: #3e3a39; display: flex; align-items: center; letter-spacing: 0.04em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__title2 { margin-top: 12.667vw; margin-left: 8.533vw; font-size: 3.467vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__title2 { margin-top: 8.796vw; margin-left: 5.648vw; font-size: 2.407vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__title2 { margin-top: 95px; margin-left: 61px; font-size: 26px; line-height: 60px; } } .placeOfUse .placeOfUse__title2--eng { display: inline-block; color: #2a5579; letter-spacing: 0.08em; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__title2--eng { margin-right: 2.133vw; font-size: 7.333vw; line-height: 8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__title2--eng { margin-right: 1.481vw; font-size: 5.093vw; line-height: 5.556vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__title2--eng { margin-right: 16px; font-size: 55px; line-height: 60px; } } .placeOfUse .placeOfUse__imagewrap2 { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__imagewrap2 { margin-top: 6.667vw; column-gap: 3.2vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__imagewrap2 { margin-top: 4.63vw; column-gap: 3.241vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__imagewrap2 { margin-top: 50px; column-gap: 35px; } } .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w { position: relative; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w { width: 43.733vw; height: 34.8vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w { width: 43.056vw; height: 34.259vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w { width: 465px; height: 370px; } } .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w__caption { position: absolute; color: #ffffff; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w__caption { width: 100%; height: 7.467vw; top: 27.333vw; left: 0; font-size: 3.467vw; font-weight: 700; line-height: 7.467vw; } } @media only screen and (min-width: 768px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w__caption { width: 100%; height: 7.407vw; top: 26.852vw; left: 0; font-size: 2.593vw; font-weight: 700; line-height: 7.407vw; } } @media only screen and (min-width: 1080px) { .placeOfUse .placeOfUse__imagewrap2 .placeOfUse__img465w__caption { width: 100%; height: 80px; top: 290px; left: 0; font-size: 28px; font-weight: 700; line-height: 80px; } } /* ======================================= pettype:ペット用タイプはこちら ======================================= */ .pettype { position: relative; } @media only screen and (max-width: 767px) { .pettype { background: url(../images/pettype_bg_sp.jpg) center top no-repeat; background-size: 100% 220vw; height: 220vw; padding-top: 12vw; } } @media only screen and (min-width: 768px) { .pettype { background: url(../images/pettype_bg.jpg) center top no-repeat; background-size: 100% 70.833vw; height: 70.833vw; padding-top: 8.796vw; } } @media only screen and (min-width: 1080px) { .pettype { background-size: 100% 765px; height: 765px; padding-top: 95px; } } .pettype .pettype__title { font-size: 44px; font-weight: 700; letter-spacing: 0.04em; text-align: center; } @media only screen and (max-width: 767px) { .pettype .pettype__title { font-size: 8.267vw; line-height: 11.067vw; } } @media only screen and (min-width: 768px) { .pettype .pettype__title { font-size: 4.074vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__title { font-size: 44px; } } .pettype .pettype__title__en { margin-top: 32px; font-size: 20px; color: #2a5579; letter-spacing: 0.12em; text-align: center; } @media only screen and (max-width: 767px) { .pettype .pettype__title__en { margin-top: 2.4vw; font-size: 2.667vw; } } @media only screen and (min-width: 768px) { .pettype .pettype__title__en { margin-top: 2.963vw; font-size: 1.852vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__title__en { margin-top: 32px; font-size: 20px; } } @media only screen and (max-width: 767px) { .pettype .pettype__wrap { display: block; width: 80vw; margin: 8.667vw auto 0; } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap { display: flex; margin: 4.537vw auto 0; justify-content: center; align-items: flex-end; column-gap: 5.185vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap { margin: 49px auto 0; column-gap: 56px; } } @media only screen and (max-width: 767px) { .pettype .pettype__wrap .pettype__img1 { margin-bottom: 12.667vw; width: 80vw; filter: drop-shadow(2.667vw 2.667vw 2.667vw rgba(0, 0, 0, 0.3)); } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap .pettype__img1 { transform: translateY(1.389vw); width: 42.593vw; filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap .pettype__img1 { transform: translateY(15px); width: 460px; } } .pettype .pettype__wrap .pettype__itemwrap { display: flex; justify-content: center; align-items: flex-end; column-gap: 20px; } @media only screen and (max-width: 767px) { .pettype .pettype__wrap .pettype__itemwrap { column-gap: 5.333vw; } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap .pettype__itemwrap { column-gap: 1.852vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap .pettype__itemwrap { column-gap: 20px; } } @media only screen and (max-width: 767px) { .pettype .pettype__wrap .pettype__item { width: 42.667vw; } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap .pettype__item { width: 20vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap .pettype__item { width: 216px; } } .pettype .pettype__wrap .pettype__item .pettype__item__img { margin: 0 auto; } @media only screen and (max-width: 767px) { .pettype .pettype__wrap .pettype__item .pettype__item__img { width: 18.933vw; } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap .pettype__item .pettype__item__img { width: 10.463vw; } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap .pettype__item .pettype__item__img { width: 113px; } } @media only screen and (max-width: 767px) { .pettype .pettype__wrap .pettype__item .pettype__item__name { margin: 5.067vw auto 0; width: 42.667vw; height: 6.667vw; border: 1px #3e3a39 solid; border-radius: 3.333vw; font-size: 4.267vw; font-weight: 700; line-height: 6.667vw; letter-spacing: 0.04em; text-align: center; } } @media only screen and (min-width: 768px) { .pettype .pettype__wrap .pettype__item .pettype__item__name { margin: 2.13vw auto 0; width: 20vw; height: 3.704vw; border: 1px #3e3a39 solid; border-radius: 1.852vw; font-size: 2.222vw; font-weight: 700; line-height: 3.704vw; letter-spacing: 0.04em; text-align: center; } } @media only screen and (min-width: 1080px) { .pettype .pettype__wrap .pettype__item .pettype__item__name { margin: 23px auto 0; width: 216px; height: 40px; border-radius: 20px; font-size: 24px; font-weight: 700; line-height: 40px; letter-spacing: 0.04em; text-align: center; } } /* ======================================= faq:よくある質問 ======================================= */ @media only screen and (max-width: 767px) { .faq { padding: 8.667vw 0 10.667vw; } } @media only screen and (min-width: 768px) { .faq { padding: 8.333vw 0 4.63vw; } } @media only screen and (min-width: 1080px) { .faq { padding: 90px 0px 90px; } } .faq__title { color: var(--strong_color); font-weight: 900; letter-spacing: 0.08em; text-align: center; } @media only screen and (max-width: 767px) { .faq__title { font-size: 6.933vw; } } @media only screen and (min-width: 768px) { .faq__title { font-size: 4.815vw; } } @media only screen and (min-width: 1080px) { .faq__title { font-size: 52px; } } @media only screen and (max-width: 767px) { .faq__list { margin-top: 6vw; } } @media only screen and (min-width: 768px) { .faq__list { margin-top: 4.63vw; } } @media only screen and (min-width: 1080px) { .faq__list { margin-top: 50px; } } .faq__box { border: solid #808fc5; } @media only screen and (max-width: 767px) { .faq__box { border-width: 0.933vw; margin: 3.2vw auto 0; padding: 2.667vw 3.333vw; width: 92.533vw; } } @media only screen and (min-width: 768px) { .faq__box { border-width: 0.648vw; margin: 2.778vw auto 0; padding: 2.222vw 4.074vw; width: 85.185vw; } } @media only screen and (min-width: 1080px) { .faq__box { border-width: 7px; margin: 30px auto 0; padding: 24px 44px; width: 920px; } } .faq__question { cursor: pointer; display: flex; position: relative; } @media only screen and (max-width: 767px) { .faq__question { gap: 2.667vw; } } @media only screen and (min-width: 768px) { .faq__question { gap: 1.852vw; } } @media only screen and (min-width: 1080px) { .faq__question { gap: 20px; } } .faq__question::before, .faq__question::after { background: var(--secondary_color); content: ""; position: absolute; right: 0; transition: transform .3s; } @media only screen and (max-width: 767px) { .faq__question::before, .faq__question::after { height: 0.667vw; top: 3.2vw; width: 5.867vw; } } @media only screen and (min-width: 768px) { .faq__question::before, .faq__question::after { height: 0.463vw; margin-top: -0.231vw; top: 50%; width: 4.074vw; } } @media only screen and (min-width: 1080px) { .faq__question::before, .faq__question::after { height: 5px; margin-top: -2.5px; width: 44px; } } .faq__question::after { transform: rotate(-90deg); } .faq__question.is_accordion--active::after { transform: rotate(0deg); } @media only screen and (max-width: 767px) { .faq__question__icon { width: 6.667vw; } } @media only screen and (min-width: 768px) { .faq__question__icon { width: 3.981vw; } } @media only screen and (min-width: 1080px) { .faq__question__icon { width: 43px; } } .faq__question__text { color: #000; font-weight: 700; position: relative; font-family: "Noto Sans JP", serif; } @media only screen and (max-width: 767px) { .faq__question__text { font-size: 4.533vw; line-height: 1.529; } } @media only screen and (min-width: 768px) { .faq__question__text { font-size: 2.407vw; line-height: 1.615; letter-spacing: 0.08em; } } @media only screen and (min-width: 1080px) { .faq__question__text { font-size: 26px; } } .faq__answer { border-top: 1px solid var(--strong_color); display: none; } @media only screen and (max-width: 767px) { .faq__answer { margin-top: 2.933vw; padding: 3.333vw 0 1.333vw; } } @media only screen and (min-width: 768px) { .faq__answer { margin-top: 2.778vw; padding: 2.315vw 0 0.926vw; letter-spacing: 0.08em; } } @media only screen and (min-width: 1080px) { .faq__answer { margin-top: 30px; padding: 25px 0 10px; } } .faq__answer__text { font-family: "Noto Sans JP", serif; color: #333333; } @media only screen and (max-width: 767px) { .faq__answer__text { line-height: 1.714; } } @media only screen and (min-width: 768px) { .faq__answer__text { letter-spacing: 0.01em; line-height: 1.8; } } @media only screen and (max-width: 767px) { .footer-banner { margin-bottom: 10.667vw; } } @media only screen and (min-width: 768px) { .footer-banner { margin-bottom: 3.704vw; } } @media only screen and (min-width: 1080px) { .footer-banner { margin-bottom: 40px; } } .footer-banner .banner1 { display: block; } @media only screen and (max-width: 767px) { .footer-banner .banner1 { margin: 0 auto; width: 92.533vw; } } @media only screen and (min-width: 768px) { .footer-banner .banner1 { margin: 0 auto; width: 85.185vw; } } @media only screen and (min-width: 1080px) { .footer-banner .banner1 { margin: 0 auto; width: 920px; } } /* ======================================= footer ======================================= */ .footer { color: var(--strong_color); position: relative; text-align: center; } @media only screen and (max-width: 767px) { .footer { padding: 5.333vw 4vw 6.667vw; } } @media only screen and (min-width: 768px) { .footer { padding: 2.407vw 2.778vw 5.556vw; } } @media only screen and (min-width: 1080px) { .footer { padding: 26px 30px 60px; } } .footer__logo { align-items: center; display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .footer__logo { gap: 3.467vw; } } @media only screen and (min-width: 768px) { .footer__logo { gap: 2.037vw; } } @media only screen and (min-width: 1080px) { .footer__logo { gap: 22px; } } @media only screen and (max-width: 767px) { .footer__logo__company { width: 33.067vw; } } @media only screen and (min-width: 768px) { .footer__logo__company { width: 20vw; } } @media only screen and (min-width: 1080px) { .footer__logo__company { width: 216px; } } @media only screen and (max-width: 767px) { .footer__logo__series { width: 32.933vw; } } @media only screen and (min-width: 768px) { .footer__logo__series { width: 19.907vw; } } @media only screen and (min-width: 1080px) { .footer__logo__series { width: 215px; } } @media (any-hover: hover) { .footer__logo__link:hover { opacity: 0.8; } } @media only screen and (max-width: 767px) { .footer__nav { margin-top: 7.467vw; } } @media only screen and (min-width: 768px) { .footer__nav { margin-top: 3.241vw; } } @media only screen and (min-width: 1080px) { .footer__nav { margin-top: 35px; } } .footer__nav__list { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .footer__nav__list { margin-top: 5.867vw; flex-wrap: wrap; } } @media only screen and (min-width: 768px) { .footer__nav__list { margin-top: 1.852vw; } } @media only screen and (min-width: 1080px) { .footer__nav__list { margin-top: 20px; } } @media only screen and (max-width: 767px) { .footer__nav__item { font-size: 3.2vw; line-height: 1.667; padding: 0 2.933vw; margin-bottom: 2.667vw; } } @media only screen and (min-width: 768px) { .footer__nav__item { font-size: 2.037vw; line-height: 1.818; padding: 0 2.5vw; } } @media only screen and (min-width: 1080px) { .footer__nav__item { font-size: 22px; padding: 0 27px; } } .footer__nav__item:not(:last-child) { border-right: 1px solid var(--strong_color); } .footer__nav__link { color: var(--strong_color); } @media (any-hover: hover) { .footer__nav__link:hover { opacity: 0.8; text-decoration: underline; } } @media only screen and (max-width: 767px) { .license { font-size: 2.133vw; line-height: 1.75; margin-top: 3.333vw; } } @media only screen and (min-width: 768px) { .license { font-size: 1.481vw; margin-top: 3.981vw; letter-spacing: 0.08em; } } @media only screen and (min-width: 1080px) { .license { font-size: 16px; margin-top: 43px; letter-spacing: 0.08em; } } @media only screen and (max-width: 767px) { .copyright { font-size: 2.4vw; margin-top: 2.667vw; } } @media only screen and (min-width: 768px) { .copyright { font-size: 1.667vw; margin-top: 1.852vw; letter-spacing: 0.08em; } } @media only screen and (min-width: 1080px) { .copyright { font-size: 18px; margin-top: 20px; letter-spacing: 0.08em; } }