/* 
Theme Name: coco-space
Theme URI: https://coco-syuroushien.com/
Author: MESA
Author URI: https://one1-net.com/
Version: 1.0.0 */


html{
	font-size:62.5%;
	font-family:'fot-tsukuardgothic-std',"ヒラギノ角ゴ ProN W4","Hiragino Kaku Gothic ProN","游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	font-weight: 700;
	font-style: normal;
	/* line-height:1.8; */
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body{
	position:relative;
	overflow-x: hidden;
	line-height: 1.8;
}

:root{
	--main-text-color:#1a1a1a;
	--button-text-color:#fff;
	--light-pink:#F7EDE9;
	--light-pink2:#FFF9F6;
	--main-pink:#F29779;
	--dark-pink:#C26B29;
	--point-yellow:#F5A42B;
	--point-yellow2:#FCC52C;
}
p,a,li,td,th,div,figure,figcaption{
	font-size:1.6rem;
	/* font-weight:700; */
	color:var(--main-text-color);
}

p a{
	color:var(--main-pink);
}

img{
	max-width:100%;
	vertical-align: bottom;
}

h2.commonH2{
	color:var(--main-text-color);
	font-size:2.8rem;
	margin-bottom:2.4rem;
	text-align: center;
}

h2.commonH2 span{
	color:var(--main-pink);
	font-size:2.8rem;
}

h3.commonH3{
	font-size:2.2rem;
	padding:1.6rem 0 .75rem;
	position:relative;
}

h3.commonH3:after{
	position:absolute;
	content:"";
	width:100%;
	height:3px;
	background:left / 6px repeat url(./img/line_repeat.svg);
	margin:0 auto;
	bottom:.5rem;
	left:0;
	right:0;
}

h2.commonH2.alignLeft{
	text-align:left;
}

a.commonButton{
	line-height:1.6;
	display:inline-block;
	padding:1.2rem 3.2rem;
	text-align: center;
	text-decoration:none;
	background:var(--main-pink);
	color: var(--button-text-color);
	border-radius:100px;
	box-shadow:0 6px 10px rgba(0,0,0,.16);
	margin-top:1.6rem;
}


/* ヘッダー */
header#spHeader01{
	display:none;
}

header#spHeader02{
	display:none;
}

header#pcHeader{
	width:100%;
	background:#fff;
	position:fixed;
	box-shadow: 0 3px 10px rgba(0,0,0,.16);
	z-index:9999;
	top:0;
	/* top:30px; */
	left:0;
}

header#pcHeader > .inner{
	width:95.31%;
	max-width:130.2rem;
	margin:0 auto;
	height:10rem;
	position:relative;
	display:flex;
	justify-content: flex-end;
	align-items: center;
}

header#pcHeader > .inner > .headerLogo{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	margin:auto;
	height:4.76rem;
	width:auto;
}

header#pcHeader > .inner > .headerLogo > a{
	display:block;
}

nav#mainNav{
	width:100%;
	display:flex;
	justify-content: flex-end;
	align-items: center;
}

nav#mainNav > .navList{
	display:flex;
	justify-content: flex-end;
	align-items: center;
}

nav#mainNav > .navList > li{
	list-style: none;
}

nav#mainNav > .navList > li > a{
	display:block;
	font-size:1.6rem;
	padding:1.2rem 1.6rem;
	text-decoration:none;
}

nav#mainNav > .navList > li > a.headerButton{
	font-size:1.8rem;
	color:var(--button-text-color);
	/* background:var(--main-pink); */
	border-radius:10rem;
	padding:.9rem 2.2rem;
	margin-left:1.6rem;
}

@media(max-width:800px){
	header#pcHeader{
		display:none;
	}
	header#spHeader01{
		display:block;
		/* position:relative; */
		padding:2rem 2vw;
		background:#fff;
		position:fixed;
		top:0;
		/* top:30px; */
		left:0;
		width:100%;
		z-index:9999;
		box-shadow: 0 3px 10px rgba(0,0,0,.16);
	}

	.headerLogo{
		position:absolute;
		left:3vw;
		top:0;
		bottom:0;
		margin:auto;
		height:4.6rem;
	}

	.headerLogo > a{
		display: block;
	}
	
	header#spHeader02{
		display:block;
		
	}

	header#spHeader02{
		position:relative;
		padding:2rem 2vw;
		background:#fff;
		z-index:999;
		position:fixed;
		top:0;
		/* top:30px; */
		left:0;
		width:100%;
		z-index:9999;
		box-shadow: 0 3px 10px rgba(0,0,0,.16);
	}
	#hiddenNav{
		position:absolute;
		right:-100%;
		top:8.5rem;
		transition:all .3s ease;
		background:var(--light-pink);
		padding:1.6rem 2.6rem 10rem;
		width:100%;
		height:calc(100vh - 7.6rem);
		z-index:998;
	}
	#hiddenNav.active{
		right:0
	}
	#hiddenNav > .navList > li{
		list-style: none;
	}
	#hiddenNav > .navList > li > a{
		display:block;
		padding:1.6rem .8rem 1.6rem 3.2rem;
		border-bottom:.2rem dotted var(--main-pink);
		text-decoration:none;
		font-size:1.8rem;
		position:relative;
	}

	#hiddenNav > .navList > li > a:before{
		content:"・";
		position:absolute;
		font-size:2rem;
		width:2rem;
		height:2rem;
		top:0;
		bottom:0;
		left:.8rem;
		color:var(--point-yellow2);
		margin:auto;
		line-height:1;
	}

	#hiddenNav > .navList > li > a.headerButton{
		font-size:2rem;
		text-align: center;
		color:var(--button-text-color);
		background:var(--main-pink);
		border-radius:10rem;
		padding:.9rem 0;
		margin-top:3.2rem;
	}
	#hiddenNav > .navList > li > a.headerButton:before{
		display:none;
	}
	#hiddenNav{
		/* height:800px; */
		overflow-y: scroll;
	}


	.hmbBar{
		width:2.8rem;
		height:2rem;
		position:absolute;
		left:2vw;
		top:0;
		bottom:0;
		margin:auto;
	}

	.hmbBar > span{
		display:block;
		width:100%;
		height:.2rem;
		background:var(--main-text-color);
		position:absolute;
	}
	.hmbBar > span:nth-of-type(1){
		top:0;
		left:0;
		right:0;
		margin:auto;
		transition:all .3s ease;
	}

	.hmbBar > span:nth-of-type(2){
		top:0;
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		opacity:1;
		transition:all .3s ease;
	}

	.hmbBar > span:nth-of-type(3){
		bottom:0;
		left:0;
		right:0;
		margin:auto;
		transition:all .3s ease;
	}

	.hmbBar.active > span:nth-of-type(1){
		transform: rotate(45deg);
		top:.9rem;
	}

	.hmbBar.active > span:nth-of-type(2){
		opacity:0;
	}

	.hmbBar.active > span:nth-of-type(3){
		transform: rotate(-45deg);
		bottom:.9rem;
	}
	#spHeader02 .headerLogo{
		left:8vw;
	}
	
}

@media(max-width:480px){
	header#spHeader01{
		padding:1.55rem 3.59%;
	}
	.headerLogo{
		height:3.2rem;
	}
	.headerLogo > a > img{
		height:3.2rem;
	}
	nav#mainNav > .navList > li > a.headerButton{
		font-size:1.2rem;
		padding:.9rem 1.4rem;
	}
	#spHeader02 .headerLogo{
		left:12.31vw;
	}
	#hiddenNav{
		top:7.6rem;
	}
}


/* コンテンツ */
main#main{
	margin-top:10rem;
	/* margin-top:13rem; */
}

#firstView{
	display:flex;
	justify-content: center;
	/* align-items: center; */
	/* flex-wrap: wrap; */
	width:100%;
}
#firstView .firstViewLeft{
	width:34.77vw;
	position:relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

#mvIllustTop{
	position:absolute;
	top:1.76vw;
	left:3vw;
	width:7.03vw;
}

#mvIllustBottom{
	position:absolute;
	bottom:0;
	right:0;
	width:13.04vw;
}

#catchcopyVertical{
	width:11.05vw;
	position:relative;
	top:-2vw;
	bottom:0;
	left:1vw;
	right:0;
	margin:auto;
}

#firstView .firstViewRight{
	width:65.23vw;
	height:auto;
}

#mainVisualImg{
	width:100%;
	height:100%;
	object-fit: cover;
}

#mainVisualImg{
	border-top-left-radius: 3.2rem;
	border-bottom-left-radius: 3.2rem;
}

section.common{
	width:100%;
}

.backPink{
	background: var(--light-pink2);
}

section.common .inner{
	padding:4.8rem 1.4rem;
	max-width:120rem;
	margin:0 auto;
}

section.col2 .inner{
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

section.col2 .inner .col2{
	width:48%;
}

section.col3 .inner{
	display:flex;
	justify-content: space-between;
	/* align-items: center; */
	flex-wrap: wrap;
}

section.col3 .inner .col3{
	width:31.5%;
	position:relative;
}

section.col3 .inner .col3:nth-of-type(2){
	transform:translateY(2rem);
}

img.col3Num{
	position:absolute;
	top:-2.4rem;
	left:0;
	right:0;
	margin:0 auto;
	width:5.023rem;
	height:4.636rem;
}

section.col3 .inner .col3 span{
	padding:3.2rem;
	border-radius: 1.2rem;
	display: block;
	width:100%;
	background:var(--button-text-color);
}

section.col3 .inner .col3 img:not([class]){
	display: block;
	width:100%;
	border-radius: 1.2rem;
}

section.col3 .inner .col3 h3.commonH3{
	text-align: center;
}

#recruitments{
	margin-top:8rem;
	/* margin-bottom:7.89rem; */
	position:relative;
}

#recruitments:before{
	position:absolute;
	content:"";
	width:100%;
	height:8rem;
	background:center / cover no-repeat url(./img/wave01.svg);
	top:-8rem;
	left:0;
	right:0;
	margin:0 auto;
}

#recruitments:after{
	position:absolute;
	content:"";
	width:100%;
	height:7.89rem;
	background:center / cover no-repeat url(./img/wave02.svg);
	bottom:-7.89rem;
	left:0;
	right:0;
	margin:0 auto;
}

#alliance{
	text-align: center;
}
#alliance .inner{
	position:relative;
}
#alliance .inner:before{
	position:absolute;
	content:"";
	width:17.97vw;
	height:6.11vw;
	background:center / contain no-repeat url(./img/nikukyu.svg);
	bottom:0;
	left:0;
}

#alliance .inner:after{
	position:absolute;
	content:"";
	width:17.97vw;
	height:6.11vw;
	background:center / contain no-repeat url(./img/nikukyu.svg);
	top:0;
	right:0;
}

#work{
	margin-top:7.89rem;
	margin-bottom:7.9rem;
	position:relative;
}

#work:before{
	position:absolute;
	content:"";
	width:100%;
	height:7.89rem;
	background:center / cover no-repeat url(./img/wave01.svg);
	top:-7.89rem;
	left:0;
	right:0;
	margin:0 auto;
}

#work:after{
	position:absolute;
	content:"";
	width:100%;
	height:7.9rem;
	background:center / cover no-repeat url(./img/wave03.svg);
	bottom:-7.9rem;
	left:0;
	right:0;
	margin:0 auto;
}

section#work.col3 .inner{
	padding-bottom:0rem;
}

/* #features{
	padding-top:5.9rem;
} */
#features .inner.feature{
	max-width:94.4rem;
	display: flex;
	justify-content: space-between;
	/* align-items: center; */
	flex-wrap: wrap;
	padding:0 1.4rem 4.8rem;
}

#features .inner.feature:nth-of-type(1){
	padding-top:1.6rem;
}

#features .inner.feature:nth-child(odd){
	transform: translateX(4.2rem);
}

#features .inner.feature:nth-child(even){
	transform: translateX(-4.2rem);
}

.if1{
	width:33%;
	background:var(--button-text-color);
	border:2px solid var(--main-pink);
	border-radius:1.2rem;
	display:flex;
	align-items: center;
	justify-content: center;
	min-height:20.8rem;
}
.if2{
	width:63%;
}

.if2 h3.commonH3{
	padding:1.6rem 1.6rem 1.65rem 0rem;
	/* color:var(--main-pink); */
}

.if2 h3.commonH3 img{
	margin-right:1.3rem;
}

#staff{
	margin-top:4.3rem;
	padding-bottom:5.25rem;
	position:relative;
}

#staff:before{
	position:absolute;
	content:"";
	width:100%;
	height:4.3rem;
	background:center / cover no-repeat url(./img/wave04.svg);
	top:-4.3rem;
	left:0;
	right:0;
	margin:0 auto;
}

#staff:after{
	position:absolute;
	content:"";
	width:100%;
	height:5.25rem;
	background:center / cover no-repeat url(./img/wave05.svg);
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;
}

.cta{
	width:100%;
	padding:8.6rem 0;
}

.ctaInner{
	padding:5.8rem 1.4rem 9.8rem;
	width:96%;
	max-width:99rem;
	margin:0 auto;
	background:center / contain no-repeat url(./img/cta_bg.svg);
}

.ctaInner h2.commonH2{
	margin-bottom:1.6rem;
}

.ctaMessage{
	display:block;
	margin:0 auto;
	width:70%;
	max-width:53rem;
}

.ctaLine{
	display:block;
	margin:2.4rem auto;
}

.ctaFlex{
	width:100%;
	max-width:72.4rem;
	margin:0 auto;
	display:flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap:wrap;
	position:relative;
	z-index:1;
}

.ctabutton{
	width:49%;
	display:block;
	box-shadow:0 3px 10px rgba(0,0,0,.16);
	border-radius:100px;
	position:relative;
	z-index:1;
}


.ctaFlex:before{
	content:"";
	position:absolute;
	background:center / contain no-repeat url(./img/cta_img1.svg);
	width:20.63vw;
	height:25.58vw;
	right: 100%;
    bottom: -180%;
	z-index:-1;
}

.ctaFlex:after{
	content:"";
	position:absolute;
	background:center / contain no-repeat url(./img/cta_img2.svg);
	width:25.18vw;
	height:27.01vw;
	left: 90%;
    bottom: -220%;
	z-index:-1;
}

#accesses .col2{
	border-radius:1.6rem;
}

#accesses .col2:nth-of-type(1){
	border:2px solid var(--main-pink);
}
#accesses h2.commonH2{
	margin-bottom:0;
}

.col2 table{
	width:94%;
	border-collapse: collapse;
	margin:0 auto;
}

.col2 table tr{
	width:100%;
	padding:0 1.6rem;
}

.col2 table tr th{
	width:24%;
	padding:1.6rem 0;
	border-bottom:2px dotted var(--light-pink);
	color:var(--main-pink);
}

.col2 table tr td{
	width:76%;
	padding:1.6rem;
	border-bottom:2px dotted var(--light-pink);
}

.col2 table tr td a{
	color:var(--main-pink);
}

.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 31%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}

#costs{
	padding:6.6rem 0 1.7rem;
	margin-bottom:3.6rem;
	position:relative;
}

#costs:after{
	position:absolute;
	content:"";
	width:100%;
	height:3.6rem;
	background:center / cover no-repeat url(./img/wave06.svg);
	bottom:-6.8rem;
	left:0;
	right:0;
	margin:0 auto;
	z-index:1;
}

#costs .inner{
	width:90%;
	max-width:95rem;
	margin:0 auto;
	text-align: center;
}

.costIllust{
	max-width:66.4rem;
	margin:0 auto 2rem;
	border:2px solid var(--main-pink);
	border-radius:1.6rem;
	padding:1.6rem 1.6rem 4rem;
}
.costIllust > p{
	font-size:2.2rem;
}
.costIllust > p > span{
	color:var(--point-yellow);
}

#flows{
	padding:6.42rem 1.4rem 4rem;
	margin-bottom:3.4rem;
	position:relative;
}

#flows:after{
	position:absolute;
	content:"";
	width:100%;
	height:3.4rem;
	background:center / cover no-repeat url(./img/wave07.svg);
	bottom:-3.4rem;
	left:0;
	right:0;
	margin:0 auto;
}

.innerFlow{
	width:100%;
	max-width:120rem;
	margin:0 auto;
	padding:3.2rem;
	background:var(--button-text-color);
	border-radius:1.6rem;
}

.innerFlow > h3{
	font-size:2.2rem;
	text-align:center;
	width:100%;
}

.innerFlow > h3 > span:nth-of-type(1){
	color:var(--main-pink);
}

.innerFlow > h3 > span:nth-of-type(2){
	color:var(--point-yellow);
}

.innerFlow > p{
	text-align:center;
	width:100%;
	margin-bottom:4.25rem;
}

.innerFlow{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.flowBox{
	width:23%;
	text-align:center;
	padding:2.5rem 2.5rem 4rem;
	border:2px solid var(--main-pink);
	border-radius:1.6rem;
	position:relative;
}

.flowBox:after{
	content:"";
	position:absolute;
	width:2rem;
	height:2.3rem;
	top:0;
	bottom:0;
	right:-2.6rem;
	margin:auto;
	background:center / contain no-repeat url(./img/arrow.svg);
}

.flowBox:last-child:after{
	display:none;
}

.flowBox > img:nth-of-type(1){
	position:absolute;
	top:-2rem;
	left:0;
	right:0;
	margin:0 auto;
}

.flowBox ul{
	margin:0;
	padding-left:2.4rem;
	text-align: left;
}

.flowBox ul li{
	position:relative;
	list-style: none;
}

.flowBox ul li:before{
	content:"・";
	position:absolute;
	font-size:2rem;
	width:2rem;
	height:2rem;
	top:0;
	bottom:0;
	left:-2.2rem;
	color:var(--point-yellow2);
	margin:auto;
	line-height:1;
}

#qa {
    padding: 4.8rem 1.4rem;
    max-width: 105rem;
    margin: 0 auto;
}

.question{
	padding:1.6rem 1.6rem 1.6rem 9.3rem;
	background:var(--main-pink);
	color:var(--button-text-color);
	border-top-left-radius: 1.6rem;
	border-top-right-radius: 1.6rem;
}

.question h3{
	font-size:2.2rem;
	position:relative;
}

.question h3:before{
	position:absolute;
	content:"";
	background:center / contain no-repeat url(./img/q.svg);
	width:5.02rem;
	height:4.63rem;
	left:-6.8rem;
	top:0;
	margin:0;
}

.answer{
	background:var(--light-pink);
	border-bottom-left-radius: 1.6rem;
	border-bottom-right-radius: 1.6rem;
	position:relative;
	padding:1.6rem 1.6rem 1.6rem 9.3rem;
	margin-bottom:2.2rem;
}

.answer *{
	position:relative;
	
}

.answer *:before{
	position:absolute;
	content:"";
	background:center / contain no-repeat url(./img/a.svg);
	width:5.02rem;
	height:4.63rem;
	left:-6.8rem;
	top:0;
	margin:0;
}

.cta.topBeforeFooter{
	padding-top:1.6rem;
}

.firstViewSp{
	display:none;
}

#spNavButtons{
	display:none;
}

.spMessage{
	display:none;
}

@media(min-width:1400px){
	#firstView .firstViewRight{
		height:calc(100vh - 10rem);
	}
	#catchcopyVertical{
		width:9vw;
	}
}

@media(max-width:1024px){
	#features .inner.feature{
		padding:1.6rem 1.4rem;
	}
	#features .inner.feature:nth-child(odd){
		transform: translateX(0);
	}
	#features .inner.feature:nth-child(even){
		transform: translateX(0);
	}
	section.common .inner{
		width:96vw;
		max-width:98rem;
	}
}

@media(max-width:800px){
	main#main{
		margin-top:9.4rem;
		/* margin-top:15.4rem; */
	}
	p,a,li,td,th,div,figure,figcaption{
		font-size:1.5rem;
	}
	
	h2.commonH2{
		color:var(--main-text-color);
		font-size:2.2rem;
		margin-bottom:1.6rem;
		text-align: center;
	}
	
	h2.commonH2 span{
		font-size:2.2rem;
	}
	
	h3.commonH3{
		font-size:1.8rem;
	}
	section.col2 .inner{
		flex-direction: column;
	}
	section.col2 .inner .col2{
		width:100%;
	}
	section#recruitments.col2 .inner .col2 img{
		display:block;
		margin:0 auto 1.6rem;
	}
	h2.commonH2.alignLeft{
		text-align: center;
	}
	section.col3 .inner .col3 span{
		padding:1.6rem;
	}
	.if1{
		padding:1.6rem;
	}
	section#staff.col2 .inner .col2 img{
		display:block;
		margin:0 auto 1.6rem;
	}
	.ctaFlex:before{
		width: 15vw;
    	height: 18vw;
		right:unset;
		left:0;
		bottom:unset;
		top:-180%;
	}
	.ctaFlex:after{
		width: 17vw;
    	height: 20vw;
		right:0;
		left:unset;
		bottom:unset;
		top:-180%;
	}
	.cta{
		padding:0;
	}
	#accesses .col2:nth-of-type(1){
		margin-bottom:1.6rem;
	}
	.gmap{
		height:42rem;
	}
	.flowBox{
		width:48%;
		margin-bottom:3.2rem;
		padding:2.5rem 1.6rem 1.6rem;
	}
	#qa{
		padding-bottom:0;
	}
}

@media(max-width:480px){
	#firstView .firstViewLeft,#firstView .firstViewRight{
		display:none;
	}
	.firstViewSp{
		display:block;
		width:100%;
		text-align: right;
	}

	.firstViewSp img{
		width:98%;
	}
	#spNavButtons{
		display:block;
		width:calc(100% - 2.8rem);
		margin:0 auto;
	}
	#spNavButtonCont{
		position:relative;
		padding:1.6rem 0;
		margin:3rem auto;
	}
	#spNavButtonCont:before{
		position:absolute;
		content:"";
		background:center / contain no-repeat url(./img/dot_line.svg);
		width:100%;
		height:3px;
		top:0;
		left:0;
		right:0;
		margin:0 auto;
	}
	#spNavButtonCont:after{
		position:absolute;
		content:"";
		background:center / contain no-repeat url(./img/dot_line.svg);
		width:100%;
		height:3px;
		bottom:0;
		left:0;
		right:0;
		margin:0 auto;
	}
	.spNavBox{
		display:flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.spNavBox li{
		list-style: none;
		width:32%;
	}

	.spNavBox li a{
		display:block;
		background:var(--light-pink2);
		border:2px solid var(--light-pink);
		border-radius:8px;
		margin:.4rem 0;
	}
	section.common .inner{
		width:100%;
		max-width:none;
		padding:1.4rem;
	}
	#alliance .inner:after{
		display: none;
	}
	#alliance .inner:before{
		display: none;
	}
	section.col3 .inner .col3{
		width:100%;
		margin:.8rem auto 3.2rem;
	}
	img.col3Num{
		width:3.46rem;
		height:3.2rem;
	}
	section.col3 .inner .col3:nth-of-type(2){
		transform: translateY(0rem);
	}
	#features .inner.feature{
		flex-direction:column;
	}
	.if1{
		width:100%;
	}
	.if2{
		width:100%;
	}
	.if2 h3.commonH3 img{
		width:4.24rem;
		height:3.9rem;
	}
	a.commonButton{
		display:block;
		margin:1.6rem auto 0;
		width:60%;
		max-width:17rem;
	}
	.spMessage{
		display:block;
	}
	.ctaInner h2.commonH2{
		display:none;
	}
	.ctaMessage{
		display:none;
	}
	.ctaFlex:after{
		display:none;
	}
	.ctaFlex:before{
		display:none;
	}
	.ctaInner{
		background:center / contain no-repeat url(./img/cta_bg_sp.svg);
		padding:1.6rem .6rem 3.2rem;
	}
	.ctaLine{
		width:70%;

	}
	.ctaFlex{
		flex-direction: column;
	}
	.ctabutton{
		width:86%;
		margin-bottom:1.2rem;
	}
	.ctabutton img{
		width:100%;
	}
	.col2 table tr{
		display:block;
	}
	.col2 table tr th{
		width:100%;
		display:block;
		font-size:1.5rem;
	}
	.col2 table tr td{
		width:100%;
		display:block;
		font-size:1.5rem;
		padding:1.6rem 0;
	}
	.col2 table tr:nth-of-type(3) td{
		text-align: center;
	}
	.col2 table tr:nth-of-type(4) td{
		text-align: center;
	}
	.col2 table tr:nth-of-type(5) td{
		text-align: center;
	}
	.costIllust > p{
		text-align: left;
		font-size:1.8rem;
		line-height: 1.8;
	}
	.costIllust > img{
		width:90%;
		max-width:29.4rem;
		display:block;
		margin:1.8rem auto 0;
	}
	#costs .inner > p{
		text-align:left;
	}
	.innerFlow{
		background:none;
		padding:0;
	}
	.innerFlow > h3{
		font-size:1.8rem;
		margin-bottom:1.6rem;
	}
	.innerFlow > p{
		text-align: left;
	}
	.flowBox{
		background:#fff;
		width:100%;
		padding: 2.5rem 5.5rem 1.6rem;
	}
	.flowBox:after{
		display:none;
	}
	.flowBox h3.commonH3{
		margin-bottom:1.6rem;
	}
	.question h3:before{
		width:3.76rem;
		height:3.47rem;
		left:-5rem;
	}
	.question {
		padding: 1.6rem 1.6rem 1.6rem 6.8rem;
	}
	.question h3{
		line-height:1.8;
	}
	.answer *:before{
		display:none;
	}
	.answer{
		padding:1.6rem;
	}
	#recruitments:before{
		background: center / cover no-repeat url(./img/spwave1.svg);
		height:4rem;
		top:-4rem;
	}
	#recruitments:after{
		background: center / cover no-repeat url(./img/spwave2.svg);
		height:4rem;
		bottom:-4rem;
	}
	#work:before{
		background: center / cover no-repeat url(./img/spwave1.svg);
		height:4rem;
		top:-4rem;
	}
	#work:after{
		background: center / cover no-repeat url(./img/spwave2.svg);
		height:4rem;
		bottom:-4rem;
	}
	#features{
		padding-top:0;
	}
	#staff:before{
		background: center / cover no-repeat url(./img/spwave3.svg);
		height:4rem;
		top:-4rem;
	}
	#staff:after{
		background: center / cover no-repeat url(./img/spwave4.svg);
		height:4rem;
		bottom:0;
	}
	#costs:after{
		background: center / cover no-repeat url(./img/spwave1.svg);
		height:4rem;
		bottom:-4rem;
	}
	#qa{
		padding-top:1.4rem;
	}
	#flows{
		padding:1.4rem 1.4rem 1.4rem;
	}
	#flows:after{
		background: center / cover no-repeat url(./img/spwave2.svg);
		height:4rem;
		bottom:-4rem;
	}
	.flowBox img:nth-of-type(1) {
		width: 3.46rem;
		height: 3.2rem;
	}
}


/* 子ページ */
.childPageHeader{
	padding:5.4rem 1.6rem;
	background:var(--light-pink2);
	position:relative;
	display:flex;
	justify-content: center;
	align-items: center;
}

.childPageHeader > h1{
	font-size:3.6rem;
	color:var(--main-pink);
}

section.common.childFlow .inner{
	max-width:105rem;
	padding:0;
}

section.common.childFlow .inner > p{
	text-align:center;
	margin-bottom:2.2rem;
}

.childFlow .innerFlow{
	max-width:84rem;
	justify-content: center;
	padding-bottom:0;
}

.childFlow .innerFlow .flowBox{
	width:30%;
	margin-right: 3.3%;
	margin-bottom:3.2rem;
	padding: 2.5rem 1.6rem 1.6rem;
}

.childFlow .innerFlow .flowBox h3.commonH3{
	padding-top:1rem;
	line-height:1.8;
}

#flows.childFlow:after{
	display:none;
}

#work.childWorks{
	margin-top:0;
}

#work.childWorks:after{
	display:none;
}

#work.childWorks .inner > p{
	text-align:center;
	width:100%;
	margin-bottom:3.2rem;
}

section#work.childWorks .inner .col3:nth-of-type(2){
	transform: translateY(0);
}

section#work.childWorks .inner .col3 span{
	background:var(--light-pink2);
}

.contactButtons{
	background:var(--button-text-color);

}

.contactButtons > .inner{
	width:90%;
	max-width:73rem;
	margin:0 auto;
	padding:3.2rem 1.4rem 4.6rem;
}

.contactButtons > .inner > p{
	text-align:center;
	margin-bottom:3.2rem;
}

.contactFlex{
	display:flex;
	justify-content: space-between;
	align-items: center;
}

.commonChild{
	padding:4.4rem 1.4rem 8rem;
}

#forms > p{
	text-align:center;
}

.commonChild .inner{
	width:96%;
	max-width:105rem;
	margin:0 auto;
	padding:1.4rem;
}

@media(max-width:480px){
	main#main{
		margin-top:8rem;
		/* margin-top:12rem; */
	}
	.childPageHeader{
		padding: 5rem 1.4rem;
	}
	.childPageHeader > h1{
		font-size:2.8rem;
	}
	section.common.childFlow .inner > p{
		text-align:left;
	}
	#flows.childFlow{
		padding:3.2rem 1.4rem;
	}
	.childFlow .innerFlow .flowBox{
		width:100%;
	}
}

input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="url"], input[type="tel"], input[type="number"], textarea,select{
	font-size: 1.6rem;
	color:#3f3f3f !important;
	width: 100%;
	border: 1px solid #D9D9D9;
	border-radius: 4px;
	padding:.1rem .6rem;
}

.cf7block .wpcf7-form-control-wrap select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width:100%;
	background:#fff;
	padding:.1rem .6rem;
	position:relative;
}

.cf7block.select .wpcf7-form-control-wrap:after{
	position:absolute;
	content:"";
	width:1.2rem;
	height:5.6rem;
	background:center / contain no-repeat url(./img/select_arrow.svg);
	top:0;
	bottom:0;
	right:1.6rem;
	margin:auto;
}

.formContainer{
	width:100%;
	max-width:92rem;
	background:#fff;
	margin:3.2rem auto 8rem;
	padding:3.2rem 5.2rem;
}

.redlabel{
	color:#fff;
	background:var(--main-pink);
	border-radius:.6rem;
	padding:.4rem 1rem;
	margin-right:1.2rem;
}

.graylabel{
	color:#fff;
	background:#B9B9B9;
	border-radius:.6rem;
	padding:.4rem 1rem;
	margin-right:1.2rem;
}

.wpcf7-list-item{
	background:#F2F2F2;
	border-radius:.4rem;
	padding:.4rem 2rem .4rem 1.6rem;
	margin-left:0 !important;
	margin-right:.8rem !important;
	margin-bottom:.8rem !important;
}

.cf7block{
	margin-bottom:2.6rem;
}

.cf7block dt{
	margin-bottom:1rem;
}

.wpcf7-form-control-wrap{
	display:block;
}

.wpcf7-checkbox span.wpcf7-list-item{
	display:inline-block;
	margin-left:0px;
}

.wpcf7-checkbox span.wpcf7-list-item label{
	display:flex;
	align-items:center;
}

.wpcf7-checkbox span.wpcf7-list-item label input{
	margin-right:6px;
}

.cf7block.kibou .soudan{
	display:flex;
	background:#F2F2F2;
	border-radius:.4rem;
	padding:.8rem 1.6rem;
	margin-left:0;
	margin-right:.8rem;
	margin-bottom:.8rem;
}

.cf7block.kibou .soudan > span{
	width:20%;
	font-size:16px;
}

.cf7block.kibou .soudan .wpcf7-form-control-wrap{
	width:100%;
}

.cf7block.sender{
	text-align: center;
}

.wpcf7-form-control.has-spinner.wpcf7-submit{
	font-size: 1.8rem;
	background: #F29779;
	border: none;
	border-radius: 100px;
	padding: .9rem 8.5rem;
	color: #fff;
	transition:all .3s ease;
}
.wpcf7-form-control.has-spinner.wpcf7-submit:hover{
	cursor:pointer;
	box-shadow:0 3px 10px rgba(0,0,0,.16);
}
.wpcf7-spinner{
	display: block;
	text-align: center;
	margin: 0 auto;
}

@media(max-width:768px){
	.cf7block.kibou div{
		width:100%;
	}
	.formContainer{
		margin-bottom:0;
	}
}

@media(max-width:480px){
	.cf7block.kibou .soudan > span{
		width:40%;
	}
	.contactFlex{
		flex-direction:column;
	}
	.commonChild .inner{
		padding:0;
	}
	.formContainer{
		padding:1.4rem;
	}
	.cf7block.kibou .soudan{
		flex-wrap:wrap;
	}
	.cf7block.kibou .soudan > span{
		width:100%;
	}
}




/* フッター */
footer#footer{
	background:var(--main-pink);
	padding:3.6rem 1.4rem 1.4rem;
	position:relative;
	/* margin-top:8rem; */
}

footer#footer:before{
	position:absolute;
	content:"";
	width:100%;
	height:3.6rem;
	top:-3.6rem;
	left:0;
	background:center / cover no-repeat url(./img/wave_footer.svg);
}

.footerInner{
	width:96%;
	max-width:120rem;
	margin:0 auto;
	display:grid;
	grid-template-rows:39% 39% 20%;
	grid-template-columns:33.3% 33.3% 33.3%;
}

.footerInfo{
	grid-area:1/1/3/2;
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
}

.footerInfo > img{
	display:block;
	margin:0 auto 2.4rem;
	height:4.7rem;
	width:auto;
}


.footerInfo > p{
	font-size:1vw;
	color:var(--button-text-color);
	width:90%;
	margin:0 auto .8rem;
	text-align:center;
	line-height:1.6;
}

.footerNav{
	grid-area:1/2/2/4;
	display:flex;
	justify-content: flex-start;
	align-items: center;
}

.footerNavList{
	display:flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap:wrap;
}

.footerNavList li{
	list-style: none;
	color:var(--button-text-color);
	/* width:14rem; */
	position:relative;
	margin-right: 2rem;
}

/* .footerNavList li:nth-of-type(4){
	width:20rem;
} */

.footerNavList li:before{
	content:"・";
	position:absolute;
	font-size:2rem;
	width:2rem;
	height:2rem;
	top:0;
	bottom:0;
	left:-1.6rem;
	color:var(--button-text-color);
	margin:auto;
	line-height:1;
}

.footerNavList li a{
	display:block;
	padding:0 .6rem;
	text-decoration:none;
	color:var(--button-text-color);
	font-size:1vw;
}


.footerCta{
	grid-area:2/2/3/4;
	display:flex;
	justify-content: flex-start;
	align-items: center;
}

.footerCta .ctabutton{
	width:40%;
	border-radius:1.6rem;
	margin-right:1.3rem;
}

.copyright{
	grid-area:3/1/4/4;
	display:flex;
	justify-content: center;
	align-items: flex-end;
}

.copyright p{
	color:var(--button-text-color);
	text-align:center;
	font-size:1.4rem;
}

@media(max-width:1024px){
	.footerNavList li:nth-of-type(4){
		width:auto;
	}
	.footerNavList li{
		width:auto;
		margin-right:2.4rem;
	}
	.footerNavList li a{
		font-size:1.4rem;
	}
}

@media(max-width:800px){
	footer#footer{
		margin-top:4rem;
	}
	.footerInner{
		display:flex;
		flex-direction: column;
		align-items: center;
	}
	.footerInfo{
		width:100%;
		order:1;
	}
	.footerNav{
		order:3;
	}
	.footerInfo > img{
		height:6rem;
	}
	.footerInfo > p{
		font-size:1.4rem;
	}
	.footerNavList{
		justify-content: center;
		margin:1.6rem auto !important;
	}
	.footerNavList li a{
		font-size:1.6rem;
	}
	.footerCta{
		justify-content: center;
		order:2;
		margin-top:1.6rem;
	}
	.copyright{
		margin-top:1.6rem;
		order:4;
	}
}

@media(max-width:480px){
	footer#footer{
		padding:3.2rem 1.4rem 1.6rem;
		margin-top:6rem;
	}
	.footerCta{
		flex-direction: column;
	}
	.footerCta .ctabutton{
		width:100%;
	}
	.footerNav{
		width:90%;
		margin:0 auto;
	}
	.footerNavList{
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width:100%;
	}
	.copyright p{
		font-size:3.2vw;
	}
	footer#footer:before{
		background:left / cover no-repeat url(./img/wave_footer.svg);
	}
}
@media(min-width:1400px){
	.footerInfo > p{
		font-size:1.5rem;
	}
	.footerNavList li a{
		font-size:1.5rem;
	}
}

#headerMessage{
	position:fixed;
	background:#F29779;
	color:#fff;
	width:100%;
	text-align:center;
	z-index:99999;
}

#headerMessage p{
	color:#fff;
}



/* page-designcourse.css */
.designCourseHeader{
    width:100%;
    height:50.4rem;
    padding:1.6rem;
  }
  .designCourseHeader > .inner{
    width:100%;
    height:100%;
    padding:1.6rem;
    background:center / cover no-repeat url(./img/design_course/fv_pc.jpg);
    position:relative;
    border-radius:1.6rem;
  }
  .headerContent img.sp{
    display:none;
  }
  .headerContent{
    width:70rem;
    height:34.2rem;
    background:#fff;
    border-radius:1.6rem;
    padding:2.4rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .headerContent > h1 .hukidashi{
    display:block;
    font-size:2rem;
    font-weight:600;
    color:#fff;
    background:#F29779;
    border-radius:.8rem;
    padding:.1rem 6.8rem;;
    text-align:center;
    position:relative;
    margin:0 auto 1rem;
    width:37.6rem;
  }

  .headerContent > h1 .hukidashi:after{
    content:"";
    position:absolute;
    background:center / cover no-repeat url(./img/design_course/arrow1.svg);
    width:1.5rem;
    height:1.3rem;
    bottom:-1.1rem;
    left:0;
    right:0;
    margin:0 auto;
  }
  .headerContent > h1 .mainText{
    text-align:center;
    position:relative;
    margin-bottom:1.2rem;
  }
  .headerContent > h1 .mainText:after{
    content:"";
    position:absolute;
    background:#FCC52C;
    border-radius:10rem;
    width:58.8rem;
    height:.4rem;
    bottom:0;
    left:0;
    right:0;
    margin:0 auto;
  }
  .headerContent > h1 .mainText span{
    font-size:2.9rem;
  }

  section.common .inner{
    max-width:105rem;
  }

  #work{
    margin-top:10.1rem;
    background:#FFF9F6;
  }
  section#work.common .inner{
    padding-top:3.2rem;
  }
  section#work .inner .col3:nth-of-type(2){
    transform:none;
  }
  section#work .inner .col3:nth-of-type(1),section#work .inner .col3:nth-of-type(2),section#work .inner .col3:nth-of-type(3){
    margin-bottom:5.2rem;
  }

  section#work .inner .col3 span{
    padding:0;
    text-align:center;
  }
  section#work .inner .col3 span img{
    max-width:22.4rem;
    display:inline;
  }
  #recruitments.inner{
    padding-top:0;
  }
  #recruitments p.commonH2.alignLeft{
    font-size:2.8rem;
    margin-bottom:.4rem;
  }
  #recruitments p.commonH2.alignLeft > span{
    color:#F5A42B;
  }
  #recruitments .col2 > p:nth-of-type(2){
    margin-bottom:1rem;
  }
  #courseContent{
    background:#F8EDE1;
  }
  #courseContent .inner{
    padding:0 1.4rem;
  }
  .courseContentBox{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    margin-bottom:5.5rem;
    position:relative;
  }
  .courseContentBox:after{
    content:"";
    position:absolute;
    background:center / cover no-repeat url(./img/design_course/arrow2.svg);
    width:2.56rem;
    height:2.3rem;
    bottom:-4rem;
    left:0;
    right:0;
    margin:0 auto;
  }
  .ccbLeft{
    width:40.57%;
    background:#FBF9F7;
    border-radius:4rem .6rem .6rem 4rem;
    padding:2.4rem;
    text-align:center;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    align-content: center;
  }
  .ccbLeft > img{
    width:6rem;
    height:auto;
  }
  .ccbLeft > h3{
    font-size:2.2rem;
    color:#5A4734;
    width:100%;
    margin: 0.8rem 0 0.4rem;
    line-height: 1.8;
  }
  .ccbLeft > p{
    text-align:left;
    font-size:1.4rem;
  }
  .ccbRight{
    width:57.9%;
    background:#FFFFFF;
    border-radius:.6rem;
    padding:1.6rem;
  }

  .ccbRight > ul{
    margin:0 0 1.2rem 0;
    padding:1.2rem 1.2rem 1.2rem 3.4rem;
    background:#FBF9F7;
    border-radius:.6rem;
  }

  .ccbRight > ul > li{
    position:relative;
    list-style:none;
    line-height:1.5;
  }
  .ccbRight > ul > li:before{
    position:absolute;
    content:"";
    width:1rem;
    height:1rem;
    background:#D2B89E;
    border-radius:100%;
    left:-2rem;
    top:.8rem;
  }
  .ccbRight > span{
    display:inline-block;
    border-radius:100rem;
    background:#88745F;
    color:#fff;
    font-size:1.6rem;
    padding:0rem 4rem;
    margin-bottom:.8rem;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2):after{
    background:center / cover no-repeat url(./img/design_course/arrow3.svg);
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2) .ccbLeft{
    background:#FFFBF6;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2) .ccbLeft > h3{
    color:#A77122;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2) .ccbRight > ul{
    background:#FFF7EC;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2) .ccbRight > ul > li:before{
    background:#F5A42B;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(2) .ccbRight > span{
    background:#F5A42B;
  }

  #courseContent > .inner > .courseContentBox:nth-of-type(3):after{
    display:none;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(3) .ccbLeft{
    background:#FFF6F2;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(3) .ccbLeft > h3{
    color:#C84F27;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(3) .ccbRight > ul{
    background:#FFF6F2;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(3) .ccbRight > ul > li:before{
    background:#F29779;
  }
  #courseContent > .inner > .courseContentBox:nth-of-type(3) .ccbRight > span{
    background:#F29779;
  }
  #work:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 7.89rem;
    background: center / cover no-repeat url(./img/wave02.svg);
    bottom: -7.89rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  #recruitments:before,#recruitments:after{
    display:none;
  }
  section#recruitments.common .inner{
    padding-top:0;
  }
  #courseContent{
    position:relative;
    padding-bottom:6rem;
  }
  #courseContent:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 8rem;
    background: center / cover no-repeat url(./img/design_course/wave01.svg);
    top: -8rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  #courseContent h2.commonH2 span{
    color:#C26B29;
  }
  .cta{
    position:relative;
    padding: 0 0 4.6rem 0;
  }
  .cta:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 7.89rem;
    background: center / cover no-repeat url(./img/design_course/wave02.svg);
    top: -7.89rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .ctaFlex:after,.ctaFlex:before{
    display:none;
  }
  .ctaMessage{
    width: 92%;
    max-width: 73rem;
  }
  .gmap{
    padding-bottom:45%;
  }
  #accesses .inner{
    padding-bottom:10rem;
  }
  @media(max-width:768px){
    .designCourseHeader{
      height:auto;
    }
    .designCourseHeader > .inner{
      background:none;
      padding:0;
      border-radius:0;
    }
    .headerContent{
      width:100%;
      height:auto;
      padding:0;
      border-radius:0;
      position:relative;
    }
    .headerContent img.sp{
      display:inline;
      width: 100%;
      height: auto;
      border-radius: 1.6rem;
      margin-bottom:1.6rem;
    }
    .cta{
      padding:0;
    }
    .headerContent > h1 .hukidashi{
      background:#F5A42B;
    }
    .headerContent > h1 .hukidashi:after{
      background:center / cover no-repeat url(./img/design_course/arrow4.svg);
    }
  }
  @media(max-width:480px){
    .headerContent > h1 .hukidashi{
      width:100%;
      font-size:1.6rem;
    }
    .headerContent > h1 .mainText span{
      display:block;
      position:relative;
      font-size:2.8rem;
    }
    .headerContent > h1 .mainText span:nth-of-type(1):after{
      content:"";
      position:absolute;
      width:.8rem;
      height:.8rem;
      background:#F5A42B;
      border-radius:100%;
      bottom:-.5rem;
      left:0;
      right:0;
      margin:0 auto;
    }
    .headerContent > h1 .mainText span:nth-of-type(2){
      display:none;
    }
    .headerContent > h1 .mainText:after{
      width:18rem;
      bottom:-.8rem;
    }
    .headerContent > h1 .mainText{
      margin-bottom:3.2rem;
    }
    #work{
      margin-top:6.8rem;
      padding-top: 2rem;
      padding-bottom:0rem;
    }
    section#work.common .inner{
      padding-top:0;
    }
    #recruitments p.commonH2.alignLeft{
      font-size:1.8rem;
      text-align:center;
    }
    .ccbLeft{
      width:100%;
      border-radius:1.6rem 1.6rem 0 0 ;
      padding:1.2rem 1.2rem 1.6rem 1.2rem;
    }
    .ccbRight{
      width:100%;
      border-radius:0 0 .6rem .6rem;
    }
    .ccbLeft > img{
      width:3.82rem;
    }
    .ccbLeft > h3{
      font-size:1.8rem;
    }
    .ccbLeft > p{
      font-size:1.5rem;
    }
    .ccbRight > span{
      font-size:1.5rem;
    }
    .ccbRight > span + p{
      line-height:1.4;
    }
    .courseContentBox{
      margin-bottom:4.2rem;
    }
    .courseContentBox:after{
      bottom: -3.4rem;
    }
    .spMessage > img{
      width:94%;
    }
    .spMessage{
      padding-top:2.8rem;
      text-align: center;
    }
    #work:after{
      background: center / cover no-repeat url(./img/spwave2.svg);
      height: 4rem;
      bottom: -4rem;
    }
    #courseContent:before{
      background: center / cover no-repeat url(./img/design_course/wave03.svg);
    }
    .cta:before{
      background: center / cover no-repeat url(./img/design_course/wave04.svg);
    }
    #recruitments{
      margin-top:0;
    }
    .cta{
      margin-bottom:3rem;
    }
    #accesses .inner{
      padding-bottom:3rem;
    }
  }

  
 /* section#work.col3 .inner .col3:nth-of-type(1),section#work.col3 .inner .col3:nth-of-type(2),section#work.col3 .inner .col3:nth-of-type(3){
  margin-bottom: 5.6rem;
 } */
 section#work.col3 .inner .col3:nth-of-type(5){
  transform: translateY(2rem);
 }
 @media(max-width:480px){
  section#work.col3 .inner .col3{
    margin-bottom: 4.2rem;
  }
  section#work.col3 .inner .col3:nth-of-type(5){
    transform: translateY(0rem);
  }
 }

 #worksRead{
  text-align:center;
  padding:0 1.6rem;
 }
 #work:after{
  z-index:-1;
 }
 @media(max-width:480px){
  #worksRead{
    text-align:left;
    padding:0 1.4rem 1.6rem;
  }
  #work{
    margin-bottom:0;
  }
  #staff{
    margin-top:0;
  }
 }


 #programSection{
  margin-top:7.89rem;
  position:relative;
  background:#F29779;
  padding:0 1.6rem 6rem;
  margin-bottom: 2rem;
 }
 #programSection h2.commonH2{
  color:#fff;
 }
 #programSection .inner{
  background:#fff;
  border:.3rem dotted #EBE3DB;
  border-radius:1.2rem;
  padding:2.2rem;
 }
 #programSection h3.commonH3{
  text-align:center;
  padding-top:0;
 }
 #programSection h3.commonH3:after{
  width:31.2rem;
 }
 .program1{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:2rem;
 }
 .prg1Left{
  width: 31.75%;
 }
 .prg1Right{
  width: 65.08%;
 }
 .prg1Right h4{
  position:relative;
  font-size:1.9rem;
  color:#fff;
  background:#88745F;
  border-radius:10rem .6rem .6rem 10rem;
  padding:0 .3rem 0 3.3rem;
 }
 .prg1Right h4:before{
  position:absolute;
  content:"";
  width:1.6rem;
  height:1.6rem;
  background:#F5A42B;
  border-radius:10rem;
  left:1.2rem;
  top:0;
  bottom:0;
  margin:auto 0;
 }
 .prg1Right h4 + p{
  margin:.8rem 0 2rem;
 }
 /* #programSection .inner:nth-of-type(3){
  margin-top:1.6rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding:0;
 }
 #programSection .inner:nth-of-type(3) > div{
  width:49%;
  background:#fff;
  border:.3rem dotted #EBE3DB;
  border-radius:1.2rem;
  padding:2.2rem 3.2rem 1.8rem;
 }
 #programSection .inner:nth-of-type(3) > div > img{
  width:auto;
  height:15.4rem;
  display:block;
  margin:1.6rem auto 2.4rem;
 } */
 .program3BoxText{
  margin-top:1.5rem;
  padding: .8rem 1.5rem;
  font-size:1.4rem;
  background:#F1EEEB;
  border-radius:.6rem;
 }
 #programSection:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 7.89rem;
    background: center / cover no-repeat url(./img/wave08.svg);
    top: -7.89rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
#programSection:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 7.89rem;
    background: top / cover no-repeat url(./img/wave12.svg);
    bottom: -7.89rem;
    left: 0;
    right: 0;
    margin: 0 auto;
}
/* #work:before {
    background: center / cover no-repeat url(./img/wave09.svg);
} */
.cta.ctaType2 .ctaLine{
  margin-top:0;
}

@media(max-width:480px){
  #programSection{
    padding:0 1.4rem 2rem;
  }
  #programSection .inner{
    padding:1.6rem;
  }
  .prg1Left{
    width:100%;
    margin-bottom:1.6rem;
  }
  .prg1Left > img{
    width:100%;
    height:auto;
  }
  .prg1Right{
    width:100%;
  }
  .prg1Right h4{
    font-size:1.6rem;
  }
  /* #programSection .inner:nth-of-type(3) > div{
    width:100%;
    margin-bottom:1.6rem;
    padding:1.6rem;
  } */
  #programSection h3.commonH3:after{
    width:70%;
  }
  #programSection{
    margin-top:6rem;
    /* padding-bottom: 2rem; */
    margin-bottom: 8rem;
  }
  #programSection:before {
    background: top / cover no-repeat url(./img/wave10.svg);
    height: 4rem;
    top: -4rem;
  }
  #programSection:after {
    background: top / cover no-repeat url(./img/wave13.svg);
    height: 4rem;
    bottom: -4rem;
  }
  /* #work:before {
    background: center / cover no-repeat url(./img/wave11.svg);
  } */
}
.program1 .headerButton{
    font-size: 1.6rem;
    color: var(--button-text-color);
    background: #F5A42B;
    border-radius: 10rem;
    padding: 0.9rem 5.2rem;
    display: block;
    width: 26rem;
    text-decoration: none;
    text-align: center;
    /* margin: 0 auto; */
    box-shadow: 0 6px 10px rgba(0,0,0,.16);
  }
  @media(max-width:480px){
    .program1 .headerButton{
      display: block;
      margin: 1.6rem auto 0;
      width: 24rem;

    }
  }


  .designCourseHeader{
    width:100%;
  }
  .designCourseHeader > .inner{
    margin:3.2rem auto;
    width:84rem;
  }
  .headerContent {
    width: 100%;
    /* height: 34.2rem; */
    background: #fff;
    border-radius: 1.6rem;
    padding: 2.4rem;
    border: 2px solid var(--main-pink);
    border-radius: 1.6rem;
  }
  .headerContent > h1 .hukidashi {
    display: block;
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    background: #F29779;
    border-radius: .8rem;
    padding: .1rem 1.6rem;
    text-align: center;
    position: relative;
    margin: 0 auto 1rem;
    width: 100%;
    max-width:30rem;
  }
  .headerContent > h1 .hukidashi:after {
    content: "";
    position: absolute;
    background: center / cover no-repeat url(./img/design_course/arrow1.svg);
    width: 1.5rem;
    height: 1.3rem;
    bottom: -1.1rem;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .headerContent > h1 .mainText {
    text-align: center;
    position: relative;
    margin-bottom: 1.2rem;
  }
  .headerContent > h1 .mainText span {
    font-size: 2.6rem;
  }
  .headerContent > h1 .mainText figure {
    width: 50%;
    max-width: 30rem;
    text-align: center;
    margin: 8px auto;
    padding-bottom: 20px;
}
.headerContent > h1 .mainText:after {
    content: "";
    position: absolute;
    background: #FCC52C;
    border-radius: 10rem;
    width: 58.8rem;
    height: .4rem;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.headerContent > p {
    text-align: center;
}
.skillTags{
  width:100%;
  max-width:58.8rem;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}

.skillTags span{
  width:30%;
  margin:0 auto 1.2rem;
  border-radius:.6rem;
  background:#88745F;
  color:#fff;
  text-align:center;
  padding: .2rem .6rem;
  display: inline-block;
}

.headerButton.headerButton2 {
    font-size: 1.6rem;
    color: var(--button-text-color);
    background: #F5A42B;
    border-radius: 10rem;
    padding: 0.9rem 5.2rem;
    display: block;
    width: 26rem;
    text-decoration: none;
    text-align: center;
    margin: 0 auto;
    box-shadow: 0 6px 10px rgba(0,0,0,.16);
}

.headerContent > p{
  margin-bottom:1.6rem;
}

#programSection .inner{
  margin-top:1.6rem;
}

.prg1Right .skillTags{
  max-width:none;
  margin-top:1.2rem;
  
}

.prg1Right .skillTags span{
  background: #ffece3;
  color: #cf572f;
}

.prg1Right .headerButton.headerButton2{
  margin-top:1.2rem;
}

@media(max-width:950px){
  .skillTags{
    max-width:none;
  }
  .designCourseHeader > .inner{
    width:96%;
  }
}

@media(max-width:768px){
    .headerContent {
        /* width: 92%; */
    }
    .headerContent > h1 .hukidashi {
        background: #F5A42B;
    }
    .headerContent > h1 .hukidashi:after {
        background: center / cover no-repeat url(./img/design_course/arrow4.svg);
    }
    .headerContent > h1 .mainText span {
        font-size: 2.2rem;
    }
    .skillTags{
      font-size:1.3rem;
    }
}

@media(max-width:680px){
  #programSection .inner .prg1Left{
    width:100%;
    margin-bottom:1.6rem;
  }
  #programSection .inner .prg1Left img{
    width:100%;
    height:auto;
  }
  #programSection .inner .prg1Right{
    width:100%;
  }
  .headerContent > h1 .mainText:after {
    width: 18rem;
    bottom: -.8rem;
  }
  .headerContent > h1 .mainText{
    margin-bottom:2.2rem;
  }
}

@media(max-width:480px){
  .skillTags span{
    width:49%;
  }
  .headerContent > p{
    text-align:left;
  }
  .skillTags span{
    margin:0 auto .8rem;
  }
}