@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
/*reset*/
*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{display: block;}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert}::placeholder{color:unset}::marker{content:initial}:where([hidden]){display:none}: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}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert}
/*reset end*/
:root {
  --color-green1: #338355;
  --color-green2: #ebf3ee;
  --color-green3: #70a888;
  --color-green4: #c2dacc;
  --color-yellow1: #fffbc0;
  --color-yellow2: #fff462;
  --color-yellow3: #f8e9aa;
  --color-yellow4: #fff791;
  --color-grey1: #f5f5f2;
}
body,html {font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;overflow-x: hidden;}
body {font-size: 100%;line-height: 1.5;overflow-x: hidden;position: relative;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-feature-settings: "palt";}
img {width: 100%;height: auto;display: block;}
body,a {color: var(--color-01);}
a {display: block; text-decoration: none; }
ul {list-style: none; }
h1,h2,h3,h4,h5,div,p,ul,li,a,p,th {font-weight: normal;}
h1,h2,h3,h4,div,p,ul,li,a,span,p,th,td {box-sizing: border-box;}
input:focus {outline: none;}
iframe {border: none;}
select {outline: none;}
figure {position: relative;}
.btn {transition: 0.4s;}
.pc {display: block;}
.sp {display: none;}
.gothic {font-family: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;}
.mincho {font-family: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;}
.mincho2 {font-family: 'Shippori Mincho', serif;}
.oswald {font-family: 'Oswald', sans-serif;}
.object-fit {object-fit: cover;font-family: 'object-fit: cover;'}
.appear.observe {opacity: 0;-webkit-backface-visibility: hidden;backface-visibility: hidden;will-change: transform;}
.appear.on {opacity: 1;transition: opacity ease-out 0.3s 0s;}
.movetop {opacity: 0;transform: translateY(3em);transition: ease-out 0.35s 0s;}
.movebottom {opacity: 0;transform: translateY(-3em);transition: ease-out 0.35s 0s;}
.moveleft {opacity: 0;transform: translateX(3em);transition: ease-out 0.6s 0s;}
.moveright {opacity: 0;transform: translateX(-3em);transition: ease-out 0.6s 0s;}
.movetop.on,
.movebottom.on,
.moveleft.on,
.moveright.on {opacity: 1;transform: translate(0);}
.mw1700 {width: 90%; max-width: 1700px; margin: auto;}
.mw1600 {width: 90%; max-width: 1600px; margin: auto;}
.mw1500 {width: 90%; max-width: 1500px; margin: auto;}
.mw1400 {width: 90%; max-width: 1400px; margin: auto;}
.mw1300 {width: 90%; max-width: 1300px; margin: auto;}
.mw1200 {width: 90%; max-width: 1200px; margin: auto;}
.mw1100 {width: 90%; max-width: 1100px; margin: auto;}
.mw1000 {width: 90%; max-width: 1000px; margin: auto;}
.mw900 {width: 90%; max-width:  900px; margin: auto;}
.mw800 {width: 90%; max-width:  800px; margin: auto;}
.mw700 {width: 90%; max-width:  700px; margin: auto;}
.mw600 {width: 90%; max-width:  600px; margin: auto;}
.mw500 {width: 90%; max-width:  500px; margin: auto;}
.loader-wrap {position: fixed;display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;background: #fff;z-index: 10001;}
.loader,.loader:after {border-radius: 50%;width: 7em;height: 7em;}
.loader {margin: 60px auto;font-size: var(--fontsize-10);position: relative;text-indent: -9999em;border-top: 0.55em solid var(--color-green1);border-right: 0.55em solid var(--color-green1);border-bottom: 0.55em solid var(--color-green1);border-left: 0.55em solid #e0e0e0;-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);-webkit-animation: load8 1.1s infinite linear;animation: load8 1.1s infinite linear;}
@-webkit-keyframes load8 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes load8 {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.invert {filter: brightness(0) invert(1);}
#contentsWrap {transition: 0.4s;opacity: 0;}
body.loaded #contentsWrap {opacity: 1;}
.ttl-style-01 {text-align: center;}
.ttl-style-01 span {display: inline-block;font-size: 218.75%;font-weight: bold;padding: 1.5em 0 0.5em;position: relative;}
.ttl-style-01 span::before,
.ttl-style-01 span::after {display: block;content: '';width: 2.5em;height: 3em;background: url("../img/deco_01.svg") no-repeat center/contain;position: absolute;bottom: 0;}
.ttl-style-01 span::before {right: calc(100% + 0.25em);}
.ttl-style-01 span::after {left: calc(100% + 0.25em);transform: scaleX(-1);}
.ttl-style-01 span strong {color: var(--color-green1);font-size: 120%;}
.area-style-01 {padding: 3em;margin-top: 3.5em;background: var(--color-green2);}
.area-style-01 div {text-align: center;max-width: 900px;margin: 0 auto;border: 2px solid #fff;}
.area-style-01 div p:nth-child(1) {color: var(--color-green1);font-size: 200%;padding: 0.25em 0.5em 0.1em;background: var(--color-yellow3);}
.area-style-01 div p:nth-child(1) span {font-size: 105%;font-weight: bold;line-height: 1;}
.area-style-01 div p:nth-child(2) {font-size: 125%;font-weight: bold;padding: 0.8em 0.5em;background: #fff;}
.area-style-01 div a {color: #fff;font-size: 250%;font-weight: bold;padding: 0.2em;background: var(--color-green1);position: relative;}
.area-style-01 div a::after {display: block;content: '';width: 0.5em;height: 0.5em;background: url("../img/icon_arrow.svg") no-repeat center/contain;position: absolute;top: 50%;right: 0.5em;z-index: 1;transform: translateY(-50%);}
@media only screen and (min-width: 768px) {
  a[href*="tel:"] {pointer-events: none;cursor: default;text-decoration: none;}
  .btn:hover {opacity: 0.85 !important;transition: 0.4s;}
}
@media only screen and (max-width: 767px) {
  .pc { display: none;}
  .sp { display: block;}
  br.sp { line-height: 0; }
  .scroller {overflow-x: scroll;position: relative;}
  .scroller:before {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url("../img/common_swipe.png")no-repeat 50% 50%;background-size: 35% auto;z-index: 2;}
  .scroller:after {content: "";display: block;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 500ms;position: absolute;top: 0;left: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.5);width: 250%;padding: 3%;z-index: 1;}
  .scroller.on:before,
  .scroller.on:after {opacity: 0;}
  .scroller img {width: 260%;opacity: 0.5;transition: opacity cubic-bezier(0.445, 0.05, 0.55, 0.95) 100ms;}
  .scroller.on img {opacity: 1;}  
  .ttl-style-01 span {font-size: 150%;padding: 0.5em 0 0.25em;}
  .ttl-style-01 span::before,
  .ttl-style-01 span::after {width: 2em;height: 3.5em;}
  .area-style-01 {width: 90%;padding: 0;margin: 2em auto 0;}
  .area-style-01 div p:nth-child(1) {font-size: 175%;line-height: 1.2;padding: 0.75em 0 0.65em;}
  .area-style-01 div p:nth-child(2) {font-size: 100%;padding: 0.75em 0;}
  .area-style-01 div a {font-size: 175%;padding: 0.8em 0 0.75em;}
  .area-style-01.fix01 {width: 90vw;margin: 2em 0 0;}
}
@media only screen and (max-width: 450px) {
  body {font-size: 3.2vw;}
}