@charset "utf-8";

/* *****************************************************************************
   スマートフォン用のスタイル記述
***************************************************************************** */
@media screen and (max-width: 480px) {
	/* -----------------------------------------------------------------------------
	 parts
	----------------------------------------------------------------------------- */
	/* parts-img-box */
	.parts-img-box {
		max-width: none;
		margin: 0 auto 10px;
		display: block;
	}
	
	.parts-img-box li {
		width: auto;
		padding: 0 0 10px;
		display: block;
	}
	
	.parts-img-box li:nth-child(even) {
		padding: 0 0 10px 0;
	}
	
	.parts-img-box li img {
		width: 100%;
		height: auto;
	}
	
	
	


/* -----------------------------------------------------------------------------
 財団カスタマイズ
----------------------------------------------------------------------------- */

	/* 2分割・3分割・4分割 */
	.half,
	.trisection,
	.quarter{
		flex-direction: column;
		justify-content: center;
	}
	.half .left,
	.half .right,
	.trisection .left,
	.trisection .center,
	.trisection .right,
	.quarter .left1,
	.quarter .left2,
	.quarter .right1,
	.quarter .right2{
		width: 100%;
	}

	/* flow 横 */
	.flow-area1 ul li{
		flex-direction: row;
		width: auto;
	}
	.flow-area1 ul li p.flow_head{
		font-size: 1em;
	}
	.flow-area1 ul li img{
		width: 30%;
		margin-right: 0;
	}
	.flow-area1 ul.flow1 li:first-child,
	.flow-area1 ul.flow1 li:nth-child(2){
		margin-right: 0;
	}
	.flow-area1 ul.flow2 li:first-child:before,
	.flow-area1 ul.flow2 li:nth-child(2):before{
		border-right-color: transparent;
	}
	.flow-area1 ul.flow1 li:first-child:before,
	.flow-area1 ul.flow1 li:nth-child(2):before,
	.flow-area1 ul.flow2 li:first-child:before,
	.flow-area1 ul.flow2 li:nth-child(2):before{
		left: calc(50% - 20px); /* 右矢印の横位置 */
		top: 100%; /* 右矢印の縦位置 */
		border-width: 20px 20px 0 20px;
		border-top-color: #69b828;
		border-left-color: transparent;
	}


	/* flow 縦 */
	.flow-area2 ul li{
		flex-direction: column;
	}
	.flow-area2 ul li img{
		width: auto;
		max-width: 100%;
		margin-right: 0;
	}

	
/* -----------------------------------------------------------------------------
	 個別設定
----------------------------------------------------------------------------- */
	
	
	/* トップ画像調整 */	
	#top-contents .top_pc{display: none;}
	
	#top-contents .layer1 {
		position: absolute;width: 100%;
		top: 20%;
		right: 0%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		padding-right: 10px;
		z-index: 5;
	}
	
	
	#top-contents .layer1 p{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 900;
		font-size: 18px;
		line-height: 1.4em;
		color:#fff;
		text-shadow: 3px 3px 2px rgba(0,0,0,0.6);
		text-align: left;
		padding-left:calc(100% - 95%);
		
	}	
	
	#top-contents .layer1 h1 span{
		font-size: 200%;
	}
	
	
	
	#top-contents .layer2 {
		position: absolute;width: 100%;
		top: 5%;
		right: 0%;
		z-index: 5;
	}
	
	#top-contents .layer2 h1{
		font-family: 'Noto Sans JP', sans-serif;
		font-weight: 900;
		font-size: 10.8vw;
		/*font-size: 120px;*/
		line-height:1.2em;
		color:#25318C;
		text-shadow: 2px 2px 2px rgba(255,255,255,0.6);
		text-align: right;
		padding-right:calc(100% - 96%);
		
	}	
	
	#top-contents .layer2 h1 span{
		font-size: 64%;
		letter-spacing:12px;
	}	
	
	/* parts-h2 */
	.parts-h2 {
		font-size: 1.6em;
	}	
	
	
	/* flex左画像右テキスト */
	.flex_l30r70,
	.flex_l70r30{
		flex-direction: column;
		justify-content: center;
	}

	.flex_l30r70 .left,
	.flex_l30r70 .right,
	.flex_l70r30 .left,
	.flex_l70r30 .right{
		width: 100%;
	}

	.flex_l30r70 .left img,
	.flex_l30r70 .right img,
	.flex_l70r30 .left img,
	.flex_l70r30 .right img{
		width:100%;
	}	

/* 画像3枚・2枚・3枚flex */
	.flex-3_2_3-img:nth-child(n){
		width:100%;	
	}
	
	/*halfスマホ:テキスト・画像配置順統一*/
	.fl-rv {
		flex-direction: column-reverse;
	}	

}

@media screen and (max-width: 420px) {
	
	
	header > .inner > .logo a img{
		height:13px;
		vertical-align: middle;
	}	
	
	/* parts-h2 */
	.parts-h2 {
		font-size: 1.2em;
	}	
	
	/* parts-h3 */
	.parts-h3 {

		font-weight: 600;
		font-size: 1.4em;
		line-height: 1.2;
	}	
	
	.contact .left a{
		font-size: 1.8em;
	}	
}

@media screen and (max-width: 420px) {
	.prf_name{
		margin-left:-200px;
	}	
	
	.prf_name table{
		width:100%;
		border-collapse: collapse;
		margin-right: 0px;
	}	
	
	.prf_name table th{
		text-align:right;
		width:100%;
		font-size:13px;
		font-weight:900;
		border:none;
		white-space: nowrap;
	}	
}

@media screen and (max-width: 320px) {
	.flex_l30r70 .left img,
	.flex_l30r70 .right img,
	.flex_l70r30 .left img,
	.flex_l70r30 .right img{
		max-width:280px;
	}		
	
	.contact .left a{
		font-size: 1.6em;
	}	
}