@charset "utf-8";
/* --------------------------------------------------
	reset
-------------------------------------------------- */
* { margin: 0; padding: 0; box-sizing: border-box;}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
form, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

img{ vertical-align: bottom;}
ul{ list-style: none;}
ul li{ list-style-type: none;}
figure { margin: 0;}


/* =============================================================================
   Forms
   ========================================================================== */
form { margin: 0;}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;}
legend { border: 0;}
button,
input,
select,
textarea { font-size: 100%; margin: 0; vertical-align: baseline;}
button,
input { line-height: normal;}
button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0;}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none;}

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top;}
input[type="search"]:focus { outline: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


/*	Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box;
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;

-webkit-touch-callout: none;
	-khtml-user-select: none;
	-ms-touch-action: pan-y;
  	  touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}

.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;}
.slick-list:focus { outline: none;}
.slick-list.dragging{ cursor: pointer; cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list{
-webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
}
.slick-track { position: relative; top: 0; left: 0; display: block;}
.slick-track:before,
.slick-track:after { display: table; content: '';}
.slick-track:after { clear: both;}
.slick-loading .slick-track { visibility: hidden;}
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; padding: 8px 0;}
[dir='rtl'] .slick-slide { float: right;}
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none;}
.slick-slide.dragging img { pointer-events: none;}
.slick-initialized .slick-slide { display: block; outline: none;}
.slick-loading .slick-slide { visibility: hidden;}
.slick-vertical .slick-slide{ display: block; height: auto;}
.slick-arrow.slick-hidden { display: none;}

.slick-arrow{ width: 35px; height: 35px; position: absolute; bottom: -2px; background: transparent; border: none; z-index: 100;
 text-indent: -9999em; outline: none;
}
.slick-prev { left: 50%; transform: translateX(-130px);}
.slick-next { right: 50%; transform: translateX(130px);}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 12px; height: 12px; top: 50%; transform: translateY(-50%) rotate(45deg);}
.slick-prev:before { left: 35%; border-bottom: solid 2px #d11815; border-left: solid 2px #d11815;}
.slick-next:before { right: 35%; border-top: solid 2px #d11815; border-right: solid 2px #d11815;}

/** Dots */
.slick-dots { position: absolute; bottom: 0px; display: block; width: 100%; padding: 0; margin: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 18px; margin: 0 4px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 18px; height: 18px; cursor: pointer;
 color: transparent; border: 0; outline: none; background: transparent; 
}
.slick-dots li button:hover,
.slick-dots li button:focus{ outline: none;}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before { opacity: 1;}

@media (max-width: 481px) {
}


/*		font-style
-------------------------------------------------- */
body { color: #323232;
/*	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;*/
	font-family: "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	font-size: 16px;
	*font-size:small;
	*font:x-small;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input, textarea { font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;}

.min { font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}
@font-face {
	font-family: 'Roboto';
	src: url('./font/Roboto-Black.ttf') format('truetype');
}
.eng { font-family: "Roboto";}


::selection{ background: #feffaf; color: #000;}
::-moz-selection{ background: #feffaf; color: #000;}


a { color:#002159; text-decoration: underline;}
a:link   { color:#002159;}
a:visited{ color:#002159;}
a:hover  { color:#002159;}
a:active { color:#002159;}

em{ font-style: normal;}


/*		utility
-------------------------------------------------- */
.cf{ clear: both;}
.cf:after{ content: ''; display: block; clear: both;}

@media (max-width: 641px) {
}


#contact ul li label.error {
	position: absolute; top: -30px; left: -10px;
	padding: 5px 8px;
	background: #d00; border-radius: 5px;
	color: #fff; font-size: 12px;
	opacity: 0;
	animation: .5s showError linear forwards .2s;
}
#contact ul li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00;
	transform: rotate(45deg);
	position: absolute; bottom: -4px; left: 20px;
}
@keyframes showError{
	100%{ opacity: 1;}
}

@keyframes toggleMenu1{
	 0% { transform: translate(-50%,-50%);}
	50% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,-8px);}
}
@keyframes toggleMenu2{
	 0% { transform: translate(-50%,-50%);}
	50% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,7px);}
}
@keyframes toggleMenu1on{
	 0% { transform: translate(-50%,-8px);}
	40% { transform: translate(-50%,-50%);}
	60% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,-50%) rotate(30deg); background: #fff;}
}
@keyframes toggleMenu2on{
	 0% { transform: translate(-50%,7px);}
	40% { transform: translate(-50%,-50%);}
	60% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,-50%) rotate(-30deg); background: #fff;}
}

#container { background: #fff;}
#wrapper { padding-top: 100px;}
#hd { position: absolute; left: 0; top: 0; width: 100%; z-index: 102;}
#hd .inner-hd { position: relative; width: 96%; margin: 0 auto; padding: 10px 0;}
#hd h1 { line-height: 1;}
#hd h1 a { display: block; width: 32%; max-width: 320px;}
#hd h1 a img { width: 100%;}
#hd h1 a:hover { opacity: 0.8;}
#hd .menu { display: none; position: absolute; right: 0; top: 15px; width: 38px; height: 30px;}
#hd .menu div { position: relative; width: 100%; height: 100%;}
#hd .menu div span { display: block; width: 80%; height: 1px; background: #000; opacity: 1;
 position: absolute; left: 50%; top: 50%;
}
#hd .menu div span:nth-of-type(1){ transform: translate(-50%,-8px); animation: 0.5s toggleMenu1 linear forwards;}
#hd .menu div span:nth-of-type(2){ transform: translate(-50%,-50%);}
#hd .menu div span:nth-of-type(3){ transform: translate(-50%,7px); animation: 0.5s toggleMenu2 linear forwards;}

#hd.on h1 a img { opacity: 0;}
#hd .menu.active div span:nth-of-type(1) { animation: 0.5s toggleMenu1on linear forwards .2s;}
#hd .menu.active div span:nth-of-type(2) { opacity: 0;}
#hd .menu.active div span:nth-of-type(3) { animation: 0.5s toggleMenu2on linear forwards .2s;}
@media (max-width: 1001px) {
}
@media (max-width: 801px) {
	#wrapper { padding-top: 85px;}
	#hd { position: fixed; left: 0; top: 0; background: rgba(255,255,255,0.85); transition: 0.4s linear;}
	#hd.on { background: rgba(0,0,0,0.8);}
	#hd .inner-hd { padding: 8px 0;}
	#hd h1 a { width: 48%;}
	#hd .menu { display: block;}
}
@media (max-width: 481px) {
	#wrapper { padding-top: 65px;}
	#hd .inner-hd { width: 92%; padding: 8px 0;}
	#hd .menu { top: 10px;}
}


#gNav { position: absolute; right: 0; top: 0px; width: 80%; z-index: 103;}
#gNav .inner-nav { width: 100%; margin: 0 auto; padding: 30px 30px 0 0;}
#gNav ul { font-size: 0; text-align: right; }
#gNav ul li { position: relative; display: inline-block; margin-right: 20px; padding-left: 25px; font-size: 18px; font-weight: 700; line-height: 1.2;}
#gNav ul li:last-child { margin-right: 0px;}
#gNav ul li:before { content: ''; position: absolute; left: 0; top: 50%; display: inline-block; width: 10px; height: 12px;
 transform: translateY(-50%); background: #b7272d; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#gNav ul li.none:before  { background: #d5d5d5;}
#gNav ul li.none span { position: relative; display: inline-block; color: #aaa; vertical-align: middle;}
#gNav ul li a { position: relative; display: inline-block; color: #333; text-decoration: none; vertical-align: middle;}
#gNav ul li a span { position: relative; display: block; width: 100%; overflow: hidden;}
#gNav ul li a span em { display: block; transition: 0.25s ease;}
#gNav ul li a span em.hv { position: absolute; left: 0; top: 100%; }
#gNav ul li a:hover span em.base{ transform: translateY(-20px);}
#gNav ul li a:hover span em.hv { color: #b7272d; top: 0%;}


#spNav { position: fixed; left: 0; top: 0; width: 100%; background: #000; z-index: -1; transition: 0.2s linear; opacity: 0;}
#spNav.open { z-index: 101; opacity: 1;}
#spNav .inner-nav { width: 100%; height: 100vh; margin: 0 auto; padding: 120px 0px 0;}

#spNav ul { width: 92%; max-width: 500px; margin: 0 auto; text-align: left;}
#spNav ul li { display: block; width: 100%; padding: 5px; font-size: 18px; font-weight: 700;}
#spNav ul li:before {}
#spNav ul li span,
#spNav ul li a { position: relative; display: block; padding: 6px; padding-left: 30px; border: solid 1px #fff;
 color: #fff; text-decoration: none; vertical-align: middle;
}
#spNav ul li a:before,
#spNav ul li a:after { content: ''; display: block; position: absolute; top: 50%;}
#spNav ul li a:before{ width: 8px; height: 10px; left: 10px; transform: translateY(-50%);
 background: #b7272d; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#spNav ul li a:after { width: 10px; height: 10px; border-top: solid 1px #b7272d; border-right: solid 1px #b7272d; right: 20px; transform: translateY(-50%) rotate(45deg);}
#spNav ul li span{ color: #999;}
#spNav ul li a:hover { background: #181818}

@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
	#gNav .inner-nav { padding: 34px 20px 0 0;}
}
@media (max-width: 801px) {
	#gNav { display: none;}
	#spNav { display: block;}
	#gNav.open { display: block; z-index: 99;}
}
@media (max-width: 481px) {
	#spNav .inner-nav { padding: 80px 0px 0px;}
	#spNav ul li { font-size: 16px;}
	#spNav ul li:before { width: 3px; height: 12px;}
}


.pagetop { position: fixed; right: 0; bottom: 0; width: 70px; height: 70px; z-index: 98;}
.pagetop a { position: relative; display: block; background: #474747; width: 100%; height: 100%;}
.pagetop a:before { content: ''; display: block; width: 20px; height: 20px; border-top: solid 2px #fff; border-left: solid 2px #fff;
 position: absolute; left: 50%; top: 45%; transform: translateX(-50%) rotate(45deg);
}
.pagetop a:hover { opacity: 0.8;}

#ft { padding: 40px 0;}
#ft p { font-size: 14px; text-align: center;}
@media (max-width: 481px) {
	.pagetop { width: 40px; height: 40px;}
	.pagetop a:before { width: 12px; height: 12px;}

	#ft { padding: 20px 0;}
	#ft p { font-size: 10px;}
}



#kv { margin-bottom: 50px; background: url('./img/bg-kv.png') repeat-x 50% 50% / auto 100%;}
#kv .inner-kv { position: relative;}
#kv .ctn { padding: 180px 0 200px;}
#kv .ctn h1 { text-align: center;}
#kv .ctn h1 img { width: 40%; max-width: 320px; margin: 0 auto;}
#kv .ctn h1 span { display: block; font-size: 34px; letter-spacing: 0.1rem;}
@media (max-width: 801px) {
	#kv .ctn { padding: 18vw 0 20vw;}
	#kv .ctn h1 span { font-size: 4.2vw;}
}
@media (max-width: 481px) {
	#kv .ctn h1 span { font-size: 16px;}
}

.ttl { position: relative; width: 100%; margin-bottom: -24px; overflow: hidden; z-index: 1;}
.ttl h2 { position: relative; width: 100%; line-height: 1;}
.ttl h2 span.jp { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 3; padding: 4px 4px; background: #231f20;
 color: #fff; font-size: 32px; font-weight: 700; text-align: center;
}
.ttl h2 span.eng { position: relative; z-index: 1; color: #f6f6f6; font-size: 120px; font-weight: 400; line-height: 0.85;}
.ttl h2.txt-R { text-align: right;}
.ttl h2 span.sub { position: absolute; left: 0; width: 100%; text-align: center; z-index: 2; font-size: 28px;}
@media (max-width: 801px) {
	.ttl h2 span.jp { font-size: 3.8vw;}
	.ttl h2 span.eng { font-size: 14vw;}
	.ttl h2 span.sub { font-size: 3.6vw;}
}
@media (max-width: 481px) {
	.ttl { padding-bottom: 8px;}
	.ttl h2 span.jp { top: 72%; transform: translate(-50%,0%); padding: 2px; font-size: 15px;}
	.ttl h2 span.eng { font-size: 12vw;}
	.ttl h2 span.sub { font-size: 14px;}
}


#mp { position: relative;}
#mp .inner-sct { position: relative; padding: 50px 0;}
#mp .ttl { margin-bottom: -80px;}
#mp .box { position: relative; width: 88%; max-width: 920px; margin: 0 auto; padding: 60px 0px; background: #fff; border: solid 1px #000; box-shadow: 6px 6px 0 #e9e8e8; z-index: 2;}
#mp .box:before,
#mp .box:after { content: '”'; display: block; width: 80px; height: 80px; position: absolute;
 color: #d5d4d4; font-size: 200px; font-family: "游明朝", "Yu Mincho", "YuMincho", serif; line-height: 1;
}
#mp .box:before{ left: 10%; top: 30px; transform: rotate(180deg);}
#mp .box:after { right: 10%; bottom: 40px;}
#mp .box p { font-size: 30px; line-height: 1.85; font-weight: 700; text-align: center;}
#mp .box p span { display: block;}
#mp .box p br.sp { display: none;}
#mp .box p.eng { font-size: 40px; letter-spacing: 0.05rem;}
@media (max-width: 1001px) {
	#mp .box p { font-size: 3.2vw;}
}
@media (max-width: 801px) {
	#mp .box { padding: 50px 0px;}
	#mp .box:before{ left: 6%; top: 20px;}
	#mp .box:after { right: 6%; bottom: 30px;}
}
@media (max-width: 641px) {
	#mp .box:before,
	#mp .box:after { width: 50px; height: 50px; font-size: 120px;}
	#mp .box p br.sp { display: block;}
}
@media (max-width: 481px) {
	#mp .inner-sct { padding: 30px 0;}
	#mp .ttl { margin-bottom: -50px;}
	#mp	.ttl h2 span.jp { top: 50%; transform: translate(-50%,-50%);}
	#mp .box { padding: 18px 0px 16px; box-shadow: 3px 3px 0 #e9e8e8;}
	#mp .box:before,
	#mp .box:after { width: 30px; height: 30px; font-size: 80px;}
	#mp .box:before{ left: 6%; top: 15px;}
	#mp .box:after { right: 6%; bottom: 20px;}
	#mp .box p { font-size: 14px;}
	#mp .box p.eng { font-size: 20px;}
}


#group { position: relative;}
#group .inner-sct { position: relative; padding: 50px 0;}
#group .ttl h2 span.jp { transform: translate(-50%,-85%);}
#group .ttl h2 span.sub { bottom: 30px;}
#group h3 { font-size: 40px; letter-spacing: 0.05rem;}
#group .bloc { position: relative; width: 88%; max-width: 1048px; margin: 0 auto;}
#group .bloc .box { width: 100%; background: #fff; border: solid 1px #000; box-shadow: 6px 6px 0 #e9e8e8; z-index: 2;}
#group .bloc .box .flex { display: flex; justify-content: space-between; padding: 36px 0;}
#group .bloc .box .name { width: calc(100% - 600px);}
#group .bloc .box .detail { width: 600px; padding-left: 40px; border-left: solid 1px #000;}
#group .bloc .box .name h4 { font-size: 30px; font-weight: 700; text-align: center;}
#group .bloc .box .name h4 img { display: inline-block; width: 22%; max-width: 120px; margin-right: 6px; vertical-align: middle;}
#group .bloc .box .name h4 span{ display: inline-block; vertical-align: middle;}

#group .bloc2 { position: relative; width: 88%; max-width: 1048px; margin: 0 auto; padding-top: 30px; padding-left: 100px;}
#group .bloc2:before,
#group .bloc2:after { content: ''; display: block; position: absolute; left: 30px; z-index: 1;}
#group .bloc2:before{ width: 80px; height: 72%; border-left: solid 9px #e9e8e8; border-bottom: solid 9px #e9e8e8; top: 0;}
#group .bloc2:after { width: 80px; height: 9px; background: #e9e8e8; top: 10.8%;}
#group .bloc2 .box { position: relative; width: 100%; background: #fff; border: solid 1px #000; box-shadow: 6px 6px 0 #e9e8e8; z-index: 2;}
#group .bloc2 .box.mb { margin-bottom: 30px;}
#group .bloc2 .box .flex { display: flex; justify-content: space-between; padding: 36px 0;}
#group .bloc2 .box .name { width: calc(100% - 600px); text-align: center;}
#group .bloc2 .box .detail{ width: 600px; padding-left: 40px; border-left: solid 1px #000;}
#group .bloc2 .box .name div dl { display: inline-block; text-align: left;}
#group .bloc2 .box .name div dl dt { margin-bottom: 10px; line-height: 1;}
#group .bloc2 .box .name div dl dt img { width: 30%; max-width: 88px;}
#group .bloc2 .box .name div dl dd { position: relative; padding-left: 25px; font-size: 26px; font-weight: 700; line-height: 1.2;}
#group .bloc2 .box .name div dl dd:before { content: ''; display: block; width: 10px; height: 10px; border-top: solid 2px #d11815; border-right: solid 2px #d11815;
 position: absolute; left: 0; top: 0.4em; transform: rotate(45deg);
}
#group .bloc2 .box .name div dl dd a { color: #323232; text-decoration: none;}
#group .bloc2 .box .name div dl dd a:hover { color: #d11815;}

#group .bloc .box .detail h4,
#group .bloc2 .box .detail h4 { margin-bottom: 18px; font-size: 24px; line-height: 1.2;}
#group .bloc .box .detail h4 span,
#group .bloc2 .box .detail h4 span { position: relative; display: inline-block; margin-right: 20px; padding: 5px 8px 4px; background: #000; transform: translateY(-1px);
 color: #fff; font-size: 23px;
}
#group .bloc .box .detail ol,
#group .bloc2 .box .detail ol { width: 92%; list-style: none;}
#group .bloc .box .detail ol li,
#group .bloc2 .box .detail ol li { position: relative; padding: 18px 0; padding-left: 40px; border-top: dashed 1px #000;counter-increment: num;}
#group .bloc .box .detail ol li::before,
#group .bloc2 .box .detail ol li::before { position: absolute; left: 4px; font-size: 20px; font-weight: 700; content: counter(num)'.';}
#group .bloc .box .detail ol li dl dt,
#group .bloc .box .detail ol li dl dd,
#group .bloc2 .box .detail ol li dl dt,
#group .bloc2 .box .detail ol li dl dd { color: #323232;}
#group .bloc .box .detail ol li dl dt,
#group .bloc2 .box .detail ol li dl dt { font-size: 20px; font-weight: 700;}
#group .bloc .box .detail ol li dl dt.mb,
#group .bloc2 .box .detail ol li dl dt.mb { margin-bottom: 8px;}
#group .bloc .box .detail ol li dl dd,
#group .bloc2 .box .detail ol li dl dd { font-size: 18px;}
#group .bloc2 .box .detail ol li dl dd span { display: block;}
#group .bloc .box .detail ol li dl dd img { width: 80%; max-width: 290px;}
#group .bloc2 .box .detail ol li dl dd img{ width: 60%; max-width: 220px;}
#group .bloc .box .detail ol li dl dd a:hover img,
#group .bloc2 .box .detail ol li dl dd a:hover img{ opacity: 0.8;}
@media (max-width: 1201px) {
	#group .bloc .box .name h4 { font-size: 2.4vw;}

	#group .bloc2 .box .name dl { padding: 0 12px;}
	#group .bloc2 .box .name dl dd { font-size: 2.0vw;}

	#group .bloc .box .detail h4,
	#group .bloc2 .box .detail h4 { margin-bottom: 12px; font-size: 1.8vw; }
	#group .bloc .box .detail h4 span,
	#group .bloc2 .box .detail h4 span { font-size: 2.0vw;}
	#group .bloc .box .detail ol li dl dt,
	#group .bloc2 .box .detail ol li dl dt { font-size: 18px;}
	#group .bloc .box .detail ol li dl dd,
	#group .bloc2 .box .detail ol li dl dd { font-size: 16px;}
}
@media (max-width: 1001px) {
	#group .bloc .box .name { width: calc(100% - 480px);}
	#group .bloc .box .detail{ width: 480px; padding-left: 20px;}
	#group .bloc .box .name h4 img {}

	#group .bloc2 { padding-top: 20px; padding-left: 60px;}
	#group .bloc2:before,
	#group .bloc2:after { left: 25px;}
	#group .bloc2:before{ width: 80px; height: 72%; border-left: solid 5px #e9e8e8; border-bottom: solid 5px #e9e8e8; top: 0;}
	#group .bloc2:after { width: 80px; height: 5px; top: 10.8%;}

	#group .bloc2 .box .name { width: calc(100% - 480px);}
	#group .bloc2 .box .detail{ width: 480px; padding-left: 20px;}

	#group .bloc .box .detail ol li dl dt.mb,
	#group .bloc2 .box .detail ol li dl dt.mb { margin-bottom: 8px;}
}
@media (max-width: 801px) {
	#group .ttl { margin-bottom: 20px;}
	#group .ttl h2 span.jp { transform: translate(-50%,-60%);}
	#group .ttl h2 span.sub { bottom: 8px;}

	#group h3 { font-size: 30px;}

	#group .bloc2:before,
	#group .bloc2:after { left: 20px;}
	#group .bloc2:before{ height: 215px;}
	#group .bloc2:after { top: 105px;}
	#group .bloc2.open1:before { height: 932px !important;}
	#group .bloc2.open2:before { height: 215px;}

	#group .bloc .box { box-shadow: 3px 3px 0 #e9e8e8;}
	#group .bloc .box .flex { display: block; padding: 0;}
	#group .bloc .box .name { width: 100%;}
	#group .bloc .box .detail { display: none; width: 100%; padding: 0px 30px 20px; border-left: none;}

	#group .bloc2 .box { box-shadow: 3px 3px 0 #e9e8e8;}
	#group .bloc2 .box.mb { margin-bottom: 20px;}
	#group .bloc2 .box .flex { display: block; padding: 0;}
	#group .bloc2 .box .name { width: 100%;}
	#group .bloc2 .box .detail{ display: none; width: 100%; padding: 0px 30px 20px; border-left: none;}

	#group .bloc .box .name div,
	#group .bloc2 .box .name div { position: relative; padding: 12px; padding-right: 20px; cursor: pointer;}
	#group .bloc .box .name div:before,
	#group .bloc .box .name div:after,
	#group .bloc2 .box .name div:before,
	#group .bloc2 .box .name div:after { content: ''; display: block; width: 18px; height: 1px; background: #000; position: absolute; right: 30px; top: 50%;}
	#group .bloc .box .name div:after,
	#group .bloc2 .box .name div:after { transform: rotate(90deg); transition: 0.3s linear;}
	#group .bloc .box .name.open div:after,
	#group .bloc2 .box .name.open div:after { transform: rotate(0deg);}
	#group .bloc .box .name div h4 { font-size: 20px;}
	#group .bloc .box .name div h4 img { max-width: 50px;}
	#group .bloc .box .name div h4 span{ vertical-align: middle;}

	#group .bloc2 .box .name div dl { position: relative; display: block; width: 100%; padding: 20px 0; padding-left: 90px;}
	#group .bloc2 .box .name div dl dt { width: 50px; margin: 0; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
	#group .bloc2 .box .name div dl dt img { width: 100%;}
	#group .bloc2 .box .name div dl dd { font-size: 18px;}
	#group .bloc2 .box .name div dl dd:before { width: 8px; height: 8px; top: 0.25em;}

	#group .bloc .box .detail:before,
	#group .bloc2 .box .detail:before{ content: ''; display: block; width: 100%; height: 1px; background: #000; margin: 0 auto 20px;}
	#group .bloc .box .detail h4,
	#group .bloc2 .box .detail h4 { margin-bottom: 18px; font-size: 18px;}
	#group .bloc .box .detail ol,
	#group .bloc2 .box .detail ol { width: 100%;}
}
@media (max-width: 481px) {
	#group .inner-sct { padding: 30px 0;}
	#group .ttl { margin-bottom: 6px;}
	#group .ttl h2 span.jp { top: 50%;}
	#group .ttl h2 span.sub { bottom: 4px;}
	#group h3 { font-size: 20px;}

	#group .bloc2 { padding-top: 16px; padding-left: 40px;}
	#group .bloc2:before,
	#group .bloc2:after { left: 15px;}
	#group .bloc2:before{ height: 150px; border-width: 4px;}
	#group .bloc2:after { height: 4px; top: 76px;}
	#group .bloc2.open1:before { height: 580px !important;}
	#group .bloc2.open2:before { height: 150px;}

	#group .bloc2 .box.mb { margin-bottom: 12px;}

	#group .bloc .box .name div { padding: 9px;}
	#group .bloc .box .name div:before,
	#group .bloc .box .name div:after,
	#group .bloc2 .box .name div:before,
	#group .bloc2 .box .name div:after { width: 15px; right: 14px;}

	#group .bloc .box .name div h4 { font-size: 17px;}
	#group .bloc .box .name div h4 img { max-width: 48px;}
	#group .bloc .box .name div h4 span{ vertical-align: middle;}

	#group .bloc .box .detail { padding: 0px 18px 12px;}
	#group .bloc2 .box .detail{ padding: 0px 14px 12px;}
	#group .bloc .box .detail:before,
	#group .bloc2 .box .detail:before{ margin: 0 auto 16px;}

	#group .bloc2 .box .name div dl { padding: 10px 0; padding-left: 60px;}
	#group .bloc2 .box .name div dl dt { width: 40px; position: absolute; left: 8px;}
	#group .bloc2 .box .name div dl dd { padding-left: 20px; font-size: 15px;}

	#group .bloc .box .detail:before,
	#group .bloc2 .box .detail:before{ height: 0.5px;}
	#group .bloc .box .detail h4,
	#group .bloc2 .box .detail h4 { margin-bottom: 12px; font-size: 13px;}
	#group .bloc .box .detail h4 span,
	#group .bloc2 .box .detail h4 span { margin-right: 8px; padding: 2px 4px 1px; font-size: 10px;}

	#group .bloc .box .detail ol li,
	#group .bloc2 .box .detail ol li { padding: 8px 0; padding-left: 24px; border-width: 0.5px;}
	#group .bloc .box .detail ol li::before,
	#group .bloc2 .box .detail ol li::before { font-size: 13px;}
	#group .bloc .box .detail ol li dl dt,
	#group .bloc2 .box .detail ol li dl dt { font-size: 13px;}
	#group .bloc .box .detail ol li dl dd,
	#group .bloc2 .box .detail ol li dl dd { font-size: 11px;}
	#group .bloc2 .box .detail ol li dl dd span { display: inline;}
	#group .bloc2 .box .detail ol li dl dd img{ width: auto; height: 20px;}
}



#project .inner-sct { position: relative; padding: 50px 0;}
#project .ttl { margin-bottom: 20px;}
#project .box { width: 94%; max-width: 400px; height: 100%; margin: 0 auto; padding: 30px 30px 0; background: #fff; border: solid 1px #000;  box-shadow: 6px 6px 0 #e9e8e8;}
#project .box .tit { padding-bottom: 20px; border-bottom: dashed 1px #000;}
#project .box .tit h3 { position: relative; padding-left: 36px; font-size: 22px; font-weight: 700; line-height: 1.2;}
#project .box .tit h3:before { content: ''; position: absolute; left: 5px; top: 4px; display: inline-block; width: 17px; height: 20px;
 background: #d11815; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#project .box .txt { padding-top: 20px; min-height: 500px;}
#project .box .txt p { margin-bottom: 20px;}
#project .box .txt figure { text-align: center;}
#project .box .txt figure img { width: 90%; max-width: 400px; margin: 0 auto;}
#project .slick-dotted.slick-slider{ padding-bottom: 50px;}
#project .slick-dots li button:before { content: ''; display: block; width: 15px; height: 17px; margin: 0 auto;
 background: #cfcfcf; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#project .slick-dots li.slick-active button:before { background: #d11815;}

@media (max-width: 1001px) {
	#project .box { padding: 20px 20px 10px;}
	#project .box .tit { padding-bottom: 12px;}
	#project .box .tit h3{ padding-left: 20px; font-size: 1.65vw;}
	#project .box .tit h3:before { width: 12px; height: 15px; left: 0; top: 1px;}
	#project .box .txt { padding-top: 16px;}
	#project .box .txt p { margin-bottom: 12px; font-size: 12px;}
}
@media (max-width: 801px) {
	#project .box { max-width: 600px;}
	#project .box .tit h3{ font-size: 18px;}
	#project .box .tit h3:before { top: 4px;}
	#project .box .txt { min-height: 380px;}
	#project .box .txt figure { padding-top: 10px;}
}
@media (max-width: 641px) {
	#project .box .txt { min-height: 420px;}
}
@media (max-width: 481px) {
	#project .inner-sct { padding: 30px 0;}
	#project .box { padding: 16px 20px 10px; box-shadow: 3px 3px 0 #e9e8e8;}
	#project .box .tit { padding-bottom: 12px; border-width: 0.5px;}
	#project .box .tit h3{ font-size: 16px;}
	#project .box .tit h3:before { top: 2px;}
	#project .box .txt { min-height: 360px;}
	#project .slick-dotted.slick-slider{ padding-bottom: 36px;}
}



#company .inner-sct { position: relative; padding: 50px 0 100px;}
#company .ttl { margin-bottom: 50px;}
#company .ctn { width: 88%; max-width: 1048px; margin: 0 auto;}
#company .ctn .flex { display: flex; justify-content: space-between; flex-direction: row-reverse;}
#company .ctn .data { width: 67%;}
#company .ctn .pht { width: 30%;}
#company .ctn .data ul { border-top: dashed 1px #000;}
#company .ctn .data ul li { padding: 18px 10px; border-bottom: dashed 1px #000;}
#company .ctn .data ul li dl { display: table; width: 100%;}
#company .ctn .data ul li dl dt,
#company .ctn .data ul li dl dd { display: table-cell; vertical-align: middle;}
#company .ctn .data ul li dl dt { width: 150px; font-size: 17px; font-weight: 700;}
#company .ctn .data ul li dl dd { width: auto; font-size: 16px; letter-spacing: 0.05rem;}
#company .ctn .data ul li dl dd br.sp { display: none;}
#company .ctn .data ul li dl dd span.t{ display: block;}
#company .ctn .data ul li dl dd span.kome { display: block; font-size: 12px;}
#company .ctn .data ul li dl dd span.disc { position: relative; display: block; padding: 2px; padding-left: 30px;}
#company .ctn .data ul li dl dd span.disc:before { content: ''; position: absolute; left: 5px; top: 9px; display: inline-block; width: 10px; height: 12px;
 background: #231f20; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#company .ctn .pht figure img { width: 100%; max-width: 300px;}
@media (max-width: 801px) {
	#company .ctn .flex { display: block;}
	#company .ctn .data { width: 100%; margin-bottom: 40px;}
	#company .ctn .pht { width: 100%;}
	#company .ctn .pht figure { text-align: center;}
	#company .ctn .pht figure img { width: 45%;}
}
@media (max-width: 481px) {
	#company .inner-sct { padding: 30px 0 60px;}
	#company .ttl { margin-bottom: 20px;}
	#company .ctn .data { margin-bottom: 25px;}
	#company .ctn .data ul {}
	#company .ctn .data ul li { padding: 12px 4px;}
	#company .ctn .data ul li dl dt,
	#company .ctn .data ul li dl dd { display: block; width: 100%;}
	#company .ctn .data ul li dl dt { font-size: 14px;}
	#company .ctn .data ul li dl dt br { display: none;}
	#company .ctn .data ul li dl dd { font-size: 12px;}
	#company .ctn .data ul li dl dd br.sp { display: block;}
	#company .ctn .data ul li dl dd span.kome { font-size: 10px;}
	#company .ctn .data ul li dl dd span.disc { padding: 0; padding-left: 15px;}
	#company .ctn .data ul li dl dd span.disc:before { left: 0px; top: 4px; width: 7px; height: 9px;}
}