@charset "UTF-8";
@import "common.css";

/* CSS Document */
/*==================== 基本設定 ====================*/
html,body{font-size: 16px;}
body *{-webkit-box-sizing: border-box;box-sizing: border-box;}

body {font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;line-height:1.5;color: #000;}

table{font-size:1em;width: 100%;}
.none{display: none;}/*非表示*/
img{max-width:100%;}

/********** ヘッダー **********/
.l_header{position:relative;}
.l_header .cont{width:1000px;margin-right:auto;margin-left:auto;}
.header_cont{display: flex;justify-content: space-between;align-items: center;height: 52px;padding-left: 9px;}
.header_cont .logo,
.header_cont .logo{max-width: 168px;margin-right:20px;}
.header_cont .logo span,
.header_cont .logo a{display: block;}
.header_cont .buttons{display: flex;height: 100%;}
.header_cont .buttons > *{width: 62px;height: 100%;display: flex;justify-content: center;align-items: center;}

.header_cont .buttons .btn_contact a,
.header_cont .buttons .btn_navi button{display: block;width: 100%;height: 100%;}

.header_cont .buttons .btn_contact a span,
.header_cont .buttons .btn_navi button span{display: block;text-indent:150%;white-space:nowrap;overflow:hidden;}

.header_cont .buttons .btn_contact{background: #F8E68C;}
.header_cont .buttons .btn_contact a span{width: 100%;height: 100%;background: url(../images/btn_menu_contact.png) no-repeat;background-size: 50px auto;background-position: center;}

.header_cont .buttons .btn_navi button{background: #FFF;-webkit-appearance: none;appearance: none;border: none;cursor: pointer;}
.header_cont .buttons .btn_navi button span{width: 100%;height: 100%;background: url(../images/btn_menu.png) no-repeat;background-size: 32px auto;background-position: center;}


/********** メインナビ *********/
.l_main_navi{display: none;}
.menu_open #main_navi{display: block;position: fixed;width: 100%;height: 100vh;top: 0;background: rgb(0 0 0 / .5);z-index: 1000;}
.pc_main_navi{background: #F9EED2;}
.pc_main_navi .head{position: relative;background: #D8A619;display: flex;justify-content: center;align-items: center;width: 100%;height: 43px;}
.pc_main_navi .head .title{width: 83px;}
.pc_main_navi .head .title img{width:83px;}
.pc_main_navi .btn_close{position: absolute;right: 0;top: 0;width: 40px;height: 100%;}
.pc_main_navi .btn_close button{width: 40px;height: 100%;background: none;-webkit-appearance: none;appearance: none;border: none;cursor: pointer;}
.pc_main_navi .btn_close button span{display: block;text-indent:100%;white-space:nowrap;overflow:hidden;background: url(../images/menu/btn_close.png) no-repeat;background-size: 16.5px auto;background-position: center;}

.pc_main_navi ul.menu_list{background: url(../images/menu/bg_navi.png) no-repeat;background-position: center bottom -1px;background-size: 141px auto;padding-bottom: 152px;}
.pc_main_navi ul li{border-bottom: 2px solid #C27420;}
.pc_main_navi ul li a{display: flex;align-items: center;width: 100%;height: 100%;height: 45px;position: relative;}
.pc_main_navi ul.menu_list > li a span{display: inline-block;text-indent:100%;white-space:nowrap;overflow:hidden;}
.pc_main_navi ul li a::after{content: "";display: inline-block;width: 8px;height: 9px;background: url(../images/menu/icon_menu.png) no-repeat;background-size: contain;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}

.pc_main_navi ul li.menu_top a{background: url(../images/menu/mn_top.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_greeting a{background: url(../images/menu/mn_greeting.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_store .switch{height: 45px;position: relative;cursor: pointer;}
.pc_main_navi ul li.menu_store .switch::after{content: "";display: inline-block;width: 8px;height: 9px;background: url(../images/menu/icon_menu.png) no-repeat;background-size: contain;position: absolute;right: 10px;top: 50%;transform: translateY(-50%) rotate(90deg);}
.pc_main_navi ul li.menu_store .switch span{display: inline-block;width: 100%;height: 100%;text-indent:100%;white-space:nowrap;overflow:hidden;background: url(../images/menu/mn_store.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_commitment a{background: url(../images/menu/mn_commitment.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_recruit a{background: url(../images/menu/mn_recruit.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_recommend a{background: url(../images/menu/mn_recommend.png) no-repeat;background-size: auto 19px;background-position: 16px center;}
.pc_main_navi ul li.menu_report a{background: url(../images/menu/mn_report.png) no-repeat;background-size: auto 19px;background-position: left 15px center;}
.pc_main_navi ul li.menu_yamatakun a{background: url(../images/menu/mn_character.png) no-repeat;background-size: auto 19px;background-position: left 15px center;}
.pc_main_navi ul li.menu_contact a{background: url(../images/menu/mn_contact.png) no-repeat;background-size: auto 19px;background-position: 16px center;}

.pc_main_navi ul li.menu_store ul{display: none;}
.pc_main_navi ul li.menu_store ul li:not(:last-of-type){border-color: #FFF;border-width: 1px;}
.pc_main_navi ul li.menu_store ul li:last-of-type{border-bottom: none;}
.pc_main_navi ul li.menu_store ul li a{background: #C27420;color: #FFF;font-weight: bold;padding-left: 15px;font-size: 0.9375rem;}
.pc_main_navi ul li.menu_store ul li a::after{content: "";display: inline-block;width: 8px;height: 9px;background: url(../images/menu/icon_menu_w.png) no-repeat;background-size: contain;position: absolute;right: 10px;top: 50%;transform: translateY(-50%);}


/********** コンテンツ *********/
.l_contents{margin-right:auto;margin-left:auto;}

.wrapper{margin-right:auto;margin-left:auto;}

.l_breadcrumb ul{text-align:left;font-size: 0.875rem;padding: 18px 8px 0;line-height: 1;max-width: 640px;margin-right: auto;margin-left: auto;}
.l_breadcrumb li{display:inline-block;}
.l_breadcrumb li a{text-decoration: underline;}

.come_btn{display: flex;justify-content: center;}
.come_btn a{text-decoration: none;display: flex;align-items: center;position: relative;}

.come_btn.contact,
.come_btn.recruit,
.come_btn.store_back{min-width: 255px;max-width: 510px;width: 76%;margin: 0 auto;}
.come_btn.contact a,
.come_btn.recruit a,
.come_btn.store_back a{width: 100%;height: 68px;-webkit-border-radius: 5px;border-radius: 5px;}
.come_btn.contact a{background: #B7001C;}
.come_btn.recruit a{background: #FFF;}
.come_btn.store_back a{background:#dd7c1b;}
.come_btn.contact a span,
.come_btn.recruit a span,
.come_btn.store_back a span{background:none 50% 50% no-repeat;background-size: auto 100%;display: inline-block;text-indent:100%;white-space:nowrap;overflow:hidden;width: 100%;height: 18px;}
.come_btn.contact a span{background-image: url(../images/btn_goods_contact.png);}
.come_btn.recruit a span{background-image: url(../images/btn_recruit.png);}
.come_btn.store_back a span{background-image: url(../images/btn_store_back.png);}


/********** フッター **********/
.l_footer{background: #C15833;color: #FFF;position: relative;}
.l_footer{font-size:0.9375rem;}
.l_footer a{color: #FFF;font-weight: bold;}

.l_footer .copyright{text-align: right;padding-right: 10px;padding-bottom: 20px;line-height: 1;font-size:0.75rem;}

.footer_cont{padding-top: 45px;}
.l_footer .footer_navi{padding-right: 5px;padding-left: 5px;}
.l_footer .list_menu{display: flex;gap: 0 50px;margin-bottom: 60px;}
.l_footer .footer_navi p,.l_footer .list_menu li{line-height: 1;}
.l_footer .footer_navi p{margin-bottom: 30px;}
.l_footer .list_menu li{padding-bottom: 10px;}
.l_footer .list_menu .cont > ul{margin-bottom: 20px;}
.l_footer .list_menu .cont:nth-of-type(2){padding-top: 20px;}
.l_footer .list_menu div span{display: block;line-height: 1;margin-bottom: 10px;font-weight:bold;}
.l_footer .list_menu .cont div ul{padding-left: 15px;}
.l_footer .list_menu .cont div ul li::before{content: "└";font-size: 10px;}
.l_footer .list_menu .cont div ul li a{display: inline-block;padding-left: 5px;}

/*===== ページャ ======*/
.pager{display: flex;justify-content: center;align-items: center;gap: 0 13px;}
.pager li{width:36px;height:36px;}
.pager li a,.pager li span{position: relative;width:100%;height:100%;display: flex;justify-content: center;align-items: center;background: #fff;border: 1px solid #fff;color: #d8a619;border-radius: 100vh;font-weight: bold;font-size: 0.875rem;}
.pager a:link,.pager a:visited,.pager a:hover,.pager a:focus{text-decoration:none;color: #d8a619;}
.pager li a:link, .pager li a:visited{background:#fff;color: #d8a619;}
.pager li a:hover, .pager li a:focus{background:#d8a619;color:#fff;}
.pager li.dott{width:auto;height:20px;line-height:20px;color:#d8a619;}
.pager li span.cur{background:#d8a619;color:#fff;}
.pager li.arrow a{text-indent:150%;white-space:nowrap;overflow:hidden;}
.pager li.arrow a::after{position: absolute;width: 0;height: 0;top: 6px;font-size: 0.875rem;}
.pager li.arrow.prev a::after{content: "＜";left: 10px;}
.pager li.arrow.next a::after{content: "＞";left: 11px;}

.pager2 {display: flex;max-width: 480px;margin: 0 auto 40px;justify-content: center;}
.pager2 li {margin: 0 5px;font-weight: bold;font-size: 0.9375rem;}
.pager2 li a{color:#666;display:block;padding:5px 15px;-webkit-border-radius: 5px;border-radius: 5px;background-color:#ecdeb5;}


/*.common_mail*/
.common_area_mail{background-color:#fff2cf;}
.common_area_mail::before{/*content: "";display: block;width: 100%;height: 100%;position: absolute;z-index: 0;*/}
.common_area_mail .wrapper{background: url(../images/bg_mail.png) no-repeat 50% 100%;background-size: 188px auto;position: relative;}
.common_area_mail .frame{max-width:480px;margin:0 auto;position: relative;background: #FFF;padding: 15px 20px 20px;-webkit-border-radius: 3px;border-radius: 3px;}
.common_area_mail .frame::after{content: "";display: block;width: 20px;height: 21.5px;background: url(../images/parts_mail_frame.png) no-repeat 50% 50%;background-size: cover;position: absolute;bottom: -21px;left: 50%;transform: translateX(-50%);}
.common_area_mail .text{font-weight:bold;background: url(../../images/bg_mail_text.png) no-repeat 100% 100%;background-size: auto;background-size: 69px auto;max-width: 290px;margin: 0 auto;}
.common_area_mail .btn a{display: grid;place-content: center;background: #CB7836;text-align: center;max-width: 242px;padding: 13px 23px 12px;margin: 0 auto 20px;-webkit-border-radius: 5px;border-radius: 5px;}

/********** ログインフォーム **********/
.login {margin-bottom:10px;}
.login p{padding-left:10px;}
.login .form {padding:3px 0 0 10px;}
.login .form dt{font-weight:bold;}
.login .form dd{padding-bottom:5px;}

/*** BGM ***/
.l_music{width:209px;height:166px;}
.l_music .music_btn img{display:none;}
.l_music .music_btn.off img.off{display:block;}
.l_music .music_btn.on img.on{display:block;}

.l_music .music_btn.on{transition: transform 0.2s;animation: musicBounce .75s infinite ease-in-out;}

@keyframes musicBounce {
  0%   { transform: translateY(0px) scale(1); }
  25%  { transform: translateY(-5px) scale(1.05); }
  50%  { transform: translateY(0px) scale(1); }
  75%  { transform: translateY(5px) scale(0.98); }
  100% { transform: translateY(0px) scale(1); }
}

/********** レスポンシブル ********/
@media screen and (max-width:767px) {
	.pc{display:none !important;}
	.sp{}

	.wrapper{max-width: 640px;padding-right: 15px;padding-left: 15px;}
	.common_area_mail .wrapper{padding:40px 20px 240px;}
	
	.l_main_navi_pc{display:none;}
	
	.l_music{margin: 30px auto 0;}
}

@media screen and (min-width:768px) {
	html,body{font-size:18px;}

	.pc{}
	.sp{display:none !important;}

	.header_cont {background: rgba(255,255,255,0.85);height:80px;border-bottom:1px solid #cdcdcd;}
	.header_cont .logo {position: absolute;top: 15px;left: 20px;max-width: 190px;}

	.l_breadcrumb ul{font-size: 0.75rem;max-width:800px;}
	.l_footer .footer_navi{font-size: 0.875rem;}
	

	.wrapper{max-width: 800px;padding-right: 20px;padding-left: 20px;}

	.come_btn a{-webkit-transition: transform 0.3s ease-in-out;transition: transform 0.3s ease-in-out;}
	.come_btn a:hover{-webkit-transform: scale(1.1);transform: scale(1.1);}

	.come_btn.contact a,
	.come_btn.recruit a,
	.come_btn.store_back a{height: 86px;}
	.come_btn.contact a span,
	.come_btn.recruit a span,
	.come_btn.store_back a span{height: 20px;}
	.footer_cont{padding-top:60px;}
	.l_footer .list_menu .cont:nth-of-type(2){padding-top:0;}
	.l_footer .list_menu{gap: 0 70px;}
	.l_footer .list_menu{margin-bottom:40px;}
	
	/*===== ページャ ======*/
	.pager li{width: 42px;height: 42px;}
	.pager li a, .pager li span{font-size: 0.875rem;}
	.pager li.arrow.prev a::after,
	.pager li.arrow.next a::after{left: 12px;top: 10px;}

	.common_area_mail .wrapper{background-position: calc(50% - 200px) 50%;padding: 40px 20px;display: flex;flex-direction: row-reverse;}
    .common_area_mail .text{max-width: 400px;background-position: 85% 40%;padding-left:10px;}
    .common_area_mail .frame{padding: 20px 20px 25px;margin:0;}
	.common_area_mail .frame::after{bottom: 50%;left: -11px;transform: translateX(-50%) rotate(90deg);}
    .common_area_mail .btn a{max-width: 400px;padding: 13px 23px 12px;}
    .common_area_mail .btn a img{width: 60%;margin: 0 auto;}
	
	.header_cont .buttons{display:none;}
	
	.l_main_navi_pc{position:absolute;top:20px;right:20px;width:560px;z-index:900;}
	.l_main_navi_pc li span,
	.l_main_navi_pc li a{padding: 5px 10px;display: block;font-weight: bold;}
	
	.l_main_navi_pc > ul {display: flex;justify-content: right;}
	.l_main_navi_pc .li{position: relative;margin: 0 6px;}
	.l_main_navi_pc .li > a{font-size: 1rem;position: relative;}
	.l_main_navi_pc .li > span::after,
	.l_main_navi_pc .li > a::after {content: "";display: block;position: absolute;bottom: -5px;left: 50%;width: 0px;height: 5px;background: #f9c431;transform: translateX(-50%);
	-webkit-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}
	
	.l_main_navi_pc .li > span.open::after,
	.l_main_navi_pc .li.on > a::after,
	.l_main_navi_pc .li > span:hover::after,
	.l_main_navi_pc .li > a:hover::after{width:50px;}
	
	.l_main_navi_pc ul.in_list {overflow-y: hidden;height: 0;position: absolute;top: 65px;left: 0;width: 410px;display: flex;flex-wrap: wrap;
	-webkit-transition: height 0.4s ease-in-out;transition: height 0.4s ease-in-out;}
	.l_main_navi_pc ul.in_list li{padding-top:5px;width:200px;padding-right:5px;}
	.l_main_navi_pc ul.in_list li a{background: rgb(249,196, 49,0.9);font-size: 0.925rem;}
	
	.l_main_navi_pc span.open + ul.in_list{height:120px;}

	.l_main_navi_pc li span:hover{cursor:pointer;}
	
	.l_music{position:fixed;bottom:10px;right:10px;z-index:999;padding-bottom:20px;}
}

.come_presentation{margin-right:auto;margin-left:auto;max-width:750px;width:100%;text-align:center;}
.come_presentation .image{position:relative;}
.come_presentation .image a{position:absolute;display:block;}

.base_dark{display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;background: rgba(0,0,0,0.65);z-index:300;}
.base_dark.on{display:block;}
.base_dark > div{width:100%;height:100%;display:flex;align-items:center;text-align:center;}
.base_dark > div > img{position: absolute;top: 50%;left: 50%;width: 80%;transform: translate(-50%,-50%);}