@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: 50px; height: 50px; position: absolute; top: 50%; transform: translateY(-50%);
 background: #000; border: none; border-radius: 50%; z-index: 100;
 text-indent: -9999em; outline: none;
}
.slick-prev { left: 0px;}
.slick-next { right: 0px;}
.slick-arrow:before{ position: absolute; content: ''; display: block; width: 0px; height: 0px; top: 50%; transform: translateY(-50%);}
.slick-prev:before { left: 30%; border: solid 9px transparent; border-right: solid 16px #fff; border-left: 0;}
.slick-next:before { right: 30%; border: solid 9px transparent; border-left: solid 16px #fff; border-right: 0;}
@media (max-width: 481px) {
}



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

.min {font-family: "游明朝", "Yu Mincho", "YuMincho", serif;}

::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;}
@media (min-width: 800px) {
  :root {
    font-size: calc(0.875rem + ((1vw - 8px) * 0.5));
    min-height: 0vw;
  }
}

/*		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 showIn{
	100%{ opacity: 1;}
}


.loading { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; background: #fff; z-index: 100;}

#hd { }
#hd .hd-sns { padding: 35px 20px;}
#hd .hd-sns ul li { display: inline-block; margin: 0 10px; vertical-align: middle;}
#hd .hd-sns ul li svg { fill: #000; transition: 0.4s ease;}
#hd .hd-sns ul li.tw svg { width: 27px;}
#hd .hd-sns ul li.fb svg { height: 27px;}
#hd .hd-sns ul li.txt:before { content: ''; display: inline-block; width: 28px; height: 1px; background: #000; margin-right: 20px; vertical-align: middle;}
#hd .hd-sns ul li.txt img { display: inline-block; width: 230px; vertical-align: middle;}
#hd .hd-sns ul li a:hover svg { fill: #999;}
@media (max-width: 641px) {
	#hd .hd-sns { padding: 20px;}
	#hd .hd-sns ul li.txt img{ width: 200px;}
}
@media (max-width: 481px) {
	#hd { height: 60px;}
	#hd .hd-sns { display: none; padding: 7px 15px 15px;}
	#hd .hd-sns ul li { margin: 0 6px;}
	#hd .hd-sns ul li.txt{ display: none;}
}


#sp-menu { position: absolute; right: 0; width: 175px; height: 64px; z-index: 100; opacity: 0; top: 0; transform: translate(0,0%);}
#sp-menu.paged {}
#sp-menu div { position: relative; width: 100%; height: 100%;
 transition: 0.3s linear; background: rgba(255,255,255,1);
}
#sp-menu div span { display: block; height: 1px; background: #000;
 position: absolute; left: 40px; transition: 0.4s linear; opacity: 1;
}
#sp-menu div span:nth-of-type(1){ width: 96px; top: 20px;}
#sp-menu div span:nth-of-type(2){ width: 48px; top: 32px;}
#sp-menu div span:nth-of-type(3){ width: 96px; top: 44px;}
#sp-menu.active div span:nth-of-type(1){ transform: translate(0,12px) rotate(20deg);}
#sp-menu.active div span:nth-of-type(2){ transform: translateX(40px); opacity: 0;}
#sp-menu.active div span:nth-of-type(3){ transform: translate(0,-12px) rotate(-20deg);}

body.show #sp-menu {  animation: 1.8s showIn linear 0.5s forwards;}

#sp-menu.fixed { position: fixed; top: 0; transform: translate(0,0%);}
#sp-menu.fixed div { background: rgba(0,0,0,0.9);}
#sp-menu.fixed div span { background: #fff;}
#sp-menu.active { position: fixed;}
#sp-menu.active div { background: rgba(0,0,0,0);}
#sp-menu.active div span { background: #fff;}
#sp-menu.active.top { top: 0; transform: translate(0,0);}
@media (max-width: 1001px) {
	#sp-menu { width: 100px;}
	#sp-menu div { background: rgba(0,0,0,0.9);}
	#sp-menu div span { left: 20px; background: #fff;}
	#sp-menu div span:nth-of-type(1){ width: 60px;}
	#sp-menu div span:nth-of-type(2){ width: 30px;}
	#sp-menu div span:nth-of-type(3){ width: 60px;}
}
@media (max-width: 481px) {
	#sp-menu { position: fixed; top: 0; transform: translate(0,0);/* width: 50px; */ height: 40px;}

	#sp-menu div span:nth-of-type(1){ top: 12px;}
	#sp-menu div span:nth-of-type(2){ top: 19px;}
	#sp-menu div span:nth-of-type(3){ top: 26px;}

	#sp-menu.active div span:nth-of-type(1){ transform: translate(0,7px) rotate(20deg);}
	#sp-menu.active div span:nth-of-type(2){ transform: translateX(20px); opacity: 0;}
	#sp-menu.active div span:nth-of-type(3){ transform: translate(0,-7px) rotate(-20deg);}
}

#gNav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0,0,0,0.85);
 transition: 0.4s linear; z-index: -1; opacity: 0;
}
#gNav .inner{ position: relative; width: 100%; height: 100%;}
#gNav ul.nav { position: absolute; left: 50%; top: 50%; width: 80%; max-width: 230px; transform: translate(-50%,-50%); font-size: 0;}
#gNav ul li { margin: 0 auto 40px;}
#gNav ul li:last-child { margin: 0 auto;}
#gNav ul li img { width: 100%;}
#gNav ul li a { transition: 0.2s linear;}
#gNav ul li a:hover { opacity: 0.7;}

#gNav ul li.sns ul li { display: inline-block; width: 50%; margin: 0 auto; text-align: center;}
#gNav ul li.sns ul li svg { margin: 0 auto; fill: #fff; transition: 0.2s linear;}
#gNav ul li.sns ul li.tw svg { width: 44px;}
#gNav ul li.sns ul li.fb svg { width: 24px;}
#gNav ul li.sns ul li a:hover svg { fill: #ccc;}

#gNav.open { opacity: 1; z-index: 99;}
@media (max-width: 481px) {
	#gNav ul.nav { transform: translate(-50%,-60%);}
	#gNav ul.nav li { width: 75%; margin: 0 auto 30px; }
	#gNav ul li.sns ul li.tw svg { width: 32px;}
	#gNav ul li.sns ul li.fb svg { width: 18px;}
}


.wrap { position: relative; background: #fff; z-index: 2;}


.pagetop { position: fixed; left: 0px; bottom: 0px; width: 175px; z-index: 10;}
.pagetop a { display: block; padding: 18px 0; background: #000; text-align: center;}
.pagetop a img { width: 50%; max-width: 45px;}
@media (max-width: 1001px) {
	.pagetop { width: 100px;}
}
@media (max-width: 481px) {
	.pagetop { width: 50px;}
	.pagetop a { padding: 4px 0;}
}

#ft { background: #000;}
#ft .inner-ft { width: 92%; margin: 0 auto; padding: 50px 0 10px;}
#ft h2 { margin-bottom: 30px; text-align: center;}
#ft h2 img{ width: 50%; max-width: 300px; }
#ft p { color: #fff; text-align: center;}
#ft p.manage { margin-bottom: 20px;}
#ft p.manage img { width: 130px;}
#ft p.copyright { font-size: 10px;}
#ft ul { width: 100%; max-width: 400px; margin: 0 auto 30px; color: #fff; text-align: center;}
#ft ul li { display: block; padding: 5px;}
#ft ul li dl { width: 100%; text-align: left;}
#ft ul li dl dt,
#ft ul li dl dd { display: inline-block; vertical-align: middle;}
#ft ul li dl dt { margin-right: 20px;}
#ft dl.sns { display: table; width: 100%; max-width: 200px; margin: 0 auto 45px; color: #fff; text-align: center;}
#ft dl.sns dt,
#ft dl.sns dd { display: table-cell; vertical-align: middle;}
#ft dl.sns dt { width: 32%; }
#ft dl.sns dt img { width: 100%; max-width: 60px;}
#ft dl.sns dd { text-align: right;}
#ft dl.sns dd.tw { width: 38%;}
#ft dl.sns dd.fb { width: 30%;}
#ft dl.sns dd a svg { fill: #fff; vertical-align: bottom; transition: 0.3s linear;}
#ft dl.sns dd.tw svg { width: 40px;}
#ft dl.sns dd.fb svg { height: 35px;}
#ft dl.sns dd a:hover svg { fill: #aaa;}
@media (max-width: 481px) {
	#ft p.manage img { width: 100px;}
	#ft ul li dl { width: 85%; margin: 0 auto; text-align: center;}
	#ft ul li dl dt,
	#ft ul li dl dd { font-size: 12px;}
	#ft ul li dl dt { margin-right: 10px;}

	#ft dl.sns { max-width: 160px;}
	#ft dl.sns dt img { width: 50px;}
	#ft dl.sns dd.tw svg { width: 23px;}
	#ft dl.sns dd.fb svg { height: 25px;}
}

/* Common parts */
.sct { position: relative; padding-top: 20px;}
.sct .inner-sct { position: relative; z-index: 10;}
.sct .tit { background: url(../img/bg-ptn.png);}
.sct .tit .inner-tit { position: relative; width: 94%; width: calc(100% - 350px); margin: 0 auto; padding: 0 0 40px; background: #fff;}
.sct .tit h2 { position: relative; line-height: 1; text-align: center;}

.sct h3.stl { position: relative; margin-bottom: 90px; text-align: center;}
.sct h3.stl:before,
.sct h3.stl:after { content: ''; display: inline-block; width: 1px; height: 36px; background: #010101;
 position: relative; transform: rotate(45deg); vertical-align: middle;
}
.sct h3.stl span { display: inline-block; margin: 0 30px; vertical-align: middle; font-weight: 400;}
.sct h3.stl br { display: none;}

.btn,
.send-btn { position: relative; margin: 0 auto;}
.btn a { position: relative; display: block; width: 100%; text-decoration: none; text-align: center;}
.btn a:after { content: ''; display: block;; width: 100%; height: 100%; border: solid 1px #000;
 position: absolute; left: 0; top: 0; transition: 0.4s ease; transform: translate(5px,5px); z-index: 1;
}
.btn a span { position: relative; display: block; background: #000; color: #fff;
 transition: 0.4s ease; transform: translate(-5px,-5px); z-index: 2;
}
.btn a span.txt { padding: 25px 0; font-size: 24px; letter-spacing: 0.075rem; line-height: 1.4;}
.btn a span.svg { padding: 20px 0; line-height: 1;}
.btn a span.svg img { width: 60%; max-width: 95px; vertical-align: baseline;}

.btn a:hover:after{ transform: translate(0,0);}
.btn a:hover span { transform: translate(1px,1px); background: #333;}

.send-btn div{ position: relative; display: block; width: 100%; text-align: center;}
.send-btn div:after { content: ''; display: block;; width: 100%; height: 100%; border: solid 1px #000;
 position: absolute; left: 0; top: 0; transition: 0.4s ease; transform: translate(5px,5px); z-index: 1;
}
.send-btn div input { position: relative; display: block; width: 100%; border: none; background: #000;
 transition: 0.4s ease; transform: translate(-5px,-5px); z-index: 2;
 padding: 25px 0; color: #fff; font-size: 24px; letter-spacing: 0.075rem; line-height: 1.4;
 appearance: normal; -webkit-appearance: none;
}
.send-btn div:hover:after{ transform: translate(0,0);}
.send-btn div:hover input { transform: translate(1px,1px); background: #333;}


@media (min-width: 800px) {
  .sct h3.stl { font-size: calc(1.125rem + ((1vw - 8px) * 1)); min-height: 0vw;}
}
@media (max-width: 1001px) {
	.sct .tit .inner-tit { width: calc(100% - 200px);}
}	
@media (max-width: 801px) {
	.sct h3.stl.row { line-height: 1.4;}
	.sct h3.stl.row:before,
	.sct h3.stl.row:after { height: 60px;}
	.sct h3.stl br { display: block;}

	.btn a span.txt { padding: 20px 0; font-size: 18px;}
	.btn a span.svg { padding: 18px 0;}
}
@media (max-width: 641px) {
	.sct h3.stl { margin-bottom: 50px;}
	.sct h3.stl span { font-size: 18px;}
}
@media (max-width: 481px) {
	.sct .tit { background: url(../img/bg-ptn-sp.png); background-size: 8px 8px;}
	.sct .tit .inner-tit { width: calc(100% - 100px); padding: 12px 0px;}
	.sct h3.stl { margin-bottom: 30px;}
	.sct h3.stl:before,
	.sct h3.stl:after { height: 24px; transform: rotate(25deg);}
	.sct h3.stl span { margin: 0 20px; font-size: 16px;}

	.btn a:after{ transform: translate(2px,2px);}
	.btn a span { transform: translate(-2px,-2px);}
	.btn a span.txt { padding: 12px 0; font-size: 15px;}
	.btn a span.svg { padding: 15px 0;}
	
	.send-btn div:after { transform: translate(2px,2px);}
	.send-btn div input { transform: translate(-2px,-2px); padding: 12px 0; font-size: 15px;}
}