@charset "UTF-8";

/*
========================================

	kayoinoba.css
    
========================================
*/

.font-light {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W3','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}
.font-semibold {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W5','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}
.font-bold {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W6','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}

blockquote p {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W6','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}
h5.head_arrow,h5.head_arrow_rev {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W6','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}

/*----------------------------------------
   layout
----------------------------------------*/

body {background-image: linear-gradient(#73c9ff 0, #9cddff 20vh, #c4f0ff 40vh, #c4f0ff 100vh);}/*bg_sky_cloud.svg*/

.kayoinoba h3 span.maintitle {
	text-shadow: 3px 3px 0 #fff,
	-1px 1px 0 #fff,
	1px -1px 0 #fff,
	-1px -1px 0 #fff;
}

ol.km_kayoinoba_index li,
.kayoinoba h3,
h4.km_kayoinoba_index {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W6','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}

ol.km_kayoinoba_index li ol li {font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W4','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;}

.wrapper {
    /*background-color:#c4f0ff;*/
    background-image: url("/common/cmn_img/bg_sky.png");/*fallback*/
    background-image: url("/common/cmn_img/bg_sky_cloud.svg"), none;
    background-size: 200%;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
}

.wrapper.kayoinoba {
    /*background-image: linear-gradient(#73c9ff 0, #9cddff 50vh, #c4f0ff 100vh) ;*/
    background-color: rgba(115,201,255,0.35);
    background-blend-mode: multiply;
}

.wrapper.kayoinoba .hero {
	/*background-image: url("/common/cmn_img/bg_sky.png");fallback
    background-image: url("/common/cmn_img/bg_sky_cloud.svg"), none;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;*/
	background-image: linear-gradient(rgba(255,255,255,0.5) 0%,  rgba(255,255,255,1) 100%);
	/*background-color: rgba(255,255,255,0.5);*/
    background-blend-mode: multiply;
}

div.h2Box {
    display: block;
    width: 100%;
	background-color:rgba(30,64,175,0.3);
    /*background-image: url("/img/img_main.png");fallback
    background-image: url("/img/img_main.svg"), none;
    background-size:52%;
    background-repeat: no-repeat;
	background-position:60vw 40px;*/
	background-blend-mode: multiply;
}

div.h2Box h2 {
    color: #fff;
}

@media (min-width: 992px) {
    
    .wrapper {background-size: contain;} 
 
	div.h2Box {
		display: block;
		width: 100%;
		/*background-image: url("/img/img_main.png");fallback
		background-image: url("/img/img_main.svg"), none;
		background-size:35%;
		background-repeat: no-repeat;
		background-position:60vw 1vh;*/
	}

}/*@media end*/


blockquote p {
	position:relative;
	/*border:4px solid #fff;*/
	padding:2rem;
	/*background-color: rgba(255,255,255,0.5);
	background-color: #0e24a2;*/
	color: #333;
	font-weight: 700;
	margin: 0 1rem;
	font-style: oblique;
	display: inline-block;
	/*border-radius: 8px;*/
}
blockquote p::before{
	position:absolute;
	font-family:serif;
	content:'“';
	color:#1d4ed8;
	top:8px;
	left:8px;
	font-size: 2rem;
	font-weight: 900;
}
blockquote p::after{
	position:absolute;
	font-family:serif;
	content:'„';
	color:#1d4ed8;
	right:12px;
	bottom:12px;
	font-size: 2rem;
	font-weight: 900;
}

cite {word-break: break-all !important;}/*URLも折り返せるように*/

cite a {
	color: #1d4ed8;/*blue-700*/
	font-weight: 500;
	font-family:/*YakuHanJP,*/'FP-ヒラギノUD丸ゴ StdN W5','Noto Sans JP','Hiragino Kaku Gothic Pro','Osaka','Meiryo','MS PGothic',Sans-Serif;
	line-height: 2;
}
cite a:hover {
	background: #c4f0ff;
	text-decoration: underline;
}

/*疑似blockquote*/

div.bq {
	position:relative;
	/*border:1px solid #A5B4FC;indigo-300*/
	border-radius:0.5rem;
	padding:1rem;
	background-color: #E0E7FF;/*indigo-100*/
	/*margin-top: 2.5rem;*/
	padding:2rem 1rem ;
}
div.bq:before{
	position:absolute;
	font-family:serif;
	content:'“';
	color:#A5B4FC;
	top:10px;
	left:16px;
	font-size: 2rem;
	font-weight: 900;
}
div.bq:after{
	position:absolute;
	font-family:serif;
	content:'„';
	color:#A5B4FC;
	right:16px;
	bottom:10px;
	font-size: 2rem;
	font-weight: 900;
}
div.bq p {
	margin: 0;
	font-style: oblique;
	font-weight: 500;
}

/*見出し矢印*/

.head_arrow,
.head_arrow_rev  {
	display: block;
	position: relative;
	width: 100%;
	padding: 12px 0;
	border-bottom: 2px solid #60a5fa;/*blue-400*/
}

@media (min-width: 992px) {

	.head_arrow::before{
		position: absolute;
		bottom: 0;
		left: -8px;
		width: 100%;
		height: 12px;
		content: "";
		/*border-bottom: 2px solid #60a5fa;blue-400*/
		border-right: 8px solid #93c5fd;/*blue-300*/
		transform: skew(55deg);
	}

	.head_arrow_rev::before{
		position: absolute;
		bottom: 0;
		right: -8px;
		width: 100%;
		height: 12px;
		content: "";
		/*border-bottom: 2px solid #60a5fa;*/
		border-left: 8px solid #93c5fd;
		transform: skew(-55deg);
	}

}