@charset "UTF-8";
@font-face {
    font-family: 'q_stencilregular';
    src: url('../../../assets/font/q_stencil/q_stencil-webfont.woff2') format('woff2'),
         url('../../../assets/font/q_stencil/q_stencil-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

span { line-height: 1 }
p { font-size: 16px; }

.main { position: relative; }
.main .tit-box { position: absolute; top: 6.4vw; left: 5.8vw; }
.main h2 { color: #fff; font-size: 32px; font-weight: 500; line-height: 0; letter-spacing: 0.2em; margin: 70px 0 0 60px; }
.main h2 .tit-b { font-size: 52px; letter-spacing: 0.2em; padding: 10px 0 0 15px; display: block; }
.main h2 .num { font-size: 64px; }
.main .tx { position: absolute; top: 20vw; right:11vw; }

.intro { text-align: center; padding: 60px 0 100px; }
.intro p { font-weight: 500; line-height: 2.2; }

.whats-shitate { position: relative;  margin: 0 0 200px; }
.whats-shitate .box-l { width: 50%; float: left; }
.whats-shitate .box-r { width: 50%; float: left; }
.whats-shitate .box-r .inner { padding: 0 5.7vw; }
.whats-shitate .box-r h4 { font-size: 28px; letter-spacing: 0.08em; font-weight: normal; margin: 0 0 20px; }
.whats-shitate .box-r h4 span { letter-spacing: -0.4em; }
.whats-shitate .whats { position: absolute; top: 50vw; left: 0; width: 50%; }
.whats-shitate .whats .inner { margin: 70px 0 0 8.5vw; padding: 20px 0 20px 40px; border-left: 1px solid #000; }
.whats-shitate .whats ol { margin: 30px 0 20px 15px; }
.whats-shitate .whats ol li { font-size: 16px; line-height: 2em; text-indent: -15px; margin: 0 0 10px; }
.whats-shitate .whats ol li .num { font-size: 20px; font-weight: 500; }

.whats-shitate .block01 { margin: 0 0 60px; }
.whats-shitate .block02 { margin: 0 0 60px; }
.whats-shitate .block02 .features { margin: 30px 0 0; position: relative; }
.whats-shitate .block02 .features .features01 { width: 47%; float: left; }
.whats-shitate .block02 .features .features02 { width: 47%; float: right; } 
.whats-shitate .block02 h5 { font-size: 28px; letter-spacing: 0.08em; font-weight: normal; text-align: center; margin: 0 0 10px; }
.whats-shitate .block02 .features .cross { position: absolute; top: 0; left: 17.8vw; }
.whats-shitate .block03 .process  { margin: 30px 0 0; }
.whats-shitate .block03 .process p { font-size: 24px; letter-spacing: 0.08em; font-weight: normal; }

.special-talk { margin: 0 0 150px; }
.special-talk .inner { position: relative; }
.special-talk .tit { position: absolute; top: -50px; left: 50%; margin: 0 0 0 -218px; text-align: center; }
.special-talk .tit h3 { font-size: 72px; line-height: 1; letter-spacing: 0.08em; font-family: 'q_stencilregular'; font-weight: normal; }
.special-talk .tit h4 { color: #fff; font-size: 24px; line-height: 1; letter-spacing: 0.2em; }
.special-talk .tit h4 span { font-size: 30px; line-height: 1; } 
.special-talk .name01 { position: absolute; bottom: 5.8vw; left: 5.8vw; }
.special-talk .name02 { position: absolute; bottom: 4.4vw; right: 3.9vw;  }
.special-talk .name01 p { color: #fff; font-size: 32px; letter-spacing: 0.14em; margin: 0 0 5px; }
.special-talk .name02 p { color: #fff; font-size: 32px; letter-spacing: 0.14em; margin: 0 0 5px; }
.special-talk .profile { margin: 60px 11.6vw 40px; padding: 0 0 0 30px; border-left: 5px solid #523e36; }
.special-talk .btn { text-align: center; }
.special-talk .btn a { color:#020102; font-size: 32px; border-bottom: 2px solid #020102; text-decoration: none; }


.concept { position: relative; }
.concept .tx-l { color: #fff; font-size: 72px; font-weight: normal; line-height: 0.5em; letter-spacing: 0.04em; font-family: 'q_stencilregular'; text-align: center; position: absolute; top: 7.5vw; left: 10vw; }
.concept .tx-l span { line-height: 1em; }
.concept .tx-box { position: absolute; top: 7.5vw; left: 55vw; padding: 0 5.8vw 0 0; }
.concept .tx-box h3 { color: #fff; font-size: 24px; margin: 0 0 10px; }
.concept .tx-box p { color: #fff; font-size: 14px; } 
.concept .btn a { color: #c09f7b; font-size: 20px; letter-spacing: 0.2em; border-bottom: 1px solid #c09f7b; position: absolute; bottom: 2.9vw; right: 5.8vw; text-decoration: none; }


#special-talk .intro { padding: 60px 0 130px; }


.article { margin: 100px 0 80px; }
.article h4 { font-size: 20px; letter-spacing: 0.08em; font-weight: 500; margin: 0 0 20px; padding: 0 0 0 11.6vw; }
.article h4 span { letter-spacing: -0.22em; }
.article p { font-size: 14px; margin: 0 0 20px; }
.article .name { font-weight: 600; }
.article .cap { font-size: 12px !important; margin: 20px 0 0 !important; }
.article .block01 { margin: 0 0 80px; }
.article .block02 { margin: 0 0 80px; }
.article .block03 { margin: 0 0 80px; }
.article .block04 { margin: 0 0 80px; }
.article .box-l { width: 50%; float: left; }
.article .box-l .inner { padding: 0 2.9vw 0 11.6vw; }
.article .box-l .pic { padding: 0 2.9vw 0 0; }
.article .box-l .cap { padding: 0 0 0 11.6vw; }
.article .box-r { width: 50%; float: left; }
.article .box-r .inner { padding: 0 11.6vw 0 2.9vw; }
.article .box-r .pic { padding: 0 0 0 2.9vw; }
.article .box-r h4 { padding: 0 0 0 2.9vw; }
.article .img-box { margin: 0 0 80px; }
.article .img-box ul li { width: 33.33%; float: left; }
.article .img-box .cap { padding: 0 0 0 11.6vw; }


.footer { padding: 80px 0; }
.footer { text-align: center; }
.footer p { font-size: 14px; margin: 30px 0 0; }


@media screen and (max-width: 780px) {
	
	p { font-size: 14px; }

	.main .tit-box { position: absolute; top: 2vw; left: 4vw; }
	.main h2 { font-size: 13px; margin: 20px 0 0 10px; }
	.main h2 .tit-b { font-size: 20px; padding: 10px 0 0 15px; }
	.main h2 .num { font-size: 26px; }
	.main .tx { position: absolute; top: 22vw; right:6vw; }
	.main .tx img { height: 60px; }	
	.main .logo img { height: 10px; }

	.intro { text-align: left; padding: 30px 20px; }
	.intro p { line-height: 2.0; }

	.whats-shitate { margin: 0 0 80px; }
	.whats-shitate .box-l { width: 100%; }
	.whats-shitate .box-r { width: 100%;  }
	.whats-shitate .box-r .inner { padding: 0 20px; }
	.whats-shitate .box-r h4 { font-size: 20px; margin: 0 0 10px; }

	.whats-shitate .whats { position: static; width: 100%; }
	.whats-shitate .whats .inner { margin: 30px 0 0 20px; padding: 10px 20px; }
	.whats-shitate .whats ol { margin: 30px 0 20px 15px; }
	.whats-shitate .whats ol li { font-size: 13px; line-height: 1.6em; text-indent: -13px; }
	.whats-shitate .whats ol li .num { font-size: 18px; }
	.whats-shitate .whats img { height: 14px; }
	
	.whats-shitate .block01 { margin: 0 0 40px; }
	.whats-shitate .block02 { margin: 0 0 40px; }
	.whats-shitate .block02 .features { margin: 20px 0 0; }
	.whats-shitate .block02 h5 { font-size: 20px; margin: 0 0 5px; }
	.whats-shitate .block02 .features .cross { position: absolute; top: 3px; left:50%; height: 20px; margin: 0 0 0 -10px; }
	.whats-shitate .block03 .process  { margin: 20px 0 0; }
	.whats-shitate .block03 .process p { font-size: 16px; }
	.whats-shitate .pic { margin: 0 0 20px; }
	
	.special-talk { margin: 0 0 70px; }
	.special-talk .tit { position: absolute; top: -25px; left: 50%; margin: 0 0 0 -110px; }
	.special-talk .tit h3 { font-size: 36px; }
	.special-talk .tit h4 { font-size: 13px; }
	.special-talk .tit h4 span { font-size: 18px; } 
	.special-talk .name01 { position: absolute; bottom: 3.5vw; left: 2vw; }
	.special-talk .name02 { position: absolute; bottom: 2vw; right: 2vw; }
	.special-talk .name01 p { font-size: 12px; margin: 0 0; line-height: 0; }
	.special-talk .name02 p { font-size: 12px; margin: 0 0 5px; line-height: 0; }
	.special-talk .name01 img { height: 1.1vw; }
	.special-talk .name02 img { height: 3.5vw; }
	.special-talk .profile { margin: 30px 20px 20px; padding: 0 0 0 20px; border-left: 3px solid #523e36; }
	.special-talk .btn a { font-size: 22px; }
	
	.concept .tx-l { font-size: 36px; position: absolute; top: 5vw; left: 5vw; }
	.concept .tx-box { display: none; }
	.concept .btn a { font-size: 14px; position: absolute; bottom: 2vw; right: 2vw; }


	#special-talk .intro { padding: 30px 20px 50px; }


	.article { margin: 40px 0 20px; }
	.article h4 { font-size: 18px; margin: 0 0 15px; padding: 0 20px; }

	.article p { font-size: 13px; }

	.article .cap { font-size: 10px !important; margin: 10px 0 0 !important; }
	.article .block01 { margin: 0 0 40px; }
	.article .block02 { margin: 0 0 20px; }
	.article .block03 { margin: 0; }
	.article .block04 { margin: 20px 0 0; }
	
	.article .box-l { width: 100%; }
	.article .box-l .inner { padding: 0 20px; }
	.article .box-l .pic { padding: 0 20px; }
	.article .box-l .cap { padding: 0 0 0 20px; }
	
	.article .box-r { width: 100%; }
	.article .box-r .inner { padding: 0 20px; }
	.article .box-r .pic { padding: 0 20px; }
	.article .box-r h4 { padding: 0 20px; }
	
	.article .img-box { margin: 0 0 40px; padding: 0 20px; }
	.article .img-box ul li { width: 100%; }
	.article .img-box .cap { padding: 0; }
	
	.article .block04 .pic {margin: 0 0 40px; }

	.footer { padding: 30px 0; }
	.footer p { font-size: 11px; margin: 20px 0 0; }
	.footer img { height: 14px; }
}