@charset "UTF-8";
/*　方面別ページのスタイルシート更新版　*/

/* =========================================
1.reset @destyle.css v2.0.2 | MIT License | 
https://github.com/nicolas-cusan/destyle.css 
既成のスタイルの初期化
========================================= */
*,::before, ::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0; }
html { line-height: 1.15; /* 1 */
       -webkit-text-size-adjust: 100%; /* 2 */
       -webkit-tap-highlight-color: transparent; /* 3*/}
body {  margin: 0;}
main {  display: block;}
p,table,blockquote,address,pre,iframe,form,figure,dl {  margin: 0;}
h1,h2,h3,h4,h5,h6 { font-size: inherit;
                    line-height: inherit;
                    font-weight: inherit;
                    margin: 0;}
ul,ol { margin: 0;
        padding: 0;
        list-style: none;}
dt {  font-weight: bold;}
dd {  margin-left: 0;}
hr {  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;}
pre { font-family: monospace, monospace; /* 1 */
      font-size: inherit; /* 2 */}
address {  font-style: inherit;}
a { background-color: transparent;
    text-decoration: none;
    color: inherit;}
abbr[title] {
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */}
b,strong { font-weight: bolder;}
code,kbd,samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */}
small { font-size: 80%;}
sub,sup { font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;}
sub { bottom: -0.25em;}
sup {  top: -0.5em;}
img,embed,object,iframe {
  vertical-align: bottom;}
button,input,optgroup,select,textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;}
[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;}
[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;}
button,input { overflow: visible;}
button,select { text-transform: none;}
button,[type="button"],
[type="reset"],[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;}
button[disabled],[type="button"][disabled],[type="reset"][disabled],
[type="submit"][disabled] { cursor: default;}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;}
select::-ms-expand {  display: none;}
option {  padding: 0;}
fieldset { margin: 0;
           padding: 0;
           min-width: 0;}
legend {   color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */}
progress {  vertical-align: baseline;}
textarea {  overflow: auto;}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;}
[type="search"] { outline-offset: -2px; /* 1 */}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */}
label[for] {  cursor: pointer;}
details {  display: block;}
summary {  display: list-item;}
[contenteditable] {  outline: none;}
table { border-collapse: collapse;
        border-spacing: 0;}
caption { text-align: left;}
td,th { vertical-align: top;
        padding: 0;}
th {    text-align: left;
        font-weight: bold;}
template {  display: none;}
[hidden] {  display: none;}

/* 2.ベース　********************/
body{ font-family: "ms pゴシック","ヒラギノ角ゴ ProN";
      -webkit-text-size-adjust:100%;
      background: -webkit-gradient(
      linear, left top, left bottom,
      from(#f7f7f7),to(#fff));
      margin: 0 auto;}

a:hover{color:red;}

h1 {　font-size:1.1em;
　　　 margin-top:0;
      margin-bottom:0;
      color:#666666}
h2 {
font-size:1.1em;
font-weight:600;
color:white;
max-width:100%;
margin-top:1em ;
margin-bottom:0.5em;
background-color:rgba(0,144,168,0.9);
height:1.5em;
padding:3px;}}


h2 a:hover{
color:red;}
h3 {  font-size:1em;
      font-weight:bold;
      margin-top:10px;
      margin-bottom:10px;
      line-height:120%;
      text-decoration:underline
dotted;
text-underline-offset:0.3em;}
h3 a:hover{
  color:red;}
h4{
  margin-bottom:10px;
  font-weight:bold;
  font-size:0.8em;}
h5{font-size:1em;
font-weight:600;
color:white;
width:100%;
margin-top:1em ;
margin-bottom:0.5em;
background-color:rgba(0,144,168,0.9);
height:1.5em;
padding:3px;}
img{
max-width:100%;
height:auto;
}


/******* header *************************************/
.kotei{ position:fixed;
	      text-align:center;
	      width:100%;
z-index:9999;}

.head_container{
   padding:10px;
   width: 100%;
   width:1200px;
   margin-left:auto;
   margin-right:auto;
   display: flex;
   align-items: center;
   font-size:16px;
    background-color:white;}  
/*
.head_container{
    padding:5px;
    max-width:100%;}  
/* naviの配置方法 **************/
nav {margin: 0 0 0 auto;}
nav ul { list-style: none;
          margin: 0;
          display: flex;}
nav li {  margin: 0 0 0 15px;}
nav li a:hover{ color : red;}
.tel{ font-weight:600;
      color:orange;}

/* naviの装飾 **********/
li.headlist{
  border-radius:5px;
  background-color:#444;
  color:white;
  padding:5px;
  text-align:center; } 
li.headlist:hover{
  background-color:white;
  color:red;
  border:solid 1px grey;}
@media screen and (max-width:800px){
li.headlist{ 
    margin:2px;
    padding:3px;
    font-size:0.8em;   
    font-weight:bold;}
.headlist{ height:40px;}}

/* grey-tabの装飾 ***********/
.fixed-element {@z-index:0;
  background-color: #444;
  color: #fff;
  height: 20px;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1;
  vertical-align:middle;
  text-align: center;
  line-height: 20px;}
.tabs {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background-color:#444;
  color: #fff;}
.tab {
  display: inline-block;
  padding: 5px 20px;
  text-decoration: none;
  color: #fff;
  font-size: 16px;
font-family:"メイリオ";}
.tab:hover {color:red;
  background-color:white;}
.tab.active {
  background-color:white;}
@media screen and (max-width:600px){
 
.fixed-element {
  background-color: #444;
  color: #fff;
  height: 40px;}
  .tabs{vertical-align:middle;}
.tab{
    font-size:13px;
    font-weight:bold;
    line-height:1.2em;
    padding:5px 11px;}}

@media screen and (max-width:800px){
img{max-width:100%; width /***/:auto; }
  body{ width:auto;}}


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

  

/* パソコンで見たときは"pc"のclassがついた要素が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた要素が表示される */
@media only screen and (max-width: 799px) {
    .pc { display: none !important; }
    .sp { display: block !important; }}

/* 4.メインの枠組み　********************/
.contents{
  width:auto;
  height:auto;
  padding-top:em;
  margin-left:auto;
  margin-right:auto;
  background-color:white; }

.box_wrap{ /*  ------- */
  position: relative;
  top:110px; /* ヘッダーの高さ分を下げる */
  height: calc(100% - 110px); /* ヘッダーの高さ分を引く */
  width: 1200px; /* 幅を1200pxに指定 */
  margin: 0 auto; /* 中央寄せする */
  display: flex;
  justify-content: space-between;
  z-index:0;
  }

.box_1{ /* */
  width: 300px;
  font-size:1em;
  background-color:white;
  position:fixed;
  top: 100px;
  left: auto;
  padding:7px;
  margin:5px;
  border:1px black solid;
  border-radius:5px;}
.box_1 a{
  font-size:1em;
  line-height:1.6em;
  background-color:;
  padding:2px;}

.box_1 a:hover{
  color:red;
  font-weight:bold;}

.box_2{ /* ???C??g?p?[?g?I?gu?e??N --------*/
   max-width: calc(100% - 300px);
  margin-left: 310px;
  margin-top:px;
  padding: 0px 5px;}

.dest{
  font-size:0.9em;
}
.dest a:hover{
  background-color:white;
}
.triangle{font-size:0.7em;
color:grey;}
@media screen and (max-width: 800px) {
.contents{ width:95%;} 
.box-wrap{ flex-direction: column;
           margin-top:0em;
           width:95%;}
.box_1 {
    position:relative;
    width: 100%;
    max-width: 100%;
    height:;
    margin:0px 0px 0px 0px;
  　　　　order:2;}

 .box_2 {
   max-width:100%;
    margin:0px;
    width:100%;
    padding:0px;
    order:1;}
.dest{
    line-height:60px;
  border:1px solid grey;
  margin:5px;
  padding:10px;
  background-color:#fff1f4;}
  .dest a:hover{
    font-weight:600;
    backgcolor-color:white;}
.box_2{
 width:100%;  }
  .triangle{display:none;}}

.saiko{
    font-weight:500;
    height:40px;
    vertical-align:center;
    margin-bottom:10px;
    background-color:#fdb86d;
    border-radius:4px;
  color:black;}

.saiko2{
    font-weight:500;
    height:40px;
    vertical-align:center;
    margin-bottom:10px;
    margin-top:10px;
    border-radius:4px;
    background-color:#a9ceec;
    color:black;}

.saiko a{
    text-decoration:none;
    width:100%;
    height:100%;
    display:block;
    padding:10px;
   border-radius:4px; }
.saiko2 a{
    text-decoration:none;
    width:100%;
    height:100%;
    display:block;
    padding:10px;
    border-radius:4px; }

.saiko a:hover{
    background-color:white;
    color:red;
    text-decoration:underline
      dotted;
text-underline-offset:0.3em;}
.saiko2 a:hover{
    background-color:white;
   color:red;
    text-decoration:underline
      dotted;
text-underline-offset:0.3em;}

.fuel_saiko{
  font-weight:500;
    height:40px;
    vertical-align:center;
  padding-top:12px;
  padding-left:10px;
    margin-bottom:0px;
    margin-top:10px;
    background-color:#ffc9d2;
    border-radius:4px;
  color:black;} 

.nofuel{font-weight:500;
    height:40px;
    vertical-align:center;
    margin-bottom:5px;
    margin-top:10px;
    background-color:#ffc9d2;
    border-radius:4px;
  color:black;}

 .nofuel a{
    text-decoration:none;
    width:100%;
    height:100%;
    display:block;
    padding:10px;
   border-radius:4px; } 

.nofuel a:hover{
    background-color:white;
    color:red;
    text-decoration:underline
      dotted;
text-underline-offset:0.3em;}
.wrap{ display: flex;
       flex-wrap: wrap;
       margin-bottom:15px;}

.box_01{
  width:100%;
  height:44px;
  font-weight: 500;
  margin-bottom:10px;
  border-radius:2px;
  background-color: #d3d3d3;
  background: -webkit-gradient(
  linear, left top, left bottom,
  from(#fff),to(#d3d3d3));
  text-shadow: 0px 1px 0px rgba(255,255,255,1.0)}

.box_01 a{
	padding:10px;
  display:block;
	width: 100%;
	height: 100%;
  text-decoration:none;} 

.box_01 a:hover{
  color:red;
	text-decoration: underline
    dotted;
  text-underline-offset:0.3em;
  background-color:white;}


.info { line-height:150%;}
.info a{ text-decoration:underline;}
.info a:hover{ color:red;}
.tourtitle { color: #001e43;
             font-size:1.1em;
             text-align:left;
             font-weight: bolder;}
.tourabout{ font-size:15px;
}

.tour_box{
  font-size:0.9em;
  margin-bottom:20px;
  border: 1px solid white;
}
.tour_box th{
  border: 1px solid #white;
  font-weight:600;
  background-color:lightgrey;
  white-space:nowrap;
}
.tour_box th,td{
  padding:2px;
  border:1px solid white;
  text-height:center;
}
.tour_box tr:nth-child(3){
  color:red;
}
.tour_box tr th:nth-of-type(1){
  color:black;
}
a.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}

.end{
  background-color:lightgrey;
  padding:5px;
}

.business{
  border:solid 1px red;
  margin:5px 0px;
  padding:5px;
}
.busi{
  color:red;
  font-weight:bold;
}
/* 5. == footer =================
フッター部分の設定 =========== */

footer{ background-color:#d3d3d3;
margin-top:300px;}
.footer_wrap{
	height:auto;
	width:1024px;
  padding-left:310px;
       margin-top:300px;
	margin-left:auto;
  	margin-right:auto;
	display:flex;
  	justify-content:center;
  	flex-wrap:nowrap;}
.foot_1{
		text-align:left;
		width: 360px;
		width:100%;
		margin:20px;
		padding:5px;}
.foot_2{
	width: 360px;
	width: 100%;
	text-align:left;
	margin:20px;
	padding:5px;
	line-height:150%;}
.foot_2 ul{ list-style:disc;}
.foot_2 ul a:hover{ color:red;
	text-decoration:underline;}

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 50px;
  background: black;
  opacity: 0.8;
  border-radius: 50%
    z-index:99999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  z-index:1010  ;
}

#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  z-index:99999;
}

 #page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 50px;
  background: black;
  opacity: 0.8;
  border-radius: 50%;
   z-index:99999;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
  z-index:99999;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  z-index:99999;
}


/* 5. == responsive =================
　　スマホ対応の設定 ============= */

@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;}
}
.sp-nav{ display:none;}
.sp-tab{ display:none;}

     .flexbox .box1 {
         width: 100%;
         margin: 0 auto;}
     .flexbox .box2 {
         width: 100%;
         margin: 0 auto;}

@media screen and (max-width:800px){
/* */

img{max-width:100%; width /***/:auto; }
body{ width:auto;}
.head_container{
    padding:8px;
    max-width:100%;  }  
.contents{ max-width:100%;}
h1{font-size:1.4em;}
h2 a{ text-decoration:underline;}
 h3{
	line-height:1.4em;
	color:#1a0dab;
}
.tourabout{ font-size:small;}
.flex_tour-box{
    flex-direction:column;
    padding:2px;}
  a.anchor{
    display: block;
    padding-top: 8em;
    margin-top: -8em;}
.footer_wrap{ display:block;
  max-width:100%;
  padding-left:0;
  font-size:0.9em;}
.box_1{ width:95%;} 
.box_2{ width:95%;}
.box_wrap{
  display:flex;
  flex-wrap:wrap-reverse;
  max-width:100%;
  padding-top:10px;
  margin: 0 auto;
  font-size:0.9em; }
.wrap{ display: flex;
       flex-wrap: wrap;}
.saiko{ width:100%;}
.box_01{
 width:47%;
 height:40px;
 font-weight: 500;
 background-color: #d3d3d3;
 margin: 10px 3px;} 
  .foot_2{
  display:none;}
  
  .fixed-element{ margin-top:0px;
    font-size:14px;}
  .tab{
    font-size:14px;
    line-height:1.2em;
    padding:5px 10px;}

  /* ----- flexコンテナ ----- */
.wrap{
  display : -webkit-box;     /* old Android */
  display : -webkit-flex;    /* Safari etc. */
  display : -ms-flexbox;     /* IE10        */
}
	
 ul .lookup  .flex_hotel-box {
         display: block;}
 ul .lookup .flex_hotel-box .flex_hotel1 {
         width: 100%;
         margin: 0 auto;}
 ul .lookup .flex_hotel-box .flex_hotel2 {
         width: 100%;
   margin: 0 auto;}