@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600&display=swap');

/* ==============================
/* common
============================== */
body {font-size: 16px; font-family: 'Noto Sans JP',"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt30 {margin-top: 30px;}
.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.mb60 {margin-bottom: 60px;}
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb40 {padding-bottom: 40px;}
.pb50 {padding-bottom: 50px;}
.pb60 {padding-bottom: 60px;}

.fas-n:before, .fas-a a:before {font-family: "Font Awesome 5 Free"; font-weight: 900;}

body.sub main h1 {margin-bottom: 30px; font-size: 2.2rem; font-weight: bold;}

/* ふわっと登場
-------------------------*/
/* 画面外 */
.sblock {
  opacity: .1;
  transition: all 1.5s;
}
/* 画面に入った時の動き */
.sblock.blockIn {
  opacity: 1;
}

/* ==============================
/* header
============================== */
.header {background-color: #cc0001; color: #fff;}
.header.fixed {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
}
.headerIn {
  display: flex;
  justify-content: space-between;
}
.header .logo {max-width: 180px; margin-left: 10px; padding: 13px 10px 10px;}




/* ==============================
/* nav
============================== */

/* ==============================
/* main
============================== */
body.sub .wrapper {max-width: 1000px; width: 95%; margin: 30px auto;}
ol.breadcrumbs {margin-bottom: 20px;}
ol.breadcrumbs li {display: inline-block;}
ol.breadcrumbs li:not(:first-child)::before {padding: 0 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f054';}
/* ol.breadcrumbs li:first-child {margin-left: 0; padding-left: 0;} */

div.secBox {width: 95%; margin: 80px auto;}
div.secBox .mBtn {text-align: right;}
div.secBox .mBtn a {position: relative; display: inline-block; margin-top: 10px; padding-left: 5px; font-weight: bold; letter-spacing: 5px;}
div.secBox .mBtn a::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: #333;
    transition: .3s;
}


/* ==============================
/* footer
============================== */
.footer {padding: 25px 10px 20px; background-color: #efefef;}
.footerIn {display: flex; justify-content: space-around;}
.footer h3 {margin-bottom: 10px; font-weight: bold; font-size: 1.5em;}
.footer .address {line-height: 1.2; margin-bottom: 20px;}
.footer .telArea {margin-bottom: 20px; padding: 10px; background-color: #fff; border: #cc0001 1px solid; color: #cc0001; text-align: center;}
.footer .telArea p {margin-bottom: 10px;}
.footer .telArea p:last-child {margin-bottom: 0;}
.footer .tel {font-size: 1.8em; font-weight: bold;}
.footer .mail + p {font-size: 12px;}
.footer .mail a {display: block; margin-bottom: 20px; padding: 10px; background-color: #535353; color: #fff; font-weight: bold; text-align: center;}
.footer .mail a:before {padding-right: 10px; content: '\f0e0';}
.footer .mail a:hover {background-color: #fff; color: #333; transition : 0.6s;}
.footer .map {width: 47%;}
.footer .map iframe {min-height: 280px;}
.footer .ftlink a {display: block;}
.footer .ftlink a::before {padding-right: 5px; content: '\f054';}
footer .copyright {padding: 15px 0; background-color: #000; color: #fff;}
footer .copyright small {display: block; text-align: center;}



/* ==============================
/* レスポンシブ
============================== */
/* == PC == */
/* @media (min-width: 1080px) {}
@media (max-width: 999px) {}
@media (max-width: 896px) {} */
@media (min-width: 767px) {
  .sp {display: none;}
  .headerIn, main .wrapper, .footerIn {max-width: 1080px; margin: 0 auto;}
  .headerIn .sp-menu {display: none;}
  /* nav
  ----------------------------- */
  .headerIn nav dl {display: flex; max-width: 800px; padding: 28px 0;}
  .headerIn nav dl dt {padding: 0 20px;}
  .headerIn nav dl dt a {position: relative; display: inline-block;}
  .headerIn nav dl dt a::after {
    position: absolute;
    bottom: -10px;
    left: 0;
    content: '';
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: .3s;
  }
  a:hover::after {width: 100% !important;}

  /* main
  ----------------------------- */
  main .wrapper {margin: 10px auto;}
}
/* == タブレット == */
@media (max-width: 767px) {
  body.sub main h1 {font-size: 2.0rem;}
 
  /* nav
  ----------------------------- */
  /*　ハンバーガーボタン　*/
  .sp-menu {
    display : block;
    position: fixed;
    z-index : 3;
    right : 13px;
    top   : 12px;
    width : 42px;
    height: 42px;
    cursor: pointer;
    text-align: center;
  }
  .sp-menu span {
    display : block;
    position: absolute;
    width   : 30px;
    height  : 2px ;
    left    : 6px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
  }
  .sp-menu span:nth-child(1) {
    top: 10px;
  }
  .sp-menu span:nth-child(2) {
    top: 20px;
  }
  .sp-menu span:nth-child(3) {
    top: 30px;
  }

  /* ナビ開いてる時のボタン */
  .sp-menu.active span:nth-child(1) {
    top : 16px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform   : rotate(-45deg);
    transform        : rotate(-45deg);
  }

  .sp-menu.active span:nth-child(2),
  .sp-menu.active span:nth-child(3) {
    top: 16px;
    -webkit-transform: rotate(45deg);
    -moz-transform   : rotate(45deg);
    transform        : rotate(45deg);
  }
  nav {
    position: fixed;
    z-index: 2;
    top: 0;
    right: 0;
    color: #000;
    background: #fff;
    text-align: center;
    transform: translateX(100%);
    transition: all 0.6s;
    width: 100%;
  }
  nav .tit {
    padding: 20px 0;
    background-color: #666;
    color: #fff;
  }
  nav dl {
    background: #ccc;
    margin: 0 auto;
    padding: 10px 0;
    width: 100%;
  }

  nav dl dt {
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px solid #fff;
  }
  nav dl dt:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
  nav dl dt:hover{
    background :#ddd;
  }

  nav dl dt a {
    display: block;
    color: #000;
    padding: 1em 0;
    text-decoration :none;
  }

  /* このクラスを、jQueryで付与・削除する */
  nav.active {
    transform: translateX(0%);
  }

  /* main
  ----------------------------- */
  main .wrapper {margin-top: 10px;}
  
  /* footer
  ----------------------------- */
  .footerIn {display: block;}
  .footerIn div:first-child {width: 80%; margin: 10px auto;}
  .footerIn div:nth-child(n+3) {text-align: center;}
  .footer .address {text-align: left;}
  .footer .map {width: 100%;}
  
  .footer .contact a {
    position: fixed;
    right: 5px;
    bottom: 30px;
    display: block;
    width: 80px;
    height: 80px;
    padding: 10px;
    background-color: #cc0001;
    border-radius: 50%;
    color: #fff;
    filter: drop-shadow(0 0 0.75rem #666);
    font-size: 10px;
    text-align: center;
  }
  .footer .contact li a::before {display: block; content: '\f095'; padding-bottom: 4px; font-size: 2.0rem;}
  
 .footer .contact.hdn, body#contact .footer .contact {opacity: 0; transition: all 1.0s;}
}
/* @media (max-width: 736px) {}
@media (max-width: 640px) {}
@media (max-width: 568px) {} */
/* == SP == */
@media (max-width: 479px) {
		body {font-size: 14px;}
  .pc {display: none;}
  body.sub main h1 {font-size: 1.6rem;}
  /* footer
  ----------------------------- */
  .footerIn div:first-child {width: 90%;}
}
@media (max-width: 414px) {}
@media (max-width: 375px) {}
@media (max-width: 360px) {}
@media (max-width: 320px) {}