@charset "UTF-8";

/*
======== table of content. ===============
summary:ヘッダー・フッター
====================================
*/

/* ***** PC ***** */

/* ヘッダー */
#tb_header { display: flex; justify-content: space-between; align-items: center; }

.header_logo { width:12.22%; margin:.7% 0 .7% 4.4%; }

/*ハンバーガー*/
.el_humburger { display: none; }

#gnavi { position: fixed; top:0; z-index: 999; width: 100%;
background: rgb(228,79,50);
background: linear-gradient(0deg, rgba(228,79,50,0.8) 0%, rgba(196,81,93,0.8) 100%);
}

.uq_spNavi { display: flex; margin-left: 5%; margin-right: 5%; font-family: "dejima", serif; }

.pc .uq_spNavi,
.ipad .uq_spNavi { opacity: 1!important; }

.uq_spNavi li { font-size: 1.8rem; }
.uq_spNavi li a { position: relative; display: block; padding: 1em 1.5em; color:#fff; }
.uq_spNavi li a:hover { opacity: .6; }

.uq_spNavi .navi_fb,
.uq_spNavi .navi_tel { position: absolute; }

.ie11 .uq_spNavi .navi_fb img,
.ie11 .uq_spNavi .navi_tel img { width:25px; height: 25px; }

.uq_spNavi .navi_fb { right:calc(5% + 60px); }
.uq_spNavi .navi_tel { right:5%; }

.uq_spNavi .navi_fb a { padding-right: .5em; }
.uq_spNavi .navi_tel a { padding-left: .5em; }

.navi_icon { width:25px; }

h1 { margin: 4.6vw auto 0; padding: 1em; text-align: center; }

/* フッター */
#tb_footer { display: flex; justify-content: center; align-items: center; margin-left: 7.5%; margin-right: 7.5%; padding:2em; border-top:1px solid #fff; }
.txt_copyright { font-size: 1rem; font-weight: 700; text-align: center; }

/* このページのトップへ */
.topagetop { position: fixed; display: none; opacity: 0; bottom:2.8vw; right: 2vw; }
.topagetop.fade { display: block; opacity: 1; animation-duration: 0.5s; animation-name: fade-in; }
@keyframes fade-in { 0% {display: none;opacity: 0;} 1% {display: block;opacity: 0;} 100% {display: block;opacity: 1;} }

.topagetop a { position: relative; display: block; width: 40px; height: 40px; background: #E9546B; border-radius: 30px; }
.topagetop a::before { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: 16px auto 0; content: ""; vertical-align: middle; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); }

.topagetop a:hover,
.logo_8sisters a:hover { opacity: .7; }
.logo_8sisters { width: 12em; margin-left: 1em; }

/* ***** SP ***** */
@media screen and (max-width: 767px) {

/* ヘッダー */
#tb_header {  }
h1 { margin: 2vmin 0 3vmin; padding: 0 20%; text-align: center; }

/*ハンバーガーボタン*/
.el_humburger { display: block; position: fixed; top: 3vw; right: 2.66vw; width: 40px; height: auto; box-sizing: border-box; z-index: 10000; transition: all 0.2s ease-in-out; cursor: pointer; pointer-events: auto; }
.el_humburger_inner { padding: 0 5px 2px; }
.el_humburger_inner > span { display: block; width: 100%; margin: 0 auto 6px; height: 2px; background: #231815; transition: all 0.2s ease-in-out; }
.el_humburger_inner > span:last-child { margin-bottom: 0; }
.js_humburgerOpen .el_humburger { top:3vw; }
.js_humburgerOpen .el_humburger_inner > span.top { transform: translateY(9px) rotate(-45deg); }
.js_humburgerOpen .el_humburger_inner > span.middle { opacity: 0; }
.js_humburgerOpen .el_humburger_inner > span.bottom { transform: translateY(-6px) rotate(45deg); }

.el_humburgerButton__close > span { display: block; width: 35px; margin: 0 auto; height: 4px; background: #fff; }
.el_humburgerButton__close > span.el_humburgerLineTop { transform: translateY(5px) rotate(-45deg); }
.el_humburgerButton__close > span.el_humburgerLineBottom { transform: translateY(-6px) rotate(45deg); }

.el_humburger p { margin-top: .2em; color:#231815; font-size: 0.8rem; text-align: center; }
.js_humburgerOpen .el_humburger p  { margin-top: .5em; }
#gnavi { position: static; width: auto; }
.uq_spNavi { margin-left: 0; margin-right: 0; }

#nav_gnavi.js_appear { position: fixed; top: 0; left: 0; bottom: 0; right: 0; display: block; z-index: 9999; }
.uq_spNavi_screen { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(255, 255, 255, 0.96); z-index: 0; margin-top: 0px; padding-top: 0px; overflow: auto; -webkit-overflow-scrolling: touch; }

#nav_gnavi { background-color: rgba(245, 183, 188, 0.9); }

#nav_gnavi { display: none; padding-top: 3em; text-align: center; }
#nav_gnavi li { width:auto; margin: 0 10%; font-size: 1.8rem; }

#nav_gnavi li a { color:#231815; }

#nav_gnavi li.navi_fb,
#nav_gnavi li.navi_tel { position: static; display: inline-block; margin: 0 auto; padding: 0; text-align: center; }

#nav_gnavi li.navi_fb a,
#nav_gnavi li.navi_tel a { display: inline-block; margin: auto; }

.navi_icon { width:40px; }

#nav_gnavi a {  }
#nav_gnavi a:hover { opacity: .7; }


/* フッター */
#tb_footer { flex-direction: column; margin-left: 5%; margin-right: 5%; padding:1em; }


/* このページのトップへ */
.topagetop { bottom:4vw; right: 2.66vw; transform: scale(0.825); }

.logo_8sisters { width: 8em; margin-top: 1em; margin-left: 0; }

@media screen and (orientation: landscape) {
.topagetop { bottom:1.6vw; }
}
	
}


/* iPhone SE */
@media screen and (max-width: 320px) {
.logo_8sisters { width: 6em; }
}