@charset "utf-8";

/*
Theme Name: rscbp 4 Stage
Theme URI: テーマを紹介しているページアドレス
Description: rscbp 4 Stage
Version: 0.1
Author: rs
Author URI: Enigma
License: ...
License URI: ...
Tags: ...
*/


/*++++++++++++++++++++++++++++++ reset ++++++++++++++++++++++++++++++*/
/* HTML5 display definitions */ section, nav, article, aside, hgroup, header, footer, figure, figcaption, details {display: block; } video, audio, canvas {display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) {display: none; } [hidden] {display: none; } /* The root element */ html {font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } /* Sections */ body {font-family: sans-serif; margin: 0; } h1, h2, h3, h4, h5, h6 {font-size: 1em; margin: 0; } /* Grouping content */ p, blockquote, dl, dd, figure {margin: 0; } hr {color: inherit; height: auto; -moz-box-sizing: content-box; box-sizing: content-box; } pre {font-family: monospace, sans-serif; white-space: pre-wrap; word-wrap: break-word; margin: 0; } ol, ul {padding: 0; margin: 0; } li {list-style: none; } /* Text-level semantics */ a:focus {outline: none /*thin dotted*/; } a:hover, a:active {outline: 0; } strong, b {font-weight: bold; } small {font-size: 0.83em; } q {quotes: none; } abbr[title] {border-bottom: 1px dotted; } code, samp, kbd {font-family: monospace, sans-serif; } mark {color: black; background-color: yellow; } sub, sup {font-size: 0.83em; line-height: 0; vertical-align: baseline; position: relative; } sub {bottom: -0.25em; } sup {top: -0.5em; } br {letter-spacing: 0; } /* Embedded content */ img {width: 100%; border: 0; vertical-align: bottom; -ms-interpolation-mode: bicubic; } svg:not(:root) {overflow: hidden; } /* Tabular data */ table {border-collapse: collapse; border-spacing: 0; } caption {padding: 0; text-align: left; } th, td {text-align: left; vertical-align: baseline; padding: 0; } /* Forms */ form {margin: 0; } fieldset {border: 0; padding: 0; margin: 0; } legend {border: 0; *margin-left: -7px; } input, button, select, textarea {font-family: inherit; font-size: 1em; color: inherit; margin: 0; } input, button {line-height: normal; vertical-align: inherit; *vertical-align: middle; } input::-moz-focus-inner, button::-moz-focus-inner {border: 0; padding: 0; } input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } input[type="search"]:focus {outline-offset: -2px; } input[type="search"]::-webkit-search-decoration {-webkit-appearance: none; } input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0; } input[type="submit"], input[type="reset"], input[type="button"], button {cursor: pointer; -webkit-appearance: button; *overflow: visible; } select {background-color: inherit; line-height: normal; } textarea {vertical-align: top; overflow: auto; *font-family: sans-serif; } address {font-style: normal; }
h1, h2,h3, h4, h5, h6, th, td {font-weight: normal; }
* {margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
/*============================== reset ==============================*/

@font-face {font-family: "mainfont"; src: url("font/zurich-condensed-bt.ttf") format("truetype"); }
@font-face {font-family: "titlefont"; src: url("font/zurich-extra-condensed-bt.ttf") format("truetype"); }
body {font-family: "mainfont", sans-serif; }

/*============================== common ==============================*/


/*++++++++++++++++++++++++++++++ basic ++++++++++++++++++++++++++++++*/
*	{
	margin:0;
	padding:0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}
html, body {
	width: 100%;
	height: 100vh;
	}
html {
	height: -webkit-fill-available;
	font-size: 2.0vw;
	line-height: 2.2;
	color: #000;	/* main font color */
	letter-spacing: 0;
	}
body {
	min-height: 100vh;
	min-height: -webkit-fill-available;
	font-weight: normal;
	background: #fff;
	margin: 0 auto;
	padding: 0;
	animation: fx-body 1.5s ease 0.5s 1 normal both;
	-webkit-animation: fx-body 1.5s ease 0.5s 1 normal both;
/*	border: dotted 10px #f00;*/
	}
@keyframes fx-body {			0%	{opacity: 0; }	100%	{opacity: 1; } }
@-webkit-keyframes fx-body {		0%	{opacity: 0; }	100%	{opacity: 1; } }

br.spc {display: block; }
span.spc {display: none; }

a			{color: #000; }
a:link			{text-decoration: none; }
a:visited		{text-decoration: none; }
a:hover		{text-decoration: none; color: #999; }
a:active		{text-decoration: none; }
/*============================== basic ==============================*/



/*++++++++++++++++++++++++++++++ GENERAL ++++++++++++++++++++++++++++++*/


header {
/*	background: rgba(255,255,255, .95);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 300;
*/	border-bottom: solid 0px #ccc;
	}

header>div {
	position: relative;
	margin: 25px auto 20px;
	width: calc(var(--win)*var(--header_w));
	max-width: var(--max);
	max-width: calc(var(--max)*var(--header_w));
	font-size: min(0.75rem, 20px);
	line-height: 1;
	border: solid 0px #f00;
	}

#header{
	background: rgba(255,255,255, .90);
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 300;
	border-bottom: solid 0px #f00;
	}
#header.UpMove{animation: UpAnime 0.5s forwards; }
#header.DownMove{animation: DownAnime 0.8s forwards; }
@keyframes UpAnime{from {opacity: 1; transform: translateY(0); } to {opacity: 0; transform: translateY(-100%); } }
@keyframes DownAnime{from {opacity: 0; transform: translateY(-100%); } to {opacity: 1; transform: translateY(0); } }

header h1 {width: 12%; }
header nav {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	border: solid 0px #f00;
	}
header ul {
	display: flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	}
header ul li {margin: 0 min(1rem, 30px); }
header ul li:last-child {
	margin-right: 0;
	width: clamp(14px, 1.0rem, 18px);
	border: solid 0px #000;
	}
header ul li:last-child img {width: 100%; }
body#model header ul li.sub {display: none; }	/**/

.link.is-active {
	color: #999;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 7px;
	}














footer {
/*	background: #ccc;*/
	height: 100vh;
	
	border: solid 0px #000;
	
	}


footer > div {
	position: relative;
	top: 50%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
/*	padding-bottom: min(var(--photo_size_x4_height), var(--photo_size_x4_height_max));*/
	width: var(--win);
	max-width: var(--max);
	
	transform: translateY(-50%);
	font-size: min(1.0rem, 20px);
	line-height: 1.4;
	border: solid 0px #f00;
	}
footer i {
	font-size: min(0.8rem, 16px);
	font-style: normal;
	}
footer h1 {
	width: 22%;
	margin-right: 5%;
	padding-right: 5%;
	border-right: solid 1px #000;
	}
footer div div {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	z-index: 100;
	border: solid 0px #f00;
	}
footer div div img {width: 100%; }


footer span {
	position: relative;
	width: 73%;
	}
footer span ul {width: 50%; }
footer span ul li {width: 100%; }
footer span ul:nth-of-type(1) {margin-bottom: min(1rem, 30px); }
footer span ul:nth-of-type(1) li {margin-bottom: min(0.5rem, 15px); }
footer span ul:nth-of-type(2) {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	}
footer span ul:nth-of-type(2) li:not(:first-child) {width: 50%; }
footer span ul:nth-of-type(3) {
	position: absolute;
	top: 0;
	left: 50%;
	border: dotted 0px #ccc;
	}





:root {
--width_size: 82;				/* width (vw) */
--max_w: 1000;					/* max-width (px) */
--header_w: 1.05;				/* header width ratio */
--photo_ratio: 1.3;				/* photo ratio */
--photo_margin: 0.6;			/* photo margin (%) */
--photo_margin_btm: 4;			/* photo margin bottom (%) */
--photo_info_position: 0.515;	/* photo info center position (%)*/


--width_over: calc(var(--max_w)/var(--width_size)*100px);
--h2: calc(var(--width_over)*0.16);	/* 0.12507817384 */
--h2b: calc(var(--h2)*0.31);
--h2m: calc(-1*0.585em*var(--h2b));
--h2_little: 0.8;

--win: calc(var(--width_size)*1%);
--photo_margin_min: calc(var(--width_size) *1vw*var(--photo_margin)/100);
--photo_margin_min_btm: calc(var(--photo_margin_min) *var(--photo_margin_btm));

--photo_x2: calc(calc(100 - var(--photo_margin)*1)/2);	/* *49.7 */
--photo_x4: calc(calc(100 - var(--photo_margin)*3)/4);	/* *24.55 */

--photo_size_x4: calc(var(--width_size) *1vw*var(--photo_x4)/100);
--photo_size_x4_height: calc(var(--photo_size_x4) *var(--photo_ratio));
--photo_size_x4_height_max: calc(var(--max_w) *1px*var(--photo_x4)/100*var(--photo_ratio));
--photo_size_x4_h_center: calc(var(--photo_size_x4_height) *var(--photo_info_position));
--photo_size_x4_h_center_max: calc(var(--max_w)*1px*var(--photo_x4)/100*var(--photo_ratio)*var(--photo_info_position));

--photo_size_x2: calc(var(--width_size)*1vw*var(--photo_x2)/100);
--photo_size_x2_height: calc(var(--photo_size_x2)*var(--photo_ratio));
--photo_size_x2_height_max: calc(var(--max_w)*1px*var(--photo_x2)/100*var(--photo_ratio));
--photo_size_x2_h_center: calc(var(--photo_size_x2_height) *var(--photo_info_position));
--photo_size_x2_h_center_max: calc(var(--max_w)*1px*var(--photo_x2)/100*var(--photo_ratio)*var(--photo_info_position));

--max: calc(var(--max_w)*1px);
--photo_mgn_max: calc(var(--max_w)*1px*var(--photo_margin)/100);
--photo_mgn_max_btm: calc(var(--photo_mgn_max)*var(--photo_margin_btm));

--win_photos: calc(calc(var(--width_size)*calc(calc(var(--photo_margin)/50) + 1))*1%);
--win_photos_max: calc(var(--max)*1.012);

--win_mgn_no: calc(var(--photo_margin)*20 + 1000);

--section_padding_top: 160;
--sec_pad: calc(var(--section_padding_top)*1px);
--sec_pad_x4_btm: calc(var(--photo_size_x4_height) - var(--sec_pad));
--sec_pad_x4_btm_max: calc(var(--photo_size_x4_height_max) - var(--sec_pad));
--sec_pad_x2_btm: calc(var(--photo_size_x2_height) - var(--sec_pad));
--sec_pad_x2_btm_max: calc(var(--photo_size_x2_height_max) - var(--sec_pad));
	}





section {
	padding-top: var(--sec_pad);
	padding-bottom: min(var(--sec_pad_x4_btm), var(--sec_pad_x4_btm_max));
	border: solid 0px #000;
	}
section:nth-of-type(1) {
	border: solid 0px #00f;
	}
section div.h2 {
	margin: 0 auto;
	width: var(--win);
	max-width: var(--max);
	border: solid 0px #f00;
	}
h2, h5, h6 {font-family: "titlefont", sans-serif; }
h6 {text-transform: lowercase; }

/*	--photo_x4: calc(calc(100 - var(--photo_margin)*3)/4);	/* *24.55 */

h2 {
	display: inline-block;
/*	margin: 0 0 min(4rem, 65px) 0.35em;*/
	margin: 0 0 min(4rem, 65px) calc(var(--photo_x4)*0.5*1%);
	font-size: min(8rem, var(--h2));
	line-height: 1;
	text-align: center;
	transform: translatex(-50%);
	border: dotted 0px #f00;
	}
.spe h2 {
	margin-left: 0.3em;
	transform: translatex(0);
	}
h2.b {margin-left: calc(calc(var(--photo_x4) + var(--photo_margin))*1%); }
h2 b {
	display: block;
/*	margin-top: max(-1.6rem, calc(-1*0.585em));*/
	font-size: min(2.72rem, var(--h2b));
	color: #999;
	}
.in h2 b {margin-top: -0.62em; }
.out h2 b {margin-top: -0.52em; }
.spe h2 b {margin-top: -0.45em; }
.little h2 {font-size: min(calc(8rem*var(--h2_little)), calc(var(--h2)*var(--h2_little))); }
.little h2 b {font-size: min(calc(2.72rem*var(--h2_little)), calc(var(--h2b)*var(--h2_little))); }
h2 i {display: none; }

div.models {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	width: var(--win);
	max-width: var(--max);
	border-top: solid 0px #ccc;
	}

div.models > div {
	position: relative;
	margin: min(var(--photo_margin_min_btm), var(--photo_mgn_max_btm)) min(var(--photo_margin_min), var(--photo_mgn_max));
	margin-top: 0;
	margin-left: 0;
	width: calc(var(--photo_x4)*1%);
	border: dotted 0px #000;
	}
div.models div:nth-child(4n) {
	margin-right: 0;
	border: dotted 0px #f00;
	}
div.models div img {
	width: 100%;
	height: var(--photo_size_x4_height);
	max-height: var(--photo_size_x4_height_max);
	object-fit: cover;
	object-position: 50% 50%;
	
	}




div.models > div h3 {
	position: relative;
	background: #fff;
	font-size: clamp(10px, 1.0rem, 16px);
	line-height: 1.5;
	z-index: 99;
	}
div.models > div h3.cs:after {
	position: absolute;
	right: 0;
	bottom: 0;
	content: " [coming soon]";
	color: #999;
	font-size: clamp(10px, 1.0rem, 16px);
	font-size: 1em;
	}

div.models > div div {
	position: absolute;
	background: rgba(0,0,0, 0.5);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 90;
	opacity: 0;
/*	opacity: 1;*/
	transition: all 0.4s;
	border: solid 0px #000;
	}
div.models > div:hover div {opacity: 1; }

div.models > div div span {
	position: absolute;
	top: min(var(--photo_size_x4_h_center), var(--photo_size_x4_h_center_max));
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	border: solid 0px #fff;
/*	opacity: 1;*/
/*	transition: all 0.5s;*/
	}
/*div.models > div:hover div span {opacity: 1; }*/

div.models span h5, div.models span h6 {
	font-size: clamp(10px, 1.0rem, 28px);
	line-height: min(2.2rem, 60px);
	color: #fff;
	}
div.models span h5 {
	position: relative;
	font-size: clamp(10px, 0.4rem, 18px);
	line-height: min(1.1rem, 18px);
	}
div.models span h5:before {
	position: absolute;
	display: inline-block;
	content: "";
	left: 50%;
	bottom: max(-0.25rem, -10px);
	width: 15%;
	height: 1px;
	transform: translate(-50%, -50%);
	background-color: #fff;
	}










div.info {
	position: relative;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	margin: 0 auto 50px;
	width: var(--win);
	max-width: var(--max);
	border: dotted 0px #f00;
	}

div.info h2 {
	position: absolute;
	display: block;
	left: 0;
	width: 60%;
	margin: 0 0 0.5em 0;
	font-size: min(7rem, calc(var(--h2)*0.70));
	line-height: 0.85;
	text-align: left;
	transform: translatex(0%);
	border: dotted 0px #f00;
	}
div.info div.prof {
	border: solid 0px #ccc;
	}

div.info div.prof div {
	display: flex;
	flex-wrap: nowrap;
	width: 100%;
	white-space: nowrap;
	border: dotted 0px #000;
	}

div.info div.prof div span {
	margin-right: min(1.2rem, 35px);
	margin-bottom: min(1.0rem, 20px);
	border: dotted 0px #ccc;
	}
div.info div.prof div:first-child span {margin-bottom: min(2rem, 40px); }
div.info div.prof div span:last-child {margin-right: 0; }
div.info div.prof div:last-child span:last-child {
	text-align: center;
	border: solid 0px #f00;
	}

div.info div.prof div span h5, div.info div.prof div span h6 {
	font-size: clamp(20px, 2.0rem, 40px);
	line-height: clamp(20px, 2.2rem, 60px);
	}
div.info div.prof div span h5 {
	position: relative;
	font-size: clamp(12px, 1.0rem, 20px);
	line-height: clamp(24px, 1.1rem, 30px);
	}
div.info div.prof div span.insta h6 {
	background: url(img/inst.svg) no-repeat center center;
	background-size: min(1.8rem, 30px);
	text-indent: -9999px;
	border: solid 0px #f00;
	}
div.info div.prof div span.insta a:hover h6 {opacity: 0.3; }




div.photo {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	padding: 0;
	width: var(--win_photos);
	max-width: var(--win_photos_max);
	border: solid 0px #f00;
	}
div.photo div {
	margin: min(var(--photo_margin_min), var(--photo_mgn_max)) min(var(--photo_margin_min), var(--photo_mgn_max));
	margin-top: 0;
	margin-right: 0;
	width: calc(1000/var(--win_mgn_no)*var(--photo_x2)*1%);
	border: dotted 0px #000;
	}
div.photo div.wide {width: calc(1000/var(--win_mgn_no)*100%); }

div.photo div img {
	width: 100%;
/*	height: var(--photo_size_x2_height);
	max-height: var(--photo_size_x2_height_max);
	object-fit: cover;
	object-position: 50% 50%;
*/	}
div.photo div.wide img {
	height: auto;
	max-height: none;
	}








.post-meta {
	font-size: 12px;
	
	}