/* @override 
	http://203.143.96.127:8001/f_spot/pickup/css/base_pickup_2021.css
	https://www.frontale.co.jp/f_spot/pickup/css/base_pickup_2021.css */

@charset "UTF-8";
/* CSS Document */


/* 2021 pickup */


br.sp {
	display: none;
}

img {
	max-width: 100%;
}

#wrapper_contents {
	position: relative;
	z-index: 0;
	width: 100%;
	margin-top: calc(45vw + 72px);
}

main#pickup {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	z-index: 0;
	min-height: 2000px;
}



main#pickup>article {
	width: calc(100% - 210px);
	box-sizing: border-box;
	position: relative;
	z-index: 0;
	padding: 0 65px 0 42px;

}


main#pickup>article::after {
	content: "";
	display: block;
	position: absolute;
	right: 32px;
	top: 0;
	width: 1px;
	height: 100%;
	background-color: #ddd;
}

main#pickup+aside {
	width: 210px;
	min-height: 600px;
	box-sizing: border-box;
	padding-right: 42px;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
}

main#pickup+aside>div {
	margin-top: 42px;
}

main#pickup+aside>div:first-of-type {
	margin-top: 0;
}

main#pickup+aside h4 {
	font-size: 1.8rem;
}

main#pickup+aside p.photo {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

main#pickup+aside p.photo img {
	width: 100%;
	height: au;
}

main#pickup+aside .box_link li {
	font-size: 1.4rem;
}

main#pickup+aside .box_link li a {
	display: block;
}

/* === #box_kv_img === */

#box_kv {
	position: absolute;
	margin-top: calc((45vw + 72px) * -1);
	left: 0;
	width: calc(100vw - 0px);
	/*スクロール*/
	height: calc(45vw + 72px);
	overflow: hidden;
	z-index: 0;
}

#box_kv p#kv_img {
	z-index: 50;
	position: absolute;
	height: 45vw;
	left: 50%;
	width: calc(45vw * 3.5740);
	top: 0;
	margin-left: calc(45vw * 3.5740 * -0.5);
}

#box_kv p#kv_img>img {
	vertical-align: bottom;
	width: 100%;
	height: auto;
	position: relative;
	left: -6px;
}

#box_kv>#box_ttl_copy {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 50;
}

#box_credit {
	margin-top: 45vw;
	padding-top: 14px;
}

#box_credit>p {
	font-size: 1.2rem;
	line-height: 1.3;
	color: #888;
	text-align: center;
}

/*  */

p#kv_img img {
	max-width: none;
}

/* === /#box_kv_img === */



#box_cnav {
	background-color: #020202;
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	min-width: 1024px;
	display: flex;
	padding: 0 12px 0 12px;
	justify-content: space-between;
	position: relative;
}


#box_cnav a {
	display: inline-block;
}


#box_cnav p.ttl_pickup {
	color: #23b7fe;
	font-size: 1.8rem;
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	line-height: 1;
}

#box_cnav p.ttl_pickup a {
	color: #23b7fe;
	padding-top: 13px;
}

#box_cnav>ul {
	font-family: "Roboto", sans-serif;
	line-height: 1;
	font-size: 1.5rem;
	text-align: right;
	padding-top: 15px;
}

#box_cnav>ul,
#box_cnav>ul a {
	color: #e5e5e5;
}

#box_cnav>ul li {
	display: inline-block;
	position: relative;
	margin-left: 0.6em;
}

#box_cnav>ul li strong {
	color: #23b7fe;
}

#box_cnav>ul li strong:before {
	content: " ";
	position: relative;
	display: inline-block;
	border-left: 2px solid #aaa;
	width: 1px;
	height: 1em;
	margin-bottom: -0.15em;
	margin-left: 0.25em;
	margin-right: 0.25em;
	transform: rotate(20deg);
}

#box_cnav>ul li:first-child a:before,
#box_cnav>ul li:last-child a:after {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	position: relative;
	margin-bottom: 0.1em;
	margin-left: 0.1em;
	margin-right: 0.1em;
	border-top: 2px solid #e5e5e5;
	border-right: 2px solid #e5e5e5;
}




#box_cnav>ul li:first-child a:before {
	transform: rotate(-135deg);
}

#box_cnav>ul li:last-child a:after {
	transform: rotate(45deg);
}

#box_cnav>ul li.false:last-child a:after {
	border-top: 2px solid #666;
	border-right: 2px solid #666;
}

#box_cnav>ul li a:hover {
	color: #23b7fe;
}


#box_cnav>ul li:first-child a:hover:before,
#box_cnav>ul li:last-child a:hover:after {
	border-top: 2px solid #23b7fe;
	border-right: 2px solid #23b7fe;
}




/* === #archives === */


#box_archive_list {}


#box_archive_list ul {
	margin-top: 8px;
}

#box_archive_list li {
	margin-top: 4px;
	line-height: 1.3;
}

#box_archive_list li a {
	display: block;
	color: #222;
	background-color: #f6f6f6;
	padding: 0.8em 0.3em 0.6em 1em;
	border-radius: 24px;
	transition: 0.3s;
}

#box_archive_list li a:hover {
	background-color: #22b6fe;
	color: #fff;
}

/*　#box_profile　*/
[id^='box_profile'] {
	position: relative;
	z-index: 0;
	padding: 36px 0 0 230px;
	margin: 72px auto 0 auto;
	max-width: 780px;
	border-top: 5px solid #020202;
}

[id^='box_profile'] p.img {
	position: absolute;
	left: 0;
	top: 36px;
	z-index: 10;
	width: 200px;
}

[id^='box_profile'] p.img>img {
	width: 100%;
}

[id^='box_profile'] h6 {
	margin-top: 0.3em;
	font-size: 1.8rem;
}



[id^='box_profile'] p:not(.img) {
	font-size: 1.4rem;
	line-height: 1.7;
	margin-top: 1em;
}

[id^='box_profile'] h6+p:not(.img) {
	margin-top: 1.6em;
}

#box_profile p span.nick_name {
	position: relative;
	padding-left: 0.5em;
}

[id^='box_profile'] p span.nick_name::before {
	content: "/";
	margin-right: 0.5em;
}


div#profile_related {}

div#profile_related img {
	width: 100%;
	margin-bottom: 8px;
}

div#profile_related li {
	margin-top: 20px;
	line-height: 1.4;
	font-size: 1.2rem;
}

div#profile_related li a {
	color: #222;
	transition: 0.3s;
}

div#profile_related li a:hover {
	opacity: 0.7;
}


/* === #本文 === */

main#pickup section:not(.lead) {
	margin-top: 72px;
}

main#pickup section.lead {
	margin-bottom: 72px;
}


main#pickup section.lead p {
	font-size: 1.6rem;
	line-height: 2;
	font-weight: bold;
}

main#pickup section.lead p+p {
	margin-top: 0.5em;
}

main#pickup section.lead+section {
	margin-top: 0;
}


main#pickup section:not(.lead)>p,
main#pickup section>.inner>p,
main#pickup section:not(.lead)>div.comment>p {
	font-size: 1.6rem;
	line-height: 2;
	margin-top: 2em;
}


main#pickup article section hr {
	margin: 0;
	margin-top: 4em;
}


main#pickup section:not(.lead)>hr+p {
	margin-top: 3em;
}


main#pickup section:not(.lead)>div.comment {
	width: 92%;
	margin: 0 auto;
	border: 1px solid #ccc;
	margin-top: 3em;
	border-radius: 18px;
	padding: 3em 3em 4em 3em;
}

main#pickup section:not(.lead)>div.comment>p {
	margin-top: 1em;
}

main#pickup section:not(.lead)>div.comment>p:first-of-type {
	margin-top: 0;
}


main#pickup section>.inner {
	margin-top: 4em;
	padding-bottom: 4em;
	border-bottom: 1px solid #ccc;
}

main#pickup section:not(.lead) h4 {
	margin-top: 2em;
	font-size: 1.8rem;
}

main#pickup section:not(.lead) h4+p {
	margin-top: 0.7em;
}


main#pickup section:not(.lead)>p.mid_title {
	margin-top: 72px;
}

/*SNS引用ボックス*/

main#pickup section div.box_sns_reference {
	display: inline-block;
	margin-top: 3.5em;
	border: 1px solid #aaa;
	border-radius: 12px;
	padding: 1.8em 2em 2em 2em;
}

main#pickup section div.box_sns_reference h4 {
	margin: 0;
}

main#pickup section div.box_sns_reference p {
	font-size: 1.6rem;
	line-height: 2;
}


main#pickup section h3 {
	font-size: 2.2rem;
	line-height: 1.4;
	border-left: 5px solid #22b6fe;
	padding: 0.2em 0 0.3em 0;
	padding-left: 0.5em;
	margin-top: 64px;
}

main#pickup section h3.no_border {
	padding: 0;
	border-left: none;
}

main#pickup section p.photo {
	margin-top: 54px;
	text-align: center;
}

main#pickup section p.photo>small.caption {
	font-size: 1.4rem;
	color: #888;
}

main#pickup section p.photo+p.photo {
	margin-top: 24px;
}

main#pickup section p.photo>img:not([class^="w"]) {
	width: 100%;
}

main#pickup section p.photo+p {
	margin-top: 64px;
}


main#pickup p.mid_title .w45p {
	margin-right: 32px;
}


main#pickup section ul.photos_set {
	display: flex;
	flex-wrap: wrap;
	margin-top: 36px;
}

main#pickup section ul.photos_set>li {
	width: 50%;
}



/* 画像 */


main#pickup .float_right,
main#pickup .float_left {
	margin-bottom: 42px;
}

main#pickup .float_right {
	float: right;
	margin-left: 32px;
}

main#pickup .float_left {
	float: left;
	margin-right: 32px;
}

main#pickup img.w75p {
	width: 75%;
}


main#pickup img.w65p {
	width: 65%;
}

main#pickup img.w60p {
	width: 60%;
}


main#pickup img.w55p {
	width: 55%;
}


main#pickup img.w45p {
	width: 45%;
}

main#pickup img.w40p {
	width: 40%;
}


main#pickup img.w35p {
	width: 35%;
}



/*2023-05-29 add*/

main#pickup article.interview section h3 {
	font-size: 1.8rem;
	border: none;
	padding: 0;
	margin: 0;
	position: relative;
	color: #2e90c0;
}


main#pickup article.interview section p+h3 {
	margin-top: 3em;
}

main#pickup article.interview section h3::before {
	content: "";
	width: 2em;
	height: 2px;
	position: relative;
	background-color: #2e90c0;
	display: inline-block;
	margin-right: 0.125em;
	top: -0.27em;
}


main#pickup article.interview p>strong {
	margin-right: 0.75em;
	display: inline-block;
}

main#pickup article.interview p>strong.kengo {
	color: #2e90c0;
}


/* 2025-12-21 */
main#pickup section .box_msg {
	border: 1px solid #ccc;
	border-radius: 8px;
	margin-top: 2em;
	padding: 2.5em 3em 3.5em 3em;
}

main#pickup section .box_msg>p {
	font-size: 1.6rem;
	line-height: 2;
	margin-top: 1.5em;
}

main#pickup section .box_msg>p:first-of-type {
	margin-top: 0;
}

main#pickup section .box_msg figure {
	width: 75%;
	margin: 0 auto;
}

main#pickup section .box_msg figure+p {
	margin-top: 2em !important;
}

/*202-12-25*/

main#pickup div.wrap_profile {
	margin-top: 2em;
	width: 60%;

	h4 {
		font-size: 1.6rem;
		margin-top: 0;
	}

	& p {
		font-size: 1.8rem;
		line-height: 1;
	}

	& h4 {
		margin-top: 3em;
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.3em;
	}

	& dl {
		margin-top: 2.5em;
		display: flex;
		flex-wrap: wrap;
	}

	& dt,
	& dd {
		line-height: 1.5;
		margin-top: 1.5em;
	}

	& dt:first-of-type,
	& dd:first-of-type {
		margin-top: -0.7em;
	}

	& dl>dt {
		width: 4em;
		font-weight: bold;
	}

	& dl>dd {
		width: calc(100% - 4em);
	}

}

main#pickup strong.blue {
	color: #22b5fd;
}

/* === /#本文 === */


/* ==== responsive ==== */

@media screen and (min-width: 1700px) {

	/* mq-start */

	#wrapper_contents {
		margin-top: calc(850px + 72px);
	}


	#box_kv {
		margin-top: calc((850px + 72px) * -1);
		width: calc(100vw - 0px);
		height: calc(850px + 72px);
	}

	#box_kv p#kv_img {
		height: 800px;
		width: calc(850px * 3.5740);
		margin-left: calc(850px * 3.5740 * -0.5);
	}

	#box_credit {
		margin-top: 850px;
	}



	main#pickup>article {
		width: calc(1344px - 65px);
		box-sizing: content-box;
		padding-left: calc((100% - 1344px - 210px) / 2);
	}

	main#pickup+aside {
		box-sizing: content-box;
		padding-right: calc((100% - 1344px - 210px) / 2);
	}



	/* mq-end */


}



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


	/* common */
	#wrapper_contents {
		margin-top: 0;
	}


	main#pickup {
		min-height: initial;
		min-height: 0;
	}

	main#pickup>article {
		width: 100%;
		padding: 0 0 0 0;

	}

	main#pickup>article::after {
		content: none;

	}

	main#pickup+aside {
		width: 90vw;
		min-height: initial;
		min-height: 0;
		padding-right: 0;
		position: relative;
		right: auto;
		top: auto;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40px;
	}


	main#pickup+aside h4 {
		text-align: center;
	}


	#box_archive_list ul {
		width: 90vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	#box_archive_list li {
		width: calc(88vw / 2);
	}

	#box_archive_list li:first-of-type {
		width: 100%;
		text-align: center;
	}


	div#profile_related ul {
		width: 90vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	div#profile_related li {
		width: calc(88vw / 2);

	}



	/* === #box_kv_img === */

	#box_kv {
		position: relative;
		margin-top: 0;
		left: auto;
		width: 100%;
		height: calc(55vw + 45px);
	}


	#box_kv p#kv_img {
		position: absolute;
		height: 55vw;
		left: 50%;
		width: calc(55vw * 3.5740);
		top: 0;
		margin-left: calc(55vw * 3.5740 * -0.5);
	}

	#box_kv p#kv_img>img {
		left: 0;
	}


	#box_credit {
		margin-top: 55vw;
		padding-top: 10px;
	}

	#box_credit>p {
		font-size: 1.1rem;
		padding-left: 3vw;
		padding-right: 3vw;
	}

	/* === /#box_kv_img === *


/* === #本文 === */

	main#pickup section {
		margin: 32px 5vw 0 5vw;
	}

	main#pickup section.lead {
		padding-top: 0;
		margin-bottom: 24px;
	}


	main#pickup section.lead p {
		line-height: 1.8;
		font-feature-settings: "palt" 1;
		font-size: 4.4vw;
	}

	main#pickup section.lead p br {
		display: none;
	}

	main#pickup section:not(.lead)>div.comment>p,
	main#pickup section:not(.lead)>p {
		font-size: 4.4vw;
	}

	main#pickup section:not(.lead)>div.comment {
		width: 100%;
	}


	main#pickup section h3 {
		font-size: 5vw;
		line-height: 1.3;
	}

	main#pickup section:not(.lead) h3+p {
		margin-top: 1em;
	}



	main#pickup section p.photo+p.photo {
		margin-top: 12px;
	}




	main#pickup section p.photo+p,
	main#pickup section p.photo+p.mid_title {
		margin-top: 32px;
	}





	main#pickup section ul.photos_set {
		display: block;
	}

	main#pickup section ul.photos_set>li {
		width: 100%;
	}



	main#pickup p.mid_title img.w45p {
		width: 60vw;
		margin-right: 0;
		margin-bottom: 24px;
	}

	main#pickup p.mid_title img.w45p+img {
		max-width: 50vw;
	}


	/*　#box_profile　*/
	[id^='box_profile'] {
		padding: 36px 0 0 0;
		margin: 34px auto 0 auto;
		max-width: initial;
		max-width: 75vw;
	}

	[id^='box_profile'] p.img {
		position: relative;
		left: auto;
		top: auto;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		margin-bottom: 18px;
	}

	[id^='box_profile'] h5,
	[id^='box_profile'] h6,
	[id^='box_profile'] p.btn {
		text-align: center;
		line-height: 1;
	}

	[id^='box_profile'] h6 {
		font-size: 1.8rem;
		margin-top: 1em;
	}

	[id^='box_profile'] p:not(.img) {
		font-size: 1.6rem;
	}



	/* === /#box_kv_img === */



	#box_cnav {
		width: 100%;
		min-height: initial;
		min-width: initial;
		min-width: 0;
		display: block;
		padding: 0 3vw 12px 3vw;
	}

	#box_cnav p.ttl_pickup {
		text-align: center;
	}

	#box_cnav>ul {
		padding-top: 10px;
		text-align: center;
	}


	/* 画像 */

	main#pickup .float_right {
		float: right;
		margin-left: 5vw;
	}

	main#pickup .float_right.full {
		float: none;
		clear: both;
		margin-left: 0;
		width: 100%;
	}

	main#pickup .float_left {
		float: left;
		margin-right: 5vw;
	}

	main#pickup img.w75p,
	main#pickup img.w65p,
	main#pickup img.w55p,
	main#pickup img.w45p,
	main#pickup img.w40p,
	main#pickup img.w35p {
		width: 90%;
	}


	main#pickup .float_right.w40p,
	main#pickup .float_left.w40p {
		width: 55%;
	}


	main#pickup section>.inner p>img.float_right,
	main#pickup section>.inner p>img.float_left {
		width: 100%;
		display: block;
		float: none !important;
		margin-left: 0;
		margin-right: 0;
	}


	/* 2025-12-21 */
	main#pickup section .box_msg {
		padding: 1.5em 1.5em 2.5em 1.5em;
	}

	main#pickup section .box_msg>p {
		line-height: 1.8;
	}



	main#pickup section .box_msg figure {
		width: 100%;
		margin: 0 auto;
	}

	main#pickup section .box_msg figure+p {
		margin-top: 1em !important;
	}

	/*202-12-25*/

	main#pickup div.wrap_profile {
		margin-top: 2em;
		width: 100%;

		h4 {
			font-size: 1.6rem;
			margin-top: 0;
		}

		& p {
			font-size: 4.375vw;
		}

		& h4 {
			font-size: 4.375vw;
			margin-top: 2em;
		}

		& dl {
			margin-top: 2.5em;
			display: block;
			flex-wrap: wrap;
		}

		& dt,
		& dd {
			line-height: 1.5;
			margin-top: 1.5em;
		}

		& dt:first-of-type {
			margin-top: auto;
		}

		& dl>dt {
			font-size: 5vw;
			margin-top: 1em;
		}

		& dd:first-of-type,
		& dl>dd {
			width: 100%;
			font-size: 4.063vw;
			margin-top: 0;
		}

	}




	/* mq-end */
}

/* 2026 */
/* /f_spot/pickup/2007/vol_20.html */
body.old-archive-style {
	& #wrapper_contents {
		margin-top: 50px;
		width: 769px;
		margin-inline: auto;

		display: grid;
		grid-template-columns: 1fr 140px;
		/* 左 / 右 */
		grid-template-rows: auto auto auto 1fr;
		gap: 16px;

		& div#subColumnArea {}


		/* 上3本は全部フル幅 */
		& #topImgPickup,
		& p.volAreaOrihica,
		& h2.titleCorner {
			grid-column: 1 / 3;
		}

		/* 下段 */
		& #mainColumnArea {
			grid-column: 1;
		}

		& #subColumnArea {
			grid-column: 2;
		}

		& div#columnE {
			width: auto;
			padding: auto;
		}

	}
}

/* 移行ページ is_legacy */

body.is_legacy:not(.y2013, .y2012, .y2011, .y2010) {
	/* & #wrapper_contents {
		margin-top: 0;
	} */
}

body.is_legacy {

	& #wrapper_contents {
		margin-top: 0;
	}

	& #box_main p.typo_lead {
		font-size: 1.6rem;
		line-height: 2;
		font-weight: bold;
		line-height: 1.8 !important;
	}

	& #box_main h4 {
		margin-top: 2em;
	}

}

body.is_legacy.y2003,
body.is_legacy.y2013 {

	& main#pickup>article::after {
		display: none;
	}

	& #wrapper_contents {
		width: 980px;
		margin-inline: auto;
		border: none;
		margin-top: 20px;
	}

	& main#pickup {
		width: 760px;
	}

	& #box_kv {
		position: static;
		margin-top: 0;
		height: auto;
		width: 100%;
	}

	& main#pickup>article {
		width: 100%;
		padding: 0;
	}

	& #box_sub {
		position: static;
		width: 190px;
		padding: 0;
	}

	& div.img_center {
		text-align: center;
		margin: 30px auto;

		& img {
			margin-top: 2em;
		}
	}


}

body.is_legacy.y2003 {

	& #box_kv.legacy::after {
		display: none;
	}

	& #box_kv.legacy {
		padding-right: 0;
	}

}

/**/

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

	body.is_legacy.y2003,
	body.is_legacy.y2013 {
		& #wrapper_contents {
			width: 100%;
			padding: 0 4vw;
			margin-top: 4vw;
			flex-direction: column;

			& .img_right,
			& .img_left {
				float: none;
			}
		}

		& main#pickup {
			width: 100%;
		}

		& #box_kv.legacy h3>img {
			width: 100%;
			height: auto;
		}

		& #box_sub {
			width: 100%;
			margin-top: 4vw;
		}

		& div#box_archive_list ul {
			border: none;

			& li {
				border: none;
				margin-top: 2vw;
			}
		}


	}
}