@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: #000; font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: 0.2em; margin: 50px 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; bottom: 6.4vw; right:5.8vw; }

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

.whats-shitate { position: relative;  margin: 0 0 200px; }
.whats-shitate  h4 { font-size: 28px; letter-spacing: 0.08em; font-weight: normal; margin: 0 0 50px 5.7vw; }
.whats-shitate  h4 span { letter-spacing: -0.4em; }
.whats-shitate .box-l { width: 50%; float: left; }
.whats-shitate .box-l .inner { padding: 0 5.7vw; }
.whats-shitate .box-r { width: 50%; float: left; }
.whats-shitate .box-r .inner { padding: 0 5.7vw 0 0; }
.whats-shitate .box-r .pic { background: #f8f7f2; position: relative; }
.whats-shitate .box-r img { width: 35%; }
.whats-shitate .box-r p { font-size: 14px; line-height: 2.4; position: absolute; top: 50%; left: 40%; margin: -50px 0 0; }

.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; margin: 10px 0 0; }
.special-talk .tit h4 span { font-size: 30px; line-height: 1; } 
.special-talk .txt { font-size: 38px; letter-spacing: 0.2em; position: absolute; top: 18%; left: calc(50% - 310px); }
.special-talk .txt span { position: relative; z-index: 2; }
.special-talk .txt .line  { width: 635px; height: 20px; background: #dabd9e; display: block; position: absolute; bottom: 13px; left: 0; z-index: 1; } 
.special-talk .name01 { position: absolute; bottom: 0vw; right: 0; padding: 0 0 0 20px; }
.special-talk .name01 p { color: #000; font-size: 30px; line-height: 1.2; letter-spacing: 0.14em; background: #dabd9e; padding: 0 100px 20px 40px }
.special-talk .name01 .tx01 { color: #fff; font-size: 18px; background: #000; padding: 10px 10px 10px 13px; position: absolute; top: -10px; left: 10px; }
.special-talk .name01 .position { font-size: 16px !important; display: block; margin: 10px 0 0; }

.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 p span.arw { display: inline }
.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; }
.article .img-box02 { margin: 0 0 80px; padding: 0 11.6vw; }
.article .img-box02 ul li { width: 50%; float: left; }

.article .box { margin: 0 11.6vw; padding: 60px 0 0; border-top: 2px solid #000; }
.article .box h5 { font-size: 16px; margin: 0 0 5px; }

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



@media screen and (max-width: 780px) {
	
	
	.mt40 { margin-top: 20px !important; } 
	.mb40 { margin-bottom: 20px !important; } 
	
	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: inherit; bottom: 4vw; right:6vw; }
	.main .tx img { height: 60px; }	
	.main .logo img { height: 10px; }

	.intro { text-align: left; padding: 30px 20px; }
	.intro h3 {font-size: 24px; margin: 0 0 15px; }	
	.intro p { line-height: 2.0; }

	.whats-shitate { margin: 0 0 80px; padding: 0 20px; }
	.whats-shitate h4 { font-size: 20px; margin: 0 0 10px; }
	.whats-shitate .box-l { width: 100%; }
	.whats-shitate .box-l .inner { padding: 0; }
	.whats-shitate .box-r { width: 100%; margin: 20px 0 0; }
	.whats-shitate .box-r .inner { padding: 0 20px; }
	.whats-shitate .box-r .pic { text-align: center; padding: 0 0 40px; }
	.whats-shitate .box-r img { width: 80%; margin: 0 auto; }
	.whats-shitate .box-r p { font-size: 12px; line-height: 1.8; position: static; margin: 0; padding: 0 20px; text-align: left; }


	.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 .txt { font-size: 13px; position: absolute; top: 25%; left: calc(50% - 110px); }
	.special-talk .txt span { position: relative; z-index: 2; }
	.special-talk .txt .line  { width: 220px; height: 10px; position: absolute; bottom: 3px; left: 0; } 
	.special-talk .name01 { padding: 0; }
	.special-talk .name01 p { font-size: 14px; line-height: 1; padding: 10px }
	.special-talk .name01 .tx01 { font-size: 11px; padding: 5px 5px 5px 7px; position: absolute; top: -3px; left: -3px; }
	.special-talk .name01 .position { font-size: 10px !important; margin: 5px 0 0; }
	
	.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: 32px; 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 70px; }


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

	.article p { font-size: 13px; }
    .article p span.arw { display: none }
    
	.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 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 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 .img-box02 { margin: 0 0 30px; padding: 0 20px; }
	.article .img-box02 ul li { width: 100%; }

	.article .box { margin: 20px 20px 40px; padding: 20px 0 0; }
	.article .box h5 { font-size: 14px; margin: 0 0 3px; }

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