html {font-size: 625%;}

/*リセット*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
}

body {
	font-family: aktiv-grotesk,'Noto Sans JP',游ゴシック,'Yu Gothic',游ゴシック体,YuGothic,'ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN',メイリオ,Meiryo,sans-serif;
	font-size: .16rem;
	font-size: 16px;
	font-feature-settings: 'palt';
	color:#333;
	background: #f1efeb;
	letter-spacing: .014rem;
	box-sizing: border-box;
  font-weight: normal;
  padding: 0 2%;
  line-height: 1;
}

/*共通*/
ol
,ul {
	list-style: none;
}
a{
	text-decoration: none;
	cursor: pointer;
	color: #fff;
}
#container{
	overflow: hidden;
  max-width: 1200px;
  margin: 0 auto;
}
.container{
  resize: horizontal;
}
section{
  margin-bottom: 1rem;
}
.wrap{
	max-width: 1050px;
	width: 96%;
	margin: 0 auto;
}
.center{
  text-align: center;
}
.flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.nav.flex{
  align-items: center;
  min-height: 50px;
}
.flex img{
  max-width: 100%;
  border-radius: 5px;
  filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
}
.bg_white{
  background: #fff;
  padding: 1rem 0;
  border-radius: 5px;
}
.bg_pink{
  background: #f39800;
  color: #fff;
}
.bg_light_gray{
  background: #dbdbdb;
  padding: .5rem;
}

/*font*/
h1
,h2{
  font-weight: inherit;
}
.min{
  font-family: YuMincho, 'Yu Mincho';
  font-size: clamp(.24rem, 4vw, .36rem);
}
/*button*/
.button{
  display: block;
  width: 200px;
  height: 50px;
  border: 1px solid #4d4d4d;
  border-radius: 30px;
  /* position: relative; */
  overflow: hidden;
  z-index: 1;
  transition: 0.6s;
  color: #4d4d4d;
  text-align: center;
}
.button span{
  /* position: absolute;
  width: fit-content;
  height: fit-content;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; */
  margin: 18px auto;
  display: block;
}
.button:hover{
  color: #ffffff;
  background: #4d4d4d;
  outline: 1px solid #4d4d4d;
  color: #f1efeb;
}
.button::before{
  content: "";
  position: absolute;
  left: -50px;
  top: 0;
  width: 0;
  height: 100%;
  background-color: #4d4d4d;
  transform: skewX(45deg);
  z-index: -1;
  transition: width 1000ms;
}
.button:hover::before{
  /* width: 250%; */
}
.center_button{
  margin: 0 auto;
}
.bg_darkgray .button{
  color: #fff;
  border-color: #fff;
}
.bg_darkgray .button span{
  color: inherit;
}
.bg_darkgray .button:hover{
  border-color: #fff;
  color: #4d4d4d;
  background: #fff;
}

.circle_button{
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: #f39800;
  border: 2px solid #fff;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  margin: 10px 0;
  transition-duration: .9s;
}
.arrow{
	position: relative;
	padding: 0 0 0 16px;
}
.arrow::before
,.arrow::after{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	content: "";
	vertical-align: middle;
  transition-duration: .9s;
}
.arrow_border::before{
	left: -3px;
	width: 20px;
	height: 2px;
	background: #fff;
}
.arrow_border::after{
  left: 5px;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.common .flex:hover .circle_button{
  background: #fff;
}
.common .flex:hover .arrow_border::after{
  border-color: #f39800;
}
.common .flex:hover .arrow::before{
  background: #f39800;
}

.contact_button{
  background: #f39800;
  color: #fff;
  padding: .1rem;
  border-radius: 4px;
  line-height: .3rem;
  font-size: .14rem;
}

.home_area .circle_button{
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: #f1efeb;
  border: 1px solid #808080;
  color: #FFF;
  text-decoration: none;
  text-align: center;
  margin: 0;
  transition-duration: .9s;
}
.home_area .arrow_border::before{
  background: #808080;
  height: 1px;
  width: 11px;
  left: 2px;
}
.home_area .arrow_border::after{
  border-right: 1px solid #808080;
  border-top: 1px solid #808080;
  width: 5px;
  height: 5px;
  left: 7px;
}
.home_area .circle_button:hover{
  background: #808080;
}
.home_area .circle_button:hover ::before{
  background: #fff;
}
.home_area .circle_button:hover ::after{
  border-color: #fff;
}

/*header*/
.hamburger
,.globalMenuSp{
  display: none;
}
header{
  padding: .3rem 0 0;
}
.flex .logo_area{
  width: 30%;
}
.logo{
  width: 100%;
}
.upper .flex{
  align-items: center;
}
.upper{
  margin-bottom: .3rem;
}
.upper .flex:nth-child(2) div{
  margin-right: 30px;
}
.lower{
  background: #dbdbdb;
  min-width: 70px;
  min-height: 50px;
  border-radius: 5px;
}
header .nav{
  color: inherit;
}
header .nav a{
  color: inherit;
}
.nav li:hover{
  color: #f1efeb;
  transition: .6s;
}
.nav li a {
  color:#333;
}
.nav li a::after {
  /*アンダーラインのスタイル*/
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color: #0DC600;
  bottom: -15px;
  left: 0;
  -webkit-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: center top;
  transform-origin: center top;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav li a:hover::after {
  transform: scale(1, 1);
}

/*footer*/
footer .logo{
  width: 100%;
  margin-bottom: .2rem;
}
footer
,footer a{
  color: #808080;
}
footer .logo_area a{
  width: 30%;
}
footer .tel{
  display: block;
}
footer .flex{
  margin-bottom: .5rem;
}
footer .flex span{
  line-height: initial;
  margin-bottom: 0.05rem;
  display: block;
}
footer ul.flex{
  width: 40%;
  flex-wrap: wrap;
  margin-bottom: 0;
}
footer ul li{
  width: 40%;
  margin-bottom: .2rem;
}
footer .copy{
  display: block;
  text-align: center;
  margin-bottom: .3rem;
}
/*common*/
.common{
  padding: 1rem 0;
  border-radius: 5px;
}
.marquee {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(2.4vw, 1.4rem, 14vw);
  font-weight: bold;
  opacity: .2;
  margin-bottom: .3rem;
}
.common .flex{
  width: fit-content;
  align-items: center;
  margin-left: auto;
}
.common span{
  font-size: clamp(.2rem, 3.125vw, .5rem);
  margin-right: 20px;
}

/*experience*/
.experience{
  padding: 1rem 0;
  margin-bottom: 0;
  color: #fff;
  position: relative;
  border-radius: 5px 5px 0 0;
}
.experience:before {
  content: '';
  background: url("../images/experience.webp") center center /cover no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(3px) brightness(0.85);
  z-index: -1;
}
.experience .wrap{
  width: 70%;
}
.experience h2{
  margin-bottom: .5rem;
}
.experience p{
  line-height: .3rem;
  margin-bottom: .3rem;
}
.experience h3{
  padding: .2rem;
  background: #f39800;
  width: fit-content;
  margin: 0 auto .3rem;
  border-radius: 8px;
}
.experience .button{
  background: #fff;
  border-color: #fff;
}
.experience .button:hover{
  color: #4d4d4d;
}
.experience .button::before{
  left: -300px;
}


/*index*/
.top_main{
  height: 70vh;
  position: relative;
  overflow: hidden;
}
.top_main .slide{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.top_main .slide.active{
  opacity: 1;
}
.top_main .slide:nth-child(1){
  background-image: url("../images/main_st.jpg");
  border-radius: 0 0 5px 5px;
  filter:drop-shadow(1px 1px 3px rgba(0,0,0,0.2));
}
@media screen and (max-width: 767px) {
  .top_main .slide:nth-child(1){
    background-image: url("../images/main_st_sp.webp");
  }
}
.top_main .slide:nth-child(3){
  background-image: url("../images/no-image.png");
}
.top_main .slide-indicators{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.top_main .slide-indicators span{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.3s;
}
.top_main .slide-indicators span.active{
  background: #f39800;
}
.title{
  margin-bottom: .5rem;
}
.title h1{
  font-size: clamp(.24rem, 3.125vw, .5rem);
  letter-spacing: .04rem;
  margin-bottom: .1rem;
}
.concept_area img{
  width: 50%;
  height: fit-content;
}
.concept_area .flex div{
  width:45%;
  margin-left: 5%;
}
.concept_area .flex h1{
  margin-bottom: .5rem;
  line-height: .64rem;
}
.concept_area .flex p{
  line-height: .4rem;
  margin-bottom: .5rem;
}
.bg_darkgray{
  background: #4d4d4d;
  color: #fff;
  padding: 1rem 0;
  margin-bottom: 0;
  border-radius: 5px;
}
.bg_darkgray .flex div{
  width: 24%;
  margin-bottom: .5rem;
}
.bg_darkgray img{
  padding: .1rem;
  width: 100%;
  border-radius: 15px;
}
.bg_darkgray p{
  line-height: .24rem;    
}
.bg_white .flex{
  margin-bottom: .5rem;
}
.bg_white .flex li p{
  font-weight: bold;
  text-align: center;
  letter-spacing: 0;
  width: 80%;
  margin: 0 auto;
  line-height: normal;
}
.bg_white .flex li img{
  width: 50%;
  display: block;
  margin: 0 auto .3rem;
}
.flow_img{
  margin-bottom: .5rem;
}
.sp_img{
  display: none;
}
.top_about .flex li{
  width:25%;
}

/*about*/
.sub_main{
  background: #f39800;
  color: #fff;
  padding: 1rem 0;
  position: relative;
  border-radius: 5px;
}
.sub_main h2{
  font-size: clamp(0.2rem, 2.5vw, 0.4rem);
  position: absolute;
  width: fit-content;
  height: fit-content;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}
#about .concept_area .flex p{
  width: 45%;
}
#order .concept_area .flex p{
  width: 45%;
}
.concept_area .min{
  margin-bottom: .5rem;
}
.support .flex{
  align-items: center;
}
.support_area .flex div{
  border-bottom: 1px solid #ccc;
}
.support_img{
  width: 30%;
  text-align: center;
}
.support_img h1{
  margin-bottom: .3rem;
}
.support_img img{
  width: 20%
}
.support .text_area{
  width: 70%;
}
.support .border{
  border-bottom: 1px solid #ccc;
  padding: .5rem 0;
  width: 90%;
  margin: 0 auto;
}
.text_area h1{
  margin-bottom: .3rem;
}
.text_area p{
  line-height: .24rem;
}

/*home*/
.home_area h3{
  font-size: clamp(.18rem, 2vw, .2rem);
  margin-bottom: .5rem;
  text-align: center;
}
.frame_list.flex{
  flex-wrap: wrap;
}
.frame_list .box{
  width: 30%;
  margin-bottom: .5rem;
}
.home_area .flex div span{
  display: block;
}
.home_area .flex div span:nth-child(1){
  font-size: .14rem;
  margin-bottom: .1rem;
}
.home_area .flex div span:nth-child(2){
  font-size: .18rem;
}
.box img{
  margin-bottom: .1rem;
}
.box .flex{
  align-items: flex-end;
  padding: 0 .1rem;
}

/*home_detail*/
.tag{
  width: fit-content;
  margin-bottom: .2rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.tag li{
  background: #808080;
  padding: .04rem .1rem;
  border-radius: 4px;
  margin-right: 4px;
}
.room_detail .box{
  width: 32%;
  margin-bottom: .5rem;
}
.room_detail .box img{
  width: 100%;
}
.room_detail.flex{
  flex-wrap: wrap;
}
dl div{
  border-bottom: 1px solid #808080;
  padding: .5rem .3rem .1rem;
}
dl div:first-child{
  padding-top: 0;
}
dl div:last-of-type{
  margin-bottom: .3rem;
}
dt{
  flex-basis: 40%;
}
dd{
  flex-basis: 59%;
}
#home_detail .bg_white{
  padding: .5rem;
  line-height: normal;
}
#home_detail .bg_white .flex{
  margin-bottom: 0;
}
iframe{
  width: 100%;
}

/*flow*/
.flow_area h1{
  border-bottom: 1px solid #808080;
  padding: .2rem;
}
.flow_area p
,.flow_area a{
  padding: .2rem;
  line-height: normal;
}
.flow_area a{
  padding: .1rem;
  font-weight: bold;
  color: #fff;
  background: #f39800;
  border-color: #f39800;
  border-radius: 20px;
  transition: 0.6s;
}
.flow_area a:hover{
  background: #f1efeb;
  color: #f39800;
  border: 1px solid #f39800;
}
.flow_area p + div{
  padding-left: .2rem;
}
.flow_area .flex div{
  width: 54%;
}
.flow_area .flex{
  margin-bottom: .5rem;
  align-items: center;
}
.flow_area p span{
  font-size: .14rem;
  font-weight: bold;
  display: block;
}

/*faq*/
.qa_frame .box{
  border-bottom: 1px solid #808080;
  margin-bottom: .3rem;
}
.qa_frame .box img{
  width: 4%;
  margin-bottom: 0;
}
.qa_frame .box .flex{
  width: 80%;
  margin: 0 auto .3rem;
  justify-content: flex-start;
  align-items: center;
}
.qa_frame h3
,.qa_frame p{
  margin-left: 20px;
  max-width: 90%;
}

/*contact*/
.form_area .text{
  margin-bottom: .5rem;
}
.form_area a{
  color: inherit;
  font-size: .2rem;
  display: block;
  padding: .1rem 0;
}
form.bg_white{
  padding: .5rem;
}
form div{
  border-bottom: 1px solid #808080;
}
form .half{
  border-bottom: none;
  margin-bottom: .5rem;
}
form p{
  margin-bottom: .1rem;
  margin-bottom: 0.14rem;
  background: #dbdbdb;
  padding: 0.1rem;
  width: fit-content;
  border-radius: 4px;
}
.half label{
  margin-right: 20px;
  width: 30%;
  cursor: pointer;

}
.hissu{
  color: #f00;
  font-size: .14rem;
  margin-left: .1rem;
}
form .contents{
  padding: .5rem;
}
.contents.flex{
  margin-bottom: 0;
}
input[type="checkbox"]:checked {
}

input[type="text"]
,input[type="email"]
,input[type="tel"]
,textarea{
  width: calc(70% - .2rem);
  padding: .2rem .1rem;
}
.contents textarea{
  width: calc(100% - .2rem);
  padding: .2rem .1rem;
}

.button_area{
  border-bottom: none;
  margin-top: .5rem;
}
.button_area button{
  margin: 0 auto;
}
/*order*/
#order .concept_area img{
  width: 100%;
  height: fit-content;
}

@media screen and (max-width: 767px) {
  /*header*/
  header{
    padding: .2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background: #f1efeb;
    width: 100%;
    z-index:2; 
  }
  header .nav
  ,.upper .flex .flex{
    display: none;
  }
  .hamburger
  ,.globalMenuSp{
    display: block;
  }
  .lower {
    background: none;
  }
  .upper{
    margin-bottom: 0;
  }
  header .logo{
    width: 100%;
    max-width: 150px;
  }
  .flex .logo_area{
    width: 100%;
  }
  	/*hamburger*/
	.hamburger {
		display : block;
		position: fixed;
		z-index : 105;
		right : 13px;
		top   : 40px;
		width : 40px;
		height: 12px;
		cursor: pointer;
		text-align: center;
	  }
	  .hamburger span {
		display : block;
		position: absolute;
		width   : 100%;
		height  : 2px ;
		background : #4d4d4d;
		-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: 0px;
	  }
	  .hamburger span:nth-child(2) {
      bottom: 0;
      width: 60%;
	  }

	  
	  /* ナビ開いてる時のボタン */
    .hamburger.active span{
      width: 60%;
    }
	  .hamburger.active span:nth-child(1) {
		top : 20px;
		left: 0;
		-webkit-transform: rotate(-45deg);
		-moz-transform   : rotate(-45deg);
		transform        : rotate(-45deg);
	  }
	  
	  .hamburger.active span:nth-child(2){
		top: 20px;
		-webkit-transform: rotate(45deg);
		-moz-transform   : rotate(45deg);
		transform        : rotate(45deg);
	  }
	  #sub_page .hamburger.active span:nth-child(2) {
		display: none;
	  }
	  #sub_page .hamburger.active span:nth-child(1){
		top: 24px;
	  }
	  .top_main .hamburger span{
		filter: none;
	  }
	  nav.globalMenuSp {
		position: fixed;
		z-index : 100;
		top  : 0;
		right : 0;
		color: #000;
		background: rgba(255, 255, 255, .96);
		text-align: center;
		transform: translateX(100%);
		transition: all 0.6s;
		width: 70%;
		padding: 5em 0;
		height: 100vh;
	  }
	  
	  nav.globalMenuSp ul {
		background: rgba(255, 255, 255, 0);
		margin: 0 auto;
		padding: 0;
		width: 80%;
    text-align: left;
    margin-bottom: .5rem;
	  }
	  
	  nav.globalMenuSp ul li {
		list-style-type: none;
		padding: 0;
		width: 100%;
		border-bottom: 1px solid #ccc;
	  }
	  nav.globalMenuSp ul li:hover{
		background :#ddd;
	  }
	  
	  nav.globalMenuSp ul li a {
		display: block;
		color: #000;
		padding: 1em 0;
		text-decoration :none;
	  }
    body.fixed {
      width: 100%;
      height: 100%;
      position: fixed;
      }	  
	  /* このクラスを、jQueryで付与・削除する */
	  nav.globalMenuSp.active {
		transform: translateX(0%);
	  }

    /*footer*/
    footer .flex ul.flex{
      display: none;
    }
    footer .logo_area{
      width: 100%;
    }
    footer .logo_area a{
      width: 60%;
    }
    /*experience*/
    .experience .wrap{
      width: 90%;
    }


    /*index*/
    .top_main{
      height: 100vh;
      margin-top: 100px;
    }
    section{
      margin-bottom: .6rem;
    }
    .title{
      margin-bottom: .3rem;
    }
    .concept_area .flex{
      flex-wrap: wrap;
    }
    .concept_area img{
      width: 100%;
      height: auto;
      margin-bottom: .3rem;
    }
    .concept_area .flex h1{
      line-height: .34rem;
      margin-bottom: .2rem;
    }
    .concept_area .button{
      margin: 0 auto;
    }
    .concept_area .flex div {
      width: 100%;
    }
    .bg_darkgray .flex
    ,.bg_white ul.flex{
      flex-direction: column;
    }
    .bg_darkgray .flex div
    ,.bg_white .flex li{
      width: 100%;
    }
    .bg_white .flex li{
      margin-bottom: .5rem;
    }
    .bg_white .flex li p{
      width: 90%;
      margin: 0 auto;
    }
    .bg_white .flex li img{
      width: 24%;
      margin-bottom: .2rem;
    }
    .bg_darkgray .flex div img{
      width: calc(100% - .2rem);
    }
    .sp_img{
      display: block;
      margin-bottom: .5rem;
    }
    .flow_img{
      display: none;
    }
    .bg_pink{
      padding: .5rem 0;
    }
    .flow_area .flex div{
      width: fit-content;
      margin-bottom: .2rem;
    }

    /*about*/
    .sub_main{
      margin-top: 130px;
      z-index: -1;
      padding: .6rem 0;
    }
    .concept_area .min{
      margin-bottom: .3rem;
    }
    #about .concept_area .flex p{
      width: 100%;
      margin-bottom: 0;
    }
    .support .flex{
      flex-direction: column;
      margin-bottom: 0;
    }
    .bg_white{
      padding: .5rem 0;
    }
    .support_img img{
      width: 70%;
      margin-bottom: .3rem;
    }
    .support .text_area{
      width: 100%;
    }
    .text_area h1{
      text-align: center;
      line-height: normal;
    }
    .support .border:first-child{
      padding-top: 0;
    }
    .support_img h1{
      margin-bottom: .1rem;
    }
    .frame_list.flex
    ,.flow_area .flex
    ,.contents.flex{
      flex-direction: column;
    }
    .frame_list .box{
      width: 100%;
    }
    .box img{
      width: 100%;
    }
    .flow_area .flex > div{
      width: 100%;
    }
    .flow_area a{
      display: block;
      text-align: center;
    }
    .qa_frame .box .flex{
      width: calc(100% - 20px);
    }
    .qa_frame .box img{
      width: 10%;
    }

    /*contact*/
    form.bg_white{
      padding: .3rem .1rem .5rem;
    }
    form .contents {
      padding: .3rem .1rem;
    }
    .half label{
      display: block;
      width: 100%;
    }
    input[type="text"]
    ,input[type="email"]
    ,input[type="tel"]
    ,textarea{
      width: calc(100% - .2rem);
    }
    form label{
      margin-bottom: .1rem;
    }

    /*home_detail*/
    .tag a{
      font-size: .12rem;
    }
    .tag li{
      margin-right: 2px;
      margin-bottom: .02rem;
    }
    .room_detail.flex
    ,.usage_detail .flex{
      flex-direction: column;
    }
    .room_detail .box{
      margin-bottom: .5rem;
      width: 100%;
    }
    #home_detail .price .bg_light_gray{
      padding: .5rem .14rem;
    }
    .price dl div{
      padding: .5rem .1rem .1rem;
      flex-direction: column;
    }
    .price dl div:first-child
    ,.usage_detail dl div:first-child{
      padding-top: 0;
    }
    .price dt
    ,.usage_detail dt{
      margin-bottom: .1rem;
      font-weight: bold;
    }
    #home_detail .usage_detail .bg_white{
      padding: .5rem .14rem;
    }
    .usage_detail dl div{
      padding: .5rem .1rem .1rem;
    }
    /*order*/
    #order .concept_area .flex p{
      width: 100%;
    }
    
}