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

/* Web Font */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&family=Noto+Serif+JP:wght@400;700&display=swap');
/*
https://fonts.google.com/specimen/Noto+Sans+JP?query=not&selection.family=Montserrat:wght@400;700|Noto+Sans+JP:wght@400;700&sidebar.open

font-family: 'Noto Serif JP', serif;
font-family: 'Libre Baskerville', serif;
*/

/* ==================================================
BASE (RESET)
================================================== */
html { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin: 0; padding: 0; }
*, *::after, *::before { -webkit-box-sizing: inherit; box-sizing: inherit; }
body { position: relative; width: 100%; margin: 0; padding: 0; text-align: center; }
#all-wrap { width: 100%; margin: 0 auto; }

h1, h2, h3, h4, h5, h6, p { font-size: 100%; font-weight: inherit; margin: 0; padding: 0; }
ul, ol, dl { margin: 0; padding: 0; vertical-align: baseline; background: transparent; }
ol, li { list-style: none; }
dt, dd { font-weight: inherit; font-style: normal; margin: 0; padding: 0; }
table{ border-collapse: collapse; border-spacing: 0; }
th, td { font-size: inherit; font-weight: inherit; font-style: normal; empty-cells: show; }
input, select { vertical-align: middle; }
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
pre { white-space: pre-wrap; }
em, strong, i, b { font-style: normal; font-weight: inherit; }
figure { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align: baseline; background: transparent; }
img { font-size: 0; line-height: 0; border: 0; vertical-align: bottom; }
img, object, embed, video { max-width: 100%; }
/*レスポンシブ対応*/
img, svg { max-width: 100%; height: auto; }
/* ---------- */
a { font-size: inherit; margin: 0; padding: 0; background: transparent; vertical-align: baseline; }


/* ==================================================
FONT
================================================== */
html { font-size: 62.5%; }

@media screen and (max-width: 900px) {
	html { font-size: 10px; }
}

body,
#allWrap {
	font-family: 'Noto Serif JP', serif;
	font-style: normal;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.6;
	letter-spacing: 0;
	color: #fff;
	
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: "palt", 'liga';
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; /* iPhoneの文字サイズバグの回避 */
}

#allWrap { font-size: 1.6rem; }

/* ==================================================
LINK
================================================== */
a { outline: 0; transition: opacity 0.4s ease-out 0s, color 0.4s ease-out 0s; }
a:link { text-decoration: none; color: #fff; }
a:visited { text-decoration: none; color: #fff; }
a:hover { text-decoration: none; color: #fff; opacity: 0.6; }
a:active { text-decoration: none; color: #fff; }
:focus { outline: 0; }

/* ==================================================
VIEW SWITCH
================================================== */

/* View Switch
------------------------------ */
@media screen and (min-width: 901px) {
.spOnly { display: none !important; }
}

@media screen and (max-width: 900px) {
.pcOnly { display: none !important; }
}


/* ==================================================
PAGE BASE
================================================== */
body {
	min-width: 320px;
	background-color: #000;
}

#allWrap {
	width: 100%;
	min-width: 320px;
	text-align: center;
	overflow: hidden;
	position: relative;
	animation: intro-fadein 1s ease-in 1s both;
}

@keyframes intro-fadein {
	0% { opacity: 0; }
	100% { opacity: 1; }
}


/* RESET CSS CUSTOM */
i {
	display: inline-block;
}

::before, ::after {
	display: inline-block;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
/**/

/* ==================================================
HEADER
================================================== */
#siteHdr {
	border-top: 16px solid #1e1e1e;
}

#siteHdr .flexBlock {
	width: 87.5%;
	margin: 0 auto;
}

#siteHdr .title {
}

#siteHdr .title h1 {
	font-family: 'Libre Baskerville', serif;
	line-height: 1;
	padding: 40px 0;
}

#siteHdr .title h1 .label {
	letter-spacing: 0.02em;
	margin-bottom: 15px;
}

#siteHdr .title h1 .en {
	letter-spacing: 0.05em;
	margin-bottom: 10px;
}

#siteHdr .title h1 .jp {
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	padding: 0 0 0 0.5em;
}

@media screen and (max-width: 320px) {
	#siteHdr .title h1 .label {
		font-size: 1.6rem;
	}

	#siteHdr .title h1 .en {
		font-size: 3.8rem;
	}

	#siteHdr .title h1 .jp {
		font-size: 2.2rem;
	}
}

@media screen and (min-width: 321px) and (max-width: 480px) {
	#siteHdr .title h1 .label {
		font-size: 5vw;
	}

	#siteHdr .title h1 .en {
		font-size: 12vw;
	}

	#siteHdr .title h1 .jp {
		font-size: 7vw;
	}
}

@media screen and (min-width: 481px) {
	#siteHdr .title h1 .label {
		font-size: 2.4rem;
	}

	#siteHdr .title h1 .en {
		font-size: 5.8rem;
	}

	#siteHdr .title h1 .jp {
		font-size: 3.4rem;
	}
}

#siteHdr .visual {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

#siteHdr .visual::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 8px;
	left: 8px;
	border: 3px solid rgba(255,255,255,0.2);
	z-index: -1;
}

#siteHdr .visual img {
	border: 3px solid #fff;
}

@media screen and (max-width: 520px) {
#siteHdr .visual img.forPc {
	display: none
}
}

@media screen and (min-width: 521px) {
#siteHdr .visual img.forSp {
	display: none
}
}


#siteHdr .date-navi {
	margin-top: 40px;
}

#siteHdr .navigator {
}

#siteHdr .date {
	line-height: 1.6;
	letter-spacing: 0.05em;
	font-weight: 700;
	margin-bottom: 15px;
}

@media screen and (max-width: 320px) {
	#siteHdr .date {
		font-size: 1.8rem;
	}
}

@media screen and (min-width: 321px) and (max-width: 480px) {
	#siteHdr .date {
		font-size: 5.6vw;
	}

}

@media screen and (min-width: 481px) {
	#siteHdr .date {
		font-size: 2.7rem;
	}
}

#siteHdr .date b {
	font-size: 80%;
	opacity: 0.6;
	transform: translateY(-2px);
	display: inline-block;
}

#siteHdr .date .time {
}

#siteHdr .narrator {
	background-color: #000;
	width: 87.5%;
	margin: 50px auto 0;
	position: relative;
	z-index: 1;
	max-width: 380px;
}

#siteHdr .narrator::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 8px;
	left: 8px;
	border: 3px solid rgba(255,255,255,0.2);
	z-index: -1;
}

#siteHdr .narrator .inner {
	background-color: #000;
	border: 3px solid #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row;
	width: 100%;
}

#siteHdr .narrator .thumb {
	width: 35%;
	border-right: 3px solid #fff;
}

#siteHdr .narrator .thumb img {
}

#siteHdr .narrator .caption {
	line-height: 1;
	text-align: left;
	width: 65%;
	padding: 15px;
}

#siteHdr .narrator .caption .label {
	/*font-family: 'Libre Baskerville', serif;*/
	color: #000;
	background-color: #fff;
	display: inline-block;
	font-size: 1.3rem;
	padding: 3px 12px;
	margin-bottom: 12px;
	font-weight: 700;
}

#siteHdr .narrator .caption .name {
	letter-spacing: 0.05em;
}

@media screen and (min-width: 901px) {
#siteHdr {
}

#siteHdr .flexBlock {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	padding: 80px 30px 0;
	width: 100%;
	max-width: 1160px;
}

#siteHdr .title {
	width: 380px;
	text-align: left;
	/*! padding-left: 15px; */
}

#siteHdr .title h1 {
	padding: 0 0 50px;
}

#siteHdr .title h1 .label {
	padding-left: 0.2em;
	margin-bottom: 20px;
}

#siteHdr .title h1 .en {
	margin-bottom: 15px;
}

#siteHdr .title h1 .jp {
	padding: 0;
}

#siteHdr .visual {
	max-width: 705px;
	margin: 0;
	width: calc(100% - 380px);
	padding-right: 45px;
}

#siteHdr .visual::after {
	top: 12px;
	left: 12px;
	width: calc(100% - 45px);
}

#siteHdr .visual img {
	border-width: 6px;
}

#siteHdr .date-navi {
	margin-top: 0;
}

#siteHdr .navigator {
	font-size: 1.8rem;
}

#siteHdr .date {
	font-size: 2.2rem;
}

#siteHdr .date b {
}

#siteHdr .date .time {
}

#siteHdr .narrator {
	margin: 80px 0 0;
	width: 375px;
}

#siteHdr .narrator::after {
	top: 12px;
	left: 12px;
}

#siteHdr .narrator .inner {
	border-width: 6px;
}

#siteHdr .narrator .thumb {
	border-right-width: 6px;
}

#siteHdr .narrator .thumb img {
}

#siteHdr .narrator .caption {
}

#siteHdr .narrator .caption .label {
}

#siteHdr .narrator .caption .name {
	font-size: 1.8rem;
}
}

/* ==================================================
CONTENTS
================================================== */
#cntWrap {
	padding: 50px 3%;
}

@media screen and (min-width: 901px) {
	#cntWrap {
		padding: 80px 30px 100px;
	}
}

/* #leadArea
------------------------------ */
#leadArea {
	color: #000;
	max-width: 640px;
	margin: 0 auto;
	transition: all 0.4s ease-out 0s;
}

#leadArea .head {
	font-weight: 700;
	background-color: #fff;
	margin-bottom: 3px;
	font-size: 2rem;
	padding: 20px 3%;
	line-height: 1.6;
}

#leadArea .head i {
}

#leadArea .box {
	background-color: #fff;
	padding: 30px 3%;
}

#leadArea .box .comment {
	text-align: left;
	margin-bottom: 40px;
	line-height: 1.8;
}

#leadArea .box .comment p {
}

#leadArea .box .episode {
	text-align: left;
	margin-bottom: 40px;
	line-height: 1.8;
}

#leadArea .box .episode dl {
	background-color:  #f7f7f7;
	padding: 30px 3%;
}

#leadArea .box .episode dl:not(:last-child) {
	margin-bottom: 30px;
}

#leadArea .box .episode dl dt {
	display: inline-block;
	border: 2px solid #000;
	line-height: 1.4;
	padding: 6px 15px;
	font-weight: 700;
	font-size: 1.8rem;
	margin-bottom: 20px;
	background-color: #fff;
}

#leadArea .box .episode dl dd {
	font-size: 1.5rem;
}

@media screen and (min-width: 901px) {
	#leadArea {
		max-width: 1100px;
	}
	#leadArea .head {
		font-size: 3rem;
		padding: 30px 40px;
	}
	#leadArea .box {
		padding: 50px 40px;
	}

	#leadArea .box .comment {
		max-width: 720px;
		margin: 0 auto 50px;
		line-height: 2;
	}
	#leadArea .box .episode {
		max-width: 720px;
		margin: 0 auto 50px;
		line-height: 2;
	}
	#leadArea .box .episode dl {
	padding: 40px 30px;
	}
	#leadArea .box .episode dl:not(:last-child) {
	margin-bottom: 40px;
	}
	#leadArea .box .episode dl dt {
	}
	#leadArea .box .episode dl dd {
	}
}

/* ==================================================
GIGYA SHARE
================================================== */
#snsArea {
}

#gigyaShare {
}


/* ==================================================
FOOTER
================================================== */
#ftrWrap {
	border-bottom: 3px solid #000;
}

#ftrWrap .inner {
	background-color: #1e1e1e;
	padding: 30px 3%;
}

#ftrWrap .jwaveLogo {
	max-width: 160px;
	margin: 0 auto 20px;
	width: 50%;
}

#ftrWrap .jwaveLogo a {
}

#ftrWrap .jwaveLogo a img {
}

#ftrWrap .copyright {
	font-family: 'Libre Baskerville', serif;
	line-height: 1.2;
	font-size: 1.2rem;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ==================================================
OTHERS
================================================== */
/* scrollto */
.scrollto {}

/* clrfix */
.clrfix::before, .clrfix::after { display: table; content: ''; }
.clrfix::after { clear: both; }

/* iOS フルサイズディスプレイ対応 */
.vfit-cover {
	padding-left: constant(safe-area-inset-left);
	padding-right: constant(safe-area-inset-right);
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}

/**/

/*


<!-- #################################################################################################### -->
<!-- ##########　HTML コメントアウト記述ルール　######################################################### -->
<!-- #################################################################################################### -->


<!-- ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼ -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ///// メインコンテンツエリア（編集エリア） ///////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->

<!-- //////////////////////////////////////////////////////////////////// -->
<!-- //////////////////////////////////////////////////////////////////// -->
<!-- ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ -->

<!-- ==================== 大ブロックエリア ==================== -->
<!-- ==================== //大ブロックエリア ==================== -->

<!-- ***** 中ブロックエリア *************** -->
<!-- ***** //中ブロックエリア *************** -->

<!-- #ID名 -->
<!-- //#ID名 -->

<!-- .class名 -->
<!-- //.class名 -->

<!-- [memo] -->
<!-- //[memo] -->


<!-- ※※※※※ INCLUDE - HEADER ※※※※※ -->
<!--#include virtual="/common/inc_header.html"-->
<!-- ※※※※※ //INCLUDE - HEADER ※※※※※ -->

<!-- ※※※※※ INCLUDE - FOOTER ※※※※※ -->
<!--#include virtual="/common/inc_footer.html"-->
<!-- ※※※※※ //INCLUDE - FOOTER ※※※※※ -->

<!--
[ id/class Name List ]
wrap > area > group > set > box or block

[ memmo ]
TOPページ → <body class="pageHome">
Newsページ(第2階層) → <body class="pageNews dir2nd">
-->
*/


/* #################################################################################################### */
/* ##########　CSS コメントアウト記述ルール　########################################################## */
/* #################################################################################################### */


/* //////////////////////////////////////////////////////////////////// */
/* ///// ブロック区切り /////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////// */

/* ==================================================
大見出し
================================================== */

/* 中見出し（他、説明など）
------------------------------ */

/* ### 小見出し 1 ### */
/* ### ----- ### */

/* 小見出し 2 */
/* ----- */


/**/