@charset "utf-8";
@import url("reset.css");
@import url("https://use.fontawesome.com/releases/v5.15.4/css/all.css");
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/*============================================================
common
============================================================*/

/* body ----------*/
body {
  font-family:'Noto Serif JP', 'Noto Serif',"游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  /*font-family:'Noto Sans Japanese',yugothic,yu gothic,'游ゴシック',hiragino kaku gothic pron,meiryo,sans-serif;*/
  font-size:1.6rem;
  line-height:1.6;
  color:#231815;
}
main { overflow:hidden; }
.font_goth { font-family:'Noto Sans Japanese',yugothic,yu gothic,'游ゴシック',hiragino kaku gothic pron,meiryo,sans-serif; }
.font_min {}

body.nav-open { overflow:hidden; }

/* html remを使用する場合----------*/
html { font-size:62.5%; }
@media screen and (max-width:720px) {
	html { font-size:56.3%; }
}
@media screen and (max-width:560px) {
	html { font-size:50%; }
}

/* a ----------*/
a { text-decoration:none; transition:all 0.3s ease-out; }
a:link, a:visited { transition:all 0.3s ease-out; }
a:hover, a:active { opacity:0.6; }
a.no-link { pointer-events:none; position:relative; }
a.no-link:after { content:""; display:block; position:absolute; width:100%; height:100%; top:0; background:rgba(255,255,255,.8); }
nav a.no-link { color:rgba(0,0,0,.4); }
nav a.no-link:after { background:rgba(229,237,238,.3); }
footer a.no-link:after { background:rgba(239,239,239,.8); }
@media screen and (min-width:820px) {
	a[href^="tel:"] { pointer-events: none; }
}

/* ul ----------*/
ul { list-style:none; }

/* img ----------*/
img { width:auto; max-width:100%; }

/* small ----------*/
small { display: inline-block; font-size:80%; font-weight:normal; vertical-align:baseline; opacity:0.7; }

/* table ----------*/
table { border-collapse: collapse; border-spacing: 0; }
.table { width:100%; border:solid 1px #DDD; }
.table tr {}
.table th { padding:1rem; background-color:#f6f6f6; vertical-align:middle; }
.table td { padding:1rem; vertical-align:middle; }

/* text-align ----------*/
.tc { text-align:center; }
.tr { text-align:right; }
.tl { text-align:left; }

/*============================================================
common parts
============================================================*/
.inner { max-width:124rem; width:100%; margin:0 auto; padding:0 2rem; }

/* scroll area */
.scroll { overflow:auto; white-space:nowrap; }
.scroll::-webkit-scrollbar{ height:5px; }
.scroll::-webkit-scrollbar-track{ background:#969696; }
.scroll::-webkit-scrollbar-thumb { background:#242424; }
.tc { text-align:center; }

/* fade animation ----------*/
.fade { opacity:0; transition:all 1s ease-out; }
.fade-left { transform:translateX(-100%); }
.fade-right { transform:translateX(100%); }
.fade-up { transform:translateY(100px); }
.fade-down { transform:translateY(-100px); }
.fade.active {
  transform:translate(0,0)!important;
  opacity:1!important;
}
.blur { opacity:0; }
.blur.active { animation:blurIn 1.6s; opacity:1; }
@keyframes blurIn {
  0% {
    opacity:0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }
  100% {
    opacity:1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}

/* title -----*/
h1 {}
h2 {}
h3 {}
h4 {}

/* responsive -----*/
.pc-only { display:block!important; }
.pc,.pcmid { display:block!important; }
.mid-only { display:none!important; }
.mid { display:none; }
.sp-only { display:none!important; }
.min-only { display:none!important; }
@media screen and (max-width:1024px){
  .pcmid { display:none!important; }
}
@media screen and (max-width:768px){
  .pc-only { display:none!important; }
  .mid-only { display:block!important; }
  .mid { display:block!important; }
}
@media screen and (max-width:600px){
  .pc , .pc-only , .mid-only { display:none!important; }
  .sp-only { display:block!important; }
}
@media screen and (max-width:375px){
  .min-only { display:block!important; }
}

/*============================================================
contents parts
============================================================*/

/* header ----------*/
header { position:fixed; z-index:9999; }
header h1 { max-width:10rem; margin:2rem; }

/* sp-menu */
#sp-menu , nav , .sp-btn-area { display:none; }
#sp-menu { position:relative; right:0; top:0; display:none; width:4.5rem; height:4.5rem; cursor:pointer; text-align:center; }
#sp-menu div { position: relative; display: block; width: inherit; height: inherit; }
#sp-menu div:after, #sp-menu span:before, #sp-menu span:after { 
  position: absolute;
  left:50%;
  content: "";
  display: block;
  width:80%;
  height:3px;
  background-color:#242424;
  transform:translateX(-50%);
  transition: all 0.3s ease-out;
}
#sp-menu div:after { top:0%; }
#sp-menu span:before { top:25%; }
#sp-menu span:after { top:50%; }
#sp-menu p { position:absolute; bottom:0; left:50%; transform:translateX(-50%); font-size:1.2rem; line-height:1; }
#sp-menu.open div:after { top:calc(25% - 1.5px); -webkit-transform:translateX(-50%) rotate(135deg); transform:translateX(-50%) rotate(135deg); }
#sp-menu.open span:before { opacity: 0; }
#sp-menu.open span:after { top: calc(25% - 1.5px); -webkit-transform:translateX(-50%) rotate(-135deg); transform:translateX(-50%) rotate(-135deg); }

#nav {
  position:fixed;
  top:7rem;
  left:0;
  background:rgba(239,239,239,.9);
  text-align:center;
  width:100%;
  height:100vh;
  transform:translateX(100%);
  transition:all .6s ease-in-out;
  z-index:9999;
  display:block;
}
#nav.active { opacity:1; transform:translateX(0%); }
#nav ul { margin:2rem; }
#nav ul li { border-bottom:solid 1px #242424; }
#nav ul li a { display:block; padding:1rem 0; }
#nav ul li a span { display:block; }
#nav .flex { display:flex; justify-content:center; margin:2rem 2rem 0; }
#nav .flex p { display:inline-block; padding-left:4rem; line-height:1; }
#nav .flex p a { position:relative; display:block; }
#nav .flex p a:before { 
  content:"";
  display:block;
  position:absolute;
  top:50%;
  left:-1.8rem;
  transform:translate(0,-50%);
  -webkit-transform:translate(0,-50%);
  width:1.5rem;
  height:1.5rem;
  border:solid 1px #242424;
  border-radius:50%;
  margin:auto;
  vertical-align:middle;
}
#nav .flex p a:after {
  content:"";
  width:0.5rem;
  height:0.5rem;
  border-top: 1px solid #242424;
  border-right: 1px solid #242424;
  position:absolute;
  top:45%;
  left:-1.6rem;
  transform: rotate(45deg) translate(0,-50%);
  -webkit-transform: rotate(45deg) translate(0,-50%);
  vertical-align:middle;
}