@charset "UTF-8";
/* CSS Document */

/********************/
/******** sp ********/
/********************/

body {
  color: #444;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
  font-size: .9rem;
  line-height: 1.7em;
  letter-spacing: 1px;
}
body a {
  color: #000;
  text-decoration: none;
}
body a:hover {
  opacity: 0.4;
  color: #000;
  text-decoration: none;
}
li {
  list-style: none;
}
.w-1000 {
  max-width: 95%;
}
.page-content-title h3 {
  font-size: 1.2rem;
  font-family: 'Ryumin Light KL';
  letter-spacing: .4rem;
}
.page-content-title span {
  font-size: .8rem;
  font-family: 'Ryumin Light KL';
  letter-spacing: .1rem;
  color: #b5b4b8;
}

.ITC {
  font-family: "itc-avant-garde-gothic-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}

#banner img {
  border: solid #ddd 1px;
}
i {
  font-size: 130%;
}

.img-cover img {
  width: 100%;
  height: 100%!important;
  object-fit: cover;
  font-family: "object-fit: cover;";
}
.img-contain img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  font-family: "object-fit: contain;";
}
/* ========
  text-color
================ */
.black { color: #333333;}
.white { color: white;}
.blue { color:#0A4F90;}
.dark-blue { color:#324267;}
.yellow { color:#D7D44C;}
.beige { color: #F2F2ED;}

/* ========
  background-color
================ */
.bg-black { background: #333333;}
.bg-white { background: white;}
.bg-blue { background: #0A4F90;}
.bg-yellow { background:#D7D44C;}
.bg-green { background:#548E8C;}
.bg-beige { background: #F2F2ED;}
.bg-light-blue-gray { background:#EEF0F3}

/* ========
  smp-font-szie
================ */
.fs-12 {font-size: 12px!important;}
.fs-14 {font-size: 14px!important;}
.fs-16 {font-size: 16px!important;}
.fs-18 {font-size: 18px!important;}
.fs-20 {font-size: 20px!important;}
.fs-22 {font-size: 22px!important;}
.fs-24 {font-size: 24px!important;}
.fs-30 {font-size: 30px!important;}
.fs-35 {font-size: 35px!important;}
.fs-40 {font-size: 40px!important;}
.fs-50 {font-size: 50px!important;}

/* ========
  padding-margin
================ */
.w-1280 { max-width: 98%;}
.w-1000 { max-width: 90%;}
.w-720 { max-width: 90%;}
.w-580 { max-width: 90%;}
.my-100 { margin: 100px 0;}
.py-100 { padding: 100px 0;}
.pb-100 { padding-bottom: 100px;}
.my-70 { margin-top: 70px; margin-bottom: 70px;}
.mt-70 { margin-top: 70px;}
.py-70 { padding-top: 70px; padding-bottom: 70px;}
.pt-100 { padding-top: 100px;}
.pb-100 { padding-bottom: 100px;}
.pt-70 { padding-top: 70px;}
.pb-70 { padding-bottom: 70px;}



/********************/
/****** header ******/
/********************/

header {
  background-color: #fff;
}
header img {
  object-fit: contain;
}
#nav-drawer {
  position: relative;
}
.nav-unshown {
  display: none;
}
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
}
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #444;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}
/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0;
  transition: .3s ease-in-out;
}
/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  /*最前面に*/
  width: 70%;
  /*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 330px;
  /*最大幅（調整してください）*/
  height: 100%;
  background: #fff;
  /*背景色*/
  transition: .3s ease-in-out;
  /*滑らかに表示*/
  -webkit-transform: translateX(105%);
  transform: translateX(105%);
  /*左に隠しておく*/
  padding: 2% 7% 2%;
}
/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;
  /*カバーを表示*/
  opacity: .5;
}
#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  /*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, .15);
}
header li a {
  display: block;
  color: #000;
  font-size: 1.2em;
}

/********************/
/****** footer ******/
/********************/


.footer-logo {
  width: 40%;
}
.tel {
  font-size: 1.6rem;
}
footer ul {
  background-color: #444;
}
footer li {
  font-size: 1.07rem;
  padding: 20px 0 20px 20px;
  background: url("../../image/common/yajirushi2.png") no-repeat center right;
  border-bottom: 1px solid #fff;
}
footer li a {
  color: #fff;
  border-bottom: none;
}
.contact-button {
  color: #000;
  font-size: 1.07rem;
}
small {
  font-size: 0.8rem;
}

/********************/
/******** pc ********/
/********************/

@media(min-width:768px) {
  
  body {
    font-size: 1rem;
    line-height: 2rem;
    font-family: "Zen Antique Soft", serif;
    font-weight: 400;
    font-style: normal;
  }
  .page-content-title h3 {
    font-size: 1.6rem;
    letter-spacing: .6rem;
  }
  .w-1000 {
    max-width: 1000px;
  }

  /* ========
    font-szie
  ================ */

  .fs-md-12 {font-size: 12px!important;}
  .fs-md-14 {font-size: 14px!important;}
  .fs-md-16 {font-size: 16px!important;}
  .fs-md-18 {font-size: 18px!important;}
  .fs-md-20 {font-size: 20px!important;}
  .fs-md-22 {font-size: 22px!important;}
  .fs-md-24 {font-size: 24px!important;}
  .fs-md-32 {font-size: 30px!important;}
  .fs-md-35 {font-size: 35px!important;}
  .fs-md-40 {font-size: 40px!important;}
  .fs-md-50 {font-size: 50px!important;}
  .fs-md-55 {font-size: 55px!important;}
  .fs-md-60 {font-size: 60px!important;}
  .fs-md-70 {font-size: 70px!important;}
  .fs-md-100 {font-size: 100px!important;}

  .w-1280 { max-width: 1280px;}
  .w-1000 { max-width: 1000px;}
  .w-720 { max-width: 720px;}
  .w-590 { max-width: 590px}
  .my-md-100 { margin: 100px 0!important;}
  .py-md-100 { padding-top: 100px!important; padding-bottom: 100px!important;}
  .mt-md-100 { margin-top: 100px!important;}
  .pt-md-100 { padding-top: 100px!important;}
  .mb-md-100 { margin-bottom: 100px!important;}
  .pb-md-100 { padding-bottom: 100px!important;}


  header li a {
    font-size: 1rem;
  }
  .footer-logo{
    width: 185px;
  }
  footer li {
  font-size: 1rem;
  background: url();
  padding: 0;
  border-bottom: none;
}
  footer li a {
    padding: 0 30px 0 30px;
    border-right: solid 1px #fff;
  }
  
}