@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { max-width: 1000px; width: 100%; margin: 0 auto; }
.inner.wide { max-width: 1100px;}

/*背景 グレー*/
.bg_gray{ background-color: #eeeeee; }

/*背景 方眼紙*/
.bg_square { position: relative;
  background-color: #FFF;
  background-image: linear-gradient( transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06)), linear-gradient( 90deg, transparent 95%, rgba(0, 0, 0, .06) 50%, rgba(0, 0, 0, .06) );
  background-size: 16px 16px;
  background-repeat: repeat;
}

/*ウスオレンジストライプ*/
.bg_stripe, .bg_stripe_or { background-color: #ffedd3;
    background-image: linear-gradient(-45deg, #fff 10%, transparent 10%, transparent 50%, #fff 50%, #fff 60%, transparent 60%, transparent);
    background-size: 7px 7px;
    background-attachment: fixed;}
.bg_stripe.navy { background-color: #e7e9ef; }
.bg_stripe.purple { background-color: #fcedf3; }
.bg_stripe.violet { background-color: #dfdbf7;}
.bg_stripe.gray { background-color: #dbdbdb;}


/* header ------------------------*/
#header { padding: 30px 0 15px; background: #fff; }
#header>.inner { width: 100%; }
#header .sitename { float: left; }
.h_info { float: right; }
.h_info p { margin: 0 auto; }
.infoBox { text-align: center; margin-right: 30px; line-height: 1.5; }

.tel { font-size: 1.875em; }
.tel a { display: block; position: relative; padding-left: 1.2em; }
.tel a::before { content: ""; position: absolute; top: 50%; left: 0;
    width: 30px; height: 30px;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%);
    background: url("../img/icon_freetel.png") no-repeat center;  }

.hour { font-size: .9375em; }

/* gnav ------------------------*/
#gnav { margin-top: 40px; }
#gnav li { width: 14%; text-align: center; border-right: 1px solid #aaaaaa; }
#gnav li:first-child { border-left: 1px solid #aaaaaa; }
#gnav li a { display: block; padding:  2px; }


/* footer ------------------------*/
.floBox { position: fixed; right: 0; bottom: 30px; z-index: 9999; opacity:0; text-align: right;transition:all .3s ease-out; -webkit-transition:all .3s ease-out; }

.floBox li a { margin-right: -5px; -webkit-transition: all 0.3s; transition: all 0.3s; }
.floBox li:nth-child(n+2) { margin-top: 5px; }
.floBox li a:hover { margin-right: 0; }


/*.floPc { display: block;  }
  .floPc .floBox { position: fixed; bottom:30px; right: 0; }*/
  .floPc .floBox>li { width:150px; /*margin: 0 0 5px; */text-align: left; }
  .floPc .floBox>li a { display: block; padding: 1em .5em;  color: #fff; background: #ff4180; font-size: .9em; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
  .floPc .floBox>li.bukken a { background: #fed917; color:#45341d ; }
  .floPc .floBox>li.siryo a { background: #00bf6c; }
  .floPc .floBox>li.nyukan a { background: #de3225; }
  .floPc .floBox>li a span { display: block; position: relative; padding-left: 35px; }
  .floPc .floBox>li a span::before { content: "";
    position: absolute; top: 50%; left: 7px;
    background-image: url("../img/icon_kengaku.png"); background-repeat: no-repeat;
    width: 22px; height: 20px; background-size: 18px;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }

  .floPc .floBox>li.bukken a span::before { background-image: url("../img/icon_search.svg");  }
  .floPc .floBox>li.siryo a span::before { left: 6px; background-image: url("../img/icon_siryo.png");
  width: 26px; height: 20px; background-size: 20px; top: 60%; }
  .floPc .floBox>li.nyukan a span::before {  background-image: url("../img/icon_nyukan.png");
   width: 26px; height: 20px; background-size: 20px; top: 60%; }

/*.floSp { display:none; }*/

.floBox.scroll { opacity:1;}

#footer { border-top: 1px solid #eee; }

.fBox { position: relative; padding: 60px 0 40px; }
.fBox.linkBox {padding-top: 20px; width: 100%;}
.fBox .flogo {width: 250px; margin: 0 0 1em 0; }
.fBox .logo-link li:not(:last-child) { margin-right: 10px; }
.fBox .logo-link li a {
  overflow: hidden; position: relative;
  display: block; padding: .5em 1.5em .4em;
  border: 1px solid #eee; border-radius: 8px;
}
.fBox .logo-link li a::before {
  content: ""; position: absolute; top: 0; right: 0;
  border-top: 15px solid #fff100;
  border-left: 15px solid transparent;
  transition: .3s;
}
.fBox .logo-link li a img { width: auto; height: 30px; }
.fBox .logo-link li.labo a img {height: 20px;}
.fBox .logo-link li a:hover::before { border-top-color: #ff7900; }

#pagetop { position: absolute; top:-40px; right: 0; margin: 0; }
#pagetop a { display: block; }

.fnav { margin-bottom: 10px; }
.fnav>ul>li { margin-bottom: 20px; line-height: 2; }
.fnav>ul>li>a { display: block; position: relative; padding-left: 1.2em; }
.fnav>ul>li>a::before { content: "●"; position: absolute; top: 50%; left: 0;
    color: #ffa749; font-size: .75em;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }

.fnav>ul>li>ul { font-size: 0.8125em; }
.fnav>ul>li>ul>li>a { display: block; position: relative; padding-left: 1.5em; font-weight: 300; }
.fnav>ul>li>ul>li>a::before { content: "—"; position: absolute; top: 40%; left: 0;
    font-weight: 100;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }

.snsList>li { margin-right: 10px; }
.snsList>li>a { padding-left: 0!important; }
.snsList>li>a::before { display: none; }

.kyorituInfo { padding: 30px 0; color: #fff;
  background-color: #8d62a7;
  background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 10%, transparent 10%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 60%, transparent 60%, transparent);
  background-size: 7px 7px;
  background-attachment: fixed;
}
/*.kyoritu_logo { float: left; width: 13%; text-align: center; margin: 0 auto; padding: 20px; background: #fff; }*/
.kyoritu_add { margin: 0; }
.kyoritu_add>a { color: #fff; }

.copyright { margin:0; padding:1em 0; font-size:.75em; text-align:center; color: #69308b; }
.copyright a { color: #69308b; }

.f-kyoritsu { margin:10px 0 0; padding: 10px 0; text-align: center; border-top: 1px solid #eee; }
/*.f-kyoritsu img { width: 109px;}*/

/* common------------------------*/
/* tel */

/* title */
.secTtl { text-align: center; margin-bottom: .5em; font-size: 2.375em; font-weight: bold; }
.subTtl { text-align: center; margin-bottom:.8em; font-size: 2.1875em; font-weight: bold;  }

.ttl_line { font-size: 1.5em; border-bottom: 2px solid #ff7d19; }

.ttl_stripe { z-index:1; position: relative; text-align:center; padding:5px 1.5em;
  font-size: 1.5em; color:#fff; background: #ffa749; }
.ttl_stripe::before,.ttl_stripe::after { content: ""; position: absolute; top: 0; width: 0; height: 0; border: none; z-index: 2; }
.ttl_stripe::before { left: 0px; border-left: solid 20px #fff; border-bottom: solid 55px transparent; }
.ttl_stripe::after { right: 0px; border-left: solid 20px transparent; border-bottom: solid 55px #fff; }



/* button */
.button { position:relative; z-index:2; display:inline-block; overflow:hidden; text-align:center; min-width:260px; padding:.7em 3em .6em 3em;  border-radius: 10px; }

[class^="btn_"] a {  }
[class^="btn_"] a::before { content: "";
    position: absolute; top: 0; right: 0;
    border: 10px solid transparent; border-top: 10px solid #fff100; border-right: 10px solid #fff100; }
[class^="btn_"] a span { position: relative; padding-left: 1.8em; }
[class^="btn_"] a span::before { content: ""; position: absolute; top: 50%; left: 0; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }

.btn_con a { border: 2px solid #806642; background: #fff; }
[class^="btn_"].type-2 a { color: #FFF; border-color:#ff7d19; background: #ff7d19; }
[class^="btn_"].type-2 a::before { border-color:#fed917 #fed917 transparent transparent; }

[class^="btn_"].type-2 span { display: inline-block; padding-left: 30px; }
[class^="btn_"].type-2 span::before {
  content: ""; position: absolute; top: 15px; left: 0; width: 20px; height: 20px; background: url(../img/icon_calculator.svg) center / cover no-repeat;
}

.btn_mail a { padding: .8em 2.5em 1em 2em; background: #2d78de; color: #fff; }
.btn_mail a span::before { width: 20px; height: 15px; background: url("../img/icon_mail.svg") no-repeat center; }

.btn_kengaku a { padding: .4em 2em .5em; background: #ff4180; color: #fff!important; }
.btn_kengaku a span::before { width: 22px; height: 20px; background: url("../img/icon_kengaku.png") no-repeat center; }

.btn_li li + li { margin-left: 1em; }


/* ================================================================
  レスポンシブ
=================================================================== */
@media screen and (max-width: 1099px) {
  .inner.wide { width: 92%;}
}

@media screen and (max-width: 999px) {
  .inner { width: 92%; }
}

/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
  #gnav { justify-content: space-between; -webkit-justify-content: space-between; }
  .floPc .floBox>li.nyukan a { line-height: 1.4; font-size: .8em; }

}

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


/* ================================================================
  タブレット
=================================================================== */
@media screen and (max-width: 959px) {
  body { font-size:15px; }


  /* header ------------------------ */
  #header { padding: 30px 20px 20px; }
  #header .sitename { float: none; }
  .hBox { float: left; }
  .h_info { display: none; }

  /* gnav ------------------------ */

  .logo-nav { margin-bottom: 30px; }

  #gnav { position:fixed; z-index:10000; top:0; right:0; width:100%; height:100%; margin: 0; overflow-y:auto;
    padding:50px; padding-top:120px; background:#ffa749;
   -webkit-transition:all .3s ease-in; transition:all .3s ease-in;
   -webkit-transform:translate(100%); transform:translate(100%);
   -webkit-overflow-scrolling:touch; }
  #gnav.open { -webkit-transform:translate(0); transform:translate(0); }
  #gnav .submenu { display:none; }
  #gnav .menu { float: none; display: block; margin-bottom:20px; }
  #gnav .menu > li > a { display: block; padding: 1em 0; color: #453f3a;}
  #gnav .menu > li > a.current:before { left:-25px; }
  #gnav .h_flo { display: none; }


  #gnav>ul>li { background: #fff; border-radius: 8px; margin-bottom: .5em; }

  #gnav li { width: 100%; text-align: left; border-right:none;  }
  #gnav li:first-child { border-left:none;  }

  #gnav li a { position: relative; padding: .8em 20px; }
  #gnav li a:hover { color: #45341d; }

  #gnav .nav_inner { padding: .5em; border-top:1px solid #eee; }

  #gnav .submenu li a { position:relative; display:block; padding:.3em 1em .3em 1.5em; font-size: 0.9375em; }
  #gnav .submenu li a:before { content: "—"; position: absolute; top: 50%; left: 0;
    font-weight: 100; transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }


  /* menuボタン */
  .menu-button { z-index:10001; float: right; position:relative; top: 0; right: 0; padding: .75em; background:#fff; }
  .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:20px; margin:0 auto; }
  .menu-button span { position:absolute; left:0; width:100%; height:2px; background-color:#1e2024; }
  .menu-button.open { background: #ffa749; }

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

  .menu-button.open span:nth-of-type(1) {
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .menu-button.open span:nth-of-type(2) {
    opacity: 0;
  }
  .menu-button.open span:nth-of-type(3) {
    -webkit-transform: translateY(-9px) rotate(45deg);
    transform: translateY(-9px) 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);  }



  .dropdown { z-index:1; cursor:pointer; -webkit-tap-highlight-color: rgba(0,0,0,0); }
  .dropdown:after { content:""; position:absolute; top:1.5em; right:1em; z-index:-1; width:.3em; height:.3em;
    -webkit-transform:rotate(45deg); transform:rotate(45deg);
    border-right:1px solid #666; border-bottom:1px solid #666;
    -webkit-transition:all .3s ease-out; transition:all .3s ease-out; }
  .dropdown.active:after { -webkit-transform:rotate(225deg) translateY(-.2em) translateX(-.15em);
    transform:rotate(225deg) translateY(-.2em) translateX(-.15em); }

  /* footer ------------------------ */
  .fBox .flogo { float: none; margin: 0 auto; }
  .fBox .logo-link { float: none; margin: 0px 5% 0; justify-content: space-between; -webkit-justify-content: space-between; }
  .fBox .logo-link li { width: 49%; margin-bottom: 2%; }
  .fBox .logo-link li:not(:last-child) { margin-right: 0; }
  .fBox .logo-link li a { padding: .8em 1em .7em; text-align: center; }
}

@media screen and (max-width: 800px) {
  .fnav ul.aboutdormy {width: 25%;}
}


/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width: 599px){



  /* header------------------------*/
  #header { padding: 20px 10px 15px; }
  #header .sitename { width: 200px; }

  /* gnav------------------------*/
  .menu-button { padding: 0; }
  .logo-nav { margin-bottom: 20px; }
  #gnav { padding: 30px; padding-top: 80px; }





  /* footer------------------------*/
  /*.floPc { display: none; }*/
  .floPc { display: block;  }
  .floPc .floBox { position: fixed; bottom:0; right: 0; left: 0; width: 100%; }
  .floPc .floBox>li { float: left; width: 50%; margin: 0; text-align: center; }
  /* .floPc .floBox>li.bukken { width: 50%;  } */

  .floPc .floBox>li a { display: block; padding: .7em .3em;  color: #fff; background: #ff4180; font-size: .9em;  border-top-left-radius: 0;  border-bottom-left-radius: 0; }
  .floPc .floBox>li.siryo a { background: #00bf6c; padding:.7em 1em; }
  /* .floPc .floBox>li.nyukan a { background: #ff7d19; } */

  .floPc .floBox>li a span { display: block; position: relative; padding-left: 15px; }
  .floPc .floBox>li.bukken a span { display: inline-block; padding-left: 30px; }

  .floPc .floBox>li a span::before { content: "";
    position: absolute; top: 50%; left: 7px;
    background-image: url("../img/icon_kengaku.png"); background-repeat: no-repeat;
    width: 22px; height: 20px; background-size: 18px;
    transform: translate(0,-50%); -webkit-transform: translate(0,-50%); }
  .floPc .floBox>li.siryo a span::before {  background-image: url("../img/icon_siryo.png");
  width: 26px; height: 20px; background-size: 20px; top: 60%; }
  .floPc .floBox>li.nyukan a span::before {  background-image: url("../img/icon_nyukan.png");
   width: 26px; height: 20px; background-size: 20px; top: 60%; }


  #pagetop { top: -25px; height: 50px; }

  .fBox { padding: 40px 0; }
  .fBox.linkBox {width: 100%;}
  .fBox .logo-link li:last-child img { height: auto; }


  .fnav>ul { width: 49%; }
  .fnav ul.aboutdormy {width: 49%;}

  .copyright { border-top: 1px solid #eee;}



  /* common ------------------------*/

  /* tel */

  /* title */
  .secTtl { font-size: 2em; line-height: 1.5; }
  .ttl_stripe::before { border-bottom: solid 100px transparent; }
.ttl_stripe::after { border-bottom: solid 100px #fff; }

  /* button */
  .btn_kengaku a { min-width: 100%; display: block; }

  #footer { padding-bottom: 50px; }

  .btn_li { margin-bottom: 50px; }
  .detailBox .btn_li .btn_con { margin-top: 10px; }
  .btn_li li + li { margin-left: 0; }


}


@media screen and (max-width: 320px){
  .floPc .floBox>li a span { padding-left: 0; }
  .floPc .floBox>li a span::before { display: none; }
}
