@charset "UTF-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
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, font, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
ol, ul {
    list-style: none;
}
/* reset.cssに下記を追加 */
header,
footer,
main,
nav,
article,
aside,
section{
  display: block;
}

:focus {outline: 0;}
.clearfix::before {
	display: table; content: " ";
}
.clearfix::after {
	display: table; content: " ";
}
.clearfix::after {
	clear: both;
}
.clearfix {
}
.fixed {
	top: 0px; position: fixed;
}




/* Bootstrapのガター幅を調整するための汎用CSS
------------------------------------------------------------*/
.row-clear{ margin-left:-15px;  margin-right:-15px}
.row-clear >div{ padding-right:0px;  padding-left:0px}

.row-0{ margin-left:0px;  margin-right:0px}
.row-0 >div{ padding-right:0px;  padding-left:0px}
.row-5{ margin-left:-5px;  margin-right:-5px}
.row-5 >div{ padding-right:5px;  padding-left:5px}
.row-10{ margin-left:-10px;  margin-right:-10px}
.row-10 >div{ padding-right:10px;  padding-left:10px}

/* Bootstrapの横並びボックスの高さ統一<div class="row row-eq-height">
------------------------------------------------------------*/
.row-eq-height {
    display: flex;
    flex-wrap: wrap;
}


html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 62.5%; /* 16px x 0.625 = 10px(=1rem) */
}
body {
	font-size: 1.6rem;/* 16px★ */
	line-height: 2rem;
	padding: 0px;
	background-color:#F93;
}

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

body {
	font-size: 1.6rem;/* 16px★ */
	line-height: 2rem;
	padding: 0px 0px 0px;
}
}


.bgwh{
	background-color:#FFF;
}


/* 共通
------------------------------------------------------------*/
.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

/*　※マーク　*/
.komemark {
    text-indent: -1em;
    margin-left: 1em;
}


/* フォント
------------------------------------------------------------*/
h1 {
  position: relative;
  padding: 3rem 0rem 1rem 0rem;
  text-align: center;
  border: 3px solid #000;
  background: #fff;
  width:80%;
  font-size:3vw;
  font-weight:bold;
  margin:4rem auto 1rem auto;
}
@media screen and (min-width: 640px) {
h1 {
  font-size:2rem;
}
}
@media screen and (min-width: 991px) {
h1 {
  font-size:3rem;
  margin:4rem auto 2rem auto;
}
}
h1:before,
h1:after {
  position: absolute;
  content: '';
}

h1:before {
	top: -40px;
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	border: 3px solid #000;
	border-radius: 50%;
	background-color: #FFF;
}

h1:after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
	background-color: #FFF;
}

h1 img {
  position: absolute;
  z-index: 1;
  top: -30px;
  left: calc(50% - 25px);
  width: 51px;
  height: 51px;
  text-align: center;
}

h1 span {
  position: relative;
  z-index: 1;
}

h2 {
	display        : inline-block;
	color          : #ffffff;            /* 文字の色 */
	font-size      : 4vw;               /* 文字のサイズ */
	letter-spacing : 0px;                /* 文字間 */
	text-shadow    :
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000; 
	border-bottom: solid 2px #000;
	position: relative;
 	background-color: #E86222;
	padding:0.7rem 2rem 0.3rem 1rem;
	margin:1rem 0 1rem 0;
}
h2:after{
  content: "";
  border-bottom: solid 2px #FFF;
  position: absolute;
  top: 0px;
  left: 0px;
  width: calc(100%);
  height: calc(100%);
}
@media screen and (min-width: 480px) {
h2 {
	font-size      : 2.2rem;               /* 文字のサイズ */
}
}
@media screen and (min-width: 767px) {
h2 {
	font-size      : 3.0rem;               /* 文字のサイズ */
	letter-spacing : 6px;                /* 文字間 */
	text-shadow    : 
	   2px  2px 0px #000000,
      -2px  2px 0px #000000,
       2px -2px 0px #000000,
      -2px -2px 0px #000000,
       2px  0px 0px #000000,
       0px  3px 0px #000000,
      -2px  0px 0px #000000,
       0px -2px 0px #000000;        /* 文字の影 */
}
}

h3 {
  color: #E86222;
  font-size:2.4rem;
  font-weight:bold;
  position: relative;
  margin:2rem 1rem 2rem 0;
  text-shadow:#000 1px 1px;
}
h3:after {
  content: "";
  display: block;
  height: 6px;
  background: -webkit-linear-gradient(to right, #E86222, #000);
  background: linear-gradient(to right, #E86222, #000);
}

@media screen and (min-width: 990px) {
h3 {
  margin:0 1rem 2rem 0;
}
}






a{
	color: #FF6600;
}
a:visited{
	color: #FF6600;
}
a:hover{
	color: #333;
}


.fontredbold{
	color:#F00;
	font-weight:bold;
}



/*---maincolor: #E86222;----*/





/*--------------ページトップ--------------*/
.pagetop {
	display: none;
	position: fixed;
	bottom: 30px;
	right: 10px;
}
.pagetop a {
	display: block;
	width: 50px;
	height: 50px;
	background-color: #000;
	text-align: center;
	color: #E86222;
	font-size: 2.4rem;
	text-decoration: none;
	line-height: 50px;
}



/*--------------ヘッダー--------------*/
.header{
	border-top:10px #E86222 solid;
}



/*--------------メニュー--------------*/
.global-nav {
 	background-color: #E86222;
	border-top: solid 2px #FFF;
	border-bottom: solid 2px #000;
	overflow:hidden;
}



.global-nav ul{
	margin:0;
	padding:0;
}
.global-nav li{
	width:32%;
	padding:0.5rem 0;
	float:left;
	list-style:none;
	text-align:center;
}

.global-nav li a{
	width:100%;
	text-align:center;
	display:block;
	text-decoration:none;
	color          : #ffffff;            /* 文字の色 */
	font-size      : 4vw;               /* 文字のサイズ */
	letter-spacing : 0px;                /* 文字間 */
	text-shadow    :
       1px  1px 0px #000000,
      -1px  1px 0px #000000,
       1px -1px 0px #000000,
      -1px -1px 0px #000000,
       1px  0px 0px #000000,
       0px  1px 0px #000000,
      -1px  0px 0px #000000,
       0px -1px 0px #000000; 
}
.global-nav li a:visited{
	color          : #ffffff;            /* 文字の色 */
}
.global-nav li a:hover{
	color          : #000;            /* 文字の色 */
	text-shadow    :
       1px  1px 0px #fff,
      -1px  1px 0px #fff,
       1px -1px 0px #fff,
      -1px -1px 0px #fff,
       1px  0px 0px #fff,
       0px  1px 0px #fff,
      -1px  0px 0px #fff,
       0px -1px 0px #fff; 	
}
@media screen and (min-width: 480px) {
.global-nav li{
	padding:0.8rem 0 0.5rem 0;
}
.global-nav li a{
	font-size      : 2.2rem;               /* 文字のサイズ */
}
}

@media screen and (min-width: 767px) {
.global-nav li{
	padding:2rem 0px;
}
.global-nav li a{
	font-size      : 3rem;               /* 文字のサイズ */
	letter-spacing : 6px;                /* 文字間 */
	text-shadow    : 
       2px  2px 0px #000000,
      -2px  2px 0px #000000,
       2px -2px 0px #000000,
      -2px -2px 0px #000000,
       2px  0px 0px #000000,
       0px  2px 0px #000000,
      -2px  0px 0px #000000,
       0px -2px 0px #000000; 
}
}




.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
  margin:0 0 0 0;
  padding:0;
  opacity:0.8;
}

@media screen and (min-width: 768px) {
.fixed {max-width: 750px;}
}
@media screen and (min-width: 992px) {
.fixed {max-width: 970px;}
}
@media screen and (min-width: 1200px) {
.fixed {max-width: 1170px;}
}




/*--------------フッター--------------*/
.footer{
}
.copy{
	background-color:#E86222;
	padding:0.3rem 0;
	text-align:center;
	font-size      : 2vw;               /* 文字のサイズ */
}
@media screen and (min-width: 767px) {
.copy{
	font-size      : 1.6rem;               /* 文字のサイズ */
}
}


/*--------------共通コンテンツ--------------*/
.contents{
	margin:0;
	padding:1rem 2rem 2rem 2rem;
}
















/* ★トップページ
------------------------------------------------------------*/
/*--------------トップ03--------------*/
.top03box {
	overflow: hidden;
	max-width: 100%;
	height: auto;
	margin:1rem 0 1rem 0;
}
@media screen and (min-width: 767px) {
.top03box {
	margin:2rem 0 3rem 0;
}
}
.top03box img {
	display: block;
	transition: 0.5s;
}
.top03box img:hover {
	transform: scale(1.5, 1.5);
}



/*--------------トップお知らせ--------------*/
.topnewsbox{
	padding:20px;
	display: inline-block;
	width:80%;
	margin:2rem 10%;
	border:#000 solid 5px;
	position: relative;
	background-color:#FFF;
}
@media screen and (min-width: 767px) {
.topnewsbox{
	width:60%;
}
}

.topnewsbox:after{
  content: "";
  border: solid 3px #E86222;
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}


/*--------------グループサイト--------------*/
.yudoubox{
	border: 2px solid #FF0;
	background-color:#000;
	padding:0.5rem;
	width:97%;
	margin:0 1% 1% 1%;
}
@media screen and (min-width: 767px) {
.yudoubox{
	width:45%;
	margin:0 2% 2% 2%;
}
}
.y_title a{
	color:#F00;
	font-weight:bold;
	font-size:1.8rem;
	text-decoration:none;
}
@media screen and (min-width: 767px) {
.y_title a{
	font-size:2.0rem;
}
}

.y_title a:visited{
	color:#F00;
}
.y_title a:hover{
	color:#FF0;
}
.y_thum{
	float:left;
	margin-right:2rem;
}
.y_com{
	display:block;
	font-size:1.4rem;
margint:0 1rem 0 16rem;
color:#FFF;
}
.y_url{
	clear:both;
}
.y_url a{
	color:#FF0;
	text-decoration:none;
}
.y_url a:visted{
	color:#FF0;
	text-decoration:none;
}
.y_url a:hover{
	color:#F00;
}


.yudoubox2{
	border: 2px solid #E86222;
	background-color:#000;
	padding:0.5rem;
	width:97%;
	margin:0 1% 1% 1%;
}
@media screen and (min-width: 767px) {
.yudoubox2{
	width:45%;
	margin:0 2% 2% 2%;
}
}
.y_title2 a{
	color:#E86222;
	font-weight:bold;
	font-size:2.0rem;
	text-decoration:none;
}



/*　バナー並び　*/
.topban li{
	margin:0rem 0rem 0.5rem 0.5rem;
	float:left;
}


/*　トップfacebook　*/
.fbbox{
	display:block;
	text-align:center;
	margin:0 5%;
	overflow:hidden;
		width: 90%;
		
}
@media screen and (min-width: 768px) {
.fbbox{
	display:block;
	text-align:center;
	margin:0 auto;
	overflow:hidden;
		width: 500px;
}
}















/* ★二軍店とはページ
------------------------------------------------------------*/
/*　冒頭文章　*/
.shopinfobox{
	padding:20px;
	display: inline-block;
	width:80%;
	margin:2rem 10%;
	border:#E86222 solid 5px;
	position: relative;
	background-color:#FC9;
}

.shopinfobox:after{
  content: "";
  border: solid 3px #000;
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}



/*　写真　*/
.shopimage{
	margin:2rem auto;
	width:80%;
}
@media screen and (min-width: 768px) {
.shopimage{
	width:60%;
}
}
/*　表　*/
.gaiyoutable{
	width: 100%;
	padding:0px;
	margin: 10px 0 0 0;
}
.gaiyoutable th{
	border-bottom: 1px solid #E86222;
	background-color: #FFCC99;
	padding: 5px;
	text-align: left;
	display: block;
}
.gaiyoutable td{
	border-bottom:1px solid #F2F2F2;
	padding:5px;
	display:block;
	text-align:left;
}



@media screen and (min-width: 768px) {
.gaiyoutable{
	border:none;
	font-size:1.1em;
	padding:0px;
	margin: 20px auto 10px auto;
}
.gaiyoutable th{
	border-bottom:1px solid #E86222;
	background-color: #FFCC99;
	padding:5px;
	white-space: nowrap;
	text-align: left;
	display:table-cell;
}
.gaiyoutable td{
	border-bottom:1px solid #E86222;
	padding:5px;
	display:table-cell;
}
}


/*　店舗コーナー紹介　*/
.iteminfo{
	margin:0 0 3rem 0;
}
@media screen and (min-width: 990px) {
.iteminfo{
	margin:0 0 5rem 0;
}

}

.imgbox{
	position:relative;
}
.ontext{
	position:absolute;
	    font-size: 2rem;
    text-align: center;
	font-weight:bold;
    color: #E86222;
	  text-shadow    : 
       1px  1px 1px #ffffff,
      -1px  1px 1px #ffffff,
       1px -1px 1px #ffffff,
      -1px -1px 1px #ffffff,
       1px  0px 1px #ffffff,
       0px  1px 1px #ffffff,
      -1px  0px 1px #ffffff,
       0px -1px 1px #ffffff;  
    background: rgba(0,0,0,.7);
  top: 95%;
  left: 50%;
  -ms-transform: translate(-50%,-95%);
  -webkit-transform: translate(-55%,-95%);
  transform: translate(-50%,-95%);
  margin:0;
  padding:0.5em 1em;
}
















/* ★案内マップページ
------------------------------------------------------------*/

/*　案内写真　*/
.mapinfo{
	margin:0 0 3rem 0;
}

@media screen and (min-width: 990px) {
.mapinfo{
	margin:0 0 5rem 0;
}
}




.arrow{
  width: 120px;
	margin:0 auto;
}
.arrow::before{
  content: "";
  display: block;
  margin: 0 auto;
  width: 80px;
  height: 30px;
  background: #E86222;
  background: linear-gradient(to bottom, #fff, #E86222);
}
.arrow::after{
  content: "";
  display:block;
  border-top: 60px solid #E86222;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  transform-origin: left top;
  transform: scaleY(.5);
}




/*　グーグルマップ　*/
.ggmap{
	margin: 0;
	padding: 0;
}




.annai{
	font-size:1.6rem;
	padding:20px 20px 20px 50px;
}

/*　バナーボックス　*/
.banner_wrap{
	display:flex;
	margin:5px auto 10px auto;
	flex-wrap:wrap;
	clear:both;
}

.banner_box{
	margin:10px 1%;
	width:95%;
}

@media screen and (min-width: 375px) {
.banner_box{
	margin:10px 1%;
	width:48%;
}
}
@media screen and (min-width: 540px) {
.banner_box{
	width:31%;
}
}
@media screen and (min-width: 768px) {
.banner_box{
	margin:10px 1%;
	width:23%;
}
}

@media screen and (min-width: 992px) {
.banner_box{
	margin:10px 1%;
	width:18%;
}
}



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

}