@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap');

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;box-sizing:border-box;}
html{font-size:61.5%;}
body{
  font-family: 'Shippori Mincho', "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", "Verdana", sans-serif;
  font-size:1.6rem;
  color:#000;
  line-height:inherit;
  -webkit-text-size-adjust:100%;
  max-width:100%;
  min-width:320px;
  min-height: 740px;
  letter-spacing:0.02em;
  position: relative;
  font-weight: 500;

}
h1, h2, h3, h4, h5, h6{font-size:inherit;font-weight: normal;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
ul{list-style:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,q:before, q:after{content:'';content:none;}
li{list-style-type:none;}
ins{text-decoration:none;}
mark{font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;margin:1em 0;padding:0;border:0;border-top:1px solid #ccc;}
input, select{box-sizing:border-box;}
input,textarea{font-family:inherit;box-sizing:border-box;}
input:focus,textarea:focus,select:focus{outline:0;}
button{font-family:inherit;background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;appearance:none;box-sizing:border-box;}
button::-moz-focus-inner{border:0;}
input:placeholder-shown{color:#ccc;}
input::-webkit-input-placeholder{color:#ccc;}
input:-moz-placeholder{color:#ccc;opacity:1;}
input::-moz-placeholder{color:#ccc;opacity:1;}
input:-ms-input-placeholder{color:#ccc;}
img{border:none;vertical-align:bottom;max-width:100%;width: auto; height:auto;}
small{font-size:75%;}
a{color:#000;margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;box-sizing:border-box;outline:none;transition:.3s ease;display: inline-block;}
a[href^="tel:"]{cursor:text;}
a:hover{text-decoration:none;opacity: .7;}
.clearfix:after{content:"";clear:both;display:block;}
p {line-height: 1.6;}
p + p{margin-top:1em;}


/* =========================================================== */
/* header */
/* =========================================================== */
header {position: absolute;top: 0;left: 0;width: 300px;z-index: 1000;}
header h1 {width: 200px;margin: 50px auto;transition: .3s; }
header nav {text-align: center;}
header nav .logo {display: none;}
header nav a {text-decoration: none;font-size: 2.4rem;padding: .4em 0;}
header nav a:hover {color: #c30d23;opacity: 1;}

/* nav-btn */
header .nav-btn{display:none;cursor:pointer;width:60px;height:60px;position:fixed;right:0;top:0;z-index:1001;user-select:none;transition:.4s ease;background-color: #c30d23;}
header .nav-btn span{display:block;background:#fff;width:24px;height:2px;position:absolute;top:30px;left:18px;transition:background .4s ease;}
header .nav-btn span:nth-of-type(1){-webkit-transform:translateY(-8px) rotate(0);transform:translateY(-8px) rotate(0);}
header .nav-btn span:nth-of-type(2){opacity:1;}
header .nav-btn span:nth-of-type(3){-webkit-transform:translateY(8px) rotate(0);transform:translateY(8px) rotate(0);}
header .nav-btn.active span{background:#fff;}
header .nav-btn.active span:nth-of-type(1){-webkit-animation:active-menu-bar01 .75s forwards;animation:active-menu-bar01 .5s forwards;}
header .nav-btn.active span:nth-of-type(2){opacity:0;}
header .nav-btn.active span:nth-of-type(3){-webkit-animation:active-menu-bar02 .75s forwards;animation:active-menu-bar02 .5s forwards;}
@keyframes active-menu-bar01 {0%{-webkit-transform:translateY(-8px) rotate(0);transform:translateY(-8px) rotate(0);}50%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);}100%{-webkit-transform:translateY(0px) rotate(45deg);transform:translateY(0px) rotate(45deg);}}
@keyframes active-menu-bar02 {0%{-webkit-transform:translateY(8px) rotate(0);transform:translateY(8px) rotate(0);}50%{-webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);}100%{-webkit-transform:translateY(0px) rotate(-45deg);transform:translateY(0px) rotate(-45deg);}}

@media screen and (max-width: 1200px) {
  header{width: 240px;}
  header h1 {width: 160px;}
}
@media screen and (max-width: 999px) {
  header{width: 100%;}
  header h1 {width:60%;height: 80vh;display: flex;align-items: center;justify-content: center;}
  header nav {position: fixed;top: 0;right: 0;width: 100%;height: 100vh;background: url(../img/top/bg-img-gray.png) #fff;text-align: right;padding: 80px 6%;text-align: center;opacity: 0;pointer-events: none;overflow-y: scroll;}
  header nav.active {animation: nav-anime .2s ease-in-out forwards;pointer-events: auto;}
  header nav .logo {display: block;width: 150px;margin: 0 auto 20px}
  header nav a {font-size: 4rem;}
  header .nav-btn {display: block;}
  
  @keyframes nav-anime {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }
}
@media screen and (max-width: 400px) {
  header nav .logo {width: 100px;}
  header nav a {font-size: 3rem;}
}

/* =========================================================== */
/* footer */
/* =========================================================== */
footer {}


/* =========================================================== */
/* copyright */
/* =========================================================== */
.copy {text-align: center; font-size: 10px; margin: 30px 0;}




/* =========================================================== */
/* contents */
/* =========================================================== */
.contents {padding-bottom: 100px;}
.inner {max-width: 1260px;margin: 0 auto;padding: 0 40px;}
.pc {display: block;}
.sp {display: none;}
.text-indent {text-indent: -1em;margin-left: 1em;}
.text-center {text-align: center;}
.text-left {text-align: left;}
.text-right {text-align: right;}

/* btn */
[class^="btn-"],[class*=" btn-"] {text-decoration: none;padding: 15px 10px;position: relative;box-sizing: border-box}
[class^="btn-"]:hover,[class*=" btn-"]:hover {opacity: 1;}

.btn-black {color: #fff;background-color: #000;}
.btn-black:hover {background-color: #666;}
.btn-black-border {border: 1px solid #000;}
.btn-black-border:hover {background-color: #fff;}


/* =========================================================== */
/* for tablet */
/* =========================================================== */
@media screen and (max-width: 999px) {
  html{font-size:56%;}
}
/* =========================================================== */
/* for sp */
/* =========================================================== */
@media screen and (max-width: 767px) {
  html{font-size:50%;}
  .inner {padding: 0 6%;}
  .pc {display: none;}
  .sp {display: block;}
  
  .contents {padding-bottom: 0;}
}


/* =========================================================== */
/* for animation */
/* =========================================================== */
.animation {opacity: 0;}

/* common */
.fade_in.animated {animation: fade_in 1.5s cubic-bezier(0.600, 0.000, 0.000, 1.000) 0s 1 forwards;}
.slide_in_bottom.animated {animation: slide_in_bottom 1.5s cubic-bezier(0.600, 0.000, 0.000, 1.000) 0s 1 forwards;}
.slide_in_left.animated {animation: slide_in_left 1.5s cubic-bezier(0.600, 0.000, 0.000, 1.000) 0s 1 forwards;}
.slide_in_right.animated {animation: slide_in_right 1.5s cubic-bezier(0.600, 0.000, 0.000, 1.000) 0s 1 forwards;}
.img_in.animated {animation: img_in .5s cubic-bezier(.445,.05,.55,.95) 0s 1 forwards;}

@keyframes fade_in {
	0% {opacity: 0;}
	100% {	opacity: 1;	}
}
@keyframes slide_in_bottom {
	0% {	transform: translateY(10px); opacity: 0;}
	100% {	transform: translateY(0px);	opacity: 1;	}
}
@keyframes slide_in_left {
	0% {	transform: translateX(-10px); opacity: 0;}
	100% {	transform: translateX(0px);	opacity: 1;	}
}
@keyframes slide_in_right {
	0% {	transform: translateX(10px); opacity: 0;}
	100% {	transform: translateX(0px);	opacity: 1;	}
}
@keyframes img_in {
  0% {opacity: 0; transform: scale(1.05)}
  100% {opacity: 1;	transform: scale(1)}
}