@charset "UTF-8";

/*================================================
 *  閉じるサブメニュー
 ================================================*/


*, *:before, *:after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
ol, ul {
	list-style: none;
}

li {  /*style.css より*/
	margin-left: 20px; /*2em*/
	
}

a {
	text-decoration: none;
	color: inherit;
}
.cp_cont {
	height: 62px; /*65vh*/

}
.cp_offcm04 {
	position: absolute;
	z-index: 200;  /*コンテンツと重なった時に上のレイヤーにする*/
	top: -2px; /*20px*//*-15px→0 20190920*/
	left: 0px; /*20px*/
	display: inline-block;
}
/* menu */
.cp_offcm04 .cp_menu {
	position: fixed;
	top: 0px; /*左上からの位置 100px */
	left: -100vw; /*-100vw　左側に付ける*/
	width: 200px; /*200px*/
	height: 100%;
	cursor: pointer;
	-webkit-transition: 0.53s transform;
	        transition: 0.53s transform;
	-webkit-transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	        transition-timing-function: cubic-bezier(.38,.52,.23,.99);
	background-color: rgba(70,50,50 ,1); /*rgba(0,151,167 ,1)*/
	opacity: 0.8;
}
.cp_offcm04 .cp_menu ul {
   
	margin: 0;
	padding: 0;
	height: 100%;     /*サブメニューの縦スクロール add 20190921*/
    overflow: auto;   /*サブメニューの縦スクロール add 20190921*/
    -webkit-overflow-scrolling: touch;   /*サブメニューの縦スクロール add 20190921*/
	
}
.cp_offcm04 .cp_menu li {
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	list-style: none;
}
.cp_offcm04 .cp_menu li a {
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	display: block;
	padding: 5px 5px 5px 0px ; /*20px*/
	text-decoration: none;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}

.cp_offcm04 #cp_toggle04 {
	position: absolute;
	display: none;
	opacity: 0;
}
.cp_offcm04 #cp_toggle04:checked ~ .cp_menu {
	-webkit-transform: translateX(100vw);
	        transform: translateX(100vw);
}
/* menu toggle */
.cp_offcm04 #cp_toggle04 ~ label {
position:fixed;
    z-index: 200;
	display: block;
	width:120px; /*メニューを開くボタンのサイズ*/
	padding: 7px 4px 3px 0px;
	cursor: pointer;
	-webkit-transition: 0.5s transform;
	        transition: 0.5s transform;
	-webkit-transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	        transition-timing-function: cubic-bezier(.61,-0.38,.37,1.27);
	text-align: center;
	color: #000000; /*#990000*/
	background-color: rgba(186,150,80 ,1); /*rgba(168,145,40 ,1)*/
}
.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(133px);
	        transform: translateX(133px);
}
.cp_offcm04 #cp_toggle04 ~ label::before {
	font-family: 'FontAwesome';
	/*content: '\f0c9';*/ /*左位置での四角いマーク*/
    font-size: 2em
}

	/*content: '\f00d';*/　/*右移動後の四角いマーク*/
.cp_offcm04 #cp_toggle04:checked ~ label::before {
}

/* contents */
.cp_contents {
	color: #333333;
	text-align: center;
    background-color: rgba(255,255,255,1.0); /*rgba(255,255,255,0.8) 0.95 20200623*/
	margin-top:-4px;  /*追加 20200224*/
	min-height: 85vh;
	padding-bottom: 1px; /*追加 20200410*/
}

.cp_contents .inner {
	padding:10px 10px 0px 10px; /*15px*/
}



@media screen and (min-width: 1025px){ /*desktop*/

  .cp_offcm04 {
	top: 20px; /*20px*/
	left: 0px; /*20px*/ /*20px 20200516*/
  }

  .cp_offcm04 #cp_toggle04:checked ~ .cp_menu {
	-webkit-transform: translateX(100vw);
	        transform: translateX(100vw);
  }


  .cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(180px); /*123px 20200516*/
	        transform: translateX(180px); /*123px 20200516*/
  }
}
	

   @media screen and (min-width: 1280px){ /*wide用*/
   
   .cp_offcm04 {
	  top: 21px; 
	  left: 0px; /*ギャラリーメニュー用の左右に動くボタンの、クリック前の左からの位置 0 */
	  }

   .cp_offcm04 #cp_toggle04:checked ~ .cp_menu {
	-webkit-transform: translateX(100vw);
	        transform: translateX(100vw);
     }


   .cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(140px); /*ギャラリーメニュー用の左右に動くボタンの、クリック時に移動する左からの位置*/
	        transform: translateX(140px);
     }
   
   .cp_contents {
	margin-top:-2px;  /*追加 20200224*/
     }
   }
   

   @media screen and (min-width: 1801px){ /*Full HD用*/

      .cp_offcm04 {
	      top: 21px; /*20px*/
	      left: 0px; /*20px*/
      }

      .cp_offcm04 #cp_toggle04:checked ~ .cp_menu {
	      -webkit-transform: translateX(100vw);
	              transform: translateX(100vw);
      }


      .cp_offcm04 #cp_toggle04:checked ~ label {
	      -webkit-transform: translateX(-160px); /*20200326 105px*/
	              transform: translateX(-160px);
      }

      .cp_contents {
	      margin-top:-2px;  /*追加 20200224*/
      }


   }

   
   

   @media screen and (min-width: 1440px)  and (max-width: 1800px){ /*wide用*/

      .cp_offcm04 {
	      top: 21px; /*20px*/
	      left: 0px; /*20px*/
      }

      .cp_offcm04 #cp_toggle04:checked ~ .cp_menu {
	      -webkit-transform: translateX(100vw);
	              transform: translateX(100vw);
      }


      .cp_offcm04 #cp_toggle04:checked ~ label {
	      -webkit-transform: translateX(60px); /*20200326 105px*/
	              transform: translateX(60px);
      }

      .cp_contents {
	      margin-top:-2px;  /*追加 20200224*/
      }


   }


@media screen and (min-width: 900px) and (max-width: 1024px) { /*laptop用*/
/*@media screen and (max-width: 900px){*/ /*ipad,kindle用*/

.cp_offcm04 { /*ギャラリーメニューボタンの位置*/
	top: 20px; /*20px*/
	left: 0px; /*20px*/
}

.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(185px);
	        transform: translateX(185px);
}



}


@media screen and (min-width: 768px) and (max-width: 899px) {/*ipad,kindle用*/

.cp_offcm04 { /*ギャラリーメニューボタンの位置*/
	top: 21px; /*20px*/
	left: 0px; /*20px*/
}

.cp_offcm04 .cp_menu {
	top: 0px; /*左上からの位置*/
	left: -100vw; /*-100vw　左側に付ける*/
}

.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(200px);
	        transform: translateX(200px);
}

}


@media screen and (max-width: 767px) {/*スマホ用*/
	
.cp_cont {
	height: 50px; /*65vh*/	
	}

.cp_offcm04 {
	position: absolute;
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	top: -2px; /*20px*/
	left: 0px; /*20px*/
	display: inline-block;
}

.cp_offcm04 .cp_menu {
	top: 0px; /*左上からの位置*/
	left: -100vw; /*-100vw　左側に付ける*/
}

.cp_offcm04 .cp_menu li a {
	padding: 7px 5px 5px 0px ; /*20px*/

}

.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(200px);
	        transform: translateX(200px);
}


/* menu toggle */
.cp_offcm04 #cp_toggle04 ~ label {
    z-index: 200;
	display: block;
	width:80px; /*メニューを開くボタンのサイズ*/
	padding: 7px 5px 5px 0px;

}


}



@media screen and (max-width: 640px) {/*スマホ用*/
	
.cp_cont {
	height: 52px; /*65vh*/	
	}

.cp_offcm04 {
	position: absolute;
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	top: 6px; /*20px*/
	left: 0px; /*20px*/
	display: inline-block;
}

.cp_offcm04 .cp_menu {
	top: 0px; /*左上からの位置*/
	left: -100vw; /*-100vw　左側に付ける*/
}

.cp_offcm04 .cp_menu li a {
	padding: 7px 5px 5px 0px ; /*20px*/

}

.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(200px);
	        transform: translateX(200px);
}


/* menu toggle */
.cp_offcm04 #cp_toggle04 ~ label {
    z-index: 200;
	display: block;
	width:80px; /*メニューを開くボタンのサイズ*/
	padding: 6px 5px 2px 0px;

}


.cp_contents {
	margin-top:-2px;  /*追加 20200224*/

}



}

@media screen and (max-width: 568px) {/*スマホ用*/
	
.cp_cont {
	height: 48px; /*65vh*/	
	}

.cp_offcm04 {
	position: absolute;
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	top: 4px; /*20px*/
	left: 0px; /*20px*/
	display: inline-block;
}
}

@media screen and (max-width: 320px) {/*スマホ用*/
.cp_cont {
	height: 50px; /*65vh*/	
	}
.cp_offcm04 {
	position: absolute;
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	top: 1px; /*20px*/
	left: 0px; /*20px*/
	display: inline-block;
}

.cp_offcm04 .cp_menu {
	top: 0px; /*左上からの位置*/
	left: -100vw; /*-100vw　左側に付ける*/
}

.cp_offcm04 .cp_menu li a {
	padding: 7px 5px 5px 0px ; /*20px*/

}

.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(200px);
	        transform: translateX(200px);
}
	



@media screen and (max-width: 300px){ /*650px*/ /*スマホ用*/
	
.cp_cont {
	height: 50px; /*65vh*/	
	}


.cp_offcm04 { /*ギャラリーメニューボタンの位置*/
	top: 4px; /*20px*/
	left: -4px; /*20px*/
}

.cp_offcm04 .cp_menu {
	top: 0px; /*左上からの位置*/
	left: -102vw; /*-100vw　左側に付ける*/
}

.cp_offcm04 .cp_menu li a {
	padding: 6px 5px 5px 0px ; /*20px*/

}


.cp_offcm04 #cp_toggle04:checked ~ label {
	-webkit-transform: translateX(198px);
	        transform: translateX(198px);
}

.cp_contents {
	margin-top:-10px;  /*追加 20200224*/
}


}

@media screen and (max-width: 249px) {/*スマホ用*/
	
.cp_cont {
	height: 35px; /*65vh*/	
	}

.cp_offcm04 {
	position: absolute;
	z-index: 200; /*コンテンツと重なった時に上のレイヤーにする*/
	top: -12px; /*20px*/
	left: 0px; /*20px*/
	display: inline-block;
}
}

/* menu toggle */
.cp_offcm04 #cp_toggle04 ~ label {
    z-index: 200;
	display: block;
	width:80px; /*メニューを開くボタンのサイズ*/
	padding: 5px 5px 2px 0px;

}

.cp_contents {
	margin-top:-4px;  /*追加 20200224*/
}


}


	

/*ハンバーガーメニュー*/


.cp_hmenuac10 {
	position: absolute;
	width: 40px;
	height: 20px;
	padding: 1.5em;
	cursor: pointer;
}
.cp_hmenuac10 .cp_bar1st,
.cp_hmenuac10 .cp_bar2nd,
.cp_hmenuac10 .cp_bar3rd {
	position: absolute;
	width: 40px;
	height: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	        transition: all 0.5s ease-in-out;
	border-radius: 5px;
	background: #00acc1;
}
.cp_hmenuac10 .cp_bar1st {
	top: 21px;
}
.cp_hmenuac10 .cp_bar2nd {
	top: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	-webkit-transform:translateY(-50%);
	        transform: translateY(-50%);
}
.cp_hmenuac10 .cp_bar3rd {
	bottom: 21px;
}
.cp_hmenuac10 .cp_text {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.3s ease-in-out;
	        transition: opacity 0.3s ease-in-out;
	-webkit-transform: translate(-50%,-50%);
	        transform: translate(-50%,-50%);
	opacity: 0;
	color: #00acc1;
}
.cp_hmenuac10:hover .cp_bar1st {
	top: 8px;
}
.cp_hmenuac10:hover .cp_bar3rd {
	bottom: 8px;
}
.cp_hmenuac10:hover .cp_bar2nd {
	opacity: 0;
}
.cp_hmenuac10:hover .cp_text {
	opacity: 1;
}