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


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

/* body ----------*/
body {
/*  font-family:'Noto Sans Japanese',yugothic,yu gothic,'游ゴシック',hiragino kaku gothic pron,meiryo,sans-serif;*/
  font-family:"Hiragino Sans","Hiragino Sans W5", "ヒラギノ角ゴ W5", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-size:1.6rem;
  line-height:1.6;
  color:#231815;
  
}

/*body.nav-open { overflow:hidden; }*/

/* html remを使用する場合----------*/
html { font-size:62.5%; overflow-x:hidden; }
@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); }
.speed1-5s { transition:all 1.5s ease-out; }
.speed2s { transition:all 2s ease-out; }
.speed2-5s { transition:all 2.5s ease-out; }
.speed3s { transition:all 3s ease-out; }
.delay5 { transition-delay:0.5s; }
.delay10 { transition-delay:1s; }
.delay15 { transition-delay:1.5s; }
.fade.active {
  transform:translate(0,0)!important;
  opacity:1!important;
}

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

/* responsive -----*/
.pc-only { display:block!important; }
.pc { 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:820px){
  .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:10000; top:0; left:0; display:flex; width:100%; background:rgb(255,255,255,.75); }
header #logo { margin-left:20px; max-width:23rem; width:100%; padding:5px 0; margin-right:auto; }
header ul { display:flex; justify-content:space-between; align-items:center; max-width:82rem; flex-grow:1; }
header ul li { font-size:1.8rem; display:flex; align-items:center; letter-spacing:0.06em; height:100%; }
header ul li a { display:block; padding:0 20px; }
header ul li.contact { max-width:14rem; width:14rem; background:#C30D23; color:#fff; }
header ul li.contact a { padding:0; height:100%; width:100%; display:flex; justify-content:center; align-items:center; text-align:center; }
.nav-open header { background:none; }

/* sp-menu */
#sp-menu , nav , .sp-btn-area { display:none; }
#sp-menu { position:relative; right:1rem; top:1rem; display:none; width:5rem; height: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:0;
  left:0;
  background:rgba(239,239,239,.5);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  text-align:center;
  width:100%;
  transform:translateY(-120%);
  transition:all .6s ease-in-out;
  z-index:9999;
  display:block;
  padding-top:7rem;
}
#nav.active { opacity:1; transform:translateY(0%); }
#nav ul { margin:4rem; }
#nav ul li { border-bottom:solid 1px #898989; font-size:1.8rem; }
#nav ul li:first-child { border-top:solid 1px #898989; }
#nav ul li:last-child { border:none; margin-top:3rem; background:#c30d23; color:#fff; }
#nav ul li a { display:block; padding:2rem 0; }
#nav ul li a p { font-size:80%; }
#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;
}


@media screen and (max-width:1024px){
  #sp-menu { display:block; }
  header { height:7rem; }
  header ul { display:none; }
}



footer { border-top:solid 1px #898989; padding-top:4rem; }
footer .f_menu { display:flex; justify-content:space-between; max-width:62rem; margin:0 auto; }
footer .f_menu li {  }
footer .f_menu li { font-size:18px; text-align:center; letter-spacing:0.06em; }
footer .f_menu li a { display:block; padding:0 10px; }
footer .f_menu li a p { font-size:14px; }
footer .btn { max-width:30rem; width:100%; margin:0 auto 10rem; }
footer .btn a { display:block; text-align:center; background:#C30D23; color:#fff; padding:2rem 0; }
footer .f_logo { max-width:28rem; margin:6rem auto 4rem; }
footer copyright { display:block; margin-bottom:2rem; text-align:center; }

@media screen and (max-width:600px){
  footer .f_menu { flex-wrap:wrap; justify-content:center; }
  footer .f_menu li { font-size:3.2vw; white-space:nowrap; width:23%; }
  footer .f_menu li:nth-of-type(n+5) { margin-top:1rem; }
  footer .f_menu li a p { font-size:80%; }
  footer .f_logo { margin-top:4rem; }
  footer .btn { margin-bottom:5rem; }
}