@charset "UTF-8";

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

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

/* ********** ヘッダー ********** */
#header { position: fixed; display: flex; justify-content: space-between; align-items: center; width:100%; padding: 0.714% 7.14%; background: rgba(255,255,255,0.95); z-index: 5; }

.header__logo { width:27%; transition: all .7s cubic-bezier(0.230, 1.000, 0.320, 1.000); }

@media screen and (min-width: 768px) {
.short #header,.shortnavi #header {  }
.short .header__logo,.shortnavi .header__logo { width:15%; }
}


/*メニュー*/
.el_humburger { display: none; }

/*ナビゲーション*/
.navigation { display: flex; justify-content: space-between; }

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

.navigation li { font-size: 1.6rem; font-weight: 600; }
.navigation li a { position: relative; display: block; padding: 0 3rem; color:#000; }

@media screen and (max-width: 820px) {
.navigation li a { padding: 0 1.5rem; }
}

.navigation li a:hover { opacity: .6; }
/*.navigation li a::before { position: absolute; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; width: 4px; height: 4px; border-top: 1px solid #000; border-right: 1px solid #000; transform: rotate(45deg); }:/
.navigation li a:hover { opacity: .6; }

/* current表示 */
/*
.home .navigation li:first-child a { color:#eb6739; text-decoration: underline; }
.home .navigation li:first-child a::before { content: none; }
.home .navigation li:first-child a:hover { opacity: 1; }
*/

/* ********** フッター ********** */
#footer { padding:2em; background: #f6f6f6; }
.txt_copyright { font-size: 1.4rem; text-align: center; }

/* このページのトップへ */
.topagetop { position: fixed; display: none; opacity: 0; bottom:1.2vw; right: 2vw; z-index: 3; }
.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: 78px; height: 78px; padding-top: 25%; background: #b9b9b9; border-radius: 50%; }
.topagetop a::before { position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; content: ""; vertical-align: middle; width: 12px; height: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(-45deg); }

.topagetop a:hover { opacity: .7; }

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

/* ********** ヘッダー ********** */
#header { height: 16.26vw; padding: 2.66%; background: rgba(255,255,255,.97); }
.header__logo { /*position: fixed;*/ width:60%; /*top:2.66vw; z-index: 10050;*/ }
/*
.short #header,.shortnavi #header { height: 14.13vw; padding-top:1.33%; padding-bottom: 1.33%; border-bottom:1px solid #eee; }
.short .header__logo,.shortnavi .header__logo { width:45%; }
*/

/*ハンバーガーボタン*/
.el_humburger { display: block; position: fixed; top: 5.32vw; right: 2.66%; width: 32px; height: auto; padding-top: 1px; box-sizing: border-box; z-index: 10000; transition: all 0.2s ease-in-out; cursor: pointer; pointer-events: auto; }
/*
.short .el_humburger,.shortnavi .el_humburger { top:4.3vw; }
*/

.el_humburger > span { display: block; width: 100%; margin: 0 auto 6px; height: 2px; background: rgb(130,215,255);
background: linear-gradient(90deg, rgba(130,215,255,1) 0%, rgba(169,181,253,1) 50%, rgba(227,134,248,1) 100%); transition: all 0.2s ease-in-out; }
.el_humburger > span:last-child { margin-bottom: 0; }

.js_humburgerOpen .el_humburger > span.top { transform: translateY(9px) rotate(-45deg); }
.js_humburgerOpen .el_humburger > span.middle { opacity: 0; }
.js_humburgerOpen .el_humburger > span.bottom { transform: translateY(-7px) rotate(45deg); }

.el_humburgerButton.el_humburgerButton__close { top: 2%; right: 2%; }
.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__text { font-size: .8rem; text-align: center; }
 
/*ナビゲーション*/
.uq_spNavi { display: none; }
.uq_spNavi.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; }
.navigation { flex-direction: column; padding: 15vw 2.66% 0; }
.navigation_item { }
 
.navigation li a { position: relative; padding: 2rem 1rem; border-bottom:1px solid #eee; color:#333; }
.navigation li a::before,
.navigation li a::after {
position: absolute;
right: 8%;
top: 0;
bottom: 0;
margin: auto;
content: "";
vertical-align: middle;
}
.navigation li a::before{
width: 14px;
height: 1px;
background: #000;
}
.navigation li a::after{
width: 5px;
height: 5px;
border-top: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
}
 
.js_fixed { position: fixed; width: 100%; height: 100%; }

/* ********** フッター ********** */
#footer { padding:1em; }
.txt_copyright { font-size: 1rem; }

/* このページのトップへ */
.topagetop { right: -2vw; transform: scale(0.5); }


@media screen and (orientation: landscape) {
}
	
}


/* iPhone SE */
@media screen and (max-width: 320px) {
}