@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(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* 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; } h2, h3, h4, p, li, a, div { letter-spacing: 0.1em; line-height: 1.8; } ol, ul { padding-left: unset; margin-bottom: unset; } a { display: block; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; } a:hover { opacity: 0.8; } .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; } section { max-width: 1980px; width: 100%; margin-inline: auto; } header { width: 100%; background-color: #fff; display: flex; justify-content: space-between; align-items: center; } header .logo { width: 16.98vw; max-width: 231px; margin: 2.2vw 12.52vw; } @media screen and (min-width: 1366px) { header .logo { margin: 3rem 17.5rem; } } @media screen and (max-width: 768px) { header .logo { width: 34.13vw; margin: 2.2vw 4.52vw; } } header .toshop { color: #339599; line-height: 1; margin-right: 9.66vw; width: 14.64vw; max-width: 200px; } @media screen and (min-width: 1366px) { header .toshop { margin: 3rem 13.5rem; } } @media screen and (max-width: 768px) { header .toshop { width: 30.93vw; margin-right: 3.66vw; } } .mv { background-color: #fff7e1; position: relative; z-index: 100; } .mv::after { display: inline-block; position: absolute; background-image: url("../img/bar03.png"); background-repeat: no-repeat; background-size: contain; top: 0; left: 0; width: 100%; aspect-ratio: 2734/280; z-index: 100; } .mv::before { display: inline-block; position: absolute; bottom: 0; left: 0; width: 100%; height: 30vh; background-color: #b8dfd5; transform: translateY(100%); animation: anima03 2s ease forwards; animation-delay: 1.5s; opacity: 0; } @keyframes anima03 { 0% { opacity: 1; } 85% { opacity: 1; } 95% { z-index: -1; opacity: 0; } 100% { z-index: -1; opacity: 0; } } .mv .box { padding: 8.5vw 8.35vw 5.13vw; position: relative; } @media screen and (max-width: 768px) { .mv .box { padding: 67.76vw 3% 30.15vw; } } .mv .box .mvttl { position: absolute; left: 50%; transform: translate(-44%, -50%); z-index: 100; top: 27vw; width: 30.97vw; aspect-ratio: 1238/537; } @media screen and (max-width: 768px) { .mv .box .mvttl { width: 63.2vw; top: 58vw; } } .mv .box .textbox { display: flex; justify-content: center; align-items: center; gap: 3.66vw; } @media screen and (max-width: 768px) { .mv .box .textbox { position: absolute; left: 50%; transform: translateX(-50%); top: 11vw; gap: 3.66vw; flex-direction: column; } } .mv .box .textbox .tx-left { width: 6.07vw; } @media screen and (max-width: 768px) { .mv .box .textbox .tx-left { width: 16vw; } } .mv .box .textbox .tx-right { width: 50.07vw; } @media screen and (max-width: 768px) { .mv .box .textbox .tx-right { width: 57.07vw; } } .mv .box .mvbox { display: flex; align-items: center; justify-content: center; gap: 7.61vw; margin-top: 2vw; } @media screen and (max-width: 768px) { .mv .box .mvbox { gap: 3vw; } } .mv .box .mvbox .left, .mv .box .mvbox .right { width: 37.63vw; position: relative; /* 赤ちゃん・共通装飾 */ /* 赤ちゃん・左側装飾 */ /* 赤ちゃん・右側装飾 */ } @media screen and (max-width: 768px) { .mv .box .mvbox .left, .mv .box .mvbox .right { width: 50%; } } .mv .box .mvbox .left::after, .mv .box .mvbox .right::after { content: ""; display: inline-block; position: absolute; bottom: 0; width: 30%; aspect-ratio: 1; background-repeat: no-repeat; background-size: contain; } .mv .box .mvbox .left .kira, .mv .box .mvbox .right .kira { position: absolute; } .mv .box .mvbox .left .kira00, .mv .box .mvbox .right .kira00 { width: 1.46vw; bottom: -4vw; left: 14%; } .mv .box .mvbox .left .kira01, .mv .box .mvbox .right .kira01 { width: 1.76vw; bottom: -2.5vw; left: 12%; } .mv .box .mvbox .left .kira02, .mv .box .mvbox .right .kira02 { width: 3.42vw; bottom: 3vw; left: -5%; } .mv .box .mvbox .left .kira03, .mv .box .mvbox .right .kira03 { width: 11%; top: -4%; left: 3%; transform: rotate(45deg); } .mv .box .mvbox .left .kira04, .mv .box .mvbox .right .kira04 { width: 9%; top: 5%; right: 3%; } .mv .box .mvbox .left .kira05, .mv .box .mvbox .right .kira05 { width: 1.47vw; bottom: 0; right: 3vw; } .mv .box .mvbox .left .kira06, .mv .box .mvbox .right .kira06 { width: 3.22vw; top: -1vw; right: 6%; transform: rotate(-45deg); } .mv .box .mvbox .left .kira07, .mv .box .mvbox .right .kira07 { width: 4.39vw; bottom: 8%; right: -5%; } .mv .box .mvbox .left .kira08, .mv .box .mvbox .right .kira08 { width: 4.39vw; top: 20%; left: -5%; } .mv .box .mvbox .copybox { position: absolute; width: 15.37vw; bottom: 12%; left: 43%; } @media screen and (max-width: 768px) { .mv .box .mvbox .copybox { width: 35.73vw; left: 28%; bottom: 5%; } } .mv .box .mvbox .copybox .inbox { position: relative; } .mv .box .mvbox .copybox .inbox .arrow01 { width: 6.93vw; position: absolute; bottom: -10%; right: -37%; } @media screen and (max-width: 768px) { .mv .box .mvbox .copybox .inbox .arrow01 { width: 6vw; bottom: unset; top: -40%; right: -20%; } } .mv .box .mvbox .copybox .inbox .arrow02 { width: 4.86vw; position: absolute; top: -45%; left: -11%; } @media screen and (max-width: 768px) { .mv .box .mvbox .copybox .inbox .arrow02 { width: 4vw; top: -40%; left: -3%; } } .mv .box .mvbox .parts01 { position: absolute; top: 0; width: 100%; } .mv .box .mvbox .parts02 { position: absolute; top: 0; right: 9.66vw; width: 10.74vw; } .mv .box02 { position: absolute; top: 0; left: 0; width: 100%; height: 120%; background-image: url("../img/ani-bg.png"); background-repeat: no-repeat; background-size: cover; background-position: center; overflow: hidden; } @media screen and (max-width: 768px) { .mv .box02 { background-image: url("../img/ani-bgsp03.png"); background-position: top; } } .mv .box02 img { -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; height: 100%; } .mv .box02 .textbox { gap: 3.88vw; justify-content: center; flex-direction: row; top: 20vw; } .mv .box02 .parts01 { position: absolute; top: 0; left: 50%; width: 100%; height: unset; aspect-ratio: 2734/280; transform: translateX(-50%); } .mv .box02 .ani-inbox { position: relative; width: 100%; height: 100%; } .mv .txtbox { text-align: center; padding-bottom: 10.61vw; } .mv .txtbox .txt01 { font-size: 2.4rem; } @media screen and (max-width: 1365px) { .mv .txtbox .txt01 { font-size: 1.76vw; } } .mv .txtbox .txt02 { font-size: 3.2rem; } @media screen and (max-width: 1365px) { .mv .txtbox .txt02 { font-size: 2.34vw; } } .mv .txtbox .txt02 .span01 { color: #339599; } .mv .txtbox .txt02 .span02 { position: relative; z-index: 2; } .mv .txtbox .txt02 .span02::after { content: ""; display: inline-block; position: absolute; bottom: 0vw; left: 0; width: 100%; height: 30%; background-color: #ffe600; z-index: -1; } .mug-header .img, .mug-main .img { position: absolute; aspect-ratio: 1; } .mug-header .img01, .mug-main .img01 { width: 5.6rem; top: 7.5rem; right: -3rem; } @media screen and (max-width: 1366px) { .mug-header .img01, .mug-main .img01 { top: 5.49vw; right: -2.2vw; } } @media screen and (max-width: 768px) { .mug-header .img01, .mug-main .img01 { right: 0; top: -6vw; width: 10vw; } } .mug-header .img02, .mug-main .img02 { width: 4.4rem; top: 26rem; left: -8rem; } @media screen and (max-width: 1366px) { .mug-header .img02, .mug-main .img02 { top: 19.03vw; left: -5.86vw; } } @media screen and (max-width: 768px) { .mug-header .img02, .mug-main .img02 { width: 6vw; left: 0; top: -5vw; } } .mug-header .img03, .mug-main .img03 { width: 14.5rem; bottom: -10rem; left: -5.58rem; } @media screen and (max-width: 1366px) { .mug-header .img03, .mug-main .img03 { width: 10.61vw; bottom: -7.32vw; left: -4.03vw; } } @media screen and (max-width: 768px) { .mug-header .img03, .mug-main .img03 { left: 0; width: 15vw; } } .mug-header .img04, .mug-main .img04 { width: 5.7rem; top: 3.5rem; right: 3rem; } @media screen and (max-width: 1366px) { .mug-header .img04, .mug-main .img04 { width: 4.17vw; top: 2.56vw; right: 2.2vw; } } .mug-header .img05, .mug-main .img05 { width: 17.4rem; top: -7rem; right: -15rem; } @media screen and (max-width: 1366px) { .mug-header .img05, .mug-main .img05 { width: 12.74vw; top: -5.12vw; right: -10.98vw; } } @media screen and (max-width: 768px) { .mug-header .img05, .mug-main .img05 { width: 15vw; right: 3vw; top: -12vw; } } .mug-header .img06, .mug-main .img06 { width: 18rem; bottom: 5rem; right: -20rem; } @media screen and (max-width: 1366px) { .mug-header .img06, .mug-main .img06 { width: 13.18vw; bottom: 3.66vw; right: -14.64vw; } } @media screen and (max-width: 768px) { .mug-header .img06, .mug-main .img06 { bottom: unset; top: 7rem; right: 2vw; width: 10vw; } } .mug-header .img07, .mug-main .img07 { width: 7.3rem; aspect-ratio: 73/117; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img07, .mug-main .img07 { width: 5.34vw; } } .mug-header .img08, .mug-main .img08 { width: 16rem; top: -28rem; left: 4rem; } @media screen and (max-width: 1366px) { .mug-header .img08, .mug-main .img08 { width: 11.71vw; top: -20.5vw; left: 2.93vw; } } @media screen and (max-width: 768px) { .mug-header .img08, .mug-main .img08 { width: 15vw; left: 7vw; } } .mug-header .img09, .mug-main .img09 { width: 20rem; top: 0; left: 50%; transform: translate(-50%, -35%); z-index: 10; } .mug-header .img09_2, .mug-main .img09_2 { top: -20rem; } @media screen and (max-width: 1366px) { .mug-header .img09_2, .mug-main .img09_2 { top: -13.64vw; } } .mug-header .img10, .mug-main .img10 { width: 110rem; margin: 11rem auto 8rem; } @media screen and (max-width: 1366px) { .mug-header .img10, .mug-main .img10 { width: 80.53vw; margin: 8.05vw auto 5.86vw; } } .mug-header .img11, .mug-main .img11 { width: 47rem; margin-inline: auto; transform: translateX(-2.5rem); } @media screen and (max-width: 1366px) { .mug-header .img11, .mug-main .img11 { width: 34.41vw; transform: translateX(-1.83vw); } } @media screen and (max-width: 768px) { .mug-header .img11, .mug-main .img11 { width: 64.41vw; max-width: 36rem; } } .mug-header .img11_2, .mug-main .img11_2 { width: 78rem; } @media screen and (max-width: 1366px) { .mug-header .img11_2, .mug-main .img11_2 { width: 57.1vw; } } .mug-header .img12, .mug-main .img12 { width: 47rem; margin-inline: auto; transform: translateX(-2rem); } @media screen and (max-width: 1366px) { .mug-header .img12, .mug-main .img12 { width: 34.41vw; transform: translateX(-1.46vw); } } @media screen and (max-width: 768px) { .mug-header .img12, .mug-main .img12 { width: 54vw; } } .mug-header .img13, .mug-main .img13 { width: 7.3rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img13, .mug-main .img13 { width: 5.34vw; } } @media screen and (max-width: 768px) { .mug-header .img13, .mug-main .img13 { width: 9vw; } } .mug-header .img14, .mug-main .img14 { width: 43rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img14, .mug-main .img14 { width: 31.48vw; } } .mug-header .img15, .mug-main .img15 { width: 71rem; margin: 4.4rem auto 10rem; } @media screen and (max-width: 1366px) { .mug-header .img15, .mug-main .img15 { width: 51.98vw; margin: 3.22vw auto 7.32vw; } } @media screen and (max-width: 768px) { .mug-header .img15, .mug-main .img15 { width: 90%; } } .mug-header .img16, .mug-main .img16 { width: 110rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img16, .mug-main .img16 { width: 80.53vw; } } .mug-header .img17, .mug-main .img17 { width: 110rem; margin-inline: auto; top: 0; left: 50%; transform: translate(-50%, -50%); aspect-ratio: unset; } @media screen and (max-width: 1366px) { .mug-header .img17, .mug-main .img17 { width: 80.53vw; } } .mug-header .img18, .mug-main .img18 { width: 9rem; top: 0; left: -16.6rem; transform: translateY(-50%); } @media screen and (max-width: 1366px) { .mug-header .img18, .mug-main .img18 { width: 6.59vw; left: -16.15vw; } } @media screen and (max-width: 768px) { .mug-header .img18, .mug-main .img18 { left: 0vw; width: 9vw; top: -4vw; } } .mug-header .img19, .mug-main .img19 { width: 30.8rem; margin: 7rem auto 1.5rem; } @media screen and (max-width: 1366px) { .mug-header .img19, .mug-main .img19 { width: 22.55vw; margin: 5.12vw auto 1.1vw; } } .mug-header .img20, .mug-main .img20 { width: 4.5rem; top: 0; right: -2rem; } @media screen and (max-width: 1366px) { .mug-header .img20, .mug-main .img20 { width: 3.29vw; right: -1.46vw; } } .mug-header .img21, .mug-main .img21 { width: 45rem; margin: 7rem auto 1.5rem; } @media screen and (max-width: 1366px) { .mug-header .img21, .mug-main .img21 { width: 32.94vw; margin: 5.12vw auto 1.1vw; } } .mug-header .img22, .mug-main .img22 { width: 42.8rem; margin: 7rem auto 1.5rem; } @media screen and (max-width: 1366px) { .mug-header .img22, .mug-main .img22 { width: 31.33vw; margin: 5.2vw auto 1.1vw; } } .mug-header .img23, .mug-main .img23 { width: 27rem; top: 50%; right: 6%; transform: translate(-50%, -50%); aspect-ratio: unset; } @media screen and (max-width: 1366px) { .mug-header .img23, .mug-main .img23 { width: 19.77vw; right: 9rem; } } @media screen and (max-width: 768px) { .mug-header .img23, .mug-main .img23 { top: unset; right: unset; left: 25vw; bottom: -4vw; } } .mug-header .img24, .mug-main .img24 { width: 100%; top: 0; left: 0; transform: translateY(-99%); aspect-ratio: unset; } .mug-header .img25, .mug-main .img25 { width: 66.3rem; margin: 6.8rem auto 12rem; transform: translateX(5rem); } @media screen and (max-width: 1366px) { .mug-header .img25, .mug-main .img25 { width: 48.54vw; margin: 4.98vw auto 8.78vw; transform: translateX(3.66vw); } } @media screen and (max-width: 768px) { .mug-header .img25, .mug-main .img25 { width: 80vw; max-width: 40rem; margin-bottom: 0vw; } } .mug-header .img26, .mug-main .img26 { width: 47rem; margin-inline: auto; transform: translateX(-4rem); } @media screen and (max-width: 1366px) { .mug-header .img26, .mug-main .img26 { width: 34.41vw; transform: translateX(-2.93vw); } } @media screen and (max-width: 768px) { .mug-header .img26, .mug-main .img26 { width: 54vw; } } .mug-header .img27, .mug-main .img27 { width: 83rem; margin: 13rem auto 6rem; } @media screen and (max-width: 1366px) { .mug-header .img27, .mug-main .img27 { width: 60.76vw; margin: 9.52vw auto 4.39vw; } } .mug-header .img28, .mug-main .img28 { width: 42rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img28, .mug-main .img28 { width: 30.75vw; } } .mug-header .img29, .mug-main .img29 { width: 70rem; margin: 5rem auto 12rem; } @media screen and (max-width: 1366px) { .mug-header .img29, .mug-main .img29 { width: 51.24vw; margin: 3.66vw auto 8.78vw; } } @media screen and (max-width: 768px) { .mug-header .img29, .mug-main .img29 { width: 75vw; } } .mug-header .img30, .mug-main .img30 { width: 50rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img30, .mug-main .img30 { width: 36.6vw; } } .mug-header .img31, .mug-main .img31 { width: 100%; margin: 4.8rem auto; } @media screen and (max-width: 1366px) { .mug-header .img31, .mug-main .img31 { margin: 3.51vw auto; } } .mug-header .img32, .mug-main .img32 { width: 100%; margin-top: 5.5rem; } @media screen and (max-width: 1366px) { .mug-header .img32, .mug-main .img32 { margin-top: 4.03vw; } } .mug-header .img33, .mug-main .img33 { width: 27.8rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .mug-header .img33, .mug-main .img33 { width: 20.35vw; } } @media screen and (max-width: 768px) { .mug-header .img33, .mug-main .img33 { width: 36.2vw; } } .sec01 { background-image: url("../img/bg.png"); background-repeat: no-repeat; background-size: cover; width: 100%; padding: 15rem 0 18rem; margin-top: 0rem; position: relative; /*&::after { content: ""; display: inline-block; position: absolute; bottom: 0; left: 0; width: 100%; aspect-ratio: 1800 / 96; background-image: url("../img/bg03.png"); background-repeat: no-repeat; background-size: contain; transform: translateY(99%); }*/ } @media screen and (max-width: 1366px) { .sec01 { padding: 10.98vw 0 13.18vw; } } .sec01 .box { background-color: #fff; text-align: center; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding: 5rem; position: relative; } @media screen and (max-width: 1366px) { .sec01 .box { padding: 3.66vw; } } @media screen and (max-width: 768px) { .sec01 .box { padding: 3.66vw 3%; width: 94%; } } .sec01 .box p { line-height: 2; padding-top: 1rem; font-size: 2rem; } @media screen and (max-width: 1366px) { .sec01 .box p { padding-top: 0.73vw; font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec01 .box p { font-size: 11px; } } .sec01 .box .txt01 { font-size: 3rem; color: #339599; padding-top: 0; padding-bottom: 5rem; line-height: 1; } @media screen and (max-width: 1366px) { .sec01 .box .txt01 { font-size: 2.2vw; padding-bottom: 3.66vw; } } @media screen and (max-width: 768px) { .sec01 .box .txt01 { font-size: 2rem; } } @media screen and (max-width: 768px) { .sec01 .box .txt03 { border-bottom: 2px dashed #776556; display: inline-block; width: 100%; margin-bottom: 3vw; } } .sec01 .box .txt03_ { display: block; width: 100%; } .sec01 .box .txt03_a { border-bottom: 2px dashed #776556; } @media screen and (max-width: 768px) { .sec01 .box .txt03_a { border-bottom: none; margin-bottom: 0; } } .sec01 .box .txt04 { text-align: end; } .sec01 .ttlbox { width: -moz-fit-content; width: fit-content; margin: 10rem auto 4.4rem; position: relative; } @media screen and (max-width: 1366px) { .sec01 .ttlbox { margin: 7.32vw auto 3.22vw; } } @media screen and (max-width: 768px) { .sec01 .ttlbox { width: 100%; } } .sec01 .ttlbox .txt { font-size: 3rem; margin-bottom: 6rem; text-align: center; color: #339599; } @media screen and (max-width: 1366px) { .sec01 .ttlbox .txt { font-size: 2.2vw; margin-bottom: 4.39vw; } } @media screen and (max-width: 768px) { .sec01 .ttlbox .txt { font-size: 2rem; margin-bottom: 12vw; padding-inline: 3%; } } .sec01 .ttlbox .img-ttl { width: 62rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .sec01 .ttlbox .img-ttl { width: 45.39vw; } } @media screen and (max-width: 768px) { .sec01 .ttlbox .img-ttl { width: 70vw; } } .sec01 .box02 { margin: 5rem auto 10rem; width: -moz-fit-content; width: fit-content; text-align: center; position: relative; } @media screen and (max-width: 1366px) { .sec01 .box02 { margin: 3.66vw auto 7.32vw; } } @media screen and (max-width: 768px) { .sec01 .box02 { width: 100%; } } .sec01 .box02 .txt01 { font-size: 3rem; } @media screen and (max-width: 1366px) { .sec01 .box02 .txt01 { font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec01 .box02 .txt01 { font-size: 2rem; } } .sec01 .box02 .txt02 { font-size: 2rem; line-height: 2; } @media screen and (max-width: 1366px) { .sec01 .box02 .txt02 { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec01 .box02 .txt02 { font-size: 1.6rem; padding-inline: 3%; } } .sec01 .box02 .txt02 span { color: #339599; font-size: 3rem; display: inline-block; transform: translateY(3px); position: relative; z-index: 2; } @media screen and (max-width: 1366px) { .sec01 .box02 .txt02 span { font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec01 .box02 .txt02 span { font-size: 2rem; } } .sec01 .box02 .txt02 span::after { content: ""; display: inline-block; position: absolute; bottom: 1rem; left: 0; width: 100%; height: 30%; background-color: #ffe600; z-index: -1; } @media screen and (max-width: 1366px) { .sec01 .box02 .txt02 span::after { bottom: 0.73vw; } } .sec01 .box03 { display: flex; gap: 7rem; justify-content: center; } @media screen and (max-width: 1366px) { .sec01 .box03 { gap: 5.12vw; padding-inline: 3%; } } .sec01 .box03 .left, .sec01 .box03 .right { max-width: 475px; width: calc((100% - 7rem) / 2); position: relative; } @media screen and (max-width: 1366px) { .sec01 .box03 .left, .sec01 .box03 .right { width: calc((100% - 5.12vw) / 2); } } .sec01 .box03 .left a, .sec01 .box03 .right a { position: absolute; width: 80%; left: 50%; bottom: 7rem; transform: translateX(-50%); } @media screen and (max-width: 1366px) { .sec01 .box03 .left a, .sec01 .box03 .right a { bottom: 5.12vw; } } @media screen and (max-width: 768px) { .sec01 .box03 .left a, .sec01 .box03 .right a { bottom: 9.11vw; } } .sec01 .box04 { position: relative; width: -moz-fit-content; width: fit-content; margin: 9rem auto 9.8rem; text-align: center; font-size: 2.6rem; } @media screen and (max-width: 1366px) { .sec01 .box04 { margin: 6.59vw auto 7.17vw; font-size: 1.9vw; } } .sec01 .box05 { width: 100%; position: relative; } .sec01 .box05 .bg { position: absolute; z-index: -1; } .sec01 .box05 .inbox { display: flex; gap: 3rem; max-width: 1100px; width: -moz-fit-content; width: fit-content; margin-inline: auto; padding: 6rem 5rem 2.2rem; } @media screen and (max-width: 1366px) { .sec01 .box05 .inbox { gap: 2.2vw; padding: 4.39vw 3.66vw 1.61vw; } } .sec01 .box05 .inbox .left, .sec01 .box05 .inbox .right { width: calc((100% - 3rem) / 2); } @media screen and (max-width: 1366px) { .sec01 .box05 .inbox .left, .sec01 .box05 .inbox .right { width: calc((100% - 2.2vw) / 2); } } .sec01 .box05 .inbox .left a, .sec01 .box05 .inbox .right a { width: 100%; } .sec01 .box05 .inbox .left a img, .sec01 .box05 .inbox .right a img { transition: all 0.2s; } .sec01 .box05 .inbox .left a:hover, .sec01 .box05 .inbox .right a:hover { opacity: 1; } .sec01 .box05 .inbox .left a:hover img, .sec01 .box05 .inbox .right a:hover img { transform: scale(1.03); } .sec02, .sec03 { position: relative; background-color: #fff; padding: 19rem 0; } @media screen and (max-width: 1366px) { .sec02, .sec03 { padding: 13.91vw 0; } } .sec02 h2, .sec03 h2 { font-size: 5.7rem; color: #ee869a; text-align: center; } @media screen and (max-width: 1366px) { .sec02 h2, .sec03 h2 { font-size: 4.17vw; } } @media screen and (max-width: 768px) { .sec02 h2, .sec03 h2 { font-size: 3rem; } } .sec02 .ttl01, .sec03 .ttl01 { text-align: center; font-size: 4rem; margin: 6rem 0 0; } @media screen and (max-width: 1366px) { .sec02 .ttl01, .sec03 .ttl01 { font-size: 2.93vw; margin: 4.39vw 0 0; } } @media screen and (max-width: 768px) { .sec02 .ttl01, .sec03 .ttl01 { font-size: 2rem; } } .sec02 .ttl01 span, .sec03 .ttl01 span { font-size: 6rem; } @media screen and (max-width: 1366px) { .sec02 .ttl01 span, .sec03 .ttl01 span { font-size: 4.39vw; } } @media screen and (max-width: 768px) { .sec02 .ttl01 span, .sec03 .ttl01 span { font-size: 3rem; } } .sec02 .box, .sec03 .box { padding: 6rem 0 0rem; } @media screen and (max-width: 1366px) { .sec02 .box, .sec03 .box { padding: 4.39vw 0 0; } } .sec02 .box .inbox, .sec03 .box .inbox { max-width: 960px; width: 100%; margin-inline: auto; display: flex; gap: 5rem; justify-content: center; padding: 6rem 0 7rem; } @media screen and (max-width: 1366px) { .sec02 .box .inbox, .sec03 .box .inbox { gap: 3.66vw; padding: 4.39vw 3% 5.12vw; } } .sec02 .box .inbox .left, .sec03 .box .inbox .left { width: 48rem; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .left, .sec03 .box .inbox .left { width: 35.14vw; } } .sec02 .box .inbox .right, .sec03 .box .inbox .right { width: calc(100% - 48rem - 5rem); } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right, .sec03 .box .inbox .right { width: calc(100% - 35.14vw - 3.66vw); } } .sec02 .box .inbox .right p, .sec03 .box .inbox .right p { font-size: 2rem; letter-spacing: 0; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p, .sec03 .box .inbox .right p { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box .inbox .right p, .sec03 .box .inbox .right p { font-size: 1.4rem; } } .sec02 .box .inbox .right p .span01, .sec03 .box .inbox .right p .span01 { font-size: 2.6rem; position: relative; z-index: 2; letter-spacing: 0.05em; line-height: 1; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p .span01, .sec03 .box .inbox .right p .span01 { font-size: 1.9vw; } } @media screen and (max-width: 768px) { .sec02 .box .inbox .right p .span01, .sec03 .box .inbox .right p .span01 { font-size: 1.8rem; } } .sec02 .box .inbox .right p .span01::after, .sec03 .box .inbox .right p .span01::after { content: ""; display: inline-block; position: absolute; bottom: 0rem; left: 0; width: 100%; height: 30%; background-color: #ffe600; z-index: -1; } .sec02 .box .inbox .right p .span001, .sec03 .box .inbox .right p .span001 { font-size: 2.6rem; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p .span001, .sec03 .box .inbox .right p .span001 { font-size: 1.9vw; } } @media screen and (max-width: 768px) { .sec02 .box .inbox .right p .span001, .sec03 .box .inbox .right p .span001 { font-size: 1.6rem; } } .sec02 .box .inbox .right p .span02, .sec03 .box .inbox .right p .span02 { font-size: 3.7rem; line-height: 1.2; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p .span02, .sec03 .box .inbox .right p .span02 { font-size: 2.71vw; } } @media screen and (max-width: 768px) { .sec02 .box .inbox .right p .span02, .sec03 .box .inbox .right p .span02 { font-size: 2rem; } } .sec02 .box .inbox .right p .span03, .sec03 .box .inbox .right p .span03 { margin-bottom: 2rem; display: inline-block; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p .span03, .sec03 .box .inbox .right p .span03 { margin-bottom: 1.46vw; } } .sec02 .box .inbox .right p .span04, .sec03 .box .inbox .right p .span04 { font-size: 2rem; } @media screen and (max-width: 1366px) { .sec02 .box .inbox .right p .span04, .sec03 .box .inbox .right p .span04 { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box .inbox .right p .span04, .sec03 .box .inbox .right p .span04 { font-size: 1.4rem; } } .sec02 .txtbox, .sec03 .txtbox { width: -moz-fit-content; width: fit-content; margin-inline: auto; margin-top: 5rem; position: relative; } @media screen and (max-width: 1366px) { .sec02 .txtbox, .sec03 .txtbox { margin-top: 3.66vw; } } .sec02 .txtbox p, .sec03 .txtbox p { font-size: 5rem; text-align: center; color: #ee869a; } @media screen and (max-width: 1366px) { .sec02 .txtbox p, .sec03 .txtbox p { font-size: 3.66vw; } } @media screen and (max-width: 768px) { .sec02 .txtbox p, .sec03 .txtbox p { font-size: 2.6rem; } } .sec02 .txtbox .imgK, .sec03 .txtbox .imgK { position: absolute; display: inline-block; } .sec02 .txtbox .imgK01, .sec03 .txtbox .imgK01 { width: 5.8rem; top: -2rem; left: 4rem; } @media screen and (max-width: 1366px) { .sec02 .txtbox .imgK01, .sec03 .txtbox .imgK01 { width: 4.25vw; top: -1.46vw; left: 2.93vw; } } @media screen and (max-width: 768px) { .sec02 .txtbox .imgK01, .sec03 .txtbox .imgK01 { width: 7vw; top: -4rem; } } .sec02 .txtbox .imgK02, .sec03 .txtbox .imgK02 { width: 14.6rem; bottom: 0; left: -20rem; } @media screen and (max-width: 1366px) { .sec02 .txtbox .imgK02, .sec03 .txtbox .imgK02 { width: 10.69vw; left: -14.64vw; } } @media screen and (max-width: 768px) { .sec02 .txtbox .imgK02, .sec03 .txtbox .imgK02 { width: 12vw; left: -4rem; bottom: 4rem; } } .sec02 .txtbox .imgK03, .sec03 .txtbox .imgK03 { width: 11.6rem; top: 0; right: -6rem; } @media screen and (max-width: 1366px) { .sec02 .txtbox .imgK03, .sec03 .txtbox .imgK03 { width: 8.49vw; right: -4.39vw; } } .sec02 .unker, .sec03 .unker { margin-inline: auto; } .sec02 .txt-point, .sec03 .txt-point { font-size: 4rem; text-align: center; } @media screen and (max-width: 1366px) { .sec02 .txt-point, .sec03 .txt-point { font-size: 2.93vw; } } @media screen and (max-width: 768px) { .sec02 .txt-point, .sec03 .txt-point { font-size: 3rem; } } .sec02 .box02, .sec03 .box02 { display: flex; justify-content: center; align-items: center; gap: 11rem; width: -moz-fit-content; width: fit-content; padding-top: 6rem; margin: 3.3rem auto 4.3rem; transform: translateX(-5rem); } @media screen and (max-width: 1366px) { .sec02 .box02, .sec03 .box02 { gap: 8.05vw; padding-top: 4.39vw; margin: 4.3vw auto 5.6vw; transform: translateX(-6.51vw); } } @media screen and (max-width: 768px) { .sec02 .box02, .sec03 .box02 { gap: 3vw; padding-top: 7.81vw; margin: 4.3vw auto 5.6vw; transform: translateX(0vw); flex-direction: column; } } .sec02 .box02 .left, .sec03 .box02 .left { font-size: 4rem; letter-spacing: 0; } @media screen and (max-width: 1366px) { .sec02 .box02 .left, .sec03 .box02 .left { font-size: 2.93vw; } } @media screen and (max-width: 768px) { .sec02 .box02 .left, .sec03 .box02 .left { font-size: 2.6rem; } } .sec02 .box02 .left p, .sec03 .box02 .left p { width: -moz-fit-content; width: fit-content; line-height: 1.4; position: relative; z-index: 2; letter-spacing: 0.01em; font-size: unset; } .sec02 .box02 .left p::after, .sec03 .box02 .left p::after { content: ""; display: inline-block; position: absolute; bottom: 1rem; left: 0; width: 100%; height: 20%; background-color: #ffe600; z-index: -1; } @media screen and (max-width: 1366px) { .sec02 .box02 .left p::after, .sec03 .box02 .left p::after { bottom: 0.73vw; } } .sec02 .box02 .left p span, .sec03 .box02 .left p span { font-size: 2rem; display: inline-block; transform: translateY(-50%); } @media screen and (max-width: 1366px) { .sec02 .box02 .left p span, .sec03 .box02 .left p span { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box02 .left p span, .sec03 .box02 .left p span { font-size: 1.6rem; } } .sec02 .box02 .right, .sec03 .box02 .right { width: 26.8rem; } @media screen and (max-width: 1366px) { .sec02 .box02 .right, .sec03 .box02 .right { width: 19.62vw; } } @media screen and (max-width: 768px) { .sec02 .box02 .right, .sec03 .box02 .right { width: 30vw; } } .sec02 .txt01, .sec03 .txt01 { font-size: 2rem; max-width: 96rem; width: 100%; margin: 0 auto 1.6rem; letter-spacing: 0.03em; } @media screen and (max-width: 1366px) { .sec02 .txt01, .sec03 .txt01 { font-size: 1.46vw; margin: 0 auto 1.17vw; padding-inline: 3%; } } @media screen and (max-width: 768px) { .sec02 .txt01, .sec03 .txt01 { font-size: 1.6rem; margin: 0 auto 2.08vw; } } .sec02 .txt01 span, .sec03 .txt01 span { font-size: 1.4rem; } @media screen and (max-width: 1366px) { .sec02 .txt01 span, .sec03 .txt01 span { font-size: 1.2vw; } } @media screen and (max-width: 768px) { .sec02 .txt01 span, .sec03 .txt01 span { font-size: 1rem; } } .sec02 .note, .sec03 .note { font-size: 1.4rem; max-width: 96rem; width: 100%; margin-inline: auto; letter-spacing: -0.05em; padding-bottom: 15rem; font-family: "Zen Kaku Gothic New", sans-serif; } @media screen and (max-width: 1366px) { .sec02 .note, .sec03 .note { font-size: 1.02vw; padding-bottom: 10.98vw; padding-inline: 3%; } } @media screen and (max-width: 768px) { .sec02 .note, .sec03 .note { font-size: 1.2rem; padding-bottom: 14.53vw; } } .sec02 .border00, .sec03 .border00 { max-width: 1100px; width: 100%; height: 1rem; margin-inline: auto; padding-top: 4rem; border-bottom: 5px dotted #776556; margin-bottom: 4rem; } @media screen and (max-width: 1366px) { .sec02 .border00, .sec03 .border00 { height: 0.73vw; padding-top: 2.93vw; margin-bottom: 2.93vw; } } @media screen and (max-width: 768px) { .sec02 .border00, .sec03 .border00 { height: 1.3vw; padding-top: 5.21vw; margin-bottom: 5.21vw; } } .sec02 .box03, .sec03 .box03 { padding-top: 0; gap: 7rem; } @media screen and (max-width: 1366px) { .sec02 .box03, .sec03 .box03 { gap: 5.12vw; } } @media screen and (max-width: 768px) { .sec02 .box03, .sec03 .box03 { gap: 3.11vw; width: 94%; flex-direction: column; } } @media screen and (max-width: 768px) { .sec02 .box03 .left p, .sec03 .box03 .left p { margin-inline: auto; } } .sec02 .box03 .right, .sec03 .box03 .right { width: 26.8rem; } @media screen and (max-width: 1366px) { .sec02 .box03 .right, .sec03 .box03 .right { width: 19.62vw; } } @media screen and (max-width: 768px) { .sec02 .box03 .right, .sec03 .box03 .right { width: 45vw; } } .sec02 .box04, .sec03 .box04 { padding-top: 5.3rem; padding-bottom: 5.6rem; } @media screen and (max-width: 1366px) { .sec02 .box04, .sec03 .box04 { padding-top: 3.88vw; padding-bottom: 4.1vw; } } @media screen and (max-width: 768px) { .sec02 .box04, .sec03 .box04 { padding-top: 6.9vw; padding-bottom: 7.29vw; } } .sec02 .box04 ul, .sec03 .box04 ul { display: flex; justify-content: center; gap: 6.7rem; } @media screen and (max-width: 1366px) { .sec02 .box04 ul, .sec03 .box04 ul { gap: 4.9vw; } } @media screen and (max-width: 768px) { .sec02 .box04 ul, .sec03 .box04 ul { gap: 8.72vw; flex-direction: column; } } .sec02 .box04 ul li, .sec03 .box04 ul li { display: flex; justify-content: center; align-items: start; gap: 1.6rem; } @media screen and (max-width: 1366px) { .sec02 .box04 ul li, .sec03 .box04 ul li { gap: 1.17vw; } } @media screen and (max-width: 768px) { .sec02 .box04 ul li, .sec03 .box04 ul li { gap: 2.08vw; justify-content: left; margin-left: 18vw; } } .sec02 .box04 ul li:nth-child(2), .sec03 .box04 ul li:nth-child(2) { margin-right: 3.3rem; } @media screen and (max-width: 1366px) { .sec02 .box04 ul li:nth-child(2), .sec03 .box04 ul li:nth-child(2) { margin-right: 2.34vw; } } @media screen and (max-width: 768px) { .sec02 .box04 ul li:nth-child(2), .sec03 .box04 ul li:nth-child(2) { margin-right: 4.3vw; } } .sec02 .box04 ul li .left, .sec03 .box04 ul li .left { width: 8.2rem; } @media screen and (max-width: 1366px) { .sec02 .box04 ul li .left, .sec03 .box04 ul li .left { width: 6vw; } } @media screen and (max-width: 768px) { .sec02 .box04 ul li .left, .sec03 .box04 ul li .left { width: 15vw; } } .sec02 .box04 ul li .right p, .sec03 .box04 ul li .right p { font-size: unset; } @media screen and (max-width: 768px) { .sec02 .box04 ul li .right p, .sec03 .box04 ul li .right p { font-size: 1.6rem; } } .sec02 .box04 ul li .right p span, .sec03 .box04 ul li .right p span { display: block; width: -moz-fit-content; width: fit-content; position: relative; z-index: 2; letter-spacing: 0.01em; } .sec02 .box04 ul li .right p span::after, .sec03 .box04 ul li .right p span::after { content: ""; display: inline-block; position: absolute; bottom: 0rem; left: 0; width: 100%; height: 40%; background-color: #ffe600; z-index: -1; } .sec02 .box05, .sec03 .box05 { background-size: auto auto; background-color: rgb(255, 245, 223); background-image: repeating-linear-gradient(135deg, transparent, transparent 15px, rgb(255, 255, 255) 15px, rgb(255, 255, 255) 17px); position: relative; padding: 13.7rem 0 18.6rem; margin-top: -1vw; } @media screen and (max-width: 1366px) { .sec02 .box05, .sec03 .box05 { padding: 10.03vw 3% 13.62vw; } } @media screen and (max-width: 768px) { .sec02 .box05, .sec03 .box05 { padding: 14.84vw 3% 14.22vw; } } .sec02 .box05 .inbox, .sec03 .box05 .inbox { background-color: #fff; max-width: 1100px; width: 100%; margin-inline: auto; padding: 10rem 7rem 5rem; border-radius: 2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox, .sec03 .box05 .inbox { padding: 7.32vw 5.12vw 3.66vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox, .sec03 .box05 .inbox { padding: 13.02vw 0 6.51vw; } } .sec02 .box05 .inbox .ttlbox, .sec03 .box05 .inbox .ttlbox { position: relative; width: 68rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ttlbox, .sec03 .box05 .inbox .ttlbox { width: 52.78vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ttlbox, .sec03 .box05 .inbox .ttlbox { width: 88.54vw; } } .sec02 .box05 .inbox .txt01, .sec03 .box05 .inbox .txt01 { font-size: 4rem; text-align: center; color: #ee869a; margin-bottom: 5rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt01, .sec03 .box05 .inbox .txt01 { font-size: 2.93vw; margin-bottom: 3.66vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt01, .sec03 .box05 .inbox .txt01 { font-size: 2.4rem; margin-bottom: 6.51vw; } } .sec02 .box05 .inbox .txt01 span, .sec03 .box05 .inbox .txt01 span { width: -moz-fit-content; width: fit-content; margin-inline: auto; display: block; font-size: 2.6rem; color: #776556; position: relative; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt01 span, .sec03 .box05 .inbox .txt01 span { font-size: 1.9vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt01 span, .sec03 .box05 .inbox .txt01 span { font-size: 1.8rem; } } .sec02 .box05 .inbox .txt01 span::before, .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::after { content: ""; position: absolute; display: inline-block; width: 1.3rem; aspect-ratio: 13/23; background-repeat: no-repeat; background-size: contain; top: 50%; transform: translateY(-50%); } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt01 span::before, .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::after { width: 0.95vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt01 span::before, .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::after { width: 2.69vw; } } .sec02 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::before { background-image: url("../img/pa58.png"); left: -2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::before { left: -1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt01 span::before, .sec03 .box05 .inbox .txt01 span::before { left: -3.6vw; } } .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::after { background-image: url("../img/pa59.png"); right: -2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::after { right: -1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt01 span::after, .sec03 .box05 .inbox .txt01 span::after { right: -3.6vw; } } .sec02 .box05 .inbox .flexbox, .sec03 .box05 .inbox .flexbox { display: flex; justify-content: center; gap: 6rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .flexbox, .sec03 .box05 .inbox .flexbox { gap: 4.39vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .flexbox, .sec03 .box05 .inbox .flexbox { gap: 3vw; } } .sec02 .box05 .inbox .flexbox .left, .sec02 .box05 .inbox .flexbox .right, .sec03 .box05 .inbox .flexbox .left, .sec03 .box05 .inbox .flexbox .right { width: calc((100% - 6rem) / 2); } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .flexbox .left, .sec02 .box05 .inbox .flexbox .right, .sec03 .box05 .inbox .flexbox .left, .sec03 .box05 .inbox .flexbox .right { width: calc((100% - 4.39vw) / 2); } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .flexbox .left, .sec02 .box05 .inbox .flexbox .right, .sec03 .box05 .inbox .flexbox .left, .sec03 .box05 .inbox .flexbox .right { width: calc((100% - 7.81vw) / 2); } } .sec02 .box05 .inbox .ulbox, .sec03 .box05 .inbox .ulbox { background-color: #fff7e1; padding: 5rem 3rem; border-radius: 1rem; margin-top: 5rem; position: relative; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox, .sec03 .box05 .inbox .ulbox { padding: 3.66vw 2.2vw; border-radius: 0.73vw; margin-top: 3.66vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox, .sec03 .box05 .inbox .ulbox { padding: 6.51vw 3.91vw; border-radius: 1.3vw; margin-top: 6.51vw; width: 94%; margin-inline: auto; } } .sec02 .box05 .inbox .ulbox .ul01, .sec03 .box05 .inbox .ulbox .ul01 { display: flex; align-items: center; } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01, .sec03 .box05 .inbox .ulbox .ul01 { flex-direction: column; justify-content: center; } } .sec02 .box05 .inbox .ulbox .ul01 li, .sec03 .box05 .inbox .ulbox .ul01 li { position: relative; } .sec02 .box05 .inbox .ulbox .ul01 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(1) { width: 30rem; font-size: 2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(1) { width: 21.96vw; font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(1) { width: -moz-fit-content; width: fit-content; margin-inline: auto; text-align: center; font-size: 1.6rem; } } .sec02 .box05 .inbox .ulbox .ul01 li:nth-child(1) p, .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(1) p { letter-spacing: 0; width: -moz-fit-content; width: fit-content; margin-inline: auto; font-size: unset; } .sec02 .box05 .inbox .ulbox .ul01 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(2) { text-align: center; } .sec02 .box05 .inbox .ulbox .ul01 li .txt02, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 { position: absolute; top: 0; left: 50%; transform: translate(-50%, -100%); width: 100%; } .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p { position: relative; font-size: 1.6rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p { font-size: 1.17vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p { font-size: 1.4rem; } } .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::after, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::after { display: inline-block; padding-inline: 3px; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::after, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::after { padding-inline: 0.22vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::after, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::after { padding-inline: 0.39vw; } } .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::before, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::before { content: "＼"; } .sec02 .box05 .inbox .ulbox .ul01 li .txt02 p::after, .sec03 .box05 .inbox .ulbox .ul01 li .txt02 p::after { content: "／"; } .sec02 .box05 .inbox .ulbox .ul01 li .ul02, .sec03 .box05 .inbox .ulbox .ul01 li .ul02 { display: flex; align-items: center; gap: 2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02, .sec03 .box05 .inbox .ulbox .ul01 li .ul02 { gap: 1vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02, .sec03 .box05 .inbox .ulbox .ul01 li .ul02 { gap: 1.04vw; } } .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2) { width: 1.8rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2) { width: 1.32vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(2) { width: 2.34vw; } } .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4) { width: 18rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4) { width: 16.18vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec02 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(3), .sec03 .box05 .inbox .ulbox .ul01 li .ul02 li:nth-child(4) { width: 25.34vw; } } .sec02 .box05 .inbox .ulbox .ul03, .sec03 .box05 .inbox .ulbox .ul03 { justify-content: space-between; position: relative; } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul03, .sec03 .box05 .inbox .ulbox .ul03 { gap: 3vw; } } .sec02 .box05 .inbox .ulbox .ul03 li p, .sec03 .box05 .inbox .ulbox .ul03 li p { font-size: 1.8rem; } .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: 42.6rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: 31.19vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(1), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: -moz-fit-content; width: fit-content; margin-inline: auto; } } .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(1) p, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) p { letter-spacing: -0.04em; } .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) { font-size: 2rem; text-align: left; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) { width: 16rem; font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2), .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) { width: -moz-fit-content; width: fit-content; font-size: 2.6vw; display: flex; align-items: center; justify-content: center; gap: 2vw; } .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2) .img23_, .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2) p, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) .img23_, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) p { width: calc((100% - 2vw) / 2); } .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2) .img23_, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) .img23_ { max-width: 20rem; } } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2) p, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) p { width: -moz-fit-content; width: fit-content; margin-inline: auto; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .ul03 li:nth-child(2) p, .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(2) p { font-size: 1.4rem; } } .sec02 .box05 .inbox .ulbox .imgwrapper, .sec03 .box05 .inbox .ulbox .imgwrapper { top: 50%; right: -2rem; width: 22rem; height: -moz-fit-content; height: fit-content; transform: translateY(-50%); aspect-ratio: unset; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox .imgwrapper, .sec03 .box05 .inbox .ulbox .imgwrapper { right: -1.46vw; width: 16.11vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox .imgwrapper, .sec03 .box05 .inbox .ulbox .imgwrapper { right: -2.6vw; width: 28.65vw; } } .sec02 .box05 .inbox .ulbox .imgwrapper .imgbox, .sec03 .box05 .inbox .ulbox .imgwrapper .imgbox { position: relative; } .sec02 .box05 .inbox .ulbox02, .sec03 .box05 .inbox .ulbox02 { padding: 1.5rem 3rem; margin-bottom: 6.4rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox02, .sec03 .box05 .inbox .ulbox02 { padding: 1.1vw 2.2vw; margin-bottom: 4.69vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox02, .sec03 .box05 .inbox .ulbox02 { padding: 1.95vw 3.91vw 3vw; margin-bottom: 0; width: 100%; } } .sec02 .box05 .inbox .txt03, .sec03 .box05 .inbox .txt03 { text-align: center; margin: 5rem 0 3rem; font-size: 2rem; letter-spacing: 0; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .txt03, .sec03 .box05 .inbox .txt03 { margin: 3.66vw 0 2.2vw; font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .txt03, .sec03 .box05 .inbox .txt03 { margin: 6.51vw 0 4.04vw; font-size: 1.5rem; } } .sec02 .box05 .inbox .btn01, .sec03 .box05 .inbox .btn01 { width: 46rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .btn01, .sec03 .box05 .inbox .btn01 { width: 33.67vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .btn01, .sec03 .box05 .inbox .btn01 { width: 59.9vw; } } .sec02 .box05 .inbox .note, .sec03 .box05 .inbox .note { font-size: 1.4rem; letter-spacing: -0.05em; margin-top: 3rem; padding-bottom: 0; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .note, .sec03 .box05 .inbox .note { font-size: 1.02vw; margin-top: 2.2vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .note, .sec03 .box05 .inbox .note { font-size: 1.82vw; margin-top: 3.91vw; } } .sec02 .box05 .inbox .border, .sec03 .box05 .inbox .border { border-bottom: 5px dotted #ee869a; margin-bottom: 3rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .border, .sec03 .box05 .inbox .border { margin-bottom: 2.2vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .border, .sec03 .box05 .inbox .border { margin-bottom: 3.91vw; } } .sec02 .box05 .inbox .ulbox03 ul, .sec03 .box05 .inbox .ulbox03 ul { display: flex; justify-content: center; gap: 6rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox .ulbox03 ul, .sec03 .box05 .inbox .ulbox03 ul { gap: 4.39vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox .ulbox03 ul, .sec03 .box05 .inbox .ulbox03 ul { gap: 7.81vw; } } .sec02 .box05 .inbox .ulbox03 ul li .btn01, .sec03 .box05 .inbox .ulbox03 ul li .btn01 { width: 100%; } .sec02 .box05 .inbox02, .sec03 .box05 .inbox02 { margin-top: 5.7rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox02, .sec03 .box05 .inbox02 { margin-top: 4.17vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox02, .sec03 .box05 .inbox02 { margin-top: 7.42vw; padding-inline: 3%; } } .sec02 .box05 .inbox02 .filter, .sec03 .box05 .inbox02 .filter { position: relative; } .sec02 .box05 .inbox02 .filter::after, .sec03 .box05 .inbox02 .filter::after { content: "coming soon"; font-size: 5rem; color: #fff; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 50%; width: 105%; height: 108%; background-color: rgba(245, 182, 195, 0.7); transform: translate(-50%, -50%); border-radius: 2rem; } @media screen and (max-width: 1366px) { .sec02 .box05 .inbox02 .filter::after, .sec03 .box05 .inbox02 .filter::after { font-size: 3.66vw; border-radius: 1.46vw; } } @media screen and (max-width: 768px) { .sec02 .box05 .inbox02 .filter::after, .sec03 .box05 .inbox02 .filter::after { font-size: 6.51vw; border-radius: 2.6vw; } } .sec02 { padding-top: 0; padding-bottom: 0; } .sec02 .box-bg { padding-top: 19rem; background-image: url("../img/pa69_.png"); background-repeat: no-repeat; background-size: cover; background-position: top; } @media screen and (max-width: 1366px) { .sec02 .box-bg { padding-top: 13.91vw; } } @media screen and (max-width: 768px) { .sec02 .box-bg { padding-top: 24.74vw; } } .sec03 { position: relative; margin-top: -5rem; padding-top: 0; padding-bottom: 0; background-color: unset; } @media screen and (max-width: 1366px) { .sec03 { margin-top: -3.66vw; } } @media screen and (max-width: 768px) { .sec03 { margin-top: -6.51vw; } } .sec03 .box-bg02 { background-image: url("../img/pa91_2.png"); background-repeat: no-repeat; background-size: cover; background-position: top; padding-top: 19rem; } @media screen and (max-width: 1366px) { .sec03 .box-bg02 { padding-top: 13.91vw; } } @media screen and (max-width: 768px) { .sec03 .box-bg02 { padding-top: 14.74vw; padding-inline: 3%; } } .sec03 h2 { color: #36b6b8; } .sec03 .ttl-asi::before { background-image: url("../img/pa94.png"); } .sec03 .ttl-asi::after { background-image: url("../img/pa95.png"); } .sec03 .txt05 { font-size: 3rem; margin: 7rem 0 4rem; text-align: center; } @media screen and (max-width: 1366px) { .sec03 .txt05 { font-size: 2.2vw; margin: 5.12vw 0 2.93vw; } } @media screen and (max-width: 768px) { .sec03 .txt05 { font-size: 2rem; margin: 9.11vw 0 5.21vw; } } .sec03 .txt06 { text-align: center; font-size: 2rem; } @media screen and (max-width: 1366px) { .sec03 .txt06 { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec03 .txt06 { font-size: 1.6rem; } } .sec03 .txt07 { font-size: 4rem; text-align: center; margin: 16rem 0 3rem; } @media screen and (max-width: 1366px) { .sec03 .txt07 { margin: 11.71vw 0 2.2vw; } } @media screen and (max-width: 768px) { .sec03 .txt07 { font-size: 5.21vw; margin: 20.83vw 0 3.91vw; } } .sec03 .txtbox02 { position: relative; } .sec03 .txtbox02 h2 { font-size: 5rem; line-height: 1.5; } @media screen and (max-width: 1366px) { .sec03 .txtbox02 h2 { font-size: 3.66vw; } } @media screen and (max-width: 768px) { .sec03 .txtbox02 h2 { font-size: 2.8rem; } } .sec03 .txtbox02 .animal, .sec03 .txtbox02 .obake { position: absolute; display: inline-block; } .sec03 .txtbox02 .animal01 { width: 8.3rem; bottom: -1rem; left: -10rem; } @media screen and (max-width: 1366px) { .sec03 .txtbox02 .animal01 { width: 6.08vw; bottom: -0.73vw; left: -7.32vw; } } @media screen and (max-width: 768px) { .sec03 .txtbox02 .animal01 { width: 10.81vw; bottom: -1.3vw; left: -13.02vw; } } .sec03 .txtbox02 .animal02 { width: 14.5rem; top: -6rem; right: -12rem; } @media screen and (max-width: 1366px) { .sec03 .txtbox02 .animal02 { width: 10.61vw; top: -4.39vw; right: -8.78vw; } } @media screen and (max-width: 768px) { .sec03 .txtbox02 .animal02 { width: 18.88vw; top: -7.81vw; right: -15.63vw; } } .sec03 .txtbox02 .obake01 { width: 11rem; bottom: -1rem; left: -15rem; } @media screen and (max-width: 1366px) { .sec03 .txtbox02 .obake01 { width: 8.05vw; bottom: -0.73vw; left: -10.98vw; } } @media screen and (max-width: 768px) { .sec03 .txtbox02 .obake01 { width: 10.32vw; bottom: unset; top: -6vw; left: -5.53vw; } } .sec03 .txtbox02 .obake02 { width: 9.6rem; top: -6rem; right: -12rem; } @media screen and (max-width: 1366px) { .sec03 .txtbox02 .obake02 { width: 7.03vw; top: -4.39vw; right: -8.78vw; } } @media screen and (max-width: 768px) { .sec03 .txtbox02 .obake02 { width: 10.5vw; top: -6.81vw; right: -5.63vw; } } .sec03 .box { padding-top: 0; } .sec03 .box .movie { width: 46.4rem; margin: 10rem auto 6rem; position: relative; } .sec03 .box .movie video { width: 100%; } @media screen and (max-width: 1366px) { .sec03 .box .movie { width: 33.97vw; margin: 7.32vw auto 4.39vw; } } @media screen and (max-width: 768px) { .sec03 .box .movie { width: 80%; max-width: 40rem; margin: 13.02vw auto 7.81vw; } } .sec03 .box .movie .asi-wrapper { position: absolute; top: -5rem; right: -16rem; } @media screen and (max-width: 1366px) { .sec03 .box .movie .asi-wrapper { top: -3.66vw; right: -11.71vw; } } @media screen and (max-width: 768px) { .sec03 .box .movie .asi-wrapper { top: -15.51vw; right: -10vw; } } .sec03 .box .movie .asi-wrapper .asi { width: 21rem; position: relative; } @media screen and (max-width: 1366px) { .sec03 .box .movie .asi-wrapper .asi { width: 15.37vw; } } @media screen and (max-width: 768px) { .sec03 .box .movie .asi-wrapper .asi { width: 27.34vw; } } .sec03 .box .movie .asi-wrapper .asi .img26 { position: absolute; width: 5rem; top: -1rem; right: -1.5rem; } @media screen and (max-width: 1366px) { .sec03 .box .movie .asi-wrapper .asi .img26 { width: 3.66vw; top: 0.27vw; right: -4.1vw; } } @media screen and (max-width: 768px) { .sec03 .box .movie .asi-wrapper .asi .img26 { width: 6.51vw; top: -1.3vw; right: -1.95vw; } } .sec03 .box .inbox { margin-top: 3rem; align-items: center; } @media screen and (max-width: 1366px) { .sec03 .box .inbox { margin-top: 2.2vw; } } .sec03 .box .inbox .left { width: 65rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox .left { width: 47.58vw; } } .sec03 .box .inbox .right { width: calc(100% - 65rem - 5rem); } @media screen and (max-width: 1366px) { .sec03 .box .inbox .right { width: calc(100% - 47.58vw - 3.66vw); } } .sec03 .box .chal { display: flex; align-items: center; justify-content: center; gap: 6rem; width: 96rem; margin: 0 auto; padding-bottom: 4.6rem; } @media screen and (max-width: 1366px) { .sec03 .box .chal { gap: 4.39vw; width: 70.28vw; padding-bottom: 3.37vw; } } .sec03 .box .chal .left { width: 30rem; } @media screen and (max-width: 1366px) { .sec03 .box .chal .left { width: 44.96vw; } } @media screen and (max-width: 768px) { .sec03 .box .chal .left { width: 35vw; } } .sec03 .box .chal .left02 { width: 40rem; } @media screen and (max-width: 1366px) { .sec03 .box .chal .left02 { width: 21.96vw; } } @media screen and (max-width: 768px) { .sec03 .box .chal .left02 { width: 58vw; } } .sec03 .box .chal .right { width: 30rem; } @media screen and (max-width: 1366px) { .sec03 .box .chal .right { width: 21.96vw; } } @media screen and (max-width: 768px) { .sec03 .box .chal .right { width: 35vw; } } .sec03 .box .chal02 { padding-top: 4.6rem; padding-bottom: 4rem; border-bottom: none; } @media screen and (max-width: 1366px) { .sec03 .box .chal02 { padding-top: 3.37vw; padding-bottom: 2.93vw; } } .sec03 .box .bar01 { width: 49rem; margin: 3rem auto; } @media screen and (max-width: 1366px) { .sec03 .box .bar01 { width: 35.87vw; margin: 2.2vw auto; } } @media screen and (max-width: 768px) { .sec03 .box .bar01 { width: 60vw; } } .sec03 .box .txt08 { font-size: 4rem; text-align: center; margin-top: 6rem; } @media screen and (max-width: 1366px) { .sec03 .box .txt08 { font-size: 2.93vw; margin-top: 4.39vw; } } @media screen and (max-width: 768px) { .sec03 .box .txt08 { font-size: 2.6rem; } } .sec03 .box .inbox03 { width: -moz-fit-content; width: fit-content; margin-inline: auto; background-color: #fff; border-radius: 2rem; padding: 1.5rem 3.6rem; display: flex; align-items: center; gap: 4rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox03 { border-radius: 1.46vw; padding: 1.1vw 2.64vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox03 { flex-direction: column; justify-content: center; gap: 3vw; padding: 3vw 5vw; width: 100%; } } .sec03 .box .inbox03 .left { width: 25rem; font-size: 2rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox03 .left { width: 18.3vw; font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox03 .left { font-size: 1.6rem; width: 100%; } } .sec03 .box .inbox03 .left p { font-size: unset; } .sec03 .box .inbox03 .right { width: 52rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox03 .right { width: 38.07vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox03 .right { width: 80%; } } .sec03 .box .movie02 { width: 46rem; margin: 8rem auto 10rem; } .sec03 .box .movie02 video { width: 100%; } @media screen and (max-width: 1366px) { .sec03 .box .movie02 { width: 33.67vw; margin: 5.86vw auto 7.32vw; } } @media screen and (max-width: 768px) { .sec03 .box .movie02 { width: 80%; } } .sec03 .box .inbox04 { padding: 10rem 0 5rem; display: flex; justify-content: center; align-items: center; gap: 5.3rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 { padding: 7.32vw 0 3.66vw; gap: 3.88vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox04 { flex-direction: column; } } .sec03 .box .inbox04 .left p { font-size: 4rem; width: -moz-fit-content; width: fit-content; position: relative; z-index: 2; letter-spacing: 0.01em; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .left p { font-size: 2.93vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox04 .left p { font-size: 2.6rem; } } .sec03 .box .inbox04 .left p::after { content: ""; display: inline-block; position: absolute; bottom: 1rem; left: 0; width: 100%; height: 20%; background-color: #ffe600; z-index: -1; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .left p::after { bottom: 0.73vw; } } .sec03 .box .inbox04 .left p span { font-size: 2rem; display: inline-block; transform: translateY(-50%); } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .left p span { font-size: 1.2vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox04 .left p span { font-size: 3.2vw; } } .sec03 .box .inbox04 .center { width: 30rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .center { width: 21.96vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox04 .center { width: 39.06vw; } } .sec03 .box .inbox04 .right { display: flex; align-items: center; gap: 5.3rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .right { gap: 3.88vw; } } .sec03 .box .inbox04 .right p { font-size: 2rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox04 .right p { font-size: 1.46vw; } } @media screen and (max-width: 768px) { .sec03 .box .inbox04 .right p { font-size: 1.6rem; } } .sec03 .box .inbox05 .right { width: 52rem; } @media screen and (max-width: 1366px) { .sec03 .box .inbox05 .right { width: 38.07vw; } } .sec03 .box .note { margin-bottom: 0; padding-bottom: 0; } .sec03 .box05 { overflow-x: clip; padding-bottom: 0; } .sec03 .box05 .inbox .txt01 { color: #36b6b8; } .sec03 .box05 .inbox .ulbox { padding: 2rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox .ulbox { padding: 1.46vw; } } .sec03 .box05 .inbox .ulbox .ul01 { display: block; } .sec03 .box05 .inbox .ulbox .ul01 li:nth-child(1) { width: 100%; } .sec03 .box05 .inbox .ulbox .ul03 { display: flex; } .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: 42.6rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: 31.19vw; } } @media screen and (max-width: 768px) { .sec03 .box05 .inbox .ulbox .ul03 li:nth-child(1) { width: -moz-fit-content; width: fit-content; margin-inline: auto; padding-inline: 5%; } } .sec03 .box05 .inbox .border { border-bottom: 5px dotted #776556; margin-bottom: 5rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox .border { margin-bottom: 3.66vw; } } .sec03 .box05 .inbox02 .filter::after { background-color: rgba(54, 182, 184, 0.6); } .sec03 .box05 .inbox05 { margin-top: 3.7rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 { margin-top: 2.71vw; } } @media screen and (max-width: 768px) { .sec03 .box05 .inbox05 { padding-inline: 3%; } } .sec03 .box05 .inbox05 .txt01 { margin-bottom: 0rem; } .sec03 .box05 .inbox05 .txt01_ { color: #776556; margin-bottom: 10rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .txt01_ { margin-bottom: 7.32vw; } } .sec03 .box05 .inbox05 .txt03 { margin-top: 0rem; margin-bottom: 5rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .txt03 { margin-bottom: 3.66vw; } } @media screen and (max-width: 768px) { .sec03 .box05 .inbox05 .txt03 { margin-top: 3vw; } } .sec03 .box05 .inbox05 .txt07 { font-size: 4rem; text-align: center; margin: 2rem 0 6rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .txt07 { font-size: 2.93vw; margin: 1.46vw 0 4.39vw; } } .sec03 .box05 .inbox05 .txt08 { text-align: center; font-size: 3rem; color: #36b6b8; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .txt08 { font-size: 2.2vw; } } .sec03 .box05 .inbox05 .border02 { margin-bottom: 4rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .border02 { margin-bottom: 2.93vw; } } .sec03 .box05 .inbox05 .flexbox02 .left > img, .sec03 .box05 .inbox05 .flexbox02 .right > img { width: 22.5rem; margin-inline: auto; margin-top: 4.5rem; } @media screen and (max-width: 1366px) { .sec03 .box05 .inbox05 .flexbox02 .left > img, .sec03 .box05 .inbox05 .flexbox02 .right > img { width: 16.47vw; margin-top: 3.29vw; } } .ul-photo { padding: 12rem 0 5rem; display: flex; width: 120vw; transform: translateX(-5vw); } .ul-photo li { width: 25%; } .ul-photo02 { transform: translateX(-15.5vw); padding-top: 0; } .sec04 { padding-top: 7.2rem; background-color: #fff7e1; } @media screen and (max-width: 1366px) { .sec04 { padding-top: 5.27vw; } } .sec04 .textbox { width: -moz-fit-content; width: fit-content; margin-inline: auto; } .sec04 .textbox .tx-left { width: 12.2rem; margin-inline: auto; margin-bottom: 7.7rem; } @media screen and (max-width: 1366px) { .sec04 .textbox .tx-left { width: 8.93vw; margin-bottom: 5.64vw; } } @media screen and (max-width: 768px) { .sec04 .textbox .tx-left { width: 15.89vw; margin-bottom: 10.03vw; } } .sec04 .textbox .tx-right { font-size: 4rem; font-weight: 700; text-align: center; } @media screen and (max-width: 1366px) { .sec04 .textbox .tx-right { font-size: 2.93rem; } } @media screen and (max-width: 768px) { .sec04 .textbox .tx-right { font-size: 5.21vw; } } .sec04 .textbox .tx-right p { font-size: unset; } .sec04 .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) { .sec04 .txt01 { margin-top: 5.64vw; margin-bottom: 7.03vw; font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec04 .txt01 { margin-top: 10.03vw; margin-bottom: 12.5vw; font-size: 3.2vw; } } .sec04 .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: 3rem; } @media screen and (max-width: 1366px) { .sec04 .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) { .sec04 .textbox02 { padding: 3.26vw 0; margin: 0 auto 12.5vw; font-size: 3.91vw; gap: 3.91vw; flex-wrap: wrap; } } .sec04 .textbox02 .left { margin-right: 3rem; } @media screen and (max-width: 1366px) { .sec04 .textbox02 .left { margin-right: 2.2vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .left { margin-right: 3.91vw; width: 100%; text-align: center; } } .sec04 .textbox02 .left p { font-size: unset; } .sec04 .textbox02 .center { font-size: 2.4rem; } @media screen and (max-width: 1366px) { .sec04 .textbox02 .center { font-size: 1.76vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .center { font-size: 3.13vw; } } .sec04 .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; } @media screen and (max-width: 1366px) { .sec04 .textbox02 .center .span01 { font-size: 2.2vw; width: 2.56vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .center .span01 { font-size: 3.91vw; width: 4.56vw; } } .sec04 .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) { .sec04 .textbox02 .center .span01::after { width: 2.56vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .center .span01::after { width: 4.56vw; } } .sec04 .textbox02 .right ul li { font-size: 2.4rem; } @media screen and (max-width: 1366px) { .sec04 .textbox02 .right ul li { font-size: 1.76vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .right ul li { font-size: 3.13vw; } } .sec04 .textbox02 .right ul li .span02 { font-size: 1.8rem; font-weight: 400; } @media screen and (max-width: 1366px) { .sec04 .textbox02 .right ul li .span02 { font-size: 1.32vw; } } @media screen and (max-width: 768px) { .sec04 .textbox02 .right ul li .span02 { font-size: 2.34vw; } } .sec04 .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) { .sec04 .linkbox { flex-direction: column; justify-content: center; gap: 2.6vw; } } .sec04 .linkbox .linkbox__item { width: calc((100% - 2rem) / 2); text-align: center; } @media screen and (max-width: 768px) { .sec04 .linkbox .linkbox__item { width: fit-content; margin-inline: auto; } } .sec04 .linkbox .linkbox__item a { color: unset; } .sec04 .linkbox .linkbox__item p { font-size: 3rem; font-weight: 700; margin-top: 0.5rem; letter-spacing: unset; } @media screen and (max-width: 1366px) { .sec04 .linkbox .linkbox__item p { font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec04 .linkbox .linkbox__item p { font-size: 3.91vw; line-height: 1.8; margin-bottom: 1rem; } } @media screen and (max-width: 768px) { .sec04 .linkbox .linkbox__item img { max-width: 478px; margin-inline: auto; } } /* .sec04 .linkbox { display: flex; gap: 2rem; max-width: 1100px; padding-bottom: 10rem; margin-inline: auto; padding-inline: 5%; } @media screen and (max-width: 1366px) { .sec04 .linkbox { gap: 1.46vw; } } @media screen and (max-width: 768px) { .sec04 .linkbox { flex-direction: column; justify-content: center; gap: 2.6vw; } } .sec04 .linkbox .left, .sec04 .linkbox .right { width: calc((100% - 2rem) / 2); text-align: center; } @media screen and (max-width: 1366px) { .sec04 .linkbox .left, .sec04 .linkbox .right { width: calc((100% - 1.46vw) / 2); } } @media screen and (max-width: 768px) { .sec04 .linkbox .left, .sec04 .linkbox .right { width: 100%; } } .sec04 .linkbox .left a, .sec04 .linkbox .right a { color: unset; } .sec04 .linkbox .left p, .sec04 .linkbox .right p { font-size: 3rem; font-weight: 700; } @media screen and (max-width: 1366px) { .sec04 .linkbox .left p, .sec04 .linkbox .right p { font-size: 2.2vw; } } @media screen and (max-width: 768px) { .sec04 .linkbox .left p, .sec04 .linkbox .right p { font-size: 3.91vw; } } */ .footerbox .footer-about p { font-size: 1.6rem; font-family: "Noto Sans JP", YuGothic, "Yu Gothic", "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", -apple-system, BlinkMacSystemFont, sans-serif; color: #000; font-weight: 400; } @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; } .footerbox .footer-about .container .footer-about-ttl img { width: 21.2rem; margin-inline: auto; } @media screen and (max-width: 1366px) { .footerbox .footer-about .container .footer-about-ttl img { width: 15.52vw; } } @media screen and (max-width: 768px) { .footerbox .footer-about .container .footer-about-ttl img { width: 27.6vw; } } .footerbox .footer-menu-wrap ul li a { color: #000; } .footerbox .template-elements .container .menu-green-wrap h2, .footerbox .template-elements .container .menu-green-wrap h3, .footerbox .template-elements .container .menu-green-wrap h4, .footerbox .template-elements .container .menu-green-wrap p, .footerbox .template-elements .container .menu-green-wrap li, .footerbox .template-elements .container .menu-green-wrap a, .footerbox .template-elements .container .menu-green-wrap div { letter-spacing: 0; } .footerbox .footer-snsicon-wrap .ubuntu { color: #000; } .footerbox .footer-copy { color: #000; } .end-slider { padding: 12rem 0 5rem; } .bord { margin: 4vw 0; } /* ローディングアニメーション */ .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 { 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; } 91% { display: none; opacity: 0; } 100% { display: none; opacity: 0; z-index: -1; } } .loader .ani01 { width: 14vw; } .loader .ani02 { width: 40vw; } /* 下から */ .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } .fadeUp00 { animation-name: fadeUpAnime00; animation-duration: 3s; animation-delay: 5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime00 { from { opacity: 0; transform: translate(-50%, 30%); } to { opacity: 1; transform: translate(-50%, 0); } } .fadeUp02 { animation-name: fadeUpAnime02; animation-duration: 3s; animation-delay: 5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime02 { from { opacity: 0; transform: translate(0%, 30%); } to { opacity: 1; transform: translate(0%, 0%); } } .fadeUp02sp { animation-name: fadeUpAnime02sp; animation-duration: 3s; animation-delay: 5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeUpAnime02sp { from { opacity: 0; transform: translate(-50%, 30%); } to { opacity: 1; transform: translate(-50%, 0%); } } /* 左から */ .fadeLeft { animation-name: fadeLeftAnime; animation-duration: 3s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeLeftAnime { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } .fadeLeft00 { animation-name: fadeLeftAnime00; animation-duration: 3s; animation-delay: 5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeLeftAnime00 { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } /* 右から */ .fadeRight { animation-name: fadeRightAnime; animation-duration: 3s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } .fadeRight00 { animation-name: fadeRightAnime00; animation-duration: 3s; animation-delay: 5s; animation-fill-mode: forwards; opacity: 0; } @keyframes fadeRightAnime00 { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } .yura { animation-name: yura; animation-duration: 2s; animation-fill-mode: forwards; animation-iteration-count: infinite; } @keyframes yura { 0% { transform: rotate(0deg); } 50% { transform: rotate(5deg); } 100% { transform: rotate(0); } } .ten { animation-name: tenmetsu; animation-duration: 1.5s; animation-fill-mode: forwards; animation-iteration-count: infinite; } @keyframes tenmetsu { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .ten02 { animation-name: tenmetsu02; animation-duration: 5s; animation-fill-mode: forwards; animation-iteration-count: infinite; } @keyframes tenmetsu02 { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } .kuru { animation-name: kuru; animation-duration: 3s; animation-fill-mode: forwards; animation-iteration-count: infinite; } @keyframes kuru { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .kuru02 { animation-name: kuru02; animation-duration: 5s; animation-fill-mode: forwards; animation-iteration-count: infinite; } @keyframes kuru02 { 0% { transform: rotate(0deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(0deg); } }/*# sourceMappingURL=style.css.map */