@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　middle
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Kv
---------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   ミドルページタイトル
---------------------------------------------------------------------------*/
.page-hd{
	background:url(../images/common/bg_dot.png);	
}
.page-hd .kv{
	position: relative;
	height: 600px;
}
.page-hd .kv .page-ttl{
	position: absolute;
	left:-950px;
	top:50%;
	transform:translateY(-50%);
	width: 640px;
	height: 260px;
	padding-top: 78px;
	background:#FFF;
	font-size:4.8rem;
	line-height:1.3;
	transition:.6s;
	transition-delay:.2s;
}
#Page .page-hd .kv.ready .page-ttl{
	left:0;
}
.page-hd .kv .page-ttl span{
	display:block;
	font-size:2.2rem;
	color:#F6861F;
}
.page-hd .breadcrum{
	padding: 25px 0;
}
.page-hd .breadcrum ul{
	width: 1200px;
	margin: 0 auto;
	line-height:1;
	font-size:1.4rem;
	text-align:right;
}
.page-hd .breadcrum li{
	position: relative;
	display:inline-block;
	padding:0 12px;
}
.page-hd .breadcrum li a::after{
	position: absolute;
	right:0;
	top:1px;
	display:block;
	content:"";
	width: 1px;
	height: 13px;
	background:#D6D6D6;
	
}


/*--------------------------------------------------------------------------
   画像なしページタイトル
---------------------------------------------------------------------------*/

.page-hd.no-vi .kv{
	height: 220px;
}
.page-hd.no-vi .kv .page-ttl {
	top: 50px;
	transform:none;
	left: 0;
	width: 550px;
	height: 147px;
	padding-top: 34px;
	padding-left: 200px;
	font-size: 4.4rem;
}
.page-hd.no-vi .kv .page-ttl span{
	font-size: 1.8rem;
}
.page-hd.no-vi .breadcrum{
	padding: 15px 0;
}



/* intro
-----------------------------------------------------------------*/
.intro{
	padding: 80px 0 50px;
	text-align:	center;
}
.intro h2{
	margin-bottom: 20px;
	font-size:3.6rem;
	line-height:1.4;	
}


/*--------------------------------------------------------------------------
   ライン枠
---------------------------------------------------------------------------*/
.frame_box{
	position: relative;
	border:1px solid #E5E5E5;
}
.frame_box_inline{
	position: relative;
	padding: 65px 60px;
}
.frame_box::before,
.frame_box::after,
.frame_box_inline::before,
.frame_box_inline::after{
	position: absolute;
	display:block;
	content:"";
	width: 101px;
	height: 101px;
	pointer-events: none;		
}
.frame_box::before,
.frame_box::after{
	top:-1px;
}
.frame_box_inline::before,
.frame_box_inline::after{
	bottom:-1px;	
}
.frame_box::before,
.frame_box_inline::before{
	left:-1px;	
}
.frame_box::after,
.frame_box_inline::after{
	right:-1px;
}
.frame_box::before{ background:url(../images/middle/frameparts01.png) no-repeat; }
.frame_box::after{ background:url(../images/middle/frameparts02.png) no-repeat; }
.frame_box_inline::before{ background:url(../images/middle/frameparts03.png) no-repeat; }
.frame_box_inline::after{ background:url(../images/middle/frameparts04.png) no-repeat; }

.frame_box .fb_ttl{
	margin-bottom: 30px;
	font-size:2.6rem;
	text-align:center;
}
.frame_box .fb_ttl_inner{
	padding-bottom: 3px;
	border-bottom:1px solid #000;	
}


/*--------------------------------------------------------------------------
   PICKUP
---------------------------------------------------------------------------*/
.pickup{
	position: relative;
	border:10px solid #FFE0C1;
	background:#FFF;
	padding: 60px 65px 50px;
}
.pickup::after{
	position: absolute;
	left:-10px;
	top:-10px;
	display:block;
	content:"";
	width: 76px;
	height: 76px;
	background:url(../images/middle/ico_pickup.png) no-repeat;	
}

/*--------------------------------------------------------------------------
   カテゴリーコンテンツ紹介
---------------------------------------------------------------------------*/
.cat-cont{
	padding: 55px 0 60px;
	background:url(../images/common/bg_dot.png);
}
.cat-cont h2{
	margin-bottom: 25px;
	font-size:3rem;
	line-height:1.2;	
}
.cat-cont h2 span{
	position: relative;
	top:-5px;
	padding-left: 18px;
	font-size:1.4rem;
	color:#F6881F;
}
.cat-cont ul li{
	display:inline-block;
	width: 260px;
}
.cat-cont ul li+li{
	margin-left: 53px;		
}
.cat-cont ul li .link{
	padding: 18px 0 18px 35px;
	background:url(../images/common/arw_h_o_s.png) no-repeat 15px center #FFF;
	text-align:left;
	transition:.3s;	
}
.cat-cont a:hover .link{
	background-position:20px center;
}





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

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   ミドルページタイトル
---------------------------------------------------------------------------*/
.page-hd .kv{
	position: relative;
	height: 175px;
}
.page-hd .kv .page-ttl{
	position: absolute;
	left:-110%;
	width: 260px;
	height: 120px;
	padding-top: 25px;
	font-size:3rem;
	line-height:1.3;
}
.page-hd .kv .page-ttl span{
	font-size:2rem;
}
.page-hd .breadcrum{
	padding: 12px 0;
}
.page-hd .breadcrum ul{
	display:none;	
}

/*--------------------------------------------------------------------------
   画像なしページタイトル
---------------------------------------------------------------------------*/

.page-hd.no-vi .kv{
	height: 175px;
}
.page-hd.no-vi .kv .page-ttl {
	top: 30px;
	transform:none;
	left: 0;
	width: 240px;
	height: 115px;
	padding-top: 32px;
	padding-left: 18px;
	font-size: 2.5rem;
}
.page-hd.no-vi .kv .page-ttl span{
	font-size: 1.3rem;
}
.page-hd.no-vi .breadcrum{
	display:none;
}

/* intro
-----------------------------------------------------------------*/
.intro{
	padding: 40px 0 30px;
}
.intro h2{
	margin-bottom: 15px;
	font-size:2.2rem;
	line-height:1.5;	
}


/*--------------------------------------------------------------------------
   ライン枠
---------------------------------------------------------------------------*/
.frame_box_inline{
	padding: 40px 25px;
}
.frame_box::before,
.frame_box::after,
.frame_box_inline::before,
.frame_box_inline::after{
	width: 50px;
	height: 50px;
	background-size:50px auto;
}

.frame_box .fb_ttl{
	margin-bottom: 20px;
	font-size:2rem;
	line-height:1.5;
	text-align:center;
	padding-bottom: 10px;
	border-bottom:1px solid #000;		
}
.frame_box .fb_ttl_inner{
	border-bottom:none;	
}


/*--------------------------------------------------------------------------
   PICKUP
---------------------------------------------------------------------------*/
.pickup{
	position: relative;
	border:7px solid #FFE0C1;
	padding: 40px 15px 35px;
}
.pickup::after{
	left:-7px;
	top:-7px;
	width: 60px;
	height: 60px;
	background-size:100% auto;	
}

/*--------------------------------------------------------------------------
   カテゴリーコンテンツ紹介
---------------------------------------------------------------------------*/
.cat-cont{
	padding: 40px 0 50px;
	background:url(../images/common/bg_dot.png);
}
.cat-cont h2{
	margin-bottom: 25px;
	font-size:2rem;
	line-height:1.2;
}
.cat-cont h2 span{
	top:-2px;
	padding-left: 12px;
	font-size:1.3rem;
}
.cat-cont ul li{
	display:block;
	width: 100%;
}
.cat-cont ul li+li{
	margin: 20px 0 0;		
}
.cat-cont ul li .link{
	padding: 18px 0 18px 35px;
	background:url(../images/common/arw_h_o_s.png) no-repeat 15px center #FFF;
	text-align:left;
	transition:.3s;	
}
.cat-cont a:hover .link{
	background-position:20px center;
}


}