@charset "utf-8";

/*
============================================
base.css
============================================
*/

/* ---------------------------------------------------------
■ 汎用
--------------------------------------------------------- */
.mt0{
	margin-top: 0px !important; }
.mt10{
	margin-top: 10px !important; }
.mt25{
	margin-top: 25px !important; }

.lh0 {
	line-height: 0; }

.clearFix:after{
	content: ".";
	display: block; 
	clear: both; 
	height: 0; 
	font-size:0;	
	visibility:hidden; }

.spEle {
	display: none; }
a:hover{
	text-decoration: none;
}

/* ---------------------------------------------------------
■ 全体
--------------------------------------------------------- */
body{
	font-family:"DIN Next W01 Regular", YuGothic,"游ゴシック","ＭＳ Ｐゴシック","MS P Gothic","MS-PGothic","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,arial,helvetica,clean,sans-serif;
	font-size: 14px;
	background: #FFF none repeat scroll 0% 0%;
	color: #696969; }

a:hover {
	opacity: 0.7;
	transition: all 0.3s; }


/* ---------------------------------------------------------
■ TOP
--------------------------------------------------------- */
.top .contents_wrapper{
	background-image: url(../images/bg.jpg);
	padding: 60px 0;
}
.top .main_image_inner {
 	margin: 0 auto 60px auto;
	width:900px;
	position: relative;
}
.top .main_image_inner h2{
	position: absolute;
	top:160px;
	right:130px;
	font-size:38px;
	color: #000;
	line-height: 180%;
}
.top .main_image_inner.vol4 h2{
	top:140px;
}
.top .index{
	display: flex;
	margin: 0 auto;
	width: 900px;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
}
.top .index li{
	width:442px;
	cursor: pointer;
	position: relative;
}
.top .index li img{
	position: relative;
	top:0;
	left:0;
}
.top .index li div{
	position: absolute;
	top:50%;
	left: 50%;
	width:270px;
	margin-left: -125px;
	margin-top:-45px; 
}
.ttl_index{
	width:900px;
	margin: 0 auto 60px auto;
	font-size:36px;
	color: #000;
	text-align: center;
	display: block;
}

@media all and (-ms-high-contrast: none){
.top .index li h3{
	margin:140px 0 0 140px;
	line-height: 200%;
}
}
.top .index li h3{
	margin:0;
	font-size:24px;
	color:#000;
}
.top .index li p{
	margin:0;
	font-size:24px;
	color:#000;
	display: block;
	text-align: right;
}
.top .index li p i{
	position: relative;
	margin-right: 34px;
}
.top .index li p i::after{
	content: "▶";
	font-style:normal;
	font-size:12px;
	width:24px;
	height: 24px;
	margin-bottom: 60px;
	border:2px solid #000;
	display: inline-block;
	border-radius: 12px;
	box-sizing: border-box;
	line-height: 24px;
	text-align: center;
	margin-right: 10px;
	vertical-align: middle;
	position: absolute;
}
.top .index li a{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	left: 0;
	display: block;
	z-index: 22;
}

/* ---------------------------------------------------------
■ 共通
--------------------------------------------------------- */
.main_contents{
	width:900px;
	margin: 60px auto;
}
.vol1,.vol2,.vol3,vol4,vol5{
	color: #000;
}
/* ---------------------------------------------------------
■ コンテンツ vol1
--------------------------------------------------------- */
.vol1 .main_image_wrapper,
.vol2 .main_image_wrapper,
.vol3 .main_image_wrapper{
	background-image: url(/magazine/tips/howtochoose/images/bg.jpg);
	padding: 60px 0;
}
.vol1 .main_image_inner,
.vol2 .main_image_inner,
.vol3 .main_image_inner{
	width:900px;
	margin: 0 auto;
 }
.vol1 .main_image_inner dl,
.vol2 .main_image_inner dl,
.vol3 .main_image_inner dl{
	display: flex;
}
.vol1 .main_image_inner dl dt,
.vol2 .main_image_inner dl dt,
.vol3 .main_image_inner dl dt{
	position: relative;
}
.vol1 .main_image_inner dl dt img,
.vol2 .main_image_inner dl dt img,
.vol3 .main_image_inner dl dt img{
	position: relative;
}
.vol2 .main_image_inner dl dt img{
	margin-top: -30px;
}
.vol2 .main_image_inner dl dt img.bg_paint{
	position: absolute;
	top:-30px;
	left: -230px;
}
.vol1 .main_image_inner dl dt h2,
.vol2 .main_image_inner dl dt h2,
.vol3 .main_image_inner dl dt h2
{
	position: absolute;
	top:50%;
	left:50%;
	font-size:28px;
	color: #000;
	display: block;
	height: 395px;
	width:auto;
	margin-top: -56px;
	margin-left: -100px;
}
@media all and (-ms-high-contrast: none){
.vol1 .main_image_inner dl dt h2,
.vol2 .main_image_inner dl dt h2,
.vol3 .main_image_inner dl dt h2
{
	line-height: 180%;
}
}
.vol3 .main_image_inner dl dt h2{
	margin-top: -56px;
	margin-left: -120px;
}
.vol1 .main_image_inner dl dd,
.vol2 .main_image_inner dl dd,
.vol3 .main_image_inner dl dd{
	margin-left: 60px;
}
.vol1 .main_image_inner dl dd p,
.vol2 .main_image_inner dl dd p,
.vol3 .main_image_inner dl dd p{
	font-size: 16px;
	line-height: 200%;
	margin-top: 60px;
	color: #000;
	font-weight: bold;
}
.main_contents{
	width:900px;
	margin: 60px auto;
}

.vol1 .main_contents h3{
	font-size:24px;
	color:#000;
	font-weight:bold;
} 
.vol1 .main_contents ul {
	display: flex;
	margin: 30px 0;
	width:900px;
}
.vol1 .main_contents ul li{
	margin-right: 40px;
}
.vol1 .main_contents ul li:first-of-type{
	width:156px;
}
.vol1 .main_contents ul li:last-of-type{
	margin-right: 0;
	width:280px;
	text-align: center;
}
.vol1 .main_contents ul li:last-of-type img{
	margin: 10px 0;
}
.vol1 .main_contents ul li:last-of-type p{
	font-size:12px;
	text-align: left;
}
.vol1 .main_contents ul li:last-of-type h4{
	font-size:18px;
	color:#000;
	font-weight:bold;
}
.vol1 .main_contents ul li:nth-of-type(2){
	width:400px;
}
.vol1 .main_contents ul li:nth-of-type(2) p{
	border:2px #ddd solid;
	padding: 20px;
	line-height: 200%;
	border-radius: 10px;
}


/* ---------------------------------------------------------
■ コンテンツ Vol2
--------------------------------------------------------- */
.vol2 .main_contents ul {
	display: flex;
	margin: 30px 0;
	width:900px;
	flex-wrap: wrap;
	border-bottom: 1px dashed #999;
}
.vol2 .main_contents ul:last-of-type {
	border-bottom: none;
}
.vol2 .main_contents li {
	width:420px;
	margin-bottom: 60px;
	position: relative;
}
.vol2 .main_contents li:nth-of-type(odd) {
	margin-right:60px;
}
.vol2 .main_contents li h3{
	font-size:20px;
	margin-bottom: 10px;
}
.vol2 .main_contents li img{
	width:420px;
}
.vol2 .main_contents li span.badge {
	padding: 5px 10px;
	color:#fff;
	display:inline-block;
	position: absolute;
	top:60px;
	left: 0;
}
.vol2 .main_contents li h4{
	padding: 5px 10px;
	color:#fff;
	display:block;
}
.vol2 .main_contents li p{
	margin: 10px 0;
	line-height: 200%;
	height: 10em;
}
.bg_black{
	background: #000;
}
.bg_silver{
	background: #999999;
}
.bg_pink{
	background: #EC6D81;
}
.bg_white{
	background: #74939B;
}
.bg_brown{
	background: #814200;
}
.txt_black{
	color: #000;
	font-size:28px;
	margin-left: 5px;
}
.txt_silver{
	color: #999999;
	font-size:28px;
	margin-left: 5px;
}
.txt_pink{
	color: #EC6D81;
	font-size:28px;
	margin-left: 5px;
}
.txt_white{
	color: #74939B;
	font-size:28px;
	margin-left: 5px;
}
.txt_brown{
	color: #814200;
	font-size:28px;
	margin-left: 5px;
}

/* ---------------------------------------------------------
■ コンテンツ Vol3
--------------------------------------------------------- */
.vol3 .main_contents dl{
	display: flex;
	margin-bottom: 60px;
}
.vol3 .main_contents dl dt h3{
	background-image: url(../images/img_vol3_hukidashi.jpg);
	width: 226px;
	height: 160px;
	box-sizing: border-box;
	font-size:28px;
	text-align: center;
	padding-top: 50px;
	line-height: 150%;
}
.vol3 .main_contents dl dt h3.line3{
	padding-top: 30px;
}
.vol3 .main_contents dl dt p{
	line-height: 200%;
	margin-top: 30px;
}
.vol3 .main_contents dl dd{
	margin-left: 40px;
}
.txt_blue{
	color: #00AFCC;
	font-size:28px;
	margin-left: 5px;
}
.txt_green{
	color: #70B52C;
	font-size:28px;
	margin-left: 5px;
}
.txt_orange{
	color: #E77600;
	font-size:28px;
	margin-left: 5px;
}

/* ---------------------------------------------------------
■ コンテンツ vol4
--------------------------------------------------------- */
.mainContents{
	display: flex;
	width:900px;
	margin: 0 auto;
	color: #000;
}
.left{
width:460px;
}
.left dl{
	position: relative;
	margin-bottom: 20px;
	
}
.left dl dt{
	position: absolute;
}

.left dl dd{
	position: relative;
}
.left dl:nth-of-type(even) dt{
	bottom:-10px;
	right:0;
	z-index: 22;
}
.left dl:nth-of-type(even) dd{
	border: 2px solid #814200;	
	border-radius: 8px;
	padding: 10px;
	background: #fff;
	box-sizing: border-box;
	padding-right: 60px;
	margin-right: 20px;
}
.left dl:nth-of-type(even) dd.incImg{
	position: relative;
}
.left dl:nth-of-type(even) dd.incImg p{
	width:250px;
}
.left dl:nth-of-type(even) dd.incImg img{
	position: absolute;
	top:-30px;
	right:-30px;
}
@media all and (-ms-high-contrast: none){
.left dl:nth-of-type(even) dd.incImg img{
	top:-30px;
	right:-20px;
}
}
.left dl:nth-of-type(odd){
	height: 53px;
}
.left dl:nth-of-type(odd) dd{
	margin-left: 60px;
	line-height: 53px;
}
.left dl:nth-of-type(odd) dd.line_2{
	line-height:180%;
}
.right{
	width:400px;
	margin-left: 40px;
}
.right li{
	margin-bottom: 20px;
}
.right img{
	width:400px;
}
.right p{
	margin-top: 10px;
}
.right .note{
	font-size:12px;
	text-align: right;
}
/* ---------------------------------------------------------
■ こだわりポイント
--------------------------------------------------------- */
.kodawari{
	background: #EEE4DE;
	padding: 120px 0 60px 0;
}
.kodawari .kodawariInner{
	width:900px;
	margin: 0 auto;
	position: relative;
}

.kodawari .kodawariInner .titl_kodawari{
	position: absolute;
	top:-110px;
	left:-30px;
}
.kodawari .kodawariInner.vol1 h3,
.kodawari .kodawariInner.vol3 h3{
	font-size:28px;
	padding: 30px 0;
}
.kodawari .kodawariInner.vol1 ul li{
	background: #fff;
	padding: 40px;
	box-sizing: border-box;
	margin-bottom: 40px;
	text-align: left;
}
.kodawari .kodawariInner.vol1 ul li dl{
	display: flex;
}
.kodawari .kodawariInner.vol1 ul li dl dt h4{
	font-size:22px;
	margin-bottom: 20px;
}
.kodawari .kodawariInner.vol1 ul li dl dt p{
	line-height:200%;
}
.kodawari .kodawariInner.vol1 ul li dl dd{
	margin-left: 40px;
}
.kodawari .kodawariInner.vol1 ul li dl dd img{
	width:430px;
}
.kodawari .kodawariInner.vol1 ul li dl dd p{
	font-size:12px;
}
.kodawari .kodawariInner.vol1 ul li:last-child{
	margin-right: 0;
}
.kodawari .kodawariInner ul.vol2{
	display: flex;
	padding-top: 20px;
}
.kodawari .kodawariInner ul.vol2 li{
	background: #fff;
	padding: 30px;
	box-sizing: border-box;
	text-align: center;
	width:430px;
}
.kodawari .kodawariInner ul.vol2 li h3{
	font-size:20px;
	text-align: left;
	margin-bottom: 20px;
}
.kodawari .kodawariInner ul.vol2 li p{
	margin-top: 20px;
	line-height: 200%;
	text-align: left;
	
}
.kodawari .kodawariInner ul.vol2 li:last-child{
	margin-left: 40px;
}
.kodawari .kodawariInner.vol3 ul{
	margin-top: 40px;
}
.kodawari .kodawariInner.vol3 ul li{
	padding: 30px;
	margin-bottom: 40px;
	background: #fff;
	position: relative;
	height: auto;
}
.kodawari .kodawariInner.vol3 ul li::after{
	display: block;
	width:300px;
	position: relative;
}
.kodawari .kodawariInner.vol3 ul > li::before{
	display: block;
	width:300px;
	position: absolute;
	content: "▼ ▼ ▼";
	font-size:20px;
	bottom:-35px;
	left: 50%;
	color:#ae8d78;
}
.kodawari .kodawariInner.vol3 ul > li.last::before{
	display: none;
}
.kodawari .kodawariInner.vol3 ul li img{
	width:auto;
	margin-top: 20px;
}
.kodawari .kodawariInner.vol3 ol{
	display: flex;
}
.kodawari .kodawariInner.vol3 ol li{
	width:420px;
	position: relative;
}
.kodawari .kodawariInner.vol3 ol li p{
	display: block;
	background: #ae8d78;
	text-align: center;
	color: #fff;
	padding: 5px 0;
}
.kodawari .kodawariInner.vol3 ol li a{
	position: absolute;
	width: 100%;
	height: 100%;
	display: block;
	top:0;
	left: 0;
	background-color: rgba(255,255,255,0);
}
.kodawari .kodawariInner.vol3 ol li a:hover{
	background-color: rgba(255,255,255,0.6);
}
.kodawari .kodawariInner.vol3 ol li img{
	width:100%;
}
.try > p{
	margin-bottom: 20px;
}

.kodawari .kodawariInner.vol3 ol li:last-child{
	margin-left: 20px;
}
/* ---------------------------------------------------------
■ product_info
--------------------------------------------------------- */
.product_info{
	border:4px solid #ddd;
	width:900px;
	box-sizing: border-box;
	margin: 60px auto;
	padding: 30px;
	position: relative;
	text-align: center;
}
.product_info h3{
	font-size:24px;
	color:#000;
	text-align: left;
}
.product_info a{
	position: absolute;
	display: block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: rgba(255,255,255,0.00);
}
.product_info a:hover{
	background: rgba(255,255,255,0.60);
}
/* ---------------------------------------------------------
■ 次ページ、前ページ案内
--------------------------------------------------------- */
.page{
	width:900px;
	margin: 80px auto;
	font-weight: bold;
	text-align: center;
}
.page ul{
	width:900px;
	display: flex;
}
.page ul li{
	width:450px;
	text-align: center;
	position: relative;
}
.page ul li span{
	border-right:1px solid #000;
	padding-right:10px;
	margin-right: 10px;
}
.page ul li:last-child{
	margin-left: 40px;
}
.page p{
	margin: 40px 0;
}

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
.to_top {
	position: fixed;
	right: 10px;
	bottom: 30px;
	width: 120px;
	opacity: 0.6;
	z-index: 10; }

.to_top img {
	width: 100%; }

.footer {
  text-align: center;
}
.footer .top_page {
  font-size: 14px;
  color: #FFFFFF;
  display: inline-block;
  margin-top: 50px;
}
.footer .kai_copyright {
  font-size: 11px;
  color: #91939F;
  text-align: center;
  margin-top: 15px;
}

/* sns */
.snsWrapper {
	line-height: 0;
	text-align: center; }

.snsWrapper .snsInner {
	display: inline-block;
	margin: 0 3px;
	vertical-align: top;
	line-height: 0; }

.ml57{
	margin-left: 57px !important;
}

.footer{
margin-top: 60px;
text-align: left;
}