@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;}

/******* ?i?{?Y?fe ********************************************/
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;}

h1 {font-size: 1.2em;
font-weight: bold;
margin-bottom: 10px;
background-color: lightgray;
padding:5px;}

h2 {
  background-color:pink;
  font-weight:bold;
  padding:6px 2px;
  display:none;
}

h2 a{
  text-decoration:underline
    dotted;
  text-underline-offset:0.3em;}

h2 a:hover{
  color:red;}

h5{font-size:1em;
font-weight:600;
color:white;
width:100%;
margin-top:0.5em ;
margin-bottom:0.5em;
background-color:#444;
height:1.5em;
padding:3px;}

.sellection{
  margin-bottom:5px;}

.a{ color:black;
    font-weight:bold;}
.header_line{
	position: relative;
	height: 4px;
	border-width: 0;
	background-color: #00bcd4;
	background-image: -webkit-linear-gradient(left,
	#00bcd4 0%,#283593 50%,#00bcd4 100%);
	background-image: linear-gradient(90deg,
	#00bcd4 0%,#283593 50%,#00bcd4 100%);}

/* 3.ヘッダー部分の設定　********************/
	

.logo-container { position: relative; /* responsive-linksの基準となるように設定 */}

.responsive-links { display: none; /* 通常時は非表示 */
text-align:left;}
.responsive-links a,.responsive-links p {
    display: block; padding: 10px 15px;
    text-decoration: none; color: #333;
    border-bottom: 1px solid #eee;
    text-align: left;}
.responsive-links a:hover, .responsive-links p:hover {
    background-color: #eee;}
.responsive-links p { margin-bottom: 0; /* p要素の下マージンを削除 */}
.category-column { width: 100%; margin-bottom: 5px;}
.category-column .destination {
    margin-top: 0;
    margin-bottom: 5px;text-align: left;
    padding: 10px; cursor: pointer;}
.category-column .destination a:hover{
	color:red;}

.link-list { list-style: none;
    padding: 0; margin: 0;
    display: none; /* デフォルトは非表示 */}

.link-list li a {
    display: block;
    padding: 12px 8px ;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #eee;}

.link-list li a:hover {
    background-color: #eee;color:red;}

/* 最初から表示する項目 */
.initial-visible .link-list { display: block;}

/* 最初から表示する項目の見た目調整 (必要に応じて) */
.initial-visible .destination {
    display: none; /* 見出しが不要な場合は非表示 */}

/* SP表示 (例: 最大800px) */
@media screen and (max-width: 800px) {
.head_container { max-width: 100%;
  padding: 5px 0px; display: flex; /* SP表示でも横並びを維持 */
  align-items: center; /* 中央揃えを維持 */
  flex-direction: row; /* 追加: 子要素を横並びにする */
  justify-content: space-between; /* 追加: 左右にスペースを配分 */}

.logo-container { display: flex;
  justify-content: flex-start; /* ロゴを左寄せ */
  align-items: center;
  margin-right: 10px; /* ナビゲーションとのスペース */}

.responsive-links { position: absolute;
  top: 100%; left: 0;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  border-top: none;
  width: 100%; z-index: 10;
  font-size: 0.8em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none; /* SP表示では最初は非表示 */
  flex-direction: column; /* SP表示では縦に並べる */}

.responsive-links .sp {
    display: none; /* SP表示ではJavaScriptで制御するため、最初は非表示を維持 */
    position: absolute;
    top: 100%; left: 0;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-top: none;
    width: 100%; z-index: 10;
    font-size: 0.8em;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    flex-direction: column;}
nav {margin: 0; /* SP表示ではマージンをリセット */}
nav ul {display: flex; /* ナビゲーションのリストを横並びに戻す */
        align-items: center;
        margin: 0; padding: 0;
        list-style: none; /* リストの点を非表示 */}
nav li {margin: 0 0 0 5px; /* リストアイテム間のスペースを調整 */
        font-size: 0.8em;}
nav li .pc a {vertical-align: top;  }

.head_tab { display: flex; /* head_tab自体もFlexbox */
        align-items: center;}

.headlist {
        height: auto;
        display: flex; /* Flexboxで要素を横並びにする */
        align-items: center; text-align: center;
        padding: 5px; border-radius: 5px;
        background-color: #444; color: white;
        margin-left: 5px; /* リストアイテム間のスペース */}

li.headlist:nth-child(2), .headlist:nth-child(1){
        background-color: blue;}

li.headlist:hover { background-color: white;
        color: black; border: solid 1px gray;}

.logo-image { width: 100%; /* 親要素の幅いっぱいに表示 */
        max-width: 269px; /* 必要に応じて、最大幅を設定 */}}

/* PC表示 (例: 801px以上) */
@media screen and (min-width: 801px) 
	{.initial-visible .link-list {
    display: none !important; /* 必要に応じて !important */}
	
    .responsive-links {
        flex-direction: row;
        justify-content: space-around; }
 .responsive-links.sp {display: none;}
		
    .category-column {
        width: auto;
        min-width: 150px;
		padding:10 0 ;
        margin-bottom: 0;}

    .logo-image {
        width: auto; /* デフォルトは元のサイズ */
        max-width: 269px; /* 必要に応じて、最大幅を設定 */
        height: 40px; /* 元の高さに戻すか、auto にするか調整 */ }}


.logo-image { display: block; /* 必要に応じて */
    height: auto; /* 高さは縦横比を維持するために auto に設定 */}

.kotei { position: fixed; width: 100%;
    text-align: center;z-index: 9999;}	
	
.head_container{ padding:10px; max-width: 100%;
   width:1250px;
   margin-left:auto; margin-right:auto;
   display: flex; align-items: center;
   font-size:16px; background-color:white;}  
	
nav {  margin: 0 0 0 auto;}
nav ul {list-style: none; 
         margin: 0; display: flex;}
nav li .pc a{ vertical-align:top;}
nav li { margin: 0 0 0 15px;
         font-size: 1em;}
nav li a:hover{ color:red;} 

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

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important;}
.sp { display: none !important; }
.tb { display: none;}
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

@media only screen and (max-width: 800px){
	.tb { display:block; }}
	
@media only screen and (max-width: 479px) {
    .pc { display: none !important; }
    .sp { display: block !important; }}

.sp_br { display: none; /*480px以上では改行タグを無効に。*/}
.dp_br { display: none; /*480px以上では改行タグを無効に。*/}	
@media screen and (max-width: 480px) {
  .sp_br { display: block; /*480px未満で改行タグを有効に。*/}
  .dp_br {display: block; /* 480px未満で改行タグを有効に。*/ }}


.head_tab{display:flex ; align-items: center ; }
.headlist{ height:25px; display:flex; align-items:center;}
.tel{ font-weight:600; color:orange;}

li.headlist{ border-radius:5px;
  background-color:#444; color:white;
  padding:5px; text-align:center;
  vertical-align:top;} 
li.headlist:nth-child(2){ background-color: blue;}
li.headlist:hover{ background-color:white;
  color:black; border:solid 1px grey;}
	
.fixed-element {　z-index:0;
  background-color: #444; color: #fff;
  height: 0px; position: fixed;
  top: 55px; left: 0; right: 0;
  z-index: 1; text-align: center;
  line-height: 15px;}
.tabs {	vertical-align: middle;
  display: flex; height: 45px;
  justify-content: center;
  align-items: center;
  background-color: gray;
  color: #fff;}
.tab{color:black;
	background-color: lightgray;
	border-radius: 5px;
    font-size:15px;
    font-weight:bold;
    line-height:1em;
    padding:4px 8px;
	margin:5px 10px 10px;}
.tab:hover { background-color:white;color:red;}
.tab.active {background-color: #444；}
.sp-navigation{ font-size: 0.8em;
		font-weight: bold; color: navy;
		margin-bottom: 10px;}
.sp-navigation a:hover{	color: red;}

@media screen and (max-width:800px){
	
.head_container{ max-width:100%; padding:5px 0px;}
li.headlist{ margin:3px; padding:5px; font-size:0.8em;
  border-radius:5px; vertical-align:center;}}

@media screen and (max-width:600px){
 
.fixed-element { background-color: #444;
  color: #fff; top:50px;}
.tabs{vertical-align:middle;
	background-color: gray; height:35px;}
.tab{color:black; background-color: lightgray;
	border-radius: 5px; font-size:0.9em;
    font-weight:bold; line-height:1em;
    padding:2px 4px; margin:4px; ;}}

@media screen and (max-width:350px){
.fixed-element{	top:45px;}
.tab{ font-size:0.8em; padding: 3px;}
li.headlist{ margin:2px;
  padding:0px 3px; font-size:0.6em;
  border-radius:5px; height:35px;
  vertical-align:center;}}

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

  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; }}

/*** ???C??g?p?[?g?I?Y?fe *******************************/
.contents{
  width:auto;
  height:auto;
  padding-top:em;
  margin-left:auto;
  margin-right:auto; }

.box_wrap{ /*  ------- */
  position: relative;
  top:110px; /* ヘッダーの高さ分を下げる */
  height: calc(100% - 110px); /* ヘッダーの高さ分を引く */
  width: 1200px; /* 幅を1024pxに指定 */
  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: 110px;
  left: auto;
  padding:7px;
  margin:5px;
  border:1px black solid;
  border-radius:5px;}
.box_1 a{
  font-size:1em;
  line-height:1.6em;
  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;
   top: 110px;
  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%;
    margin:0px 0px 0px 0px;
  　　　　order:2;}

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


/* ---- ?T?C?h?p?[?g?I?Y?fe ------------------------ */
/* ---- ?A?s?\?fe?e???I?Y?fe ----- */
.kaigai_saiko{
  font-weight:500;
    height:40px;
    vertical-align:center;
  padding-top:12px;
  padding-left:10px;
    margin-bottom:10px;
    margin-top:5px;
    background-color:#fdb86d;
    border-radius:4px;
  color:black;} 
.kaigai_saiko a{
  vertical-align:center;
}


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


.saiko 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;}



/* -- ?u?E?E?I?Y?fe ------------- */
.wrap{ display: flex;
       flex-wrap: wrap;}

/* ???C??g?p?[?g?i??E?e??j?I?Y?fe ---------- */
.kaigai_box{
  background-color:#fdb86d;
  padding:0px 10px;
  margin:5px 0px;
  border-radius:4px;
  font-size:0.9em;
}



/* ============================================
10. new tours
============================================ */
.news tr td{
  padding:0px;}

.news tr td:nth-of-type(1){
  white-space:nowrap;}
.news tr td:nth-of-type(2){
  white-space:nowrap;
	padding:0 10px ;
  color:red;}
.tour_title{
  font-weight:600;
  text-decoration:underline
    dotted;
text-underline-offset:0.3em}

.tour_title a:hover{ color:red;}

.new{ont-size: 0.9em;line-height: 1.8em;overflow-y:auto;
  padding:10px;border:solid 1px;}

.new ul{line-height: 120%; border:solid 1px #666666;}	
.new ul li{line-height:120% ; padding: 4px;
            font-weight:500;}
.new ul li a{text-decoration: underline;}
.new ul li a:hover{color:#ff0000;}


@media screen and (max-width:800px){
.new{ max-width:99%;margin:1em 0 2em;
	line-height: 1.2em;}
.news {
  border-collapse: separate; /* ← これがないと border-spacing は有効になりません */
  border-spacing: 0 15px; /* ← 縦方向の余白を 10px に設定 */
}

.news{font-size:0.9em;}
.news tr td{padding:7px 0px;
	vertical-align: top;} /* ← こちらは残してOKです */
.news tr td:nth-of-type(1){ /* セレクタを修正 */
	white-space:nowrap;
	vertical-align:top ;
	padding:0px 10px ; /* 左右のpaddingも追記しました */
	}
	.news tr td:nth-of-type(2){ /* セレクタを修正 */
		white-space:nowrap;
	vertical-align: top;color:red;}
.news tr td:nth-of-type(3){ /* 念のため3番目の要素にも追記 */
  vertical-align: top;
	padding:0px;}} 


/* -- footer?I?Y?fe ------------------- */

footer{
  background-color:#d3d3d3;
  width:auto; margin-top:120px;}
.footer_wrap{
  font-size:0.9em;
  height:auto;
 width: auto;
  margin:auto;
  padding-left:320px;
  display:flex; }
.foot_1{
	text-align:left;
	width: 360px;
	width:100%;
	margin-top:10px;
	}
.foot_2{
	width: 360px;
	width: 100%;
	text-align:left;
	margin-top:10px;
	line-height:150%;}
.foot_2 ul{
	list-style:disc;}
.foot_2 ul a{
font-weight:normal;}
.foot_2 ul a:hover{
	color:red;
	text-decoration:underline;}

/****************************************
******* ?X?}?[?g?t?H??gview?I?Y?fe ***********/

 
 /** ???X?|??g?V?u?eI??? -------- */
@media screen and (max-width:800px){
 body{ max-width:100%;}
.head_container{
  padding:12px 5px;
  max-width:100%;} 
  h2{ display:flex;}
  h2 a:hover{
    background-color:white;
  }
.box_1 h5{font-size:1.2em;
	;}
	
  .fixed-element {@z-index:0;
  background-color: #444;
  color: #fff;
  height: 30px;
  position: fixed;
  margin:0px;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1;
  vertical-align:center;
  text-align: center;
  line-height: 20px;
  }

.box_wrap{
  display:flex;
  flex-wrap:wrap-reverse;
  max-width:100%;
  padding-top:em;
  margin: 0 auto;
  font-size:0.8em; }
.wrap{
  display: flex;
  flex-wrap: wrap;}

  .kaigai_saiko{
    height:30px;
    margin-bottom:10px;
    padding:8px 10px;
  }
   .kokunai_saiko{
    height:30px;
    margin-bottom:0px;
    padding:8px 10px;
  }
  .saiko{
  display:;}
  .saiko2{
    display:;}
  .nofuel{
    display:;
  }

  
 /* -----  ----- */
.wrap{
  display : -webkit-box;     /* old Android */
  display : -webkit-flex;    /* Safari etc. */
  display : -ms-flexbox;     /* IE10        */
  display : flex;
  max-width  : 100%;
  height  : auto;
  margin  : 0;
  padding : 3px;}

/* ----- ----- */
#id2 {
  -webkit-flex-wrap: wrap;          /* Safari etc. */
  -ms-flex-wrap    : wrap;          /* IE10        */
  flex-wrap        : wrap;}

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

    footer{margin-top:230px;}    
.footer_wrap{
  display:block;
  max-width:95%;
  height:auto;
  font-size:0.8em;
  max-width:100%;
  padding:10px;}
  
   #page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background: black;
  opacity: 0.8;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#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;
}
  
  
  }