/*
Theme Name:toku
Theme URI: 
Version: 2.0
Author: wakizashi
Author URI: https://wakizashi.jp
License: wakizashi
*/

@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Google Fontsの読み込み
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500;600;700;800;900&display=swap');

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");




/*全体の設定
---------------------------------------------------------------------------*/

html{scroll-behavior: smooth;}
html,body {
	margin: 0;
	padding: 0;
	/*font-size: 13px;	基準となるフォントサイズ。*/
	overflow-x: hidden;
	height: 100%;
    width: 100%;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

	html, body {
		font-size: 14.5px;	/*基準となるフォントサイズ。*/
	}

}/*画面幅900px以上の追加指定ここまで*/

body {
	font-family: 'Noto Sans JP', sans-serif;

	-webkit-text-size-adjust: none;
	line-height: 2;	
}


/*ローダー*/

#loader-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #111;
    z-index: 1500;
      display: block;
  }
  
  
  #loader {
    display: none;
    position: relative;
    /* left: 50%; */
    width: 100%;
    display: block;
    /* font-size: 2rem; */
    margin: -150px auto 0;
    top: 50%;
    /* left: 50%; */
    text-align: center;
    color: #aaa;
    z-index: 200;
    font-family: 'Caveat', cursive;
    max-width: 90%;

  }
  
  #loader img{
      display: block;
      margin: auto;
      max-width: 200px;
      width:50%;
  }
  


/*各種基本クラス初期設定*/

.fixed{
	/*position: fixed;*/
	top: 0px;
	left: 0px;
	width: 100%;
	z-index: 9999;
  }
  
  .clear
  {
  clear:both;
  }
  
  a {  
	text-decoration: none;
	color:#fff;
	  -webkit-transition: 0.3s ease-in-out;  
		 -moz-transition: 0.3s ease-in-out;  
		   -o-transition: 0.3s ease-in-out;  
			  transition: 0.3s ease-in-out;  
  }  
  a:hover {  
	  opacity: 0.6;  
	  filter: alpha(opacity=80);  
  }
  
  
  .fade {  
	  -webkit-transition: 0.3s ease-in-out;  
		 -moz-transition: 0.3s ease-in-out;  
		   -o-transition: 0.3s ease-in-out;  
			  transition: 0.3s ease-in-out;  
  }  
  .fade:hover {  
	  opacity: 0.6;  
	  filter: alpha(opacity=80);  
  }
  
  .hide{
	  text-indent: 100%!important;
		  white-space: nowrap!important;
		  overflow: hidden!important;
	  display: block!important;
	  height:0px!important;
	  padding:0px!important;
	  margin:0px!important;
  }
/*  
  .fadeIn_up {
    opacity: 0;
    transform: translate(0, 50%);
    transition: 2s;
  }
  .fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
  }*/

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {margin: 0;padding: 0;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*ul,olタグ*/
ul, ol {margin-bottom: 30px;}

/*他*/
section + section {
	/*margin-top: 100px;*/
}




/*container
---------------------------------------------------------------------------*/
#container {
	margin: 0 auto;
	max-width: 100%;	/*サイトの最大幅*/
	position:relative;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
    padding: 2.2% 2.5%;
    z-index: 1;
    position: absolute;
    width: 100%;
}

/*ページヘッダー*/

.pageheader{
/*background: url(img/slide1.jpg) no-repeat center;*/
height:auto;
box-sizing: border-box;
background-size: cover;
position: relative;
}

/*ロゴ*/
#logo {
    width: 200px;
    max-width: 25%;
    margin: 0;
}


/*画面幅400px以下の追加指定*/
@media screen and (max-width:768px) {

	/*ロゴ*/

#logo {
    width: 160px;
    max-width: 29%;
    margin-top: 14px;
}


}/*画面幅400px以下の追加指定ここまで*/


/*トップページのスライドショー（vegasを使用）
背景画像をレスポンシブにする為の設定ですが、画像比率を変更したい場合はテンプレート内マニュアルをご覧下さい。
---------------------------------------------------------------------------*/

#slide_area{
position: relative;
height: 900px;
}

#mainimg-box {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
}
#mainimg,#mainimg_sp {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}





/*トップページなど*/


.catch {
    position: relative;
    top: 45%;
    /* right: 7%; */
    /* border: 1px solid #fff; */
    line-height: 140%;
    padding: 4px;
    box-sizing: border-box;
    font-weight: bold;
    text-align: center;
    width: 100%;
    letter-spacing: 3px;
    color: #fff;
    margin: auto;
    font-size: 2.35rem;
}

.catch_en {

    font-size: 1.9rem;
    letter-spacing: 1px;
}



.black_bg{
    position: absolute;
    z-index: 5;
    background: url(img/black_bg.png);
    border: 1px solid #fff;
    color: #fff;
    bottom: 5%;
    left: 3%;
    padding: 1% 1%;
    line-height: 169%;
    box-sizing: border-box;
    font-size: 0.78rem;
    letter-spacing: 1px;
}

.about_area{
background: #000;
padding: 60px 0;
color: #fff;
margin:0;
}

.about_area .cont{
    display: flex;
    max-width: 1260px;
    margin: auto;
}

.about_area .cont h2{
font-size:1.8rem;
}

.about_area .cont p{
    text-align: justify;
}


.about_area .left{
    position: relative;
    width: 50%;
    box-sizing: border-box;
    padding: 5% 7%;
}

.about_area .right{
    position: relative;
    width: 50%;
    box-sizing: border-box;
    padding: 14% 2% 5%;
}

.shimane{
	position: absolute;
    z-index: 3;
    width: 18%;
    top: 20%;
    left: 8%;
}

.japan{
    position: absolute;
    z-index: 2;
    max-width: 60%;
    left: 2%;
}

.about{
position: relative;	
z-index: 1;
}


.what_area{
	background: #F05A24;
    margin: 0;
    padding: 0 0 50px;
    box-sizing: border-box;
}

.what_area .cont{
	display: flex;
}

.maru_h2{
font-size: 0.8rem;
vertical-align: middle;
}
.maru_h2:before{
content:"";
	width: 40px;
	height: 40px;
	background: #000;
	border-radius: 100px;
	display: inline-block;
	margin: 0 10px 0 0;

}


.maruo_box{
    /*background: url(img/service_bg.png) no-repeat right;*/
    position: absolute;
    background-size: cover;
    top: 0%;
    left: 0px;
    padding: 3% 8% 1% 5%;
}

.maruo_h2{
    font-size: 0.8rem;
    vertical-align: middle;
    color: #F05A24;
    }
    .maruo_h2:before{
    content:"";
        width: 40px;
        height: 40px;
        background: #F05A24;
        border-radius: 100px;
        display: inline-block;
        margin: 0 10px 0 0;
    
    }

.what_area .cont .left{
	width: 67%;
	display: flex;
	position: relative;
    z-index:1 ;
}

.mawaru{
    /* background: url(img/recycle.png) no-repeat; */
    padding: 10%;
    background-size: cover;
    width: 80%;
    height: 80%;
    position: absolute;
    z-index: 0;
    opacity: 50%;
}

.mawaru figure {
	animation: rotate-anime 16s linear infinite;
  }
  @keyframes rotate-anime {
	0%  {transform: rotate(0);}
	100%  {transform: rotate(-360deg);}
  }


.what_area .cont .left .left_text{
	width: 60%;
    box-sizing: border-box;
    padding: 5% 0 5% 5%;
    position: relative;
    z-index: 1;
}

.read_box{
	padding: 10% 2% 5% 10%;
    box-sizing: border-box;

}

.what_area .cont .left_image {
    width: 32%;
    box-sizing: border-box;
    padding: 10% 2% 2%;
    position: relative;
    z-index: 1;
}

.what_area .flow{
position: relative;
text-align: center;
}

.house,.shita,.zai,.dotted,.bunki,.tokumaru{
	display: block;
	margin: auto;
}

.house{
	display: block;
	top: 0;
    left: 10%;
    max-width: 100%;
}

.shita{
	max-width: 40%;
    padding: 2% 0;
}

.ueshita {
    animation: move-y .5s infinite alternate ease-in-out;
    display: inline-block;
 
  }
  @keyframes move-y {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(7px);
    }
  }


.zai{
	max-width: 80%;
    padding: 2% 0 5%;
}

.dotted{
    position: absolute;
    top: 37%;
    left: 45%;
    display: block;
    width: 100%;
}

.bunki{

}

.tokumaru{
    position: absolute;
    top: 27%;
    left: 123%;
    max-width: 70%;
    width: max-content;
}

.biyobiyo {
    animation: move-y .8s infinite alternate ease-in-out;
    display: inline-block;
 
  }
  @keyframes move-y {
    from {
        transform: scale(0.9);
    }
    to {
        transform: scale(1);
    }
  }


.what_area .cont .right{
	width: 33%;
    position:relative;
    z-index: 0;
    box-sizing: border-box;
    padding: 0%;
}

.what_area .cont h3{
font-size: 2rem;
}

.what_area .cont h3 span{

font-size: 80%;
display: block;
}

.link_white{
	color: #fff;
    vertical-align: middle;
}

.link_white span{
	border-bottom: 1px solid #fff;
}

.link_white:after{
content:"";
display: inline-block;
background: url(img/arrow.png) no-repeat center;
margin-left:10px;
height:43px;
width:43px;
}

.link_black{
	color: #000;
    vertical-align: middle;
}

.link_black span{
	border-bottom: 1px solid #000;
}

.link_black:after{
content:"";
display: inline-block;
background: url(img/arrow_black.png) no-repeat center;
margin-left:10px;
height:43px;
width:43px;
}



.dl_white{
	color: #fff;
    vertical-align: middle;;
    display: inline-block;
}

.dl_white span{
    border-bottom: 1px solid #fff;
    display: inline-block;
}

.dl_white:after{
content:"";
display: inline-block;
background: url(img/dl_white.png) no-repeat center;
margin-left:10px;
height:38px;
width:38px;
}


.dl_black{
    color: #000;
    vertical-align: middle;
    border: 1px solid #000;
    padding: 12px 40px;
    border-radius: 50px;
    background: #fff;
    margin: auto;
    display: inline-block;

}

/*.dl_white span{
	border-bottom: 1px solid #fff;
}*/

.dl_black:after{
content:"";
display: inline-block;
background: url(img/dl_black.png) no-repeat center;
margin-left:10px;
height:43px;
width:43px;
}


.what_area .cont p{
	padding-bottom: 30px;
    text-align: justify;
}



.content_area{
position: relative;
	background: #F05A24;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

}

.content_area .cont{
    display: flex;
    flex-direction: column;
}

.content_area .left,.content_area .right{
	width: 100%;
	/*border: 1px solid #F05A24;*/
	display:flex;
	box-sizing: border-box;	
	background:#000;
    padding: 4% 0 1%;
}



.content_area .left .left_info .left_con{
width:50%;
}

.content_area .right .right_info .left_con{
width:42%;
}

.content_area .right .right_info .right_con{
	width:58%;
}

.content_area .right .right_info .right_con .link_box{
	background:#edecdc;
	margin:30px 0;
	display:inline-block;
	padding:6px 20px;
	border-radius:50px;
	color:#000;
	font-size:1rem;
}

.content_area .right .right_info .right_con .images{
display:flex;
padding:3% 0;
}
.content_area .right .right_info .right_con .images figure{
	padding:3px;
}

.content_area .left atricle .left_con article{
width:90%;
	margin:auto;
}

.content_area .left .left_info .right_con{
width:50%;
    padding-top: 5%;
}

.content_area .left atricle .right_con article{
width:90%;
	margin:auto;
}

.content_area .left .left_info{
border-bottom:3px solid #F05A24;	
}

.content_area .right{
   /* border-left:1px solid #F05A24;*/
}

.content_area .left .left_info{
	width: 100%;
	display:flex;
	margin: auto;
padding: 5% 6%;
}

.content_area .right .right_info{
display: flex;
    padding: 0 0 0 6%;
}

.content_area .cont h2{
font-size: 2.23rem;
color:#fff;
vertical-align: middle;
}



.content_area .cont .right h2:before{
	content:"";
	display: inline-block;
    background: url(img/house_icon.png) no-repeat center;
    margin-right: 10px;
    width: 110px;
    height: 114px;
    background-size: contain;
}

.content_area .cont .left h2:before{
	content:"";
	display: inline-block;
	background: url(img/desk.png) no-repeat center;
	margin-right:10px;
	height:99px;
	width:157px;
	background-size: contain;
}

.content_area .cont p{
    color: #fff;
    padding-bottom: 50px;
    text-align: justify;
    word-break: break-all;
}



.tour_area{
	/*background: #F05A24;*/
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	background:#000;
padding: 2% 6% 8%;
}

.tour_area .cont{
    background: #000;
    display: flex;
    box-sizing: border-box;
    padding: 2% 3%;
    background: #F05A24;
    max-width: 1260px;
    margin: auto;
}

.tour_area .cont .left{
width:48% ;
}

.tour_area .cont .right{
	width:52% ;
    padding-top: 5%;
	}

.tour_area .cont .left article{
	width:90% ;
	margin: auto;
	}

.tour_area .cont .right article{
	width:98% ;
	margin: auto;
	}	

.tour_area .cont h2{
    font-size: 2.23rem;
    color: #000;
	margin: 0;
}


.tour_area .cont p{
		color: #000;
        text-align: justify;
		margin-bottom: 35px;
}
	

.tour_area .cont ..right{
	width:45% ;
}





.news_area{
	background: #EDECDC;
	padding: 3% 5%;
	box-sizing: border-box;
	margin: 0;
}

.news_area .cont{

}

.news_area .cont ul{
max-width:100%;

margin:auto;
list-style-type: none;
padding:50px 0;
}

.news_area .cont ul li{
border-bottom:1px solid #000;
}

.news_area .cont ul li h3 {
    font-weight: normal;
}

.news_area .cont ul li a{
    color: #000;
    letter-spacing: 1px;
    font-size: 95%;
}

.news_box{
    max-width:100%;
    width:800px;
    margin:auto;
    padding:10px 0 50px;
}

.news_box .right{
    text-align: right;
    padding-bottom: 30px;
}

.news_box .right .black_link{
    border-bottom: 1px solid #000;
    color: #000;
    display: inline-block;
}

.date{
    color: #000;
    margin-right: 20px;
    display: inline-block;
    letter-spacing: 1px;
}

.text_right{
	text-align:right;
}

.mail_link{
    color: #000;
    vertical-align: middle;
}

.mail_link span{
	border-bottom:1px solid #000;
}

.mail_link:after{
	content:"";
	display: inline-block;
	background: url(img/mail_link.png) no-repeat center;
	margin-left:10px;
	height:35px;
	width:35px;
	background-size: contain;
}

._area .cont h2{

}

._area .cont p{
	
}







/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

footer {
	border-top:1px solid #000;
    font-size: 0.85rem;
background: #EDECDC;
    width: 100%;
    bottom: 0;

}

footer .cont{
	display: flex;	
}

footer .left{
	width: 22%;
    padding: 3%;
    box-sizing: border-box;
}

footer .left p{

	}

footer .left h2{

}	

footer .center{
width:50%;
border-left:1px solid #000;
border-right:1px solid #000;
    padding: 3%;
    box-sizing: border-box;
}

footer .center ul{

}

footer .center ul li{

}

footer .center ul li a{
color#000;
}




footer .right{
width:28%;
padding: 3%;
box-sizing: border-box;
}

footer .right ul{

}

footer .right ul li{

}


/*リンクテキスト*/
footer a {text-decoration: none;}

/*著作部分*/
.pr {display: block;}

/*copyrightと著作部分*/
.copy {
    padding: 1%;
    color: #fff;
    background: #000;
    text-align: right;
}


/*フッターメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#footermenu {
	margin: 0;
	padding: 1%;		/*ブロック内の余白*/
}

/*メニュー１個あたり*/
#footermenu li {
	display: block;	
	padding: 0 10px;
}

#footermenu li a{
	color:#111;
	display: block;
}



/*COMING SOON*/


/*@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;700&family=Roboto:wght@700&display=swap');*/


.soon{
	color: #fff;
    text-align: center;
    padding: 6% 0;
	position: relative;
	z-index: 0;
}

.soon article{

}

.soon article h2{
	font-family: 'Roboto', sans-serif;
    font-size: 4rem;
    letter-spacing: 0.3rem;
    margin: 0;
    line-height: 100%;
}

.soon article p{
	font-family: Arial;
    font-size: 1.4rem;
    letter-spacing: 1px;	
}

.soon article a{
    color: #000;
    font-family: 'Roboto', sans-serif;
    background: #F15A24;
    border-radius: 10px;
    padding: 8px 80px;
    font-size: 1.5rem;
    letter-spacing: 1px;
}




/*mainブロック
---------------------------------------------------------------------------*/
main {
    
    box-sizing: border-box;
}

/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

	main {
		
	}

}




/*微調整*/
p + h3,p + h2 {margin-top: 2em;}



/*インスタなどのアイコンブロック
---------------------------------------------------------------------------*/
.icons li {
	display: inline-block;	/*横並びにする指定*/
	margin: 10px;			/*アイコンの外側に空けるスペース*/
	font-size: 20px;		/*文字サイズですが、これでアイコンサイズを変更できます。*/
}







/*========= ナビゲーションのためのCSS ===============*/


.menu_bg{
	width:65% ;
	background: url(img/slide1.jpg) no-repeat center;
	background-size:cover;
	z-index:0 ;
	position: relative;
}

.filter{
	background: url(img/black_bg.png);
	position: absolute;
	height: 100%;
	width:100%;
	z-index: 2;
}

.menu_bg h2{
    display: flex;
    position: relative;
    color: #fff;
    width: 400px;
    margin: auto;
    top: 30%;
    font-size: 0.9rem;
    z-index: 3;
}

.menu_bg h2 figure{
	width: 45%;
}

.menu_bg h2 span{
	width: 55%;
    padding: 10% 0;
}


.regular{
font-size: 2rem;
}

.ncon  li a{
	font-size:95%
}

.sub  li a{
font-size:90%	
}

#g-nav{
    /*position:fixed;にし、z-indexの数値を小さくして最背面へ*/
    position:fixed;
	display: flex;
  z-index: -1;
  opacity: 0;/*はじめは透過0*/
    /*ナビの位置と形状*/
  top:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#fff;
    /*動き*/
  transition: all 0.3s;
}

/*アクティブクラスがついたら透過なしにして最前面へ*/
#g-nav.panelactive{
  opacity: 1;
  z-index:999;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{

background: #EDECDC;
/* background-size: cover; */
z-index: 999;
width: 35%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 8% 0;
}

#g-nav.panelactive #g-nav-list h2{
text-align: center;
    margin: 0;
    font-weight: normal;
    font-size: 1.3rem!important;
    padding: 2% 25% 0%;
}

/*ナビゲーション*/
#g-nav ul {
display: none;
    /* position: absolute; */
margin: 40px auto 40px;
    max-width: 300px;
    text-align: center;
    z-index: 999;
    top: 50%;
    left: 50%;
    /* transform: translate(-50%,-50%);*/
}

#g-nav.panelactive ul {
    display: block;
	    min-width: 300px;
}

#g-nav.panelactive .contact_menu{
    writing-mode: lr;
    text-align: center;
}
#g-nav.panelactive .contact_menu li{
    text-align: center;
}

#g-nav.panelactive ul li .home{
border: 1px solid #111;
	display:inline-block;
	font-size:0.8rem;
    border-radius: 80px;
    padding: 10px 20px;
    margin-top: 50px;
}

#g-nav.panelactive .contact_menu .contact_link{
    position: relative;
    text-align: center;
    background: #111;
    border-radius: 100px;
    display: block;
    padding: 12px 22px;
    color: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    width: 60%;
    margin: auto;
}

#g-nav.panelactive .contact_menu .contact_link:before{
content: "";
    display: inline-block;
    vertical-align: middle;
    width: 38px;
    height: 25px;
    background: url(img/mail_icon.png) no-repeat left;
    background-size: cover;
    margin-right: 12px;

}

/*リストのレイアウト設定*/

#g-nav li{
list-style: none;
    text-align: justify;
}

#g-nav li a{
    color: #111;
    text-decoration: none;
    text-align: left;

    padding: 0;
    /* border-bottom: 1px #eee solid; */
    display: block;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: bold;

}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
    position: fixed;
    z-index: 1000;
    top: 5%;
    right: 5%;
    cursor: pointer;
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 500px;
}

.openbtn1:after{

}

@media screen and (max-width: 768px) {
.openbtn1{
right:6%;
	}

	
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 1px;
    background-color: #111;
    width: 53%;
    top: 15px;
}



.openbtn1 span:nth-of-type(1) {
  top:22px; 
}

.openbtn1 span:nth-of-type(2) {
    top: 29px;
}

.openbtn1 span:nth-of-type(3) {
  top:36px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 24px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 36px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
}

.language{


    position: absolute;
    top: 60px;
    right: 10%;
    /* border: 1px solid #fff; */
    line-height: 120%;
    padding: 4px;
    box-sizing: border-box;
    font-weight: 100;
}










/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	background: rgba(0,0,0,0.3);
	width: 50px;
	line-height: 50px;
	color: #fff;
}



/*その他
---------------------------------------------------------------------------*/

.small {font-size: 0.75em;}


/*画面幅900px以上の追加指定*/
@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

}/*画面幅900px以上の追加指定ここまで*/




.mobile{
    display: none!important;
}

@media screen and (max-width:768px) {

    .mobile{
        display: block!important;
    }
    
    .pc {display: none;}    

    header {
        padding: 5% 2.5% 2%;
        width: 100%;
    }

	.soon{
		color: #fff;
		text-align: center;
		padding: 25% 0;	
	}

	.soon article h2{
		font-family: 'Roboto', sans-serif;
		font-size: 3.5rem;
		letter-spacing: 0.2rem;
		margin: 0;
		line-height: 100%;
	}

	.soon article p{
	font-family: Arial;
    font-size: 1.4rem;
    letter-spacing: 1px;
    max-width: 90%;
    text-align: center;
    margin: auto;
    padding: 5%;
	}

    #slide_area {
        position: relative;
        height: 100vh;
    }

    .catch {
        position: relative;
        z-index: 5;
        color: #fff;
        font-size: 1.73rem;
    }

    .catch_en {

        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .black_bg{
        position: absolute;
        z-index: 5;
        background: none;
        border: none;
        color: #fff;
        bottom: 5%;
        left: 3%;
        padding: 0.5% 1%;
        line-height: 150%;
        box-sizing: border-box;
    
    }


    .about_area .cont {

        flex-direction: column-reverse;
    }

    .about_area .right ,.about_area .left{
        position: relative;
        width: 90%;
        margin: auto;
        font-size: 95%;
    }

    .shimane {
   
        top: 15%;
    }

    .what_area .cont {
        flex-direction: column;
    }
    .what_area .cont .left {
        width: 100%;
        display: block;
        margin: auto;
    }
    .what_area .cont .left .left_text {
        width: 100%;
        padding: 5% 5% 5%;
    }
    .read_box {
        padding: 2%;
        font-size: 95%;
    }
    .what_area .cont h3 {
        font-size: 1.6rem;
    }

    .what_area .mobile {
        display: flex!important;
        flex-direction: initial;
        width: 100%;
        justify-content: end;
        position: relative;
        z-index: 2;
    }
    .what_area .cont .left_image {
        width: 35%;
    }
    .what_area .cont .right {
        width: 35%;
    }

    .dotted {
        position: absolute;
        top: 34%;
    }

    .mawaru {
        /* background: url(img/recycle.png) no-repeat; */
        padding: 10%;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;
        opacity: 50%;
        top: 90%;
    }


.maruo_box {
    background: url(img/service_bg.png) no-repeat right;
    position: absolute;
    background-size: cover;
    top: 0;
    left: 0px;
    padding: 5% 6% 1% 3%;
}
    
    .content_area .cont h2 {
        text-align: center;
        font-size: 1.2rem;
    }
    .content_area .cont .left h2:after{
        content:none;
    }
    .content_area .cont .left h2:before {
        content:"";
        display: block;
        background: url(img/house_icon.png) no-repeat center;
        margin: auto;
        width: 55px;
        height: 67px;
        background-size:contain;
    }
    .content_area .cont .right h2:before {
        content: "";
        display: block;
        background: url(img/desk.png) no-repeat center;
        margin: auto;
        height: 65px;
        width: 78px;
        background-size: contain;
    }

    .content_area .cont p {
        padding-bottom: 30px;
        font-size: 90%;
    }
	
	
.content_area .left .left_info {
    flex-direction: column;
	}
.content_area .left .left_info .left_con {
    width: 100%;
}	
.content_area .left .left_info .right_con {
    width: 100%;
    padding-top: 0%;
}	
	
	.content_area .right .right_info{
 flex-direction: column;

		padding: 5% 6%;
	}	
	.content_area .right .right_info .left_con,.content_area .right .right_info .right_con{
width: 100%;		
	}	

.tour_area .cont .right article {
    width: 100%;
    margin: 15px auto;
}	
	

    .tour_area .cont {
        flex-direction: column-reverse;
    }
    .tour_area .cont .left {
        width: 90%;
        margin: auto;
    }
    .tour_area .cont .right {
        width: 90%;
        margin: auto;
    }
    .tour_area .cont h2 {

        font-size: 1.2rem;
    }
    .tour_area .cont p {
        font-size: 95%;
    }
    .news_area {
        background: #EDECDC;
        padding: 3% 5% 10%;
        font-size: 80%;
    }

    .dl_black {
        padding: 6px 30px;
    }

    footer .cont {
        display: flex;
        flex-direction: column;
    }

    footer .left {
        width: 58%;
        padding: 3% 5% 16%;
        box-sizing: border-box;
        margin: auto;
        letter-spacing: 0px;
    }

    footer .left p {
        font-size: 95%;
    }

    footer .center {
        width: 100%;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        padding: 5%;
        box-sizing: border-box;
    }
    footer .right {
        width: 100%;
        padding: 5%;
        box-sizing: border-box;
    }

    .menu_bg {
        width: 40%;
    }
    .menu_bg h2{
        display: flex;
        flex-direction: column;
        color: #fff;
        width: 80%;
        margin: auto;
        top: 30%;
        font-size: 0.9rem;
        z-index: 3;
    }
    .menu_bg h2 figure {
        width: 100%;
    }
    .menu_bg h2 span {
        width: 100%;
        padding: 10% 0;
    }

    .menu_bg h2{

        font-size: 0.7rem;
        z-index: 3;
    }

    #g-nav.panelactive #g-nav-list {
 
        width: 60%;
    }
    #g-nav.panelactive ul {
        display: block;
        min-width: auto;
        box-sizing: border-box;
        padding: 0 4%;
    }
    .regular {
        font-size: 1.3rem;
    }

.language{

    right: 24%;

}

.dl_white {
    color: #fff;
    font-size: 83%;
}

.dl_white:after{

    height:30px;
    width:30px;
    }

.dl_black:after {
    content: "";
    display: inline-block;
    background: url(img/dl_black.png) no-repeat center;
    margin-left: 10px;
    height: 25px;
    width: 32px;
    background-size: cover;
}

.tour_area .cont .left article {
    width: 96%;
    margin: auto;
}

}


.cookie-consent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 500;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: #fff;
    background: rgba(0,0,0,.7);
    padding: 1.2em;
    box-sizing: border-box;
    visibility: hidden;
  }
  .cookie-consent.is-show {
    visibility: visible;
  }
  .cookie-consent a {
    color: #fff !important;
  }
  .cookie-agree {
    color: #fff;
    /* background: dodgerblue; */
    padding: 0.5em 1.5em;
    border: 1px solid #fff;
  }
  .cookie-agree:hover {
    cursor: pointer;
  }
  /* パッと消える */
  .cc-hide1 {
    display: none;
  }
  /* ゆっくり消える */
  .cc-hide2 {
    animation: hide 1s linear 0s;
    animation-fill-mode: forwards;
  }
  @keyframes hide {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
      visibility: hidden;
    }
  }
  /* メディアクエリ */
  @media screen and (max-width: 600px) {
    .cookie-consent {
      flex-direction: column;
    }
    .cookie-text {
      margin-bottom: 1em;
    }
  }

.bogo-language-switcher{
	.current{
		display: none;
	}
	li{
		text-align: left;
	}
	a:before{
		/*content: "\f0ec";
		font-family: FontAwesome;
		padding-right: 8px;*/
				content: none;
	}
}

.lang{
display: inline-block;
    position: absolute;
    top: 56px;
    right: 150px;
}


@media screen and (max-width: 768px) {

.lang{

    right: 100px;
}
	
}

.lang ul{
	padding: 0;
    margin: 0;
}
.lang ul li{
	
}