@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; -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; 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%; -o-object-fit: contain; 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: -moz-fit-content; width: fit-content; height: -moz-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; } } /* Modal */ .modal { position: fixed; inset: 0; display: none; z-index: 9999; } .modal.is-open { display: block; } .modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .modal__panel { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 600px; width: 100%; max-height: 90vh; } .modal__close { position: sticky; top: 0; margin-left: auto; display: block; border: 0; background: transparent; font-size: 48px; line-height: 1; cursor: pointer; color: #fff; } .modal__content { display: block; } .modal__img img { width: 100%; height: auto; display: block; max-height: 70vh; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .modal__text { background-color: #fff; padding: 20px 28px; } .modal__text h3 { color: #000; text-align: center; font-size: 20px; line-height: 1.5; margin: 0 0 15px; } @media screen and (max-width: 580px) { .modal__text h3 { font-size: 18px; } } .modal__text .txt { color: #000; font-size: 16px; line-height: 2; width: -moz-fit-content; width: fit-content; margin-inline: auto; font-weight: 500; } @media screen and (max-width: 580px) { .modal__text .txt { font-size: 14px; } } .modal__text .txt .br-awa { display: none; } @media (max-width: 768px) { .modal__content { grid-template-columns: 1fr; } } /* .inbox 自体をクリックできる見た目に（任意） */ .inbox { cursor: pointer; } #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 0.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 0.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 0.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 0.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: 94%; right: 0%; width: 18%; 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 .sec01 .box h2 strong { display: block; font-size: 28px; } @media screen and (max-width: 390px) { .wrap .sec01 .box h2 strong { font-size: 22px; } } .wrap .sec02 .box, .wrap .sec03 .box, .wrap .sec04 .box { width: 100%; padding-inline: 5%; 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: -moz-fit-content; 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 .box { position: relative; } .wrap .sec03 .box .ttl::after { min-width: 125px; } .wrap .sec03 .box .awabox { position: relative; margin-top: 45px; padding: 120px 15px 30px; z-index: 2; } .wrap .sec03 .box .awabox::after { content: ""; display: inline-block; position: absolute; top: 55px; left: 50%; transform: translate(-50%, -50%); background-repeat: no-repeat; background-size: contain; } .wrap .sec03 .box .awabox .inbox { margin-top: 20px; } .wrap .sec03 .box .awabox .inbox .img { margin-bottom: 5px; } .wrap .sec03 .box .awabox .inbox .txtbox h3 { color: #000; text-align: center; font-size: 20px; line-height: 1.5; margin: 0 0 15px; } @media screen and (max-width: 580px) { .wrap .sec03 .box .awabox .inbox .txtbox h3 { font-size: 18px; } } .wrap .sec03 .box .awabox .inbox .txtbox .txt { color: #000; font-size: 16px; line-height: 2; font-weight: 500; } @media screen and (max-width: 580px) { .wrap .sec03 .box .awabox .inbox .txtbox .txt { font-size: 14px; } } .wrap .sec03 .box .awabox.grand { background-color: #EAD396; } .wrap .sec03 .box .awabox.grand::after { top: 35px; background-image: url("../img/awa01.png"); width: 130px; aspect-ratio: 130/134; } .wrap .sec03 .box .awabox.excellence { background-color: #CCCCCC; } .wrap .sec03 .box .awabox.excellence::after { background-image: url("../img/awa02.png"); width: 180px; aspect-ratio: 180/122; } .wrap .sec03 .box .awabox.winning { background-color: #FBC18F; display: flex; flex-wrap: wrap; gap: 0 30px; } .wrap .sec03 .box .awabox.winning::after { background-image: url("../img/awa03.png"); width: 180px; aspect-ratio: 180/122; } .wrap .sec03 .box .awabox.winning .inbox { width: calc((100% - 30px) / 2); } .wrap .sec03 .box .awabox.winning .inbox .img { aspect-ratio: 1; overflow: hidden; } .wrap .sec03 .box .awabox.winning .inbox .img img { height: 100%; -o-object-fit: cover; object-fit: cover; } .wrap .sec03 .box .awabox.winning .inbox .txtbox h3 { display: none; } .wrap .sec03 .box .awabox.winning .inbox .txtbox .txt { text-align: center; } .wrap .sec03 .box .awabox.special { background-color: #DCEAC6; display: flex; flex-wrap: wrap; gap: 0 30px; } .wrap .sec03 .box .awabox.special::after { background-image: url("../img/awa04.png"); width: 180px; aspect-ratio: 180/122; } .wrap .sec03 .box .awabox.special .inbox { width: calc((100% - 30px) / 2); } .wrap .sec03 .box .awabox.special .inbox .img { aspect-ratio: 1; overflow: hidden; } .wrap .sec03 .box .awabox.special .inbox .img img { height: 100%; -o-object-fit: cover; object-fit: cover; } .wrap .sec03 .box .awabox.special .inbox .txtbox h3 { display: none; } .wrap .sec03 .box .awabox.special .inbox .txtbox .txt { text-align: center; } .wrap .sec03 .box .awabox.special .inbox:nth-child(1) .img img { -o-object-position: 15px 0; object-position: 15px 0; } .wrap .sec03 .box .awabox.special .inbox:nth-child(2) .img img { -o-object-position: -60px 0px; object-position: -60px 0px; } .wrap .sec03 .box .awabox.special .inbox:nth-child(5) .img img { -o-object-position: 15px 0; object-position: 15px 0; } .wrap .sec03 .box .awabox.special .inbox:nth-child(6) .img img { -o-object-position: -60px 0; object-position: -60px 0; } .wrap .sec03 .box .bg { position: absolute; } .wrap .sec03 .box .bg.bg01 { top: 7.5%; left: 0; width: 31%; } .wrap .sec03 .box .bg.bg02 { top: 12.9%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg03 { top: 30.9%; left: 0; width: 18%; } .wrap .sec03 .box .bg.bg04 { top: 18.9%; left: 0; width: 30%; } .wrap .sec03 .box .bg.bg05 { top: 24.9%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg06 { top: 24.9%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg07 { top: 37.3%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg08 { top: 42.9%; left: 0; width: 30%; } .wrap .sec03 .box .bg.bg09 { top: 50.9%; right: 0; width: 15%; } .wrap .sec03 .box .bg.bg10 { top: 55.9%; left: 0; width: 30%; } .wrap .sec03 .box .bg.bg11 { top: 62.9%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg12 { top: 68.9%; left: 0; width: 17%; } .wrap .sec03 .box .bg.bg13 { top: 75.3%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg14 { top: 82%; left: 0; width: 23%; } .wrap .sec03 .box .bg.bg15 { top: 86%; right: 0; width: 17%; } .wrap .sec03 .box .bg.bg16 { top: 94%; left: 0; width: 30%; } .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: -moz-fit-content; 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%; } .sec05 .box { position: relative; } .sec05 .box .bg.bg17 { position: absolute; top: 45%; right: 0; width: 17%; } .sec05 p { text-align: center; font-size: 18px; } .sec05 .txt02 span { font-size: 28px; line-height: 1.5; color: #276638; display: inline-block; position: relative; } .sec05 .txt02 span::after { content: ""; display: inline-block; background-color: #F1E096; width: 100%; height: 8px; position: absolute; bottom: -2px; left: 0; } @media screen and (max-width: 390px) { .sec05 .txt02 span { font-size: 22px; } } .sec05 .txt03 { font-size: 14px; margin-top: 10px; } .footer { background-color: #fff; padding: 3% 5% 10%; position: relative; z-index: 2; } .footer .box .ttl { color: #fff; position: relative; z-index: 1; width: -moz-fit-content; 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: 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; }/*# sourceMappingURL=style.css.map */