@charset "UTF-8";
/* CSS Document */

*,*::before,*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}

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

body{
font-family: "noto-sans-jp-", sans-serif;
margin: 0 auto;
font-size: 17px;
overflow-x: hidden;
}

.container{
width: 90%;
margin: 0 auto;
}
@media (min-width:768px){
.container{
width: 700px;
margin: 0 auto;
}
}

p{
text-align: left;
margin: 20px;
}

@media(min-width:768px){
.br-sp{
display: none;
}
}

.br-pc{
display: none;
}
@media(min-width:768px){
.br-pc{
display:block;
}
}

/* スプラッシュの土台 */
#splash{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #fff;
  transition: opacity .6s ease, visibility .6s ease;
  overflow: hidden;
}

/* 2つの video を重ねて、幅で見せたい方だけ可視化（SPファースト） */
.splash-video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-position: center;
  opacity: 0;
  visibility: hidden;
}

/* 初期＝スマホ動画を表示（縦動画はcover） */
.splash-sp{
  opacity: 1;
  visibility: visible;
  object-fit: cover;
}

/* PC幅＝PC動画を表示（拡大しすぎ防止で contain、余白は白） */
@media (min-width: 768px){
  .splash-sp{ opacity: 0; visibility: hidden; }
  .splash-pc{
    opacity: 1;
    visibility: visible;
    object-fit: contain;
    background: #fff;
  }
}

/* フェードアウト後に無効化（JSで .hide を付与） */
#splash.hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

header{
display: flex;
background-color: #fff4bd;
height: 40px;
align-items: center;
}

header .logo{
display: flex;
justify-content: space-between;
align-items: center;
}

header .logo img{
height: 30px;
}

main{
background-color: #fff;
}

.visually-hidden {
 display: none;
}

#hero{
  position: relative;
  width: 100%;
/*  height: 100vh; height: 100svh; height: 100dvh;*/
 height: auto;
  overflow: hidden;
  background: #fff;
}

.hero-video {
  display: none;           /* ← 初期状態は非表示 */
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: top center;
  background-color: #fff;
}

/* 出し分け（SPファースト） */
.hero-sp{ display: block; }
.hero-pc{ display: none; }

@media (min-width: 768px){
  /* PCは中央寄せで切れにくく */
  .hero-video.hero-pc{ object-position: center center; }
  .hero-sp{ display: none; }
  .hero-pc{ display: block; }
}

/* ===== 以下コンテンツ例 ===== */
main {
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

h2{
font-family:'Zen Maru Gothic', sans-serif;
text-align: center;
border-bottom: 3px solid #e9cac2;
border-top: 3px solid #e9cac2;
margin-top: 70px;
padding: 10px 5px;
font-size: 28px;
margin-bottom: 20px;
}

h3{
font-family:'Zen Maru Gothic', sans-serif;
text-align: center;
font-size: 24px;
margin: 40px;
}

.day{
width:50%;
display: flex;
margin: 30px auto 0 auto; 
}
@media(min-width:768px){
.day{
width:300px;
}
}

h4{
font-family:'Zen Maru Gothic', sans-serif;
text-align: center;
font-size: 24px;
margin: 10px;
}

.model-course h4{
width: 150px;
display: inline-block;
}

.spot-BOX{
margin-top:20px;
margin-bottom:20px;
padding: 15px 15px;
border-radius: 30px;
border: 3px solid rgba(209,178,178,0.2);
}

.route {
 background-image: url("../images/hasen.png");
 background-repeat:no-repeat;
 background-position:center;
 display: inline-table;
 background-size: cover;
}

.time p{
background-color:#d19a8a;
padding:10px;
border-radius: 5px;
text-align: center;
justify-content: center;
font-weight: 700;
}

h5{
font-family:'Zen Maru Gothic', sans-serif;
text-align: center;
font-size: 24px;
margin: 25px;
}

h6{
font-family:'Zen Maru Gothic', sans-serif;
text-align: center;
font-size: 21px;
margin-top: 50px;
}

.intro h2{
margin-bottom:40px; 
}

.ohana_kappa{
display: flex;
justify-content: center;
}

.ohana_kappa img{
width:100%;
}

@media(min-width:768px){
.ohana_kappa img{
width:50%;
margin: 0 auto;
}
}

/* セクション */
#folklore {
  padding: 24px 16px;
}

/* details 全体 */
.accordion-item {
  border: 3px solid #e6e2da;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
}

/* summary をボタン風に */
.accordion-trigger {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  font-weight: 700;
  user-select: none;
}
.accordion-trigger::-webkit-details-marker { display: none; }
.accordion-trigger:hover,
.accordion-trigger:focus { background: #faf7f2; outline: none; }

/* ＋／−アイコン */
.accordion-trigger .icon {
  inline-size: 18px; block-size: 18px; position: relative;
}
.accordion-trigger .icon::before,
.accordion-trigger .icon::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: #8b7f6b; transform: translate(-50%, -50%);
  transition: transform .2s ease;
}
.accordion-trigger .icon::before { inline-size: 14px; block-size: 2px; } /* 横棒 */
.accordion-trigger .icon::after  { inline-size: 2px;  block-size: 14px; } /* 縦棒 */

/* パネル */
.accordion-panel {
  padding: 10px 16px;
  line-height: 1.8;
  font-size: 0.95rem;
  background: #fdfaf6;
}

/* 開いたときは “−” 表示（縦棒を消す） */
.accordion-item[open] .accordion-trigger .icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}

/* 民話ボックスの軽い装飾（任意） */
.minwa {
  background: #fdfaf6;   /* 薄いベージュや和紙風の色に */
  display: flex;
  flex-flow: column;
  align-items: center;
}
.minwa h3 {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 1.3rem;
  margin: 20px;
}
.minwa p {
  margin: 10px;
  font-size:16px; 
  line-height: 1.8;
}

.minwa-img img {
  max-width: 250px;   /* 画像の大きさを調整 */
}

.introCard{
display: flex;
align-items: center;
justify-content: center;
}

.introCard__image img{
width:150px;
margin-left: 30px;
}

.intro_image{
list-style: none;
display:flex;
flex-wrap: wrap;
justify-content: space-between;
margin:20px 0;
}

.intro_image li{
width:50%;
margin:0;
}

.tokubetsu img{
border-radius: 20px;
width:100%;
margin:10px 0;
}

.kappaCard{
display: flex;
/*justify-content:space-between;*/
align-items: center;
flex-flow: column;
}
@media(min-width:768px){
.kappaCard{
flex-flow: nowrap;
justify-content: space-between;
}
}

.kappaCard__text{
border-radius: 0;
width:100%;
}
@media(min-width:768px){
.kappaCard__text{
width:60%;
}
}

.kappaCard__image{
border-radius: 0;
width:60%;
}
@media(min-width:768px){
.kappaCard__image{
border-radius: 0;
width:40%;
}
}

/*
.kappaCard__image img{
width: 200%;
}
*/

/*------ スライダーの横幅 ------*/
.slider{
  width:100%;
  margin:0 auto;
}

.slick-list{
border-radius: 20px;
overflow: hidden;
}

/*------ スライダー画像 ------*/
.slider img{
width: 100%;
margin: 0 30px;
}

/*-------- 高さ調整 ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*---------- 矢印 ----------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
	}

.slick-dots li{
	width:40px!important;
}

.slick-dots li button:before{
	font-size:60px!important;
}

.model-course{
text-align: center;
}

.model-course p{
margin-top:50px; 
}

.model-course img{
border-radius: 20px;
width:100%;
margin: 0 auto;
}


span{
font-size:  0.85em;
}

.spot img{
width: 80%;
margin:20px 0;
border-radius: 0px;
border: 10px solid #fff;
box-shadow: 0 10px 15px rgba(0,0,0,0.2);
}

.model-course .spot p{
margin: 0 auto;
box-sizing: border-box;
border: none;
width: 85%;
height: auto;
}

.model-course a{
display: block;
}

.btn a{
margin: 15px auto;
background-color:#e9cac2;
color: #000;
text-decoration: none;
font-weight: 600;
padding: 15px 40px;
display: inline-block;
border-radius: 999px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
cursor: pointer;
}

.btn a:hover{
background-color:#d19a8a;
}

.model-course a img{
width:50%;
}

.other{
text-align: center;
}

.other img{
border-radius: 20px;
width:100%;
margin:0 auto;;
}

.other p{
margin-top:50px;
margin-bottom:10px;
}

.other .btn{
margin-bottom: 30px;
}

.omiyageCard{
display: flex;
flex-direction: column;
align-items: center;
}
@media(min-width:768px){
.omiyageCard{
display: flex;
flex-direction:row;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
}

.omiyageCard img{
border-radius: 0;
height: auto;
width: 250px;
margin: 0 auto;
}
@media(min-width:768px){
.omiyageCard img{
border-radius: 0;
height:auto;
width: 300px;
margin: 10px;
}
}

.messageCard{
display: flex;
flex-flow: column;
align-items: center;
margin:50px 0; 
}
/*
@media(min-width:768px){
.messageCard{
flex-flow: nowrap;
justify-content: center;
}
}
*/

.messageCard__text{
width: 90%;
}
@media(min-width:768px){
.messageCard__text{
width:50%;
}
}

.messageCard__text P{
font-family:'Zen Maru Gothic', sans-serif;
text-shadow: 0 4px 6px rgba(210,127,127,0.6);
font-size: 1.5em;
text-align: center;
}
@media(min-width:767px){
.messageCard__text P{
font-size: 30px;
}
}

.messageCard__image{
width:90%;
}
@media(min-width:768px){
.messageCard__image{
width:300px;
}
}

.access-BOX{
background-color:rgba(245,240,212,0.3);
padding: 15px 0;
border-radius: 30px;
border: 3px solid rgba(245,240,212,1);
}

.access .container{
width: 85%;
}
@media(min-width:768px){
.access .container{
width:600px;
}
}

.access .btn{
text-align: center;
}

footer{
background-color:#fff;
text-align: center;
padding:20px;
}

.footer__logo{
width: 200px;
margin:20px auto;
}

footer p{
text-align: center;
}

footer a,header a{
cursor: pointer;
}

#back-to-top {
  position: fixed;
  bottom: 20px;     /* 画面下からの距離 */
  right: 20px;      /* 画面右からの距離 */
  width: 50px;
  height: 50px;
  border-radius: 50%;   /* 丸いボタン */
  border: none;
  background: #e9cac2;  /* サイトの雰囲気に合わせた色 */
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  display: none;        /* 初期状態では非表示 */
  z-index: 1000;        /* 他要素より前に表示 */
}

#back-to-top:hover {
  background: #d19a8a; /* ホバー時の色 */
}