@charset "utf-8";

/* 基礎レイアウト
========================================================= */

img { width: 100%; height: auto; vertical-align: top; }

#contentsheader {
	width: 100%;
	height: 360px;
	display: block;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	text-align: center;
	overflow: hidden;
}
#contentsheader p.icon {
	width: 55px;
	height: 55px;
	background: url(/images/h1_special2_icon.svg) no-repeat;
	margin: 120px auto 25px;
}
#contentsheader h1 { color: #ffffff; font-size: 48px; margin-right: auto; margin-left: auto; }



@media screen and (max-width: 1199px) {
	#contentsheader { height: 320px; }
	#contentsheader p.icon { margin-top: 100px; }
}

@media screen and (max-width: 992px) {
	#contentsheader { height: 280px; }
	#contentsheader p.icon { margin-top: 80px; }
}

@media screen and (max-width: 768px) {
	#contentsheader { height: 240px; }
	#contentsheader p.icon { width: 44px; height: 44px; margin-top: 60px; margin-bottom: 22px; }
	#contentsheader h1 { font-size: 36px; }
}

@media screen and (max-width: 480px) {
	#contentsheader { height: 160px; }
	#contentsheader p.icon { width: 33px; height: 33px; margin-top: 40px; margin-bottom: 16px; }
	#contentsheader h1 { font-size: 24px; }
}

#snsArea .sns_icon_area .fb-share-button,
#snsArea .sns_icon_area .twitter-share-button {
	display: inline-block;
	vertical-align: bottom;
}





/* waExp
========================================================= */

#waExp { line-height: 1.0; }



@media screen and (max-width: 767px) {
	
}





/* waExpMain
========================================================= */

#waExp .main { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); margin: 50px 0 0 0; }
#waExp .main h2 { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; }
#waExp .main h2 img:nth-child(1) {
	width: calc(490/1100 * 100%);
	max-width: 490px;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}

#waExp .main .lead {
	display: table;
	font-size: 20px;
	line-height: 1.9;
	text-align: center;
	margin: 40px auto 0;
}

#waExp .main .sns_icon_area { margin: 40px auto 0; }



@media screen and (max-width: 1200px) {
	#waExp .main .lead { font-size: 1.65vw; }
}

@media screen and (max-width: 767px) {
	#waExp .main { margin: 20px 0 0 0; }
	#waExp .main h2 img:nth-child(1) { width: calc(300/375 * 100%); }
	
	#waExp .main .lead { font-size: 17px; text-align: left; margin: 20px auto 0; }
	#waExp .main .lead br { display: none; }
	
	#waExp .main .sns_icon_area { margin: 15px auto 0; }
}





/* content
========================================================= */

#waExp section { margin: 100px 0 0 0; }
#waExp section + section { margin: 150px 0 0 0; }

#waExp section h3 { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); }
#waExp section h3 img { width: 100%; max-width: 1100px; display: block; margin: 0 auto; }

#waExp section .title {
	width: 100%;
	max-width: 1100px;
	background-image: url(/images/special/19/title_bg.jpg);
	background-repeat: repeat-y;
	font-family: "游ゴシック", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", sans-serif;
	font-weight: 500;
	box-sizing: border-box;
	padding: 30px 0 0 0;
	margin: 70px auto 0;
	position: relative;
	overflow: hidden;
}
#waExp section .content + .title { margin: 120px auto 0; }
#waExp section .column + .title { margin: 120px auto 0; }
#waExp section .title div { width: 100%; position: absolute; top: 0; left: 0; }
#waExp section .title dl { display: table; margin: 30px 30px 0 30px; }
#waExp section .title dl dt,
#waExp section .title dl dd { display: table-cell; }
#waExp section .title dl dt span {
	width: 90px;
	display: block;
	border: solid 1px #000000;
	background-color: #ffffff;
	font-size: 20px;
	line-height: 1.6;
	text-align: center;
}
#waExp section .title dl dd {
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	font-size: 24px;
	line-height: 1.54;
	font-weight: 700;
	letter-spacing: 0.2em;
	padding: 0 0 0 30px;
}
#waExp section .title dl + p {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: 0.2em;
	margin: 30px 30px 50px 150px;
}
#waExp section .title dl + p span {
	display: inline-block;
	font-size: 24px;
	letter-spacing: 0.2em;
	text-indent: -0.5em;
}
#waExp section .title.h280 dl + p { margin: 30px 0 110px 150px; }

#waExp section .photo { width: 100%; max-width: 1100px; position: relative; margin: 0 auto; }
#waExp section .photo.w940 { max-width: 940px; margin: -60px auto 0; }
#waExp section .photo ul { display: flex; flex-direction: row; }
#waExp section .photo ul li { width: 50%; max-width: 550px; }
#waExp section .photo.w940 ul { display: flex; flex-direction: row; }
#waExp section .photo.w940 ul li.order2 { width: calc(290/940 * 100%); max-width: 290px; }
#waExp section .photo.w940 ul li.order2 figure:nth-child(2) { margin: 30px 0 0 0; }
#waExp section .photo.w940 ul li.order1 {
	width: calc(610/940 * 100%);
	max-width: 610px;
	margin: 0 0 0 calc(40/940 * 100%);
}
#waExp section .photo.w1100 ul li.order2 figure { width: 50%; float: left; max-width: 275px; }

#waExp section figcaption { font-size: 14px; line-height: 1.6; margin: 10px 0 0 0; }

#waExp section .content { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); margin: 40px auto 0; }
#waExp section .content ul { width: 100%; max-width: 940px; display: table; margin: 0 auto; }

#waExp section .content ul li:nth-child(1) { width: calc(260/940 * 100%); max-width: 260px; float: right; }
#waExp section .content ul li:nth-child(1) figure { width: 100%; max-width: 260px; margin: 0 auto; }
#waExp section .content ul li:nth-child(1) .memo {
	width: 100%;
	max-width: 260px;
	background-color: #fffcdb;
	font-size: 15px;
	line-height: 1.7;
	box-sizing: border-box;
	padding: 20px;
}
#waExp section .content ul li:nth-child(1) figure + .memo { margin: 30px auto 0; }
#waExp section .content ul li:nth-child(1) .memo dl { text-align: center; font-weight: 700; }
#waExp section .content.dye ul li:nth-child(1) .memo dt { color: #7b1284; }
#waExp section .content.make ul li:nth-child(1) .memo dt { color: #00ad75; }
#waExp section .content.feel ul li:nth-child(1) .memo dt { color: #e6002d; }
#waExp section .content ul li:nth-child(1) .memo dd {
	border-top: solid 1px #bfbeb8;
	border-bottom: solid 1px #bfbeb8;
	padding: 7px 0;
	margin: 12px 0;
}
#waExp section .content ul li:nth-child(1) .memo dd span { font-size: 13px; }
#waExp section .content ul li:nth-child(1) .memo div + table { margin: 12px 0 0 0; }
#waExp section .content ul li:nth-child(1) .memo table th {
	font-weight: 700;
	white-space: nowrap;
	padding: 0 0.5em 0 0;
}
#waExp section .content ul li:nth-child(1) .memo table td span { font-size: 13px; }
#waExp section .content ul li:nth-child(1) .memo p { display: table; font-size: 13px; }
#waExp section .content ul li:nth-child(1) .memo table + p { margin: 12px 0 0 0; }
#waExp section .content ul li:nth-child(1) .memo p span { display: table-cell; vertical-align: top; }

#waExp section .content ul li:nth-child(2) { width: calc(620/940 * 100%); max-width: 620px; }
#waExp section .content ul li:nth-child(2) .text { font-size: 18px; line-height: 1.8; }
#waExp section .content ul li:nth-child(2) .text div { width: 100%; display: table; margin: 30px 0 0 0; }
#waExp section .content ul li:nth-child(2) .text div figure { width: calc(290/620 * 100%); max-width: 290px; }
#waExp section .content ul li:nth-child(2) .text div figure:nth-child(1) { float: left; }
#waExp section .content ul li:nth-child(2) .text div figure:nth-child(2) { float: right; }

#waExp section .content ul li:nth-child(3) { width: calc(620/940 * 100%); max-width: 620px; margin: 40px 0 0 0; }
#waExp section .content ul li:nth-child(3) .data figure {
	width: calc(250/620 * 100%);
	max-width: 250px;
	float: left;
}
#waExp section .content ul li:nth-child(3) .data div { font-size: 16px; line-height: 1.7; }
#waExp section .content ul li:nth-child(3) .data div p span { display: table-cell; }
#waExp section .content ul li:nth-child(3) .data div p span:first-child { white-space: nowrap; }
#waExp section .content ul li:nth-child(3) .data figure + div {
	width: calc(340/620 * 100%);
	max-width: 340px;
	float: right;
}


#waExp section .column { width: 100%; box-sizing: border-box; padding: 0 calc(20/375 * 100%); margin: 100px 0 0 0; }
#waExp section .column p { width: 100%; max-width: 1100px; height: 15px; margin: 0 auto; position: relative; }
#waExp section .column p:before {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	background-color: #6144aa;
	position: absolute;
	top: 0;
	left: 0;
}
#waExp section .column p:after {
	content: "";
	width: 15px;
	height: 15px;
	display: block;
	background-color: #6144aa;
	position: absolute;
	top: 0;
	right: 0;
}
#waExp section .column div {
	width: calc(100% - 30px);
	max-width: 1070px;
	background-color: #f2eefe;
	box-sizing: border-box;
	padding: 50px calc(60/1070 * 100%);
	margin: 0 auto;
}
#waExp section .column div h4 {
	width: calc(230/950 * 100%);
	color: #001a60;
	font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
	font-size: 24px;
	font-weight: 700;
	font-feature-settings: "palt" 1;
	text-align: center;
}
#waExp section .column div ul { width: 100%; display: table; margin: 20px 0 0 0; }
#waExp section .column div ul li:nth-child(1) { width: calc(230/950 * 100%); max-width: 230px; float: left; }
#waExp section .column div ul li:nth-child(2) {
	width: calc(670/950 * 100%);
	max-width: 670px;
	float: right;
	font-size: 18px;
	line-height: 1.8;
}

#waExp section .bottomLine { width: 100%; max-width: 1100px; border-bottom: solid 1px #f2e7df; margin: 80px auto 0; }



@media screen and (max-width: 1100px) {
	#waExp section .photo ul figcaption { margin: 10px 10px 0 10px; }
}

@media screen and (max-width: 940px) {
	#waExp section .photo.w940 figcaption { margin: 10px 10px 0 10px; }
	#waExp section .column div h4 { width: 100%; }
}

@media screen and (max-width: 767px) {
	#waExp section { margin: 70px auto 0; }
	#waExp section + section { margin: 80px auto 0; }
	
	#waExp section .title { padding: 20px 0 0 0; margin: 20px auto 0; }
	#waExp section .content + .title { margin: 80px auto 0; }
	#waExp section .column + .title { margin: 80px auto 0; }
	#waExp section .title div img { width: auto; height: 20px; }
	#waExp section .title dl { display: table; margin: 20px 20px 0 20px; }
	#waExp section .title dl dt,
	#waExp section .title dl dd { display: block; }
	#waExp section .title dl dt span { width: 70px; font-size: 16px; }
	#waExp section .title dl dd { font-size: 16px; letter-spacing: -0.02em; padding: 10px 0 0 0; }
	#waExp section .title dl + p { font-size: 22px; letter-spacing: 0; margin: 15px 20px 30px 20px; }
	#waExp section .title dl + p span { font-size: 18px; letter-spacing: 0; text-indent: -0.4em; }
	#waExp section .title.h280 dl + p { margin: 15px 0 30px 20px; }
	
	#waExp section .photo { width: 100%; max-width: 1100px; position: relative; margin: 0 auto; }
	#waExp section .photo.w940 { margin: 0 auto 0; }
	#waExp section figcaption { font-size: 12px; }
	
	#waExp section .content { margin: 30px auto 0; }
	
	#waExp section .content ul { display: flex; flex-direction: column; }
	
	#waExp section .content ul li:nth-child(1) {
		width: 100%;
		max-width: 100%;
		float: none;
		order: 2;
		margin: 30px auto 0;
	}
	#waExp section .content ul li:nth-child(1) figure { max-width: 250px; }
	#waExp section .content ul li:nth-child(1) .memo { max-width: 100%; font-size: 14px; padding: 20px; }
	#waExp section .content ul li:nth-child(1) .memo dd { padding: 5px 0; margin: 10px 0; }
	#waExp section .content ul li:nth-child(1) .memo dd span { font-size: 12px; }
	
	#waExp section .content ul li:nth-child(1) .memo div + table { margin: 10px 0 0 0; }
	#waExp section .content ul li:nth-child(1) .memo table td span { font-size: 12px; }
	#waExp section .content ul li:nth-child(1) .memo p { display: table; font-size: 12px; }
	
	#waExp section .content ul li:nth-child(2) { width: 100%; max-width: none; order: 1; }
	#waExp section .content ul li:nth-child(2) .text { font-size: 16px; }
	#waExp section .content ul li:nth-child(2) .text div { margin: 20px 0 10px 0; }
	#waExp section .content ul li:nth-child(2) .text div figure { width: 100%; max-width: 250px; margin: 0 auto; }
	#waExp section .content ul li:nth-child(2) .text div figure:nth-child(1) { float: none; }
	#waExp section .content ul li:nth-child(2) .text div figure:nth-child(2) { float: none; margin: 15px auto 0; }
	
	#waExp section .content ul li:nth-child(3) { width: 100%; max-width: 250px; order: 3; margin: 40px auto 0; }
	#waExp section .content ul li:nth-child(3) .data figure { width: 100%; float: none; }
	#waExp section .content ul li:nth-child(3) .data div { display: table; font-size: 14px; margin: 0 auto; }
	#waExp section .content ul li:nth-child(3) .data figure + div {
		width: auto;
		max-width: none;
		display: table;
		float: none;
		margin: 30px auto 0;
	}
	
	#waExp section .column { margin: 70px 0 0 0; }
	#waExp section .column p { height: 10px; }
	#waExp section .column p:before { width: 10px; height: 10px; }
	#waExp section .column p:after { width: 10px; height: 10px; }
	#waExp section .column div { width: calc(100% - 20px); padding: 20px; }
	#waExp section .column div h4 { font-size: 20px; }
	#waExp section .column div ul li:nth-child(1) { width: 100%; float: none; margin: 0 auto; }
	#waExp section .column div ul li:nth-child(2) { width: 100%; float: none; font-size: 16px; margin: 20px auto 0; }
	
	#waExp section .bottomLine { display: none; }
}

@media screen and (max-width: 550px) {
	#waExp section .photo ul { display: flex; flex-direction: column; }
	#waExp section .photo ul li { width: 100%; }
	#waExp section .photo ul li.order1 { order: 1; }
	#waExp section .photo ul li.order2 { order: 2; margin: 15px 0 0 0; }
	#waExp section .photo.w940 ul { display: flex; flex-direction: column; }
	#waExp section .photo.w940 ul li.order2 {
		width: 100%;
		max-width: none;
		display: table;
		order: 2;
		margin: 20px 0 0 0;
	}
	#waExp section .photo.w940 ul li.order2 figure { width: calc(290/610 * 100%); }
	#waExp section .photo.w940 ul li.order2 figure:nth-child(1) { float: left; }
	#waExp section .photo.w940 ul li.order2 figure:nth-child(2) { float: right; margin: 0; }
	#waExp section .photo.w940 ul li.order1 { width: 100%; order: 1; margin: 0; }
}





/* 汎用パーツ
========================================================= */

/* plusIssue
------------------------------------------ */

.plusIssue { display: table; padding: 0 calc(20/375 * 100% ); margin: 100px auto 40px; }
.plusIssue div { display: table-cell; vertical-align: middle; }
.plusIssue div:nth-child(1) { width: 140px; }
.plusIssue div:nth-child(2) { padding: 0 0 0 20px; }
.plusIssue p { line-height: 1.4; text-align: center; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.plusIssue a {
	border: solid 2px #cacaca;
	display: table;
	font-size: 16px;
	padding: 0.5em 2em;
	margin: 15px auto 0;
}
.plusIssue ul { display: table; font-size: 13px; line-height: 20px; margin: 15px auto 0; }
.plusIssue li { display: table-cell; vertical-align: top; }

@media screen and (max-width: 767px) {
	.plusIssue { margin: 80px auto 40px; }
	.plusIssue div { display: block; }
	.plusIssue div:nth-child(2) { padding: 0; }
	.plusIssue div:nth-child(1) { margin: 0 auto 15px; }
	.plusIssue a { font-size: 14px; }
	.plusIssue ul { font-size: 12px; }
}



/* detailsLink
------------------------------------------ */

.datailsLink1 { width: 250px; margin: 15px 0 0 0; }
.datailsLink1 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

.datailsLink2 { width: 200px; margin: 15px auto 0; }
.datailsLink2 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 40px;
	text-align: center;
	text-decoration: none;
}

@media screen and (min-width: 769px) {
	.datailsLink1 a { transition: 0.2s; }
	.datailsLink1 a:hover { background-color: #fe8781; color: #ffffff; }
	
	.datailsLink2 a { transition: 0.2s; }
	.datailsLink2 a:hover { background-color: #fe8781; color: #ffffff; }
}

@media screen and (max-width: 767px) {
	.datailsLink1 { margin: 10px auto 0; }
	.datailsLink2 { margin: 10px auto 0; }
}