@charset "utf-8";
/* CSS Document */

#map_canvas01 {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    margin-top: 80px;}

/* clearfix
===========================================================*/
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }
.cf { *zoom: 1; }


/* video
===========================================================*/
video {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    background-size: cover; }


/* Toggle Button
===========================================================*/
#nav-toggle {
    display: none;
    position: absolute;
    right: 12px;
    top: 14px;
    width: 34px;
    height: 36px;
    cursor: pointer;
    z-index: 101; }
#nav-toggle div { position: relative; }
#nav-toggle span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #666;
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out; }
#nav-toggle span:nth-child(1) { top: 0; }
#nav-toggle span:nth-child(2) { top: 11px; }
#nav-toggle span:nth-child(3) { top: 22px; }


/* topへ戻る
===========================================================*/
.pagetop { display: none; position: fixed; bottom: 30px; right: 15px; }
.pagetop a {
	display: block;
	border: 1px solid #B9ADA1;
	background-color: #f1ece7;
	text-align: center;
	color: #24201f;
	font-size: 22px;
	text-decoration: none;
	padding: 15px 20px;
	border-radius: 35px;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.95; }
.pagetop a:hover { background-color: #DDD2C7; color: #fff; opacity: 0.9; }

/* paralax
===========================================================*/
.picture { position: relative; width: 100%; height: 500px; overflow: hidden; }
#div1 .picture {
  background: url(../img/S__8609898.jpg) center 0 no-repeat fixed;
  background-size: cover; }
#div2 .picture {
  background: url(../img/S__8609898.jpg) center 0 no-repeat fixed;
  background-size: cover; }
#div3 .picture {
  background: url(../img/s_0n82.jpg) center 0 no-repeat fixed;
  background-size: cover; }
.picture .inner { position: absolute; top: 100px; left: 30px; }


/* 基本設定
===========================================================*/
.txt_c { text-align:center; }
.txt_l { text-align:left; }
.txt_r { text-align:right; }

.float_l { float:left; }
.float_r { float:right; }
.clear { clear:both; }

.serif  { font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif; }
.bold  { font-weight:bold; }
.big   { font-size:120%; }
.small { font-size:88%; }
.red   { color:#c00; }
.mt10  { margin-top:10px; }
.mt20  { margin-top:20px; }
.mt30  { margin-top:30px; }
.mb10  { margin-bottom:10px; }

a:hover { opacity: 0.5; }


/* 共通
===========================================================*/
a {
	text-decoration: none;
	overflow: hidden;
    -webkit-transition: .2s linear;
    -moz-transition: .2s linear;
    -o-transition: .2s linear; }
img { width: 140%; height: auto; }
li:last-child {
	 margin-right: 0 !important;
	 margin-bottom: 0 !important;
	 padding-right: 0 !important;
	 padding-bottom: 0 !important; }
.scroll_image{ height: 500px; }

/*-- body --*/
body {
	width:100%; margin:0; padding:0;
	text-align: center; font-size: 14px; line-height: 1.6;
	color: #453e3d; background: #ffffff;
	font-family: "游明朝体", "Yu Mincho", YuMincho, serif; }

/*-- heder --*/
header { position: relative; }

/*-- h --*/
h1 { position: fixed; top: 0; left: 50%; margin-left: -80px; z-index: 1001; }
h1 div { position:relative; width:161px; height:161px; padding: 1px; }
h1 a {
    margin: auto;
    background: url("../img/ロゴ.jpg") center 0 no-repeat #fff;
	display: block;
    text-indent: -9999px;
	width:100%;
	height:100%; 
	background-size:161px 161px;
	border-radius: 50%; }

h2 {
	font-weight: bold;
	padding: 15px 50px 10px;
	margin-bottom: 60px;
	font-size: 26px;
	border-top: 1px solid #a69995;
	border-bottom: 4px double #a69995;
	display: inline-block; }

h3 { font-weight: bold; font-size: 26px; line-height: 1; }

h2, h3, th, td, p, a { font-family: "游明朝"; }


/* header */
header .video_in { height: 700px; position: relative;  }
header .down_scroll { width: 83px; position: absolute; bottom: 30px; left: 50%; margin-left: -35px; }

#global-nav{ background: #f1ece7; z-index: 1; position: fixed; width: 100%; }
#global-nav ul li a { color: #24201f; }
#global-nav li a span { font-size: 12px; }

#mobile-head { z-index: 1000; }
 
/*-- concept --*/
#concept { padding: 100px 0 110px; background: #f1ece7; position: relative; }
#concept .lead {  font-size: 26px; font-weight: bold; }
#concept .txt { line-height: 2; }
#concept ul { margin-top: 50px;}
#concept li { float: left; margin-right: 10px; width: 130px; }

#concept .store_box h3 { padding: 0 0 20px; }
#concept .store_box .azabu .spec { text-align: left; background: #fff; padding: 10px 20px 20px; margin-top: 20px; }
#concept .store_box .azabu .spec span { font-weight: bold; display: block; margin-top: 10px; }

#concept ul.concept_note { width: 420px; border: 1px solid #D7D7D7; padding: 10px 30px 10px 50px; margin: 0 auto; text-align: left; line-height: 1.8; }
#concept ul.concept_note li { float: none; width: 100%; list-style: disc; }



.box2 {padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #1d21294d;
}
.box2 p {
    margin: 10px; 
    padding: ;}

 .box2 span {
    color: #000000;
    font-size: 22px;}

/*-- menu --*/
#menu { padding: 105px 0 110px; background: #eeeae0; }
#menu ul { padding-bottom: 70px; }
#menu li { float: left; width: 313px; margin-right: 20px; }
#menu h3 { padding-bottom: 25px; }
#menu h3 span { font-size: 14px; }
#menu p { padding-top: 25px; text-align: left; }

#menu .link_gnavi a { 
	width:49%;
	box-sizing:border-box;
	padding: 10px 60px 10px 40px;
	color: #ffffff;
	background: #6e617b;
	display: inline-block;
	font-size: 16px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;
	font-weight: bold;
	position: relative;
	vertical-align:middle; }
#menu .link_gnavi a span {  font-size: 14px; font-weight: normal; }
#menu .link_gnavi a .linkmark { content: url(../img/linkmark.png) ; position: absolute; top: 28px; right: 110px; }
#menu .link_gnavi a::after { content: url(../img/btngnavi_arrow.png) ; position: absolute; top: 25px; right: 40px; }

/*-- access --*/
#access { padding: 100px 0 110px; }
#access .access_in { background: #ffffff; }
/*#access .store { background: url(../img/S__8609898.jpg) no-repeat center; background-size: contain; }
#access .store .height_box { background-color: rgba(255,255,255,0.8); }*/
#access .store h3 { padding-bottom: 25px; line-height:1.9; }
#access .store h3 span { font-size: 60%; }
#access .store h3 span.tag {
    background: #8E108D;
    padding: 15px 25px;
    border-radius: 5px;
    color: #fff;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; }
#access .store h3 a { font-size: 70%; text-decoration: underline; color: #6d5858; line-height: 4;}
#access .store.last-child h3 span.tag { background: #E6BA0A; }
#access .store.last-child h3 a { color: #E6BA0A; }

#access .store .address { font-size: 16px; padding: 0 0 2em; }
#access .store { line-height: 2.2; }
#access .store .metro { line-height: 1.8; padding-top: 25px; position: relative; }
#access .store .metro::after {
	content: url(../img/map_arrow.png);
	position: absolute;
	bottom: -50px;
	left: 50%;
	margin-left: -10px; }
#access .store .metro span { padding-bottom: 5px; }
#access .store .address .tel { color: #453e3d; }

#access .store .spec p { font-size: 14px; text-align: left; background: #F8F8F7; padding: 10px 15px 25px 25px; line-height: 1.4; }
#access .store .spec span { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: bold; margin-left: -1em;}

#access .store .hp { width: 165px; margin: 30px auto 0; }

.box3 {border: 4px double #979090; margin: 2em 0;padding: 2em;}

/*-- recruit --*/
#recruit { padding: 100px 0 110px; }
#recruit .recruit_in { background: #f7f5f0; }
#recruit h3 { padding: 0 0 60px; }
#recruit table { 
	border: 1px solid #cccccc;
	text-align: left;
	font-size: 16px;
	margin: 0 auto;
	border-collapse: collapse;
	background: #ffffff; }
#recruit th, #recruit td { padding: 15px; }
#recruit tr { border-bottom: 1px solid #cccccc; }
#recruit tr:last-child { border-bottom: 1px none #cccccc; }
#recruit th { background: #ece9e3; width: 25%; border-right: 1px solid #cccccc; font-weight: bold; }

/*-- sns --*/
#sns {
	padding: 100px 0 110px;
	background-color: #ede8e4;
	background-image: url(../img/bg_sns.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center; }
#sns .fb-page.fb_iframe_widget { margin-left: 20px; vertical-align: top; margin-bottom: 20px; }
#sns .tw { width: 310px; display: inline-block; margin-bottom: 20px; }

/*-- footer --*/
footer { background: #261709; color: #ffffff; font-size: 12px; padding: 15px 0 20px; }

@media only screen and (max-width: 640px) {
	
/* map
===========================================================*/
#map_canvas01,
#map_canvas02 {width:100%;height: 250px; margin-top: 60px;}

/* paralax
===========================================================*/
#div1, #div2, #div3  { display: none; }

.inner { width: 90%; margin: 0 auto; }
.no_sp { display:none; }

/*-- h --*/
h1 { margin-left: -47px; }
h1 div { width: 95px; height: 95px; }
h1 a { background-size: 95px 95px; }
h2 { margin: 50px 0 40px; }
/*#concept h2,
#menu h2 { margin: 50px 0 40px; }*/

/*-- body --*/
body { min-width:320px; }

/*-- header --*/
header .video_in { height: 300px;  background:url(../img/S__10649606.jpg) no-repeat center center; background-size: cover; z-index: 10; }
header .down_scroll { bottom: 0; width: 70px; background-color: rgba(45,45,45,0.5); }

#global-nav ul { padding: 20px 0 0; }

#top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a { padding: 14px 0; }

video { display: none; }

/*-- concept --*/
#concept { padding: 55px 0 60px; margin-top: -55px; }
#concept .lead { font-size: 20px; }
#concept ul { width: 100%;}
#concept li { width: 48%; margin-right: 3%; padding-bottom: 10px; }
#concept li.sp_fold { margin-right: 0; }

#concept .store_box { padding: 40px 0 0; }
#concept .store_box .azabu { padding: 0 0 30px; }

#concept ul.concept_note { width: 82%; padding: 10px 20px 10px 35px; }
#concept ul.concept_note li { line-height: 1.6; }


/*-- menu --*/
#menu { padding: 55px 0 5px; margin-top: -55px;}
#menu h3 { padding-bottom: 15px; font-family: "YuMincho Medium"; }
#menu ul { padding-bottom: 35px; }
#menu li { width: 100%; padding-bottom: 30px; }
#menu p { padding-top: 10px; text-align: center; }
#menu .link_gnavi a { width:100%; padding: 10px 20% 10px 10%; }
#menu .link_gnavi a .linkmark { top: 28px; right: 13%; }
#menu .link_gnavi a::after { top: 25px; right: 5%; }


/*-- access --*/
#access { padding: 55px 0 5px; margin-top: -55px; }
#access .store { padding-bottom: 40px; }
#access .store h3 { padding-bottom: 20px; font-family: "YuMincho Medium"; }
#access .store:last-child { padding-bottom: 0; }
#access .store .metro { padding-top: 10px; }
#access .store .metro::after { bottom: -40px; }


/*-- recruit --*/
#recruit { padding: 55px 0 5px; margin-top: -55px; }
#recruit h3 { padding: 0 0 40px; font-family: "YuMincho Medium"; }

/*-- sns --*/
#sns { padding: 55px 0 10px; }
#sns .fb-page.fb_iframe_widget { display: block; margin: 0 0 20px; }
}

@media only screen and (min-width: 640px) {

.inner { width: 90%; margin: 0 auto; }

/*-- header --*/
header .mainV { background:url(../img/S__10649606.jpg) no-repeat center; background-size:cover; position:fixed; height:700px; width:100%; z-index:-100; }

/*-- concept --*/
#concept .store_box { padding: 40px 0; background: #F8F8F7; margin: 60px 0; }
#concept .store_box .store { width: 70%; margin: 0 auto; padding: 0 4.95%; }
#concept .store_box .store.azabu { border-right:1px dotted #ccc; }

#concept .image-set li { margin-bottom:5px; }
#concept .image-set li:nth-child(7) { margin-right:0; }
#concept .image-set .shibuya { clear:left; }

/*-- sns --*/
#sns .twitter { margin-right: 20px; }

/*-- access --*/
#access { background: #ffffff; }
#access .store { width: 80%; margin: 0 auto; }
#access p { padding: 0 60px;  }

#access .store .spec { padding: 10px 60px 0; }
#access .store .spec p { border-right: none; }

/*-- recruit --*/
#recruit { background: #f7f5f0; }


}

@media (min-width: 640px) and (max-width: 980px) {

/* map
===========================================================*/
#map_canvas01,
#map_canvas02 { width:90%; }

/*-- h --*/
h1 { margin-left: -85px; }
h1 a {  width:130px; height:130px;  background-size:130px 130px; }

/*-- header --*/
header .back_movie { height: 400px; }
#global-nav ul { padding: 70px 0 0; }

/*-- concept --*/
#concept ul { width: 100%; }
#concept li { width: 13.4%; margin-right: 1%; }

/*-- menu --*/
#menu li { width: 32%; margin-right: 2%; padding-bottom: 30px; }
#menu p { padding-top: 10px; text-align: center; }

/*-- access --*/
#access { padding: 100px 0; }
#menu ul { padding-bottom: 40px; }

/*-- sns --*/
#sns .fb-page.fb_iframe_widget { margin: 0 10px; }
#sns .tw { width: 310px; display: block; margin: 0 auto 20px; }

}

@media only screen and (max-width: 980px) {

.inner { width: 90%; margin: 0 auto 55px; }
#concept .inner { margin: 0 auto; }
.no_br, .no_pc { display:none; }


/*-- header --*/
#mobile-head { background: #f1ece7; width: 100%; height: 56px; position: fixed; top:0; left:0; }
#global-nav {
	position: fixed;
	/* 開いてないときは画面外に配置 */
	top: -500px;
	background: #333;
	width: 100%;
	text-align: center;
	padding: 10px 0;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	z-index: 20; }
#global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; }
#global-nav ul li { float: none; position: static; border-bottom: 1px dotted #fff; }
#global-nav ul li:last-child { border-bottom: 1px none #fff; }
#top-head #global-nav ul li a,
#top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; }
#nav-toggle { display: block; }

/*-- concept --*/
#concept .txt { text-align:left; }
#concept .store_box p { text-align:left; }
.box2 {padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #1d21294d;
}
.box2 p {
    margin: 10px; 
    padding: ;}




/* #nav-toggle 切り替えアニメーション */
.open #nav-toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg); }
.open #nav-toggle span:nth-child(2) { width: 0; left: 50%; }
.open #nav-toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg); }

/* #global-nav スライドアニメーション */
.open #global-nav {
	/* #global-nav top + #mobile-head height */
	-moz-transform: translateY(556px);
	-webkit-transform: translateY(556px);
	transform: translateY(556px); }

}

@media only screen and (min-width: 980px) {
	
.inner { width: 980px; margin: 0 auto; }

/*-- header --*/
#global-nav ul { width: 860px;  height: 70px;  padding-top: 30px; margin: 0 auto; display: flex;}
#global-nav ul li { float: left; margin-right: 80px; }
#global-nav ul li:last-child, #global-nav ul li.menu { margin-right: 0; }
#global-nav ul li.li_menu { margin-right: 260px; }
#global-nav ul li a {
    display: block;
	padding: 5px 20px;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 2px solid #d9d4c6;
	text-decoration: none;
	line-height: 1.2;
	color: #24201f; }

/*-- concept --*/
.box2 {padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #1d21294d;
}
.box2 p {
    margin: 10px; 
    padding: ;}