@charset "utf-8";
/*HTML5未対応のブラウザーでHTML５要素をブロック要素として読み込ませる*/
article,aside,canvas,details,figcaption,figure,header,footer,menu,nav,section,summary {
display:block;
}

/*全端末共通設定
---------------------------------------------------------------------------*/
html{font-size:62.5%;overflow-y:scroll;}/*10px*/

/*ローディング スマホでは表示しない
------------------------------------*/
.loading {
  display:none;
}

#img {width:100%;}

/*その他設定
---------------------------------------------------------------------------*/
/*まわりこみ解除*/
.clear{
  clear:both;
}
/*clearfix*/
.clearfix:after{  
visibility:hidden;/*見えなくする*/ 
height:0;/*見えなくする*/
display: block;/*block要素にする*/
font-size: 0;  
content: " ";  
clear: both;  
}  

/*全体の設定
---------------------------------------------------------------------------*/
body {
  position:relative;
	margin: 0px;
	padding: 0px;
	color: black;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	line-height: 1.5;		/*行間*/
	/*background:url("../img/back.png");*//*背景*/
/*	background-position:center;*/
  -webkit-text-size-adjust:100%;/*iphoneのサファリで文字表示がおかしい対応*/
}


h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a{
  /* color:black;/*リンク文字色*/
	transition: 0.3s;	/* マウスオン時の移り変わるまでの時間設定　0.3s*/
  text-decoration:none;
  color:#4d4747;
}
a:hover {
 /* color:black;	/*マウスオン時の文字色*/
 /*  background:#ddd;*/
}
a img {
　border-style:none;/*画像にリンクを張った時に枠線を表示しない */
} 


/*---------------------------------------------------------------------------*/
/*nameダグのちょっと手前にジャンプするための位置調整クラス
----------------------------------*/
a.anchor{
    display: block;
    padding-top: 70px;
    margin-top: -70px;
}
/*改行コード
  スマホ対応の時に改行させたくないときに使用
------------------------------*/
.br_sp::before {
	content: "\A" ;
	white-space: pre ;
}
/*飾り*/

#ani_delay_02{
 /* animation-duration: 2s; *//* アニメーションの時間 */
  animation-delay: 0.2s;/* アニメーション開始時間 */
  /* animation-iteration-count: infinite; *//* アニメーションの繰り返し回数 */
}
#ani_delay_04{
 /* animation-duration: 2s; *//* アニメーションの時間 */
  animation-delay: 0.4s;/* アニメーション開始時間 */
  /* animation-iteration-count: infinite; *//* アニメーションの繰り返し回数 */
}
#ani_delay_06{
  animation-delay: 0.6s;/* アニメーション開始時間 */
}
#ani_delay_08{
  animation-delay: 0.8s;/* アニメーション開始時間 */
}
/*ホームページを囲む一番外側のブロック
---------------------------------------------------------------------------*/
#page {
  width:100%;
  font-size:1.6rem;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
header {


}
header p{
  display:none;
 /*  color:white;
  font-size:13px;
  background:#80b639;
  letter-spacing:3px;*/
}
header  h1{
  /* text-align:left;*/

}
#logo_mess{
  display:none;
  /* color:#232323;
  margin:0px;
  padding:0px;*/
}

/*ロゴ画像設定*/
#logo{
  position:fixed;
  top:-10px;
  left:15px;


  padding:0;
  width:120px;
  z-index:12;
}

#else{
  display:none;
  /*position:relative;
  margin:10px 0 0px;

  width:380px;
  font-size:12px; 
  text-align:right;*/

}
#else a{
  /*text-decoration:none;
  margin-bottom:10px;
  color:#888;*/
}
#else a:hover{
 /* color:#333;
  border-bottom:1px solid #333;*/
}
#else img{
 /* margin-top:20px;
  width:280px;*/
}
/*メニュー
---------------------------------------------------------------------------*/
#main_menu{display:none;}
.main_menu_sp{display:none;}
#main_menu_sp{

}

#toggle{
	display:block;
  position:fixed;
  top:0px;
  left:0px;
  background:white;
	width:100%;
  height:80px;
  margin:0px 0 0;
	border-bottom:1px solid #c6c6c6;
  opacity:0.9;

  z-index:11;
	/*box-shadow:2px 3px 5px #c6c6c6;
	/*	-moz-box-shadow: 2px 3px 5px #c6c6c6;/* Firefox */
	/* 	-webkit-box-shadow: 2px 3px 5px #c6c6c6; /* Safari and Chrome */

}

a #toggle p{
	position:relative;
	padding:15px 0 15px;
	color:#4d4747;
	text-align:center;
	font-family: "Noto Sans Japanese";
  font-size:19px;	
  text-decoration:none;
  letter-spacing:10px;
}
#menu{
	display:none;
  position:fixed;
  top:78px;
  left:0px;
  background:white;
  /* opacity:0.8;*/
  width:100%;
	padding:0px;
	font-family: "Noto Sans Japanese";
  background:black;
  z-index:10;
  background-color:rgba( 0, 0, 0, 0.8 );
}

.tel_button{
	font-family: "Noto Sans Japanese";
  text-align:center;
  margin:20px auto 20px;


}
.tel_button a{
  display:inline-block;
  width:300px;
  height:20px;
  padding:7px 0 7px 0;
  color:#fff;

	font-size: 13px;
  background:#f7530b;/*オレンジ*/

  opacity:1;
  border-radius:5px 5px;
  -webkit-border-radius:5px 5px;/* Firefox */
  -moz-border-radius:5px 5px;/* Safari and Chrome */
  behavior: url(./PIE.htc);/* IE8対応用 */
}
#menu ul{
  margin:0px;
	font-size: 0;
	box-sizing: border-box;
	list-style: none;
	text-align:center;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  border-top:1px solid #878787;
}
#menu li {
	position:relative;
	font-family:"Noto Sans Japanese";
	font-size: 14px;

  letter-spacing: 1px;
  text-align:center;
  border-bottom:1px solid #878787;
  border-right:1px solid #878787;
  flex-wrap:wrap;
  width:calc(50% - 1px);

}
#menu li a {
	position: relative;
	display: block;
	padding:10px 10px;
	text-decoration: none;
  line-height:1.6; 
  text-align:left;
  color:#fff;
}

#menu li:nth-child(2){
  border-right:none;
}
#menu  li:nth-child(4){
  border-right:none;
}

#menu  li:nth-child(6){
  border-right:none;
  font-size:12px;
}
/*
#menu li:last-child a{
border-bottom:1px solid #c6c6c6;
  background:yellow;
}*/
#menu li a span{
  position:absolute;
  top:calc(50% - 6px);
  right:5%;
  color:#f7530b;/*オレンジ*/
}
.letter10{
  margin-left:5px;
  font-size:12px;
}


/*--------------------------------- リンク -----------------------------------*/
.link_pc{
  display:none;
}
.link_sp{
  position:relative;

  width:320px;
  margin:50px auto 50px;
  text-align:center;
}

/*--------------------------------- フッター ------------------------------*/
footer{
	position:relative;
  color:#fff;
  background:#80b639;
}
}
/*footer menu
-------------------------------------------------*/
#footer_menu{
 
  position:relative;
  padding-top:0px; 

} 

#footer_menu ul{
  margin:0px;
	font-size: 0;
	box-sizing: border-box;
	list-style: none;
	text-align:center;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
}

/*メニュー１個あたりの設定*/
#footer_menu li {
	position:relative;
	font-family:"Noto Sans Japanese";
	font-size: 14px;

  letter-spacing: 1px;
  text-align:center;
  border-bottom:1px groove #aaa;
  border-right:1px groove #aaa;
  flex-wrap:wrap;
  width:calc(50% - 1px);
}
#footer_menu li a{
	position: relative;
	display: block;
	padding:10px 10px;
	text-decoration: none;
  line-height:1.6; 
  text-align:left;
  color:#fff;
}
#footer_menu li:nth-child(2){
  border-right:none;
}
#footer_menu li:nth-child(4){
  border-right:none;
}

#footer_menu li:nth-child(6){
  border-right:none;
  font-size:12.5px;
}
#footer_menu li:nth-child(7){
}



/*　丸矢印を消す */
#footer_menu li span{
  display:none;
}

/* footer ロゴ
-------------------------------------------------*/
#footer_logo{
  display:none;
  text-align:center;
  margin:0 auto 0;
}


#footer_logo img{
  margin-top:10px;
  width:200px;

}
/* footer コピーライト
-------------------------------------------------*/
#arr{
  position:relative;
 text-align:center;
 padding:10px;
 font-size:12px;
  background:white;
  color:#000;
}

/*TOPへ戻る
-------------------------------------------------*/
/* パソコン・スマホ共通のCSS */
#PageTopBtn {
	position: fixed; /*ボタンの配置場所を固定*/
	bottom: 20px; /*下からのボタンの配置場所を指定*/
	right: 20px; /*右からのボタンの配置場所を指定*/
	z-index:10;
}

#PageTopBtn a:hover img {
  text-decoration:none;
  /*transform: rotate( 10deg );
  transition: 0.1s;*/
}
#PageTopBtn a {
display: block; /*配置の調整*/
text-decoration: none; /*文字の下線を消す*/
color: #fff; /*文字の色*/
/* background: #4f452e; *//*ボタンの背景色*/
text-align: center; /*文字を中央に配置*/
border-radius: 5%; /*ボタンの角を少し丸くする*/
outline: none; /*クリックしたときの黒い枠を消す*/
}
#PageTopBtn a:hover {
text-decoration: none; 
/* background: #87cefa; */ /*マウスオーバー時の背景色*/
}
/* パソコンで表示する場合のCSS */

#PageTopBtn {
font-size: 13px; /*文字のサイズ*/
}
#PageTopBtn a {
width: 120px; /*ボタンの幅*/
height:40px; /*ボタンの高さ*/
padding: 0px 0; /*文字の配置場所の調整*/
}


/*共通　カラフル文字
-------------------------------------------------------------------------------//*カラフル文字！*/
.colorful span:nth-child(1)  {color:#aa8400;}/*黄土色*/
.colorful span:nth-child(2)  {color:#97607d;}/*紫*/
.colorful span:nth-child(3)  {color:#f6aa00;}/*オレンジ*/
.colorful span:nth-child(4)  {color:#0096b9;}/*青緑*/
.colorful span:nth-child(5)  {color:#441f0c;}/*こげ茶*/
.colorful span:nth-child(6)  {color:#63b068;}/*黄緑*/
.colorful span:nth-child(7)  {color:#97607d;}/*紫*/
.colorful span:nth-child(8)  {color:#0096b9;}/*青緑*/
.colorful span:nth-child(9)  {color:#441f0c;}/*こげ茶*/
.colorful span:nth-child(10) {color:#63b068;}/*黄緑*/
.colorful span:nth-child(11)  {color:#aa8400;}/*黄土色*/
.colorful span:nth-child(12)  {color:#97607d;}/*紫*/
.colorful span:nth-child(13)  {color:#f6aa00;}/*オレンジ*/

/*スマホ用slidebarのコンテンツ(メニュー）
---------------------------------------*/
div[off-canvas]{
  display:block;
/*
  background-color:#e9eacb;/*メニューの背景の色*/
  /* background:url(../img/back.png) white;*/
  background:#e9eacb;
}

div[off-canvas] a{
  display:block;
  text-decoration:none;
  font-family: "Noto Sans Japanese";
}

.slidebarmenu_contens{
  display:block;
  font-size:1.8rem;

}
.slidebarmenu_contens li{
  margin:0;
  padding:0;
  position:relative;
　display:block;
  border-bottom:1px solid #fff;
}
.slidebarmenu_contens li a:visited{  
  background:white;   
}
.slidebarmenu_contens li a:active{  
  background:white;  
  color:#4d4747; 
}

.slidebarmenu_contens li a{
  display:block;
  color:#4d4747;/*　文字の色　*/
  width:100%;
  padding:20px 30px;
}
.slidebarmenu_contens li span{
  position:absolute;
  top:calc(50% - 6px);
  right:30px;
}

.slidebarmenu_contens li a:before {
	/* display:block;
	content:"";
	position:absolute;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:25px;
	width:15px;
	height:15px;
	margin-top:-7px;
  background:#4d4747;*/

}

.slidebarmenu_contens li a:after{
	/* display:block;
	content:"";
	position:absolute;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
	top:50%;
	right:30px;
	width:15px;
	height:15px;
	margin-top:-7px;
  background:#e9eacb;
  background:#e9eacb;*/
}

/*メニュー1
----------------------------------
.slidebarmenu_contens li:nth-child(1) a span{
  color:#aa8400;
}
.slidebarmenu_contens li:nth-child(1) a:hover {
   background:#e9e2c8;
}*/
/*メニュー2
----------------------------------
.slidebarmenu_contens li:nth-child(2) a span{
  color:#de6641;
}
.slidebarmenu_contens li:nth-child(2) a:hover {
   background:#fbdac8;
}*/

/*メニュー3
---------------------------------
.slidebarmenu_contens li:nth-child(3) a span{
  color:#e8ac51;
}
.slidebarmenu_contens li:nth-child(3) a:hover {
   background:#feecd2;
}*/
/*メニュー4
----------------------------------
.slidebarmenu_contens li:nth-child(4) a span{
  color:#aac863;
}
.slidebarmenu_contens li:nth-child(4) a:hover {
   background:#ecf4d9;
}*/

/*メニュー5
---------------------------------
.slidebarmenu_contens li:nth-child(5) a span{
  color:#27aca9;
}
.slidebarmenu_contens li:nth-child(5) a:hover {
   background:#d4ecea;
}
--*/

/*メニュー6
--------------------------------
.slidebarmenu_contens li:nth-child(6) a span{
  color:#a55b9a;
}
.slidebarmenu_contens li:nth-child(6) a:hover {
   background:#d2cce6;
}
--*/

/*メニューの一番下の文字
.slidebar_moji{
  margin-top:-10px;
  padding:0 10px 5px 10px;
  text-align:center;
  font-size:9px;
  color:#ccc;
}
*/

/*スマホ用ドロワーメニューslidebar設定
-----------------------------------------------------*/
nav[canvas] {   
  width:100%;
  overflow:hidden;
  position:fixed;
  top:0px;
  margin:0;
  padding:0;
  height:80px;
  background:white;
  background: rgba(255,255,255,0.8);
}



/*CCS 三本線
----------------------------------------------------------------------------*/
.menuWrapper {
  position: relative;
  z-index: 5;
  width: 50px;
  height: 50px;
  float:right;
  margin:-20px 10px 0 0;/*３本線の位置*/

}
.menuWrapper a:hover {
}

#menuButton {
  overflow: hidden;
  display: block;
  position: relative;
  z-index:7;
  width: 60px;
  height: 60px;

  color:#4d4747;/**/

}
/*３本線の下のMENU文字の設定*/
#menuButton .moji{
position:absolute;
top:24px;
right:16px;
font-size:13px;
  letter-spacing:0;
}
#menuButton span,
#menuButton::before,
#menuButton::after {
  display: block;
  position: absolute;
  top:-10px;
  bottom: 0;
  left:0;
  right: 8px;
  width: 38px;
  height: 4px;
  margin: auto;
  background: #4d4747; /**/

}
#menuButton span {
  overflow: hidden;
  z-index: 1;
  color: #4f452e;
}
#menuButton::before {
  z-index: 2;
  transform: translate(0, -12px);
  content: "";
}
#menuButton::after {
  z-index: 2;
  transform: translate(0, 12px);
  content: "";
}

#menuButton span {
  opacity: 1;
  transition: opacity 150ms 50ms;
}
#menuButton::before,
#menuButton::after {
  transition: transform 200ms;
}

#menuButton.active span {
  opacity: 0;
  transition: opacity 150ms;

}
#menuButton.active::before {
  transform: rotate(45deg);
}
#menuButton.active::after {
  transform: rotate(-45deg);
}