@charset "utf-8";
/*-----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, 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,
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%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section , main {
	display: block;
}

ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: 100%; height: auto; vertical-align:top; image-rendering: -webkit-optimize-contrast; }

* { min-height: 0; min-width: 0; }
*:focus {outline: none; }
body { line-height:1; margin:0; padding:0; height:100%; font-family:'Shippori Mincho', serif; color:#333; }

li,a,p { font-size:15px; font-weight:500; color:#333; text-decoration:none; }

.js-fadeUp{ opacity:0; transform: translateY(30px); transition: opacity .5s, transform .5s; }
.js-fadeUp.is-inview { opacity: 1; transform: translateY(0); transition-delay: .3s; }
.js-fadeUp.delay1.is-inview { transition-delay: .6s; }
.js-fadeUp.delay2.is-inview { transition-delay: .9s; }
.js-fadeUp.delay3.is-inview { transition-delay: 1.2s; }
.js-fadeUp.delay4.is-inview { transition-delay: 1.5s; }
.js-fadeUp.delay5.is-inview { transition-delay: 1.8s; }

[data-text="small"]{ font-size:13px; line-height:26px; }
[data-font="gothic"]{ font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-weight:bold; }

/*----------------
header
-----------------*/
header{ background:rgba(0,0,0,0.8); width:100%; height:100px; padding:0 3%; box-sizing:border-box; position:fixed; top:0; left:0; z-index:5; transition:all 0.3s; display:flex; align-items:center; }
header.fix{ background:rgba(255,255,255,0.7); }
header .logo { width:46px; }
header .logo img.fix_logo{ display:none; }
header.fix .logo img.fix_logo{ display:block; }
header .logo img.logo{ display:block; }
header.fix .logo img.logo{ display:none; }
header > div{ width:100%; display:flex; align-items:center; justify-content:space-between; }
header div .menu{ display:flex; align-items: center; }
header div .menu li a{ color:#fff; margin-right:40px; position:relative; padding-bottom:5px; }
header.fix div .menu li a{ color:#333; }
header div .menu li:nth-of-type(7) a img { width: 50px; }
header div .menu li:nth-of-type(7) a:hover::after{ display: none; }
header.fix div .menu li:nth-of-type(7) a img { opacity: 0; position: relative; }
header.fix div .menu li:nth-of-type(7) a::before { content: ""; position: absolute; width: 50px; height: 50px; background: #333; -webkit-mask: url(../img/ic_insta.svg) no-repeat; mask: url(../img/ic_insta.svg) no-repeat; -webkit-mask:mask-size 100% auto; mask:mask-size 100% auto; }

header div .menu li:nth-of-type(8) a{ padding: 15px 0; width: 200px; display: block; text-align: center; border: 1px solid #fff; border-radius: 35px; margin:0; overflow:hidden; position: relative; will-change: transform; }
header div .menu li:nth-of-type(8) a:hover{ color:#808080; }
header div .menu li:nth-of-type(8) a::before{ transition: 1s all; content: ''; position: absolute; border-radius: 35px; top: 0; left: 0; z-index: -1; background: #fff; width: 100%; height: 100%; transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform: scale(0, 1); transform-origin: right top; }
header div .menu li:nth-of-type(8) a:hover::before{ z-index:-1; transform-origin: left top; transform: scale(1, 1); }

header.fix div .menu li:nth-of-type(8) a{ border: 1px solid #333; }
header.fix div .menu li:nth-of-type(8) a:hover{ color:#fff; }
header.fix div .menu li:nth-of-type(8) a::before{ background:#808080; }

header div .menu li a:not(.h_btn)::after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#fff; transition:all .3s; transform:scale(0, 1); transform-origin:left top; }
header.fix div .menu li a:not(.h_btn)::after{ background:#333; }
header div .menu li a::after,header div .menu li a:hover::after{ transform: scale(1, 1); }

/*----------------
footer
-----------------*/
footer{ color:#fff; }
footer .footer_inner{ max-width:1000px; width:90%; margin:0 auto; padding:100px 0; display: flex; justify-content: space-between; flex-wrap: wrap; }
footer .footer_topleft{ display:flex; max-width: 290px; width: 38%; }
footer .footer_topleft > div{ margin-left:10px; }
footer .footer_topleft .industry{ font-size:10px; }
footer .footer_topleft h2{ padding:0 0 11px; margin-bottom:10px; border-bottom:1px solid #707070; }
footer .footer_topleft h2 img { width: 176px; }
footer .footer_topleft address{ color:#333; font-size:12px; line-height:20px; }
footer ul{ display:flex; justify-content: space-between; max-width: 432px; width: 60%; }
footer ul li{ width:200px; height:120px; overflow:hidden; }
footer ul li a{ display:block; position:relative; }
footer ul li a img{ transition:0.5s all; }
footer ul li a:hover img{ transform:scale(1.2,1.2); transition:0.5s all; }
footer li a span{ position: absolute; color: #fff; top: 0; left: 0; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; }
footer .footer_bottom { display:flex; justify-content:space-between; align-items:center; width: 100%; border-top:1px solid #707070; margin-top:20px; padding-top:20px; }
footer .footer_bottom .contact{ display:flex; align-items:center; }
footer .footer_bottom .tel{ font-size:30px; margin-right:28px; }
footer .footer_bottom .contact_btn{ position:relative; display:inline-block; width:200px; text-align:center; border-radius:30px; padding:15px 0; border:1px solid #333; }
footer .footer_bottom .contact a span{ position:relative; z-index:3; }
footer .footer_bottom .footer_menu a{ margin-left:70px; position:relative; padding-bottom:5px; }
footer .footer_bottom .footer_menu a::after{ content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #333; transition: all .3s; transform: scale(0, 1); transform-origin: left top; }

footer .footer_bottom .contact a.contact_btn{ overflow:hidden; position: relative; will-change: transform; }
footer .footer_bottom .contact a.contact_btn:hover{ color: #fff; transition: 1s all; }
footer .footer_bottom .contact a.contact_btn:before{ transition: 1s all; content: ''; position: absolute; border-radius: 50px; top: 0; left: 0; z-index: 2; background: #A8A897; width: 100%; height: 100%; transition:transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s; transform:scale(0, 1); transform-origin:right top; }
footer .footer_bottom .footer_menu a:hover::after{ transform: scale(1, 1); }
footer .footer_bottom .contact a.contact_btn:hover::before{ transform-origin: left top; transform: scale(1, 1); }
footer .copyright{ font-size:12px; text-align:center; color:#333; }
footer .copyright a{ font-size:12px; }

.pc{ display:block; }
.sp{ display:none; }

@media (min-width: 768px) and (max-width: 1400px){
	header{ height:85px; }
	header .logo{ width:40px; }
	header div .menu li:nth-of-type(7) a img{ width:43px; }
}

/*タブレット横*/
@media screen and (max-width:1024px) {
	header div .menu li a{ font-size:13px; margin-right:25px; }
	header div .menu li:nth-of-type(7) a{ width: 180px; }
	footer .footer_bottom .tel{ font-size:23px; }
	footer .footer_bottom .footer_menu a{ margin-left:25px; }
}

/*タブレット縦-スマホ*/
@media screen and (max-width:768px) {
	header{ height:80px; }
	header::before { display:none; }
	header .logo{ width:38px; position:relative; z-index:6; }
	.open header.fix .logo img.logo{ display:block; }
	.open header.fix .logo img.fix_logo{ display:none; }
	header div{ display:block; }
	header #nav-toggle{ position:fixed; z-index:6; top:29px; right:20px; height:34px; cursor:pointer; }
	header #nav-toggle > div{ position:relative; width:30px; }
	header #nav-toggle span{ width:100%; height:4px; left:0; display:block; background:#fff; position:absolute; transition:transform .6s ease-in-out, top .5s ease; }
	header.fix #nav-toggle span{ background:#333; }
	.open header.fix #nav-toggle span{ background:#fff; }
	.open header.fix #nav-toggle span:nth-of-type(2){ background:transparent; }
	header #nav-toggle span:nth-child(1){ top:0; }
	header #nav-toggle span:nth-child(2){ top:7.5px; background:transparent; }
	header #nav-toggle span:nth-child(3){ top:15px; }
	.open header #nav-toggle span:nth-child(1){ top: 13px; transform:rotate(45deg); }
	.open header #nav-toggle span:nth-child(3){ top: 13px; transform: rotate(-45deg); }
	header #global-nav{ background:rgba(0,0,0,0.8); color:#fff; position:fixed; top:0; left:0; right:0; bottom:0; z-index:5; display: flex; visibility: hidden; flex-direction: column; justify-content:center; font-size:29px; opacity:0; transition:opacity .6s ease, visibility .6s ease; width:100%; }
	.open header #global-nav{ visibility:visible; opacity:1; }
	header #global-nav nav{ width:90%; }
	header div .menu{ flex-direction: column; }
	header div .menu li{ width:100%; }
	header div .menu li:nth-of-type(7){ margin-top:30px; padding-top:50px; border-top:1px solid #fff; }
	header div .menu li:nth-of-type(7) a { padding: 0; margin: 0 auto 30px auto; }
	header.fix div .menu li:nth-of-type(7) a img { opacity: 1; }
	header.fix div .menu li:nth-of-type(7) a::before { display: none; }
	header div .menu li a{ margin: 0; font-size: 15px; line-height: 22px; padding: 20px 0; display: block; text-align:center; }
	header div .menu li a.sp_tel{ font-size:30px; line-height:30px; }
	header div .menu li:nth-of-type(8) a,header.fix div .menu li:nth-of-type(8) a{ margin:0 auto; border:1px solid #fff; width: 200px; }
	header.fix div .menu li a{ color:#fff; }
	

	footer .footer_inner { padding:0 0 45px 0; width:100%; }
	footer .footer_topleft{ order: 10; margin: 0 auto; width: 100%; }
	footer ul { order: 1; max-width: initial; width: 100%; }
	footer ul li{ width:50%; height:auto; }
	footer ul li:first-of-type{ margin:0; }
	footer .footer_bottom{ border: none; padding:0; order: 2; flex-direction: column; margin: 0; }
	footer .footer_bottom .footer_menu { width:100%; padding:35px 0 0 0; margin-bottom: 50px; }
	footer .footer_bottom .footer_menu::after { content: ""; display: block; width: 90%; height: 1px; background: #707070; margin: 35px auto 0 auto; }
	footer .footer_bottom .footer_menu a::after{ display: none; }
	footer .footer_bottom .footer_menu a { display: block; padding: 35px 0; margin: 0; font-size:14px; text-align: center; }
	footer .footer_bottom .industry{ font-size:10px; }
	footer .footer_bottom h2{ color:#000; font-size:18px; padding:8px 0 11px; border-bottom:1px solid #707070; margin-bottom:10px; }
	footer .footer_bottom .contact{ flex-direction:column-reverse; width:100%; }
	footer .footer_bottom .tel{ line-height:45px; padding:40px 0 50px; margin-left: auto; margin-right: auto; }
	
	.pc{display:none;}
	.sp{display:block;}
}