@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;
}





/* photogenic
========================================================= */

#photogenic { color: #000000; line-height: 1.0; }



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





/* photogenicMain
========================================================= */

#photogenic .main { width: 100%; max-width: 1500px; margin: 20px auto 0; position: relative; }
#photogenic .main h2 img:nth-child(2) { display: none; }
#photogenic .main .lead {
	display: block;
	font-size: 17px;
	line-height: 1.76;
	text-align: center;
	box-sizing: border-box;
	padding: 0 calc(20/375 * 100%);
	position: absolute;
	right: 0;
	bottom: 45px;
	left: 0;
	margin: auto;
}
#photogenic .main .lead p span { display: block; }



@media screen and (max-width: 1300px) {
	#photogenic .main .lead { bottom: -20px; transition: 0.2s; }
}

@media screen and (max-width: 1000px) {
	#photogenic .main h2 img:nth-child(1) { display: none; }
	#photogenic .main h2 img:nth-child(2) { display: block; }
	#photogenic .main .lead { font-size: 15px; text-align: left; margin: 15px 0 0 0; position: static; }
	#photogenic .main .lead p span { display: inline; }
}

@media screen and (max-width: 767px) {
	#photogenic .main { margin: 10px 0 0 0; }
}



/* area
========================================================= */

#photogenic .area { margin: 40px 0 0 0; }
#photogenic .area.area2 { margin: 130px 0 0 0; }
#photogenic .camera + .area.area2 { margin: 80px 0 0 0; }
#photogenic .area.area3 { margin: 100px 0 0 0; }
#photogenic .area.area4 { margin: 0; }
#photogenic .area.area5 { margin: 0; }

#photogenic .area .title {
	padding: calc(220/1500 * 100%) 0 0 0;
	margin: 0 calc(480/1500 * 100%) 0 0;
	position: relative;
	z-index: 3;
}
#photogenic .area.area2 .title { margin: 0 0 0 calc(430/1500 * 100%); }
#photogenic .area.area2.yellow .title { margin: 0 0 0 calc(350/1500 * 100%); }
#photogenic .area.area4 .title,
#photogenic .area.area5 .title { padding: calc(160/1500 * 100%) 0 0 0; }
#photogenic .area .title h3 {
	width: 100%;
	height: 100%;
	max-height: 220px;
	border-top: solid 10px #000000;
	border-right: solid 10px #000000;
	border-bottom: solid 10px #000000;
	border-left: none;
	border-radius: 0 220px 220px 0;
	background: #ffffff;
	box-sizing: border-box;
	position: absolute;
	top: 0;
}
#photogenic .area.area2 .title h3 {
	border-top: solid 10px #000000;
	border-right: none;
	border-bottom: solid 10px #000000;
	border-left: solid 10px #000000;
	border-radius: 220px 0 0 220px;
}
#photogenic .area.area4 .title h3,
#photogenic .area.area5 .title h3 { max-height: 160px; border-radius: 0 160px 160px 0; }

#photogenic .area .title h3 img {
	width: auto;
	height: calc(70/200 * 100%);
	max-height: 70px;
	position: absolute;
	top: 0;
	left: calc(290/1500 * 100%);
	bottom: 0;
	margin: auto;
}
#photogenic .area.pink .title h3 img { left: calc(90/1070 * 100%); }
#photogenic .area.yellow .title h3 img {
	height: calc(115/200 * 100%);
	max-height: 115px;
	left: calc(90/1150 * 100%);
}
#photogenic .area.area4 .title h3 img,
#photogenic .area.area5 .title h3 img { height: calc(70/140 * 100%); max-height: 70px; }

#photogenic .area .inner {
	width: 100%;
	display: table;
	box-sizing: border-box;
	padding: 0 0 0 calc(200/1500 * 100%);
	margin: calc(-115/1500 * 100%) 0 0 0;
	position: relative;
	z-index: 2;
}
#photogenic .area.area2 .inner { padding: 0 calc(200/1500 * 100%) 0 0; }
#photogenic .area.area4 .inner,
#photogenic .area.area5 .inner { margin: calc(-160/1500 * 100%) 0 0 0; }

#photogenic .area .inner h4 {
	width: 40px;
	float: left;
	border-top: solid 10px #000000;
	border-right: none;
	border-bottom: solid 10px #000000;
	border-left: solid 10px #000000;
	margin: calc(180/1300 * 100%) 0 0 0;
}
#photogenic .area.area2 .inner h4 {
	float: right;
	border-top: solid 10px #000000;
	border-right: solid 10px #000000;
	border-bottom: solid 10px #000000;
	border-left: none;
}

#photogenic .area .inner .list {
	width: calc(100% - 50px);
	float: right;
	border-top: solid 10px #000000;
	border-right: none;
	border-bottom: solid 10px #000000;
	border-left: solid 10px #000000;
	border-radius: 0 0 0 60px;
	box-sizing: border-box;
	padding: calc(170/1300 * 100%) 200px 70px 70px;
}
#photogenic .area.area2 .inner .list {
	float: left;
	border-top: solid 10px #000000;
	border-right: solid 10px #000000;
	border-bottom: solid 10px #000000;
	border-left: none;
	border-radius: 0 0 60px 0;
	box-sizing: border-box;
	padding: calc(170/1300 * 100%) 70px 70px 200px;
}
#photogenic .area.area3 .inner .list {
	border-top: solid 10px #000000;
	border-right: none;
	border-bottom: none;
	border-left: solid 10px #000000;
	border-radius: 0;
}
#photogenic .area.area4 .inner .list {
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: solid 10px #000000;
	border-radius: 0;
	padding: calc(220/1300 * 100%) 200px 70px 70px;
}
#photogenic .area.area5 .inner .list {
	border-top: none;
	border-right: none;
	border-bottom: solid 10px #000000;
	border-left: solid 10px #000000;
	padding: calc(220/1300 * 100%) 200px 70px 70px;
}

#photogenic .area.purple .inner .list { background: #df9ed4; }
#photogenic .area.pink .inner .list { background: #fda6a6; }
#photogenic .area.blue .inner .list { background: #79d1da; }
#photogenic .area.yellow .inner .list { background: #fcd153; }

#photogenic .area .inner .list ul { max-width: 970px; display: table; float: left; }
#photogenic .area.area2 .inner .list ul { float: right; }
#photogenic .area .inner .list ul + ul { margin: 40px 0 0 0; }
#photogenic .area .inner .list ul li { display: table-cell; vertical-align: middle; }
#photogenic .area .inner .list ul li.img { width: calc(450/970 * 100%); max-width: 450px; }
#photogenic .area .inner .list ul li.text { padding: 0 0 0 calc(60/970 * 100%); }
#photogenic .area.area2 .inner .list ul li.text { padding: 0 calc(60/970 * 100%) 0 10px; }
#photogenic .area .inner .list ul li h5 { font-size: 30px; line-height: 1.33; font-weight: bold; }
#photogenic .area .inner .list ul li dl { margin: 40px 0 0 0; }
#photogenic .area .inner .list ul li dl dt { font-size: 15px; line-height: 1.86; }
#photogenic .area .inner .list ul li dl dt span {
	display: block;
	font-size: 13px;
	line-height: 1.69;
	margin: 10px 0 0 0;
}
#photogenic .area .inner .list ul li dl dd { font-size: 13px; line-height: 1.69; margin: 30px 0 0 0; }
#photogenic .area .inner .list ul li dl dd span { display: inline-block; }
#photogenic .area .inner .list ul li dl dd.flR {
	width: calc(180/460 * 100%);
	max-width: 180px;
	float: right;
	border: solid 10px #ffffff;
	box-sizing: border-box;
}

#photogenic .area .inner:after {
	content: "";
	width: 86.66%;
	height: calc(100% + 50px);
	border-right: solid 10px #000000;
	border-bottom: solid 10px #000000;
	border-left: none;
	border-radius: 0 0 60px 0;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: auto;
	left: 0;
	z-index: -1;
}
#photogenic .area.area2 .inner:after {
	border-right: none;
	border-bottom: solid 10px #000000;
	border-left: solid 10px #000000;
	border-radius: 0 0 0 60px;
	top: 0;
	right: 0;
	left: auto;
}
#photogenic .area.area3 .inner:after {
	height: 100%;
	border-right: none;
	border-bottom: none;
	border-left: none;
	border-radius: 0;
}
#photogenic .area.area4 .inner:after {
	height: 100%;
	border-right: none;
	border-bottom: none;
	border-left: none;
	border-radius: 0;
}
#photogenic .area.purple .inner:after { background: url(/images/special/15/area_purple_bg.gif); }
#photogenic .area.pink .inner:after { background: url(/images/special/15/area_pink_bg.gif); }
#photogenic .area.blue .inner:after { background: url(/images/special/15/area_blue_bg.gif); }
#photogenic .area.yellow .inner:after { background: url(/images/special/15/area_yellow_bg.gif); }



@media screen and (min-width: 1500px) {
	#photogenic .area .title { padding: 220px 0 0 0; }
	#photogenic .area.area4 .title,
	#photogenic .area.area5 .title { padding: 160px 0 0 0; }
	#photogenic .area .inner { margin: -115px 0 0 0; }
	#photogenic .area.area4 .inner,
	#photogenic .area.area5 .inner { margin: -160px 0 0 0; }
	#photogenic .area .inner h4 { margin: 180px 0 0 0; }
	#photogenic .area .inner .list { padding: 170px 200px 70px 70px; }
	#photogenic .area.area2 .inner .list { padding: 170px 70px 70px 200px; }
}

@media screen and (max-width: 1000px) {
	#photogenic .area { margin: 50px 0 0 0; }
	
	#photogenic .area .title h3 img { left: calc(30/375 * 100%); }
	
	#photogenic .area .inner { padding: 0 0 0 calc(20/375 * 100%); transition: 0.2s; }
	#photogenic .area.area2 .inner { padding: 0 calc(20/375 * 100%) 0 0; transition: 0.2s; }
	#photogenic .area .inner h4 { margin: 110px 0 0 0; }
	#photogenic .area .inner .list {
		border-radius: 0 0 0 40px;
		padding: 100px calc(20/375 * 100%) 30px 30px;
	}
	#photogenic .area.area2 .inner .list {
		border-radius: 0 40px 40px 0;
		padding: 100px 30px 30px calc(20/375 * 100%);
	}
	#photogenic .area.area3 .inner .list {
		padding: 100px calc(20/375 * 100%) 50px 30px;
	}
	#photogenic .area.area4 .inner .list {
		padding: 130px calc(20/375 * 100%) 50px 30px;
	}
	#photogenic .area.area5 .inner .list {
		padding: 130px calc(20/375 * 100%) 30px 30px;
	}
	
	#photogenic .area .inner:after {
		width: 94.66%;
		height: calc(100% + 30px);
		border-radius: 0 40px 40px 0;
	}
	#photogenic .area.area2 .inner:after {
		border-radius: 40px 0 0 40px;
	}
}

@media screen and (max-width: 767px) {
	#photogenic .area { margin: 50px 0 0 0; }
	#photogenic .area.area2 { margin: 110px 0 0 0; }
	#photogenic .camera + .area.area2 { margin: 80px 0 0 0; }
	#photogenic .area.area3 { margin: 80px 0 0 0; }
	
	
	
	
	
	
	#photogenic .area .title { padding: 70px 0 0 0; margin: 0 calc(20/375 * 100%) 0 0; }
	#photogenic .area.area2 .title { margin: 0 0 0 calc(20/375 * 100%); }
	#photogenic .area.area2.yellow .title { margin: 0 0 0 calc(20/375 * 100%); }
	#photogenic .area.area4 .title,
	#photogenic .area.area5 .title { padding: 55px 0 0 0; }
	
	#photogenic .area .title h3 {
		border-top: solid 5px #000000;
		border-right: solid 5px #000000;
		border-bottom: solid 5px #000000;
		border-left: none;
		border-radius: 0 80px 80px 0;
	}
	#photogenic .area.area2 .title h3 {
		border-top: solid 5px #000000;
		border-right: none;
		border-bottom: solid 5px #000000;
		border-left: solid 5px #000000;
		border-radius: 80px 0 0 80px;
	}
	#photogenic .area.area4 .title h3,
	#photogenic .area.area5 .title h3 { border-radius: 0 60px 60px 0; }
	#photogenic .area .title h3 img { height: 60px; max-height: 25px; left: calc(20/375 * 100%); }
	#photogenic .area.pink .title h3 img { left: 25px; }
	#photogenic .area.yellow .title h3 img { height: 40px; left: 25px; }
	
	#photogenic .area .inner { margin: -38px 0 0 0; }
	#photogenic .area.area4 .inner,
	#photogenic .area.area5 .inner { margin: -55px 0 0 0; }	
	
	#photogenic .area .inner h4 {
		width: 25px;
		border-top: solid 5px #000000;
		border-right: none;
		border-bottom: solid 5px #000000;
		border-left: solid 5px #000000;
		margin: 70px 0 0 0;
	}
	#photogenic .area.area2 .inner h4 {
		border-top: solid 5px #000000;
		border-right: solid 5px #000000;
		border-bottom: solid 5px #000000;
		border-left: none;
	}
	
	#photogenic .area .inner .list {
		width: calc(100% - 30px);
		float: right;
		border-top: solid 5px #000000;
		border-right: none;
		border-bottom: solid 5px #000000;
		border-left: solid 5px #000000;
		padding: 65px calc(25/375 * 100%) 20px 20px;
	}
	#photogenic .area.area2 .inner .list {
		float: left;
		border-top: solid 5px #000000;
		border-right: solid 5px #000000;
		border-bottom: solid 5px #000000;
		border-left: none;
		padding: 65px 20px 20px calc(25/375 * 100%);
	}
	#photogenic .area.area3 .inner .list {
		border-top: solid 5px #000000;
		border-right: none;
		border-bottom: none;
		border-left: solid 5px #000000;
		padding: 65px calc(25/375 * 100%) 50px 20px;
	}
	#photogenic .area.area4 .inner .list {
		border-top: none;
		border-right: none;
		border-bottom: none;
		border-left: solid 5px #000000;
		padding: 85px calc(25/375 * 100%) 50px 20px;
	}
	#photogenic .area.area5 .inner .list {
		border-top: none;
		border-right: none;
		border-bottom: solid 5px #000000;
		border-left: solid 5px #000000;
		padding: 85px calc(25/375 * 100%) 20px 20px;
	}
	
	#photogenic .area .inner .list ul { display: flex; flex-direction: column; float: none; }
	#photogenic .area.area2 .inner .list ul { float: none; }
	#photogenic .area .inner .list ul + ul { margin: 60px 0 0 0; }
	#photogenic .area .inner .list ul li { display: block; }
	#photogenic .area .inner .list ul li.img { width: 100%; margin: 0 auto; order: 1; }
	#photogenic .area .inner .list ul li.text { padding: 20px 0 0 0; order: 2; }
	#photogenic .area.area2 .inner .list ul li.text { padding: 20px 0 0 0; }
	#photogenic .area .inner .list ul li h5 { font-size: 22px; }
	#photogenic .area .inner .list ul li dl { margin: 20px 0 0 0; }
	#photogenic .area .inner .list ul li dl dt { font-size: 15px; line-height: 1.5; }
	#photogenic .area .inner .list ul li dl dt span { font-size: 12px; line-height: 1.5; }
	#photogenic .area .inner .list ul li dl dd { font-size: 12px; line-height: 1.5; margin: 20px 0 0 0; }
	#photogenic .area .inner .list ul li dl dd.flR {
		width: 100%;
		float: none;
		border: solid 5px #ffffff;
		margin: 20px auto 0;
	}
	#photogenic .area .inner:after {
		border-right: solid 5px #000000;
		border-bottom: solid 5px #000000;
		border-left: none;
	}
	#photogenic .area.area2 .inner:after {
		border-right: none;
		border-bottom: solid 5px #000000;
		border-left: solid 5px #000000;
	}
}





/* spot
========================================================= */

#photogenic .spot { padding: 0 calc(20/375 * 100%); }

#photogenic .spot .inner {
	width: 100%;
	max-width: 1100px;
	border: solid 10px #000000;
	box-sizing: border-box;
	margin: 150px auto 0;
}

#photogenic .spot .title { width: 100%; height: 130px; display: table; border-bottom: solid 10px #000000; }
#photogenic .spot .title div,
#photogenic .spot .title h3 { display: table-cell; text-align: center; vertical-align: middle; }
#photogenic .spot .title div { width: calc(200/1080 * 100%); }
#photogenic .spot .title div img { width: calc(53/200 * 100%); }
#photogenic .spot .title h3 {
	width: calc(680/1080 * 100%);
	border-right: solid 10px #000000;
	border-left: solid 10px #000000;
	box-sizing: border-box;
}
#photogenic .spot .title h3 img { width: calc(300/660 * 100%); }

#photogenic .spot .list { padding: calc(70/1080 * 100%); }
#photogenic .spot ul { width: 100%; max-width: 810px; display: table; }
#photogenic .spot ul + ul { margin: 50px 0 0 0; }
#photogenic .spot ul li.img { width: calc(320/810 * 100%); max-width: 320px; float: left; }
#photogenic .spot ul li.text { width: calc(420/810 * 100%); float: right; }
#photogenic .spot ul li h4 { font-size: 24px; line-height: 1.41; font-weight: bold; }
#photogenic .spot ul li dl { margin: 15px 0 0 0; }
#photogenic .spot ul li dl dt { font-size: 15px; line-height: 1.86; }
#photogenic .spot ul li dl dd { font-size: 13px; line-height: 1.69; margin: 15px 0 0 0; }



@media screen and (max-width: 767px) {
	#photogenic .spot .inner { border: solid 5px #000000; margin: 110px auto 0; }
	
	#photogenic .spot .title { height: 50px; border-bottom: solid 5px #000000; }
	#photogenic .spot .title div img { width: 20px; }
	#photogenic .spot .title h3 { border-right: solid 5px #000000; border-left: solid 5px #000000; }
	#photogenic .spot .title h3 img { width: 130px; }
	
	#photogenic .spot .list { padding: 20px; }
	#photogenic .spot ul li.img { width: 100%; float: none; margin: 0 auto; }
	#photogenic .spot ul li.text { width: 100%; float: none; }
	#photogenic .spot ul li h4 { font-size: 20px; margin: 20px 0 0 0; }
	#photogenic .spot ul li dl dt { font-size: 15px; line-height: 1.5; }
	#photogenic .spot ul li dl dd { font-size: 12px; line-height: 1.5; }
}





/* camera
========================================================= */

#photogenic .camera { padding: 0 calc(20/375 * 100%); }

#photogenic .camera .inner { width: 100%; max-width: 940px; margin: 130px auto 0; }

#photogenic .camera .title { width: calc(680/940 * 100%); max-width: 680px; margin: 0 auto; }

#photogenic .camera .shop {
	border: solid 10px #000000;
	border-radius: 60px;
	background: #f7bf89;
	box-sizing: border-box;
	padding: calc(70/940 * 100%) calc(50/940 * 100%) calc(50/940 * 100%);
	margin: calc(-60/940 * 100%) 0 0 0;
	overflow: hidden;
}
#photogenic .camera .shop ul li.img { width: calc(320/820 * 100%); max-width: 320px; float: left; }
#photogenic .camera .shop ul li.text { width: calc(440/820 * 100%); float: right; }
#photogenic .camera .shop ul li h4 { font-size: 24px; line-height: 1.41; font-weight: bold; }
#photogenic .camera .shop ul li dl { margin: 15px 0 0 0; }
#photogenic .camera .shop ul li dl dt { font-size: 15px; line-height: 1.86; }
#photogenic .camera .shop ul li dl dd { font-size: 13px; line-height: 1.69; margin: 15px 0 0 0; }
#photogenic .camera .shop ul li dl dd span { display: inline-block; }



@media screen and (max-width: 1000px) {
	#photogenic .camera .shop {
		border-radius: 40px;
		padding: calc(70/940 * 100%) 30px 30px;
	}
}

@media screen and (max-width: 767px) {
	#photogenic .camera .inner { margin: 100px auto 0; }
	
	#photogenic .camera .title { width: 100%; max-width: 260px; }
	
	#photogenic .camera .shop { border: solid 5px #000000; padding: 50px 20px 20px; margin: -30px 0 0 0; }
	#photogenic .camera .shop ul li.img { width: 100%; float: none; margin: 0 auto; }
	#photogenic .camera .shop ul li.text { width: 100%; float: none; margin: 20px 0 0 0; }
	#photogenic .camera .shop ul li dl dt { font-size: 15px; line-height: 1.5; }
	#photogenic .camera .shop ul li dl dd { font-size: 12px; line-height: 1.5; }
}





/* plusIssue
========================================================= */

.plusIssue { padding: 0 calc(15/320 * 100% ); margin: 100px 0 0 0; }
.plusIssue p { text-align: center; margin: 0 auto; }
.plusIssue p span { display: inline-block; padding: 0 0.5em; }
.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 0 0 0; }
}





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

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

.detailsLink1 { width: 100%; max-width: 190px; margin: 15px 0 0 0; }
#photogenic .detailsLink1 { width: calc(190/460 * 100%); max-width: 190px; min-width: 140px; }
.detailsLink1 a {
	display: block;
	background-color: #333333;
	color: #ffffff;
	border-radius: 5px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	padding: 6px 5px 5px;
}

.detailsLink2 { width: 100%; max-width: 190px; margin: 15px 0 0 0; }
.detailsLink2 a {
	display: block;
	background-color: #ffffff;
	color: #333333;
	border-radius: 5px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	padding: 6px 5px 5px;
}

@media screen and (min-width: 769px) {
	.detailsLink1 a { transition: 0.2s; }
	.detailsLink1 a:hover { background-color: #e6e6e6; color: #000000; }
	
	.detailsLink2 a { transition: 0.2s; }
	.detailsLink2 a:hover { background-color: #000000; color: #ffffff; }
}

@media screen and (max-width: 767px) {
	.detailsLink1 { margin: 15px auto 0; }
	#photogenic .detailsLink1 { width: 100%; max-width: 190px; margin: 15px auto 0; }
}