@charset "utf-8";

/* base ------------------------*/
#wrapper { position:relative; }
.inner { position: relative; width: 90%; max-width: 1200px; margin:auto; }
.narrow { position: relative; width: 90%; max-width: 1080px; margin:auto; }
input[type="submit"] { background: none; }

/* header ------------------------*/
#header { position: relative; width: 100%; z-index: 3; }
#header.scroll  { background: #6d2b39; }
.sitename { position: fixed; width: 40%; z-index: 3; }

/* gnav ------------------------ */
#gnav { display: none; }
#gnav.open{ position: fixed; display: block; width:100%; height:100vh; background: #892c41; -webkit-transition:all .5s ease-in; transition:all .5s ease-in; overflow-y:auto; -webkit-overflow-scrolling:touch; z-index: 9; opacity: 0.97; }
#gnav .logo{ width: 25%; padding:1em; }
.nav_contents { position: absolute; width: 100%; }
#gnav ul { width:46%; }
#gnav li { margin-bottom: .6em; font-size: 1.5em; font-family: 'honoka',serif; line-height: 1.5; }
#gnav a{ display:grid; color: #fff; text-decoration:none; }
#gnav a:hover { opacity: 0.6; }
#gnav span { color: #cd909b; font-size: .85em; letter-spacing: 2px; }
.contact_list li { margin-bottom: .8em; }
.contact_list a { position: relative; margin-left: 1.8em; }
.contact_list a::before { content: ""; position: absolute; left: -1.5em; top: 10px; width: 20px; height: 20px; }
#gnav .nav_calendar a::before { background: url(../img/icon_calendar.png) no-repeat top left /100%; }
#gnav .nav_form a::before { background: url(../img/icon_form.png) no-repeat top left /100%; }

#gnav .nav_tel a { margin-left: 0; padding: .3em .5em; color: #882c41; text-align: center; background: #fff; border: 1px solid #fff; }
#gnav .nav_tel a::before{ content: none; }
#gnav .nav_tel span { display: contents; color: #882c41; font-size: .6em; }
.nav_mail,.nav_law { border: 1px solid #fff; }
.nav_mail a,.nav_law a { padding: .3em .5em; text-align: center; }
.nav_mail a::before { top:.7em; left:-.8em; background: url(/img/icon_mail.png) no-repeat top left /100%; }
.contact_list .nav_law a { margin-left: auto; }

/* menuボタン */
#menu-btn { position: fixed; top:1em; right: 0; cursor: pointer; padding: 0 1.5em 1.5em; }
.menu-button { position:relative; z-index:9999; float:right; filter: drop-shadow(1px 2px 6px #6d2b39); }
.menu-button,.menu-button span { display:block; transition:all .5s; -webkit-transition:all .5s; box-sizing:border-box; }
.menu-button .h_menu { position:relative; height:2em; }
.menu-button span { position:absolute; width:100%; height:2px; right: 3px; background-color:#fff;}
.menu-button span:nth-of-type(1) { width:45px; top: 0; }
.menu-button span:nth-of-type(2) { width:30px; top: 13px; }
.menu-button.open span { width: 35px; left: 9px; }
.menu-button.open span:nth-of-type(1) { top:4px; -webkit-transform: translateY(5px) rotate(-45deg); transform: translateY(5px) rotate(-45deg); }
.menu-button.open span:nth-of-type(2) { top:21px;  -webkit-transform: translateY(-12px) rotate(45deg); transform: translateY(-12px) rotate(45deg);}
.menu-button .label { margin:0; font-size: 1.3em; color:#fff; text-align:center; line-height:1; letter-spacing: 1px; z-index: 99999; }

/* footer ------------------------*/
footer { background: #6d2b39; }
.side_btn { position:fixed; bottom:80px; right:30px; z-index: 2; }
.side_btn a { display: block; }
#pagetop p{ position: fixed; right:0; bottom:0; width: 12%; z-index:2; }

#fnav ul { width:50%; }
#fnav span { color: #cd909b; font-size: .85em; letter-spacing: 2px; }
#fnav a { display: block; color: #fff; text-decoration: none; }
#fnav a:hover { color: #fff; opacity: 0.6; }
footer p a:hover { color: #fff; opacity: 0.6; }
footer p, footer ul, footer p a { color: #fff; }

#fnav { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; padding: 5em 0 3em; }
#fnav .logo { margin-right: 6%; }
#fnav .nav_list { width:100%; line-height: 2; }
#fnav .contact_list { width: 33%; min-width: 300px; }
#fnav .nav_tel a { margin-left: 0; padding: .3em .5em; color: #882c41; letter-spacing: 1px; text-align: center; background: #fff; }
#fnav .nav_tel a::before{ content: none; }
#fnav .nav_tel span { display: contents; color: #882c41; font-size: .6em;  }

.address { margin-bottom: 1em; }
.copyright { margin:0; padding:1em 0; font-size:.75em; text-align:center; border-top: 1px solid; }

/* common------------------------*/
.object-fit { object-fit: cover; font-family: 'object-fit:cover;'; }
::marker { color: #b36371; }

/* title */

/* button */
.icon::before, .icon::after { position: absolute; content: ""; background: #fff; -webkit-transition: all .3s; transition: all .3s; }
.icon::before { width: 1.7em; height: 1px; right: 1em; top: 50%; }
.icon::after { width: .3em; height: 1px; right: 1em; top: calc(50% - 2px); transform: rotate(45deg); }
.button.icon:hover::before, .button.icon:hover::after { right:.5em; background:#fff; }

.button { position:relative; display:inline-block; overflow:hidden; width:auto; padding:.7em 4em .6em 1em; font-size:1.4em; color:#892c41; text-align: left; text-decoration: none; border: 1px solid #892c41; background: #fff; z-index: 1; }
.button.icon::before, .button.icon::after { position: absolute; content: ""; background: #892c41; -webkit-transition: all .3s; transition: all .3s; }
.button:hover { color:#fff; border: 1px solid; background: #892c41; }

/* button2 */
.button2,
input.button2{ position: relative; display: inline-block; width: auto; padding: .7em 2em .6em; font-size: 1.1em; color: #fff; text-align: center; text-decoration: none; border: 1px solid #865c7b;  background: #865c7b; z-index: 1; }
.button2:hover { color: #865c7b; background: #fff; }
.button2:before{ content: "";  position: absolute;  bottom: 5px;  right: 5px;  width: 0;  height: 0;  border-style: solid;  border-width: 0 0 10px 10px;  border-color: transparent transparent #fff transparent; }
.button2:hover:before { border-color: transparent transparent #865c7b transparent; }

/* button3 */
.button3 { position:relative; display:inline-block; overflow:hidden; width:auto; padding:.7em 3em .6em 2em; font-size:1em; color:#fff; text-align: left; text-decoration: none; border: 1px solid #b36371; background: #b36371; z-index: 1; }
.button3:hover { color: #b36371; border: 1px solid; background: #fff; }
.button3.icon::before,.button3.icon::after { background-color: #fff; }
.button3.icon:hover::before,.button3.icon:hover::after { background-color: #b36371; }

/* ================================================================
  レスポンシブ
=================================================================== */
/* 600以上(PC・タブレット) */
@media screen and (min-width: 600px) {
#header.scroll { position: fixed; height: 6em; transition: all 1s; }
.menu-button span:nth-of-type(1) { width:55px; top: 10px; }
.menu-button span:nth-of-type(2) { width:36px; top: 25px; }
.menu-button.open span { width: 45px; }
.menu-button .label {  line-height:2.5; }
.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) { top:17px;  -webkit-transform: translateY(-3px) rotate(45deg); transform: translateY(-3px) rotate(45deg);}

#gnav span { display: block; }
#gnav ul{ width: 25%; }
#gnav ul.contact_list{ width: 40%; }
#gnav .nav_tel { margin-top: 40%; }
.nav_contents { top: 50%; transform: translateY(-50%); }
#fnav ul { width:26%; }
}
/* 960以上(PC) */
@media screen and (min-width: 960px) {
#gnav ul.contact_list{ width: 26%; min-width: 370px; }
#fnav .nav_list { width: 74%; margin-left: auto; }
}


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

  /* header ------------------------ */
 #header { position: fixed; height: 6em; }
 /* #header.scroll .sitename { width: 200px; } */
 #gnav li { font-size:1.3em; }
 #gnav .nav_calendar a::before,#gnav .nav_form a::before { top:3px; }

  /* footer ------------------------ */
  #fnav { padding-bottom: 1em; }
  #fnav ul { padding: 2em 0 0; }

}


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


  /* header------------------------*/
  #header { height: 5em; }
 .sitename { width: 26%; min-width: 150px; padding: 1em; }

  /* gnav------------------------*/
  #menu-btn { padding-right: 1em; }
  #gnav .logo { min-width: 150px; }
  #gnav .nav_contents, #gnav .nav_contents ul{ margin-top: 7%; }
  #gnav .contact_list { display: -webkit-flex; display: flex;  -webkit-flex-wrap: wrap;  flex-wrap: wrap; width: 94%; }
  #gnav .contact_list li { width: 100%; }
  #gnav .nav_calendar, #gnav .nav_form { width: 49%; }
  #gnav li { font-size: 1.2em; }

  /* footer------------------------*/
  /* footer { padding-bottom: 5em; } */
  #pagetop p { right: 1em; }
  #fnav { padding: 2em 0 1em; }
  #fnav ul { padding: 2em 0 0; }
  #fnav .logo { width: 40%; margin-top: auto; min-width: 110px; }
  #fnav .contact_list { width: 100%; }
  .sp_only .nav_tel{ margin: 0; }
  #fnav .sp_only .nav_tel a { width: 180px; }
  .f_btn { display: flex; position: fixed; bottom: 0; z-index: 1; }
  /* .btn_calendar {  width: 55%; }
  .btn_form {  width: 45.5%; } */
  .address li+li { padding-top: 1em; }
  .side_btn {  bottom: 60px;  right: 0; }
  .btn_form { width: 60%;  margin-right: 5px;  margin-left: auto; }

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

  /* tel */

  /* title */

  /* button */
  .button{ font-size: 1em;}
  .button.icon::after { top: calc(50% - 2px); }
}



@media screen and (max-width: 320px){
#gnav li {
    font-size: 1em;
}
}