@charset "UTF-8";

.title { max-width: 1200px; margin: 0 auto; padding: 20px; text-align: left;}

.fadeInUp { animation-duration: 1s; animation-delay: .5s; animation-fill-mode: both; animation-name: fadeInUp;}
	@keyframes fadeInUp {
		from {opacity: 0; transform: translate3d(0, 5%, 0);}
		to {opacity: 1; transform: translate3d(0, 0, 0);}
	}


#concept { background-image: radial-gradient(at 0 0, #FFCEDA, transparent 60%), radial-gradient(at 100% 0, #E1F3F7, transparent 60%), radial-gradient(at 100% 100%, #FFECDA, transparent 60%), radial-gradient(at 0 100%, #EFE9FF, transparent 60%); position: relative; z-index: 1;}
	.concept { max-width: 1020px;background: rgba(255,255,255,.6); position: relative;}
		.concept::before { content:"CONCEPT"; font-size: 10px; display: inline-block; transform:rotate(90deg); color: #999; position: absolute; left: -40px; top: 50%;}
		.concept h2 { padding:10px 0 0 0; text-align: left;}
			.concept h2 img { padding-bottom: 30px;}
			.concept h2::after {display: block; content:""; overflow: hidden; width:80px; height:0; border-top: 1px solid #999; }
		.concept p { padding:20px 0 10px 0; text-align: left;}

#homenav { padding: 40px 0 0 0; }
	#homenav .inner { max-width: 1200px;}
	#homenav ul { display: flex; justify-content: space-between; flex-wrap: wrap;}
	#homenav li { padding:20px 40px 20px 40px; text-align: left; font-size: 14px; counter-increment:cnt-homenav; position: relative;}
		#homenav li::before {content:"FEATURES 0"counter(cnt-homenav); font-size: 12px; color: #999; display: block; width: 80px; height: 50px; padding: 7px 0 0 0; text-align: center; left: -30px; top:25%; position: absolute; transform: rotate(90deg);}
		#homenav li a { text-decoration: none;}
			#homenav li a::after {  display: block; content: url(../images/homenavlink.svg); opacity: 1; transition:.3s; margin-top: 20px;}
				#homenav li a:hover::after { opacity: .6;}
		#homenav li img { padding-bottom: 20px;}

.home {counter-increment:cnt-home;}
	.homebox { text-align: left; padding:40px 20px 40px 60px; position: relative;}
		.homebox::before {content:"――――　F E A T U R E S　0 "counter(cnt-home); font-size: 12px; color: #999; display: block; width:200px; height: 50px; padding: 7px 0 0 40px; text-align: center; position: absolute; transform: rotate(90deg); left: -80px; top: 24px; letter-spacing: -0.1em;}
		.homebox h2 { padding: 20px 0; font-size: 14px;}
		.homebox p { padding: 20px 0; font-size: 16px;}
		.homeimg {}
		.homeimg img { width: 100%; height: auto;}

#komekami{ position: relative; z-index: 1; background: linear-gradient(180deg, #F9F4F0 0px, #FFF 250px); }
	#komekami::before { display: block; content:""; height: 86px; width: 1px; background:#999; margin: 0 auto;}
	#komekami .inner { max-width: 1200px; margin: 0 auto;}
	#komekami h2 { padding: 20px 20px 0 20px; text-align: center;}
	.komekami {  display: flex; justify-content:space-between; align-items: center;}

#works{ position: relative; z-index: 1;}
	#works .inner { width: 100%;}
	.works { padding: 40px 0;}
		.works ul { padding:0;}
		.works li { margin: 8px; }
		.slick-slide img {border-radius: 8px;}
		.works p { padding:10px 0; font-size: 14px;}

#flow{ background-image: radial-gradient(at 0 0, #FFCEDA, transparent 60%), radial-gradient(at 100% 0, #E1F3F7, transparent 60%), radial-gradient(at 100% 100%, #FFECDA, transparent 60%), radial-gradient(at 0 100%, #EFE9FF, transparent 60%); position: relative; z-index: 1;}
	#flow .inner { max-width: 1200px; margin: 0 auto;}
	.flow { padding: 20px; max-width: 960px; margin: 0 auto; text-align: left;}
	.flow ul { padding: 20px 0 0 0 ;}
	.flow li { display: block; padding: 0 0 40px 46px; background:linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 16px, #FFF 16px, #FFF 19px, rgba(0,0,0,0) 19px, rgba(0,0,0,0) 100%); counter-increment:cnt-flow-li; position: relative;}
		.flow li::before { content:"0"counter(cnt-flow-li); font-size: 14px; color: #999; display: block; width: 36px; height: 50px; padding: 7px 0 0 0; text-align: center; background: url("../images/flow-pt.svg") top center no-repeat; left: 0; top:-4px; position: absolute;}
		.flow li:last-of-type { background: none;}
			.flow li:last-of-type::before { background: url("../images/flow-pt-end.svg") top center no-repeat;}
		.flow li strong { font-size: 18px; font-weight:800;}


#faq { background:#FFF; position: relative; z-index: 1;}
	#faq .inner { max-width: 1200px; margin: 0 auto;}
	.faq { padding: 20px; max-width: 960px; margin: 0 auto;}
	.faq dl { padding:0 0 20px 0; margin: 0;}
	.faq dt { display: block; width: 100%; padding: 20px 40px 20px 60px; margin:20px 0 0 0; border-radius: 10px; background:#EEE; position: relative; text-align:left; cursor:pointer; transition: .3s; ;}
		.faq dt.active, .faq dt:hover { background:#DDD;}
		.faq dt::before {content: "Q: ";margin-left: -20px; float: left;}
		.faq dt::after { display: flex; content: "∨"; font-size: 12px; color: #FFF; background:#CCC; width:30px; height: 30px; align-items: center; justify-content: center; border-radius: 40px; overflow: hidden;position: absolute; right: 20px; bottom: -15px;}
		.faq dt.active::after { content: "∧"; background:#BBB;}
	.faq dd { display: none; padding: 20px 40px 0 60px; margin: 0; text-align:left;}
		.faq dd::before {content: "A: "; margin-left: -20px; float: left;}


#inquiry { background:#E7F1F1; position: relative;  z-index: 1;}
	#inquiry .inner { max-width: 1200px; margin: 0 auto;}
	.inquiry { max-width: 960px; margin: 0 auto; padding: 20px; text-align: left;}
		.inquiry h3{ padding: 10px 0; font-size: 18px; font-weight: bold;}
		.inquiry p { padding: 10px 0; font-size: 16px;}
		.inquiryform form { margin: 0; padding: 0;}
			.inquiry dl { width: 100%; padding: 10px 0; margin-top: 20px; } 
				.inquiry dt { font-size:16px; text-align:left; vertical-align:top; font-weight:normal; }
				.inquiry dd { font-size:16px; }
					.inquirybg { display: inline-block; padding: 4px; border-radius: 8px; background:#FFF;}
					.inquirybgnone { display: inline-block; padding: 4px; background:none;}
					.inquiry input[type=text], .inquiry textarea, .inquiry select { box-sizing: border-box; padding: 0; background: rgba(0,0,0,0); border: none; }
					.inquiry label { cursor: pointer;}
					.wfit { width:100%;}
					.w100 { width:100%;}
					.w90 { min-width:90%;}
					.w80 { min-width:80%;}
					.w70 { min-width:70%;}
					.w60 { min-width:60%;}
					.w50 { min-width:50%;}
					.w40 { min-width:40%;}
					.w30 { min-width:30%;}
					.w20 { min-width:20%;}
					.w10 { min-width:10%;}
				#btn { display: flex; flex-wrap: wrap; justify-content:center; width:100%; margin:0; padding:20px 0 10px 0; list-style: none;}
					#btn li { padding:10px 20px; text-align:center;}
					#btn input { display:block; width:240px; margin:0 auto; padding:15px 0; overflow:hidden; border:none; border-radius: 8px; text-align:center; color:#000; font-size:1.6rem; background:#ABCBCB; cursor: pointer; transition: .3s; }
						#btn input:hover { color:#FFF; background:#748B8B;}



@media all and (min-width:320px) {
	/* 320px+ settings */
	#intro { padding-bottom: 40px;}
	
	#homenav li { width: 100%; padding:20px 20px 20px 60px;}
		#homenav li::before { left: -10px; top:25%;}
		#homenav li:nth-of-type(even){ padding:20px 60px 20px 20px;}
			#homenav li:nth-of-type(even)::before { left: auto; right: 10px; top:25%;}
	
	.komekami {padding: 20px 0; margin-top: 40px; flex-wrap: wrap;}
		.komekami h3 { display: block; width: 100%; text-align: left;}
			.komekami h3 img {padding: 20px 0 20px 20px; border-bottom: 1px solid #999;}
		.komekami p { padding:20px 20px; text-align: left;}
	
	#concept .inner { background:url("../images/concept-bg-sp.svg") center center / contain no-repeat; padding-left: 0; padding-right: 30px;}
	.concept::before { left:calc(100% - 10px); top:25px;}
	.concept { max-width: 1020px; margin: 20px auto; padding: 20px; border-radius:0 20px 20px 0; background: rgba(255,255,255,.6);}
	.inquiry dt { padding: 10px 0 0 0;}
	.inquiry dd { padding: 5px 0 10px 0;}
	.home { width:100%;}
	#home1 { background:#F3DED6;}
	#home2 { background:#EDF7F7;}
	#home3 { background:#E3E1DA;}
}

@media all and (min-width:640px) {
	/* 640px+ settings */
	#intro { padding-bottom: 80px;}
	#concept .inner { background:url("../images/concept-bg-pc.svg") center center / contain no-repeat; padding-left: 30px; padding-right: 30px;}
	.concept::before { left: -40px; top: 50%;}
	.concept { max-width: 1020px; margin: 20px auto; padding: 30px; border-radius:30px; background: rgba(255,255,255,.6);}
	.inquiry dl { display: flex; justify-content: space-between; flex-wrap: wrap;}
	.inquiry dt { width:120px ; padding: 10px 0;}
	.inquiry dd { width: calc(100% - 160px);padding: 10px 0;}
}

@media all and (min-width:740px) {
	/* 740px+ settings */
	#concept .inner { padding-left: 40px; padding-right: 40px;}
	.concept { margin: 20px auto; padding: 40px 40px;}

	#homenav li { width: 33%; padding:20px 20px 20px 40px;}
		#homenav li::before { left: -30px; top:25%;}
		#homenav li:nth-of-type(even){ padding:20px 20px 20px 40px;}
			#homenav li:nth-of-type(even)::before { left: -30px; right: auto; top:25%;}

	#home1 { background:#F3DED6 url("../images/home1-bg-pc.png") left 540px bottom 0 / contain no-repeat;}
	#home2 { background:#EDF7F7 url("../images/home2-bg-pc.png") right 880px bottom 0 / contain no-repeat;}
	#home3 { background:#E3E1DA url("../images/home3-bg-pc.png") left 540px bottom 0 / contain no-repeat;}

	.komekami { padding: 40px 0;margin-top: 80px; flex-wrap: nowrap;}
	.komekami h3 { display: block; width: 40%; padding: 20px 40px; text-align: center;}
		.komekami h3 img {padding: 0; border-bottom: none;}
	.komekami p { display: block; width: 60%; padding: 0 50px 0 40px; text-align: left; border-left: 1px solid #999;}
}

@media all and (min-width:960px) {
	/* 960px+ settings */
	#concept .inner { padding-left: 40px; padding-right: 40px;}
	.concept { margin: 20px auto; padding: 40px 80px;}
	
	#homenav li { width: 33%; padding:20px 40px 20px 40px;}
		#homenav li::before { left: -30px; top:25%;}
		#homenav li:nth-of-type(even){ padding:20px 40px 20px 40px;}
			#homenav li:nth-of-type(even)::before { left: -30px; right: auto; top:25%;}
	.home { width: calc(50% + 400px);}
		#home1,#home3 { margin: 0 0 80px auto; border-radius: 40px 0 0 40px;}
		#home2 { margin: 0 auto 80px 0; border-radius:0 40px 40px 0;}
		#home1 .homebox, #home3 .homebox { margin: 0 auto 0 40px; max-width:660px; }
		#home2 .homebox { margin:0 40px 0 auto; max-width:660px;}

}

@media all and (min-width:1200px) {
	/* 1200px+ settings */
	.concept { margin: 20px auto; padding: 40px 120px;}
	.flow { max-width: 1200px; padding-left: 400px; margin-top: -80px;}
	#flow::before { display: block; width: 860px; height: 600px; content: ""; background:url("../images/flow-bg.png") no-repeat; position: absolute; left: 0; bottom: 0; }
	.komekami h3 { width: 30%;}
	.komekami p { width: 70%;}
	.home { width: calc(50% + 600px);}
		#home1,#home3 { margin: 0 0 80px auto; border-radius: 40px 0 0 40px;}
		#home2 { margin: 0 auto 120px 0; border-radius:0 40px 40px 0;}
		#home1 .homebox, #home3 .homebox { margin: 0 auto 0 80px; max-width:660px; }
		#home2 .homebox { margin:0 120px 0 auto; max-width:660px;}
}
@media all and (min-width:1600px) {
	#home1 { background:#F3DED6 url("../images/home1-bg-pc.png") right 0 bottom 0 / contain no-repeat;}
	#home2 { background:#EDF7F7 url("../images/home2-bg-pc.png") left  0 bottom 0 / contain no-repeat;}
	#home3 { background:#E3E1DA url("../images/home3-bg-pc.png") right 0 bottom 0 / contain no-repeat;}
}