*{
  margin:0;
  padding: 0;
}

html {
  position: relative;
  min-height: 100%;
  padding-bottom: 100px;
  box-sizing: border-box;
  overflow-y:scroll;
}
footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60px;
}

.catch_title{
  font-size: 18px;
  margin-bottom: 20px;
}

body{
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "Helvetica", "Verdana", sans-serif;
  margin:0;
  background: #f0f4f8;
  color: #2c3e50;
}


/*----メニュー---- */
header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 50;
}
nav{
  position: relative;
  margin-top: -5px;
}
nav img{
  position: absolute;
  top:10px;
  left:30px;
}
.black{
  text-decoration: underline !important;
}


/*------------------------------
  ここから下がハンバーガーメニュー
------------------------------*/
.drawer {
    position: fixed;
    z-index: 100;
    top: 0;
    right:0;
}
.drawer-content{
padding:0;
}
.drawer-content ul li {
    text-align: center;
margin: auto;
}
.drawer-content ul li a{
    color: #fff;
}


.drawer-content a {
    text-decoration:none; 
}

.drawer-list{
margin:100px 0;
}

.drawer-item{
/*height:30px;*/
border-top: 1px solid #fff;
font-size:18px;
padding:15px 0;

}

.drawer-item-end{
border-bottom: 1px solid #fff;
}
  
/* チェックボックスは非表示に */
.drawer-hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer-open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上に */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer-open span,
.drawer-open span:before,
.drawer-open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線のうち一番上の棒の位置調整 */
.drawer-open span:before {
  bottom: 8px;
}

/* 三本線のうち一番下の棒の位置調整 */
.drawer-open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer-check:checked ~ .drawer-open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer-check:checked ~ .drawer-open span::before {
  bottom: 0;
  transform: rotate(45deg);
background: #fff;
}

#drawer-check:checked ~ .drawer-open span::after {
  top: 0;
  transform: rotate(-45deg);
background: #fff;
}
  
/* メニューのデザイン*/
.drawer-content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%;/* メニューを画面の外に飛ばす */
  z-index: 99;
  background: rgba(0, 0, 0, 0.9);
  transition: .5s;
opacity:1;
color: #fff;
font-weight: bold;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer-check:checked ~ .drawer-content {
  left: 0;/* メニューを画面に入れる */
}

@media only screen and (min-width: 981px) {
.header_sp{
display:none;
  }
.header__flex_sp{
display:none;
  }
.drawer {
display:none;
  }
}

.sp_w{
border-bottom: 1px solid white;
padding-bottom: 2px;
}
/*SP*/

@media only screen and (max-width: 980px){
.header_pc {
    display: none;
}
}
/* メニュー */
/*--戻って再検索ボタン--*/
a.btn {
  text-decoration: none;
  padding: 6px 16px;
  font-weight: bold;
  background: linear-gradient(135deg, #1a6b8a, #2a9fd6);
  color: #fff;
  border-radius: 100vh;
  transition: opacity 0.2s, transform 0.15s;
  display: inline-block;
}

a.btn:hover {
  opacity: 0.85;
  color: #fff;
  transform: translateY(-1px);
}
/*戻って再検索ボタン*/

hr {
height: 1px;
background-color: #3a302d;
border: none;
margin: 10px;
}

.hr_top{
margin-top: 30px;
}

.hr_bot{
margin-bottom: 30px;
}

.clear{
  clear:both;
}

/*-------レスポンシブ画像+TXT---------*/

.content-wrapper {
  position: relative;
}

.main {
  text-align: center;
  padding: 10px 0 20px 20px;
}

.side {
  margin: 0 auto;
  padding: 10px 20px 10px;
  width:410px;
  overflow: hidden;
}

.side p{
  text-align:center;
}
.main,.side {
  border-radius: 10px
}


#sentence {
  position: absolute;
  top: 30px;
  left: 22%;
  max-width: 400px;
}
@media(max-width: 1500px){
#sentence {
  max-width: 370px;
font-size:15px;
}
}

@media(max-width: 1300px){
#sentence {
  left: 15%;
}

.side {
  padding: 30px 0;
  width: 320px;
}
}

@media(max-width: 1100px){
#sentence {
  left: 10%;
}
.side {
  padding: 30px 0;
  width: 300px;
}
}

@media(max-width: 920px){
#sentence {
  left: 5%;

}
.main{
padding:20px 5px;
}

#sentence {
  max-width: 340px;
font-size:13px;
}
}

@media(max-width: 860px){
#sentence {
  top: 5px;
max-width: 300px;
}
.catch_title{
  font-size: 14px;

}
}
/*レスポンシブ画像+TXT*/

/*----topGrid----*/
.grid2 {
  display: grid;
  gap: 10px;
  grid-template-columns: 2fr minmax(300px, 1fr);
}
.grid2 img {
  max-width: 100%;
  height: auto;
}

@media(max-width: 400px){
  .grid2 {
    grid-template-columns: 1fr;
  }
}
/*topGrid*/

ul.gnav-navi-1{
  padding: 0 70px 0 0;
  text-align: right;
}
ul.gnav-navi-1 li{
  display: inline-block;
}

ul.gnav-navi-1 li a{
  display: block;
  padding: 1em;
  color: #1a3a5c;
  text-decoration: none;
  text-align: center;
  width: 140px;
  transition: color 0.2s;
}
ul.gnav-navi-1 li a:hover {
  color: #2a9fd6;
}

ul.gnav-navi-1 a::first-line{
  font-size: 16px;
  font-weight: bold;
}

/*FAVORITEメニュー*/
.fav{
  padding: 1em;
  color: #1a3a5c;
  transition: color 0.2s;
}

.fav::first-line {
  font-size: 16px;
  font-weight: bold;
}

.fav:hover{
  cursor: pointer;
  color: #2a9fd6;
}

/*FAVORITEメニュー*/
/*メニュー*/

.wrapper{
  max-width: 1660px;
  margin: auto;
  padding:0 10px;
}

.wrapper_s{/*短いと想定されるページに適用*/
  max-width: 1660px;
  margin: auto;
  padding:0 10px;
  min-height: calc(100vh - 221px);
}

.grid {
  display: grid;
  gap: 50px 20px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/*---お気に入り----*/
.grid-auto-fill{
  display: grid;
  border: 1px solid #ddd;
  grid-auto-rows: 5em;
  grid-gap: 10px;
  padding: 10px;
  margin: 1em 0 2em;
  overflow: hidden;
}


.fav_ul{
  text-align: right;
  margin:0;
  padding:5px !important;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
#fav_li{
font-size:16px;
}
/*お気に入り*/

@media screen and (max-width: 500px) {
.grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
}

.item {
  border-radius: 12px;
  background: #fff;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.13);
}

.item_s {
  border-radius: 12px;
  background: #f0fdf4;
  padding: 0;
  margin: 0;
  border: 1px solid #bbf0cc;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* カード内コンテンツ */
.item-body {
  padding: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.item-body .ship_content {
  flex: 1;
}

/* RSSタイトル1行制限 */
.catch-title-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  margin-bottom: 0 !important;
}
.item_s:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}

.item p{
/*padding:0 10px;*/
margin:5px;
}

.item_s p{
/*padding:0 10px;*/
margin:5px;
}
.item ul{
  list-style: none;
  padding: 0 0 20px 5px;
}

.item_s ul{
  list-style: none;
  padding: 0 0 10px 5px;
}

img {
  max-width: 100%;
  height: auto;
}

p {
  text-align: left;
}

/**/

/*-------淡水------------*/
.flash_ul{
  text-align: left;
  margin: 6px 0 0 0;
  list-style: none;
  padding: 0;
}
.flash_ul li {
  display: inline-block;
  background: #d1fae5;
  color: #065f46;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 100px;
  border: 1px solid #6ee7b7;
}
/*淡水*/

.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 200px);
  transition: 2s;
}

.img_wrap{
 
  margin: 0 auto;
  overflow: hidden;
  cursor: pointer;

border-bottom: 1px solid #d2d2d2;
position: relative;
}

.img_wrap img{
  width: 100%;
  transition-duration: 0.5s;
vertical-align:top;
}
.img_wrap:hover img{
  transform: scale(1.1);
  transition-duration: 0.5s;
}

.img_wrap p {
  position: absolute;
  bottom: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  color: white;/*文字を白に*/
  background: #f3640d;/*背景色*/
  font-size: 15px;
  line-height: 1;/*行高は1に*/
  padding: 5px 10px;/*文字周りの余白*/
  }

/*フェドイン*/
/* スクロールCSS */
.fade-in {
  opacity: 0;
  transition-duration: 1000ms;
  transition-property: opacity, transform;
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -50px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

.scroll-in {
  opacity: 1;
  transform: translate(0, 0);
}
/*フェドイン*/

.ship_content li{
  font-size:14px;
  text-align:left;
  padding: 2px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/*検索の都道府県並び*/
.input_item li{
  display: inline;
}

/*フッター*/
/*.site-footer {
  /*color: #fff;*/
  width: 100%;
  margin-top: 50px;
}*/
.site-footer-in{
  box-sizing: border-box;
  width: 1200px;
  margin: auto;
}
.copyright {
  margin: 0;
  padding: 20px 0;
  background: #1a3a5c;
  color: rgba(255,255,255,0.7);
  text-align: center;
}

.copyright p {
  text-align: center;
}
.copyright small {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
}

/*画像*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.cat-container {
  display: flex;
  flex-wrap: wrap;
}

.cat-item{
  padding: 5px 12px;
  margin: 4px;
  background: #fff;
  border-radius: 100px;
  border: 1px solid #c5dff0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  transition: background 0.15s, transform 0.15s;
}
.cat-item:hover {
  background: #e8f4fb;
  transform: translateY(-1px);
}
.cat-item a {
  color: #1a6b8a;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
}

.pc{
  text-align: center;
}

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

/*.sp-con {
  padding: 20px;
}*/

.form_div{
margin:0 0 0 -10px;
text-align: center;
width: 300px;
}

}

@media only screen and (min-width: 801px) {
.sp-con {
  display: none
}
}

/*マップ*/
.ggmap {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.ggmap iframe,
.ggmap object,
.ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nav-prev{
  float:right;
}

.nav-next{
  float:left;
}

/*--------フォーム----------*/
.form_div{
margin:30px auto 0;
text-align: center;
width: 300px;
}
.search_container{
  box-sizing: border-box;
  position: relative;
  border: 1px solid #c5dff0;
  padding: 3px 10px;
  border-radius: 100px;
  height: 2.4em;
  width: 280px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search_container:focus-within {
  border-color: #2a9fd6;
  box-shadow: 0 2px 12px rgba(42,159,214,0.2);
}
.search_container input[type="text"]{
  border: none;
  height: 2.0em;
  background: #fff;
  color: #1a3a5c;
}
.search_container input[type="text"]:focus {
  outline: 0;
}
.search_container input[type="submit"]{
  cursor: pointer;
  font-family: FontAwesome;
  font-size: 1.3em;
  border: none;
  background: none;
  color: #2a9fd6;
  position: absolute;
  width: 2.5em;
  height: 2.5em;
  right: 0;
  top: -10px;
  outline: none;
}



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

.form_div{
/*margin: initial;*/
text-align: center;
width: 290px;
}

}
/*フォーム*/

/*---都道府県ボタン---*/
.prefectures_btn{
  color: #1a3a5c;
  padding: 2px 8px;
  display: inline-block;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  font-size: 12px;
  font-weight: bold;
  transition: opacity 0.2s;
}
.prefectures_btn:hover { opacity: 0.75; }


.prefectures_back1{/*北海道*/
background: #82a2db;
}

.prefectures_back2{/*東北*/
background: #7eafd7;
}
.prefectures_back3{/*関東*/
background: #84d6ae;
}
.prefectures_back4{/*北陸*/
background: #7bd0cd;
}
.prefectures_back5{/*中部甲信越*/
background: #d6e36f;
}
.prefectures_back6{/*関西*/
background: #d6e36f;
}
.prefectures_back7{/*中国*/
background: #f6d667;
}
.prefectures_back8{/*四国*/
background: #ff9b59;
}
.prefectures_back9{/*九州沖縄*/
background: #ff8356;
}
/*都道府県ボタン*/

input[type="checkbox"] {
  accent-color: red;
}

input[type="radio"] {
  accent-color: red;
}

/*--resalt＿css--*/
.ser_title{
font-size:24px;
margin:20px auto;
text-align:center;
}

.re_table , td, th {
border: 1px solid #ccc;
border-collapse: collapse;
padding: 5px 3px;
}

.re_table{
min-width:600px;
max-width:1280px;
margin: 30px auto 0;
}

.re_title{
width: 100px;
text-align: center;
}

@media only screen and (max-width: 980px){
.re_table{
min-width:280px;
margin: 0 auto 20px;
}
}
/*resalt＿css*/

/*ホームページなし*/
.non_hp{
max-height: 200px !important
}

/* NEWSバッジ */
.news-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #e63946, #c1121f);
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 100px;
  box-shadow: 0 3px 10px rgba(220,30,50,0.5);
  z-index: 2;
  pointer-events: none;
}