@charset "UTF-8";
/* ******************************************************************
 *	File name		: base.css
 *	Summary			: css base
 * ******************************************************************
 */

/* -----------------------------------------------------------------
   base
----------------------------------------------------------------- */

body{
	position:relative;
	width:100%;
	line-height:145%;
	color:#222;
	}
	#wrapper{
		position:relative;
		width:100%;
		text-align:center;
		background:url(../../img/base/bg.jpg) repeat-y center top;
		background-size:contain;
		z-index:0;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#wrapper{
		background-attachment: fixed;
		background-size:cover;
	}
}

/* -----------------------------------------------------------------
   header
----------------------------------------------------------------- */

header{
	position:relative;
	width:1000px;
	max-width:100%;
	margin:0 auto 38px;
	padding:90px 20px 0;
	text-align:center;
	}
	#title{
		position:relative;
		width:450px;
		max-width:100%;
		margin: 0 auto 0px;
		z-index:10;
	}
	header h1{
		position:relative;
		width:470px;
		max-width:100%;
		margin:0 auto 23px;
	}
	header ul{
		display:flex;
		display:-webkit-flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:space-between;
		position:relative;
		width:470px;
		max-width:100%;
		margin: 0 auto 40px;
		padding:19px 0px 0;
		border-top:1px solid #000;
		list-style: none;
	}
	header ul li{
		position:relative;
		width:145px;
		height:43px;
	}
	header ul li a{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		position:relative;
		width:100%;
		height:100%;
		padding:0 5px;
		background:rgba(255,255,255,0.5);
		transition-duration:0.5s;
		}
		header ul li a:hover{
			background:rgba(255,255,255,1);
	}
	header ul li a img{
		position:relative;
		width:125px;
		height:35px;
}
header p.head_text{
	display:block;
	position:absolute;
	top:125px;
	right:40px;
    height:100%;
    font-size:1.4rem;
    writing-mode: vertical-rl;
    text-align: left;
    color:#786948;
    line-height: 1.5;
	text-shadow:1px 1px 5px #FFF, -1px -1px 5px #FFF,
	             -1px 1px 5px #FFF, 1px -1px 5px #FFF,
	             0px 1px 5px #FFF,  0-1px 5px #FFF,
	             -1px 0 5px #FFF, 1px 0 5px #FFF;
}
header p.lead{
	margin:0 auto 40px !important;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	header{
		margin:0 auto 15px;
		padding:30px 20px 0px;
	}
	header h1{
		width:235px;
		max-width:100%;
		margin:0 auto 15px;
	}
	header ul{
		width:100%;
		max-width:100%;
		margin: 0 auto 20px;
		padding:0px 0px 0;
		border-top:none;
	}
	header ul li{
		width:32%;
		height:43px;
	}
	header ul li a img{
		width:100%;
		height:auto;
	}
	header p.head_text{
		display:block;
		position:relative;
		top:0px;
		right:0px;
		width:100%;
	    height:auto;
	    margin:0 auto 15px;
	    font-size:1.3rem;
	    writing-mode:horizontal-tb;
	    text-align:center;
	}
	header p.lead{
		margin:0 auto 20px !important;
	}
}

/* -----------------------------------------------------------------
   main
----------------------------------------------------------------- */

main{
	display:block;
	position:relative;
	width:100%;
}
#main_contents{
	display:block;
	position:relative;
	margin:0 auto;
}

/* -----------------------------------------------------------------
   section
----------------------------------------------------------------- */

section{
	width:100%;
	margin:0 auto;
	padding:30px 20px;
}
section#another_premium{
	background:url(../../img/another/bg.jpg) no-repeat center top #222B47;
	background-attachment: fixed;
	background-size:cover;
}

/* h2_title */
section h2{
	display: flex;
	align-items: center;
	justify-content: center;
	margin:0 auto 20px;
	padding:10px;
	font-weight:bold;
	font-size: 1.5rem;
	line-height:1.15;
	background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.6), rgba(255,255,255,0));
	color:#000;
	}
	section h2 span{
		font-weight:bold;
		color:#000;
		}
		section h2 span span{
			font-weight:normal;
			font-size:1.2rem;
	}
	section h2:before,
	section h2:after{
		content:" ";
		border-top: 1px solid #000;
		width:220px;
	}
	section h2:before{
		margin-right:1em;
	}
	section h2:after{
		margin-left:1em;
}
section#another_premium h2{
	background:linear-gradient(90deg, rgba(213,185,135,0), rgba(213,185,135,0.2), rgba(213,185,135,0));
	color:#FFF;
	}
	section#another_premium h2 span{
		color:#FFF;
	}
	section#another_premium h2:before,
	section#another_premium h2:after{
		border-top: 1px solid #FFF;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	section h2,
	section#another_premium h2{
		background:none;
		border-bottom:1px solid #B39C74;
	}
	section h2:before,
	section h2:after{
		display:none;
	}
}

/* -----------------------------------------------------------------
   lead
----------------------------------------------------------------- */

.lead{
	margin:0 auto 20px;
	font-size:1.0rem;
	line-height:2.0;
	color:#000;
}
section#another_premium .lead{
	color:#FFF;
}

/* --- responsive --- */
@media only screen and (max-width:767px){
	.lead{
		font-size:0.87rem;
		line-height:1.3;
	}
}

/* -----------------------------------------------------------------
   more
----------------------------------------------------------------- */

.more{
	position:relative;
	width:100%;
	text-align:center;
	}
	.more a{
		display:inline-block;
		position:relative;
		width:320px;
		padding:10px 15px;
		max-width:100%;
		font-size:0.94rem;
		text-decoration:none;
		background:#B39C74;
		border:1px solid #B39C74;
		color:#FFF;
		}
		.more a::before{
			content:" ";
			display:block;
			position:absolute;
			top:2px;
			left:2px;
			width:calc(100% - 4px);
			height:calc(100% - 4px);
			border:1px solid #FFF;
		}
		.more a::after{
			content:" ";
			display:block;
			position:absolute;
			top:2px;
			left:2px;
			width:calc(100% - 4px);
			height:calc(100% - 4px);
			transition-duration:0.5s;
		}
		.more a:hover::after{
			background:rgba(255,255,255,0.1);
}

/* -----------------------------------------------------------------
   lineup
----------------------------------------------------------------- */

/* lineup */
.lineup{
	display:flex;
	display:-webkit-flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	width:1200px;
	max-width:100%;
	margin:0 auto 30px;
	list-style: none;
	transition-duration:0.5s;
}
.lineup > li{
	display:flex;
	display:-webkit-flex;
	-webkit-box-pack:justify;
	-ms-flex-pack:justify;
	justify-content:space-between;
	flex-wrap:wrap;
	position: relative;
	width:580px;
	max-width:49%;
	margin:0 0 20px;
	background:#FFF;
	border:1px solid #B39C74;
	-moz-box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
	box-shadow: 10px 10px 5px rgba(0,0,0,0.3);
	overflow: hidden;
	transition-duration:0.5s;
	}
	.lineup > li a{
		position:absolute;
		top:0px;
		left: 0px;
		display: block;
		width: 100%;
		height: 100%;
		text-indent:-9999px;
		z-index: 10;
		}
		.lineup li a:hover{
			background:rgba(213,185,135,0.1);
	}
	.lineup > li .premium_photo{
		width:356px;
		background:#CAC9B3;
		z-index:5;
		}
		.lineup > li .premium_photo img{
			width:100%;
			height: auto;
	}
	/* premium_detail */
	.lineup > li .premium_detail{
		position:relative;
		width:calc(100% - 356px);
		padding:15px 15px 65px 15px;
		text-align: left;
		color:#907E5D;
	}
	.lineup > li .premium_detail::before{
		content:" ";
		position:absolute;
		bottom:0px;
		right:0px;
		border:12px solid transparent;
		border-bottom:12px solid #B39C74;
		border-right:12px solid #B39C74;
		z-index:0;
	}
	.lineup > li .premium_detail h3{
		display:-webkit-flex;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:wrap;
		position:relative;
		min-height:70px;
		margin:0 0 10px;
		font-weight:bold;
		padding:10px 0;
		text-align:center;
		font-size: 1.15rem;
		color:#000;
		}
		.lineup > li .premium_detail h3::before,
		.lineup > li .premium_detail h3::after{
			content:" ";
			position:absolute;
			left:0px;
			width:100%;
			height:5px;
			background:url(../../img/base/slash.png) repeat 0 0;
		}
		.lineup > li .premium_detail h3::before{
			top:0px;
		}
		.lineup > li .premium_detail h3::after{
			bottom:0px;
	}
	.lineup > li .premium_detail h3 span{
		display:inline-block;
		width:100%;
		font-size:0.87rem;
		line-height:1.2;
	}
	/* ul */
	.lineup > li .premium_detail ul{
		list-style:none;
		}
		.lineup > li .premium_detail ul li{
			position: relative;
			margin:0 0 3px;
			padding:0 0 0 10px;
			font-size: 0.77rem;
			color:#907E5D;
			line-height:1.3;
		}
		.lineup > li .premium_detail ul li:after{
			content:" ";
			position: absolute;
			top:6px;
			left:0px;
			width:5px;
			height:5px;
			font-size: 0.8rem;
			background:#907E5D;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
	}
	.lineup > li .premium_detail p.fee{
		position:absolute;
		bottom:15px;
		left:0px;
		width:100%;
		height:50px;
		margin:0px;
		padding:0 15px 0;
		font-size:0.77rem;
		text-align:right;
		color:#907E5D;
		line-height:1.3;
		}
		.lineup > li .premium_detail p.fee span{
			display: inline-block;
			margin-left:3px;
			font-size:1.5rem;
}

/* --- responsive --- */
@media only screen and (max-width:1200px){
	.lineup > li{
		width:680px;
		max-width:100%;
		margin:0 auto 20px;
	}
}
@media only screen and (max-width:767px){
	.lineup > li{
		width:100%;
		max-width:356px;
	}
	/* premium_detail */
	.lineup > li .premium_detail{
		width:100%;
		padding:15px 15px 70px 15px;
		text-align: left;
		color:#907E5D;
		transition-duration:0.5s;
	}
}

/* -----------------------------------------------------------------
   another_premium
----------------------------------------------------------------- */

#another_premium .lineup > li{
	background:none;
	}
	#another_premium .lineup > li .premium_photo{
		background:#222B47;
	}
	#another_premium .lineup > li .premium_detail{
		background:#222B47;
	}
	#another_premium .lineup > li .premium_detail h3{
		color:#FFF;
	}
	#another_premium .lineup > li .premium_detail,
	#another_premium .lineup > li .premium_detail ul li,
	#another_premium .lineup > li .premium_detail p.fee{
		color:#C4AB7E;
}

/* -----------------------------------------------------------------
   another_co
----------------------------------------------------------------- */

#another_lead{
	position:relative;
	margin:25px 0;
	font-size:1.35rem;
	line-height:1.5;
	color:#FFF;
}
/* --- responsive --- */
@media only screen and (max-width:767px){
	#another_lead{
		margin:20px 0;
		font-size:1.25rem;
	}
}

#another_co{
	position:relative;
	left:-20px;
	width:calc(100% + 40px);
	max-width:2640px;
	margin:0 auto 20px;
	}
	#another_co ul{
		display:-webkit-flex;
		display:flex;
		-webkit-box-pack:justify;
		-ms-flex-pack:justify;
		justify-content:center;
		flex-wrap:wrap;
		list-style:none;
		width:100%;
	}
	#another_co ul li{
		position:relative;
		width:16.66%;
		background:linear-gradient(90deg, #D9BD8C, #AE905D);
		transition-duration:0.5s;
	}
	#another_co ul li a{
		display:block;
		position:relative;
		width:100%;
		height:100%;
		text-decoration:none;
	}
	#another_co ul li .co_img{
	}
	#another_co ul li .co_detail{
		padding:15px 15px 25px;
		}
		#another_co ul li .co_detail img{
			width:174px;
			max-width:100%;
			height:auto;
		}
		#another_co ul li .co_detail p{
			margin:10px 0 0;
			font-size:1.0rem;
			text-align:left;
			text-decoration:none;
			color:#000;
			transition-duration:0.5s;
}
/* --- responsive --- */
@media only screen and (max-width:1300px){
	#another_co ul li .co_detail{
		padding:15px 12px 15px;
	}
	#another_co ul li .co_detail p{
		font-size:0.9rem;
		line-height:1.5;
	}
}
@media only screen and (max-width:1100px){
	#another_co ul li .co_detail{
		padding:15px 10px 15px;
	}
	#another_co ul li .co_detail p{
		font-size:0.84rem;
		line-height:1.5;
	}
}
@media only screen and (max-width:900px){
	#another_co ul li .co_detail p{
		font-size:0.77rem;
	}
}
@media only screen and (max-width:767px){
	#another_co ul li{
		width:100%;
		margin:0 0 5px;
		overflow:hidden;
	}
	#another_co ul li a{
		padding-left:150px;
	}
	#another_co ul li .co_img{
		position:absolute;
		top:0px;
		left:0px;
		width:150px;
	}
	#another_co ul li .co_detail{
		padding:15px 15px 15px;
	}
}

/* -----------------------------------------------------------------
   postage
----------------------------------------------------------------- */

#postage{
	position:relative;
	padding:30px 20px;
	font-size:0.9rem;
	line-height:1.5;
	background:#DDD;
}

/* -----------------------------------------------------------------
   footer
----------------------------------------------------------------- */

footer{
	clear:both;
	position:relative;
	width:100%;
	min-height:100px;
	padding:30px 0px 15px;
	text-align:center;
	background:linear-gradient(90deg, #D7BC8B, #AE8F5D);
	z-index:10;
	}
	footer #copyright{
		width:100%;
		font-size:0.8em;
		text-align:center;
		color:#FFFFFF;
}