@charset "utf-8";
/*=================================
ACCESS/予約/お問い合わせページレイアウト
===================================*/
/*==============
予約ボックス
==============*/
.net-box{
width: 100%;
text-align: center;
margin-bottom: 0px
}
.net-box a{
font-size: 24px;
font-weight: bold;
color:#265CFF;
margin-top: 30px;
margin-bottom: 10px;
display: block;
text-align: center;
letter-spacing: 0.2em
}
.net-box p{
	line-height: 1.8em
}
.net-box p.y-small{
text-align: center;
font-size: 13px;
	margin-bottom: 30px
}
.net-box img{
width: 250px;
height: auto;
margin-left: auto;
margin-right: auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/
margin-bottom: 15px
}
/*ご予約方法*/
.net-box-text{
width: 100%;
background-color: rgba(255, 255, 255, 0.6);
text-align: left;
}
.net-box-text p.y-tittle{
width: 100%;
color: #265CFF;
font-weight: bold;
padding-bottom: 0px;
border-bottom: 1px solid #265CFF;
display: inline-block;
margin-bottom: 15px;
font-size: 16px;

}
.net-box-text p.y-zikan15{
padding-left: 15px;
line-height: 1.6em;
font-size: 14px
}
.net-box-text p.y-futoi{
font-weight: bold;
padding-bottom: 5px;
font-size: 14px
}
.net-box-text p.y-ya{
padding-left: 35px;
padding-bottom: 5px;
color: #265CFF;
font-size: 14px
}
.net-box-text p.text-info{
font-size: 15px;
	line-height: 1.5em
}
/*==========アクセス==========*/
/*内容*/
.area p{
font-size: 15px;
line-height: 1.8em;
letter-spacing: 0.05em;
text-align:justify;
margin-bottom: 0px;
color: #000;
}
.area ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}


/*プロフィール*/
table {}
.tbl {
width: 100%;
color: #000;
text-align:left;
border-spacing:0px;
margin-top: auto;
}
.tbl tr {vertical-align: baseline;}
.tbl th {
font-weight: bold;
border-bottom: 1px solid #265CFF;
}
.tbl td {
border-bottom: 1px solid #265CFF;
}
/*地図*/
.map-area{
margin-bottom:30px;
width:  100%;
height: auto;
}

/*電車でお越しの方*/
/*どちらの最寄り駅から来られますか？*/
.area p.train-text1{
display: block;
text-align: center;
font-weight: 600;
color: #000;
}
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-family: "Klee One", cursive;
text-align: left;
color: #fff;
background-color: #265CFF;
}

.yagirushi{
display: flex;
justify-content: center;
width: 100%;
height:auto;
border-top:1px solid #000;
margin-top: 35px;
margin-bottom: 35px}
.yagirushi p{
width:0;
height:0;
border-style:solid;
border-width: 13px 17.5px 0 17.5px;
border-color: #000 transparent transparent transparent;
margin: 0;
}
/*==============
駅ボタン
==============*/
.train-b{
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: space-around;
}

.train-b a{
background-color:rgba(255, 255, 255, 0.6);
text-align:center;
border: 1px solid #265CFF;
color: #265CFF;
font-family: "Klee One", cursive;
font-weight: 500;
font-style: normal;
transition:all 0.3s;

}
.train-b a:hover {
background-color: rgba(255, 255, 77, 0.8);
color: #265CFF;cursor: pointer;}
/*==============
行き順ボックス
==============*/
.train-box{
width: 100%;
margin-bottom: 0px
}
.train-box ul{
display: flex;
justify-content: space-between;
}
.train-box li{
list-style: none;
}
/* ########### 427px 以下 ########### */
@media screen and (max-width: 427px) {

/*プロフィール*/
table {}
.tbl {
letter-spacing: 0.0em;
}
	
.tbl th {
display: block;
width: 100%;
font-size: 14px;	
padding:10px 0px 0px 10px;

}
.tbl td {
display: block;
width: 100%;
font-size: 14px;	
padding:10px 0px 15px 10px;
}	
.border-remove {
  border: none !important;
}
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 15px;
letter-spacing: 0em;
padding:10px 5px 10px 10px;
margin-top: 50px;
margin-bottom:30px
}
}		
/* ########### 529px 以下 ########### */
@media screen and (max-width: 529px) {
	
/*店舗画像エリア*/
.area ul.area-3-box{
margin-bottom: 30px;
}
.area li , .area-3-1{
width: 100%;
margin-bottom: 15px;
display: flex;
flex-direction: column; 
}
.area li.area-3-2{
width: 48%;
margin-bottom: 0px;
display: flex;
flex-direction: column; 
}
.area li .area-3-1 , .area-3-2 img{
width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px
}
/*店舗画像テキストエリア*/
.area p.space-text{
font-size: 14px;
line-height: 1.4em;
padding:5px 15px 5px 5px;
flex-grow: 1; 
}

/*電車でお越しの方*/
/*どちらの最寄り駅から来られますか？*/
.area p.train-text1{
font-size: 15px;
letter-spacing: 0em;
margin-top:30px;
margin-bottom:40px
}
	
/*駅ボタン*/	
.train-b a{
width: 153px;
height: auto;
padding: 8px 0px 8px 0px;
font-size: 15px;
letter-spacing: 0em;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
margin-bottom:15px;
}

/*==============
行き順ボックス
==============*/

.train-box img{
width: 100%;
height: auto;
vertical-align: bottom;
}
.train-box li.t-img{
width: 100%;
}
.train-box li.t-text{
width: 100%;
}
.t-img {
  order: 2;
}
.t-text {
  order: 1;
}
/*ご予約*/
.net-box img{
width: 200px;
}
/*ご予約方法*/
.net-box-text{
padding:20px;
}
}
/* ########### 428pxから768pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 768px) {
/*プロフィール*/
table {}
.tbl {
letter-spacing: 0.0em;
}
.tbl th {
width: 35%;
font-size: 14px;	
padding:15px 0px 15px 15px;

}
.tbl td {
width: 65%;
font-size: 14px;	
padding:15px 0px 15px 5px;
}
}
/* ########### 428pxから530pxまで ########### */
@media screen and (min-width: 428px) and (max-width: 530px) {
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 17px;
letter-spacing: 0em;
padding:10px 5px 10px 10px;
margin-top: 50px;
margin-bottom:30px
}
}
/* ########### 531px 以上 ########### */
@media screen and (min-width: 531px) {

.area li {
width: 100%;
height: auto
}
/*店舗画像エリア*/
.area ul.area-3-box{
margin-bottom: 30px;
}
.area li , .area-3-1{
width: 32%;
display: flex;
flex-direction: column; 
}
.area li.area-3-2{
width: 32%;
display: flex;
flex-direction: column; 
}
.area li .area-3-1 , .area-3-2 img{
width:100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px
}
/*店舗画像テキストエリア*/
.area p.space-text{
font-size: 14px;
line-height: 1.4em;
padding:5px 15px 5px 5px;
flex-grow: 1; 
}
/*電車でお越しの方*/
/*どちらの最寄り駅から来られますか？*/
.area p.train-text1{
font-size: 17px;
letter-spacing: 0.15em;
margin-top:50px;
margin-bottom:50px
}
/*駅名タイトル*/
.area p.train-text2{
display: block;
font-size: 17px;
letter-spacing: 0.1em;
padding:10px 0px 10px 20px;
margin-top: 100px;
margin-bottom:30px;

}
/*==============
行き順ボックス
==============*/

.train-box img{
width: 90%;
height: auto;
vertical-align: bottom;
}
.train-box li.t-img{
width: 50%;
}
.train-box li.t-text{
width: 50%;
}
/*ご予約*/
.net-box img{
width: 240px;
}
/*ご予約方法*/
.net-box-text{
padding:40px;
}

}
/* ########### 530pxから768pxまで ########### */
@media screen and (min-width: 530px) and (max-width: 768px) {

/*駅ボタン*/	
.train-b a{
position: relative;
display: inline-block;
width: 180px;
height: auto;
padding: 10px 0 10px 0;
font-size: 17px;
letter-spacing: 0.1em;
margin-top: 0px;
margin-bottom:30px
}

}
/* ########### 769px 以上 ########### */
@media screen and (min-width: 769px) {
/*プロフィール*/
table {}
.tbl {
letter-spacing: 0.15em;
}
.tbl th {
width: 30%;
font-size: 15px;
padding:20px 0px 20px 25px;
}
.tbl td {
width: 70%;
font-size: 15px;
padding:20px 0px 20px 0px;
}
/*駅ボタン*/	
.train-b a{
position: relative;
display:inline-block;
width: 200px;
padding: 10px 0 10px 0;
font-size: 17px;
letter-spacing: 0.1em;
margin-top: 0px;
margin-bottom:30px
}

}
/* ########### 960px 以下 ########### */
@media (max-width:960px){
/*プロフィールエリア*/
.area ul.pro-box{
margin-bottom: 0px;
}
.area li.pro-in{
width:100%;
}		
}

/* ########### 961px 以上 ########### */
@media screen and (min-width: 961px) {
/*プロフィールエリア*/
.area ul.pro-box{
margin-bottom: 0px;
}
.area li.pro-in{
width: 100%;
}		
}