@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;}
[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: 25px; height: 25px; position: absolute; top: 50%; border: none; background: none; z-index: 100; text-indent: -9999em; outline: none;}
.slick-prev { left: 50%; margin-left: -25%; transform: translate(-16%,-50%);}
.slick-next { right: 50%; margin-right: -25%; transform: translate(16%,-50%);}
.slick-arrow:before,
.slick-arrow:after { content: ''; display: block; position: absolute; top: 50%; transform: translateY(-50%) rotate(45deg);}
.slick-arrow:before{ width: 100%; height: 100%; background: #333; transition: 0.2s ease;}
.slick-arrow:after { width: 8px; height: 8px;}
.slick-prev:after { left: 8px; border-left: solid 2px #fff; border-bottom: solid 2px #fff;}
.slick-next:after { left: 6px; border-top: solid 2px #fff; border-right: solid 2px #fff;}

/** Dots */
.slick-dotted.slick-slider{ margin-bottom: 30px;}
.slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; text-align: center;}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer;}
.slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; 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;}
.slick-dots li button:before { font-family: 'slick'; font-size: 6px; line-height: 20px; position: absolute; top: 0; left: 0;
	width: 20px; height: 20px; content: '•'; text-align: center; opacity: .25; color: black;
}
.slick-dots li.slick-active button:before { opacity: .75; color: black;}
@media (min-width: 801px) {
	.slick-arrow:hover:before{ transform: translateY(-50%) rotate(45deg) scale(1.8);}
}
@media (max-width: 1201px) {
	.slick-prev { margin-left: -33.5%;}
	.slick-next { margin-right: -33.5%;}
}
@media (max-width: 1001px) {
	.slick-prev { margin-left: -40.5%;}
	.slick-next { margin-right: -40.5%;}
}
@media (max-width: 481px) {
	.slick-arrow{ width: 20px; height: 20px; top: 46%;}
	.slick-prev { margin-left: -44%;}
	.slick-next { margin-right: -44%;}
	.slick-arrow:after { width: 6px; height: 6px;}
	.slick-prev:after { left: 7px;}
	.slick-next:after { left: 5px;}
}



/*		font-style
-------------------------------------------------- */
body {
/*	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%,-6px);}
}
@keyframes toggleMenu2{
	0% { transform: translate(-50%,-50%);}
	50% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,4px);}
}
@keyframes toggleMenu1on{
	0% { transform: translate(-50%,-6px);}
	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%,4px);}
	40% { transform: translate(-50%,-50%);}
	60% { transform: translate(-50%,-50%);}
	100%{ transform: translate(-50%,-50%) rotate(-30deg); background: #fff;}
}


#container {}
#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: 40px 0;}
#hd h1 { line-height: 1;}
#hd h1 a { display: block; width: 320px; background: url('../image/logo.svg') no-repeat 50% 50% / 100% auto;}
#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: 100%; height: 2px; background: #000; opacity: 1;
position: absolute; left: 50%; top: 50%;
}
#hd .menu div span:nth-of-type(1){ transform: translate(-50%,-6px); animation: 0.5s toggleMenu1 linear forwards;}
#hd .menu div span:nth-of-type(2){ transform: translate(-50%,4px); 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) { animation: 0.5s toggleMenu2on linear forwards .2s;}
@media (max-width: 1001px) {
	#wrapper { padding-top: 62px;}
	#hd .inner-hd { padding: 20px 0;}
	#hd h1 a { width: 220px;}
}
@media (max-width: 801px) {
	#wrapper { padding-top: 74px;}
	#hd { position: fixed; left: 0; top: 0; background: rgba(255,255,255,0.85); transition: 0.4s linear;}
	#hd.on { background: rgba(50,50,50,0.8);}
	#hd h1 a { width: 320px;}
	#hd .menu { display: block;}
}
@media (max-width: 481px) {
	#wrapper { padding-top: 52px;}
	#hd .inner-hd { width: 92%; padding: 16px 0;}
	#hd h1 a { width: 56%;}
	#hd .menu { top: 12px;}
}


#gNav { position: absolute; right: 0; top: 0px; width: 80%; z-index: 103;}
#gNav .inner-nav { width: 100%; margin: 0 auto; padding: 40px 30px 0 0;}
#gNav ul { font-size: 0; text-align: right; }
#gNav ul li { position: relative; display: inline-block; margin-right: 20px; padding-left: 15px; font-size: 16px; 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: 6px; height: 16px; margin-right: 12px;
transform: translateY(-50%) skewX(-40deg); background: #b7272d; vertical-align: middle;
}
#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 { top: 0%;}

#spNav { position: fixed; left: 0; top: 0; width: 100%; background: #323232; 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: 70%; 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 { content: ''; position: relative; display: inline-block; width: 4px; height: 15px; margin-right: 18px; background: #fff;
margin-right: 18px;
transform: skewX(-40deg); vertical-align: middle;
}
#spNav ul li.none:before  { background: #999;} 
#spNav ul li:before {}
#spNav ul li span,
#spNav ul li a { display: inline-block; color: #fff; vertical-align: middle;}
#spNav ul li span{ color: #999;}
#spNav ul li a { color: #fff; text-decoration: none;}

@media (max-width: 1201px) {
	#gNav ul li { margin-right: 15px; font-size: 15px;}
	#gNav ul li:before { width: 5px; height: 14px; margin-right: 8px;}
}
@media (max-width: 1001px) {
	#gNav .inner-nav { padding: 20px 15px 0 0;}
	#gNav ul li { margin-right: 12px; padding-left: 12px; font-size: 13px;}
	#gNav ul li:before { width: 4px; height: 12px;}
}
@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: 25px;}
#ft p { font-size: 14px;}
@media (max-width: 481px) {
	.pagetop { width: 40px; height: 40px;}
	.pagetop a:before { width: 12px; height: 12px;}

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


.stl { position: relative; width: 100%; margin-bottom: -24px; overflow: hidden; z-index: 1;}
.stl h2 { position: relative; line-height: 1;}
.stl h2 span.jp { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 280px; padding: 4px 20px; background: #474747; color: #fff; font-size: 24px; font-weight: 700;}
.stl h2 span.eng { position: relative; z-index: 1; color: #f6f6f6; font-size: 150px; font-weight: 700;}
.stl h2.txt-L span.jp { left: 0px; text-align: right;}
.stl h2.txt-R { text-align: right;}
.stl h2.txt-R span.jp { right: 0px; text-align: left;}
.stl h2.txt-R span.eng {}
@media (max-width: 1401px) {
	.stl.wide { margin-bottom: -2vw;}
	.stl h2 span.jp { width: auto; padding: 4px 20px;}
	.stl h2.txt-L span.jp { padding-left: 90px; text-align: right;}
	.stl h2.txt-R span.jp { padding-right: 90px; text-align: right;}
	.stl.wide h2 span.eng { font-size: 10vw;}
}
@media (max-width: 1201px) {
	.stl h2 span.jp {}
	.stl h2 span.eng { font-size: 12.0vw;}
}
@media (max-width: 801px) {
	.stl { margin-bottom: -15px;}
	.stl h2 span.jp { padding: 5px 16px;}
	.stl h2 span.eng { font-size: 14.0vw;}
	.stl h2.txt-L span.jp { padding-left: 40px;}
	.stl h2.txt-R span.jp { padding-right: 40px;}
}
@media (max-width: 481px) {
	.stl { margin-bottom: -12px;}
	.stl.wide { margin-bottom: -12px;}
	.stl h2 span.jp { width: auto; padding: 2px 12px; font-size: 14px;}
	.stl h2 span.eng { font-size: 64px;}
	.stl h2.txt-L span.jp { padding-left: 20px; text-align: left;}
	.stl h2.txt-R span.jp { padding-right: 20px; text-align: right;}
	.stl.wide h2 span.eng { font-size: 64px;}
	.stl.wide h2 span.eng em { display: none;}

}

span.tag.tag-1 { background: #dbdbdb;}
span.tag.tag-2 { background: #bfbfbf;}


#message { position: relative; width: 100%; background: url('../image/bg-ptn.png') no-repeat 50% 42% / 1600px auto;}
#message .stl { position: absolute;}
#message .inner-sct { position: relative; width: 88%; max-width: 1000px; margin: 0 auto; padding: 100px 0 120px; z-index: 2;}
#message .box { width: 92%; max-width: 720px; margin: 0px 0px 40px; padding: 45px 40px 30px; background: #fff; border: solid 1px #000; box-shadow: 6px 6px 0 #e8e8e8;}
#message .box.box-R{ margin: 0px 0px 40px auto;}
#message .box h3 { margin-bottom: 16px; font-size: 30px; line-height: 1;}
#message .box h3 span { position: relative; display: inline-block; vertical-align: middle; padding: 0 0 12px;}
#message .box h3 span:after { content: ''; display: inline-block; width: 100%; height: 4px; position: absolute; left: 0; bottom: 0;
background: linear-gradient(90deg,#ca5459,#b7272d);
}
#message .box h3 br { display: none;}
#message .box p { letter-spacing: 0.05rem; line-height: 1.85;}
#message .tips {}
#message .tips p { font-size: 30px; font-weight: 700; line-height: 1.4; text-align: center;}
#message .tips p span { display: block; font-size: 52px;}
@media (max-width: 1201px) {
}
@media (max-width: 1001px) {
	#message .inner-sct { padding: 80px 0;}
}
@media (max-width: 801px) {
	#message .box { padding: 25px 30px 20px;}
	#message .box h3 { margin-bottom: 12px; font-size: 24px;}
	#message .tips p { font-size: 24px;}
	#message .tips p span { font-size: 48px;}
}
@media (max-width: 641px) {
	#message .inner-sct { width: 100%; padding: 60px 0;}
	#message .box h3 { font-size: 21px;}
	#message .box h3 span:after { height: 2px;}
	#message .box p { font-size: 14px;}
	#message .tips p { font-size: 21px;}
	#message .tips p span { font-size: 40px;}
}
@media (max-width: 481px) {
	#message .inner-sct { padding: 68px 0 50px;}
	#message .box { margin: 0px 0px 25px;	padding: 20px 25px; box-shadow: 4px 4px 0 #e8e8e8;}
	#message .box.box-R{ margin: 0px 0px 25px auto;}
	#message .box h3 { margin-bottom: 2px; font-size: 18px;}
	#message .box h3 br { display: block;}
	#message .box h3 span { margin-bottom: 8px; padding: 0 0 6px;}
	#message .box p { font-size: 13px; line-height: 1.65;}
	#message .tips p { font-size: 18px;}
	#message .tips p span { font-size: 28px;}
}