@charset "utf-8";





/*boxing*/


#f_view{


  height:685px;


}











.inner{


  box-sizing: border-box;


  min-width:560px;


  max-width: 930px;


  margin:0 auto;


}





/*===================================================


=====================================================*/




















/*font*/




















/*===================================================


=====================================================*/

















/*gnav(hmb)*/


/*　ハンバーガーボタン　*/





/*nav*/


nav.gMenu {


  width:370px;


  height: 645px;


  margin-top:20px;


  border-radius: 5px;


  position: fixed;


  top  : 0;


  left : 50%;


  transform: translateX(-50%);


  -webkit-transform: translateX(-50%);


  -ms-transform: translateX(-50%);


}





nav.gMenu ul.gM_ul {


  font-size:23px;


  padding-top: 8px;


}





nav.gMenu ul.gM_ul li {


  margin-top: 50px;


}


nav.gMenu ul.gM_ul li:last-child {


  margin-bottom: 75px;


}











/*===================================================


=====================================================*/























/*header*/


#h_logo{
  width:200px;
  height:200px;
}











/*===================================================


=====================================================*/




















/*consept*/


#concept{


  width:85%;


  padding:30px 20px 30px 20px;


  height: 700px;


  margin:0 auto;


  box-sizing:border-box;


}


#concept h2{


	font-size:35px;


	margin-bottom:20px;


}


#concept h2 span{

	font-size:29px;

}



#concept p{


  font-size: 16px;


  line-height: 1.8em;


  padding-bottom: 23px;


}


#concept a{


	visibility: hidden;


}























/*===================================================


=====================================================*/




















/*insite_img*/


#insite_img{


  height:38vh;


  max-height:300px;


  background-size: 110%;


}


@media screen and (min-width: 705px) {</*ここから固定*/


  #insite_img{


  width:750px;


  height:40vh;


  max-height:380px;


  background-size: 100%;


  }


}


@media screen and (min-width: 860px) {


  #insite_img{


    background-size: 100%;


    max-width:750px;


    margin:0 auto;


    position:relative;


    top:40px;


    left:0;


  }


}














/*===================================================


=====================================================*/


























/*infomation*/


#Inf.inner{


	width:90%;


	margin:0 auto;


}


#inf{


  max-width: 580px;


  margin: 0 auto;


  padding: 30px 30px 0 30px;


}


#inf h2{


	font-size:28px;


}




















/*===================================================


=====================================================*/























/*recommended*/


#rcm{


  padding-bottom:80px;


}


#rcm > h2 {


  font-size:28px;


  line-height: 1.3em;


  padding:30px 0;


}


#rcm > h2 > span{


  font-size:15px;


}


.rcm_bx{


  width:90%;


  max-width: 640px;


  margin:0 auto;


}


.rcm{


  max-width: 640px;


  margin-top: 60px;


  overflow:hidden;


  box-sizing: border-box;


}


.r_img{


  width:51%;


  max-width:255px;


  float:left;


}


.rcm p{


  width:43%;


  max-width:270px;


  min-width: 219.14px;


  padding:10px 5px 5px 5px;


  margin:0;


  font-size: 21px;


  height:160px;


  float:right;


}


.cap span{


  width:100%;


  padding: 20px 0 0 0;


  font-size:15px;

  letter-spacing: .1em;

  line-height: 1.8em;


}























/*===================================================


=====================================================*/




















/*pc


/*menu*/


#Menu{


  margin: 0 auto;


  width: 90%;


}


#menu h2{


  font-size:40px;


  padding: 38px;


  margin:55px 0 40px 0;


}


.menu_bx{


  width: 90%;


  max-width: 720px;


  margin: 0 auto;


}





.c_menu{


  max-width: 755px;


  margin-bottom: 60px;


  box-sizing:border-box;


}


.c_menu .m_tx{


  width:42%;


  max-width: 354px;


	float:right;


}


.c_menu .m_h{


  width:100%;


	max-width:354px;


	letter-spacing:.1em;


  padding-top:15px;


}


.c_menu .cap{


  line-height: 1.9em;

  width:100%;


  box-sizing:border-box;


  text-align: left;
}


.crd_link{


  width:100%;


  height:180px;


  overflow:hidden;


  box-sizing: border-box;


  margin: 0 auto;


}


.crd_link h3{


	font-size:26px;


	font-weight:bold;


}


.m_img{


  width:55%;


  max-width:335px;


  height:120px;


  float:left;


  margin-top:28px;
}

















/*===================================================


=====================================================*/























/*cutting*/

#ct_bx{
max-width:640px;
margin:0 auto;
}
.ils_link{
	background-size:80px;
}
.ct_p{
	width:190px;
	margin:15px 15px 60px 15px;
}
.ct_p p{
	font-size:17px;
}
.ct_p p span{
	font-size:22px;
}




















/*===================================================


=====================================================*/














/*access*/




















/*===================================================


=====================================================*/



































/*===================================================


=====================================================*/

















/*map*/





#map_bx{


  width:90%;


  margin:0 auto;


	padding:50px 0 20px 0;


}


.g_map {


	max-width:100%;


	box-sizing:border-box;


}














/*===================================================


=====================================================*/





























/*===================================================


=====================================================*/


/*footer*/


footer{


  height:50px;


  margin-top:20px;


}





#c_box{


	width:320px;


	height:100%;


	margin:0 auto;


	box-sizing:border-box;


}


#c_box p{


	width:100%;


	text-align:center;


  color:#473631;


  line-height:50px;


}

















/*===================================================


=====================================================*/




















/* 754pxから切り替え */





/*gmenu media*/


@media screen and (min-width: 754px) {


  .hmb,.gMenu{


  opacity: 0;


  visibility: hidden;


}


nav.gMenu.active {


  visibility: hidden;


}





.DtgM{


  position:absolute;


  top:0;


  left:0;


  display: block;


  color: #fff;


  background:transparent;


  height:760px;


  width: 50%;


  opacity: 1;


  z-index: 2;


  overflow:hidden;


}


.gM_ul{


  font-size: 20px;


  padding-top:15px;


  padding-left:45px;


  overflow:hidden;


}


.gM_ul > li {


  width:100%;


  max-width:500px;


  margin:30px 0 10px 0;


  list-style-type: none;


  position: relative;


  transition: .4s all;


  overflow:hidden;


  float:left;


}


.gM_ul > li a {


  display: block;


  width:100px;


  color: #210B06;


  text-decoration :none;


}


#mn_li a.pdm{


  font-weight:bold;


  width:200px;


  cursor: pointer;


}


nav.DtgM li#mn_li li:first-child{


  margin-top:176px;


}


nav.DtgM li#mn_li li {


  line-height: 1.2em;


  height:0;


  font-size:22px;


  width:100%;


  transition: .5s;


}


nav.DtgM li#mn_li:hover > ul{


  padding-top:10px;


  margin-bottom:-8px;


}


nav.DtgM li#mn_li:hover > ul > li {


  height:30px;


  padding-top:25px;


}





/*Dt_sns*/


.Dt_sns{


  position:absolute;


  left:32px;


  top:618px;


}


#d_sns .follow-me li{


  margin-right:16px;


}





#d_sns .follow-me li a::before {


  box-sizing: border-box;


  border:#666 1px solid;


  background-color:transparent;


  height: 42px; /* Button height */


  line-height: 42px; /* Button height */


  width: 42px; /* Button width */





}


#d_sns .follow-me li a[class*="twitter"]:hover::before        { background-color: #55acee; }


#d_sns .follow-me li a[class*="facebook"]:hover::before       { background-color: #3b5998; }


#d_sns .follow-me li a[class*="instagram"]:hover::before      { background-color: #125688; }








/*================================================*/








/*header meida*/


#f_view{


  height:100vh;

  width:50%;


  position:relative;


  top:0;


  left:50%;


}


#h_logo{


  width:210px;


  height:210px;


  z-index: 3;


  text-align:center;


  position: absolute;


  top:40%;


  left:50%;


}








/*================================================*/


/*cncept*/

#Con{

  overflow:hidden;

}


#concept{


  max-width:630px;

	width:630px;

  margin-right:10%;

	float:right;

}



#concept h2{

  text-align:right;

}

#concept p{

	font-size:17px;

	letter-spacing:.2em;

	text-align:right;

  line-height: 1.9em;

}














/*================================================*/








/*access map media*/


  #access{


	width:90%;


  max-width:744px;


	margin:0 auto;


	box-sizing:border-box;


	padding-top:25px;


	overflow:hidden;


}


#access h2{


	font-size:33px;


	padding:25px 0 60px 0;


}





#shp_inf{


	width:335px;


	padding:0 20px;


	border-right:#555 1px solid;


	border-left:#555 1px solid;


  border-top:none;


	border-bottom:none;


	float:left;


}


#shp_inf dd{

  font-size: 15px;

}



#o_img_box{



  width:312px;

  padding:0;



  float:right;



  margin:50px 0 50px 20px;



  box-sizing: border-box;

}



#out_img{



  width:310px;

  height:;

  overflow: hidden;

  position:relative;

  top:0;

  right:10px;

}



#out_img img{

  width:100%;

}






/*================================================*/








/*g_map media*/


#map_bx{


	padding:50px 0 20px 0;


	clear:left;


}


.g_map {


	max-width:100%;


	box-sizing:border-box;


}








/*pagetop media*/


#pagetop{


  width: 40px;


  height: 40px;


  position: fixed;


  right: 25px;


  bottom: 40px;


  background: #210B06;


  opacity: 0.6;


  border-radius: 50%;


}


#page_top a{


  position: relative;


  display: block;


  width: 50px;


  height: 50px;


  text-decoration: none;


}


#page_top a::before{


  font-family: 'Font Awesome 5 Free';


  font-weight: 900;


  content: '\f102';


  font-size: 25px;


  color: #fff;


  position: absolute;


  width: 25px;


  height: 25px;


  top: -5px;


  bottom: 0;


  right: 0;


  left: 0;


  margin: auto;


  text-align: center;


}





}/*media*/




@media screen and (min-height: 790px){

	#header{

		height:789px;

	}

  /*#main > div#Rcm.inner, #Menu{

    height:790px;

  }
*/


  }/*media*/