@charset "utf-8";

/*--- 共通設定 ----------------------------------------------------------*/
html{
  font-size: 100%;/* 16px */
}

body{
  /* メニュー高さ分 */
  background-color:#FDFDFB;
}
/* ページ内リンク受け用 */
.anchor {
    display: block;
    padding-top: 140px;/* タイトル文言の縦幅が大きいので+20px */
    margin-top: -140px;/* タイトル文言の縦幅が大きいので-20px */
}


.header-top {
  /* background-color:#4169e1; 元の色*/
  background-color:#274a78;
}
.top-message{
  color:red;
  background-color:#fefeee;
}
.top-news-area{
  background-color:#fefeee;
}
.top-news-header{
  background-color:#fefeee;
}
.top-news-naiyou{
  background-color:#fefeee;
}




/*--- メニュー項目 ----------------------------------------------------------*/
/* 通常色 */
.navbar .navbar-nav .nav-link {
  color:#111111;
  font-weight:bold;
  text-shadow:0px 0px 3px #c1e1fc;
}
/* マウスオーバー */
.navbar .navbar-nav .nav-link:hover {
  color:#4169e1;
  background-color:#f5fefe;
}
/* クリック */
.navbar .navbar-nav .nav-link:active {
  color:#4169e1;
  background-color:#f5fefe;
}
.navbar-box {
  /* background-color:#b3dbff; 元の色*/
  background-color:#507ea4;
}
/* メニュー項目 */
.nav-item-status-main{
  padding: 0px 0px;
  margin-left: -2px;
  /* background: #b3dbff; 元の色*/
  background: #507ea4;
  /* box-shadow: 0px 0px 0px 0px #b3dbff; 元の色*/
  box-shadow: 0px 0px 0px 0px #507ea4;
  border: solid 2px #030303;
 
}
/* 縮小メニューアイコン */
.navbar-toggler{
  background-color: #638bf3;
  border-color: #ffffff;
}


/*--- スライドショー ----------------------------------------------------------*/
.top-mongon1{
  position:absolute;
  color:white;
  text-shadow: 1px 1px 10px #ff0000;

}
.top-mongon2{
  position:absolute;
  color:white;
  text-shadow: 1px 1px 10px #ff0000;
}
.carousel-item .img-fluid {
  width:100%;
  height:auto;
}
.carousel-item{
  height: auto;
}
.carousel-item a {
  display: block;
  width:100%;
}
.carousel-item .show-image {
  display: block;
  width:100%;
}
.carousel-prev-top{/*-- 自作class --*/
  left: 10px;
  top:50%;
  height:60px;
  width:40px;
  background-color:#000000;
}
.carousel-next-top{/*-- 自作class --*/
  right: 10px;
  top:50%;
  height:60px;
  width:40px;
  background-color:#000000;
}



/*--- フッター ----------------------------------------------------------*/
.footer-bottom {
  color:#ffffff;
  /* background-color:#4169e1; 元の色*/
  background-color:#274a78;
}


/*--- サブメニュー ----------------------------------------------------------*/
a.btn-border {
  border: 2px solid #343a40;
  border-radius: 0;
  background: #fefefe;
  color:#343a40;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  width:250px;
}
a.btn-border:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  content: '';
  -webkit-transition: all .3s;
  transition: all .3s;
  background: #343a40;
}
a.btn-border:hover {
  color: #ffffff;
  background: #343a40;
}
a.btn-border:hover:before {
  background: #fefefe;
}

/*--- トップタイトル ----------------------------------------------------------*/
.top_area{
  height:200px;
  font-weight: bold;
  text-align:center;
  background-color:#fefefe;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-flow:column;
}
.top_area_riyou{
  background-image: url('../main/riyou/top-image.jpg');
}
.top_area_sisetu{
  background-image: url('../main/sisetu/top-image.jpg');
}
.top_area_dantai{
  background-image: url('../main/dantai/top-image.jpg');
}
.top_area_kankou{
  background-image: url('../main/kankou/top-image.jpg');
}
.top_area_access{
  background-image: url('../main/access/top-image.jpg');
}
.top_area_contact{
  background-image: url('../main/contact/top-image.jpg');
}
.top_area_link{
  background-image: url('../main/link/top-image.jpg');
}
.top_area_onsen{
  background-image: url('../main/sisetu/onsen/top-image.jpg');
}
.top_area_syokudou{
  background-image: url('../main/sisetu/syokudou/top-image.jpg');
}
.top_area_baiten{
  background-image: url('../main/sisetu/baiten/top-image.jpg');
}
.top_mon_1{
	font-size:2em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: #ffffff;
  text-shadow: 
    10px 5px 30px #000000,
    10px -5px 30px #000000,
    -10px -5px 30px #000000,
    -10px 5px 30px #000000;
  }

/*--- サブメニュー ----------------------------------------------------------*/
.submenu a:hover img{
  opacity: 0.5;
}
 

/*--- 見出しbackground: ----------------------------------------------------------*/
/*--- 見出し1 ---*/
.title_mon1_area {
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #b3dbff;
  
}
.title_mon1_area:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #333333;
}
.title_mon1{
  font-size:1.5em;
	line-height:0.95em;
	font-weight:bold;
	color: #003355;
	text-shadow: 0.1em 0.1em 0.1em rgba(255,255,255,1);

}
/*--- 本文1 ---*/
.honbun1{
  font-size:1.0em;
  background-color:#fefefe;
}

/*--- 見出し2 ---*/
.title_mon2_area{
  padding: 10px 20px;
  color: #333333;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#b3dbff), to(#ffffff));
  background-image: -webkit-linear-gradient(left, #b3dbff 0%, #ffffff 100%);
  background-image: linear-gradient(to right, #b3dbff 0%, #ffffff 100%);
}
.title_mon2{
  font-size:1.2em;
  font-weight:bold;
	color: #003355;
}

/*--- 見出し3 ---*/
.title_mon3_area {
  position: relative;
  padding: 10px 20px;
}
.title_mon3_area:before,
.title_mon3_area:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: -webkit-gradient(linear, right top, left top, from(#ffffff), to(#b3dbff));
  background-image: -webkit-linear-gradient(right, #ffffff 0%, #b3dbff 100%);
  background-image: linear-gradient(to left, #ffffff 0%, #b3dbff 100%);
}
.title_mon3{
  font-size:1.0em;
  font-weight:bold;
	color: #003355;
  padding: 10px 0px;
}

/*--- 見出し4 ---*/
.title_mon4_area {
  padding: 0rem 20px;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, right top, left top, from(#ffffff), to(#b3dbff));
  background-image: -webkit-linear-gradient(right, #ffffff 0%, #b3dbff 100%);
  background-image: linear-gradient(to left, #ffffff 0%, #b3dbff 100%);
}
.title_mon4{
  font-size:1.0em;
  font-weight:bold;
	color: #003355;
  padding: 10px 0px;
}






/*--- フリースペースボックス ----------------------------------------------------------*/
.free-box{
  margin:1em 0;
  position: relative;
  padding: 0.5em 1.5em;
  border-top: solid 2px black;
  border-bottom: solid 2px black;
}
.free-box:before, .free-box:after{
  content: '';
  position: absolute;
  top: -10px;
  width: 2px;
  height: -webkit-calc(100% + 20px);
  height: calc(100% + 20px);
  background-color: black;
}
.free-box:before {left: 10px;}
.free-box:after {right: 10px;}
.free-box p {
  margin: 0; 
  padding: 0;
}
.free-height{
  max-height:500px;
  overflow:auto;
}




/*--- 通常リンク ----------------------------------------------------------*/
a.normal{
  color:#343a40;
}
a.normal:hover{
  color:#4690c2;
}


/*--- リスト ----------------------------------------------------------*/
ul.none{
  padding-left:0;
}

li.none{
  list-style:none;
}

/*--- 文章折り返し制御 ----------------------------------------------------------*/
span {
   display: inline-block;
}


/*--- 横棒 ----------------------------------------------------------*/
hr.yoko_bou{
  border-color:#111111;
}


/*--- ２行目以降字下げ ----------------------------------------------------------*/
p.jisage{
 padding-left:1em;
 text-indent:-1em;
}

/*--- ボックスデザイン ----------------------------------------------------------*/
/*--- ずらし影ボックス：トップページ営業時間 ---*/
.box-design1 {
  margin-top: 20px;
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 20px;
  background-color: transparent;
  border: 2px solid #343434;
  position: relative;
}
.box-design1::after {
  content: '';
  background-color: #dbf1fd;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -7px;
  left: 7px;
  z-index: -1;
}
/*--- ステッチボックス：トップページアメニティ ---*/
.box-design2 {
  margin: 10px auto;
  padding: 10px;
  background: #d19e64;
  box-shadow: 0 0 0 10px #d19e64;
  border: 2px dashed #fff;
}

/*--- タイトル付きボックス：トップページご挨拶 ---*/
.box-design3{
  margin: 1em 0;
  background-color: #dbf1fd;
  /* border: 2px solid #4169e1; */
  border: 2px solid #507ea4;
  letter-spacing: .3px;
}
.box-design3-title{
  color: #fff;
  font-weight: bold;
  /* background-color: #4169e1;*/
  background-color: #507ea4;
  padding: 4px 6px;
  text-align: center;
}
.box-design3 p{
  margin: 0;
  padding: 10px;;
}

/*--- テーブルデザイン ----------------------------------------------------------*/
.table-type0 td {
  vertical-align: top;
}

.table-type1 {
  border-collapse: collapse;
  border-spacing: 0;
  /* border: solid 2px #4169e1;*/
  border: solid 2px #507ea4;
 }
 .table-type1 th {
  padding: 10px;
  /*border: solid 2px #10308f;*/
  border: solid 2px rgb(24, 45, 102);
  /* border: solid 2px #4169e1;*/
  background: #507ea4;
  color: #fefefe;
  text-shadow:  0.15em 0.15em rgba(0,0,0,1);
 }
 .table-type1 td {
  padding: 10px;
  /*border: solid 2px #10308f;*/
  border: solid 2px rgb(24, 45, 102);
  background: #fefefe;
 }



/*--- テーブルデザイン：アクセス用 ----------------------------------------------------------*/
table.access-week1 th.title-a{
  min-width:130px;
}
table.access-week1 th.title-b{
  min-width:90px;
}
table.access-week2 th.title-a{
  min-width:114px;
}
table.access-week2 th.title-b{
  min-width:90px;
}

table.access-time td.width-a{
  min-width:60px;
}
table.access-time td.width-b{
  min-width:120px;
}

/*--- テーブルデザイン：メニュー表用 ----------------------------------------------------------*/
table.syokudou-menu th{
  min-width:330px;
}
table.syokudou-menu td.name{
  min-width:220px;
}
table.syokudou-menu td.price1{
  min-width:100px;
  text-align: right;
}
table.syokudou-menu td.number{
  min-width:30px;
  text-align: right;
}
table.syokudou-menu td.price2{
  min-width:64px;
  text-align: right;
}







/*--- テーブルデザイン：QA ----------------------------------------------------------*/
table.table-qa th{
  vertical-align: top;
  width:50px;
}
table.table-qa td{
  vertical-align: top;
}

/*--- 画像枠 ----------------------------------------------------------*/
.div-img {
  margin:5px;
}

/*--- ページ内リンクずれ修正 ----------------------------------------------------------*/
a.jump_point {
  height: 1px;
  display: block;
  padding-top: 160px;
  margin-top: -160px;
}

/*--- ラーメン祭り文字 ----------------------------------------------------------*/
.ramen-moji {
	font-size:3em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background : rgba(0,0,0,1);
	text-shadow : 
		0 0 0.1em rgba(241, 64, 102, 0.733),
		0.01em 0.04em 0.03em rgba(245, 148, 2, 0.4);
	-webkit-background-clip : text;
}

.ramen-moji2 {
	font-size:1.5em;
	text-align:center;
	line-height:0.95em;
	font-weight:bold;
	color: transparent;
	background : rgb(255, 103, 2);
	text-shadow : 
		0 0 0.1em rgba(250, 182, 94, 0.733),
		0.01em 0.04em 0.03em rgba(7, 4, 1, 0.4);
	-webkit-background-clip : text;
  margin-top:12px;
}

/*--- ラーメン祭り枠 ----------------------------------------------------------*/
.ramen-waku {
  margin: 10px auto;
  padding: 10px;
  background: #fac4c4;
  box-shadow: 0 0 0 10px #fac4c4;
  border: 2px dashed #bd2452;
}

/*--- ラーメン祭り文字：吹き出し ----------------------------------------------------------*/
.ramen-hukidasi {
  position: relative;
  margin:10px;
  padding: 1.0rem 2rem;
  border: 3px solid #eb9c27;
  border-radius: 10px;
  background: #ffd89d;
}
.ramen-hukidasi:before {
  position: absolute;
  bottom: -14px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #eb9c27 transparent transparent transparent;
}
.ramen-hukidasi:after {
  position: absolute;
  bottom: -10px;
  left: 1em;
  width: 0;
  height: 0;
  content: '';
  border-width: 14px 12px 0 12px;
  border-style: solid;
  border-color: #ffd89d transparent transparent transparent;
}

/*--- トップページカレンダー年月 ----------------------------------------------------------*/
.cal-nentuki{
  display: inline-block;
  padding: 0.3em 1em;
  text-decoration: none;
  color: #4169e1;
  border: solid 2px #4169e1;
  border-radius: 3px;
  margin:2px;
  text-align:center;
  width:200px;
  font-size: 1.2em;
  font-weight: bold;
}
.input_year {
  color: #4169e1;
  border:none;
  outline: none;
  text-align: right;
  width:50px;
  font-weight: bold;
}
.input_month {
  color: #4169e1;
  border:none;
  outline: none;
  text-align: right;
  width:26px;
  font-weight: bold;
}

/*--- トップページカレンダーイベント ----------------------------------------------------------*/
.cal-event {
  position: relative;
  margin: 20px 0;
  padding: 1em 2em;
  border: solid 3px #1b5b97;
  border-radius: 8px;
}
.cal-event .cal-event-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #FFF;
  color: #1b5b97;
  font-weight: bold;
}
.cal-event p {
  margin: 0; 
  padding: 0;
}

/*--- トップページカレンダー表 ----------------------------------------------------------*/
.top-cal-youbi{
  width:100%;
  max-width:800px;
  table-layout: fixed;
}
.top-cal-youbi td{
  border:2px solid #ffffff;
  /*background-color:#f067c2;*/
  text-align: center;
  vertical-align: top;
  height:30px;
}

.top-cal-day{
  width:100%;
  max-width:800px;
  table-layout: fixed;
  height:100%;
}
.top-cal-day td{
  border:2px solid #ffffff;
  /*background-color:#f067c2;*/
  text-align: center;
  vertical-align: top;
  height:100%;
}

.div-cal-waku{
  display:flex;
  flex-flow: column;
  margin:0px;
  /*background-color:#db252e;*/
  height:100%;
}

.div-cal-day1{
  border:2px solid #1b5b97;
  /*background-color:#1b5b97;*/
}
.div-cal-sun{
  background-color:#ffbbbb;
}
.div-cal-sat{
  background-color:#77ccff;
}
.div-cal-normal{
  background-color:#ffee77;
}

.div-cal-day2{
  border:2px solid #1b5b97;
  border-top: none;
  /*background-color:#97b9da;*/
  height:100%;
  text-align: center;
}
 .div-cal-day2-table{
  border:0px;
  width:100%;
}
.div-cal-day2-table td{
  border:0px;
  text-align: center;
}

/* --------------------------------------------------
 レスポンシブ
 基本的には768px以上は統一する
--------------------------------------------------　*/
@media screen and (min-width: 1024px) {
/* 1024px以上の幅の場合に適応される */
  /*--- トップ画像かぶせ文字の大きさ ---*/
  .top-mongon1{
    font-size: 1.5em;
    left: 50px;
    top:20px;
  }
  .top-mongon2{
    font-size: 1.5em;
    right:50px;
    bottom:50px;
  }

  /*--- ナビバーの高さ ---*/
  nav.navbar{
    height:50px;
  }

  /*--- トップページカレンダー表 ----------------------------------------------------------*/
  .top-cal-table{
    font-size:1.0em;
  }

  /*　アクセス　時刻表　*/
  table.access-week1 {
    
  }
  table.access-week1 td{
    font-size: 1.0em;
  }
  table.access-week2 {
    display: none;
  }

  table.access-time td{
    font-size: 1.0em;
  }

}
@media screen and (min-width:768px) and ( max-width:1024px) {
/* 768px～1024px以上の幅の場合に適応される */
  /*--- トップ画像かぶせ文字の大きさ ---*/
  .top-mongon1{
    font-size: 1.5em;
    left: 50px;
    top:20px;
  }
  .top-mongon2{
    font-size: 1.5em;
    right:50px;
    bottom:50px;
  }

  /*--- ナビバーの高さ ---*/
  nav.navbar{
    height:50px;
  }

  /*--- トップページカレンダー表 ----------------------------------------------------------*/
  .top-cal-table{
    font-size:1.0em;
  }

  /*　アクセス　時刻表　*/
  table.access-week1 {
    display: none;
  }
  table.access-week1 td{
    font-size: 0.8em;
  }
  table.access-week2 {
    font-size: 0.8em;
  }

  table.access-time td{
    font-size: 0.8em;
  }
}
@media screen and (max-width: 768px) {
/* 768pxまでの幅の場合に適応される */
  /*--- トップ画像かぶせ文字の大きさ ---*/
  .top-mongon1{
    font-size: 0.8em;
    left:20px;
    top:20px;
  }
  .top-mongon2{
    font-size: 0.8em;
    left:20px;
    top:60px;
  }

  /*--- トップページカレンダー表 ----------------------------------------------------------*/
  .top-cal-table{
    font-size:0.8em;
  }

  /*　アクセス　時刻表　*/
  table.access-week1 {
    display: none;
  }
  table.access-week1 td{
    font-size: 0.8em;
  }
  table.access-week2 {
    font-size: 0.8em;
  }

  table.access-time td{
    font-size: 0.8em;
  }

}