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

.content.mission {
	background-image: linear-gradient(90deg, #004831, #000E0A);
}

.wrap_top {
	width: 100%;
	margin: 0;
	padding: 0 0 20px;
	float: left;
	background-color: #FFF;
	clip-path: polygon(0 0, 100% 0, 100% 100%,0 calc(100% - 10vw));
}


.mission h2 {
	width: 98%;
	border-left: #008B5F 10px solid;
	box-sizing: border-box;
	margin: 0 0 30px;
	padding: 0 0 0 2%;
	line-height: 40px;
	float: left;
}

/* ************************************************************* */
/*          INTRO  RAYOUT
/* ************************************************************* */

.mission .intro {
	width: 100%;
	margin: 100px 0 50px;
	padding: 0 0 250px;
	float: left;
	color: #FFF;
}

.mission .intro .copy {
	width: 96%;
	margin: -50px 2% 50px;
	padding: 0;
	float: left;
	color: #FFF;
	font-family: "Shippori Mincho", serif;
	font-size: 36px;
	font-weight: 400;
	line-height: 1.7em;
	text-align: center;
	letter-spacing: 0;
}

.mission .intro .message {
	width: 90%;
	max-width: 660px;
	margin: 0 auto;
	line-height: 1.7em;
}

.mission .intro .message p {
	margin: 0 0 1em;
}



/* ************************************************************* */
/*          POINT  RAYOUT
/* ************************************************************* */

.wrap_mid_head {
	width: 100%;
	margin: 0;
	padding: 0;
	aspect-ratio: 300 / 46;
	background-image: url("../images/mission/bg_midle.svg");
	background-size: 100%;
	background-position: top;
	float: left;
}

.wrap_mid {
	width: 100%;
	margin: 0 0 -100px;
	padding: 0 0 200px;
	float: left;
	background-color: #FFF;
	/*clip-path: polygon(0 0, 100% 150px, 100% 100%,0 100%);*/
}

.mission .point {
	width: 100%;
	margin: -550px 0 0;
	padding: 0;
	float: left;
}

.mission .point h2 {
	border: none;
	margin: 30px 0;
	padding: 0;
	letter-spacing: 0;
	font-size: 21px;
}

.mission .point table {
	width: 100%;
	margin: 50px 0;
	padding: 0;
	background-color: #F9F9F9;
}

.mission .point td {
	padding: 20px;
}

.mission .point td:nth-of-type(1) {
	width: 72px;
	vertical-align: top;
	text-align: center;
	padding: 20px 0;
	letter-spacing: 5px;
}

.mission .point td:nth-of-type(1) p {
	writing-mode: vertical-rl;
    display: inline-block;
}

.mission .point td:nth-of-type(1) p .line {
	writing-mode: horizontal-tb;
	line-height: 10px;
	letter-spacing: 0;
}

.mission .point td:nth-of-type(1) span {
	width: 72px;
	writing-mode: horizontal-tb;
	letter-spacing: 0;
	font-family: "Barlow Condensed", sans-serif;
}

.mission .point td:nth-of-type(2) {
	vertical-align: top;
}

.mission .point td:nth-of-type(3) {
	width: 360px;
}

.mission .point td:nth-of-type(3) img {
	width: 100%;
}

.foot_block {
	width: 100%;
	aspect-ratio: 300 / 65;
	margin: -245px 0 0;
	padding: 0;
	float: left;
	background-image: url("../images/common/foot_bg.svg");
	background-position: bottom;
	background-repeat: no-repeat;
	background-size: 200%;
}

/* ************************************************************************************
          Responsive Layout Whideth 1300px
*************************************************************************************** */
@media only screen and (max-width: 1300px) {

.mission .intro .copy {	font-size: 3vw; }
.wrap_mid {	margin: 0 0 -100px;padding: 0 0 150px; }
.foot_block { margin: -200px 0 0; }

}

/* ************************************************************************************
          Responsive Layout Whideth 1100px
*************************************************************************************** */
@media only screen and (max-width: 1000px) {

.wrap_top { padding: 0 0 100px; }
.wrap_mid {	margin: 0 0 -200px;padding: 0 0 150px; }
.mission .point { margin: -400px 0 0; }
.foot_block { margin: -150px 0 0; }

}

/* ************************************************************************************
          Responsive Layout Whideth 980px
*************************************************************************************** */
@media only screen and (max-width: 980px) {

.mission .intro .copy { margin: 0 0 50px; }
.mission .intro { padding: 0 0 150px; }

.mission .point td { padding: 10px; }
.mission .point td:nth-of-type(1) { width: 20px;}
.mission .point td:nth-of-type(2) { width: 60%;padding-left: 0; }
.mission .point td:nth-of-type(3) { width: auto; }
.mission .point td:nth-of-type(2) h2 { margin: 0 0 1em; }

}

/* ************************************************************************************
          Responsive Layout Whideth 880px
*************************************************************************************** */
@media only screen and (max-width: 880px) {

.wrap_top { padding: 0 0 50px; }
.mission .intro { padding: 0 0 250px; }

}

/* ************************************************************************************
          Responsive Layout Whideth 680px
*************************************************************************************** */
@media only screen and (max-width: 680px) {

.mission .point td { float: left; }
.mission .point td:nth-of-type(1) { width: 90%;padding: 20px 5% 0; }
.mission .point td:nth-of-type(2),
.mission .point td:nth-of-type(3) { width: 90%;padding: 0 5% 20px; }
.mission .point td:nth-of-type(1) p { writing-mode: horizontal-tb; }
.mission .point td:nth-of-type(3) { text-align: center; }
.mission .point td:nth-of-type(3) img { max-width:  300px;margin: 0 auto; }

.foot_block { margin: -120px 0 0; }

}

/* ************************************************************************************
          Responsive Layout Whideth 580px
*************************************************************************************** */
@media only screen and (max-width: 580px) {

.mission .intro .copy {	font-size: 20px;text-align: justify; }
.mission .intro .copy br {	display: none; }
.mission .intro .message { text-align: justify; }

.foot_block { margin: -100px 0 0; }

}

/* ************************************************************************************
          Responsive Layout Whideth 480px
*************************************************************************************** */
@media only screen and (max-width: 480px) {

.content.mission {	background-position: center top 300px;background-size: 280%; }
.wrap_mid {	margin: 0 0 -200px;padding: 0 0 100px; }
.foot_block { margin: -70px 0 0; }

}