@charset "utf-8";
/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/
*,
*::before,
*::after {box-sizing: inherit}

/*=================================================
 レイアウトのためのCSS
==================================================*/
body{
	background:#fff;
	padding:0;
	margin:0;
	font-family: "Noto Sans Japanese","Hiragino kaku Gothic Pron","ヒイラギ各ゴ proN w3","メイリオ",Verdana,sans-serif;
}
/*-----------------------------------------
font-family: 'Inter', 'Noto Serif JP';
font-family: 'Noto Serif JP', serif;
font-family: 'Sawarabi Mincho', serif;
font-family: 'Inter', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Rubik', sans-serif;
font-family: 'Sawarabi Mincho', serif;
font-family: 'Lato', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Rubik', sans-serif;
------------------------------------------*/
a{
	color: #333;
	text-decoration: none;
}
.lead{
	margin:20px 0 0 0;
}
.btn-block{
	width:200px;  
	padding: 30px;
}
ul{
	list-style-type:none;
}

/**************************************************************
	ヘッダー
**************************************************************/
#hed{
	width:100%;
	height:80px;
	/*position:fixed;*/
	position:sticky;
	top:0;
	border-bottom:1px solid #ccc;
	z-index:1000;
	background:#fff;
}
.hed_inner{
	width:90%;
	height:70px;
	margin:0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.g-menu{
	width:60%;
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.logo{
	width:20%;
	display:block;
}
.logo img{
	width:50%;
}
.pc_menu{
	width:55%;
}
ul.sub_menu{
	width:100%;
	display:flex;
	justify-content:flex-end;
	padding:10px;
	letter-spacing:0.2rem;
}
ul.sub_menu li{
	width:30%;
}
ul.sub_menu li a{
	font-family: 'Lato', sans-serif;
	font-size:0.8rem;
	font-weight:600;
}

ul.sub_menu li:nth-child(1) a,
ul.sub_menu li:nth-child(2) a{
	background:#333;
	color:#fff;
	padding:10px 20px;
	border-radius:30px;
}


/*---- ボタン外側※レイアウトによってpositionや形状は適宜変更してください -----*/
.openbtn{
	position: relative;/*ボタン内側の基点となるためrelativeを指定*/
	background:#333;
	cursor: pointer;
	width: 50px;
	height:50px;
	border-radius: 5px;
}
	/*ボタン内側*/
	.openbtn span{
		display: inline-block;
		transition: all .4s;/*アニメーションの設定*/
		position: absolute;
		left: 14px;
		height: 2px;
		border-radius: 5px;
		background: #fff;
		width: 45%;
	}

/**************************************************************
  ハンバーガーライン
**************************************************************/
.openbtn span:nth-of-type(1) {
	top:13px; 
}
.openbtn span:nth-of-type(2) {
	top:19px;
}
.openbtn span:nth-of-type(3) {
	top:25px;
}
.openbtn span:nth-of-type(3)::after {
	content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
	position: absolute;
	top:5px;
	left:-2px;
	color: #fff;
	font-size: 0.6rem;
	text-transform: uppercase;
}
/*-- activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更 --*/
.openbtn.active span:nth-of-type(1) {
	top: 14px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn.active span:nth-of-type(3){
	top: 26px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}
.openbtn.active span:nth-of-type(3)::after {
	content:"Close";/*3つ目の要素のafterにClose表示を指定*/
	transform: translateY(0) rotate(-45deg);
	top:5px;
	left:4px;
}
/**************************************************************
	クロックした後
***************************************************************/
.sidemenu{
	height:100vh;
	padding-top:100px;
	position:fixed;
	right:-40%;	/* メニュー幅 */
	transition:all 0.6s;
	top:0;
	width:40%;	/* メニュー幅 */
	z-index:10;
	background:#fff;
}
.sidemenu ul li{
	padding:20px;
}









/**************************************************************
	トップ下 
***************************************************************/
.line-up{
	margin-top:40px;
	width:100%;
}


/*==================================================
スライダーのためのcss
===================================*/
ul.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
	width:94%;
	margin:0 auto;
	padding:0;
}
ul.slider li{
	display:inline-block;
	width:400px;
	height:450px;
	padding:0;
	background:#fff;
	margin-right:20px;
}
ul.slider li .pt1{
	display:block;
	width:400px;
	color:#fff;
	padding:5px 0;
	margin:0 auto;
	text-align:center;
	background:#bb5535;
	font-family: 'Inter', 'Noto Serif JP';
}
ul.slider li .pt_img{
	width:330px;
	height:330px;
	margin:10px auto;
	padding:0;
}

ul.slider li .pt_img img{
	width:330px;
	padding:10px;
	border-radius:165px;
}
ul.slider li .pay_waku{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	border-left:4px solid #333;
}
ul.slider li .pay_waku .kakaku{
	display:block;
	width:33%;
	padding:5px 0;
	font-weight:500;
	font-size:1.2rem;
	text-align:center;
}
ul.slider li .pay_waku .s_t{
	display:block;
	width:16%;
	text-align:right;
	margin-right:1%;
	border-right: 2px solid #ccc;
	padding:2px 6px 2px 0;
}
ul.slider li .pay_waku .in_no{
	width:13%;
}
ul.slider li .pay_waku .no-spin{
	width:100%;
	/*border:2px solid #ccc;*/
	border-radius:5px;
	padding:0 0 0 5px;
}
ul.slider li .pay_waku .in_cr{
	display:block;
	width:38%;
	text-align:center;
}
ul.slider li .pay_waku .in_cr a{
	background:#000;
	color:#fff;
	font-size:0.8rem;
	font-family: 'Rubik', sans-serif;
	font-weight:700;
	padding:10px 15px;
	border-radius:18px;
}
/****************************************
 スライダーの矢印
****************************************/
.slider .slick-slide {
    margin:0 10px;
}
.slick-prev, 
.slick-next {
	position: absolute;/*絶対配置にする*/
	top: 42%;
	cursor: pointer;/*マウスカーソルを指マークに*/
	outline: none;/*クリックをしたら出てくる枠線を消す*/
	border-top: 2px solid #666;/*矢印の色*/
	border-right: 2px solid #666;/*矢印の色*/
	height: 15px;
	width: 15px;
}
.slick-prev {/*戻る矢印の位置と形状*/
	left: -1.5%;
	transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
	right: -1.5%;
	transform: rotate(45deg);
}
/*ドットナビゲーションの設定*/

.slick-dots {
	text-align:center;
	margin:20px 0 0 0;
	background:#ccc;
	width:;
}

.slick-dots li {
	display:inline-block;
	margin:0 5px;
}
.slick-dots button {
	color: transparent;
	outline: none;
	width:8px;/*ドットボタンのサイズ*/
	height:8px;/*ドットボタンのサイズ*/
	display:block;
	border-radius:50%;
	background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
	background:#333;/*ドットボタンの現在地表示の色*/
}