@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic&display=swap');
:root {--color-01: #30a298;--color-02: #00410f;--color-03: #62452f;--color-04: #d13580;--color-05: #00874b;--color-06: #dbc3c7;--color-07: #26431a;--color-08: #7f7f7f;}
/* =====
 * Reset
=================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, nav, section, article, aside, figure, figcaption, hgroup, footer, header, audio, video, canvas {margin:0; padding:0; border:0; outline:0; font-weight:500; font-style:inherit; font-family:inherit; vertical-align:baseline;}
:focus {outline:0;}
body {line-height:1;}
ol, ul {list-style:none;}
table {border-collapse:separate; border-spacing:0;}
caption, th, td {text-align:left; font-weight:normal;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:'' '';}
h2 {font-size: 100%;}
/* ================================================================= */
body,a {font-family: "Yu Gothic", YuGothic, "Meiryo", Arial, sans-serif;color: #000;font-size: 100%;font-weight: 400;font-style: normal;text-decoration:none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
html,body{overflow-x: hidden;}
html {scrollbar-width: none;}
html::-webkit-scrollbar {display: none;}
img {width:100%; height:auto; display:block;-webkit-backface-visibility: hidden;}
ul {list-style:none;}
.pc {display: block;}
.sp {display: none;}
.mw1600 {width: 85.45%; max-width: 1600px; margin: auto;}
.mw1500 {width: 85.45%; max-width: 1500px; margin: auto;}
.mw1400 {width: 85.45%; max-width: 1400px; margin: auto;}
.mw1300 {width: 85.45%; max-width: 1300px; margin: auto;}
.mw1200 {width: 85.45%; max-width: 1200px; margin: auto;}
.mw1100 {width: 85.45%; max-width: 1100px; margin: auto;}
.mw1000 {width: 85.45%; max-width: 1000px; margin: auto;}
.mw900   {width: 85.45%; max-width:  900px; margin: auto;}
.mw800   {width: 85.45%; max-width:  800px; margin: auto;}
.mw750   {width: 85.45%; max-width:  750px; margin: auto;}
.mw700   {width: 85.45%; max-width:  700px; margin: auto;}
.mw600   {width: 85.45%; max-width:  600px; margin: auto;}
.mw500   {width: 85.45%; max-width:  500px; margin: auto;}
.fontarea {width: 85.45%; max-width:  900px; margin: auto;}
.urbanist  {font-family: "Urbanist", serif;}
.mont {font-family: 'Montserrat', sans-serif;}
.oswald  {font-family: 'Oswald', sans-serif;}
.yumin {font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}
.zen {font-family: "Zen Maru Gothic", serif;}
.caption01 {color: #979797;font-size: 62.5%;font-family: 'Montserrat', sans-serif;line-height: 1.5;padding: 0.2em 0.5em; position: absolute;top: 100%;z-index: 100;}
.caption01.left {left: 0;}
.caption01.right {right: 0;}
.btn {transition: 0.4s;}
.lightbox {z-index: 10001;}
.lightboxOverlay {z-index: 10001;}
.lb-data .lb-close {margin-left: 10px;background: url("../img/common/icon03.svg")no-repeat center/contain;position: absolute;top: 1em;z-index: 10001;cursor: pointer;}
.ttl-style-01 {color: var(--color-07);font-size: 200%;font-weight: 600;text-align: center;padding: 2em 0 1em;}
.ttl-style-01::after {display: block;content: attr(data-title)"";font-size: 100%;font-weight: normal;font-family: 'Jost', sans-serif;padding-top: 0.5em;}
.ttl-style-01 + p {color: #fff;font-size: 150%;font-weight: bold;text-align: center;line-height: 1.5;max-width: 14em;margin: 2em auto 0;background: var(--color-07);}
.ttl-style-02 {font-size: 150%;font-family: 'Montserrat', sans-serif;font-weight: 500;text-align: center;position: relative;}
.ttl-style-02::after {display: block;content: '';width: 85vw;max-width: 1000px;height: 2em;margin: auto;background: var(--color-06);position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: -1;}
.btn-style-01 {display: block;color: #fff;font-size: 137.5%;font-weight: 600;text-align: center;width: 50%;max-width: 15em;margin: 3em auto 0;padding: 0.4em 0;border-radius: 1.5em;background: var(--color-07);border: 2px solid var(--color-07);transition: 0.4s;}
.btn-style-01.ended {max-width: 10em;background: #979797;border-color: #979797;pointer-events: none;}
.btn-style-02 {display: block;color: #fff;font-size: 100%;font-weight: 600;text-align: center;width: 90%;margin: 2em auto 0;padding: 0.3em 0;border-radius: 1.5em;background: #355d94;border: 2px solid #355d94;transition: 0.4s;}
.btn-style-02.ended {background: #979797;border-color: #979797;pointer-events: none;}
.btn-style-02 + .btn-style-02 {margin-top: 0.75em;}
.list-style-01 {margin-top: 1em;}
.list-style-01 li {color: #5b4734;margin-bottom: 0.75em;}
.list-style-01 li::before {content: '●';margin-right: 0.2em;}
.open > .btn-style-01 {border-color: var(--color-08);background: var(--color-08);}
body::after {display: none;content: '';width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);position: fixed;top: 0;left: 0;z-index: 1000;cursor: default;}
body.modalOpen::after {display: block;}
body.modalOpen #menu {display: none;pointer-events: none;}
.modal-style-01 {position: relative;}
.modal-style-01.noLink {pointer-events: none;}
.modal-style-01 .modalDetail {display: none;width: 90%;max-width: 800px;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);pointer-events: none;}
.modal-style-01 .modalDetail > div {width: 100%;max-height: 100svh;padding: 4em 2em 2.5em;box-sizing: border-box;background: #fff;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);overflow-y: scroll;cursor: default;}
.modal-style-01 .modalDetail .modalClose {display: block;width: 60px;height: 60px;background: transparent;position: absolute;top: 0;right: 0;z-index: 10001;cursor: pointer;}
.modal-style-01 .modalDetail .modalClose::before,
.modal-style-01 .modalDetail .modalClose::after {display: block;content: '';width: 30px;height: 2px;background: #000;position: absolute;top: 30px;left: calc(50% - 15px);}
.modal-style-01 .modalDetail .modalClose::before {transform: rotate(45deg);}
.modal-style-01 .modalDetail .modalClose::after {transform: rotate(-45deg);}
.modal-style-01.modalOpen .modalDetail {display: block;pointer-events: auto;z-index: 1001;}
.modalDetail > div.has-scrollbar {width: calc(100% - 8px);}
.modalDetail > div.has-scrollbar::-webkit-scrollbar {width: 8px;}
.modalDetail > div.has-scrollbar::-webkit-scrollbar-thumb {background-color: var(--color-01); /*色*/}
.modalDetail > div.has-scrollbar::-webkit-scrollbar-track {background-color: transparent; /*背景 */}
/* WebKit系ブラウザ（Chrome, Edge, Safari, Opera） */
.modalDetail > div.has-scrollbar::-webkit-scrollbar {width: 8px;}
.modalDetail > div.has-scrollbar::-webkit-scrollbar-thumb { background-color: var(--color-01); /* スクロールバーの色 */}
.modalDetail > div.has-scrollbar::-webkit-scrollbar-track {background-color: transparent; /* スクロールバーの背景 */}
/* Firefox用のスクロールバー */
.modalDetail > div.has-scrollbar {scrollbar-color: var(--color-01) transparent; /* スクロールバーの色 / 背景 */scrollbar-width: thin; /* "auto", "thin", "none" */}
#menu {display: block;color: #fff;font-size: 87.5%;width: 4em;height: 4em;padding: 0.4em 1.5em 1.75em 0.5em;box-sizing: border-box;position: fixed;top: 1em; left: 0;z-index: 10001;cursor: pointer;pointer-events: auto;}
#menu::before {display: block;content: '';width: 100%;height: 100%;background: #003300;position: absolute;top: 0;left: 0;z-index: -1;}
#menu::after {content: 'MENU';font-family: 'Montserrat', sans-serif;text-align: center;position: absolute;left: 0;right: 0;bottom: 0.5em;transition: 0.4s;}
#menu span {display: block;width: 100%;height: 2px;margin: 5px 0;background: #fff;transition: 0.4s;}
#menu h1 {width: 7em;position: absolute;top: 50%;left: calc(100% + 1em);transform: translateY(-50%);transition: 0.4s;pointer-events: none;}
body.menu #menu {background: transparent;}
body.menu #menu::after {opacity: 0;transition: 0.4s;}
body.menu #menu span {transition: 0.4s;}
body.menu #menu span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
body.menu #menu span:nth-child(2) {opacity: 0;}
body.menu #menu span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}
header {padding: 3em 4em;height: 100%;box-sizing: border-box;background: var(--color-01);position: fixed;top: 0;left: 0;z-index: 10000;opacity: 0;transform: translateX(-100%);transition: 0.5s ease-in;overflow-y: scroll;}
body.menu #menu::before {opacity: 0;}
body.menu header {opacity: 1;transform: translateX(0%);transition: 0.5s ease-out;}
body.menu #menu h1 {opacity: 0;pointer-events: none;}
header nav:nth-child(1) {}
header nav:nth-child(1) ul {}
header nav:nth-child(1) ul li {margin-bottom: 2em;}
header nav:nth-child(1) ul li a {color: #fff;transition: 0.4s;}
header nav:nth-child(1) ul li a::before {display: block;content: attr(data-title)"";font-size: 150%;font-family: 'Montserrat', sans-serif;padding-bottom: 0.25em;}
header nav:nth-child(2) {margin-right: -2em;}
header nav:nth-child(2) ul {display: flex;justify-content: flex-end;}
header nav:nth-child(2) ul li {width: 3em;}
header nav:nth-child(2) ul li + li {margin-left: 0.5em;}
header nav:nth-child(2) ul li a {display: block;}
/*header nav:nth-child(1) ul li:nth-child(5),
header nav:nth-child(1) ul li:nth-child(4),
header nav:nth-child(1) ul li:nth-child(3) {opacity: 0.3;pointer-events: none;}
header nav:nth-child(1) ul li:nth-child(5) a,
header nav:nth-child(1) ul li:nth-child(4) a,
header nav:nth-child(1) ul li:nth-child(3) a {pointer-events: none;}*/
footer {text-align: center;padding: 6em 0;background: #d6d0c7;}
footer nav {margin-bottom: 2em;}
footer nav ul {display: flex;justify-content: center;}
footer nav ul li {width: 2.5em;margin: 0.5em;}
footer nav ul li a {display: block;}
footer nav + p {color: var(--color-03);font-weight: bold;text-align: center;}
@media only screen and (max-width: 1200px) {}
@media only screen and (min-width: 768px) and (max-width: 1000px) {
  header nav:nth-child(1) ul li a {font-size: 1.5vw;}
}
@media only screen and (min-width: 768px) {
  a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
  .btn:hover {opacity: 0.6;}
  .btn-style-01:hover {color: var(--color-07);background: #fff;}
  .open > .btn-style-01:hover {color: #fff;background: var(--color-08);opacity: 0.6;}
  header nav:nth-child(1) ul li a:hover {color: #000;}
}
@media only screen and (max-width: 767px) {
  body {font-size: 4.4vw;}
	.pc   {display: none;}
	.sp   {display: block;}
	br.sp {line-height: 0;}
  .ttl-style-01 {font-size: 150%;padding-top: 2em;}
  .ttl-style-01 + p {font-size: 112.5%;margin-top: 1.5em;}
  .ttl-style-02 {font-size: 150%;}
  .ttl-style-02::after {width: 50vw;height: 2.5em;top: -3px;left: 0;right: auto;}
  .ttl-style-02.right::after {height: 2.5em;left: auto;right: 0;}
  .btn-style-01 {font-size: 112.5%;width: 11em;}
  .modal-style-01 .modalDetail {width: 100%;max-width: 100%;}
  .modal-style-01 .modalDetail > div {width: 100%;padding: 4em 1em;}  
  header {padding: 4.5em 2em 0 2em;transition: 0.5s ease-in;}
  #menu h1 {width: 4em;top: 34%;left: calc(100% + 0.5em);}
  body.menu header {transition: 0.5s ease-out;}
  /*body.menu #main {pointer-events: none;}*/
  header nav:nth-child(1) ul li a {font-size: 87.5%;}
  header nav:nth-child(2) ul li {width: 2.5em;}
  header nav:nth-child(2) {margin: 0 0 2em;}
  footer nav {margin-bottom: 1em;}
}
@media (orientation: landscape) and (max-width: 767px){
  body {font-size: 2vw;}
}