:root{
  --mainColor:#385000;
  --subColor:#6BA800;
  --subColor2:#7EC700;
  --bgColor:#EDEEE1;
  --bgColor2:#F9F9F9;
  --pcheaderHight:80px ;
  --spheaderHight:43px;
  --innerWidth:min(100%,calc(1300px + 60px));
}

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

#loading {
  background-color: var(--subColor2);
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  transition: ease .5s;
  }
  #loading.is-hidden {
  top: -100%;
  }
  #loading span {
  font-family: sans-serif;
  display: block;
  text-align: center;
  width: 100%;
  height: 40px;
  color: white;
  font-size: 16px;
  letter-spacing: 4px;
  text-indent: -4px;
  position: absolute;
  top: calc( 50% - 10px );
  left: 0;
  }
  /* ローディング画面の下端にプログレスバーを表示 */
  #loading #bar {
  position: absolute;
  display:block;
  height: 6px;
  width: 0%;
  bottom: 0;
  left: 0;
  background-color: white;
  transition: ease .1s;
  }
  #loading #bar.hide {
  opacity: 0;
  }

#wrapper {
  width:100%;
  overflow-x: hidden;
}
.header_padding {
  padding-top:var(--pcheaderHight);
}

.inner{
  width: var(--innerWidth);
  margin:auto;
  padding:0 30px;
  position: relative;
}
.mini{
  font-size: .8rem;
}
.flex{
  display: flex;
}
strong{
  font-weight: bold;
  color:var(--mainColor);
}
.red{
  color:rgb(199, 0, 0);
}
.content{
  padding:max(80px,5%) 0;
  margin-bottom: 80px;
}
[class*="modal-"],
.close_btn{
  display: inline-block;
  cursor: pointer;
}
p.pan{
  margin:30px 0 0 30px;
}
p.pan a{
  display: inline-block;
  color:#ACACAC;
  position: relative;
  margin-right:70px;
}
p.pan a:after{
  content:"";
  width:40px;
  height: 1px;
  background:#ACACAC;
  position: absolute;
  right:-15px;
  top:50%;
  transform: translate(100%,0);
}
/*------- title -----*/
.title{
  margin:0 0 80px  0;
  text-align: center;
}
.title h3{
  font-size:clamp(23px,3.3vw,33px);
  text-align: center;
  color:var(--mainColor);
  font-weight: 600;
  letter-spacing:0.1em ;
}

/*--------- btn ---------*/
.btn{
  display: block;
  border-radius:10px;
  background:#004480;
  color:white;
  text-align: center;
  font-size: clamp(16px,2.3vw,20px);
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  padding:.8em 2em;
  width:max-content;
  margin:auto;
}
.btn:hover{
  color:white;
  background:var(--subColor);
}
.btn.large_btn{
  width:min(90%,480px);
}
.next_btn{
  position: relative;
  width:calc(5em + 1px);
  height:calc(5em + 1px);
  border-radius:100px;
  border:1px solid #6B8830;
  overflow: hidden;
}
.next_btn.white{
  border:1px solid white;
}
.next_btn a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 11;
}

.next_btn:before{
  content:"";
   width:0%;
   height: 100%;
   position: absolute;
   top:0;
   left:0;
   transition:.3s all ease;
 }
.next_btn:hover:before{
 width:100%;
 background-color:var(--subColor);

}
.next_btn:hover i.icon-arrow:after{
  background-image:url(../img/arrow_right_white.svg);
}

.btnarea{
  margin:clamp(30px,15%,50px) 0 0 0;
}

/*------- icon -----------*/
[class*="icon-"]{
 display:inline-block;
 position: relative;
}
.icon-arrow,
.icon-arrow_white{
  width: clamp(15px,3vw,32px);
  height: 29%;
  position: absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

}
.icon-arrow:after{
  content:"";
  background:url(../img/arrow_right.svg) no-repeat center center;
  background-size:contain;
  display:inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
 }
.icon-arrow_white:after{
  content:"";
  background:url(../img/arrow_right_white.svg) no-repeat center center;
  background-size:contain;
  display:inline-block;
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
 }
 .imgs{
  position: relative;
  overflow: hidden;
 }
 .imgs > span > img{
  position: relative;
  z-index: 9;

 }
.imgs > span{
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 10;
  /* background:rgba(255,255,255,.9);
  mix-blend-mode:exclusion; */
  background: rgba(68, 8, 109, 0.57);
  mix-blend-mode: difference;
}
 /*-----------------------------------*/

 .top_title .ja{
  overflow:hidden;
  padding:.2em 1.5em;
  width:max-content;
  margin:0 0 15px 0;
  font-weight: 500;
  display: block;
  position: relative;
  transform-origin: left;
  border:1px solid var(--subColor2);
}
.top_title .ja span.tx{
  position: relative;
  color:white;
  font-size:clamp(15px,2vw,22px);
  z-index: 23;
}
.top_title .ja .screen{
  background:var(--mainColor);
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  right:0;
  z-index: 24;
  transform-origin: right;
}
.top_title .ja:after{
  content:"";
  background:var(--subColor2);
  display: block;
  width:100%;
  height: 100%;
  position: absolute;
  top:0;
  right:0;
  z-index: 21;
}
.top_title2{
  text-align: center;
 }
 .top_title2 .ja{
  font-size:clamp(15px,1.7vw,18px);
  margin:0 0 15px 0;
  font-weight: 500;
  display: block;
 }
.top_title .en,
.top_title2 .en{
  font-family:'Be Vietnam Pro' , sans-serif;
  font-size:clamp(40px,6.8vw,70px);
  display: block;
  line-height: 1.3;
  color:#385000;
}

dl.text dt{
  font-weight: 700;
  font-size:clamp(17px,1.7vw,23px);
  margin-bottom: 25px;
  line-height: 1.6;
  color:var(--subColor);
}
dl.text dt span.small{
  font-size:.9em;
}
#header h1 span{
  display: none;
}
#header .globalmenu_bg,
#header .toggle_btn{
  display: none;
}
/*//////////////////////////////
   contents top
////////////////////////////////*/
/*-------- header -----------*/

  header #header {
    position: absolute;
    width:100%;
    z-index: 999;
  }
  header.home #header .header h1{
    position: absolute;
    right:0;
    top:0;
  }
  header.home #header .header h1 svg#logo {
    width:clamp(400px,70vw,1225px);
  }
  header.home #globalmenu ul {
    position: absolute;
    left:0;
    top:0;
    width:max-content;
    z-index: 10;
    mix-blend-mode:color-burn;
  }
  header.home #globalmenu ul li a{
    display: block;
    color:inherit;
    font-weight: 700;
    padding:1em clamp(20px,1.9vw,35px);
    position: relative;
    text-align: left;
    font-size:16px;
    line-height: 1;
  }
  header.home #globalmenu ul li a span.en{
    display: block;
    font-size: clamp(18px,3.1vw,33px);
    font-family: 'Be Vietnam Pro', sans-serif;
  }
  header.home #globalmenu ul li a:after{
    content:"";
    width:0%;
    height: 1px;
    background:var(--subColor);
    position: absolute;
    bottom:0px;
    left:0%;
    z-index: 4;
    transform:translate(0%,0);
    transition:.3s all ease;
  }

  header.home #globalmenu ul li a:hover:after{
    width:100%;
  }

  header.home #globalmenu ul li span.en > span{
    display: inline-block;
  }

#keyvisual{
  width:100%;
  height: 100vh;
  min-height: 557px ;
  position: relative;
}
#keyvisual:after{
  content:"";
  background:#EDEEE1;
  width:100%;
  height: 140vh;
  position: absolute;
  left:0;
  top:0;
  z-index: -1;
}
#keyvisual .cont{
  position: absolute;
  bottom:0%;
  left:0;
  display:flex;
  align-items: center;
  flex-wrap: wrap;
  z-index: 80;
}
#keyvisual .cont h2{
  width:100%;
  text-align: center;
  transform: translate(0%,15%);
  z-index: 20;
  position: relative;
  top:30px;
}
#keyvisual .cont h2 img{
  width:clamp(200px,60vw,834px);
  margin-left:15%;
}

#keyvisual .cont .imgs{
  height:max(45vh,470px);
  width: 55%;
  /* aspect-ratio: 16/9 ; */
  z-index: 18;
}
#keyvisual .cont .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
#keyvisual .cont p.read{
  width:45%;
  padding:40px;
  font-weight: 500;
  font-size:clamp(14px,1.8vw,20px);
}
#keyvisual .illust00{
  position: absolute;
  right:0;
  top:0;
  width:30%;
}



#top_aboutus{
  position: relative;
}
#top_aboutus .illust01{
  width:65%;
  position: absolute;
  left:0;
  top:0;
}
#top_aboutus .illust02{
  width:10%;
  position: absolute;
  right:0;
  top:20%;
}
#top_aboutus .flex{
  display: flex;
  justify-content: space-between;
}
#top_aboutus .textarea{
  width:55%;
  order:2;
  padding:0 7% 0 6%;
}
#top_aboutus dl.text{
  margin-bottom: 70px;
}

#top_aboutus .photoarea{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width:45%;
  order:1;
}
#top_aboutus .photoarea .imgs01{
  width:100%;
}
#top_aboutus .photoarea .imgs02,
#top_aboutus .photoarea .imgs03{
  width:50%;
}
#top_aboutus .illust03 {
  position: absolute;
  bottom:0;
  left:0;
  width:50%;
}
#top_service{
  padding-top: max(12%,150px);
  padding-bottom: max(90px,18.3%);
  position: relative;
}
#top_service .top_title{
  text-align: center;
  margin-bottom: 6%;
}
#top_service .top_title .ja{
  margin:0 auto 15px;
}
#top_service .key{
  height: 560px;
  width:100%;
  position: relative;
  background:url(../../img/key_service.jpg) no-repeat center center fixed;
  background-size:cover;
  z-index: 6;
}

#top_service .textarea{
 display: flex;
 justify-content: space-between;
 margin:max(30px,5%) 0;
}
#top_service .textarea .row{
 width:47.5%;
 position: relative;
 padding:max(30px,5%) 0 ;
}
#top_service .textarea .row:first-child{
  border-right:1px solid black;
}
#top_service .textarea .row .next_btn{
  position: absolute;
  right:min(40px,8%);
  top:50%;
  transform:translate(0,-50%);
  width:min(7vw,70px);
  height:min(7vw,70px);
}
#top_service .textarea dl dd{
  padding-right:120px;
}
#top_service .photoarea{
  width:90%;
  display: grid;
  grid-template-columns: 45% 55%;
  grid-template-rows: 50% 50%;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  z-index: 3;
  position: relative;
}
#top_service .photoarea .imgs01 { grid-area: 1 / 1 / 2 / 2; }
#top_service .photoarea .imgs02 { grid-area: 1 / 2 / 3 / 3; }
#top_service .photoarea .imgs03 { grid-area: 2 / 1 / 3 / 2; }
#top_service .photoarea .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
#top_service .illust_area01{
  width:max(200px,24%);
  position: absolute;
  top:20px;
  right:0;
  text-align: center;
  transform:translate(0,-100%);
  z-index: 5;
}
#top_service .illust_area01 .illust04{
  width:40%;
  margin:auto;
}
#top_service .illust06{
  position: absolute;
  right:0;
  top:0;
  transform: translate(70%,-70%);
  width:min(15%,177px);
}
#top_service .illust07{
  position: absolute;
  right:0;
  bottom:0;
  margin-left:4%;
  z-index: 2;
}

.results_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  margin:8% auto;
}
.results_list .elem {
  width:25%;
  aspect-ratio: 1/1;
  padding:1.8%;
  container-name: results_list_elem;
  container-type: inline-size;
}
.results_list .elem .circle{
  width:100%;
  height: 100%;
  background:url(../img/data_bg.png) no-repeat center center;
  background-size:contain;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-wrap:wrap;
  border-radius:50%;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}

.results_list .elem .name{
  font-weight: 700;
  text-align: center;
  font-size:clamp(15px,2.3vw,24px);
  width: 100%;
}
.results_list .elem .data_num{
  position: relative;
}
.results_list .elem .data_num:after{
  content:"件";
  font-size:clamp(15px,2.3vw,24px);
  font-weight: 700;
}
.results_list .elem .data_num .num{
  font-size:clamp(30px,7.7vw,80px);
  font-family: 'd-din_condenseddinCnBd';
  line-height: 1;
  color:var(--mainColor);
}

.works_list{
  width:calc(100% - min(80px,10vw) );
}
.list_slider{
  position: relative;
  margin-right: calc(min(80px , 10vw) + 2px) ;
}
.list_slider .controler{
  background:red;
  position: absolute;
  right:0;
  top:0;
  height: 100%;
  width: calc(min(80px , 10vw) + 8px);
  border:1px solid black;
  background:white;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  transform: translateX(calc(100% - 2px ));
}
.list_slider .controler [class*="button-"]{
  width:100%;
  height: 40px;
  text-align: center;
  margin:20px 0;
  cursor:pointer;
}
.list_slider .controler [class*="button-"] i{
  width: 1.5em;
  height: 1.5em;
}
.list_slider .swiper-slide {
  border:1px solid black;
  background-color: #fff;
  height: 100%;
}
.list_slider .swiper-slide .thumbs{
  width:100%;
  height: 60%;
  overflow: hidden;
}
.list_slider .swiper-slide .thumbs img{
  width:100%;
  height:100%;
  object-fit: cover;
}
.list_slider .swiper-slide .text{
  background:white;
  padding:5% 10%;
}
.list_slider .swiper-slide .text p{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  height:4em;
}

.list_slider .swiper-slide a{
  color:inherit;
}

.list_slider .swiper-slide .text .date{
  font-weight: 400;
  text-align: center;
  margin-top:10%;
}
/*///////////////////////////////
   contents second
////////////////////////////////*/
/*-------- header -----------*/

  header.second #header {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:var(--pcheaderHight);
    z-index: 999;
    background:white;
  }
  header.second #header .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 1024px;
    height: 100%;
  }
  header.second #header .header h1 a{
    display: flex;
    justify-content: center;
    align-items: center;
    padding:0px 0 0 50px;
  }
  header.second #header .header h1 svg#logo{
    width:clamp(150px,17vw,206px);
  }

  header.second #globalmenu ul {
    display: flex;
  }
  header.second #globalmenu ul li a{
    display: block;
    color:inherit;
    font-weight: 700;
    padding:1em clamp(20px,1.9vw,35px);
    position: relative;
    text-align: center;
    font-size:16px;
  }
  header.second #globalmenu ul li a span.en{
    display: none;
  }
  header.second #globalmenu ul li a:after{
    content:"";
    width:0%;
    height: 1px;
    background:var(--subColor2);
    position: absolute;
    bottom:0px;
    left:50%;
    z-index: 4;
    transform:translate(-50%,0);
    transition:.3s all ease;
  }
  header.second #globalmenu ul li a:hover:after{
    width:100%;
  }

/* keyvisual */
#keyvisual-second{
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
#keyvisual-second .cont{
  width:min(100%,1300px);
  margin:auto;
  padding:60px 30px;
}
#keyvisual-second h2 .ja{
  display: block;
  color:white;
  line-height: 1.4;
  font-weight: 500;
  font-size:clamp(14px,2vw,22px);
  letter-spacing: 0.5em;
  background:var(--subColor2);
  width:max-content;
  padding: 5px 1em 8px 1.5em;
}
#keyvisual-second h2 .en{
  text-align:left;
  font-size:clamp(30px,8vw,89px);
  font-family: 'Be Vietnam Pro', sans-serif;
  color:#1F5400;
}
#keyvisual-second .photoimage{
  position: relative;
  width:100%;
  height: 50vh;
}
#keyvisual-second .photoimage .imgs{
  position: relative;
  width:100%;
  height: 100%;
  z-index: 30;
}
#keyvisual-second .photoimage .imgs img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#keyvisual-second .photoimage .key_text{
  width:auto;
  background:white;
  border-radius: 0 0 30px 0;
  position: absolute;
  top: 0;
  left:0;
  padding:0 min(60px,10%) min(40px,5%) 10%;
  z-index: 32;
}

/*------------- result ---------------------------*/
#result {
  position: relative;
  padding-top:0%;
  margin-top:-7em;
}
#result .inner{
  padding:0;
}
#result .results_list{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  z-index: 60;
  position: relative;
}
.result_detail{
  margin:0 0 5% 0;
}
.result_detail .photoarea{
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 25% 25%;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  position: relative;
  z-index: 7;
}
.result_detail .photoarea .illust08{
  position: absolute;
  right:4%;
  top:1%;
  transform:translate(0,-100%);
}
.result_detail .photoarea [class*="imgs"]{
  overflow: hidden;
}
.result_detail .photoarea [class*="imgs"] img{
  width:100%;
  height: 100%;
  object-fit: cover;
}
.result_detail .photoarea [class*="imgs"] a{
  display: block;
  width:100%;
  height:100%;
}
.result_detail .photoarea .imgs01 { grid-area: 1 / 1 / 2 / 3; }
.result_detail .photoarea .imgs02 { grid-area: 2 / 1 / 3 / 2; }
.result_detail .photoarea .imgs03 { grid-area: 2 / 2 / 3 / 3; }
.result_detail .photoarea .imgs04 { grid-area: 3 / 1 / 4 / 2; }
.result_detail .photoarea .imgs05 { grid-area: 3 / 2 / 4 / 3; }

.result_detail .result_data{
  position: relative;
  padding:5rem 5rem 10rem ;
  width:max-content;
  transform:translate( -5rem , 5rem );
}
.result_detail .result_data:after{
  content:"";
  display: block;
  width:max-content;
  background:var(--bgColor2);
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  z-index: 4;
}

.result_detail .result_data .wrap{
  border-left:4px solid var(--subColor);
  padding-left:40px;
  width:max-content;
  position: relative;
  z-index: 5;

}
.result_detail .result_data .type{
  font-size:1.1em;
}
.result_detail .result_data .date{
  color:white;
  background:var(--subColor2);
  padding:.3em 2em;
  margin:1em 0;
  text-align: center;
  width:max-content;
}
.result_detail .result_data .name{
  font-size:clamp(18px,3vw,32px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--mainColor);
}
/*------------- air condition -----------*/
#air {

  position: relative;
  z-index: 31;
  margin-bottom: 0;
}
#air:after {
  content:"";
  display: block;
  width:100%;
  height: 45%;
  background:#DCF26D;
  position: absolute;
  bottom:0;
  left:0;
  z-index: 32;
}
#air .inner{
  position: relative;
  z-index: 35;
}
#air .content_header .kazarimoji{
  margin:0 0 -1em 0;
  text-align: center;
}
#air .content_header h3{
  text-align: center;
  font-size:clamp(20px,2.7vw,28px);
  letter-spacing: 0.1em;
  position: relative;
  z-index: 7;
  margin-bottom: min(60px,10%);
}
#air .content_header h3 .large{
  font-size:1.2em;
}
#air .read{
  text-align: center;
  margin:min(40px,4%) auto;
  line-height: 2.5;
}
#air .photoarea{
  position: relative;
  width:100%;
  margin:min(100px,10%) 0;
  padding-top:60%;
}
#air .photoarea .imgs02{
  width:53%;
  position: absolute;
  bottom:0;
  left:0;
}
#air .photoarea .imgs01{
  width:40%;
  position: absolute;
  right:0;
  top:0;
}
#air .illustarea {
  position: absolute;
  bottom:0;
  right:0;
  width:70%;
  z-index: 34;
  text-align: right;
}
#air .illustarea  .illust09{
  position: absolute;
  top:0;
  right:10%;
  transform:translate(0,-50%);
  width:min(130px,23%);
}
#constraction.second{
  background:var(--bgColor2);
  padding:min(170px,17%) 0;
  margin:min(80px,8%) 0 0 0;
}
.conform_maker{
  background:white;
}
.conform_maker h3{
  text-align: center;
  border-bottom:1px solid #CFCFCF;
  padding:min(60px,10%);
  margin-bottom: min(40px,8%);
}

.maker_logo{
  max-width: 1000px;
  margin:auto;
}
.maker_logo ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.maker_logo ul li{
  width:25%;
  margin:3%;
}
#interior{
  position: relative;
}
#interior .moji02{
  position: absolute;
  left:0;
  top:0;
  width:min(940px,60%);
}
#interior .interior_contents{
  position: relative;
  width:100%;
  padding-top:70%;
  margin:min(280px,28%) 0;
}
#interior .interior_contents .textarea {
  position: absolute;
  left:0;
  bottom:0;
  width:min(53%,560px);
  z-index: 40;
}
#interior .interior_contents .photoarea {
  position: absolute;
  right:0;
  top:0;
  width:min(63%,810px);
}
#interior .interior_contents .textarea .textbox{
  border:3px solid var(--subColor);
  background:white;
  padding:  min(100px,8%) min(100px,5%) ;
  position: relative;
}
#interior .interior_contents .textarea .textbox .archive_num{
  font-size:clamp(18px,3vw,37px);
  color:#B1B1B1;
  text-align: center;
  font-family: 'Be Vietnam Pro', sans-serif;
  margin-bottom: 2rem;
  letter-spacing: 0.025em;
}
#interior .interior_contents .textarea .textbox h3{
  font-size:clamp(16px,2.2vw,23px);
  text-align: center;
  margin-bottom: 2rem;
  color:var(--subColor);
}
#interior .interior_contents .textarea .textbox p{
  text-align: center;
  line-height: 2.3;
  margin-bottom: 1.5rem;
}
#interior .interior_contents .textarea .textbox .illust12{
  position: absolute;
  right:0;
  bottom:0;
  transform:translate(100%,0);
  width:min(120px,18%);
}
#interior .interior_contents:nth-child(2n) .photoarea{
  position: absolute;
  right:auto;
  left:0;
  top:auto;
  bottom:0;
}
#interior .interior_contents:nth-child(2n) .textarea{
  position: absolute;
  left:auto;
  right:0;
  top:0;
}

#company .illust11{
  width:min(1700px,93%);
  height:clamp(80px,13vw,153px) ;
  margin:0 0 0 auto;
}
#company .illust11 div{
  width:100%;
  height: 100%;
  overflow: hidden;
}
#company .illust11 div img{
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: left;

}
#company .company_contents {
  display: flex;
  margin:min(70px,10%) 5%;
}
#company .company_contents .company_header{
  flex: 0 0 min(35%,400px);
  padding:0 15% 0 0;
}
#company .company_contents .company_header .logo{
  margin-bottom: 1.5em;
}
#company .company_contents .company_outline{
  flex: 0 0 60%;
  margin-bottom: min(70px,10%) ;
}
#company .company_contents .company_outline table{
  border-collapse: collapse;
  width:100%;
}
#company .company_contents .company_outline table tr th,
#company .company_contents .company_outline table tr td{
  border-bottom:1px solid #CFCFCF;
  padding:3em 1.5em;
  text-align: left;
  font-weight: 400;
}
/*------------- simulation style -----------------*/

  #simulation .formarea {
    font-size:clamp(13px,1.5vw,15px);
    border:4px solid #CBCDC2;
    padding:min(40px,5%);
    width:min(95%,1100px);
    margin:30px auto;
    box-shadow: 0 3px 6px rgba(0,0,0,.2);
  }
 .formarea .question{
    background:#E5E6DF;
    border-radius:20px;
    position: relative;
  }
  #simulation .formarea .question{
    padding:60px 30px 30px;
    margin:clamp(30px,13%,60px) 0 0 0;
  }
 .formarea .question:first-child{
    margin-top:30px;
  }
  #simulation .formarea .question h3{
    color:white;
    font-weight: 400;
    text-align: center;
    padding:.8em 1em;
    border-radius:100px;
    background:var(--mainColor);
    width:min(80%,512px);
    position: absolute;
    top:0;
    left:50%;
    transform: translate(-50%,-50%);
  }
  #simulation .formarea .question ul{
    width:min(100%,900px);
    margin:auto;
  }
  #simulation .formarea .question ul li {
    margin:.5em 0;
  }
  #simulation .formarea .question .tubo{
    text-align:center;
    padding:20px 0;
  }
  #simulation .formarea .question .tubo input{
    height: 50px;
  }

  #simulation.simulation-result .formarea .question{
    text-align: center;
    padding:30px;
  }
  #simulation.simulation-result .formarea .data{
    font-size:clamp(18px,2.6vw,28px);
  }
  #simulation.simulation-result .formarea .data .num{
    font-family:'Be Vietnam Pro', sans-serif;
    font-size:1.3em;
  }
  #simulation.simulation-result .formarea .result {
    position: relative;
    text-align: center;
    font-size:clamp(18px,2.6vw,28px);
    padding:30px;
    width:min(90%,500px);
    margin:30px auto;
  }
  #simulation.simulation-result .formarea .result:before {
    content:"";
    border:1px solid var(--subColor);
    border-right:0;
    height: 100%;
    width:30px;
    position: absolute;
    left:0;
    top:50%;
    transform:translate(0,-50%);
  }
  #simulation.simulation-result .formarea .result:after {
    content:"";
    border:1px solid var(--subColor);
    border-left:0;
    height: 100%;
    width:30px;
    position: absolute;
    right:0;
    top:50%;
    transform:translate(0,-50%);
  }
  #simulation.simulation-result .formarea .result .num{
    color:var(--subColor);
  }
  #simulation .arrow{
    text-align: center;
    width:min(5.2vw,34px);
    margin:auto;
  }
  #simulation .btnarea{
    margin:min(60px, 8%) auto;
  }
  #simulation .formarea input.large{
    font-size:clamp(18px,2vw,20px);
  }
  #simulation .question .select{
    margin:3% auto  ;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap:2%;
    max-width: 950px;
  }
  #simulation .question:last-child .select{
    flex-wrap: nowrap;
  }
  #simulation .question .select input[type="number"]{
    text-align:center;
    font-size:1.5em;
  }
  #simulation .question .select label{
    cursor: pointer;
    background:white;
    padding:5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width:23%;
  }
  #simulation .question .select label.is_selection{
    background:var(--subColor);
    color:white;
    box-shadow: 0 2px 10px rgba(0,0,0,.3) ;
  }
  #simulation .question .select label img{
    display: block;
  }
  #simulation .selectSlider .swiper-slide{
  	flex-shrink: unset;
    width: auto;
  }
  #simulation .mask {
      pointer-events: none;
      max-width: auto;
      height: 200px;
      /* overflow-y: scroll; */
      overflow-y: hidden;
      -webkit-mask-image: linear-gradient(black, transparent);
      mask-image: linear-gradient (black, transparent);
      transition:1s all ease;
    }
      #simulation .hidden_area{
      display: none;
    }
    

  .simulation-result  h4 .en{
    font-size:1em;
    color:var(--subColor);
    font-weight: 400;
  }
  .simulation-result .result{
    margin:min(30px,6%) auto;
  }
  .simulation-result .result table{
    width:100%;
  }
  .simulation-result .result table thead tr th{
    background:var(--bgColor);
    padding:.8em 0;
    line-height: 1.4;
  }
  .simulation-result .result table thead tr th:first-child{
    background:transparent;
  }
  .simulation-result .result table tbody tr th,
  .simulation-result .result table tbody tr td{
    padding:1.5em 0;
    line-height: 1.4;
    border-bottom:1px solid #ccc;
    text-align: center;
  }

  .simulation-result .result table .num{
    font-size:clamp(17px,2vw,25px);
    color:var(--subColor);
  }
    .simulation-result .result table th.ti{
      width:7em;
    }
    .simulation-result .result table th.total{
      width:min(30vw,300px);
    }
    .simulation-result .result table td.total-half{
      width:calc(min(30vw,300px) / 2);
    }
  .simulation-result .result table thead.sp{
    display: none;
  }

 table.cost_info{
    width:min(700px,100%);
    margin:5% auto;
    border:1px solid #ccc;
  }
   table.cost_info caption{
    color:var(--mainColor);
    text-align: left;
    font-weight: 700;
    margin-bottom: .5em;
    font-size:1.1em;
  }

  table.cost_info thead tr th{
    background:var(--mainColor);
    padding:.8em 0;
    line-height: 1.4;
    color:white;
  }
  table.cost_info thead tr th:nth-child(2){
    width:90px;
  }
  table.cost_info tbody tr th,
  table.cost_info tbody tr td{
    padding:1em 0;
    line-height: 1.4;
    border-bottom:1px solid #ccc;
    text-align: center;
  }
    table.cost_info tbody tr:last-child th,
  table.cost_info tbody tr:last-child td{
    border-bottom: 0;
  }

  /*--------- contact --------------*/
  #contact {
    margin-bottom:min(100px,10%) ;
  }
  #contact .formarea{
    max-width: 1200px;
    border-radius:20px;
    padding:min(30px,6%);
    margin:min(30px,6%) auto;
    box-shadow:0 0 3px 6px rgba(0,0,0,.05);
  }

  #contact .formarea .question{
    padding:30px;

  }
  #contact .formarea .private_area{
    border:3px solid #CBCDC2;
    border-radius:20px;
    padding:20px;
    width:auto;
    margin:15px 0px 3em 25%;
  }
  #contact .formarea .private_area dl{
    margin:0;
  }
  #contact .formarea .private_area dl dt{
    font-weight: 400;
  }
  #contact .formarea dl{
    padding:0;
  }
  #contact .formarea dl dt{
    width:25%;
    padding:1em;
    font-size:1.1rem;
    font-weight: 700;
  }
  #contact .formarea dl dd{
    width:75%;
  }
  #contact.confirm .formarea dl dt{
    padding:0 1em 0;
  }
#thanks,
#mail_error{
  height: max(500px,50vh);
  position: relative;
}
#thanks .inner,
#mail_error .inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  text-align: center;
}
#thanks h2,
#mail_error h2{
  margin-bottom: 30px;
}
#thanks .btn,
#mail_error .btn{
  margin:50px auto;
}
#thanks .btn a,
#mail_error .btn a{
  color:white;
}
#thanks p,
#mail_error p{
  text-align: center;
}

/*/////////////// btmArea /////////////*/

.btm_link{
  display: flex;
  height: 440px;
}
.btm_link .elem{
  width:50%;
}
.btm_link .elem a{
  width:100%;
  height: 100%;
  display:block;
  position: relative;
}
.btm_link .elem a:before{
  content:"";
  width:100%;
  height: 100%;
  background:rgba(56,80,0,.55);
  position: absolute;
  left:0;
  top:0;
  z-index: 9;
  mix-blend-mode: multiply;
}
.btm_link .elem .cont{
  position: absolute;
  top:50%;
  left:50%;
  z-index: 10;
  color:white;
  padding: 0 19% 0 8%;
  transform:translate(-50%,-50%);
  width:min(95%,700px);
}

.btm_link .elem .cont .ja{
  display: block;
  font-size:18px;
}
.btm_link .elem .cont .en{
  display: block;
  font-size:clamp(40px,5.8vw,70px);
  font-family: 'Be Vietnam Pro', sans-serif;
  line-height: 1.3;
}
.btm_link .elem .cont .next_btn{
  position: absolute;
  right:0;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(7vw,70px);
  height:min(7vw,70px);
}
.btm_link .elem a .bg{
  position: relative;
  width:100%;
  height: 100%;
  z-index: 8;
  overflow: hidden;
}
.btm_link .elem a .bg img{
  object-fit: cover;
  width:100%;
  height: 100%;
}
.btm_link .elem a:hover .bg img{
  transform:scale(1.06);
}

/*////////// footer /////////////*/
#footer{
 text-align: center;
 background:#7FB11A;
 color:white;
 padding:80px 0 0 0;
}
#footer p{
  text-align: center;
}
#footer .inner{
  display: flex;
  justify-content: space-between;
}
#footer .co-info{
  padding:80px 0 0;
  text-align: left;
}
#footer .footerlink ul li{
  text-align: left;
  font-weight: 500;
  margin:1.1em 0;
  font-size:clamp(13px,1.6vw,18px);
}
#footer .footerlink a{
  display: block;
  width:max-content;
  color:inherit;
  position: relative;
  padding:5px 0;
}
#footer .footerlink a:after{
  content:"";
  width:0%;
  height: 1px;
  background:white;
  position: absolute;
  bottom:0px;
  left:0%;
  z-index: 4;
  transition:.3s all ease;
}
#footer .footerlink a:hover:after{
  width:100%;
}
#footer .co-address{
  text-align: left;
  font-size:clamp(13px,1.4vw,16px);
  line-height: 2.1;
}
#footer .btmlogo img{
  width:clamp(160px,30vw,310px);
  margin-bottom: 15px;
}
#footer .copyrignt{
  padding:30px ;
  width:var(--innerWidth);
  margin:auto;
}
#footer .copyrignt p{
  font-size:clamp(10px,1.3vw,13px);
  text-align: left;
  letter-spacing: .1em;
}
.gototop {
  position: fixed;
  width:80px;
  height: 80px;
  bottom:0;
  right:30px;
  z-index: 100;
  cursor: pointer;
}
.gototop .upbar{
  display: block;
  background:#CDD98F;
  width:8px;
  height:100%;
  position: relative;
  margin:auto;
}
.gototop .upbar:after{
  content:"";
  width:100%;
  height: 75%;
  background:var(--mainColor);
  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: var(--mainColor);
  transform: rotate(90deg);
  position: absolute;
  top: 0;
  left: 0;
  text-align: left;
  width: 100%;
  height: 100%;
}

/*------------- privacy -------------*/

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