@charset "utf-8";

#index-kv { position: relative; background: url('../img/index/bg-kv.jpg') repeat-x 50% 0;}
#index-kv:after { content: ''; display: block; width: 100%; height: 120px; background: linear-gradient(rgba(255,255,255,0),#fff);
 position: absolute; left: 0; bottom: 0; z-index: 1;
}
#index-kv .inner-kv { position: relative; margin-bottom: -250px;}
#index-kv h1 { text-align: center;}
#index-kv h1 img { width: 100%; max-width: 1500px;}
#index-kv h1 img.pc { display: none;}
#index-kv h1 img.sp { display: none;}


#index-kv .kodawari { position: relative; z-index: 2;}
#index-kv .kodawari .inner { width: 92%; max-width: 1180px; margin: 0 auto; padding: 20px 0;}
#index-kv .kodawari h2 { margin-bottom: 8px; padding-left: 20px; font-size: 26px; font-weight: 600; text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;}
#index-kv .kodawari ul { display: flex; width: 100%; justify-content: space-between;}
#index-kv .kodawari ul li { width: 30%;}
#index-kv .kodawari ul li img { width: 100%;}
@media (max-width: 1201px) {
	#index-kv { background: none;}
	#index-kv .inner-kv { margin-bottom: -20vw; padding-top: 60px;}
	#index-kv h1 img.wide { display: none;}
	#index-kv h1 img.pc { display: block;}
}
@media (max-width: 801px) {
	#index-kv .kodawari h2 { padding-left: 12px; font-size: 3.0vw;}
}
@media (max-width: 641px) {
	#index-kv .inner-kv {}
	#index-kv h1 img.pc { display: none;}
	#index-kv h1 img.sp { display: block;}
}
@media (max-width: 481px) {
	#index-kv:after { content: none;}
	#index-kv .inner-kv { padding-top: 40px;}

	#index-kv .kodawari .inner { width: 82%; padding: 12px 0;}
	#index-kv .kodawari h2 { margin-bottom: 0px; padding-left: 0px; font-size: 17px;}
	#index-kv .kodawari ul { display: block; width: 100%; margin: 0 auto;}
	#index-kv .kodawari ul li { width: 100%; padding: 4px 0;}
}


#about { background: url('../img/index/bg-1.jpg') no-repeat 50% 100%;}
#about .inner { width: 88%; max-width: 1180px; margin: 0 auto; padding: 40px 0 60px;}
#about .topic { margin-bottom: 30px; padding-bottom: 20px; background: url('../img/index/line.png') no-repeat 50% 100%; text-align: center;}
#about .topic:before { content: ''; display: inline-block; width: 56px; height: 64px; margin-right: 25px;
 background: url('../img/icn.png') no-repeat 50% 50% / auto 100%; vertical-align: middle;
}
#about .topic h2 { display: inline-block; font-size: 32px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; vertical-align: middle;}
#about .flex { display: flex; justify-content: space-between;}
#about .pht { width: 36%;}
#about .txt { width: 60%;}
#about .pht ul { font-size: 0;}
#about .pht ul li:first-child { margin-bottom: 36px;}
#about .pht ul li img { width: 100%;}
#about .txt p { margin-bottom: 50px; font-size: 20px; letter-spacing: 0.1rem;}
#about .txt p.mb { margin-bottom: 90px;}
#about .txt p span { display: block;}
#about .txt .btn { width: 100%; max-width: 320px;}
#about .txt .btn a { display: block; padding: 12px 0; background: url('../img/bg-ptn-1.jpg') 50% 50% / 32px auto; border-radius: 12px;
 color: #fff; font-size: 20px; font-weight: 700; text-align: center; text-decoration: none;
}
#about .txt .btn a:hover { opacity: 0.8;}

@media (max-width: 1001px) {
	#about .topic h2 { font-size: 3.2vw;}
	#about .pht { width: 30%;}
	#about .txt { width: 65%;}
	#about .txt p { margin-bottom: 30px; font-size: 16px;}
	#about .txt p.mb { margin-bottom: 60px;}
}
@media (max-width: 801px) {
	#about .flex { display: block;}
	#about .pht { width: 100%; margin-bottom: 20px;}
	#about .txt { width: 100%;}
	#about .pht ul li { display: inline-block; width: 50%; margin: 0;}
	#about .pht ul li:first-child { margin-bottom: 0px;}
	#about .pht ul li img { width: 100%;}
}
@media (max-width: 641px) {
	#about .topic { padding-bottom: 12px; background-size: 100% auto;}
	#about .topic:before { width: 36px; height: 42px; margin-right: 10px;}
	#about .topic h2 { text-align: left;}
	#about .topic h2 span { display: block;}
	#about .txt p { margin-bottom: 20px; font-size: 14px;}
	#about .txt p span { display: inline;}
	#about .txt .btn { max-width: 260px;}
	#about .txt .btn a { font-size: 16px;}
}
@media (max-width: 481px) {
	#about { background-size: auto 200px; background-position: 75% 100%;}
	#about .topic h2 { font-size: 20px;}
	#about .txt p { margin-bottom: 15px; font-size: 13px; letter-spacing: 0.05rem;}
	#about .txt p.mb { margin-bottom: 30px;}
	#about .txt .btn a { padding: 8px 0; font-size: 14px;}
}



#flow { background: url('../img/index/bg-2.jpg') no-repeat 50% 50% / cover;}
#flow .inner { width: 90%; max-width: 1180px; margin: 0 auto; padding: 40px 0 80px;}
#flow .topic { margin-bottom: 30px; text-align: center;}
#flow .topic:before { content: ''; display: inline-block; width: 56px; height: 64px; margin-right: 25px;
 background: url('../img/icn.png') no-repeat 50% 50% / auto 100%; vertical-align: middle;
}
#flow .topic h2 { display: inline-block; font-size: 32px; font-weight: 700; letter-spacing: 0.1rem; line-height: 1.4; vertical-align: middle;}
#flow .read { width: 100%; max-width: 820px; margin: 0 auto 50px;}
#flow .read p { font-size: 20px; letter-spacing: 0.1rem;}
#flow ul { font-size: 0; text-align: center;}
#flow ul li { position: relative; display: inline-block; width: 50%; vertical-align: top;}
#flow ul li ul li { width: 33%;}
#flow ul li ul li:before { content: ''; display: block; width: 0px; height: 0px; border: solid 9px transparent; border-left: solid 12px #8fc33f;
 position: absolute; left: -6px; top: 72px;
}
#flow ul li ul li.first:before { content: none;}
#flow ul li dl { width: 90%; max-width: 150px; margin: 0 auto;}
#flow ul li dl dt { margin-bottom: 30px;}
#flow ul li dl dt img { width: 88%; max-width: 150px; border: solid 2px #8fc33f; border-radius: 50%;}
#flow ul li dl dd { font-size: 20px; font-weight: 500;}
@media (max-width: 1001px) {
	#flow .topic h2 { font-size: 3.2vw;}
	#flow .read p { font-size: 16px;}
}
@media (max-width: 801px) {
	#flow .read { margin: 0 auto 20px;}
	#flow ul li { display: block; width: 100%; padding: 15px 0;}
	#flow ul li:first-child { padding-right: 80px;}
	#flow ul li:last-child { padding-left: 80px;}
	#flow ul li ul li { display: inline-block; width: 33%; padding: 0;}
	#flow ul li ul li:first-child { padding-right: 0px;}
	#flow ul li ul li:last-child { padding-left: 0px;}
	#flow ul li dl dt { margin-bottom: 12px;}
	#flow ul li dl dd { font-size: 16px;}
}
@media (max-width: 641px) {
	#flow .topic:before { width: 36px; height: 42px; margin-right: 10px;}
	#flow ul li ul li:before { top: 52px;}
}
@media (max-width: 481px) {
	#flow .inner { padding: 40px 0px;}
	#flow .topic { margin-bottom: 16px;}
	#flow .topic h2 { font-size: 20px;}
	#flow .read { margin: 0 auto 10px;}
	#flow .read p { font-size: 13px; letter-spacing: 0.05rem;}
	#flow .read p span { display: block;}
	#flow ul li { padding: 8px 0;}
	#flow ul li:first-child { padding-right: 40px;}
	#flow ul li:last-child { padding-left: 40px;}
	#flow ul li ul li:before { left: -4px; top: 32px; border: solid 6px transparent; border-left: solid 8px #8fc33f;}
	#flow ul li dl dt { margin-bottom: 6px;}
	#flow ul li dl dd { font-size: 13px;}
}