:root{
  --mainColor:#D8BE55;
  --subColor:#CC6666;
  --accentColor:#7705C2;
  --bgColor:white;
  --enfont: "Meddon", serif;
  --innerWidth:calc(1200px + 40px);
}

body{
  background:var(--bgColor);
}

/*//////////////////////////////
   common style
////////////////////////////////*/
/*/// loading /////*/

#loading {
 background: #008868;
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  transition: ease 1s all;
  }

  #loading.is-hidden {
  opacity:0;
  }
  #loading span {
    text-align: center;
    color:white;
    letter-spacing: .1em;
    font-size:clamp(18px,2vw,20px);
    font-family: var(--enfont);
    font-weight: 400;
    transition:3s ease all;
    position: absolute;
    top: 50% ;
    left: 0;
    width: 100%;
    z-index: 1000;
    translate:0 -50%;
    animation: 3s flash infinite;
  }

@keyframes flash {
	0%,
	100% {
		opacity: 0;
	}
	60% {
		opacity: 1;
	}
}
  /* ローディング画面の下端にプログレスバーを表示 */
  #loading #bar {
  position: absolute;
  display:block;
  height: 6px;
  width: 0%;
  bottom: 0;
  left: 0;
  background-color:var(--mainColor);
  transition: ease .3s;
  z-index: 500;
  }
  #loading #bar.is-hidden {
  opacity: 0;
  }

#wrapper {
  width:100%;
  overflow-x: hidden;
}


.inner{
  max-width: var(--innerWidth);
  margin:auto;
  padding:0 20px;
  position: relative;
  z-index: 50;
}
.mini{
  font-size: .8rem;
}
.flex{
  display: flex;
}
.large{
  font-size:clamp(15px,1.7vw,18px);
  line-height: 1.6;
}
.content{
  padding:clamp(80px,15vw,170px) 0;
}
.disnone{
  display: none;
}
[class*="modal-"],
.close_btn{
  display: inline-block;
  cursor: pointer;
}


/*--------- btn ---------*/

/*//////////////////////////////
   header
////////////////////////////////*/

/*-------- header -----------*/

header {
  position: fixed;
  bottom: 20px;
  right:90px;
  width:auto;
  height: auto;
  z-index: 999;
}
#header {
  display: none;
}
#header .header {
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content:flex-end;
  gap:20px;
}

/*------- globalmenu -------*/

#globalmenu ul.btn_banner {
  display: flex;
  justify-content: flex-end;
  align-items:center;
  gap:20px;

}

#globalmenu ul.btn_banner li a{
  height: 40px;
  width: 200px;
  font-size:15px;
  color:white;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background:#E04F5C;
  border:1px solid white;
  box-shadow: 0 2px 5px #0000004a;
}
#globalmenu ul.btn_banner li a span{
  position: relative;
  z-index: 5;
  margin-left:10px;
}

/*------- contents -------------*/

#contents{
  position: relative;
}

/*------- keyvisual -------------*/
#keyvisual{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  width:100%;
  height: max(100vh,577px);
  z-index: 0;

}
#keyvisual::before{
  content:"";
  display: block;
  width: clamp(190px,25%,514px);
  aspect-ratio: 514/380;
  background:url(../../img/flower03.png) no-repeat center center;
  background-size:contain;
  position: absolute;
  bottom:0%;
  right:-5%;
  translate:0 30%;
}
#keyvisual .keyvisual_image{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  mask-image: url(../../img/keyvisual_mask.png);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
#keyvisual .keyvisual_image:after{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: rgba(0,0,0, .08);
  mix-blend-mode: darken;
}
#keyvisual .keyvisual_image img{
  width:100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top:0;
  left:0;
  opacity : 0;
  /* animation : bgAnime 4s 1 forwards;    4画像 × 各5s = 20s */
}

#keyvisual .keyvisual_image .kv01,
#keyvisual .keyvisual_image .ky02  {
  width:100%;
  height: 100%;
}

 /* #keyvisual .keyvisual_image .kv02 {
  animation-delay  : 2s;
}*/


@keyframes bgAnime {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#keyvisual .cont{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width:min(90%,1300px);
  /* container: ct_keyvisual / inline-size; */
}

#keyvisual .main_title{
  position: relative;
  z-index: 100;
  color:white;
}
#keyvisual .main_title h1{
  font-family: var(--enfont);
  font-size: clamp(45px, calc(80 / 1200 * 100vw),80px);
  line-height: 1.3;
  width: 100%;
  text-align: center;
  margin:auto;
  margin-bottom: min(30px,calc(30 / 1200 * 100vw));
  position: relative;
  text-shadow: 0 0 10px rgba(255, 48, 0, 0.8),0 0 20px rgba(236, 167, 141, 0.8);
  font-weight:normal;
}

#keyvisual .logoarea{
  margin:auto;
  text-align: center;
  width:clamp(150px, calc(276 / 1200 * 100vw) ,276px) ;
  aspect-ratio:276/46;
}
#keyvisual .main_title p{
  text-align: center;
  margin:1em auto;
  font-size:clamp(18px, calc(32 / 1200 * 100vw) ,32px) ;
 font-weight: 600;
 line-height: 1.6;
 text-shadow:0 0 8px rgba(0,0,0,.57);
}

#keyvisual .cont .flower01{
  position: absolute;
  left:0%;
  top:50%;
  width:min(20%,326px);
  aspect-ratio: 326/458;
  translate:0 -50%;
}
#keyvisual .cont .flower02{
  position: absolute;
  right:0%;
  top:50%;
  width: min(20%,404px);
  aspect-ratio: 404/502;
  translate:0 -50%;
}
#keyvisual .cont .flower01.s01,
#keyvisual .cont .flower02.s01{
  z-index: 2;
}
#keyvisual .cont .flower01.s01 img{
  position: relative;
  top: -26%;
  left: 18%;
}
#keyvisual .cont .flower01.s02 img{
  position: relative;
  top: -9%;
  left: 26%;
}
#keyvisual .cont .flower02.s01 img{
  position: relative;
  top:0%;
  right:0%;
}
#keyvisual .cont .flower02.s02 img{
  position: relative;
  top: -19%;
  right: 17%;
}

.multi{
  mix-blend-mode: multiply;
}

/*
#keyvisual .scroll{
  position: absolute;
  bottom:0;
  left:50%;
  translate:-50% 0;
  color:#008868;
  height: clamp(40px, calc(80 / 1200 * 100vw), 80px);
  width: 50px;
  overflow:hidden;
}
#keyvisual .scroll:before{
  content:"";
  display: block;
  width:1px ;
  height: 100%;
  background: #008868;
  position: absolute;
  bottom:0;
  left:50%;
  translate:-50% 0;
}
#keyvisual .scroll:after{
  content:"";
  display: block;
  width:4px ;
  height: 50%;
  background: #008868;
  position: absolute;
  left:50%;
  translate:-50% 0;
  animation: 2.3s ease-out infinite running slidein;
}
@keyframes slidein {
  0%{
    top:0%;
  }
  100%{
    top:100%;
  }
}

#keyvisual .scroll span{
  display: inline-block;
  position: absolute;
  top:0;
  left:50%;
  translate:-50% 0%;
  line-height: 1;
  background:white;
  padding-bottom: 5px;
  z-index: 50;
} */


/*  ------------ container kevisual ------------ */

@container ct_keyvisual (width < 585px ) {
  #keyvisual .main_title h1{
    width:82%;
  }
  #keyvisual .logoarea{
    width:92%;
    padding:0 20px;
  }
  #keyvisual .logoarea .logo{
    width:min(133px,35%);
  }
  #keyvisual .main_title  p{
    width:92%;
    padding:0 20px;
  }

}

 /*-----------------------------------*/
 .sprite{
  display: none;
 }

 .more_btn a{
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  background-size: .8em 1.2em;
  border: 1px solid #76efd3;
  font-family: var(--enfont);
  font-weight: normal;
  font-size: clamp(16px , calc(22 / 1200 * 100vw), 22px);
  text-align: center;
  color: #76efd3;
  position: relative;
 }
 .more_btn a:after{
  content:"";
  display: block;
  background-color:#ffc60a;
  position: absolute;
  top:0;
  left:0;
  width:0%;
  height: 100%;
  transform-origin:left;
  z-index: 1;
  transition:.3s ease-out all;
}
.more_btn a span{
  position: relative;
  z-index: 50;
}
 .more_btn a .icon{
  width:.8em;
  aspect-ratio: 1/2;
  stroke:#76efd3;
  transition: .3s ease all;
  position: absolute;
  right:1.2em;
  top:50%;
  translate: 0 -50%;
  z-index: 51;
 }

 .more_btn a:hover{
  border-color:#008868;
  color:#008868;
 }
 .more_btn a:hover:after{
  width: 100%;
 }
 .more_btn a:hover .icon{
  stroke:#008868;
  translate: 5px -50%;
}


/*------------ top contents ------------*/
.section_title{
  position: relative;
}
.section_title hgroup {
  position: relative;
  z-index: 100;
}
.section_title h2{
  margin-bottom: .5em;
}
.section_title h2.en{
  font-family: var(--enfont);
  font-size: clamp(30px,calc(48 / 1200 * 100vw), 48px);
  line-height: 1;
  color:var(--mainColor);
  font-weight: normal;
}
.section_title p{
  font-weight: 600;
  font-size: clamp(18px,calc(30 / 1200 * 100vw), 30px);
  color: var(--subColor);
  width:fit-content;
  border-bottom:1px solid var(--subColor);
}
.title.en{
  font-size: clamp(30px,calc(48 / 1200 * 100vw), 48px);
  color:white;
  font-family: var(--enfont);
  margin: 1em 0;
  font-weight: normal;
}
/*---------------------------------------*/
.section_bg{
  position: relative;
}
.section_bg:after{
  content: "";
  width: 20%;
  height: 60%;
  display: block;
  background: #EEEEEE;
  position: absolute;
  bottom: -10%;
  left: 0;
}
.about_content{
  display: flex;
  justify-content: center;
}
.about_content .section_title p{
  margin:.3em 0 .3em 5em;

}
.about_content .section_title p:nth-child(3){
 margin-left:7em;
}
.about_content .section_title:after{
  content: "";
  display: block;
  width: 50%;
  aspect-ratio: 336/467;
  background: url(../../img/flower04.png) no-repeat center center;
    background-size: auto;
  background-size: contain;
  position: absolute;
  left: -5%;
  top: -39%;
  translate: -60% 0%;
  z-index: 5;
}
.about_content .photoarea{
  width:45%;
  position: relative;
}
.about_content .photoarea img{
  rotate: 5deg;
  translate: 15% 0;
  position: relative;
  z-index: 50;
}
.about_content .photoarea:after{
  content:"";
  display: block;
  width:35%;
  aspect-ratio: 405/503 ;
  background:url(../../img/flower02_multi.png) no-repeat center center;
  background-size:contain;
  position: absolute;
  left:0;
  top:0%;
  translate:-10% -50%;

}

.about_content .textarea {
  width:60%;

}
.textarea p{
  position: relative;
  z-index:5;
}
.about_content .textarea > p{
  width: fit-content;
  margin:5% 0 5% auto;
}
#about .photo.grid{
  display: grid;
  grid-template-columns:60% 40%;
  gap:25px;
  margin: min(60px,8%) 0;
  margin-left:-12%;
}
#about .photo.grid .img02{
  display: flex;
  align-items: center;
  position: relative;
}
#about .photo.grid .img02:before{
  content:"";
  display: block;
  width: 20%;
  aspect-ratio:133/140;
  position: absolute;
  top:10%;
  left:0;
  translate:-50% -50%;
  background:url(../../img/flower05.png) no-repeat center center;
  background-size:contain;
  z-index: 5;
}
#about .photo.grid .img02:after{
  content:"";
  display: block;
  width: 60%;
  aspect-ratio:305/243;
  position: absolute;
  top:0;
  left:0;
  translate:-40% -10%;
  background:url(../../img/flower06.png) no-repeat center center;
  background-size:contain;
  background-origin: right;
  z-index: 3;
}
#about .photo.grid img{
  position: relative;
  z-index: 4;
}
#concept {
  position: relative;
  z-index: 50;
  padding-bottom: max(60px,13vw);
}
#concept:before{
  content:"";
  display: block;
  background:url(../../img/flower07.png) no-repeat center  center;
  background-size:contain;
  position: absolute;
  right:2%;
  top:50%;
  translate: 0 -50%;
  width: clamp(180px,18%,370px);
  aspect-ratio: 370/484;
  z-index: 80;
}
#concept:after {
  content:"";
  display: block;
  background:url(../../img/flower08.png) no-repeat center  center;
  background-size:contain;
  position: absolute;
  right:3%;
  top:60%;
  translate: 0 -50%;
  width: clamp(200px,20%,370px);
  aspect-ratio: 370/342;
  z-index: 0;
}

.concept_content{
  position: relative;
  padding:min(60px,8%) 0;
  height: min(600px,100vw);
}
.concept_content:after{
 content:"";
 display: block;
 background:url(../../img/concept_bg.jpg) no-repeat center 80%;
 clip-path: polygon(0 0, calc(100vw - 23%) 0, 100% 100%, 0% 100%);
 background-size:cover;
 position: absolute;
 left:0;
 top:0;
 height: 100%;
 width: 87%;
}

.concept_content {
  position: relative;
  z-index: 50;
}
.concept_content .textarea p{
  color:white;
  font-weight: 500;
}
.concept_content .rltxt {
  position: absolute;
  right:min(15%,800px);
  top:-10%;
  display: flex;

}
.concept_content .rltxt p{
  display: block;
  font-weight: 600;
  font-size: clamp(23px, calc(33 / 1200 * 100vw),33px);
  color: var(--accentColor);
  background: white;
  border-right: 1px solid var(--accentColor);
  writing-mode: vertical-rl;
  padding: .3em 0;
  height: max-content;
  margin: .5em;
  letter-spacing: 0.1em;
}
.concept_content .rltxt p.l1{
  translate:0 -70%;
  order: 2;
}
.concept_content .rltxt p.l2{
  translate:0 0%;
  order: 1;
}
#thoughts{
  position: relative;
  padding: max(60px,15vw);
}
#thoughts .bg_image{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  mask-image: url(../../img/thoughts_mask.png);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}
#thoughts .bg_image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#thoughts .bg_image:after{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background: rgba(0,0,0, .45);
  mix-blend-mode: darken;
}
#thoughts .section_title h2{
  margin-bottom: 1.5em;
  line-height: 1.5;
}
#thoughts .section_title p {
  color:white;
  border-color:white;
  margin:0 auto .5em;
}
#thoughts .section_title .caption p:first-child{
  margin:0 auto .5em 0;
}
#thoughts .section_title .caption p:last-child{
  margin:0 0 .5em auto;
}
.thoughts_content p{
  color:white;
}
.thoughts_content .grid{
  display: grid;
  grid-template-columns: 45% 50%;
  gap:5%;
}
.thoughts_content .flower09{
  margin:0 0 30px 0;
}

.section_bg02{
  position: relative;
}
.section_bg02:after{
  content:"";
  display: block;
  width:100%;
  height: calc(100% - 150px);
  background: linear-gradient(#100d0b 0%, #0f1013 41.43%, #2a57c5 100%);
  position: absolute;
  left:0;
  top:0;
}
.service_bg{
  width:100%;
  height: 100%;
  margin-top:-150px;
}
.service_bg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#works{
  padding:clamp(60px,15vw,120px) 0;
}
#works .section_title h2{
  text-align: center;
}
#works .section_title p{
  margin:auto;
  color:white;
  border-color:white;
}
.works_content{
  margin-bottom: min(80px,8%);
}
.works_content p{
  color:white;
}
.works_content .read{
  width:min(600px,90%);
  margin:2em auto 4em;
  text-align: center;
}
.works_content .grid{
  display: grid;
  grid-template-columns: repeat(2 , 48%);
  gap:38px;
}

.worksarea .imgs{
  background:#666;
  width:100%;
  aspect-ratio: 8/5;
}
.worksarea .imgs img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.worksarea dl {
  margin:-15% -5% 0 -5%;
  position: relative;
}
.worksarea dl dt{
  margin-bottom: 2em;
}
.worksarea dl dt span{
  display: block;
  width:max-content;
  background:#9B851A;
  color:white;
  padding:0 .8em;
  letter-spacing: 0.1em;
  font-size:clamp(18px,calc(23 / 1200 * 100vw),23px);
  margin:0 auto 0 0;
}
.worksarea:nth-child(2) dl dt span{
  margin:0 0 0 auto;
}
.worksarea dl dt span:nth-child(2){
  margin:.5em auto 0;
}

.worksarea dl dd p{
  text-align: center;
}

.works_images .grid{
  display: grid;
  gap:15px;
  grid-template: repeat(3 , 1fr) / repeat(3 , 1fr) ;
}
.works_images a{
  display: block;
  position: relative;
}
.works_images .ti{
  background:#9B851A;
  color:white;
  font-size:clamp(15px,calc(20 / 1200 * 100vw),20px);
  width:min(80%,230px);
  padding:0 10px;
  position: absolute;
  bottom:10px;
  right:0;
  z-index: 20;
}
#service{
  padding:clamp(40px,12vw,80px) 0 0 0;
}
#service .section_title h2{
  text-align: center;
}
#service .section_title p{
  margin:auto;
  color:white;
  border-color:white;
}

.service_content p{
  color:white;
}
.service_content .read{
  width:min(600px,90%);
  margin:2em auto 4em;
  text-align: center;
}
.service_content .elem dl dt{
  margin-bottom: 1.5rem;
}
.service_content .elem dl dt .ja{
  width:max-content;
  border-bottom:1px solid white;
  padding: 0 0 .3em 0;
  color:white;
  font-size:clamp(17px,calc(23 / 1200 * 100vw),23px);
  letter-spacing: 0.1em;
}
.service_content .elem dl{
  position: relative;
}
.service_content .elem dl dt .en{
  font-family: var(--enfont);
  color:white;
  opacity: .5;
  display: block;
  float:right;
  font-size:clamp(19px,calc(30 / 1200 * 100vw),30px);
  letter-spacing: 0;
}
.service_content .box_style {
  background:rgba(0, 30, 70 ,.50);
  position: relative;
  padding:40px;
}
.service_content .box_style:after {
  content:"";
  width:calc(100% - 20px);
  height:calc(100% - 20px);
  border:1px solid white;
  position: absolute;
  top:50%;
  left:50%;
  translate: -50% -50%;
}
.service_content .elem01{
  display: grid;
  grid-template-columns: 56% 40%;
  gap: 4%;
  position: relative;
}
.service_content .elem01 .imgs{
  margin-left:-20%;
}
.service_content .elem01 .box_style{
 position: absolute;
 left:5%;
 top:80%;
 width:min(500px,90%);
}
.service_content .elem01 .ph {
  margin:13% auto 0 ;
  position: relative;
  padding-left:14%;
}
.service_content .elem01 .ph .leaf01{
  position: absolute;
  left:0;
  bottom:0%;
  width: min(385px,28%);
}
.service_content .elem01 .textarea{
  margin-top:min(60px,10%);
}
.service_content .elem02{
  margin:30% 0 10% auto;
  position: relative;
  order:2;
}
.service_content .elem02 .imgs{
  width:min(369px,70%);
  margin:0 auto 0 0 ;
}
.service_content .elem02 .flower10{
  width:min(193px,40%);
 position: absolute;
 right:0;
 top:0;
}
.service_content .elem02 .box_style{
  width:min(90%,450px);
  margin:-10% 0 0 auto;
}
.service_content .elem03{
  margin-top:45%;
  position: relative;
  order:1;
}
.service_content .elem03 .box_style{
  width:min(90%,430px);
  margin:-10% 0 0 auto;
}
.service_content .elem03 .flower11{
  position: absolute;
  top:0;
  right:0;
  translate:-50% -50%;
  width:min(109px,20%);
}
.service_content > .grid{
  display: grid;
  grid-template-columns:50% 45%;
  gap:5%;

}
#forte{
  padding:clamp(60px,12vw,120px) 0 clamp(40px,7vw,60px) 0;
}
.section_title.center{
  margin-bottom:clamp(30px,4vw,60px) ;
}
.section_title.center h2{
  position: relative;
  width:max-content;
  margin-left:auto;
  margin-right:auto;
  text-align: center;
}
.section_title.center h2 .splash01{
  position: absolute;
  right:0;
  top:0;
  translate:100% -50%;
  width:min(79px,40%);
}
.section_title.center p{
  text-align: center;
  margin:auto;
  color:#008868;
  border-color:#008868;
}
.section_title.center p.mini{
  font-size:1rem;
  font-weight: 500;
  border:0;
}
.forte_content .elem{
  display: flex;
  align-items: flex-start;
  gap:5%;
}
.forte_content .elem .imgs{
  position: relative;
}
.forte_content .elem .textarea{
  width:45%;
}

.forte_content .elem .textarea .title{
  position: relative;
  margin-bottom: 1.3em;
}
.forte_content .elem .textarea .title .num{
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(#bbe249 0%, #209169 100%);
  color:white;
  font-size:clamp(25px,calc(60 / 1200 * 100vw),60px);
  font-weight: 400;
  text-align: center;
  line-height: 1;
  width:clamp(30px,calc(72 / 1200 * 100vw),72px);
  aspect-ratio: 72/116;
  box-shadow: 5px 5px 0 #E3E3E3;
  position: absolute;
  left:-20px;
  top:0;
  translate:-100% 0;
}
.forte_content .elem .textarea .title .num span{
  translate:0 -10% ;
}
.forte_content .elem .textarea .title h3 span{
  display: block;
  font-weight: 700;
  font-size: clamp(17px,calc(26 / 1200 * 100vw), 26px);
  color: #008868;
  width:fit-content;
  border-bottom:1px solid #008868;
  margin-bottom:0.3em;
  padding-bottom: 0.2em;
}

.forte_content .elem01 .imgs{
  width:75%;
  margin:0 0% 0 -15%;
}
.forte_content .elem01 .textarea{
  width:52%;
  margin:5% 0% 0 -12%;
  background-color:white;
  padding:min(50px,6%);
  z-index: 50;
}
.forte_content .elem02{
  flex-direction: row-reverse;
  margin:min(60px,20%) auto 0;
}
.forte_content .elem02 .imgs{
  margin-top:-12%;
}
.forte_content .elem02 .imgs .img02{
  position: absolute;
  top:0;
  left:0;
  translate:-20% -10%;
  width:min(305px,40%);
  z-index: 51;
}
.forte_content .elem02 {
  justify-content: space-between;
}
.forte_content .elem02 .textarea{
  width:min(360px,38%);
  margin-top:3%;
  margin-left: 8%;
}
.forte_content .elem03{
  margin:8% 0 3% 0%;
}
.forte_content .elem03 .textarea{
  margin-left: 50%;
  width:min(440px,42%);
}
.forte_content .elem04 .imgs{
  translate:10% -50% ;
  width:clamp(50px,calc(221 / 1200 * 100vw),221px);
}
.forte_content .elem04 .textarea{
  width:min(440px,42%);
}
.forte_content > .image{
 position: absolute;
 bottom:0;
 right:0;
 translate:0% 40%;
 rotate:5deg;
 width:min(33vw, 398px);
}
.section_bg03{
  position: relative;
  background: linear-gradient(#f9f9f9 0%, #eff5ab 50%, #05834e 60%,#005947 100%);
}

.section_bg03_img{
  display: block;
  width:100%;
  aspect-ratio: 1920/648;
  background-size: contain;
  position: absolute;
  bottom:0%;
  left:0;
  mask-image: linear-gradient(to bottom , transparent 0%, black 100% );
}
.section_bg03_img img{
  width:100%;
  height:100%;
  object-fit: contain;
  mix-blend-mode: overlay;
  opacity:.29;
}
#flow{
  padding:clamp(60px,12vw,120px) 0;
}
#flow .section_title.center p{
  color:#9B851A;
  border-color:#9B851A;
}
.flow_content .read{
  text-align: center;
  margin:2em auto;
  width: min(80% ,720px);
  position: relative;
  z-index: 20;
}
/* .flow_content .grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:20px 10px ;
  justify-items: end;
  padding:20px;
} */
.flow_content .flex{
  display: flex;
  flex-wrap: wrap;
  gap:20px;
  container-type: inline-size;
  container-name: flow;
  justify-content: flex-end;
  padding-right: 20px;
}
.flow_content .flex dl{
  flex:0 1 calc(25% - 20px);
  z-index: 20;
}

.flow_content .number_area{
  margin:min(100px,10%) auto;
  position: relative;
}
.flow_content .number_area:after{
  content:"";
  background:url(../../img/brush01.png) no-repeat center center;
  background-size:contain;
  display: block;
  width:min(1500px, 120vw);
  height: min(1080px, 100vh);
  position: absolute;
  left:50%;
  top:40%;
  translate:-50% -50%;
  z-index: 0;
  opacity: .8;
}
.flow_content .number_area dl{
  position: relative;
}
.flow_content .number_area dl dt{
  color:white;
  font-size:clamp(17px, calc(20 / 1200 * 100vw) , 20px);
  font-weight: 700;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items:center;
  height: 90px;
  position: relative;
}
.flow_content .number_area dl dt span{
 position: relative;
 z-index: 5;
}
.flow_content .number_area dl dt:after{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  background:#9B851A;
  position: absolute;
  left:0;
  top:0;
  transform:skew(20deg);
}
.flow_content .number_area dl dd{
  position: relative;
  min-height: 90px;
  padding:10px 10px 10px 30px;
}
.flow_content .number_area dl dd p{
  position: relative;
  z-index: 5;
}
.flow_content .number_area dl dd:after{
  content:"";
  display: block;
  width:100%;
  height: 100%;
  background:white;
  position: absolute;
  left:0;
  top:0;
  transform:skew(-20deg);
}
.flow_content .number_area dl dt span.num{
  font-size:clamp(21px,calc(30 / 1200 * 100vw),30px);
  font-weight: 700;
  color:#9B851A;
  width:clamp(55px,calc(76 / 1200 * 100vw),76px);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left:0;
  top:0;
  z-index: 10;
  translate:-30% -30%;
}
.flow_content .number_area dl dt span.num:after{
  content:"";
  display: block;
  width:clamp(55px,calc(76 / 1200 * 100vw),76px);
  aspect-ratio: 1;
  background:white;
  border-radius:100px;
  box-shadow:0 3px 10px rgba( 0,0,0, 0.28);
  position: absolute;
  left:0;
  top:0;
  z-index: 5;
}
.flow_content .number_area dl dt span.num span{
  position: relative;
  z-index: 6;
  line-height: 1.1;
}
.flow_content .number_area dl dt span.num span:after{
  content:"Step";
  display: block;
  font-size:clamp(12px, calc(14 / 1200 * 100vw), 14px);
  font-weight: 500;
}

/* flow container */
@container flow (width < 1000px ){
  .flow_content .flex dl{
    flex:0 1 calc(33.333% - 20px);
  }
}
@container flow (width < 800px ){

  .flow_content .flex dl{
    flex:0 1 calc(50% - 20px);
  }
  .flow_content .number_area dl dd p{
    line-height: 1.6;
  }
}

#contact .section_title hgroup p {
  color:white;
  border-color:white;
}

/*--------------------------------------------*/

#contact{
  min-height: 80vh;
  padding:clamp(40px, calc(60 / 1200 * 100vw), 60px) 0;
  position: relative;
}

#contact .inner{
  width: clamp(650px,calc(900 / 1150 * 100vw),900px);
}
@media screen and (width < 640px) {
  #contact .inner{
    width: 95%;
  }
}
.contact_content{
  position: relative;
  border-radius: 28px;
  background: #ffffffea;
  opacity: 0.9;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  color:#000;
  padding:clamp(20px, calc(40 / 1200 * 100vw ), 40px);
}
.contact_content:after{
  content:"";
  display: block;
  background:url(../../img/flower12.png) no-repeat center center;
  background-size:contain;
  width:30%;
  aspect-ratio: 322/370;
  position: absolute;
  right:5%;
  top:50%;
  translate:100% -50%;
}
.contact_content > p{
  text-align: center;
  font-weight: 600;
  font-size:clamp(15px, calc(22 / 1200 * 100vw), 22px);
}
.contact_content .flex{
  display: flex;
  margin:1.5em 0 0 0;

}
.contact_content .flex p{
  font-weight: 500;
  font-size:clamp(15px, calc(18 / 1200 * 100vw), 18px);
}
.contact_content .flex .left_row{
  width:45%;
  padding:1.5em;
}
.contact_content .flex .right_row{
  width:55%;
  border-left:1px solid #bbb;
  padding:1.5em;
}
.contact_content dl{
  display: flex;
  align-items: center;
  margin:1em auto;
}
.contact_content dl dt{
  flex: 0 1 6em;
  line-height: 1;
  color:#645D8A;
  font-size:clamp(14px,calc(17 / 1200 *100vw),17px);
  font-weight: 600;
}
.contact_content dl dd{
  flex: 0 0 auto;
  line-height: 1;
}
.contact_content dl .tel{
  font-weight: 500;
  letter-spacing: 0.025em;
  font-size:clamp(20px, calc(33 / 1200 * 100vw),33px);
}
.contact_content dl .tel img{
  margin-right:.2em;
  vertical-align:0;
  width:clamp(23px,calc(34 / 1200 * 100vw),34px);
}
.contact_btn img{
  margin-right:.5em;
}
.contact_btn{
  margin:1em ;
}
.contact_btn a{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 55px;
  width:100%;
  background: #E04F5C;
  border: 1px solid #fff;
  border-radius:10px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  color:white;
  font-size:clamp(15px, calc(18 / 1200 * 100vw),18px);
}
/*////////// footer /////////////*/
#footer{
  background-color:#056957;
  color:white;
  padding-top: min(60px,8%);
  position: relative;
  box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.16) inset;
}

.footer_logo{
  text-align: center;
  margin:0 auto min(60px,8%);
}
.footer_logo p {
  text-align: center;
}
.office_info {
  display: flex;
  gap:3%;
  font-size:clamp(11px,1.3vw,13px);
}
.office_info .elem{
  width:31%;
}

.office_info .elem .office_name{
  font-size:clamp(18px,2vw,20px);
  padding:1em;
  border-bottom:1px solid white;
  letter-spacing: 0.1em;
  font-weight: 500;
  text-align: center;
}
.office_info .elem .office_telno{
  font-size:clamp(20px,calc(33 / 1200 * 100vw),33px);

  font-weight: 500;
  text-align: center;
  letter-spacing: 0.05em;
  padding:.5em 0;
  vertical-align: middle;
}
.office_info .elem .office_telno img{
  vertical-align: unset;
}
.office_info .elem figure{
  margin:1rem auto;
}
.office_info .elem figcaption{
  background:#0B5029;
  color:white;
  font-size:clamp(13px,1.5vw,15px);
  font-weight: 500;
  text-align: center;
  padding:10px;
}
.office_info img{
  vertical-align: middle;
}
.office_info .office_data {
  margin-bottom:1em;
}
.office_info .office_data dt{
  border:1px solid white;
  padding:.2em .5em .3em;
  width:max-content;
  margin-bottom: .3em;
  line-height: 1;
}
.office_info .office_data dd{
  text-align: left;
  line-height: 1.6;
}
.office_info .elem .navi_add{
  background:#0B5029;
  color:white;
  padding:10px;
  font-size:clamp(13px,1.5vw,15px);
  text-align: center;
  margin:.5em auto;
}
.office_info .elem p{
  text-align: left;
}

.office_info .btn a{
  display: flex;
  justify-content: center;
  align-items: center;
  background:#00B900;
  color:white;
  text-align: center;
  border-radius:50px;
  height: 40px;
  margin:1.5em;
  font-size:15px;
}
.office_info .btn a:hover{
  filter:saturate(1.5);
}

#footer .copyrignt{
  padding:30px 30px 20%;
  max-width:var(--innerWidth);
  margin:auto;
}
#footer .copyrignt p{
  font-size:clamp(10px,1.3vw,13px);
  text-align: center;
  color:#fff;
  letter-spacing: .1em;
  font-family: var(--enfont-reg);
}
#footer .copyrignt p a{
  color:inherit;
}
#footer .copyrignt p a:hover{
  color:inherit;
  text-decoration: underline;
}
.gototop {
  position: fixed;
  width:80px;
  height: 80px;
  bottom:0;
  right:30px;
  z-index: 100;
  cursor: pointer;
}
.gototop .upbar{
  display: block;
  background:#000;
  width:8px;
  height:100%;
  position: relative;
  margin:auto;
}
.gototop .upbar:after{
  content:"";
  width:100%;
  height: 75%;
  background:#00B900;
  position: absolute;
  top:0;
  left:0;
  transition:1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.gototop:hover .upbar:after{
  background:var(--subColor);
  height: 30%;
}
.gototop .txt{
  color:#000;
  transform: rotate(90deg);
  position: absolute;
  top: 0;
  left: -.5em;
  text-align: left;
  width: 100%;
  height: 100%;
  font:15px var(--enfont-reg);
  letter-spacing: .1em;
}



[class*="_btn"] a:hover img {
  opacity:1;
}

.line_btn a{
  background-color:#00B900 !important;
 }
 [class*="_btn"] a:hover{
  filter:saturate(1.4);
 }
/*------------- privacy -------------*/

#privacy h3{
  font-size:clamp(15px,2vw,20px);
  margin: 50px 0 15px;
}
#privacy p{
  font-size:clamp(13px,1.4vw,14px);
}