@charset "UTF-8";
body {
    padding-top: 115px;
}

/* ボックスエリア */
.box-area {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: stretch;
	    -ms-flex-align: stretch;
	        align-items: stretch;
}
.box-area-photo {
	width: 50%;   
}
.box-area-photo img {
	-o-object-fit: cover;
	   object-fit: cover;
	height: 33vw;
	-o-object-position: 100% 0%;
	   object-position: 100% 0%;	
}
.box-area-exp {
	width: 50%;
	margin: 0;
}
.box-area-exp {
	color: #FFF;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center;
	padding: 0 0vw;
}
.box-area-exp-in-lead {
	font-size: 3.8vw;
	line-height: 4.5vw;
	font-weight: bold;	
	margin: 0 0 3vw 0;
}
.box-area-exp-in-text{
	font-size: 2vw;
	line-height: 2vw;
}
.box-area-exp-in-button a {
	color: #FFF;
	border: 0.15vw solid #FFF;
	width: 20vw;
	padding: 0.75vw 0;
	font-size: 1vw;
	font-weight: bold;
	display: block;
	margin: 0 auto 0 auto;
	-webkit-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
}
.box-area-exp-in-button a:hover {
	background: #ffffff;
}

/* 説明エリア */
.system-section-exp {
	background: #e0ecda;
}
.system-section-exp-in {
	background: #FFF;
	width: 1140px;
	padding: 0 0 12rem 0;
}
.exp-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: justify;

	    -ms-flex-pack: justify;

	        justify-content: space-between;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.exp-box-text,.exp-box-photo {
	width: 50%;
	margin: 0;
}
.exp-box-text {
	padding: 0rem 4rem;
}
.exp-box h3 {
	font-size: 3.5rem;
	line-height: 3.5rem;
	font-weight: bold;
	border-left: 1rem solid #87c26b;
	color: #87c26b;
	padding: 1rem 0 1rem 2rem;
	margin: 0 0 2rem 0;
}
.exp-box p {
	font-size: 1.6rem;
	line-height: 3.2rem;
}

/* 最終エリア */
.last-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	margin: 10rem 0 4rem 0;
}
.last-box,.entry-box {
	padding: 0 6rem;
}
.last-box a,.entry-box a {
	width: 48%;
	color: #FFF;
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
	font-weight: bold;
	padding: 2rem 0;
}
.entry-box a {
	width: 100%;
	display: block;
}
.last-box a span.en,
.entry-box a span.en  {
	font-size: 3.5rem;
	line-height: 3.5rem;
}
.last-box a span.ja,
.entry-box a span.ja {
	font-size: 1.75rem;
	line-height: 3rem;
	display: block;
}
.color01 {
	background: #51b3ec;
}
.color02 {
	background: #f58b38;
}
.color03 {
	background: #87c26b;
}
.color04 {
	background: #EC6D51;
}
.last-box a:hover,
.entry-box a:hover {
	background: #000B00;
}

@media screen and (min-width: 721px) {
	.fadein-o,
	.fadein-o {
		opacity : 1;
		-webkit-transform : translate(0, 0px);
		-ms-transform : translate(0, 0px);
		transform : translate(0, 0px);
		-webkit-transition : all 0ms;
		-o-transition : all 0ms;
		transition : all 0ms;
	}
	.fadein-o.top {
		-webkit-transform : translate(0, 0px);
		-ms-transform : translate(0, 0px);
		transform : translate(0, 0px);
	}
}


/* タブレット対応 */
@media screen and (min-width: 721px) and (max-width: 1160px) {
	.box-area-exp-in-lead {
		font-size: 4.5vw;
		line-height: 5.5vw;
		font-weight: bold;	
		margin: 0 0 3vw 0;
	}
	.box-area-exp-in-text{
		font-size: 2.5vw;
		line-height: 2.5vw;
	}
	.system-section-exp {
		background: #FFF;
		padding: 0 0 10vw 0;
	}
	.system-section-exp-in {
		background: #FFF;
		width: 100%;
		padding: 0;
	}
	.exp-box h3 {
		font-size: 3vw;
		line-height: 3vw;
		font-weight: bold;
		border-left: 1vw solid #87c26b;
		color: #87c26b;
		padding: 1vw 0 1vw 2vw;
		margin: 0 0 2vw 0;
	}
	.exp-box p {
		font-size: 1.4vw;
		line-height: 3.2vw;
	}
	.exp-box-text {
		padding: 0rem 4vw;
	}
}

/* スマホ対応 */
@media screen and (max-width: 720px) {
    body {
        padding-top: 6rem;
    }
	.box-area {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
	}
	.box-area.color02 {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;
	}
	.box-area-photo,.box-area-exp {
		width: 100%;
	}
	.box-area-exp {
		padding: 5vw;
	}
	.box-area-exp-in-lead {
		font-size: 7vw;
		line-height: 9vw;
		font-weight: bold;
		margin: 0 0 4vw 0;
	}
	.box-area-exp-in-text {
		font-size: 4vw;
		line-height: 6vw;
	}
	.box-area-photo img {
		width: 100%;
		-o-object-fit: cover;
		   object-fit: cover;		
	}
	.box-area-photo img {
		height: 55vw;
		-o-object-position: 100% 0%;
		   object-position: 100% 0%;		
	}
	.system-section-exp {
		background: #FFF;
	}
	.system-section-exp-in {
		background: #FFF;
		width: 100%;
		padding: 2vw 6vw 15vw 6vw;
	}
	.exp-box-text,.exp-box-photo {
		width: 100%;
		padding: 0;
	}
	.exp-box {
		-ms-flex-wrap: wrap;
		    flex-wrap: wrap;
		margin: 0 0 14vw 0;
	}
	.exp-box:nth-of-type(even) {
		-webkit-box-orient: vertical;
		-webkit-box-direction: reverse;
		    -ms-flex-direction: column-reverse;
		        flex-direction: column-reverse;		
	}
	.exp-box h3 {
		font-size: 5vw;
		line-height: 7vw;
		font-weight: bold;
		border-left: 2vw solid #87c26b;
		padding: 3vw 0 3vw 4vw;
		margin: 4vw 0 4vw 0;
	}
	.last-box, .entry-box {
		padding: 0;
	}
	.exp-box p {
		font-size: 3.7vw;
		line-height: 7vw;
		margin: 0 0 4vw 0;
	}
	.last-box {
		margin: 0 0 4vw 0;
	}
	.last-box a, .entry-box a {
		width: 48%;
		padding: 4vw 0;
	}
	.entry-box a {
		width: 100%;
	}
	.last-box a span.en,
	.entry-box a span.en  {
		font-size: 5vw;
		line-height: 5vw;
	}
	.last-box a span.ja,
	.entry-box a span.ja {
		font-size: 3.5vw;
		line-height: 5vw;
		display: block;
	}
	.color01 {
		background: #51b3ec;
	}
	.color02 {
		background: #f58b38;
	}
	.color03 {
		background: #87c26b;
	}
	.color04 {
		background: #EC6D51;
	}
	.last-box a.color01:hover {
		background: #51b3ec;
	}
	.last-box a.color02:hover {
		background: #f58b38;
	}
	.last-box a.color03:hover {
		background: #87c26b;
	}
	.entry-box a.color04:hover {
		background: #EC6D51;
	}
	.last-box a.color01:active {
		background: #000B00;
	}
	.last-box a.color02:active {
		background: #000B00;
	}
	.last-box a.color03:active {
		background: #000B00;
	}
	.entry-box a.color04:active {
		background: #000B00;
	}
	.last-box a,.entry-box a {
		-webkit-transition: all 0s;
		-o-transition: all 0s;
		transition: all 0s;
	}
}