@charset "utf-8";

/*
Theme Name: HANABI
Theme URI: 
Description: 
Version: 1.0
Author: 
Author URI: 
*/

/* reset css
--------------------------------------------------*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, select, input, textarea, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	border: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; }

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th { text-align: left; }

img, iframe { vertical-align: bottom; }

/* general
--------------------------------------------------*/

/* link */
a {
	color: #000;
	outline: none;
	text-decoration: none;
}

/* float */
.fl { float: left; }

.fr { float: right; }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.clearfix > li { float: left; }

/* img */
img {
	max-width: 100%;
	height: auto;
}

/* color */
.accent { color: #b3282c !important; }

.white { color: #fff !important; }

/* font */
strong { font-weight: bold; }

.fs_18 { font-size: 1.125rem; }

.fs_24 { font-size: 1.5rem; }

@media screen and (max-width: 750px) {
	.sp_fs_18 { font-size: 1.125rem; }
}

.ta_c { text-align: center; }

.lh_4 { line-height: 1.4; }

/* margin, padding */
.mb_20 { margin-bottom: 20px; }

.mb_40 { margin-bottom: 40px; }

@media screen and (max-width: 750px) {
	.sp_mb_20{ margin-bottom: 20px; }
}

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

/* layout
--------------------------------------------------*/

html { font-size: 16px; }
@media screen and (max-width: 750px) {
	html { font-size: 14px; }
}

body {
	color: #000;
	font-size: .875rem;
	font-family: sans-serif;
	line-height: 1.8;
	background: #fff
}

/* header */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 99;
	background: rgba(0, 0, 0, .75);
}
@media screen and (max-width: 750px) {
	header { background: none; }
}

.header_inner {
	position: relative;
	max-width: 1000px;
	height: 60px;
	margin: 0 auto;
	padding: 10px 20px;
}
@media screen and (max-width: 750px) {
	.header_inner { padding: 10px; }
	.header_logo img { height: 44px; }
}

.header_logo { padding: 2px 0 11px; }
.header_logo img { height: 55px; }

.header_tel {
	position: absolute;
	top: 5px;
	right: 20px;
	color: #fff;
	font-size: 20px;
}
@media screen and (max-width: 750px) {
	.header_tel { display: none; }
}

.header_tel a {
	color: #fff;
	font-size: 25px;
	font-weight: bold;
}

nav {
	position: absolute;
	bottom: 10px;
	right: 20px;
}
@media screen and (max-width: 750px) {
	nav {
		display: none;
		top: 100%;
		left: 0;
		right: 0;
		bottom: auto;
		padding: 20px;
		background: rgba(0, 0, 0, .85);
	}
}

nav li { margin-left: 20px; }
@media screen and (max-width: 750px) {
	nav li {
		width: 100%;
		margin-left: 0;
	}
}

nav a { color: #fff; }

nav a:hover { text-decoration: underline; }

@media screen and (max-width: 750px) {
	nav li a {
		display: block;
		padding: 7px 0 5px;
		text-align: center;
		border-bottom: solid 1px #bc9d51;
	}
	nav li a:hover, nav li a:focus { color: #bc9d51; }
}

.nav_tel {
	display: none;
	padding-top: 20px;
	text-align: center;
}
@media screen and (max-width: 750px) {
	.nav_tel { display: block; }
}

.nav_tel a {
	font-size: 1.2rem;
	font-weight: bold;
	border-bottom: none;
}

/* nav_btn */
.nav_btn {
	display: none;
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -21px;
}
@media screen and (max-width: 750px) {
	.nav_btn { display: block; }
}

.nav_btn a {
	display: block;
	position: relative;
	width: 40px;
	height: 40px;
	z-index: 100;
	color: #fff;
	border: solid 1px #fff;
}

.nav_btn a:hover, .nav_btn a.hover, .nav_btn a.active {
	background: #bc9d51;
	border: solid 1px #bc9d51;
}

.panel_btn_icon {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 2px;
	margin: -1px 0 0 -7px;
	background: #fff;
	opacity: 1;
	transition: .2s;
}

.panel_btn_icon:before, .panel_btn_icon:after {
	display: block;
	content: "";
	position: absolute;
	left: 0;
	width: 14px;
	height: 2px;
	transition: .3s;
	top: 50%;
	background: #fff;
}

.panel_btn_icon:before { margin-top: -6px; }

.panel_btn_icon:after { margin-top: 4px; }

.nav_btn a.close .panel_btn_icon { background: transparent; }

.nav_btn a.close .panel_btn_icon:before, .nav_btn a.close .panel_btn_icon:after { margin-top: 0; }

.nav_btn a.close .panel_btn_icon:before { transform: rotate(-45deg); }

.nav_btn a.close .panel_btn_icon:after { transform: rotate(-135deg); }

/* heading */
h2 {
	color: #b3282c;
	font-size: 2.8rem;
	line-height: 1.4;
}
@media screen and (max-width: 750px) {
	h2 { font-size: 2rem; }
}

/* top_info */
.top_info {
	background-color: #000;
	background-image: url(img/top_bg_07.jpg);
}
@media screen and (max-width: 750px) {
	.top_info { background-image: none; }
	.top_info .top_inner { padding-bottom: 10px; }
}

.top_info li { width: 50%; }
@media screen and (max-width: 750px) {
	.top_info li {
		float: none;
		width: auto;
	}
}

.top_info p { margin: 0 55px; }
@media screen and (max-width: 750px) {
	.top_info p { margin: 0 10px; }
}

.top_info p.top_shop_01, .top_info p.top_shop_02 {
	margin-top: 20px;
	padding-left: 190px;
	font-size: .875rem;
	text-align: left;
	background: no-repeat left center;
	height:120px;
}

@media screen and (max-width: 1000px) {
	.top_info p.top_shop_01, .top_info p.top_shop_02 {
		padding-left: calc(40% - 55px);
		background-size: calc(40% - 55px) auto;
	}
	.top_info p.top_shop_02 {
		height:170px;
	}
}

@media screen and (max-width: 750px) {
	.top_info p.top_shop_01, .top_info p.top_shop_02 {
		margin-top: 10px;
		margin-bottom: 20px;
		padding-left: 90px;
		background-size: 80px auto;
		height:120px;
	}
	.top_info p.top_shop_02 {
		height:170px;
	}
}

.top_info p.top_shop_01 { background-image: url(img/shop_logo_01.png); }

.top_info p.top_shop_02 { background-image: url(img/shop_logo_02.png); }
.top_info img {
	width: 100%;
	height: auto;
}

.top_info a {
	color: #fff;
	font-size: 1.25rem;
	line-height: 1.4;
}

/* copyright */
.copyright {
	padding: 20px 0;
	color: #959495;
	font-size: .875rem;
	text-align: center;
	background: #000;
}
@media screen and (max-width: 750px) {
	.copyright {
		font-size: .75rem;
		padding: 0 0 20%;
	}
}

/* footer */
footer {
	display: none;
	position: fixed;
	bottom: -130px;
	left: 0;
	width: 100%;
	z-index: 100;
}
@media screen and (max-width: 750px) {
	footer { display: block; }
}

.footer_inner {
	max-width: 750px;
	margin: 0 auto;
}

footer .tabs li { width: 50%; }

footer .tabs li a {
	display: block;
	position: relative;
}

footer .tabs li a span {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

footer .tabs li.active a span { display: block; }

footer .tab_content {
	padding: 10px 10px 0;
	background: #491012;
}

footer #footer_02 { background: #081933; }

footer .tab_content li { padding-bottom: 10px; }

footer .tab_content a {
	display: block;
	color: #B3282C;
	font-size: 20px;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	background: #fff;
}

footer #footer_02 a { color: #174794; }

footer .tab_content a span { position: relative; }

footer .tab_content a span:after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	right: -40px;
	width: 40px;
	height: 30px;
	margin-top: -20px;
	background: url(img/ico_map_red.png) no-repeat center center;
	background-size: 40px 30px;
}

#footer_02 span:after { background-image: url(img/ico_map_blue.png); }


/* top
--------------------------------------------------*/

/* top_contents */
.top_contents {
	position: relative;
	color: #fff;
	text-align: center;
	background-position: center center;
	background-size: cover;
}

.top_contents h2 { color: #fff; }

.top_inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 100px 20px;
}
@media screen and (max-width: 750px) {
	.top_inner { padding: 40px 10px; }
}

.top_link a {
	display: block;
	padding: 7px 0 5px;
	color: #bc9d51;
	font-size: 1.125rem;
	font-weight: bold;
	border: solid 1px #bc9d51;
}

.top_link a:hover, .top_link a:focus {
	color: #fff;
	background: #bc9d51;
}

.top_anchor {
	position: absolute;
	top: -80px;
}
@media screen and (max-width: 750px) {
	.top_anchor { top: 0; }
}

.top_left { padding-right: 50%; }

.top_right { padding-left: 50%; }
@media screen and (max-width: 750px) {
	.top_left, .top_right { padding: 0; }
}

/* top_img */
.top_img {
	padding-top: 80px;
	color: #fff;
	font-weight: bold;
	background-image: url(img/top_bg_01.jpg);
}
@media screen and (max-width: 750px) {
	.top_img {
		padding-top: 40px;
		font-size:12px;
	}
}

.top_logo_wrap {
	padding: 13% 0 3%;
}
.top_logo { width: 25%; }
@media screen and (max-width: 750px) {
	.top_logo { width: 50%; }
}

.top_desc {
	padding-bottom: 0;
}

/* top_concept */
.top_concept {
	color: #000;
	background-image: url(img/top_bg_02.jpg);
}

/* top_instagram */
.top_instagram { background-image: url(img/top_bg_03.jpg); }

/* top_facebook */
.top_facebook { background-image: url(img/top_bg_04.jpg); }

/* top_news */
.top_news { background-image: url(img/top_bg_04.jpg); }

/* top_sns */
.top_sns_area { width: 100%; }

.top_sns_area td {
	width: 50%;
	vertical-align: middle;
}
@media screen and (max-width: 750px) {
	.top_sns_area td { width: 100%; }
	.top_sns_title { display: none; }
}

.top_sns_wrap {
	position: relative;
	height: 0;
	padding-top: 100%;
	background: rgba(0, 0, 0, .75);
}

.top_sns {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.instafeed { margin-right: -5px; }

.instafeed li {
	width: 33.3333%;
	width: calc(100% / 3);
	margin-bottom: 5px;
}

.instafeed a {
	display: block;
	height: 0;
	margin-right: 5px;
	padding-top: 100%;
	padding-top: calc(100% - 5px);
	background: no-repeat center center;
	background-size: cover;
	transition: all .2s;
}

.instafeed a:hover { transform: scale(1.2, 1.2); }

.top_news_list {
	position: absolute;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	overflow: auto;
	background: #fff;
}

.top_news_list li {
	padding: 1em;
	color: #000;
	text-align: left;
	border-bottom: solid 5px #eee;
}

.top_news_list li .wp-block-image, .top_news_list li p { margin-bottom: 20px; }

/* top_system */
.top_system { background-image: url(img/top_bg_05.jpg); }

/* top_recruit */
.top_recruit { background-image: url(img/top_bg_06.jpg); }

/* top_access */
.top_access {
	color: #000;
	background-image: url(img/top_bg_02.jpg);
}

.top_access .top_inner { padding-bottom: 50px; }
@media screen and (max-width: 750px) {
	.top_access .top_inner { padding-bottom: 0; }
}

.top_access_img { background: url(img/top_access_img.jpg) no-repeat right center; }
@media screen and (max-width: 750px) {
	.top_access_img { background: none; }
}

/* top_gallery */
.top_gallery {
	padding: 100px 0;
	background: #000;
}
@media screen and (max-width: 750px) {
	.top_gallery { padding: 40px 0 60px; }
}

.bx-wrapper { margin: 0; }

.bx-wrapper .bx-pager {
	bottom: -20px;
	line-height: 0;
}
@media screen and (max-width: 750px) {
	.bx-wrapper .bx-pager { bottom: -10px; }
}

/* system
--------------------------------------------------*/

.system_page { text-align: center; }

.system_title {
	padding: 180px 0 100px;
	color: #fff;
	text-align: center;
	background: url(img/system/system_top.jpg) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 750px) {
	.system_title { padding: 100px 0 60px; }
}

.system_box {
	position: relative;
	padding: 80px 0;
	font-size: .875rem;
	background: url(img/top_bg_02.jpg) repeat left center;
}
@media screen and (max-width: 750px) {
	.system_box { padding: 200px 0 20px; }
}

.system_box:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 50%;
	background: no-repeat center center;
	background-size: cover;
}

.system_left { padding-right: 50%; }

.system_left:before { right: 0; }

.system_right {
	padding-left: 50%;
	background-position: right center;
}

.system_right:before { left: 0; }

@media screen and (max-width: 750px) {
	.system_left { padding-right: 0; }
	.system_right { padding-left: 0; }
	.system_box:before {
		left: 0;
		right: 0;
		width: 100%;
		height: 180px;
	}
}

.system_01:before { background-image: url(img/system/system_img_01.jpg); }

.system_02:before { background-image: url(img/system/system_img_02.jpg); }

.system_03:before { background-image: url(img/system/system_img_03.jpg); }

.system_04:before { background-image: url(img/system/system_img_04.jpg); }

/* system
--------------------------------------------------*/

.recruit_title {
	padding: 180px 0 100px;
	color: #fff;
	text-align: center;
	background: url(img/recruit/recruit_top.jpg) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 750px) {
	.recruit_title { padding: 100px 0 60px; }
}

.recruit_page h3 {
	padding: .5em 0 .3em;
	font-size: 2.8em;
	text-align: center;
	line-height: 1.4;
	background: url(img/top_bg_02.jpg) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 750px) {
	.recruit_page h3 { font-size: 2rem; }
}

.recruit_box {
	overflow: hidden;
	color: #fff;
	background: #000;
}

.recslider_area {
	max-width: 940px;
	margin: 0 auto;
	padding: 20px 20px 60px;
}
@media screen and (max-width: 750px) {
	.recslider_area { padding: 10px; }
}

.recslider_area .bx-viewport { overflow: visible !important; }
@media screen and (max-width: 750px) {
	.recslider_area .bx-viewport { overflow: hidden !important; }
}

.recslider_area .bx-viewport:before, .recslider_area .bx-viewport:after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 999;
}

.recslider_area .bx-viewport:before { left: -100%; }

.recslider_area .bx-viewport:after { right: -100%; }

.recruit_inner {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 20px;
}
@media screen and (max-width: 750px) {
	.recruit_inner { padding: 20px 10px; }
}

.recruit_box table { margin: 0 auto; }

.recruit_box td { padding: 10px; }

.recruit_box tr td:first-child { white-space: nowrap; }

.recruit_img {
	height: 380px;
	background: url(img/recruit/recruit_img_01.jpg) no-repeat center center;
	background-size: cover;
}
@media screen and (max-width: 750px) {
	.recruit_img { height: 100px; }
}

.recruit_contact {
	background: url(img/top_bg_02.jpg) no-repeat center center;
	background-size: cover;
}

.recruit_contact table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 20px;
}
@media screen and (max-width: 750px) {
	.recruit_contact table {
		display: block;
		border-collapse: collapse;
		border-spacing: 0;
		border-bottom: solid 1px #999;
	}
}

.recruit_contact td {
	width: 33.3333%;
	width: calc(100% / 3);
	padding: 20px 0;
	vertical-align: middle;
	font-size: .75rem;
	border: solid #999;
	border-width: 1px 0;
}
@media screen and (max-width: 750px) {
	.recruit_contact td {
		display: block;
		width: auto;
		padding-left: 20px;
		border-width: 1px 0 0;
	}
}

.recruit_ico_01, .recruit_ico_02 {
	margin-bottom: 10px;
	padding-left: 55px;
	line-height: 45px;
	background: no-repeat left center;
}

.recruit_ico_01 {
	font-size: 1.8rem;
	background-image: url(img/recruit/recruit_ico_01.png);
}

.recruit_ico_02 { background-image: url(img/recruit/recruit_ico_02.png); }

/* .recruit_ico_03 { background-image: url(img/recruit/recruit_ico_03.png); } */

.recruit_ico_03 {
	margin-bottom: 10px;
}

.recruit_mail {
	display: inline-block;
	padding: 0 20px;
	color: #b3282c;
	font-size: 1rem;
	font-weight: bold;
	border: solid 1px #b3282c;
}

.line_icon {
	width: 160px;
	display: inline-block;
}

@media screen and (max-width: 750px) {
	.recruit_contact table > tbody > tr >td p {
		max-width: 400px;
		margin: 0px auto 10px;
		box-sizing: border-box;
	}
	.recruit_contact table > tbody {
		display: block;
	}
	.recruit_contact table > tbody > tr {
		display: block;
	}



	.recruit_ico_03 {
		text-align: left;
	}
}