@charset "UTF-8";

/**==============================================**/
/*
/*			共通設定
/*
/**==============================================**/

.main-img-wrap::before {
	background: rgba(0, 72, 120, 0.3);
}
div.cap-wrap h2 {
	color: #fff;
	text-align: center;
}

div.cap h3 {
	color: #00355f;
}


/* fase-01 */
div.fase-01 {}


/* fase-02 */
div.fase-02 {}
.fase-02 p span {
	color: #0868ab;
	font-weight: bold;
}


.fase-02 strong.batsu {
	position: relative;

}
.fase-02 strong.batsu span {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	transform: translate(-50%, -50%) rotate(45deg);
	height: 1px;
	background-color: #c8c9ca;
	display: block;
}
.fase-02 strong.batsu span:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: inherit;
	transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-o-transform: rotate(90deg);
}




/* fase-03 */
div.fase-03 {}
.fase-03 div.cap div.name {
	text-align: right;
}





/**==============================================**/
/*
/*			SP
/*
/**==============================================**/

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

	.main-img-wrap > img {
		margin-left: -11%;
	}
	
	div.cap-wrap h2 span {
		display: inline-block;
	}
	div.cap-wrap h2 {
		font-size: 1.8rem;
		line-height: 1.6;
		margin-top: 3%;
	}


	div.g-headd {
		margin-bottom: 7%;
		text-align: center;
	}
	.g-headd img {
		max-width: 100%;
	}
	div.cap {}
	.cap h3 {
		font-size: 2rem;
		line-height: 1.4;
		margin-bottom: 5%;
	}
	.cap h3 span {
		display: inline-block;
	}


	.inner-wrap p {
		font-size: 1.6rem;
		line-height: 1.78;
	}




	/* fase-01 */
	div.fase-01 {
		margin-top: 12%;
	}
	.fase-01 .g-headd img {
		max-width: 50%;
	}


	/* fase-02 */
	div.fase-02 {
		margin-top: 10%;
	}
	.fase-02 .g-headd h2 {
		display: inline-block;
		max-width: 100%;
	}
	.fase-02 strong:not(.batsu) {
		width: 37%;
		float: left;
	}
	.fase-02 strong.batsu {
		display: inline-block;
		width: 26%;
		float: left;
	}
	.fase-02 .batsu span {
		width: 50px;
	}



	/* fase-03 */
	div.fase-03 {
		margin: 10% auto;
	}
	.fase-03 .g-headd img {
		max-width: 50%;
	}
	.fase-03 div.name {
		margin-top: 3%;
	}
	.fase-03 .name strong {
		line-height: 1.8;
		font-size: 1.8rem;
	}









}


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





/**==============================================**/
/*
/*			sp-l ～ tab
/*
/**==============================================**/

@media screen and (min-width:737px) and (max-width:959px) {

	div.cap-wrap h2 {
		font-size: 20px;
		margin-top: 13%;
		margin-bottom: 1.6%;
	}
	.main-img-wrap .cap-wrap h1 {
		-webkit-transform: translate(0, -138%);
		-ms-transform: translate(0, -138%);
		transform: translate(0, -138%);
	}



	.h-rg .g-headd {
		float: right;
	}
	.h-lf .g-headd {
		float: left;
	}

	div.g-headd {
		width: 33.8%;
		margin-bottom: 7%;
	}
	.g-headd img {
		max-width: 86%;
	}
	div.cap {}
	.cap h3 {
		font-size: 23px;
		line-height: 1.4;
		margin-bottom: 18px;
	}
	.cap h3 span {
		display: inline-block;
	}


	.inner-wrap p {
		font-size: 16px;
		line-height: 2.3;
	}




	/* fase-01 */
	div.fase-01 {
		margin-top: 76px;
	}
	.fase-01 div.cap {
		margin-top: 10px;
	}



	/* fase-02 */
	div.fase-02 {
		margin-top: 110px;
	}


	.fase-02 .g-headd {
		text-align: center;
	}
	.fase-02 .g-headd h2 {
		display: inline-block;
		max-width: 66%;
	}
	.fase-02 strong.batsu {
		display: inline-block;
		width: 116px;
		height: 64px;
	}
	.fase-02 .batsu span {
		width: 50px;
	}



	/* fase-03 */
	div.fase-03 {
		margin-top: 110px;
	}
	.fase-03 div.name {
		margin-top: 1em;
	}
	.fase-03 .name strong {
		line-height: 2;
		font-size: 19px;
		margin-top: 14px;
	}




}



/**==============================================**/
/*
/*			sp tab 共通
/*
/**==============================================**/

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

	.main-img-wrap {
		max-height: none;
	}






}

/**==============================================**/
/*
/*			PC
/*
/**==============================================**/

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

	.main-img-wrap {
		max-height: 498px;
	}
	div.cap-wrap h2 {
		font-size: 29px;
		margin-top: 15%;
		margin-bottom: 8.6%;
	}
	.main-img-wrap .cap-wrap h1 {
		-webkit-transform: translate(0, -238%);
		-ms-transform: translate(0, -238%);
		transform: translate(0, -238%);
	}
	
	
	.h-rg .g-headd,
	.h-lf .cap {
		float: right;
	}
	.h-lf .g-headd,
	.h-rg .cap {
		float: left;
	}
	
	div.g-headd {
		width: 24.8%;
	}
	.g-headd img {
		max-width: 86%;
	}
	div.cap {
		width: 75.2%;
	}
	.cap h3 {
		font-size: 23px;
		line-height: 1.4;
		margin-bottom: 18px;
	}
	.cap h3 span {
		display: inline-block;
	}
	
	
	.inner-wrap p {
		font-size: 16px;
		line-height: 2.3;
	}
	
	
	
	
	/* fase-01 */
	div.fase-01 {
		margin-top: 76px;
	}
	.fase-01 div.cap {
		margin-top: 10px;
	}



	/* fase-02 */
	div.fase-02 {
		margin-top: 110px;
	}

	
	.fase-02 .g-headd {
		text-align: center;
	}
	.fase-02 .g-headd h2 {
		display: inline-block;
		max-width: 66%;
	}
	.fase-02 strong.batsu {
		display: inline-block;
		width: 116px;
		height: 64px;
	}
	.fase-02 .batsu span {
		width: 50px;
	}

	

	/* fase-03 */
	div.fase-03 {
		margin-top: 110px;
	}
	.fase-03 div.name strong {
	line-height: 2;
		font-size: 19px;
		margin-top: 14px;
	}

}


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

	
	
	
}



/**==============================================**/
/*
/*			print
/*
/**==============================================**/

@media print {


}