*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Comic Neue','Yu Gothic','Poppins',sans-serif;
  background:#a0e7ff;
  color:#333;
  line-height:1.8;
  font-weight:700;
}

/* ヘッダー */
header{
  position: relative;
  height:auto; /* 画像で高さ自動調整 */
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:1rem;
  background:none; /* 背景色削除 */
}

/* ヘッダー画像 */
.header-img{
  width:1170px;
  max-width:100%;
  height:auto;
  display:block;
  margin:0 auto;
}

/* スマホ対応 */
@media(max-width:600px){
  .header-img{
    width:100%;
    height:auto;
  }
  .header-text h1{
    font-size:2.2rem;
  }
}


/* 吹き出し風 */
.header-text {
  max-width: 850px;
  line-height: 1.6;
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 5rem;
  position: relative;
  z-index: 1;
  color: #000;
  background: #fff799; /* 黄色系 */
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
  display: inline-block;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 吹き出しの三角部分 */
.header-text::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: #fff799 transparent transparent transparent;
  filter: drop-shadow(0 -2px 2px rgba(0,0,0,0.1));
}

/* ホバー時アニメーション */
.header-text:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0,0,0,0.2);
}

/* 見出し */
.header-text h1 {
  font-family: 'Comic Neue', 'Yu Gothic', 'Poppins', sans-serif;
  font-weight: bold;
  font-size: 2.8rem;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  position: relative;
  display: inline-block;
  line-height: 1.2;
  color: #00134d; /* 濃紺 */
}

/* 下線アニメーション */
.header-text h1::after {
  content: "";
  position: absolute;
  width: 0;
  height: 5px;
  bottom: -8px;
  left: 0;
  background: #ff6f61;
  border-radius: 2px;
  transition: width 0.8s ease-in-out;
}
.header-text h1:hover::after {
  width: 100%;
}

.header-text p {
  margin-top: 1rem;
  font-size: 1.1rem;
}

/* 強調部分 */
.highlight {
  color: #001682;
  font-weight: 1000;
  background: rgba(255, 253, 0, 0.7);
  padding: 0 4px;
  border-radius: 4px;
}



/* メイン */
main{
  max-width:1100px;
  margin:0 auto 3rem;
  padding:0 1rem;
}

/* カード */
.cards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:2rem;
  margin-bottom:4rem;
}

.card{
  flex:1 1 30%;
  min-width:220px;
  background:#ffffff;
  padding:2.5rem 1.8rem;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  text-align:center;
  position:relative;
  transition:transform 0.3s, box-shadow 0.3s;
  opacity:0;
  transform: translateY(50px);
  cursor:pointer;
}

/* ホバーで1回だけジャンプ */
.card:hover{
  animation: jumpOnce 0.4s forwards; /* 1回だけ */
}

@keyframes jumpOnce{
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  50%  { transform: translateY(-12px) rotate(-3deg) scale(1.05); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}

/* カード見出し */
.card h3{
  font-family:'Luckiest Guy','Comic Neue','Yu Gothic','Poppins',sans-serif, cursive!important;
  font-size:1.55rem;
  color:#000; /* 黒文字 */
  margin-bottom:1rem;
  position:relative;
  display:inline-block;
  padding:0; /* 背景色削除 */
}

/* 見出しのペンアンダーライン */
.card h3::after{
  content:"";
  position:absolute;
  width:0;
  height:4px;
  bottom:-5px;
  left:0;
  background:#ffb347; /* 黄色 */
  border-radius:2px;
  transition:width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.card:hover h3::after{
  width:100%;
}

/* カード文章 */
.card p{
  font-size:1.15rem;
  color:#333;
  font-weight:700;
  margin-top:0.5rem;
  line-height:1.9;
  position:relative;
}

/* 文章の下線アニメ */
.card p{
  font-size:1.15rem;
text-align: justify!important;
  color:#333;
  font-weight:700;
  margin-top:0.5rem;
  line-height:1.8;
  position:relative;
  /* 下線アニメ削除のため ::after 関連は削除 */
}



.small{
	font-size: 75%;
	line-height: 1.6;
	display: inline-block;
}


/* ボタン */
.btn{
  display:inline-block;
  padding:1rem 1.8rem;
  margin-top:1rem;
  background:#ff6f61;
  color:white;
  text-decoration:none;
  font-weight:700;
  border-radius:20px;
  transition:0.3s;
  box-shadow:0 5px 12px rgba(0,0,0,0.15);
}
.btn:hover{
  background:#ff856f;
  transform:translateY(-3px);
  box-shadow:0 8px 18px rgba(0,0,0,0.25);
}

/* フッター */
footer{
  background:#0077b6;
  color:white;
  text-align:center;
  padding:2rem 1rem;
  font-weight:700;
}

/* レスポンシブ */
@media(max-width:992px){.card{flex:1 1 45%;}}
@media(max-width:600px){
  .header-text h1{font-size:2.2rem;}
  .cards{flex-direction:column;gap:1rem;}
  .card{flex:1 1 100%;}
}


/* 行程表 */
.itinerary {
  max-width: 1000px;
  margin: 3rem auto;
  padding: 2rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  position: relative;
}

.itinerary h2 {
  font-size: 1.8rem;
  text-align: center;
  margin-bottom: 2rem;
  position: relative;
  display: inline-block;
  font-family: 'Luckiest Guy', cursive;
  color: #000;
}

.itinerary h2::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ffb347;
  border-radius: 2px;
  animation: underline-grow 1s ease forwards;
}

/* 日程の横並び */
.days {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.day {
  flex: 1 1 45%;
  background: repeating-linear-gradient(
    to bottom,
    #fff,
    #fff 26px,
    #f5f5f5 27px
  ); /* ノート罫線風、行間少し広げ */
  padding: 1.5rem 1.8rem;
  border: 1px solid #ddd;
  border-radius: 12px;
  box-shadow: 2px 6px 10px rgba(0,0,0,0.08);
  transform: rotate(-1deg);
  transition: all 0.3s ease;
  position: relative;
  line-height: 1.8; /* 行間を広めに */
}

.day:nth-child(even) {
  transform: rotate(1deg);
}

.day::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 18px;
  background: #ffeb99;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.day:hover {
  transform: scale(1.02) rotate(0deg);
  box-shadow: 4px 10px 16px rgba(0,0,0,0.15);
}

.day h3 {
  font-size: 1.2rem;
  color: #333;
  margin-bottom: 0.6rem;
  font-weight: 700;
}

.route {
  font-size: 0.9rem;
  line-height: 2;
  margin-bottom: 0.8rem;
}

.bus {
  color: #0074c7;
  font-weight: bold;
}

.details {
  list-style: none;
  padding: 0;
  margin: 0 0 0.8rem 0;
}

.details li {
  font-size: 0.85rem;
  margin: 0.25rem 0;
}

.note {
  font-size: 0.8rem;
  color: #666;
  margin: 0.25rem 0;
  font-style: italic;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .days {
    flex-direction: column;
  }
  .day {
    flex: 1 1 100%;
    transform: rotate(0deg);
    font-size: 0.9rem;   /* 全体の文字を少し小さく */
    padding: 1.2rem 1.4rem;
  }
  .day:nth-child(even) {
    transform: rotate(0deg);
  }
  .day h3 {
    font-size: 1rem;
  }
  .route {
    font-size: 0.85rem;
  }
  .details li,
  .note {
    font-size: 0.75rem;
  }
}

/* スマホ用（600px以下） */
@media (max-width: 600px) {

  /* ヘッダー */
  .header-text {
    font-size: 1rem; /* 全体少し小さめ */
    padding: 1.2rem 1.5rem;
    margin-top: 1rem;
    margin-bottom: 2.5rem;
    line-height: 1.4; /* 行間もコンパクト */
  }

  .header-text h1 {
    font-size: 1.6rem;
    margin-bottom: 1rem;
  }

  .header-text p {
    font-size: 1rem;
    line-height: 1.8;
    margin-top: 0.5rem;
  }

  /* ポイント部分 */
  .points {
    flex-direction: column; /* 横並び解除 */
    gap: 1rem;
  }

  .cards {
margin-bottom: 1rem;
  }
	
	
  .card {
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
  }

  .card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
  }

  /* お問い合わせセクション */
  .contact {
    font-size: 0.95rem;
    line-height: 1.4;
    padding: 1rem;
  }

  .contact h2 {
    font-size: 1.2rem;
  }

  .btn {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
  }

  /* 行程表（見た目は維持） */
  .schedule .day {
    font-size: 0.95rem; /* 少しだけ小さめ */
    line-height: 1.5;
    padding: 1rem;
  }
}