@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { max-width: 1100px; margin-left:auto; margin-right: auto; }
.narrow { max-width: 1000px; margin-left:auto; margin-right: auto; }

/* header ------------------------*/
#header{  }
#header .h-inner{ max-width: 1400px; margin:auto; align-items: center; }
#header .h-inner .sitename{ width:225px; }
[class^="h-nav"]{ justify-content: flex-end; }
.h-nav1 li + li{ margin-left:1em; }
.h-nav1 li a{
  position: relative;
  display: block;
  padding:.6em 2.5em .6em 1.2em;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.h-nav1 li a::before{
  position: absolute;
  content: "";
  right: 1.3em;
  top: 50%;
  transform: translateY(-50%);
-webkit- transform: translateY(-50%);
  width: .85em;
  height: .85em;
  background: url(../img/common/icon-new.svg) no-repeat center/ contain;
}
.h-nav1 li a:hover{ background: #fff!important; }

.h-nav1 li.rakusai a{ background: #f18709; border:solid 2px #f18709; }
.h-nav1 li.uji a{ background: #7bc8b9; border:solid 2px #7bc8b9; }
.h-nav1 li.sanin a{ background: #7fadf2; border:solid 2px #7fadf2; }
.h-nav1 li.rakusai a:hover{ color: #f18709; }
.h-nav1 li.uji a:hover{ color: #7bc8b9; }
.h-nav1 li.sanin a:hover{ color: #7fadf2; }

.h-nav2{ margin:1em 0; }
.h-nav2 li + li{ margin-left:2em; }
.h-nav2 li a{ font-weight: 600; color: #4a4a4a; }
.h-nav2 li a:hover{ color:#f18709; }

/* gnav ------------------------*/
#gnav {  }

/* footer ------------------------*/
#footer {  }

#fnav { width:100%; padding:14px 0 12px; background:#533c34;  }
#fnav li { width: 25%; margin: .2em 0; }
#fnav li a { position: relative; padding-left: 1.5em; color: #fff; text-decoration: none; }
#fnav li a:before { position: absolute; top: 3px; left: 0; content: ""; width: 15px; height: 15px; background: #fff; border-radius: 50%; }
#fnav li a:after { position: absolute; top: 7px; left: 5px; content: ""; width: 0; height: 0;
border-style: solid; border-width: 3.5px 0 3.5px 7px; border-color: transparent transparent transparent #f18b1e; }

.fnav ul{ float:left; width:150px; margin-right:10px; font-size:13px; }
.fnav ul.long{ width:255px; }
.fnav ul:last-child{ margin-right:0; }
.fnav ul > li { margin-top:10px; padding-left:20px; background:url(../img/icon_circle.png) no-repeat 0 50%; }
.fnav ul > li > ul{ width:100%; }
.fnav ul > li > ul > li{ margin-top:5px; padding-left:0; background:none; }
.fnav ul > li > ul > li:before{ content:"- "; }
.fnav a{ text-decoration:none; }
.f-logo{ width: 200px; margin: 1.5em auto 0; }
.copyright { margin:0; padding:1.5em 0; font-size:.75em; text-align:center; color:#777; }
.copyright a{ color:#777; }

/* common------------------------*/
.bg-stripe{ padding: 3em 0 4em;
    background: repeating-linear-gradient(135deg, #ffefb6, #ffefb6 5px, #fff5d3 5px, #fff5d3 10px); }
.bg-stripe .sec-ttl{
  text-shadow    :
   5px  5px 0px #ffffff,
  -5px  5px 0px #ffffff,
   5px -5px 0px #ffffff,
  -5px -5px 0px #ffffff,
   5px  0px 0px #ffffff,
   0px  5px 0px #ffffff,
  -5px  0px 0px #ffffff,
   0px -5px 0px #ffffff;
}

/* tbl */
.tbl { width:100%; margin-bottom:10px; border-collapse:separate; border-spacing:10px; }
.tbl tr > * { padding:.6em .8em; }
.tbl th { width:200px; font-weight:bold; text-align:center; color:#FFF; background:#533c34; }
.tbl td { border-bottom:1px dashed #ddd; }


/* title */
.sec-ttl{
  position: relative;
  margin-bottom: .7em;
  padding-top: 1.9em;
  text-align: center;
  font-size: 2.38em;
  font-weight: 800;
  color: #493c38;
  line-height: 1.4;
  letter-spacing: 1.5px;
}
.sec-ttl::before{
  position: absolute;
  content: "";
  top: 0;
  left: 50%;
  transform: translateX(-50%);
-webkit- transform: translateX(-50%);
  width: 1.8em;
  height: 1.8em;
  background: url(../img/common/ttl-deco.svg) no-repeat center/ contain;
}
.sec-ttl.search::before{ background-image:url(../img/common/ttl-deco-search.svg); }
.sec-ttl.maintenance::before{ background-image:url(../img/common/ttl-deco-maintenance.svg); }

.sub-ttl{
  margin-bottom: 1em;
  padding: 0.3em 0.7em;
  font-size: 1.7em;
  font-weight: 600;
  background: rgba(241,135,9,0.11);
  border-left: solid 5px #f18709;
  line-height: 1.4;
}

/* button */
.more-btn a {
  position: relative;
  display: inline-block;
  padding: 0.75em 4em 0.75em 2em;
  transition: all .3s;
  -webkit-transition: all .3s;
  color: #fff;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #f18709;
  background: #f18709;
}
.more-btn a:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 14px;
  width: 1.5em;
  height: 1.5em;
  margin: auto;
  border-radius: 50%;
  background: #fff url(../img/common/arrow-orange.svg) no-repeat center center / 15px;
}
.more-btn a:hover { background:#fff; color:#f18709; }


/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {

}

/* 960以上(PC) */
@media screen and (min-width: 960px) {
  .menu-button  { display:none; }
  .overlay{ display: none!important; }
}

@media screen and (max-width: 999px) and (min-width: 960px) {
  #gnav { font-size: .95em; }
}

/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 1399px) {
  #header .h-inner{ margin:0 1em; }
}

@media screen and (max-width: 959px) {
  body { font-size:15px; }
  .inner, .narrow { margin-left:20px; margin-right:20px; }

  /* header ------------------------ */
  #header .h-inner .sitename { width: 160px; }
  #header .h-inner { margin: .95em 1.5em; }


  /* gnav ------------------------ */
  #gnav{
    position:fixed;
    z-index:1000;
    top:0;
    right:0;
    width:400px;
    height:100%;
    overflow-y:auto;
    padding: 6em 25px 25px;
    background:#fff;
   -webkit-transition:all .3s ease-in; transition:all .3s ease-in;
   -webkit-transform:translate(400px); transform:translate(400px);
   -webkit-overflow-scrolling:touch;
  }
  #gnav.open{ -webkit-transform:translate(0); transform:translate(0); }
  #gnav .nav-wrap{ display: flex; flex-wrap: wrap; }
  #gnav .nav-wrap .h-nav1{ width: 100%; order:2; }
  #gnav .nav-wrap .h-nav1 li + li{ margin-top: .5em; }
  #gnav .nav-wrap .h-nav1 li a{ padding:.75em 2.5em .75em 1.2em; }
  #gnav .nav-wrap .h-nav2{ width: 100%; order:1; }
  #gnav .nav-wrap .h-nav2 li{ border-bottom: solid 1px #e8e6e1; }
  #gnav .nav-wrap .h-nav2 li:last-child{ border-bottom: none; }
  #gnav .nav-wrap .h-nav2 li a { display: block; padding: 0.65em; }
  #gnav .nav-wrap [class^="h-nav"] li{ width: 100%; margin-left: 0; }

  /* menuボタン */
  .menu-button {
    position: fixed;
    right: 0;
    top: 0;
    background: #7bc8b9;
    padding: 20px 15px;
    z-index:9999;
  }
  .menu-button,
  .menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
  .menu-button .h_menu { position:relative; width:30px; height:23px; margin:0 auto; }
  .menu-button span { position:absolute; left:0; width:100%; height:3px; background-color:#fff; }

  .menu-button span:nth-of-type(1) { top: 0; }
  .menu-button span:nth-of-type(2) { top: 10px; }
  .menu-button span:nth-of-type(3) { bottom: 0; }

  .menu-button.open span:nth-of-type(1) {
    -webkit-transform: translateY(10px) rotate(-45deg);
    transform: translateY(10px) rotate(-45deg);
  }
  .menu-button.open span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-button.open span:nth-of-type(3) {
    -webkit-transform: translateY(-10px) rotate(45deg);
    transform: translateY(-10px) rotate(45deg);
  }
  .menu-button .label { width:auto; height:auto; margin:0 0 5px; color:#1e2024;
    text-align:center; line-height:1; font-size:11px; }
  .overlay { position:fixed; z-index:999; top:0; right:0; bottom:0; left:0;display:none;
    width:100%; height:100%; background:rgba(0, 0, 0, .5); }

  /* footer ------------------------ */
  #fnav li{ font-size: .85em; }


  .sec-ttl{ font-size: 1.7em; }

}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){
  body { font-size:14px; }
  .inner, .narrow { margin-left:15px; margin-right:15px; }


  /* header------------------------*/

  /* gnav------------------------*/
  #gnav{ width: 90%; -webkit-transform:translate(100%); transform:translate(100%); }

  /* footer------------------------*/
  #fnav .narrow{ justify-content: space-between; }
  #fnav li { width: 49%; }
  .f-logo { width: 40%; }

  /* common ------------------------*/
  .tbl { border-collapse:collapse; width:100%; margin:0!important; }
  .tbl tr > * { display:block; }
  .tbl th { width:100%; text-align:left; }
  .tbl td { margin-bottom:.5em; border-bottom: none; }

  /* tel */

  /* title */


  /* button */


}