slogologologologologologologo}}@charset "UTF-8";

/*メニュー*/

body{
  margin:0;
}

.sp-header{
  display:none;
  box-sizing:border-box;
}

.logo{
  width:110px;   /* 好きなサイズに */
  height:auto;/* 縦横比を保つ */
}

.logo2{
  width:auto;   /* 好きなサイズに */
  height:40px;   /* 縦横比を保つ */
}


.side{
  width:150px;
  background:#8c0000;
  color:#fff;
  padding:20px;
  box-sizing:border-box;
}


.side a{
  display:block;
  color:#fff;
  text-decoration:none;
  margin:10px 0;
  font-size:14px;
}

.side_icon{
gap: 5px;
margin-top: 20px;
}

.side_icon img{
  max-width: 40%;
  height: auto;
  display: block;
}



.menu{
  position:sticky;
  top:20px;
}
	
section{
  padding:40px;
}


/* 三本線ボタン */

.menu-btn{
  position: fixed;
  top: 15px;
  right: 15px;
  width: 44px;
  height: 44px;
  background: #8c0000;
  border-radius: 6px;
  cursor: pointer;
  z-index: 2000;
}

/* 三本線 */
.menu-btn::before,
.menu-btn::after{
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: 0.3s;
}

/* 上の線＋真ん中の線 */
.menu-btn::before{
  top: 14px;
  box-shadow: 0 8px 0 #fff; /* ←これで3本になる */
}

/* 下の線 */
.menu-btn::after{
  top: 30px;
}

/* ×に変形 */
.menu-btn.open::before{
  transform: rotate(45deg);
  top: 21px;
  box-shadow: none;
}

.menu-btn.open::after{
  transform: rotate(-45deg);
  top: 21px;
}
/* ムービとこだわりの文章 */

.content{
  width:100%;
}

body{
  margin:0;
}

.layout{
  display:flex;
  flex-direction:row-reverse;
  width:100%;
}

.text-area_small{
	display:none;
	}
.text-area_small p{
  font-size: 0.9rem;
}

.main-area{
  display:flex;
  height:65vh;
}

/* 左：テキスト */
.text-area{
  width:30%;
  margin: 0 auto;   /* ← これで全体が中央 */
  background:#000;
  color:#fff;
  padding:10px 30px;
  box-sizing:border-box;
  overflow:auto;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  text-align: left; /* ← 文字は左揃え */
}

.text-area p{
  font-size: 0.9rem;
}

/* 真ん中：動画 */

.slide{
  opacity: 0;
  transition: opacity 0.6s;
  position: absolute;
}

.slide.active{
  opacity: 1;
  position: relative;
}

.video-area{
  width:70%;
  height:100%;
  background:#111;
  overflow:hidden; /* はみ出しカット */
}

/* 動画を全面表示 */
.video-area video,
.video-area iframe{
  width:100%;
  height:100%;
  object-fit:cover;
}

.layout{
  display:flex;
  flex-direction:row-reverse;
  width:100%;
  min-height:100vh;
}
video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* カテゴリータイトル */
.title {
  text-align: center;
  margin-top: 0px;
}

.title h2 {
  display: inline-block;   /* ← 超重要 */
  margin: 10px auto 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #000;

  font-family: "Hiragino Mincho ProN", "Yu Mincho",
               "MS Mincho", serif;
}

/* 新着情報 */

.oshirase{
  padding:80px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}	

.oshirase_text .date {
  color: red;
}

/* リンクの通常状態 */
.oshirase_text .oshirase_link {
  color: black;             /* 黒文字 */
  text-decoration: none;     /* 下線なし */
  transition: color 0.3s;   /* 色の変化を滑らかに */
}

/* リンクにカーソルを置いたとき */
.oshirase_text .oshirase_link:hover {
  color: #d90000;           /* 赤色に変化 */
  text-decoration: underline; /* 下線を表示 */
}

/* クリック済みリンクの色（任意で管理） */
.oshirase_text .oshirase_link:visited {
  color: black; /* 黒のままでもOK */
}

.oshirase_text{
  width:100%;
  max-width:500px;   /* ← 好きな幅に調整（これが基準線になる） */
  text-align:left;   /* ← 中身は左揃え */
}

.oshirase p,
.oshirase h2
 {
 margin: 10px 0; 
 padding:10px 30px;
 font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  text-align: left; /* ← 文字は左揃え */
}
.oshirase img{
  width:100px;
  height:auto;
}

/* おすすめ */
.osusume_bg {
  min-height: 200px;
  width: 100%;
  background-image: url('../img/haikei.jpg'); /* ←重要 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 0 40px 0;
  padding: 5px 0px;
}


/* 全体 */
.osusume_item {
  max-width: 500px;
  margin: 180px auto;
  position: relative;
}

/* ① テキスト */

strong {
  font-family: "Hiragino Mincho ProN",
               "Yu Mincho",
               "MS Mincho",
               serif;
  font-weight: bold;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
}

.osusume_text {
  color: #fff;
  padding: 15px 20px;
  width: 290px;
  border-radius: 12px;
  position: absolute;
  top: -75px;
  left: -50px;
  z-index: 2;
}
.orange{
 background: rgba(198, 69, 28, 0.9); 
}

.black {
  background: rgba(0, 0, 0, 0.8);
}

.blue {
 background: rgba(0, 81, 137, 0.8);
}


/* ② メイン写真（少し重ねる） */
.osusume_main {
  width: 100%;
  border-radius: 18px;
  position: relative;
  z-index: 1;
}

/* ③ サムネイル */
.osusume_thumbs {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.osusume_thumbs img {
  width: 100px;
  border-radius: 8px;
  cursor: pointer;
}

.osusume_thumbs img:hover {
  opacity: 0.7;
}

.osusume_768
{
display:none;
	 }

/* グランドメニュー */

.menu-main {
  display: flex;
  justify-content: center;
  margin: 40px 0;
}

.menu-main img {
  width: 30%;
  max-width: 300px;
  cursor: pointer;
}

/* モーダル表示 */

.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 9999;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal img {
  max-width: 70vw;
  max-height: 85vh;
  width: auto;
  height: auto;
}

.modal-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow.left {
  left: -60px;
}
.arrow {
  font-size: 42px;
  color: #fff;
  cursor: pointer;
  user-select: none;
  padding: 12px 14px;
  background: rgba(0,0,0,0.4);
  border-radius: 50%;
}
.arrow.right {
  right: -60px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}

/* ご案内 */
.pink{
background-color: antiquewhite;
padding: 15px 0px 15px 0px;
	}
.carousel {
  position: relative;
  width: 80%;
  margin: 30px auto 20px ;
}

.carousel-window {
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 20px;
  transition: transform 0.3s ease;
}

.card {
  flex: 0 0 calc(30% - 20px); /* 3つ表示 */
  background: #fff;
  text-align: left;
  padding: 20px;
  border-radius: 10px;
  text-decoration: none;
  color: #000;
  font-weight: bold;
  display: block;
box-sizing: border-box;
}

.card img {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
}

.card p {
  margin: 0;
  font-size: 0.95rem;
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

button.prev { left: -40px; }
button.next { right: -40px; }

/* ===== フッター ===== */
footer{
background-color: #FFFFFF; 
 padding: 40px 30px; 
}

.wrapper{
  padding: 50px 30px;
  display: flex;
  justify-content: center;
  gap: 50px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.logo3{
  width:200px;   /* 好きなサイズに */
  height:auto;   /* 縦横比を保つ */
}
.icon{
  max-width: 200px;
  text-align: center;
}

.snsbotan{
  display: flex;
  justify-content: center;
  padding: 10px 10px;
  gap: 4px;

}
.snsbotan img{
  max-width: 100%;
  height: auto;
  display: block;
}

.info p{
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  text-align: left; /* ← 文字は左揃え */
 margin: 0 0 5px 0;

}

.access-title{
  color: #777;
 }

.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===== スマホ用 ===== */
@media (max-width:768px){

  body{
    display:block;
    padding-top:0px; /* ← ヘッダー分 */
  }

  /* 上固定ヘッダー */
  .sp-header{
    display:flex;
    top:0;
    left:0;
    width:100%;
    height:60px;
    background:#8c0000;
    align-items:center;
    justify-content:space-between;
    padding:0 15px;
    z-index:1000;
  }

  /* サイドメニューを右から出す */
  .side{
    position:fixed;
    top:60px;
    right:-100px;   /* ← width と同じ */
    width:100px;
    height:calc(100vh - 60px);
    transition:right 0.3s;
    z-index:999;
  }

  .side.active{
    right:0;
  }
	
.logo{
	display:none;
	 }
	
.side_icon img{
  max-width: 75%;
}

/* ムービーとこだわりの文章 */
	
  .text-area_small{
    display:block;   /* ← これが必須 */
    width:100%;      /* スマホなら30%はやめるのが自然 */
  margin: 0 auto;   /* ← これで全体が中央 */
  background:#000;
  color:#fff;
  padding:10px 30px;
  box-sizing:border-box;
  overflow:auto;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS Mincho", serif;
  text-align: left; /* ← 文字は左揃え */
  }
	
.text-area{
display:none;
}
  .main-area{
    width:100%;
    height:auto;
    display:flex;
    flex-direction:column; /* ← 縦並び */
  }

  /* 動画を上・横100% */
  .video-area{
    width:100%;
    height:50vh; /* おすすめ */
  }

  .video-area video,
  .video-area iframe{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  /* テキストを下へ */
  .text-area{
    width:100%;
    padding:20px;
  }
	
/* カテゴリータイトル */

.title h2 {
font-size: 95%;
}
/* 新着情報 */	
.oshirase{
  padding:20px;

}	
	
/* おすすめ */		
.osusume_item
{
display:none;
	 }
	
.osusume_768
{
display: block;
width: 80%;
margin: 20px auto;
padding:20px;
text-align: center; 
border-radius: 12px; 
	 }

.orange
{
background: rgb(198, 69, 28);
}
	
.black {
  background: rgba(0, 0, 0,);
}

.blue {
 background: rgba(0, 81, 137,);
}
	
.osusume_bg {
  min-height: 200px;
  width: 100%;
  background-image: url('../img/haikei.jpg'); /* ←重要 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 0 20px 0;
  padding: 5px 0px;
}
.White {
  color: aliceblue;
  margin-top: 0;
}	
/* ご案内 */	
.carousel-window {
  width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 12px;
  transition: transform 0.3s ease;
}

  .card {
    flex: 0 0 80%;
    box-sizing: border-box;
  }
	
button.prev { left: -25px; }
button.next { right: -25px; }
	
/* フッター */
.wrapper{
    justify-content: flex-start;
  }
}