@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=Zen+Maru+Gothic:wght@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; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } .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; width: 100%; } @media screen and (max-width: 768px) { html { font-size: 54.6%; } } body { max-width: 510px; width: 100%; margin: 0 auto; font-family: "Zen Maru Gothic", sans-serif; color: #5A5A5A; font-size: 16px; background-image: url("../img/bg04.jpg"); overflow-x: hidden; } @media screen and (min-width: 1140px) { body { position: relative; left: 15%; margin: 0; } } [id] { scroll-margin-top: 120px; } img { display: block; width: 100%; object-fit: contain; } h2, h3, h4, p, li, a, div { letter-spacing: 0; line-height: 1.8; font-weight: 500; } p { font-size: 14px; font-weight: 700; line-height: 2; letter-spacing: 0.01em; } a { display: block; width: fit-content; height: fit-content; } a:hover { opacity: 0.8; } .no-link { pointer-events: none; } .pc_480 { display: block; } @media screen and (max-width: 480px) { .pc_480 { display: none; } } .sp_480 { display: none; } @media screen and (max-width: 480px) { .sp_480 { display: block; } } #kv { overflow-x: hidden; } .kv { background-color: #1C4937; position: fixed; top: 0; padding-top: 29vw; z-index: 2; padding-inline: 1px; width: 100%; max-width: 510px; } @media screen and (min-width: 510px) { .kv { padding-top: 132px; } } main { position: relative; z-index: 3; padding-top: 154.5%; } header { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 510px; background-color: #1C4937; z-index: 9999; } @media screen and (min-width: 1140px) { header { left: 15%; transform: unset; } } .header { margin-inline: auto; width: 100%; max-width: 510px; display: flex; align-items: baseline; justify-content: space-between; padding: 47px 14px 13px; position: relative; z-index: 9999; } @media screen and (min-width: 510px) { .header { padding: 47px 14px 13px; } } .header .left { width: 33.5%; } .header .right { width: 9%; } @media screen and (min-width: 1140px) { .header .right { display: none; } } .menu-trigger { cursor: pointer; position: relative; } .menu-trigger img { transition: all .3s; } .menu-trigger::after { content: ""; display: flex; justify-content: center; align-items: center; position: absolute; top: 0%; left: 0%; background-image: url("../img/close.png"); background-repeat: no-repeat; background-size: contain; width: 100%; aspect-ratio: 1; transition: all .3s; opacity: 0; } .menu-trigger.open img { transform: rotate(360deg); opacity: 0; } .menu-trigger.open::after { transform: rotate(360deg); opacity: 1; } .sp-nav { position: fixed; z-index: 99; top: 0; left: 50%; width: 100%; height: 100vh; max-width: 510px; transform: translate(-50%, -100vh); transition: all .3s; background-color: rgba(28, 73, 55, 0.8); opacity: 0; } @media screen and (min-width: 1140px) { .sp-nav { top: 132px; left: unset; right: 50%; opacity: 1; transform: translate(130%, 0); max-width: calc(510px - 10%); height: unset; border-radius: 20px; border: 2px solid #fff; } } .sp-nav ul { width: 100%; height: 100%; padding: 40% 0 30%; display: flex; align-items: center; justify-content: space-between; flex-direction: column; } @media screen and (min-width: 769px) { .sp-nav ul { padding: 170px 0; } } @media screen and (min-width: 1140px) { .sp-nav ul { height: unset; padding: 40px 0; } } .sp-nav ul li a { text-align: center; margin-inline: auto; color: #fff; font-size: 18px; font-weight: 700; transition: all .3s; opacity: 0; } @media screen and (min-width: 1140px) { .sp-nav ul li a { opacity: 1; margin-bottom: 15px; } } .sp-nav ul li a:hover { text-decoration: underline; } .sp-nav.active { opacity: 1; transform: translate(-50%, 0%); } @media screen and (min-width: 1140px) { .sp-nav.active { transform: translate(130%, 0); } } .sp-nav.active ul li a { opacity: 1; } .sli { background-color: #1C4937; width: 100%; overflow: hidden; padding: 2%; box-sizing: border-box; } .sli .slider-item { padding: 0.1%; } .wrap { background-color: #fff; } .wrap .sec01 { padding: 8% 0; position: relative; z-index: 0; } .wrap .sec01::after, .wrap .sec01::before { content: ""; display: inline-block; position: absolute; background-repeat: no-repeat; background-size: contain; z-index: -1; } .wrap .sec01::after { background-image: url("../img/parts05.png"); top: 41%; left: 0%; width: 13%; aspect-ratio: 324 / 1081; } .wrap .sec01::before { background-image: url("../img/parts06.png"); top: 27%; right: 0%; width: 15%; aspect-ratio: 304 / 1481; } .wrap .sec01 .box { background-color: #F4E08E; width: 90%; margin-inline: auto; padding: 5%; border-radius: 10px; position: relative; z-index: 3; } .wrap .sec01 .box h2 { text-align: center; font-size: 20px; line-height: 1.7; font-weight: 700; margin-bottom: 2%; } @media screen and (max-width: 390px) { .wrap .sec01 .box h2 { font-size: 17px; } } .wrap .sec02 .box, .wrap .sec03 .box, .wrap .sec04 .box { width: 90%; margin-inline: auto; padding-bottom: 11%; } .wrap .sec02 .box .ttl, .wrap .sec03 .box .ttl, .wrap .sec04 .box .ttl { color: #fff; position: relative; z-index: 1; width: fit-content; margin-inline: auto; padding: 10%; } .wrap .sec02 .box .ttl::after, .wrap .sec03 .box .ttl::after, .wrap .sec04 .box .ttl::after { content: ""; display: inline-block; background-image: url("../img/01.png"); background-repeat: no-repeat; background-size: contain; width: 100%; aspect-ratio: 563 / 183; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .wrap .sec02 .box p, .wrap .sec03 .box p, .wrap .sec04 .box p { font-size: 16px; } .wrap .sec02 .box p span, .wrap .sec03 .box p span, .wrap .sec04 .box p span { display: block; font-size: 14px; } .wrap .sec02 .box02 p, .wrap .sec03 .box02 p, .wrap .sec04 .box02 p { text-align: center; } .wrap .sec03 { overflow-x: hidden; } .wrap .sec03 .box .ttl::after { min-width: 125px; } .wrap .sec03 .box img { padding-right: 5%; margin-bottom: 3%; } .wrap .sec03 .box .img00 { position: relative; z-index: 1; } .wrap .sec03 .box .img00::after { content: ""; display: inline-block; background-repeat: no-repeat; background-size: contain; position: absolute; z-index: -1; } .wrap .sec03 .box .img01 { padding-inline: 5%; } .wrap .sec03 .box .img02::after { background-image: url("../img/parts01.png"); aspect-ratio: 368 / 880; width: 22%; top: -20%; right: -6%; } .wrap .sec03 .box .img03::after { background-image: url("../img/parts02.png"); aspect-ratio: 535 / 1485; width: 36%; top: -14%; left: -6%; } .wrap .sec03 .box .img04::after { background-image: url("../img/parts03.png"); aspect-ratio: 401 / 1519; width: 26%; top: 34%; right: -6%; } .wrap .sec03 .box .img05::after { background-image: url("../img/parts04.png"); aspect-ratio: 272 / 894; width: 17%; top: 43%; left: -6%; } .wrap .sec04 { background-color: #D8EDE3; position: relative; padding-top: 5%; } .wrap .sec04::after { content: ""; display: inline-block; background-image: url("../img/bg03.png"); background-repeat: no-repeat; background-size: contain; position: absolute; top: 0; left: 0; transform: translateY(-90%); width: 100vw; max-width: 100%; aspect-ratio: 402 / 20; } .wrap .sec04 .box .ttl { padding: 5%; } .wrap .sec04 .box .ttl::after { background-image: url("../img/09.png"); aspect-ratio: 175 / 39; } .wrap .sec04 .box ul li { font-size: 16px; font-weight: 700; line-height: 2; } .wrap .sec04 .box .ul02 li a { line-height: 1; margin-bottom: 6%; } .toggle_switch { position: relative; cursor: pointer; width: fit-content; margin: 5% auto 8%; background-color: #fff; border-radius: 5px; padding-inline: 10px; border: 2px solid #5a5a5a; } .toggle_switch::before { content: ""; display: inline-block; background-color: #fff; width: 95%; height: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; } .toggle_switch::after { content: "閉じる"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px; font-weight: 700; opacity: 0; } .toggle_switch.open::before, .toggle_switch.open::after { opacity: 1; } .toggle_contents { display: none; } .toggle_contents .ul01 { padding-top: 10%; } .footer { background-color: #fff; padding: 3% 5% 10%; position: relative; z-index: 2; } .footer .box .ttl { color: #fff; position: relative; z-index: 1; width: fit-content; margin-inline: auto; padding: 10%; } .footer .box .ttl::after { content: ""; display: inline-block; background-image: url("../img/01.png"); background-repeat: no-repeat; background-size: contain; width: 100%; aspect-ratio: 563 / 183; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .footer .box p, .footer .box a { font-size: 17px; } .footer .box a { display: inline-block; font-weight: 700; } .box00 { background-color: #1C4937; width: 100%; height: 25vw; position: relative; z-index: 3; } @media screen and (min-width: 510px) { .box00 { height: 115px; } } .cv { position: fixed; z-index: 9999; bottom: 1%; left: 50%; transform: translateX(-50%); width: 90%; margin-inline: auto; max-width: calc(510px - 10%); } @media screen and (min-width: 1140px) { .cv { left: unset; right: calc(50%); transform: translateX(130%); bottom: unset; top: 603px; } } .info main { padding-top: 27vw; } @media screen and (min-width: 460px) { .info main { padding-top: 120px; } } .info .pg01 { background-color: #D8EDE3; padding: 10% 0; } .info .pg01 .box { width: 90%; margin-inline: auto; margin-top: 10%; } .info .pg01 .box:nth-child(1) { margin-top: 0; } .info .pg01 .box h2 { font-size: 17px; font-weight: 700; margin-bottom: 3%; } .info .pg01 .box ul li { line-height: 2; font-size: 14px; font-weight: 700; } .info .pg01 .box a { font-size: 16px; font-weight: 700; } .info .pg01 .box .txt { margin: 10% 0 3%; } .info .btn02 { margin: 10% auto; width: 80%; max-width: 140px; }