@charset "UTF-8"; /* Reset style */ /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) 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 */ @import url(https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Zen+Maru+Gothic:wght@300;400;500;700;900&display=swap); @import url(https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap); *:where(:not(.footer-category-wrap, .footer-category-wrap *, .footer-about, .footer-about *, .footer, footer *, html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } @media all and (min-width: 1400px) { .mug-main .container { max-width: 1091px; } } :where() /* 変数 */ :root { --color-green01: #349599; --color-green02: #36b6b8; --color-green03: #6FC5C2; --color-pink: #EE869A; --color-blue: #7BADD5; --color-yellow: #FDEE52; --color-baige: #F5ECD7; } /* 色 */ .text-green01 { color: var(--color-green01); } .text-green02 { color: var(--color-green02); } .text-green03 { color: var(--color-green03); } .text-pink { color: var(--color-pink); } .text-blue { color: var(--color-blue); } .text-yellow { color: var(--color-yellow); } /* 行間を広げるためのクラス */ .lh-16 { line-height: 1.6; } .lh-17 { line-height: 1.7; } .lh-18 { line-height: 1.8; } .lh-2 { line-height: 2; } .lh-1 { line-height: 1; } .lh-14 { line-height: 1.3; } /*文字間隔を広げるためのクラス */ .ls-003 { letter-spacing: 0.03em; } .ls-002 { letter-spacing: 0.02em; } .ls-0 { letter-spacing: 0; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 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; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::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; } .pc { display: block; } @media screen and (max-width: 768px) { .pc { display: none; } } .sp { display: none; } @media screen and (max-width: 768px) { .sp { display: block; } } /* br-sp */ .br-sp_1420 { display: none; } @media screen and (max-width: 1420px) { .br-sp_1420 { display: block; } } .br-sp_1380 { display: none; } @media screen and (max-width: 1380px) { .br-sp_1380 { display: block; } } .br-sp_1280 { display: none; } @media screen and (max-width: 1280px) { .br-sp_1280 { display: block; } } .br-sp_1180 { display: none; } @media screen and (max-width: 1180px) { .br-sp_1180 { display: block; } } .br-sp_820 { display: none; } @media screen and (max-width: 800px) { .br-sp_820 { display: block; } } .br-sp_480 { display: none; } @media screen and (max-width: 480px) { .br-sp_480 { display: block; } } /* br-sp_oo-oo */ /* br-pc */ /* br-pc_oo-oo */ html { font-size: 62.5%; scroll-behavior: smooth; background-color: #fff7e1; } @media screen and (max-width: 480px) { html { font-size: 54.6%; } } body { background-color: #fff7e1; width: 100%; margin: 0 auto; font-family: "Zen Maru Gothic", serif; font-weight: bold; color: #776556; font-size: 1.6rem; overflow-x: hidden; } @media screen and (max-width: 1366px) { body { font-size: 1.17vw; } } img { display: block; width: 100%; -o-object-fit: contain; object-fit: contain; } :where(main) :where(h2, h3, h4, p, li, a, div) { letter-spacing: 0.1em; line-height: 1.8; } :where(.sec02) p { letter-spacing: 0.02em; } :where(main) .container { padding-right: var(--bs-gutter-x, 1.75rem); padding-left: var(--bs-gutter-x, 1.75rem); } :where(main) :where(ol, ul) { padding-left: unset; margin-bottom: unset; } :where(main) :where(a) { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } :where(main) :where(a:hover) { opacity: 0.8; } :where(.sec05) :is(h2, h3, h4, p, li, a, div) { letter-spacing: 0; line-height: 1.6; margin: 0; } .no-link { pointer-events: auto; } .ttl-asi { position: relative; width: -moz-fit-content; width: fit-content; margin-inline: auto; } .ttl-asi::before, .ttl-asi::after { content: ""; position: absolute; top: 50%; transform: translateY(-40%); display: inline-block; width: 2.2rem; aspect-ratio: 22/66; background-repeat: no-repeat; background-size: contain; } @media screen and (max-width: 1366px) { .ttl-asi::before, .ttl-asi::after { width: 1.61vw; } } @media screen and (max-width: 768px) { .ttl-asi::before, .ttl-asi::after { width: 3vw; } } .ttl-asi::before { background-image: url("../img/pa92.png"); left: -4rem; } @media screen and (max-width: 1366px) { .ttl-asi::before { left: -2.93vw; } } @media screen and (max-width: 768px) { .ttl-asi::before { left: -5vw; } } .ttl-asi::after { background-image: url("../img/pa93.png"); right: -4rem; } @media screen and (max-width: 1366px) { .ttl-asi::after { right: -2.93vw; } } @media screen and (max-width: 768px) { .ttl-asi::after { right: -5vw; } } * { -webkit-appearance: none; } .shop-icon { position: fixed; bottom: 20px; right: 20px; z-index: 100; aspect-ratio: 1; width: 70px; } @media all and (min-width: 992px) { .shop-icon { width: 88px; } } section { max-width: 1980px; width: 100%; margin-inline: auto; } header { position: fixed; top: 0; z-index: 1000; width: 100%; } .mug-main { overflow-x: hidden; } header, .mug-main, .shop-icon { opacity: 0; animation: pageReveal 0.4s ease 2.8s forwards; } @keyframes pageReveal { to { opacity: 1; } } .mug-header { width: 100%; background-color: #fff; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 999; } .mug-header .logo { width: 138px; /* max-width: 231px; */ margin: 12px 0 16px 20px; } @media all and (min-width: 992px) { .mug-header .logo { width: 190px; } } @media all and (min-width: 1200px) { .mug-header .logo { margin-left: 9.66vw; } header { position: sticky; top: -63px; z-index: 999; } } @media screen and (min-width: 1366px) { .mug-header .logo { margin: 3rem 17.5rem; } } @media all and (min-width: 1400px) { header { top: -101px; } } .mug-header .toshop { color: #339599; line-height: 1; margin-right: 9.66vw; width: 14.64vw; max-width: 200px; } @media screen and (min-width: 1366px) { .mug-header .toshop { margin: 3rem 13.5rem; } } @media screen and (max-width: 768px) { .mug-header .toshop { width: 30.93vw; margin-right: 3.66vw; } } /* mv */ .mv { position: relative; padding-bottom: 21vw; } .mv-inner { width: 100%; padding-top: 77px; } .bg-stripe { background-image: url("../img/common/bg-stripe.png"); background-repeat: repeat; background-size: contain; } .tlimug-logo { width: 12.3vw; max-width: 46px; margin-inline: auto; } .mv-title { font-size: 2.7rem; margin-bottom: 5.9vw; } .mv-img { position: relative; width: 100%; margin-inline: auto; } .mv-splide { position: relative; z-index: 2; } .mv-splide, .mv-splide .splide__slide img { margin-inline: auto; } .mv-img-back { position: absolute; position: absolute; top: 50%; left: 50%; transform: translate(-48%, -45%); width: 95%; z-index: 0; } .concept { position: relative; text-align: center; margin: 45px 0; } .concept__ttl { font-size: 1.6rem; margin-bottom: 12px; } .concept__lead { font-size: 2.1rem; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-color: var(--color-green02); text-decoration-thickness: 2px; text-underline-offset: 9px; line-height: 2; } .concept__lead span { text-decoration: inherit; } .concept__text { font-size: 1.6rem; } @media all and (max-width: 350px) { .concept__lead { font-size: 1.9rem; letter-spacing: 0em; } .concept__text { font-size: 1.4rem; } } /* .mug-sample-slider { padding-bottom: 11.98vw; } */ .mug-main-splide { position: relative; z-index: 5; } @keyframes mugSlideActive { 0% { transform: rotate(10deg) scale(1); } 60% { transform: rotate(0deg) scale(1.27); } 100% { transform: rotate(0deg) scale(1.2); } } @keyframes mugSlideLeave { 0% { transform: rotate(0deg) scale(1.15); } 100% { transform: rotate(10deg) scale(1); } } .mug-main-splide .splide__slide { padding: 10px; } .mug-main-splide .splide__slide img { transform: rotate(10deg) scale(1); } .mug-main-splide .splide__slide.is-active img { animation: mugSlideActive 0.4s ease forwards; max-width: 330px; } .mug-main-splide .splide__slide.is-leaving img { animation: mugSlideLeave 0.4s ease forwards; } .mug-thumb-splide { margin-top: -12vw; width: 90%; margin-inline: auto; max-width: 1296px; } .mug-thumb-splide .splide__slide img { width: 100%; max-width: 1296px; margin-inline: auto; border-radius: 32px; height: 160px; object-fit: cover; } .splide__pagination .splide__pagination__page { width: 12px; aspect-ratio: 1; background-color: #dadada; border-radius: 50%; } .splide__pagination .splide__pagination__page.is-active { background-color: #776556; } .splide__pagination { gap: 16px; margin-top: 20px; } @keyframes yura { 0% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(0); } } .yura { animation-name: yura; animation-duration: 2s; animation-fill-mode: forwards; animation-iteration-count: infinite; } .mv-kumo1, .mv-kumo2, .mv-kumo3 { position: absolute; } .mv-kumo1 { width: 16vw; top: 17vw; right: 0; } .mv-kumo2 { width: 16vw; left: 0; top: 122vw; } .mv-kumo3 { width: 20vw; right: 0; bottom: 99vw; } .ill { position: absolute; z-index: 10; } .ill1 { width: 27.2vw; max-width: 102px; top: -5vw; left: -3vw; } .ill2 { width: 20.8vw; max-width: 78px; right: 9vw; top: 120px; animation-delay: 0.5s; } .ill3 { width: 14.7vw; max-width: 55px; bottom: 0; right: 0; } .ill4 { width: 28.16vw; max-width: 106px; left: 14px; top: -37px; animation-delay: 1s; } .ill5 { width: 23.3vw; max-width: 87px; bottom: -65px; right: 6px; } .ill6 { width: 15.57vw; max-width: 58px; bottom: -59px; left: 12px; animation-delay: 0.5s; } @media all and (min-width: 576px) { .mv-kumo1 { top: 12vw; } .mv-kumo2 { top: 79vw; } .mv-kumo3 { bottom: 55vw; } .ill1 { top: 1vw; left: 1vw; } } @media all and (min-width: 768px) { .mv-title { font-size: 3.2rem; margin-bottom: 1.9vw; } .ill1 { top: 1vw; left: 6vw; } .ill3 { bottom: 3vw; right: 6vw; } .ill { scale: 1.3; } .concept__lead { font-size: 3.2rem; text-underline-offset: 14px; text-decoration-thickness: 3px; } .concept__text { font-size: 1.8rem; } } @media all and (min-width: 992px) { .mv { padding-bottom: 160px; } .mv-inner { padding-top: 6rem; margin-top: 6.2rem; } .tlimug-logo { position: absolute; width: 5.4vw; max-width: 87px; left: 10vw; top: 1.9vw; } .mv-title { font-size: 3.6rem; margin-bottom: -17px; } .my-splide img, .mv-splide, .mv-splide .splide__slide img { width: auto; } .mug-thumb-splide { margin-top: -55px; } .splide__pagination .splide__pagination__page { width: 16px; } /* .mv-img-back { width: auto; } */ .mv-kumo1 { top: 0; } .mv-kumo2 { top: 37vw; } .mv-kumo3 { bottom: 33vw; } .ill { scale: 1; } .ill1 { width: 14.3vw; max-width: 229px; top: 5.5vw; left: -5.5vw; } .ill2 { width: 11.5vw; max-width: 184px; right: 6.5vw; top: 123px; } .ill3 { width: 8.3vw; max-width: 133px; bottom: 19px; right: 3.6vw; } .ill4 { width: 15.3vw; max-width: 245px; left: 4.8vw; } .ill5 { width: 11.4vw; max-width: 182px; bottom: 237px; right: 4.8vw; } .ill6 { width: 8.1vw; max-width: 129px; bottom: 164px; left: 3.5vw; } } @media all and (min-width: 1200px) { /* .mv { padding-bottom: 290px; } */ .mv-title { font-size: 4.6rem; } .mv-inner { margin-top: 0; } .concept { margin: 90px 0 65px; } .concept__lead { font-size: 3.6rem; text-underline-offset: 18px; } .concept__text { font-size: 2.0rem; } .mug-thumb-splide { margin-top: -80px; } .mug-thumb-splide .splide__slide img { height: 288px; } } @media all and (min-width: 1400px) { .ill1 { top: 4vw; left: -136px; } .ill2 { right: 11.5vw; top: 123px; } .ill3 { bottom: 11px; right: 0; } .ill4 { left: -4.8vw; } .ill5 { bottom: 337px; right: -5.8vw; } .ill6 { bottom: 194px; left: -1.5vw; } } @media all and (min-width: 1600px) { .mv-kumo2 { top: 592px; } .mv-kumo3 { bottom: 528px; } } @media all and (max-width: 350px) { .mv-title { font-size: 2.5rem; } } /* //mv */ /* sec01 */ .sec01 { background-color: #B8DFD6; /* margin-top: 10.98vw; */ padding: 20px 0 20rem; width: 100%; position: relative; margin-top: -4vw; } .sec01::before { content: ""; background-image: url(../img/sec01/sec01-bg-top.png); position: absolute; width: 100%; top: -8.4vw; height: 10.98vw; background-repeat: no-repeat; background-size: contain; } @media all and (min-width: 992px) { .sec01 { padding: 4rem 0 18rem; margin-top: -2vw; } .sec01::before { background-size: cover; background-position-x: center; } } @media all and (min-width: 1200px) { .sec01 { /* margin-top: -21rem; */ margin-top: 0; } .sec01::before { top: -100px; height: 139px; } } .sec01-txtbox { padding: 40px 30px; background-color: #E8F8F8; border-radius: 30px; } .sec01-txtbox__wrap { max-width: 847px; margin-inline: auto; } .sec01-txtbox__ttl { font-size: 2.4rem; margin-bottom: 1.8rem; } .sec01-txtbox__text { font-size: 1.8rem; background-image: radial-gradient(circle, var(--color-green01) 1px, transparent 2px); background-size: 6px 2.5em; /* 横間隔縦間隔 */ background-position: 0 3.5em; /* ドットを行の下端に合わせる */ line-height: 2.5em; } .linedot { font-size: 1.8rem; background-image: radial-gradient(circle, var(--color-green03) 1px, transparent 2px); background-size: 6px 2.5em; /* 横間隔縦間隔 */ background-position: 0 3.5em; /* ドットを行の下端に合わせる */ line-height: 2.5em; } .linedot.white { background-image: radial-gradient(circle, #fff 1px, transparent 2px); } .sec01-txtbox__professor { font-size: 1.8rem; margin-bottom: 0; } .better { margin-top: 40px; } .better__wrap { display: flex; justify-content: center; gap: 10px; } .better__img { width: 40%; max-width: 189px; } .better__img img { border-radius: 50%; } .better__lead { text-align: center; font-size: 1.6rem; line-height: 1; align-self: center; margin-bottom: 0; margin-top: 10px; } .better__lead .text-white-circle, .master__lead .text-white-circle { margin-left: 3px; margin-right: 3px; } .text-white-circle { display: inline-block; padding: 5px 0.67em; border-radius: 2em; background: #fff; font-weight: bold; margin-bottom: 4px; text-wrap: nowrap; } .better__lead--straw, .better__lead--cup { font-size: 2.4rem; } .better__lead--straw { color: var(--color-pink); } .better__lead--cup { color: #7ab4c8; } .better__lead--large { font-size: 2.4rem; line-height: 2; } .better-ttl { font-size: 2.4rem; font-weight: bold; margin-bottom: 30px; } .midashi-pattern1 { position: relative; padding: 0 3.2rem; display: table; margin-inline: auto; } .midashi-pattern1::before, .midashi-pattern1::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); width: 2.4rem; aspect-ratio: 30/50; background-repeat: no-repeat; background-size: contain; } .midashi-pattern1::before { left: 0; background-image: url('../img/common/midashi01-left.svg'); } .midashi-pattern1::after { right: 0; background-image: url('../img/common/midashi01-right.svg'); } .better-cards { display: flex; gap: 3rem; justify-content: center; margin-top: 7rem; flex-direction: column; padding: 0 1rem; } .better-card { position: relative; flex: 1; max-width: 507px; padding: 60px 38px 40px 38px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; background-color: #fff; } .better-card__ribbon { position: absolute; top: -20px; left: -10px; width: 150px; aspect-ratio: 218/100; } .better-card__img { width: 72%; margin-inline: auto; margin-bottom: 2.4rem; } .better-card__img img { border-radius: 50%; } .better-card__body { width: 100%; } .better-card__list { width: fit-content; margin-inline: auto; } .better-card__item { display: flex; align-items: center; gap: 8px; font-size: 1.6rem; letter-spacing: 0.02em; } .better-card__item::before { content: ""; display: inline-block; width: 2rem; height: 2rem; background-repeat: no-repeat; background-size: contain; flex-shrink: 0; } .better-card__item--straw::before { background-image: url('../img/sec01/check-pink.svg'); } .better-card__item--cup::before { background-image: url('../img/sec01/check-blue.svg'); } .better-card__btn { width: 100%; margin-top: auto; } .better-card__btn a { display: block; width: 100%; } .arrow { -webkit-mask: url('../img/common/arrow01.svg') no-repeat center / contain; mask: url('../img/common/arrow01.svg') no-repeat center / contain; width: 40px; aspect-ratio: 71/37; } .better-arrow { background-color: var(--color-baige); margin: 25px auto 20px; } .better-txt { font-size: 1.8rem; } .better-txt span.strong { font-size: 2.4rem; color: var(--color-green01); } .yellow-line { /* text-decoration-color: var(--color-yellow); text-decoration-line: underline; text-decoration-thickness: 0.5em; text-underline-offset: -5px; text-decoration-skip-ink: none; */ background: linear-gradient(transparent 65%, var(--color-yellow) 65%) no-repeat; padding-bottom: 0.01em; /* padding-inline: 0.1em; margin-inline: -0.1em; */ } @media all and (min-width: 576px) {} @media all and (min-width: 768px) { .better__img { width: 145px; } .better-cards { flex-direction: row; gap: 2rem; } } @media all and (min-width: 992px) { .better { margin-top: 80px; } .better-txt { font-size: 2.2rem; } .better-txt span.strong { font-size: 3.2rem; } .arrow { width: 71px; } .better__wrap { gap: 45px; } .better-arrow { margin: 10px auto 37px; } .better__lead { font-size: 2.8rem; } .better__lead--straw, .better__lead--cup { font-size: 3.6rem; } .sec01-txtbox__ttl { font-size: 3.2rem; } .text-white-circle { padding: 10px 0.67em; } .better-cards { flex-direction: row; gap: 6rem; margin-top: 14rem; } .better-card__item { font-size: 2.2rem; } .better-ttl { font-size: 4rem; } .better__lead--large { font-size: 4rem; } .sec01-txtbox__text, .sec01-txtbox__professor { font-size: 2.0rem; } .better-card__ribbon { width: 218px; top: -32px; left: -36px; } .midashi-pattern1 { padding: 0 4.4rem; } .midashi-pattern1::before, .midashi-pattern1::after { width: 3.4rem; } } @media all and (min-width: 1200px) { .better__img { width: 189px; } } @media all and (max-width: 350px) { .better__lead--straw, .better__lead--cup { font-size: 2rem; } .better__lead--large { font-size: 2.2rem; } .sec01-txtbox__ttl { font-size: 2rem; } .sec01-txtbox__text { font-size: 1.6rem; } .sec01-txtbox__professor { font-size: 1.6rem; } .better-ttl { font-size: 2.1rem; } .sec01-txtbox { padding: 30px 20px; } .better-card__item { font-size: 1.4rem; } } /* //sec01 */ /* sec02 */ .sec02, .sec03, .sec04 { margin-top: -10rem; } .sec02-main { background-color: #FFF6F7; padding: 35px 0 60px; position: relative; } .sec02-main::before { content: ""; background-image: url(../img/sec02/sec02-bg-top.png); position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; top: -7.7vw; height: 10.98vw } @media all and (min-width: 768px) { .sec02, .sec03, .sec04 { margin-top: -5rem; } } @media all and (min-width: 992px) { .sec02, .sec03, .sec04 { margin-top: 0rem; } .sec02-main { padding: 4rem 0 10rem; } .sec02-main::before { background-size: cover; background-position-x: center; } } @media all and (min-width: 1200px) { .sec02 { /* margin-top: -21rem; */ margin-top: 0; } .sec02-main::before { top: -100px; height: 139px; } } .master-txtbox { position: relative; } .master-ttl { font-size: 2.0rem; } .master-ttl span { font-size: 2.4rem; } .master__lead { font-size: 1.8rem; } .master__lead--small { font-size: 1.7rem; } .master__lead--small2 { font-size: 1.5rem; } .master__txt { font-size: 1.6rem; max-width: 856px; margin-inline: auto; width: fit-content; } .master__txt-inner { display: inline; } .stepbox { display: flex; flex-direction: column; gap: 6px; max-width: 1076px; margin-inline: auto; margin-top: 80px; } .stepcard { background-color: #FFF; padding: 30px; border-radius: 30px; position: relative; } .stepcard__inner { display: flex; flex-direction: column; gap: 20px; } .stepcard__left { flex: 1; } .stepcard__right { flex: 1; } .stepcard__right-inner { padding: 6%; background-image: url(../img/sec02/step1-right-dot.png); background-repeat: no-repeat; background-size: contain; aspect-ratio: 458/441; display: flex; align-items: center; justify-content: center; flex-direction: column; } .stepcard__video iframe { width: 100%; border-radius: 16px; aspect-ratio: 447/253; height: auto; } .cup-stepcard.step2 .stepcard__right-inner { background-image: url(../img/sec03/step2-right-dot-blue.png); aspect-ratio: 458/358; padding: 6% 10% 7%; } .cup-stepcard.step3 .stepcard__right-inner { background-image: url(../img/sec03/step3-right-dot-blue.png); aspect-ratio: 458/328; } .stepcard__right video { width: 100%; border-radius: 16px; } .stepcard__right-txt { font-size: 1.6rem; font-weight: 500; } .stepcard__badge { position: absolute; width: 120px; aspect-ratio: 164/75; top: -15px; left: -8px; } .lunar-circle { width: 60px; aspect-ratio: 1; } .lunar-circle__wrap { flex-shrink: 0; } .stepcard__heading { display: flex; align-items: baseline; justify-content: center; gap: 0 1.2rem; margin-top: 0.8rem; margin-bottom: 2rem; } .stepcard__ttl { font-size: 2.1rem; align-self: center; margin-bottom: 0; font-weight: bold; letter-spacing: 0.02em; } .stepcard__ttl span { font-size: 1.2rem; display: block; line-height: 1.2; margin-bottom: 4px; } .stepcard__img img { border-radius: 16px; } .cup-stepcard .stepcard__img img { border-radius: 0px; } .stepcard__name { margin-top: 1.6rem; margin-bottom: 1.2rem; font-size: 1.8rem; } .stepcard__name span { font-size: 2.0rem; } .stepcard__desc { font-size: 1.6rem; margin-top: 0.8rem; line-height: 1.8; } .cup-stepcard .stepcard__desc { margin-top: 1.8rem; } .step02 .stepcard__right img { width: 85%; } .step-arrow { background-color: #776556; margin: 25px auto 20px; position: relative; } .section-line { background-image: url(../img/common/dotline-blown.svg); background-repeat: repeat-x; background-size: cover; width: 100%; height: 3px; } .point__txt { line-height: 1.6; } .point__txt1 { font-size: 2rem; margin-bottom: 0; font-weight: bold; } .point__txt2 { letter-spacing: 0.12em; font-weight: 900; font-size: 2.4rem; } .point-cards { display: flex; gap: 30px 0; flex-direction: column; justify-content: center; } .point-card { max-width: 332px; margin-inline: auto; } .point-card__img img { border-radius: 30px; } .point-card__num { width: 42px; line-height: 40px; aspect-ratio: 1; font-size: 2rem; color: #fff; border-radius: 50%; text-align: center; margin-inline: auto; } .point-card__num--pink { background-color: var(--color-pink); } .point-card__num--blue { background-color: var(--color-blue); } .point-card__ttl { font-size: 1.8rem; } .point-card__txt { font-size: 1.6rem; margin-bottom: 0; font-weight: 500; } .point__note { font-size: 1.2rem; font-weight: 500; } @media screen and (max-width: 480px) { .point__note { font-size: 1.2rem; } } @media all and (min-width: 576px) {} @media all and (min-width: 768px) { .stepcard__inner { flex-direction: row; gap: 20px; } .point-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 4%; } .cup-point-cards.point-cards { grid-template-columns: repeat(2, minmax(0, 332px)); } .point-card { display: grid; grid-template-rows: subgrid; grid-row: span 4; /* max-width:none; */ } .section-line { height: 4px; } } @media all and (min-width: 992px) { .master-ttl { font-size: 3.2rem; } .master-ttl span { font-size: 4rem; } .master__lead { font-size: 2.8rem; } .master__lead--small { font-size: 2.7rem; } .master__lead--small2 { font-size: 2.4rem; } .master__txt { font-size: 2rem; } .stepbox { margin-top: 100px; } .stepcard { padding: 40px 60px 50px 60px; } .stepcard__heading { gap: 0 2.4rem; } .stepcard__badge { width: 164px; top: -21px; left: -27px; } .stepcard__inner { gap: 40px; } .stepcard__right-inner { padding: 24px 35px 38px 35px; } .cup-stepcard.step1 .stepcard__right-inner { padding: 24px 38px 38px 24px; } .cup-stepcard.step2 .stepcard__right-inner { padding: 23px 52px 32px 51px; } .stepcard__right, .stepcard__left { width: calc(50% - 20px); } .stepcard__ttl { font-size: 3.2rem; } .stepcard__ttl span { font-size: 1.6rem; display: block; line-height: 1.2; } .lunar-circle { width: 85px; border-radius: 50%; font-size: 3.6rem; } .lunar-circle small { font-size: 1.4rem; } .stepcard__name { font-size: 2.2rem; } .stepcard__name span { font-size: 2.4rem; } .stepcard__desc { font-size: 2rem; } .point__txt1 { font-size: 2.4rem; } .point__txt2 { font-size: 3.6rem; } /* .point-card__ttl { font-size: 2rem; } */ .point-card__txt { font-size: 1.8rem; } } @media all and (min-width: 1200px) {} @media all and (max-width: 374px) { .master-ttl { font-size: 1.8rem; } .master-ttl span { font-size: 2.2rem; } .master__txt { font-size: 1.4rem; } .master__txt-inner { letter-spacing: 0; } } /* sec02-tabarea */ .sec02-tabarea, .sec03-tabarea { padding: 60px 0 20rem; background-image: url(../img/common/bg-stripe.png); background-repeat: repeat; background-size: contain; } .sec02-tabarea p { letter-spacing: 0.02em; } .tab-buttons { display: flex; justify-content: center; gap: 0 7px; font-size: 1.4rem; letter-spacing: 0.02em; margin-inline: 20px; line-height: 1.2; } .tab-btn { border-radius: 16px 16px 0 0; border-top: 1px solid var(--color-pink); border-right: 1px solid var(--color-pink); border-left: 1px solid var(--color-pink); color: var(--color-pink); background-color: #FFF6F7; padding: 5px 10px; text-align: center; min-height: 45px; transition: 0.2s; } .tab-btn:hover, .tab-btn.is-active { background-color: var(--color-pink); color: #fff; border-color: var(--color-pink); } .sec03-tabarea .tab-btn { border-top: 1px solid var(--color-blue); border-right: 1px solid var(--color-blue); border-left: 1px solid var(--color-blue); color: var(--color-blue); background-color: #E8F8F8; transition: 0.2s; } .sec03-tabarea .tab-btn:hover, .sec03-tabarea .tab-btn.is-active { background-color: var(--color-blue); color: #fff; border-color: var(--color-blue); } @media all and (max-width: 400px) { .tab-btn { border-radius: 12px 12px 0 0; } .tab-buttons { font-size: 1.1rem; } .sec03-tabarea .tab-btn { padding: 5px 3px; } .sec03-tabarea .tab-buttons { margin-inline: 15px; } } .tab-content { padding: 30px; display: none; background-color: #fff; border-radius: 30px; position: relative; } .lineup-content { padding: 30px; background-color: #fff; border-radius: 30px; position: relative; } .function-icon { /* position: absolute; right: 30px; top: 30px; */ gap: 8px; justify-content: right; margin-bottom: 2rem; } .function-icon img { width: 40px; margin-inline: auto; } .function-icon__note { font-size: 0.9rem; margin-bottom: 0; } .tab-content.is-active { display: block; } .tab-content__ttlbox { gap: 0 24px; } .tab-content__ttl, .lineup-content__ttl { font-size: 2rem; align-self: center; line-height: 1.4; } .lineup-content__ttl span { font-size: 1.6rem; } .tab-content__cards, .lineup-content__cards { display: flex; gap: 40px; flex-direction: column; justify-content: center; } .tab-content__card, .lineup-content__card { max-width: 292px; margin-inline: auto; display: flex; flex-direction: column; } .tab-content__cards:has(.splide), .lineup-content__cards:has(.splide) { display: block; } .tab-content__name, .lineup-content__name { font-size: 1.8rem; line-height: 1.4; flex-grow: 1; } .lineup-content__name { line-height: 1.6; } .tab-content__name span, .lineup-content__name span { font-size: 1.4rem; } .tab-content__txt, .lineup-content__txt { font-size: 1.4rem; flex-grow: 1; font-weight: 500; line-height: 1.6; } .tab-content__cta, .lineup-content__cta { display: block; border-radius: 100vh; max-width: 341px; padding: 0.5rem 2rem; text-align: center; color: #fff; font-size: 2rem; width: 100%; margin-inline: auto; } .tab-content__cta:hover, .lineup-content__cta:hover { opacity: 0.8; color: #fff; } .tab-content__cta--pink, .lineup-content__cta--pink { background-color: var(--color-pink); } .tab-content__cta--blue, .lineup-content__cta--blue { background-color: var(--color-blue); } .tab-content__cta--green02, .lineup-content__cta--green02 { background-color: var(--color-green02); } .tab-content__cta::after, .lineup-content__cta::after { content: ""; background-image: url(../img/common/button-arrow.svg); background-repeat: no-repeat; background-size: contain; width: 8.45px; aspect-ratio: 8.45/15; display: inline-block; margin-left: 16px; } .tab-content__under { border: 3px dotted var(--color-blue); border-radius: 16px; width: fit-content; margin-inline: auto; padding: 30px; display: flex; gap: 20px; flex-direction: column; max-width: 856px; } .tab-content__under-ttl { font-size: 2rem; } .tab-content__under-txt { font-size: 1.6rem; } .tab-content__under-right { align-self: center; } .tab-content__under-right img { max-width: 275px; margin-inline: auto; } /* straw / cup スライダーカスタム矢印 */ .straw-tab-content__splide .splide__arrow, .cup-tab-content__splide .splide__arrow { background: transparent; width: auto; height: auto; opacity: 1; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .straw-tab-content__splide .splide__arrow--prev, .cup-tab-content__splide .splide__arrow--prev { left: -10px; } .straw-tab-content__splide .splide__arrow--next, .cup-tab-content__splide .splide__arrow--next { right: -10px; } .straw-tab-content__splide .splide__arrow:hover, .cup-tab-content__splide .splide__arrow:hover { opacity: 0.7; } .straw-tab-content__splide .splide__arrow:disabled, .cup-tab-content__splide .splide__arrow:disabled { opacity: 0.3; } .straw-tab-content__splide .splide__arrow img, .cup-tab-content__splide .splide__arrow img { width: 36px; height: auto; display: block; } @media all and (min-width: 576px) { .tab-content__cards, .lineup-content__cards { gap: 20px; flex-direction: row; } .tab-content__card, .lineup-content__card { flex: 1; } .tab-content__card.splide__slide, .lineup-content__card.splide__slide { flex: none; } .tab-buttons { font-size: 1.4rem; } .tab-btn { padding: 5px 15px; } } @media all and (min-width: 768px) { .tab-btn { min-width: 180px; } .sec03-tabarea .tab-btn { min-width: auto; } .function-icon { position: absolute; right: 30px; top: 30px; } .tab-content__card, .lineup-content__card { margin-inline: 0; } .tab-content__under { flex-direction: row; padding: 35px 40px; } } @media all and (min-width: 992px) { .straw-tab-content__splide .splide__arrow img, .cup-tab-content__splide .splide__arrow img { width: 44px; } .straw-tab-content__splide .splide__arrow--prev, .cup-tab-content__splide .splide__arrow--prev { left: -20px; } .straw-tab-content__splide .splide__arrow--next, .cup-tab-content__splide .splide__arrow--next { right: -20px; } .tab-buttons { font-size: 2rem; gap: 0 12px; } .tab-btn { padding: 5px 35px; min-width: 234px; height: 60px; } .sec03-tabarea .tab-btn { padding: 5px 17.5px; min-width: 210px; } .tab-content, .lineup-content { padding: 60px; } .tab-content__cards, .lineup-content__cards { gap: 40px; } .tab-content__ttl, .lineup-content__ttl { font-size: 2.4rem; } .tab-content__name, .lineup-content__name { font-size: 2rem; } .tab-content__name span, .lineup-content__name span { font-size: 1.6rem; } .tab-content__txt, .lineup-content__txt { font-size: 1.5rem; } .tab-content__cta, .lineup-content__cta { font-size: 2.2rem; } .function-icon__note { font-size: 1.1rem; } .function-icon img { width: 61px; margin-inline: auto; } .tab-content__cta, .lineup-content__cta { font-size: 2.4rem; padding: 1rem 2rem; } .tab-content__under-ttl { font-size: 2.2rem; } .tab-content__under-txt { font-size: 1.8rem; } } @media all and (min-width: 1200px) { .sec02-tabarea, .sec03-tabarea { padding: 80px 0 18rem; } .tab-content { padding: 60px; } .function-icon { top: 60px; right: 60px; } .tab-content__ttl, .lineup-content__ttl { font-size: 3.2rem; } .tab-content__cards, .lineup-content__cards { gap: 80px; } .tab-content__under { gap: 84px; padding: 35px 70px; } } /* //sec02-tabarea */ /* sec02のイラスト */ .straw-point { position: relative; } .sec02-ill1 { max-width: 38px; width: 10vw; right: 0; top: -50px; } .sec02-ill2 { max-width: 48px; width: 12.8vw; left: 0; top: 14vw; animation-delay: 1s; } .sec02-ill9 { max-width: 45px; width: 13.3vw; right: 0; bottom: -70px; animation-delay: 0.5s; } .sec02-ill3 { max-width: 45px; width: 10vw; left: 50px; top: -70px; } .sec02-ill4 { max-width: 40px; width: 12.8vw; right: 50px; top: -60px; animation-delay: 0.5s; } .sec02-ill5 { max-width: 60px; width: 16vw; left: 30px; top: 30px; animation-delay: 1s; } .sec02-ill6 { max-width: 61px; width: 16.3vw; right: 20px; top: -20px; } .sec02-ill7 { max-width: 34px; width: 9.1vw; right: 5px; bottom: -40px; animation-delay: 0.5s; } .sec02-ill8 { max-width: 100px; width: 26.7vw; left: 34px; bottom: -99px; animation-delay: 1s; } @media all and (min-width: 768px) { .sec02-ill1 { top: -20px } .sec02-ill2 { top: 45px; } .sec02-ill7 { right: 25px; } } @media all and (min-width: 992px) { .sec02-ill1 { width: 3.6vw; max-width: 58px; } .sec02-ill2 { width: 6vw; max-width: 96px; } .sec02-ill9 { width: 6.2vw; max-width: 90px; } .sec02-ill3 { max-width: 99px; width: 6.1vw; left: 0; top: -87px; } .sec02-ill4 { max-width: 79px; width: 5vw; right: 13px; top: -72px; } .sec02-ill5 { max-width: 101px; width: 6.3vw; } .sec02-ill6 { max-width: 91px; width: 5.7vw; } .sec02-ill7 { max-width: 54px; width: 3.4vw; } .sec02-ill8 { max-width: 135px; width: 8.4vw; } } @media all and (min-width: 1200px) { .sec02-ill3 { left: -50px; } .sec02-ill8 { bottom: -140px; } } @media all and (min-width: 1400px) { .sec02-ill1 { top: -35px; right: -77px; } .sec02-ill2 { left: -109px; } .sec02-ill9 { right: -113px; bottom: -88px; } .sec02-ill3 { left: -165px; top: -58px; } .sec02-ill4 { right: -137px; top: 12px; } .sec02-ill5 { left: -169px; } .sec02-ill6 { right: -152px; top: -120px; } .sec02-ill7 { bottom: 39px; right: -100px; } .sec02-ill8 { left: -92px; } } @media all and (min-width: 1600px) { .sec02-ill7 { right: -183px; } } /* //sec02のイラスト */ /* //sec02 */ /* sec03 */ .sec03 p { letter-spacing: 0.02em; } .sec03-main { background-color: #E8F8F8; padding: 35px 0 60px; position: relative; } .sec03-main::before { content: ""; background-image: url(../img/sec03/sec03-bg-top.png); position: absolute; background-repeat: no-repeat; background-size: contain; width: 100%; top: -7.7vw; height: 10.98vw } @media all and (min-width: 992px) { .sec03-main { padding: 4rem 0 10rem; } .sec03-main::before { background-size: cover; background-position-x: center; } } @media all and (min-width: 1200px) { .sec03 { /* margin-top: -21rem; */ margin-top: 0; } .sec03-main::before { top: -100px; height: 139px; } } /* sec03のイラスト */ .cup-point { position: relative; } .sec03-ill1 { max-width: 70px; width: 18.7vw; left: 5px; top: -45px; } .sec03-ill2 { max-width: 55px; width: 14.7vw; right: 5px; top: 78px; animation-delay: 1s; } .sec03-ill3 { max-width: 40px; width: 10.7vw; right: 15px; bottom: -55px; animation-delay: 0.5s; } .sec03-ill4 { max-width: 45px; width: 12vw; left: 10px; top: -58px; } .sec03-ill5 { max-width: 35px; width: 9.3vw; right: 5px; top: -61px; animation-delay: 1s; } .sec03-ill6 { max-width: 60px; width: 16vw; left: 7px; top: -55px; } .sec03-ill7 { max-width: 40px; width: 10.7vw; left: 10px; bottom: -50px; animation-delay: 0.5s; } .sec03-ill8 { max-width: 70px; width: 18.7vw; right: 15px; top: -25px; animation-delay: 1s; } .sec03-ill9 { max-width: 60px; width: 16vw; left: 5px; top: 25px; } .sec03-ill10 { max-width: 41px; width: 10.9vw; right: 21px; top: 48%; animation-delay: 1s; } .sec03-ill11 { max-width: 60px; width: 16vw; right: 15px; bottom: -97px; } @media all and (min-width: 576px) { .sec03-ill1 { top: -10px; } } @media all and (min-width: 768px) { .sec03-ill10 { top: 100px; } } @media all and (min-width: 992px) { .sec03-ill1 { max-width: 221px; width: 13.8vw; } .sec03-ill2 { max-width: 135px; width: 8.4vw; } .sec03-ill3 { max-width: 105px; width: 6.6vw; bottom: -80px; } .sec03-ill4 { max-width: 81px; width: 5.1vw; top: -71px; } .sec03-ill5 { max-width: 64px; width: 4vw; top: -73px; } .sec03-ill6 { max-width: 124px; width: 7.8vw; top: -68px; } .sec03-ill7 { max-width: 60px; width: 6.6vw; } .sec03-ill8 { max-width: 127px; width: 7.9vw; } .sec03-ill9 { max-width: 102px; width: 6.4vw; } .sec03-ill10 { max-width: 81px; top: auto; bottom: 91px; width: 5.1vw; } .sec03-ill11 { max-width: 110px; width: 6.9vw; bottom: -145px; } } @media all and (min-width: 1200px) { .sec03-ill4 { left: -40px; } .sec03-ill5 { right: -30px; } .sec03-ill6 { left: -30px; } .sec03-ill7 { left: -50px; } .sec03-ill11 { bottom: -162px; } } @media all and (min-width: 1400px) { .sec03-ill1 { top: -58px; left: -124px; } .sec03-ill2 { right: -147px; top: 52px; } .sec03-ill3 { right: -71px; } .sec03-ill4 { left: -135px; top: -174px; } .sec03-ill5 { right: -123px; } .sec03-ill6 { left: -150px; } .sec03-ill7 { max-width: 105px; width: 6.6vw; left: -150px; } .sec03-ill8 { right: -126px; top: -103px; } .sec03-ill9 { left: -41px; top: 59px; } .sec03-ill10 { right: -103px; top: auto; bottom: 91px; } .sec03-ill11 { right: -129px; } } @media all and (min-width: 1600px) { .sec03-ill5 { right: -163px; } .sec03-ill6 { left: -200px; } .sec03-ill7 { left: -171px; } .sec03-ill8 { right: -196px; top: -103px; } .sec03-ill10 { right: -143px; } .sec03-ill11 { right: -159px; } } /* //sec03のイラスト */ /* //sec03 */ /* sec04 */ .select-container { position: relative; } .sec04 { background-color: #B8DFD6; padding: 20px 0 10rem; width: 100%; position: relative; } .sec04::before { content: ""; background-image: url(../img/sec04/sec04-bg01-top.png); position: absolute; width: 100%; top: -8.4vw; height: 10.98vw; background-repeat: no-repeat; background-size: contain; } @media all and (min-width: 992px) { .sec04 { padding: 4rem 0 10rem; } .sec04::before { background-size: cover; background-position-x: center; } } @media all and (min-width: 1200px) { /* .sec04 { margin-top: -21rem; } */ .sec04::before { top: -100px; height: 139px; } } .sec04 p { letter-spacing: 0.02em; } .circle-contents { background-image: url(../img/sec04/sec04-circle-sp.png); background-size: contain; background-repeat: no-repeat; margin-top: 50px; position: relative; } .circle-content { padding: 55px; height: max-content; aspect-ratio: 1.05; } .circle-content__ttl { font-size: 2.1rem; position: relative; width: fit-content; margin-inline: auto; margin-bottom: 20px; letter-spacing: 0.02em; } .circle-content__ttl::before { content: ""; background-image: url(../img/common/midashi02-left.svg); background-repeat: no-repeat; background-size: contain; width: 34px; aspect-ratio: 34/32; top: -15px; left: -17px; display: block; position: absolute; } .circle-content__ttl span.text-green01 { font-size: 3.2rem; } .x-icon { width: 40px; aspect-ratio: 1; margin-inline: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media all and (min-width: 768px) { .circle-contents { background-image: url(../img/sec04/sec04-circle.png); display: flex; } .circle-content { width: 50%; aspect-ratio: 0.9; } .x-icon { align-self: center; } } @media all and (min-width: 992px) { .circle-contents { margin-top: 80px; } .circle-content { padding: 75px; } .circle-content__ttl { margin-bottom: 32px; } .x-icon { width: 55px; top: 47%; } .sec04 .master__lead { font-size: 2.7rem; } } @media all and (min-width: 1200px) { .circle-content { padding: 57px 70px; } .circle-content__ttl { font-size: 2.7rem; } .circle-content__ttl span.text-green01 { font-size: 4.8rem; } } /* sec04のイラスト */ .sec04-ill1 { max-width: 80px; width: 42.1vw; left: 7px; top: 61%; z-index: 1; } .sec04-ill2 { max-width: 85px; width: 52.5vw; right: 20px; bottom: -44px; animation-delay: 1s; } @media all and (min-width: 768px) { .sec04-ill1 { max-width: 67px; top: 34% } .sec04-ill2 { bottom: -33px; } } @media all and (min-width: 992px) { .sec04-ill1 { max-width: 158px; width: 9.9vw; } .sec04-ill2 { max-width: 197px; width: 12.3vw; } } @media all and (min-width: 1200px) { .sec04-ill1 { top: 25%; } .sec04-ill2 { right: -30px; bottom: -15px; } } @media all and (min-width: 1400px) { .sec04-ill1 { top: 25%; left: -117px; } .sec04-ill2 { right: -156px; bottom: -15px; } } /* //sec04のイラスト */ /* //sec04 */ /* sec05 */ .lineup { padding: 60px 0; background-image: url(../img/common/bg-stripe.png); background-repeat: repeat; background-size: contain; } .lineup p { letter-spacing: 0.02em; } .end-slider { margin-top: 50px; margin-bottom: 50px; } @media all and (min-width: 992px) { .end-slider { margin-top: 80px; margin-bottom: 65px; } } .sec05 .textbox { width: -moz-fit-content; width: fit-content; margin-inline: auto; } .sec05 .textbox .tx-left { width: 12.2rem; margin-inline: auto; margin-bottom: 7.7rem; } @media screen and (max-width: 1366px) { .sec05 .textbox .tx-left { width: 8.93vw; margin-bottom: 5.64vw; } } @media screen and (max-width: 768px) { .sec05 .textbox .tx-left { width: 15.89vw; margin-bottom: 10.03vw; } } .sec05 .textbox .tx-right { font-size: 4rem; font-weight: 700; text-align: center; } @media screen and (max-width: 1366px) { .sec05 .textbox .tx-right { font-size: 2.93rem; } } @media screen and (max-width: 768px) { .sec05 .textbox .tx-right { font-size: 5.21vw; } } .sec05 .textbox .tx-right p { font-size: unset; } .sec05 .txt01 { margin-top: 7.7rem; margin-bottom: 9.6rem; font-size: 3rem; font-weight: 700; text-align: center; line-height: 2; padding-inline: 3%; } @media screen and (max-width: 1366px) { .sec05 .txt01 { margin-top: 5.64vw; margin-bottom: 7.03vw; font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec05 .txt01 { margin-top: 10.03vw; margin-bottom: 12.5vw; font-size: 3.2vw; } } .sec05 .textbox02 { background-color: #fff; border-radius: 2rem; padding: 2.5rem 0; display: flex; justify-content: center; align-items: center; max-width: 96rem; width: 100%; margin: 0 auto 9.6rem; font-size: 3rem; gap: 4.8rem; } @media screen and (max-width: 1366px) { .sec05 .textbox02 { border-radius: 1.46vw; padding: 1.83vw 0; width: 94%; margin-inline: auto; margin: 0 auto 7.03vw; font-size: 2.2vw; gap: 2.2vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 { padding: 3.26vw 0; margin: 0 auto 12.5vw; font-size: 3.91vw; gap: 3.91vw; flex-wrap: wrap; } } /* textbox02にreboot.cssで設定されているmargin,paddingを上書き */ .sec05 .textbox02 ul { margin-bottom: 0; padding-left: 0; } @media screen and (max-width: 768px) { .sec05 .textbox02 ul { margin-bottom: 1rem; } } .sec05 .textbox02 .left { margin-right: 4.8rem; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .left { margin-right: 2.2vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .left { margin-right: 3.91vw; width: 100%; text-align: center; } } .sec05 .textbox02 .left p { font-size: unset; } .sec05 .textbox02 .center { font-size: 2.4rem; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .center { font-size: 1.76vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .center { font-size: 3.13vw; } } .sec05 .textbox02 .center .span01 { font-size: 3rem; position: relative; color: #fff; line-height: 1; width: 3.5rem; display: inline-block; aspect-ratio: 1; text-align: center; z-index: 2; letter-spacing: 0.08em; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .center .span01 { font-size: 2.2vw; width: 2.56vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .center .span01 { font-size: 3.91vw; width: 4.56vw; } } .sec05 .textbox02 .center .span01::after { content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 3.5rem; aspect-ratio: 1; background-color: #776556; border-radius: 50%; transform: translate(-54%, -50%); z-index: -1; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .center .span01::after { width: 2.56vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .center .span01::after { width: 4.56vw; } } .sec05 .textbox02 .right ul li { font-size: 2.4rem; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .right ul li { font-size: 1.76vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .right ul li { font-size: 3.13vw; } } .sec05 .textbox02 .right ul li .span02 { font-size: 1.8rem; font-weight: 400; } @media screen and (max-width: 1366px) { .sec05 .textbox02 .right ul li .span02 { font-size: 1.32vw; } } @media screen and (max-width: 768px) { .sec05 .textbox02 .right ul li .span02 { font-size: 2.34vw; } } .sec05 .linkbox { display: flex; justify-content: center; flex-wrap: wrap; gap: 4rem 2rem; max-width: 1100px; padding-bottom: 10rem; margin-inline: auto; padding-inline: 4.6%; } @media screen and (max-width: 768px) { .sec05 .linkbox { flex-direction: column; justify-content: center; gap: 2.6vw; } } .sec05 .linkbox .linkbox__item { width: calc((100% - 2rem) / 2); text-align: center; } @media screen and (max-width: 768px) { .sec05 .linkbox .linkbox__item { width: fit-content; margin-inline: auto; } } .sec05 .linkbox .linkbox__item a { color: unset; } .sec05 .linkbox .linkbox__item p { font-size: 3rem; font-weight: 700; margin-top: 0.5rem; letter-spacing: unset; line-height: 1.6; } @media screen and (max-width: 1366px) { .sec05 .linkbox .linkbox__item p { font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec05 .linkbox .linkbox__item p { font-size: 3.91vw; line-height: 1.8; margin-bottom: 1rem; } } @media screen and (max-width: 768px) { .sec05 .linkbox .linkbox__item img { max-width: 478px; margin-inline: auto; } } @media all and (min-width: 1200px) { .lineup { padding: 80px 0; } } /* //sec05 */ .loader { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #FCF4DF; gap: 3vw; animation: load 3.2s ease forwards; animation-delay: 0s; } @keyframes load { 0% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; z-index: -1; } } /* ローディングアニメーション */ .anima01 { z-index: 10001; animation: anima01 1.5s ease forwards; animation-delay: 0.3s; } @keyframes anima01 { 0% { opacity: 1; } 85% { opacity: 1; } 95% { z-index: -1; opacity: 0; } 100% { z-index: -1; opacity: 0; display: none; } } .anima02 { z-index: 10001; animation: anima02 1.5s ease forwards; animation-delay: 3.8s; } @keyframes anima02 { 0% { opacity: 1; } 85% { opacity: 1; } 95% { z-index: -1; opacity: 0; } 100% { z-index: -1; opacity: 0; display: none; } } .imgA { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; max-width: 30rem; } @media screen and (max-width: 768px) { .imgA { max-width: 15rem; } } .imgA01 { z-index: 10001; animation: img01 1.5s ease forwards; animation-delay: 0.2s; } @keyframes img01 { 0% { opacity: 1; } 32% { opacity: 1; } 33% { display: none; opacity: 0; } 100% { display: none; opacity: 0; z-index: -1; } } .imgA04 { max-width: 20rem; z-index: 10004; animation: img04 1.7s ease forwards; animation-delay: 0.5s; } @media screen and (max-width: 768px) { .imgA04 { max-width: 10rem; } } @keyframes img04 { 0% { opacity: 1; } 30% { opacity: 1; transform: translate(-50%, -50%); } 80% { opacity: 1; transform: translate(-120%, -50%); } 98% { opacity: 1; transform: translate(-120%, -50%); } 99% { transform: translate(-120%, -50%); display: none; opacity: 0; } 100% { transform: translate(-120%, -50%); display: none; opacity: 0; transform: translate(-120%, -50%); z-index: -1; } } .imgA05 { z-index: 10005; animation: img05 1.6s ease forwards; animation-delay: 0.7s; } @keyframes img05 { 0% { opacity: 0; transform: translate(0%, -50%); } 20% { opacity: 0; transform: translate(0%, -50%); } 90% { opacity: 1; transform: translate(0%, -50%); } 99% { display: none; opacity: 0; transform: translate(0%, -50%); } 100% { display: none; opacity: 0; transform: translate(0%, -50%); z-index: -1; } } .ani-top { animation: aniTop 3s ease forwards; animation-delay: 6s; opacity: 0; } @keyframes aniTop { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } .loader .ani01 { width: 14vw; } .loader .ani02 { width: 40vw; } .footerbox .footer-about p { font-size: 1.6rem; } @media screen and (max-width: 768px) { .footerbox .footer-about p { font-size: 1.6rem; } } .footerbox .footer-about .container .footer-about-subttl { font-size: 1.6rem; } .footer-logo-wrap a { display: inline-block; } .footer-menu-wrap>ul>li .sub-menu a { font-weight: 500; } .footer-about .container .footer-about-ttl img { width: 212px; display: inline; } .py-long { padding-top: 42px; padding-bottom: 42px; } @media screen and (min-width: 576px) { .py-long { padding-top: 52.5px; padding-bottom: 52.5px; } } @media screen and (min-width: 992px) { .py-long { padding-top: 80px; padding-bottom: 80px; } }