@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

@import url('https://fonts.googleapis.com/css?family=Numans');

@font-face {
  font-family: "mamelon";
  src: url("../../font/mamelon_font.eot?")  format('eot'),
       url("../../font/mamelon_font.woff2") format('woff2'),
       url("../../font/mamelon_font.woff")  format('woff');
}

.f-mamelon {
	font-family: "mamelon";
}

/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 
html,
body { height: 100%;}

html{ font-size: 62.5%;}
body { position: relative; overflow-x: hidden; height: auto;}

body *{ box-sizing: border-box;}

@media screen and (max-width: 768px) {
 body { min-width: 320px;}
}

@media screen and (max-width:599px) {
html{ font-size: 50%;}
}


/* フォントの指定 */
body,input,select,textarea {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #000; font-size: 14px; font-size: 1.4rem; line-height: 1.8; letter-spacing: 0.05em;}

/* フォントの指定 */
	
a { color:#4F4F4F; text-decoration:none;}
p a { text-decoration: underline;}
p a:hover { color: #386DFF;}
p { text-align:justify; text-justify: inter-ideograph;}


/* お客様ページログアウト */

body > a { display: block; position: absolute; top: 15px; left: 75%; z-index: 1; width: 82px; height: 30px; margin-left: 40px; font-size: .8em; text-align: center; line-height: 30px; text-decoration: none; vertical-align: middle; border-radius: 20px; background: #ebebeb;}
@media screen and (max-width: 1150px) {
body > a { position: absolute; top: 5px; left: -30px; width: 80px; height: 40px; line-height: 40px; border-radius: 5px;}
}


/*----------------------------------------------
Header
------------------------------------------------*/

.header { position: relative; min-height: 122px; padding: 25px 0 32px;}
.header:after { display: block; position: absolute; bottom: -1em; left: 0; z-index: 1; content: ""; width: 100%; height: 18px; background: url(../img/share/header_border.png) bottom left repeat-x;}
.header .inner { width: 95%; max-width: 1236px; margin: 0 auto;}/* 謎の指定… */
@media screen and (max-width: 1150px) {
.header { min-height: 0; padding: 25px 0 5px;}
}


/*- ロゴ header Style -*/
.header .logo { position: relative;} 
.header .logo * { display: block; position: absolute; top: 0; left: 0;}
.header .logo ,
.header .logo * { width: 395px; height: 96px; margin: 0 auto; text-indent: -9999px;}
.header .logo span { display: block; background: url(../img/share/logo.png) center no-repeat; background-size: contain;}
@media screen and (max-width: 1150px) {
.header .logo ,
.header .logo * { height: 80px;}
}

@media screen and (max-width: 768px) {
.header .logo ,
.header .logo * { width: 268px; height: 65px;}
}

/*- ナビ header Style -*/
.header-nav { overflow: hidden; width: 98%; max-width: 1100px; margin: 0 auto; text-align: center;}
.header-nav ul { overflow: hidden; height: 58px; text-align: center;}
.header-nav ul * { height: 58px;}
.header-nav ul li { display: inline-block; position: relative; overflow: hidden; margin: 0 2%;}
.header-nav ul li * { display: block; position: absolute; top: 0; left: 0; text-indent: -9999px;}
.header-nav ul li span { background: url(../img/share/nav.png) top left no-repeat; cursor: pointer;}

/*- 画像指定 幅 -*/
.header-nav ul .n01, .header-nav ul .n01 * { width: 66px;}
.header-nav ul .n02, .header-nav ul .n02 * { width: 244px;}
.header-nav ul .n03, .header-nav ul .n03 * { width: 190px;}
.header-nav ul .n04, .header-nav ul .n04 * { width: 225px;}
.header-nav ul .n05, .header-nav ul .n05 * { width: 125px;}

/*- 画像指定 背景位置 -*/
.header-nav ul .n01 span { background-position: 0px 0px;}
.header-nav ul .n02 span { background-position: -66px 0px;}
.header-nav ul .n03 span { background-position: -310px 0px;}
.header-nav ul .n04 span { background-position: -500px 0px;}
.header-nav ul .n05 span { background-position: -725px 0px;}

/*- 画像指定 hover背景位置 -*/
.header-nav ul .n01:hover span { background-position: 0px -58px;}
.header-nav ul .n02:hover span { background-position: -66px -58px;}
.header-nav ul .n03:hover span { background-position: -310px -58px;}
.header-nav ul .n04:hover span { background-position: -500px -58px;}
.header-nav ul .n05:hover span { background-position: -725px -58px;}

@media screen and (max-width: 1150px) {
.header-nav { display: none; margin: 0 auto;}
.header-nav ul { max-width: none; height: auto; padding-bottom: 20px; text-align: left;}
.header-nav ul * { height: auto;}
.header-nav ul li { display: block; float: left; height: 40px; margin: 0; line-height: 40px; font-size: 13px; font-size: 1.3rem; border-bottom: 1px dashed #a0a0a0;}
.header-nav ul li * { display: inline-block; position: static; text-indent: 0;}
.header-nav ul li a { display: block; padding-left: 30px; font-weight: bold;}
.header-nav ul li span { background: none; cursor: pointer;}
.header-nav ul li:hover { border-color: #a1362c;}
.header-nav ul li:hover a { color: #ccc;}

.header-nav ul .n01 ,
.header-nav ul .n02 ,
.header-nav ul .n03 ,
.header-nav ul .n04 ,
.header-nav ul .n05 { width: 49%;}

.header-nav ul .n01 ,
.header-nav ul .n03 ,
.header-nav ul .n05 { margin: 0 2% 0 0;}

.header-nav ul .n02 b ,
.header-nav ul .n03 b ,
.header-nav ul .n04 b { padding-left: 1em; font-size: 11px; font-size: 1.1rem;}

.header-nav ul .n01 *,
.header-nav ul .n02 *,
.header-nav ul .n03 *,
.header-nav ul .n04 *,
.header-nav ul .n05 * { width: auto;}

.header-nav ul .n01 a { background: url(../img/share/sp_icon01.png) center left no-repeat;}
.header-nav ul .n02 a,
.header-nav ul .n03 a,
.header-nav ul .n04 a { background: url(../img/share/sp_icon02.png) center left no-repeat;}
.header-nav ul .n05 a { background: url(../img/share/sp_icon03.png) center left no-repeat;}

}

@media screen and (max-width: 768px) {
.header-nav ul li { float: none; white-space: nowrap;}

.header-nav ul .n01 ,
.header-nav ul .n02 ,
.header-nav ul .n03 ,
.header-nav ul .n04 ,
.header-nav ul .n05 { width: 100%;}

.header-nav ul .n02 b ,
.header-nav ul .n03 b ,
.header-nav ul .n04 b { padding-left: .429em; font-size: 10px; font-size: 1rem;}

}


/*- SP用ナビ header Style -*/
.menu-wrap { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 50px; background: #1e1e1e;}
.menu-button { position: relative; z-index: 2; width: 50px; height: 42px; margin: 5px 10px 0 auto; cursor: pointer;}

.menu1 , .menu2 , .menu3 { position: absolute; width: 25px; height: 3px; border-radius: 0; background: #fff;
transition: all 0.5s ease-out; 
-o-transition: all 0.5s ease-out; /* opera */ 
-moz-transition: all 0.5s ease-out; /* firefox */
-webkit-transition: all 0.5s ease-out; /* chrome, safari */
-ms-transition: all 0.5s ease-out; /* ie */ 
}

.menu1 { top: 10px; right: 22%;}
.menu2 { top: 18px; right: 22%;}
.menu3 { top: 26px; right: 22%;}

.menuclick1 { top: 18px;
-moz-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
transform: rotate(225deg);
}
.menuclick2 { opacity: 0;}
.menuclick3 { top: 18px;
-moz-transform: rotate(-225deg);
-webkit-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}

@media screen and (max-width: 1150px) {
.menu-wrap { display: block;}
}

/*-- スタッフ・お客様共通 header Style --*/
.c-header .header-info { position: relative; width: 95%; max-width: 1236px; margin: 0 auto 45px;}

@media screen and (max-width: 1150px) {
.c-header .header-info { padding-top: 70px;}
}

/*- スタッフ header Style -*/
.c-header .header-box { position: absolute; top: -1em; right: 0; width: 350px;}

.c-header .header-box .greeting { overflow: hidden; width: 100%; margin-bottom: 16px; font-size: 12px; font-size: 1.2rem;}
.c-header .header-box .greeting a { display: inline-block; width: 82px; height: 30px; margin-left: 40px; font-size: .929em; text-align: center; line-height: 30px; text-decoration: none; vertical-align: middle; border-radius: 20px; background: #ebebeb;}

.c-header .header-box .staff-only { width: 100%; max-width: 194px; height: 58px; margin: 0 0 0 auto; font-size: 18px; font-size: 1.8rem; font-weight: 600; text-align: center; line-height: 1.4; background: url(../img/share/btn01_back.png) center no-repeat;}
.c-header .header-box .staff-only a { display: block; padding: 7px 0; color: #fff; text-decoration: none;}
.c-header .header-box .staff-only span { display: block; font-size: 11px; font-size: 1.1rem; font-weight: 300;}

@media screen and (max-width: 1150px) {
.c-header .header-box { position: absolute; top: 40px; left: 0; width: 100%; z-index: 1;}
.c-header .header-box .greeting { width: 100%; text-align: center;}
.c-header .header-box .greeting a { position: absolute; top: -60px; left: -50px; width: 80px; height: 40px; line-height: 40px; border-radius: 5px;}
.c-header .header-box .staff-only { position: absolute; top: -60px; left: 90px; width: 50%; max-width: 150px; height: 40px; padding: 2px 0; font-size: 12px; font-size: 1.2rem; line-height: 1.2; border-radius: 5px; background-size: cover;}
.c-header .header-box .staff-only a { padding: 5px 0;}
}

@media screen and (max-width: 768px) {
.c-header .header-box .greeting a { left: -40px; height: 35px; line-height: 35px;}
.c-header .header-box .staff-only { width: 50%; max-width: 150px; height: 35px; font-size: 11px; font-size: 1.1rem;}
.c-header .header-box .staff-only a { padding: 3px 0;}
}


/*----------------------------------------------
Main
------------------------------------------------*/
.main-wrap { background-color: #faf1e5;}
.contents .main-wrap { position: relative; padding-top: 5.5em;}
.contents .main-wrap .staffonryTopBtn { display: block; position: absolute; top: -4px; right: 2%; text-align: right;}
.contents .main-wrap .secret-btn { display: block; position: absolute; top: 65px; right: 18%; z-index: 1;}

@media screen and (max-width: 768px) {
.contents .main-wrap .staffonryTopBtn { width: 40%; top: -6px; right: 0%; text-align: right;}
.contents .main-wrap .staffonryTopBtn img { width: 100%;}
}


.page-title { position: relative; overflow: hidden;}
.page-title h1 { margin-bottom: 67px; float: left; padding-right: 2%; vertical-align: middle;}
.page-title h1 span { display: block; padding-bottom: 21px;}
.page-title h1 img { display: block; max-width: 100%;}
.page-title .h1ex { float: left; font-size: 18px; font-size: 1.8rem;}
.page-title a { display: block; box-sizing: border-box; width: 50%; max-width: 190px; height: 40px; margin: 0 0 0 auto; border-radius: 12px;}
.page-title a img { display: block; width: 100%;}

.page-btn { width: 80%; max-width: 400px; margin: 0 auto; padding-bottom: 5em; text-align: center;}
.page-btn li { display: inline-block; width: 45%; height: 40px; margin: 0 .5%; line-height: 40px; font-size: 14px; font-size: 1.4rem; background: #ccc;}

/*----------------------------------------------
Footer
------------------------------------------------*/
.footer { padding: 2.5% 0; border-top: 2px solid #000; background: #fff;}
.footer-inner { overflow: hidden; width: 95%; max-width: 1100px; margin: 0 auto;}

/*- ナビ footer Style -*/
.footer-nav { float: left; width: 80%; max-width: 750px;}
.footer-nav ul { height: 37px;}
.footer-nav ul * { height: 37px;}
.footer-nav ul li { display: inline; float: left; position: relative; margin-right: 3%;}
.footer-nav ul li:nth-last-of-type(1) { margin-right: 0;}
.footer-nav ul li * { display: block; position: absolute; top: 0; left: 0; text-indent: -9999px;}
.footer-nav ul li span { background: url(../img/share/f_nav.png) top left no-repeat; cursor: pointer;}

/*- 画像指定 幅 -*/
.footer-nav ul .f-n01 , .footer-nav ul .f-n01 * { width: 59px;}
.footer-nav ul .f-n02 , .footer-nav ul .f-n02 * { width: 172px;}
.footer-nav ul .f-n03 , .footer-nav ul .f-n03 * { width: 127px;}
.footer-nav ul .f-n04 , .footer-nav ul .f-n04 * { width: 154px;}
.footer-nav ul .f-n05 , .footer-nav ul .f-n05 * { width: 143px;}

/*- 画像指定 背景位置 -*/
.footer-nav ul .f-n01 span { background-position: 0px 0px;}
.footer-nav ul .f-n02 span { background-position: -59px 0px;}
.footer-nav ul .f-n03 span { background-position: -231px 0px;}
.footer-nav ul .f-n04 span { background-position: -358px 0px;}
.footer-nav ul .f-n05 span { background-position: -512px 0px;}

/*- 画像指定 hover背景位置 -*/
.footer-nav ul .f-n01:hover span { background-position: 0px -37px;}
.footer-nav ul .f-n02:hover span { background-position: -59px -37px;}
.footer-nav ul .f-n03:hover span { background-position: -231px -37px;}
.footer-nav ul .f-n04:hover span { background-position: -358px -37px;}
.footer-nav ul .f-n05:hover span { background-position: -512px -37px;}

.footer-nav02 { float: right; width: 20%;}
.footer-nav02 li { float: left; margin: 0 .5em; padding: .2em .8em; font-size: 10px; font-size: 1rem; border-radius: 1em; background: #252525;}
.footer-nav02 li a { color: #fff;}

@media screen and (max-width: 1150px) {
.footer-nav { display: none;}
.footer-nav02 { float: none; width: 100%; text-align: center;}
.footer-nav02 li { display: inline-block; float: none;}
}

.footer .copy { clear: both; padding: 2% 0 0; font-size: 10px; font-size: 1rem; text-align: center;}

p.ready_message { font-size: 14px; font-size: 1.4rem; text-align: center; min-height: 10vh; padding-top: 10vh;}