@charset "UTF-8";
/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight: 400;}:where(h1,h2,h3){line-height:calc(1em + 0.8rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* --------------------
   COMMON
-------------------- */
* { transition: .25s all; letter-spacing: 0.1em;}
:where(html){ color-scheme: var(--color-wh);}
:root {
  --text-color: #001D0F;
  --main-color: #13673F;
  --sub-color: #989350;
  --white-color:#F5FF40;
  --gray-color:#F7F7F7;}
html{
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body{
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  color: var(--text-color);
  font-size: 100%;
  -webkit-font-smoothing: antialiased;}
a {
  color: var(--main-color);
  display: block;
  text-decoration: none;}

/* text */
.txt-size12{ font-size: 0.75rem;}
.txt-size13{ font-size: 0.8125rem;}
.txt-size14{ font-size: 0.875rem;}
.txt-size16{ font-size: 1rem;}
.txt-size18{ font-size: 1.125rem;}
.txt-size20{ font-size: 1.25rem;}
.txt-size22{ font-size: 1.375rem;}
.txt-size24{ font-size: 1.5rem;}
.txt-size28{ font-size: 1.75rem;}
.txt-size34{ font-size: 2.125rem;}
.txt-size36{ font-size: 2.25rem;}
.txt-size42{font-size: 2.4rem;}
.txt-size48{font-size: 2.625rem;}
.txt-size54{font-size: 2.8rem;}
.txt-size68{font-size: 3.6rem;}

/* weight */
.txt-w_r{ font-weight: 400;}
.txt-w_b{ font-weight: 600;}

/* color */
.txt-c01{ color: var(--text-color);}
.txt-c02{ color: var(--white-color);}
.txt-c03{ color: var(--main-color);}
.txt-c04{ color: var(--sub-color);}
.txt-c05{ color: var(--gray-color);}

.bg-c01{ background-color: var(--text-color);}
.bg-c02{ background-color: var(--white-color);}
.bg-c03{ background-color: var(--main-color);}
.bg-c04{ background-color: var(--sub-color);}
.bg-c05{ background-color: var(--gray-color);}

p { font-size: 1rem; line-height: 2;}

@media screen and (min-width: 1080px){
  .txt-size48{ font-size: 3rem;}
  .txt-size54{font-size: 3.5rem;}
  .txt-size68{font-size: 4.5rem;}}

@media screen and (max-width: 768px){
  .txt-size14,.txt-size16{ font-size: 0.875rem;}
  .txt-size18{ font-size: 1rem;}
  .txt-size20,.txt-size22,.txt-size24,.txt-size28{ font-size: 1.25rem;}
  .txt-size34,.txt-size36,.txt-size42,.txt-size48{ font-size: 1.5rem;}
  .txt-size54{font-size: 1.8rem;}
  .txt-size68{font-size: 1.8rem;}
  p { font-size: 0.875rem; line-height: 1.8;}}

/* --------------------
   ALL PARTS
-------------------- */
.contents {
  margin: 0 auto;
  width: 100%;
  max-width: 1080px;}
.w720 {
  margin: 0 auto;
  width: 100%;
  max-width: 720px;}
.pc { display: block;}
.sp { display: none;}

/* parts */
a.link01,a.link02 {
  color: #fff;
  text-align: center;
  line-height: 60px;
  border-radius: 30px;
  width: 100%;
  max-width: 360px;
  background: var(--main-color);}
a.link02 { background: var(--sub-color);}

@media screen and (max-width: 1080px){
  .contents { padding: 0 5vw;}}

@media screen and (max-width: 768px){
  .pc { display: none;}
  .sp { display: block;}}

@media screen and (min-width: 1080px){
  a.link01:hover,a.link02:hover { background: #000;}}

/* --------------------
   HEADER
-------------------- */
#hdnav {
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  padding: 20px 20px 0 40px;
  background: #fff;
  z-index: 99;}
#hdnav h1 { color: var(--main-color);}
#hdnav h1 span {
  letter-spacing: 0.2em;
  padding-left: 16px;
  vertical-align: text-top;}
@media screen and (min-width: 1080px){
  .hamburger { display: none;}
  #hdnav ul {
    display: flex;
    column-gap:40px;}
  #hdnav ul li:not(:last-child) a {
    line-height: 40px;
    color: var(--text-color);}
  #hdnav ul li:last-child a {
    padding: 0 26px;
    line-height: 38px;
    border: 1px solid #13673F;
    border-radius: 20px;}
  #hdnav ul li:not(:last-child) a:hover { color: var(--sub-color);}
  #hdnav ul li:last-child a:hover { background: var(--main-color);color: #fff;}}
@media screen and (max-width: 1080px){
  body.active { height: 100vh; overflow-y: hidden;}
  #hdnav ul {
    position: fixed;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    top: 0;
    right: 0;
    background: var(--main-color);
    height: 100vh;
    width: 0;
    opacity: 0;
    z-index: -1;}
  #hdnav ul.active { opacity: 1;z-index: 98;width: 100vw;}
  #hdnav ul li {
    padding: 20px 0;
    text-align: center;
    width: 100%;}
  #hdnav ul li a {
    color: #fff;
    font-size: 20px;}
  .hamburger {
    display : block;
    position: fixed;
    z-index : 99;
    right : 20px;
    top   : 20px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;}
  .hamburger span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : var(--main-color);
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;}
  .hamburger span:nth-child(1) { top: 10px;}
  .hamburger span:nth-child(2) { top: 20px;}
  .hamburger span:nth-child(3) { top: 30px;}
  .hamburger.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    background :#fff;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);}
  .hamburger.active span:nth-child(2) { opacity: 0;}
  .hamburger.active span:nth-child(3) {
    top: 16px;
    background : #fff;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);}}
@media screen and (max-width: 768px){
  #hdnav { padding: 24px 20px 0 20px;}
  #hdnav ul {
    padding-top: 60px;
    align-content: flex-start;}}

/* --------------------
   FOOTER
-------------------- */
#footer {
  padding: 100px 0 80px;
  color: #fff;
  background-color:var(--main-color);}
#footer h1 span {
  letter-spacing: 0.2em;
  padding-left: 16px;
  vertical-align: text-top;}
#footer ul a {
  display: inline-block;
  text-decoration: underline;
  color: #fff;}
#footer .copy {
  padding-top: 20px;
  text-align: right;
  letter-spacing: 0.2em;
  font-size: 11px;}
@media screen and (min-width: 1080px){
  #footer p.txt-size14 { padding: 20px 0 120px;}
  #footer ul {
  justify-content: flex-end;
  font-size: 14px;
  display: flex;
  column-gap: 20px;}
  #footer ul a:hover { color: var(--sub-color);}}
@media screen and (max-width: 1080px){
  #footer { padding: 60px 0;}
  #footer p.txt-size14 { padding: 20px 0 60px;}
  #footer ul { color: #13673F;}
  #footer .copy { padding-top: 80px;}}

/* --------------------
   MV
-------------------- */
#mv {
  position: relative;
  margin: 80px 20px 20px;
  height: 240px;
  background: url("../images/about/hd-img.jpg") no-repeat center center;
  background-size: cover;}
#mv h2 {
  left: 60px;
  bottom: -40px;
  position: absolute;}
#mv h2::after {
  position: absolute;
  bottom: 12px;
  left: -60px;
  display: block;
  content: "";
  width: 40px;
  height: 1px;
  background: #000;}
@media screen and (max-width: 1080px){
  #mv { height: 200px; margin: 80px 20px 40px;}}
@media screen and (max-width: 480px){
  #mv { height: 140px;margin: 80px 0 40px;}}

/* --------------------
   GALLERY
-------------------- */
#gallery { display: flex;}
#gallery .photo{ width: 100%;}
#gallery .photo img { width: 100%;}
@media screen and (max-width: 480px){
  #gallery { flex-wrap: wrap;}
  #gallery .photo{ width: 50%;}}