@charset "utf-8";
/* ===========================================
CSSâ€šÃŒâ€“Â¼â€˜OÂFstyle.css 
ÂÃ…ÂIÂXÂVâ€œÃºÅ½Å¾ÂF2022/5/18
----------------------------------------------

2.basis
3.header
4.contents and boxes
5.
6.tourbox
7.weekly ranking
8.connect (link)
9.this month's osusume
10.new tours
11.footer
12.resposive
============================================ */


/* ============================================
2. basis
============================================ */
@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular-webfont.woff2') format('woff2'),
       url('/fonts/OpenSans-Regular-webfont.woff') format('woff');
  font-display: swap;
}
/* 全ての要素に適用するのが一般的です */
*, *::before, *::after {
  box-sizing: border-box;
}
body{ font-family: "ms pゴシック","ヒラギノ角ゴ ProN";
	font-size: 1em;
      -webkit-text-size-adjust:100%;
      background: -webkit-gradient(
      linear, left top, left bottom,
      from(#f7f7f7),to(#fff));
      margin: 0 auto;}

h2{ font-size:1em;
  	padding: 6px;
	  color: white;
	  background-color:rgba(0,144,168,0.9);
	  margin:5px 0px;
		}
h3{ font-size: 1.1em;
    padding: 0.6em 0.6em;
    color: #565656;
    border:6px double #d3d3d3;
    margin:5px 0;}
h5{font-size:1em;
font-weight:normal;
color:white;
width:100%;
margin-top:1em ;
margin-bottom:0.5em;
background-color:rgba(0,144,168,0.9);
height:1.5em;
padding:3px;
margin-right:5px;
text-align:left;}

.box_1 h2{
	margin-right:0px;
	font-size:1em;
}

div #cse-search-form{
 Â@Â@	width: 200px !important; }

/* =============================================
3.header
============================================= */

	
.kotei{
	position:fixed;
	text-align:center;
	width:100%;z-index:9999;}
.head_container{ 
  z-index:1000000;
  padding:10px 20px 10px 10px;
  position: fixed;
  left: 0;
  right: 0;
  margin-left:auto;
  margin-right:auto;
	margin-bottom: 0;
  width:1200px;
   max-width: 100%;
   display: flex;
   align-items: center;
   font-size:16px;
   background-color:white;
height:60px;}  

nav {  margin: 0 0 0 auto;}
nav ul { list-style: none;
         margin: 0;
         display: flex;}
nav li { margin: 0 0 0 15px;
         font-size: 1em;}
nav li a:hover{ color:red;}
.tel{ font-weight:600;
      color:orange;}
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 480px) {
    .pc { display: none !important; }
    .sp { display: block !important; }}

.head_tab{ vertical-align:center;}
li.headlist{
  border-radius:5px;
  background-color:#444;
  color:white;
  padding:5px;
  text-align:center; 
z-index:1000000;} 
li.headlist:hover{
  background-color:white;
  color:red;
  border:solid 1px grey;}
.header_line{
	position:absolute;
	height: 5px;
  top:60px;
	left:0;
	right:0;
	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%);
}
.fixed-element {
	
	display:none;}
/* 5. == responsive =スマホ対応の設定 ============= */

@media screen and (max-width:800px){
img{max-width:100%; width /***/:auto; }
body{ width:auto;}
.head_container{ height:43px;
  position:fixed;
  top:0;
  left:0;
  padding:5px;
  width:100%;
  z-index:100;}  
.header_line{ display:none;}  
li.headlist{ 
    margin:4px;
    padding:3px;
  font-size:0.8em;
font-weight:bold;
  border-radius:5px;} }

.fixed-element {z-index:0;　
	
  display:none;
  background-color: gray;
  color: #fff;
  height: 20px;
  position: fixed;
  top: 45px;
  left: 0;
  right: 0;
  text-align: center;
	vertical-align: middle;
  line-height: 20px;}

.tabs {
	top:45px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  background-color:gray;
  color: #fff;}
.tab {
  display: inline-block;
  padding: 5px 20px;
  text-decoration: none;
	vertical-align: middle;
  color: #fff;
  font-size: 16px;}
.tab:hover {
  background-color:white;
color:red;}
.tab.active {
  background-color: #444；}
.sp_br { display: none; /*480px以上では改行タグを無効に。*/}
@media screen and (max-width: 480px) {
	.sp_br { display: block; /*480px未満で改行タグを有効に。*/}}

@media screen and (max-width: 800px) {	
   .fixed-element {　z-index:1;
     display:inline-block;
  background-color: gray;
  color: #fff;
  height: 35px;
  position: fixed;
  top: 48px;
  left: 0;
  right: 0;
  text-align: center;}
  
  .tab{
    font-size:13px;
  font-weight:bold;
	  vertical-align: middle;
    line-height:1.2em;
    padding:10px;
  text-align:center;}}
@media screen and (max-width:360px){
	.fixed-element{
		top:55px;}
.tab{ font-size:0.8em;
	padding: 3px;}
li.headlist{ margin:2px;
    padding:4px 2px;
  font-size:0.7em;
  border-radius:5px;
	height:30px;
	vertical-align:center;}}




/* ===========================================
4. contents and boxes
=========================================== */
.contents{ width:1200px;
           padding-top:5em;
          padding-left:10px;
	    padding-right:10px;	
           margin-left:auto;
           margin-right:auto;
           position:static;
z-index:-1;}

.box_wrap{
	display: flex;
	justify-content: left;
  vertical-align: top;
	flex-wrap: wrap;
	width: 1200px;
  width:100%;
gap:20px;} 

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

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

.dest{
  font-size:0.9em;
}
.dest a:hover{
  background-color:white;
}
.triangle{font-size:0.7em;
color:grey;}

.box_2{ display: inline-block;
	vertical-align: top;
	margin: auto;
  margin-left: 5px;
	width: 800px;
	text-align: left;
  position:static;
}

/* =============================================
5.
============================================= */
.info{ /* Âdâ€”vâ€šÃŒâ€šQÂs *******/
	line-height:180%;	
  font-size:0.8em;}
.info a:hover{ color:red;
	text-decoration:underline;	}

/**  ******/
.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:15px;
   border-radius:4px; }

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

.houmen_head{
  font-weight:600;
  text-align:left;
  margin-top:5px;
 
}
/* =============================================
6 kakutei
============================================= */

.kakutei-list{
	height:440px;overflow-y:auto;}
.kakutei {
    display: flex;
    align-items: flex-start; /* アイテムを上詰めにする */
    gap: 5px; /* アイテム間の幅を10pxにする */
    margin: 0; /* 親要素の余白をリセット */
	margin-bottom: 10px;
	margin-top: 5px;
    padding: 0; /* 親要素のパディングをリセット */
	}

.kakutei img {
    width: 100px;
    height: auto;
    display: block;
    margin: 0; /* 画像の余白をリセット */
    padding: 0; /* 画像のパディングをリセット */
}

.kakutei .item {
    margin: 0; /* アイテムの余白をリセット */
    padding: 0; /* アイテムのパディングをリセット */
}

.kakutei .text {
    font-size: 0.7em;
    line-height: 0.9em;
    margin: 0; /* テキストの余白をリセット */
    padding: 0; /* テキストのパディングをリセット */
}

@media (max-width: 800px) {
	.kakutei img {
	width: 140px !important; /* 幅を140pxに固定 */
   }}

/* =============================================
7. weekly ranking
============================================== */

.ranking{ margin-top:10px;
    margin-bottom:10px;
    border:1px solid black;
    border-radius:3px;
    padding:5px; font-size:0.8em;
    line-height:150%; z-index:-1;}
.crown {  position: relative;
          padding: 0px 0px 0px 2.5em;
          color: #3388dd;}
.crown::before,.crown::after {
    position: absolute;
    left: 0px; width: 0px;height: 0px;content: "";}
.crown::before {top: -1.25em;
    border: 1em solid transparent;
    border-bottom: 1.5em solid currentColor;}
.crown::after {top: 0.25em;
    border: 0.5em solid transparent;
    border-left: 1em solid currentColor;
    border-right: 1em solid currentColor;}
.list_crown { list-style: none;}
.list_crown > li {position: relative;
    padding: 0px 0px 0px 2.5em;
    color: #3388dd;font-size: 1em;line-height:150%;}
.list_crown > li::before,.list_crown > li::after
{ position: absolute;
    left: 0px;width: 0px;height: 0px;content: "";}
.list_crown > li::before { top: -1.25em;
    border: 1em solid transparent;
    border-bottom: 1.5em solid currentColor;}
.list_crown > li::after {top: 0.25em;
    border: 0.5em solid transparent;
    border-left: 1em solid currentColor;
    border-right: 1em solid currentColor;}
.list_crown > li:nth-of-type(1) {color: #DBA300;}
.list_crown > li:nth-of-type(2) {color: #676767;}
.list_crown > li:nth-of-type(3) {color: #c47022;} 


/* =============================================
9. this month's osusume
============================================= */
/* ... 既存のCSS ... */

.recommend {
  padding: 5px;
  background-color: #adcdec;
  display: grid; /* PC画面ではグリッドレイアウトを使用 */
  grid-template-columns: repeat(3, 1fr); /* 横に3つの均等なカラム */
  grid-row-gap: 10px; /* 行間のスペース */
}

.recommendation-item {
  width: auto; /* グリッドアイテムなので自動調整 */
  color: black;
  font-weight: 500;
  font-size: 1em;
  border-radius: 3px;
  padding: 10px; /* 少しpaddingを増やして見やすく */
  margin: 5px; /* marginも少し調整 */
  background-color: white;
  border: solid 1px #666666;
  display: flex; /* 内部要素はflexboxで扱いやすく */
  flex-direction: column;
  z-index: auto;
}

.recommendation-link {
  display: block;
  text-decoration: none;
  color: inherit;
  display: flex; /* リンク全体をflexboxに */
  flex-direction: column; /* 縦方向に配置 */
  align-items: stretch; /* 幅を揃える */
}

.recommendation-link:hover {
  color: red;
}

.recommendation-figure {
  position: relative;
  margin-bottom: 5px; /* 画像とテキストの間隔 */
}

.reco_pic {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 0; /* figcaptionとのスペースはfigcaptionのpaddingで調整 */
}

.recommendation-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 3px 5px; /* 少し小さめのpadding */
  font-size: 70%; /* さらに小さめのフォントサイズ */
  color: #fff;
  background: rgba(51, 51, 51, 0.8); /* 背景を少し透明に */
}

.recommendation-details {
  clear: both; /* floatの影響をクリア */
  line-height: 1.4em;
  font-size: 0.8em; /* 少し小さめのフォントサイズ */
}

.recommendation-details span {
  font-size: 0.9em;
  margin-right: 3px;
  padding: 1px 3px;
}

.sai {
  background: #e75480;
  color: white;
  font-weight: normal;
}

.mikomi {
  background: navy;
  color: white;
  font-weight: normal;
}

.toi{
	  padding:3px 5px; /* ?g?A??????I?o?O */
	margin:0 3px; /* ?g?I?O?I?o?O */
	background-color:#999900; /* ?g?I?hw?i?F */
	border:0px solid #777; /* ?g?I?u?I?e??3?E?i?T?E?F */
	border-radius:2px; /* ?g?I?p?d?U?-??E?e */
	font-family:inherit; /* ?t?H??g?g?I?i?T?d?p?3??E?e */
	font-size:0.9em;	/* ?t?H??g?g?I?ea????3 */
  color:white;
  font-weight:;
  white-space:nowrap;
	
}
/* 600px以下の画面サイズに適用 (既存のコード) */
@media (max-width: 600px) {
  .recommend {
    background-color: white;
    padding: 0;
    margin: 0;
    display: block; /* 縦並びの基本 */
  }

  .recommendation-item {
    width: 100%;
    border: 0;
    margin: 0 0 0 0;
    padding: 10px;
    display: flex; /* 横並びにする */
    align-items: flex-start; /* 上揃え */
    flex-direction: row; /* ★ 画像とテキストを横並びにする */
  }

  .recommendation-link {
    display: flex; /* リンク内も横並び */
    align-items: flex-start;
    flex-direction: row; /* ★ リンク内も横並びにする */
  }

  .recommendation-figure {
    flex-shrink: 0;
    width: 140px;
    margin-right: 10px;
    margin-bottom: 0;
  }

  .reco_pic {
    width: 140px;
    height: auto;
    margin-bottom: 0;
  }

  .recommendation-caption {
    font-size: 0.8em;
  }

  .recommendation-details {
    flex-grow: 1; /* 残りのスペースをテキストが占める */
    line-height: 1.4em;
    text-align: left;
    font-size: 0.8em;
  }

  .recommendation-details span {
    font-size: 0.8em;
  }
}
/* ============================================
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{height:700px;font-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%;height:400px;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;}} 

/* =========================================
11. footer
========================================== */
footer{ background-color:#d3d3d3;	}

.footer_wrap{ height:auto;
              width:1200px;
              margin-right:auto;
              margin-left:auto;
              display:flex;
              justify-content:center;
              flex-wrap:nowrap;}

.foot_1{ text-align:left;
         width:360px;
		     width:100%;
		     margin:10px;
		     padding:5px;}

.foot_2{ width: 360px;
         display:inline-block;
	       width: 100%;
	       text-align:left;
	       margin:10px;
	       padding:5px;
	       line-height:150%;}

.foot_2 ul{ list-style:disc;	}
.foot_2 ul a:hover{
	color:red;
	text-decoration:underline;}

.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px;
}


/* ============================================
12.responsive
=========================================== */

@media screen and (max-width:800px){
/* */
body{ max-width:100%;} 
.head_container{
  padding-left:5px;
	padding-right: 5px;
  max-width:100%;
  z-index:1000;} 

.contents{max-width:100%;
   padding-top:6em;
   margin-top:0px;
	}
h2{ margin:0px; }
.box_wrap{ 
   max-width:100%;
  display:flex;
  flex-direction:column-reverse;}

.box_1 {
  width: 100%; /* 画面幅いっぱいに広げる */
  box-sizing: border-box; /* padding を width に含める */
  font-size: 1em;
  background-color: white;
  /* topとleftはpositionが指定されていないと効果がないため、今回はコメントアウトまたは削除を推奨 */
  /* top: 120px; */
  /* left: auto; */
  padding: 5px; /* 上下左右に5pxのpadding */
  margin: 0; /* 左右のmarginは不要になる場合が多いので0にするか削除 */
  border-radius: 5px;
}
.box_2{ max-width:100%;	}
	
.dest{
		line-height: 3em;
		background: lightgrey;
		padding:8px;
		border-radius: 4px;
		margin-right: 8px;	}
.triangle{display: none;margin:5px;}
.saiko{ max-width:100%;}
.info{  font-size:0.9em;
        margin-bottom:5px;}
.tour_wrap{  gap:0px;
  max-width:100%;}  
.tour_box{ max-width:100%;
  display:flex;
  justify-content:space-between;}  
.tour_box > div{
 width:48%;
 height:38px;
  font-size:0.8em;
 font-weight: 500;
 margin: 2px; } 

.osu{ margin:0px;
    margin-bottom:5px;
    background-color:white;
    padding:5px;}  
figure figcaption{
    display:none;}

  .tour_title{
    color:blue;
    text-decoration:none;
  }
.footer_wrap{ display:block;
    height:auto;
    max-width:100%;
    padding-top:10px;
    font-size:0.9em;
	margin-top:10px;}}


