@charset "utf-8";

body { width: 100%; text-align: center; margin: 0 auto; padding: 0; }
.inner { width: 90%; max-width: 950px; margin: 0 auto; padding: 0; }

.png { /*zoom: .5;*/ }
.svg {  }
.icn { margin: 0 .3em; vertical-align: middle; }
.hide { display: none; }

.pc { display: block; }
.sp { display: none; }
.tmpl_displayOff { display: none; }

@media screen and (max-width: 767px){
	.pc { display: none; }
	.sp { display: block; }
}

/*ヘッダー*/
#header { width: 100%; color: #fff; padding: 10px 0; background: #000; margin: 0;}
#headLogo, #headLogoSp { float: left; padding-top: 10px; }
#headR { color: #fff; float: right; text-align: right; font-size: 118%; font-weight: bold; line-height: 1.5; margin:10px auto 0; }
#headR a { color: #fff; text-decoration: none; }
#headR span { display: block; line-height: 0; text-align: right; }
#headR span img { padding: 8px 0 0;}
@media screen and (max-width:767px){
	#header { min-width: 100% !important; padding: 13px 0; }
	#header {  }
	#headLogo, #headLogoSp { float: none; width: 100px; margin-bottom: 20px; }
	#headLogo img, #headLogoSp img { display: block; width: 100%; }
	#headR { float: none; text-align: left; font-size: 90%; line-height: 1.5; }
	#headR span { display: none; }
}

/*グローバルナビ*/
#globalNavi { margin: 0; padding: 0; background: #000; }
#globalNavi ul {  }
#globalNavi ul li { float: left; display: block; width: 16.666%; margin: 0 auto; padding: 0; }
#globalNavi ul li a { display: block; color: #fff; padding: 10px 0; text-decoration: none; }
#globalNavi ul li a:hover,
#home #globalNavi ul li#naviHome a,
#contact #globalNavi ul li#naviContact a { color: #000; background: #fff; }
/*タブレット*/
#home.tablet #globalNavi ul li a:hover { color: #fff; background: #000; }
#home.tablet #globalNavi ul li a.hover { color: #000; background: #fff; }

@media screen and (max-width:767px){
	#globalNavi { display: none; }
}


/*spNavi*/
.button { display: none; }
.button a { text-decoration: none; }
@media screen and (max-width:767px){
	.button { display: inline; position: absolute; right: 15px; top: 15px; z-index: 101; }
}
.menu-trigger,
.menu-trigger span { display: block; /*transition: all .4s; */box-sizing: border-box; text-indent: 100%;  white-space: nowrap; overflow: hidden; }
.menu-trigger { position: relative; width: 30px; height: 22px; }
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; }
.menu-trigger span { top: 0; box-shadow: 0 10px #FFF, 0 20px #FFF; }
.menu-trigger.active span { -ms-transform: translateY(10px) rotate(-315deg);-webkit-transform: translateY(10px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); box-shadow: none; }
.menu-trigger.active:after { content: ''; position: absolute; left: 0; width: 100%; height: 2px; background-color: #fff; -ms-transform: translateY(-10px) rotate(315deg); -webkit-transform: translateY(-10px) rotate(315deg); transform: translateY(-10px) rotate(315deg); bottom: 0; }


/* modal */
.lock { overflow: hidden; }
.ssscrlbar { box-sizing: border-box; }
.modal-content { display: none; padding: 13px 0; margin: 0 auto; width: 100%; text-align: left; box-sizing:border-box; }
/*@media screen and (max-width:767px){
	.scrlbar { padding-right: 0; }
	.ssscrlbar { padding-right: 0; }
	.lock { overflow: hidden; position: fixed; }
	.modal-content { width: 80%; }
}*/

.modal-overlay { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 120%; z-index: 120; background: #000; }
.modal-wrap    { position: fixed; top: 0; left: 0; display: none; width: 100%; height: 100%; z-index: 130; overflow: auto; }
.modal-open, .modal-close { cursor: pointer; }

.modal-close { width: 30px; height: 30px; position:absolute; top: 15px; right: 16px; box-sizing: border-box; }

.modal-content ul { display: block; list-style: none; padding: 0; margin: 20px auto 0; box-sizing: border-box; font-size: 115%; }
.modal-content ul>li { display: block; padding: 10px 0; }
.modal-content ul>li>a { display: block; color: #fff; text-decoration: none; -webkit-transition: color 0.2s; transition: color 0.2s; }


/*main*/
#main { max-width: 840px; color: #333; margin: 90px auto 75px; }
@media screen and (max-width:767px){
	#main { margin: 45px auto 37px; }
}

/*ページトップ*/
#pageTop { margin-bottom: 25px; }
#pageTop .inner { position: relative; width: 80%; height: 32px; }
#pageTop .inner a { position: absolute; right: -40px; }
@media screen and (max-width:767px){
	#pageTop { margin-bottom: 15px; }
	#pageTop .inner a { position: absolute; right: -2%; }
}

/*フッター*/
#footer { font-size: 86%; color: #646464; margin: 0; padding: 25px 0 30px; background: #f8f8f8; }
#footer { }
#footer a { color: #646464; }
#footer ul { margin-bottom: 20px; }
#footer ul li { display: inline-block; margin: 0 1em; }
#footer p { margin: 0; }
@media screen and (max-width:767px){
	#footer ul li a { display: inline-block; padding: 6px 0; }
	#footer p { font-size: 86%; width:90%; margin:0 auto; }
}