@charset "utf-8";

/* loading ---------------------------------------------------------*/
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 10001;
	background:#f5f5f5;
	text-align:center;
	color:#fff;
}

/* Loading画像中央配置　*/
#splash_logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo svg{
    width:1000px;
}

/*=============== SVGアニメーション内の指定 =================*/

/*アニメーション前の指定*/
#mask path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #222;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
#mask.done path{
	  fill: #222;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}


/*btn*/

/*mv*/
#mv { position: relative; width: 100%; padding-bottom: 3rem; background: url("../img/bg_mv.png")no-repeat 50% 0 / auto 100%; }
.catch_area { padding: 220px 7% 40px; }
.catch { order: 2; margin: 0; font-size: 1.8rem; line-height: 2.8; letter-spacing: 4px; }
.catch .yellow { background: #fcedb6; }
.slide { width: 58%; order: 1; }
.mv_txt { text-align: center; }
#mv .reserve { margin-top: 2rem; }

/*contents*/
.aboutArea { margin-bottom: 5rem; }
.aboutArea .leadArea { width: 54%; }
.aboutArea .txtArea { width: 44%; }
.aboutArea .lead { margin-bottom: 10rem; font-size: 1.6rem; letter-spacing: 2px; line-height: 2.5; }
.aboutArea .lead span { padding-bottom: .3rem; border-bottom: 1px solid #222; }
.ill_about { position: absolute; left: 4%; bottom: 0; width: 36%; max-width: 380px; }
.aboutArea .txt { line-height: 4.7; }

.profile { padding: 5rem 6% 4rem; border: 1px solid #222; border-radius: 50px; }
.profile .txtArea { width: 70%; }
.profile .job { margin: 0; }
.profile .name { margin: 0 0 1.5rem; font-size: 1.7rem; }
.profile .name span { font-size: 1rem; }
.profile .qualification { margin-bottom: 3rem; }
.profile .imgArea { width: 30%; }

.caseBox { position: relative; width: 45%; margin-top: 7rem; padding: 5rem 5% 4rem; text-align: center; border: 1px solid #222; border-radius: 50px; }
.caseBox .num { position: absolute; top: -49px; left: 35%; padding: 0 30px; text-align: center; margin: 0; background: #f5f5f5; }
.caseBox .num span { font-size: 3rem; }
.caseBox .ill { width: 65%; margin: 0 auto 2rem; }
.caseBox .catTtl { margin-bottom: 2rem; font-size: 1.5rem; line-height: 1.5; }
.caseBox .btn { position: absolute; bottom: -10px; left: 16%; width: 70%; min-width: 250px; margin: 0 auto; background: #f5f5f5; }

#news .secTtl { width: 20%; text-align: left; }
.line_list { width: 75%; margin-top: 20px; border-top: 1px solid #222; }
.line_list dt { padding: 20px 10px 0; font-weight: normal; }
.line_list dd { padding: 0 10px 20px; font-weight: normal; border-bottom: 1px solid #222; }
#news .btn { width: 100%; }

.ill_news { position: absolute; bottom: 50px; left: 0; width: 30%; max-width: 204px; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
	.ill_mv01 { top: 119px; left: 3%; }
	.ill_mv02 { top: 95px; right: 9%; }
	.ill_mv03 { bottom: 60px; right: 1%; }

	#news .sec { min-height: 390px; }	

	


}

/* 1024以上(PC) */
@media screen and (min-width: 1024px) {
	
	#mv { height: 900px; }
	#news .sec { min-height: 500px; }


}


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1024px) {
	
	.catch_area { padding: 150px 3% 40px; }
	.catch { font-size: 1.5rem; }
	
	.aboutArea .leadArea,
	.aboutArea .txtArea { width: 100%; }
	.aboutArea .lead { margin-bottom: 1rem; font-size: 1.5rem; }
	.aboutArea .txt { line-height: 3; }	
	.ill_about { left: auto; right: 0; }
	
	.profile .txtArea,
	.profile .imgArea {  width: 100%; }
	.profile .imgArea { margin-top: 2rem; display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; justify-content:space-between; -webkit-justify-content:space-between; }
	.profile .imgArea div { width: 47%; }
	
	.caseBox { width: 48%; margin-top: 5rem; }
	.ill_news { max-width: 160px; }
	
	
}



/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
	
	#header .sitename .siteDes { width: 100%; }
	
	#mv { background: url(../img/bg_mv_sp.png) no-repeat 50% 50% / auto 60%; }
	.catch_area { padding: 130px 0 0; }
	.slide { width: 100%; order: 3; margin-bottom: 2rem; }
	.catch { margin-bottom: 3rem; font-size: 1.2rem; line-height: 2.3; }
	
	.aboutArea { margin-bottom: 2rem; }
	.aboutArea .lead { margin: 0 0 1rem; font-size: 1.1rem; }
	.aboutArea .txt { line-height: 1.8; }
	.ill_about { position: static; width: 62%; margin: 0 auto; }
	
	.profile { padding: 3rem 8% 3rem; border-radius: 30px; }
	.profile .name { font-size: 1.3rem; }
	
	.caseBox { width: 100%; margin-top: 5rem; padding: 3rem 5% 2rem; }
	.caseBox .catTtl { font-size: 1.1rem; }
	.caseBox .ill { width: 55%; }

	#news .secTtl { width: 100%; }
	.ill_news { bottom: auto; left: auto; top: 20px; right: 7%; }

	.line_list { width: 100%; }
	.line_list dt,
	.line_list dd { width: 100%; padding: 10px 10px; }
	.line_list dt { padding-bottom: 0; border-bottom: none; }
	.line_list dd { padding-top: 0; }
	

	
}