@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;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@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(button){all:unset}: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(a){color:inherit;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,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word;font-weight:500}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){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
-------------------- */
a { transition: .25s all;}
:where(html) { color-scheme: #fff;}
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Zen kaku Gothic New", serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  color: #272525;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;}
a {
  color: #272525;
  text-decoration: none;}
img { max-width: 100%;}

@media screen and (max-width: 480px){
  body { letter-spacing: normal;}}

@media screen and (max-width: 1280px){
  body.active,html.active { overflow-y: hidden;}}


/*フェードイン*/
.fade-inblock{
	opacity: 0;
	padding-top: 30px;
	transition: .75s;
}
.fade-inblock.fadeIn{
	padding-top: 0;
	opacity: 1;
}
@media screen and (max-width: 768px){
  .fade-inblock{
    transition: 1s;
  }
}
/* text */
p { font-size: 1rem; line-height: 1.8;}

.txs-14 { font-size: 0.875rem; }
.txs-16 { font-size: 1rem; }
.txs-18 { font-size: 1.125rem; }
.txs-20 { font-size: 1.25rem; }
.txs-22 { font-size: 1.375rem; }
.txs-24 { font-size: 1.5rem; }
.txs-28 { font-size: 1.75rem; }
.txs-32 { font-size: 2rem; }
.txs-36 { font-size: 2.25rem; }
.txs-40 { font-size: 2.5rem; }
.txs-42 { font-size: 2.625rem; }
.txs-44 { font-size: 2.75rem; }
.txs-48 { font-size: 3rem; }
.txs-54 { font-size: 3.375rem; }
.txs-62 { font-size: 3.875rem; }
.txs-64 { font-size: 4rem; }

.l-1 { line-height: 1;}
.l-15 { line-height: 1.5;}
.l-18 { line-height: 1.8;}

.w-r { font-weight: 400;}
.w-m { font-weight: 500;}

.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left;}

.clor0 { color: #fff;}
.clor1 { color: #E79236;}
.clor2 { color: #6EB43B;}

@media screen and (max-width: 768px){
  .txs-14 { font-size: 0.875rem;}
  .txs-16 { font-size: 1rem;}
  .txs-18 { font-size: 1.125rem;}
  .txs-20 { font-size: 1.125rem;}
  .txs-22 { font-size: 1.25rem;}
  .txs-24 { font-size: 1.375rem;}
  .txs-28 { font-size: 1.5rem;}
  .txs-32 { font-size: 1.75rem;}
  .txs-36 { font-size: 2rem;}
  .txs-40 { font-size: 1.5rem;}
  .txs-42 { font-size: 2rem;}
  .txs-44 { font-size: 2.25rem;}
  .txs-48 { font-size: 2.5rem;}
  .txs-54 { font-size: 2rem;}
  .txs-62 { font-size: 2rem;}
  .txs-64 { font-size: 2rem;}}

/* --------------------
   ALL
-------------------- */
.wrap {
  margin: 0 auto;
  max-width: 1180px;
  width: 100%;}
.contents {
  padding: 0 50px;
  position: relative;
  margin: 0 auto;
  width: 100%;}
.pc { display: block;}
.pd { display: none;}
.sp { display: none;}

@media screen and (max-width: 1280px){
  body { width: 100%; overflow: hidden;}}
@media screen and (max-width: 768px){
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: none;}}
@media screen and (max-width: 480px){
	.contents { padding: 0 5vw;}
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: block;}}

/* --------------------
   PARTS
-------------------- */
a.next {
  display: inline-block;
  line-height: 60px;
  font-size: 18px;
  color: #fff;
  padding-left: 80px;
  position: relative;}
a.next.black { color: #272525;}
a.next::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  background: #fff;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 30px;}
a.next::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background: url("asset/images/common/arrow-right2.png") no-repeat center center;
  background-size: 22px auto;}
a.next.black::before {
  background: #272525;}
a.next.black::after {
  background: url("asset/images/common/arrow-right.png") no-repeat center center;
  background-size: 22px auto;}

@media screen and (max-width: 480px){
  a.next { padding-left: 35px;line-height: 30px;margin-top: 10px; font-size: 16px;}
  a.next::before { width: 30px;height: 30px;}
  a.next::after { width: 30px;height: 30px;background-size: 14px auto;}
  a.next.black::after { background-size: 14px auto;}}

/* --------------------
   HEADER
-------------------- */
#header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  padding: 40px 160px 0 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;}
#header h1 {
  display: flex; }
#header p { padding-top: 4px;}

#header .hamburger {
  display : flex;
  flex-direction: column;
  position: fixed;
  color: #E79236;
  background: #fff;
  z-index : 99;
  justify-content: center;
  right : 0;
  top   : 0;
  width : 120px;
  height: 120px;
  box-shadow: 0 0 10px 0 rgba(0,100,149,0.1);
  border-left: solid 5px #272525;
  border-bottom: solid 5px #272525;
  border-radius: 0 0 0 20px;
  cursor: pointer;
  text-align: center;}

#header .hamburger .line {
  display : block;
  margin: 0 auto;
  position: relative;
  width   : 48px;
  height  : 24px ;}

#header .hamburger .line span{
  display : block;
  position: absolute;
  width: 100%;
  height: 4px;
  border-radius: 50px;
  top: 0;
  bottom: 0;
  margin: auto;
  background : #E79236;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;}
#header .hamburger .line span:before,
#header .hamburger .line span:after{
  content: "";
  display: block;
  background : #E79236;
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 10px;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;
}
#header .hamburger .line span:before{
  top: 10px;
}
#header .hamburger .line span:after{
  bottom: 10px;
}
#header .hamburger.active .line span{
  background-color: #fff;
}
#header .hamburger.active .line span:before{
  top: 0;
  -webkit-transform: rotate(-30deg);
  -moz-transform   : rotate(-30deg);
  transform        : rotate(-30deg);}
#header .hamburger.active .line span:after {
  bottom: 0;
  -webkit-transform: rotate(30deg);
  -moz-transform   : rotate(30deg);
  transform        : rotate(30deg);}
/* -- hdnav -- */
#mainnav ul{ 
  display: none;
}
@media screen and (min-width: 1281px){
#mainnav ul {
  display: flex;
  gap: 30px;}
  #mainnav ul a:hover{
    color: #E79236;
  }
}

#hdnav {
  box-shadow: 0 0 10px rgba(0,100,149,0.5);
  transition: 1s all;
  background: rgba(231,146,54,0.95);
  width: 100%;
  transition: .2s;
  max-width: 600px;
  height: 100%;
  position: fixed;
  display: none;
  justify-content: center;
  align-items: center;
  top: 0;
  overflow: scroll;
  right: 0;
}
#hdnav.active {
  display: flex;
  opacity: 1;
  z-index: 98;
  -ms-filter: blur(0);
  filter: blur(0);}

#hdnav li{
  font-size: 24px;
  color: #fff;
}

#hdnav li.main-item +li.main-item{
  margin-top: 0.5em;
}
#hdnav li a {
  position: relative;
  display: block;
  font-weight: 600;
  color: #fff;
}
#hdnav .sub-menu{
  padding: 0.5em 0 1em;
}
#hdnav .sub-menu li a {
  padding-left: 1em;
  opacity: 0.8;
  font-size: 0.75em;
}
#hdnav .sub-menu li a:before{
  content: "";
  display: block;
  position: absolute;
  width: 0.5em;
  height: 0.5em;
  background-color: #fff;
  border-radius: 50%;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
#hdnav .contact-box{
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
}
#hdnav .contact-box .txs-54{
  line-height: 1;
  font-weight: 600;
}
.button01{
  text-align: center;
  position: relative;
  max-width: 80%;
  padding: 0.75em 2em;
  border-radius: 50px;
  border: solid 2px #272525;
  background-color: #F7D44D;
  display: block;
}
.button01 .arow{
  width: 0.75em;
  display: flex;
  align-items: center;
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
}
.button01 .arow img{
  width: 100%;
}
.button01.center{
  margin-left: auto;
  margin-right: auto;
}

.button02{
  text-align: center;
  position: relative;
  max-width: 80%;
  padding: 1em 2em;
  line-height: 1;
  border-radius: 50px;
  border: solid 2px #272525;
  background-color: #F7D44D;
  display: block;
}
.button02 .arow{
  width: 0.75em;
  display: flex;
  align-items: center;
  position: absolute;
  right: 1em;
  top: 0;
  bottom: 0;
  margin: auto;
}
.button02 .arow img{
  width: 100%;
}
.button02.center{
  margin-left: auto;
  margin-right: auto;
}
@media screen and (min-width: 769px){
  .button01{
    max-width: 240px;
  }
  .button02{
    max-width: 380px;
  }
}

@media screen and (min-width: 1281px){
  #hdnav .main{
    padding: 60px;
    width: 100%;
  }

}
@media screen and (max-width: 1280px){
  .hamburger { display: none;}
  #header {
    padding-left: 5vw;
    padding-top: 30px;
    justify-content:flex-start;
    z-index: 4;}
  #hdnav {
    transition: 1s all;
    background: rgba(231,146,54,0.95);
    width: 100%;
    height: 100%;
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    top: 0;
    overflow: scroll;
    right: 0;}
  #header .hamburger {
    position: fixed;
    background: #fff;
    z-index : 99;
    right : 0;
    top   : 0;
    width : 70px;
    height: 70px;
    box-shadow: 0 0 10px 0 rgba(0,100,149,0.1);
    border-radius: 0 0 0 20px;
    cursor: pointer;
    text-align: center;}
  #header .hamburger .line{
    width: 30px;
  }
  #header .hamburger .line span {
    display : block;
    position: absolute;
    width   : 100%;
    height  : 2px ;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;}

  #header .hamburger .line span:before{
    top: 6px;
  }
  #header .hamburger .line span:after{
    bottom: 6px;
  }
  #header .hamburger p.txt{
    padding-top: 0;
    line-height: 1;
    margin-top: 0;
    font-size: 0.75em;
  }
  #hdnav ul { padding: 20px;}
  #hdnav li a {
    line-height: 2;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    text-decoration:none;}}
  #hdnav li.main-item +li.main-item{
    margin-top: 0;
  }
  @media screen and (max-width: 768px){
    #header{
      padding-top: 20px;
    }
    #header h1 {
      width: 50vw;}
  }
/* --------------------
   CONTACT
-------------------- */
#contact-bana{
  position: relative;
  color: #fff;
  background-color: #E79236;
}
#contact-bana .contents{
  padding-top: 70px;
  padding-bottom: 110px;
}
#contact-bana a{
  color: #fff;
}
#contact-bana .inner{
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
#contact-bana .txs-64{
  font-weight: 600;
}
#contact-bana .txs-28{
  font-weight: 600;
  margin-top: 0.5em;
  margin-bottom: 1.5em;
}
#contact-bana .txs-20{
  font-weight: 600;
}
#contact-bana .txs-62{
  line-height: 1.5;
  font-weight: 600;
  font-family: "Zen Maru Gothic", serif;
}
#contact-bana .txs-62 span{
  display: inline-block;
  margin-right: 0.25em;
}

#contact-bana .bana{
  margin-top: 30px;
  display: inline-block;
  background-color: #fff;
  border-radius: 50px;
}
#contact-bana .illust{
  position: absolute;
  bottom: 0;
  left: -75px;
}
@media screen and (max-width: 1280px){}
@media screen and (min-width: 1281px){}
@media screen and (min-width: 1081px){
  #contact-bana .inner{
    display: flex;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #contact-bana .inner .cont{
    margin-top: 30px;
    text-align: right;
  }
}
@media screen and (max-width:1080px){
  #contact-bana .contents{
    text-align: center;
    padding-top: 50px;
    padding-bottom: 60px;
  }
  #contact-bana .bana{
    margin-top: 20px;
  }
  #contact-bana .textbox br{
    display: none;
  }
  #contact-bana .illust{
    position: absolute;
    bottom: 0;
    left: 0vw;
    width: 28vw;
    z-index: 0;
  }
  #contact-bana .inner{
    position: relative;
  }
}
@media screen and (max-width: 480px){}



/* --------------------
   FOOTER
-------------------- */
footer{
  color: #fff;
  padding-top: 100px;
  background-color: #2F2006;
}
footer .contents{
  display: flex;
  justify-content: space-between;
}

footer .foot-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 1.25em 2em;
  max-width: 55%;
}
footer .foot-nav a{
  color: #fff;
  padding-left: 1.5em;
  position: relative;
  font-weight: 600;
}
footer .foot-nav a:before{
  content: "";
  display: block;
  width: 1em;
  background-color: #E79236;
  height: 1em;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 0.4em;
}
@media screen and (max-width: 768px){
  footer .foot-nav{
    display: none;
  }
  footer .sns-link{
    text-align: center;
    width: 100%;
  }
  footer .sns-link a{
    display: inline-block;
  }
}


footer .contents:nth-child(2){
  margin-top: 30px;
}
footer .foot-sub{
  text-align: right;
}
footer .sub-nav a{
  color: #fff;
  text-decoration: underline;
}
footer .foot-sub .copy{
  margin-top: 0.25em;
}
footer .sub-nav{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}

@media screen and (max-width: 1080px){
  footer .contents:nth-child(2){
    padding-bottom: 80px;
  }
}
@media screen and (max-width: 768px){
  footer .contents:nth-child(2){
    display: block;
    text-align: center;
    padding-bottom: 60px;
  }
  footer .sub-nav{
    justify-content: center;
    margin: 1.5em auto 3em;
  }
  footer .foot-sub{
    text-align: center;
  }
}
@media screen and (min-width: 1081px){
  footer .sub-nav a:hover{
    text-decoration: none;
  }
  footer .contents:nth-child(2){
    margin-top: 120px;
    margin-bottom: 100px;
  }
}


.foot-copy img{
  width: 100%;
}
@media screen and (max-width: 1080px){
  .foot-copy.sp-copy{
    margin-bottom: 6vw;
  }
  .foot-copy.sp-copy img{
    width: 70%;
  }
  .foot-copy.pc{
    display: none;
  }
}
@media screen and (max-width: 768px){
  .foot-copy.sp-copy{
    margin-bottom: 6vw;
  }
  .foot-copy.sp-copy img{
    width: 100%;
  }
}
@media screen and (min-width: 1081px){
  .foot-copy.sp-copy{
    display: none;
  }
}