@charset "utf-8";

.planWrap01 { display:flex; flex-flow:column nowrap; justify-content:flex-start; align-items:stretch; }
.planWrap01 .itemWrap { display:flex; flex-flow:row wrap; justify-content:flex-start; align-items:stretch; }

.planWrap01 .itemWrap .tit { flex:0 0 361px; display:flex; justify-content:flex-start; align-items:center; margin-right:30px; }
.planWrap01 .itemWrap .tit > span { display:block; width:100%; padding:19px 20px; color:#fff; font-weight:600; font-size:16px; text-align:center; background:url("/sites/style_guide/images/plan/plan_img_01.png") no-repeat center center; background-size:contain; }
.planWrap01 .itemWrap .cont { flex-basis:auto; flex-grow:1; display:flex; flex-flow:row wrap; justify-content:center; align-items:center; }

.planWrap01 .itemWrap.missionWrap .cont > span { display:block; width:100%; border:2px solid #009c88; text-align:center; color:#009c88; font-weight:600; border-radius:60px; padding:44px 20px; font-size:20px; }

.planWrap01 .itemWrap.visionWrap { margin-top:50px; }
.planWrap01 .itemWrap.visionWrap .cont > div { background-color:#ecf2f2; width:100%; text-align:center; padding:23px 20px; }
.planWrap01 .itemWrap.visionWrap .cont > div > span { display:block; font-weight:600; }
.planWrap01 .itemWrap.visionWrap .cont > div > span:nth-child(2) { margin-top:5px; }
.planWrap01 .itemWrap.visionWrap .cont > div > span > strong { font-size:28px; font-weight:600; font-style:italic; font-family:'Noto-Bold'; padding-bottom:10px; }

.planWrap01 .itemWrap.eduWrap { margin-top:90px; }
.planWrap01 .itemWrap.eduWrap .cont > .boxWrap { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; width:100%; }
.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap { flex: 0 0 32%; position:relative; }
.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 2%; }
.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap > div:nth-child(1) { border:2px solid #009c88; border-radius:60px; text-align:center; font-size:16px; font-weight:600; padding:14px 10px; width:70%; background-color:#fff; position:absolute; top:0; left:50%; transform:translate(-50%, -70%); z-index:1; }
.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap > div:nth-child(2) { background-color:#ecf2f2; font-size:16px; font-weight:600; text-align:center; padding:42px 10px; position:relative; }

.planWrap01 .itemWrap.powerWrap { margin-top:20px; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; width:100%; position:relative; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap { flex: 0 0 32%; padding:0 20px; position:relative; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 2%; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap { display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div { position:relative; border-radius:10px; display:flex; justify-content:center; align-items:center; min-height:108px; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div > span { color:#fff; font-weight:bold; font-size:16px; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div > span > i { display:block; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div3 > .txtWrap > div { flex: 0 0 31.33333%}
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div3 > .txtWrap > div:nth-child(2) { margin:0 3%; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 > .txtWrap > div { flex: 0 0 22.75%}
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 > .txtWrap > div:nth-child(n+2) { margin-left:3%; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div:nth-child(odd) { background-color:#009c88; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div:nth-child(even) { background-color:#566595; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .line { border:2px solid #009c88; border-bottom:0; height:20px; width:100%; margin:0 auto; width:80%; }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div3 > .txtWrap > div:nth-child(2)::before { content:""; position:absolute; width:2px; height:40px; background-color:#009c88; top:-20px; left:50%; transform:translate(-50%, -50%); }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 > .txtWrap > div:nth-child(2)::before,
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 > .txtWrap > div:nth-child(3)::before { content:""; position:absolute; width:2px; height:20px; background-color:#009c88; top:-10px; left:50%; transform:translate(-50%, -50%); }
.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 > .line::before { content:""; position:absolute; width:2px; height:20px; background-color:#009c88; top:-10px; left:50%; transform:translate(-50%, -50%); }

.planWrap01 .itemWrap.resultWrap { margin-top:90px; }
.planWrap01 .itemWrap.resultWrap .cont > .boxWrap { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; width:100%; position:relative; }
.planWrap01 .itemWrap.resultWrap .cont > .boxWrap > .contWrap { flex: 0 0 32%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:stretch; padding:37px 10px; position:relative; background-color:#ecf2f2; }
.planWrap01 .itemWrap.resultWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 2%; }
.planWrap01 .itemWrap.resultWrap .cont > .boxWrap > .contWrap > span { flex:0 0 100%; text-align:center; font-size:16px; font-weight:600; margin-bottom:5px; }

.planWrap01 .itemWrap.noneWrap { margin-top:90px; }
.planWrap01 .itemWrap.noneWrap .cont > div > span { display:block; font-weight:600; }
.planWrap01 .itemWrap.noneWrap .cont > div > span > strong { font-size:28px; font-weight:600; font-style:italic; font-family:'Noto-Bold'; padding-bottom:10px; }

.planWrap01 .itemWrap.humanWrap { margin-top:90px; }
.planWrap01 .itemWrap.humanWrap .cont > .boxWrap { display:flex; flex-flow:row nowrap; justify-content:space-between; align-items:stretch; width:100%; }
.planWrap01 .itemWrap.humanWrap .cont > .boxWrap > .contWrap { flex: 0 0 32%; position:relative; }
.planWrap01 .itemWrap.humanWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 2%; }
.planWrap01 .itemWrap.humanWrap .cont > .boxWrap > .contWrap > div:nth-child(1) { border:2px solid #009c88; border-radius:60px; text-align:center; font-size:16px; font-weight:600; padding:14px 10px; width:100%; background-color:#fff; }

.planWrap01 .itemWrap.rocketWrap { margin-top:90px; }
.planWrap01 .itemWrap.rocketWrap .tit { align-items:flex-start; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap { width:100%; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap { margin-bottom:1%; display:flex; flex-flow:row wrap; justify-content:space-between; align-items:staretch; background-color:#ecf2f2; padding:20px; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap > div { border:3px solid #009c88; background-color:#fff; text-align:center; padding:16px 10px; font-size:16px; font-weight:600; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap > div:nth-child(1) { flex:0 0 15%; text-align:left; font-size:20px; border:0; background:none; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap.div4 > div:nth-child(n+2) { flex:0 1 27%; margin:0 0.5%; }
.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap.div3 > div:nth-child(n+2) { flex:1 0 41%; margin:0 0.5%; }

@media only screen and (max-width:1200px) {
	.planWrap01 .itemWrap .tit { margin-right:0; margin-bottom:15px; }
	.planWrap01 .itemWrap .cont { flex-basis:100%; }
	
	.planWrap01 .itemWrap.missionWrap .cont > span { padding:20px 20px; }

	.planWrap01 .itemWrap.eduWrap  { margin-top:50px; }
	.planWrap01 .itemWrap.eduWrap .tit { margin-bottom:70px; }

	.planWrap01 .itemWrap.powerWrap { margin-top:50px; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div3 .txtWrap > div:nth-child(2)::before { height:20px; top:-10px; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap.div4 .line::before { display:none; }
} 
@media only screen and (max-width:850px) {
	.planWrap01 .itemWrap.eduWrap .tit { margin-bottom:15px; }
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap > div:nth-child(1) { border-radius:10px; position:relative; width:100%; top:unset; left:unset; transform:unset; z-index:0; margin-bottom:10px; }

	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap { padding:0 0; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .line { display:none; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div::before { display:none; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div { flex: 0 0 100% !important; min-height:unset; padding:15px 10px; margin:0 0 10px 0 !important; }
	.planWrap01 .itemWrap.powerWrap .cont > .boxWrap > .contWrap > .txtWrap > div > span > i { display:inline-block; padding-left:5px; }

	.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap > div:nth-child(1) { flex-basis:100%; }
	.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap.div4 > div:nth-child(n+2) { flex-basis:32%; }
	.planWrap01 .itemWrap.rocketWrap .cont .boxWrap .contWrap.div3 > div:nth-child(n+2) { flex-basis:46%; }
}
@media only screen and (max-width:500px) {
	.planWrap01 .itemWrap.visionWrap .cont > div > span > strong { font-size:20px; }
	
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap { flex-wrap:wrap; }
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap { flex-basis:100%; margin-bottom:20px; }
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 0 20px 0; }
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap > div:nth-child(2) { padding:20px 10px; }
	.planWrap01 .itemWrap.eduWrap .cont > .boxWrap > .contWrap > div br { display:none; }


	.planWrap01 .itemWrap.resultWrap .cont > .boxWrap > .contWrap:nth-child(2) { margin:0 0 20px 0; }
	.planWrap01 .itemWrap.resultWrap .cont > .boxWrap { flex-wrap:wrap; }
	.planWrap01 .itemWrap.resultWrap .cont > .boxWrap > .contWrap { flex-basis:100%; padding:10px 10px; margin-bottom:20px;  }
}
@media only screen and (max-width:361px) {
	.planWrap01 .itemWrap .tit { flex-basis:100%; }
	.planWrap01 .itemWrap .tit > span { background-size:contain; }
}