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

/* 共通 */
body {
  background: #fff;
  color: #333;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
  line-height: 1.8;
}

main {
  margin-top: 20px;
  padding: 30px 20px;
  max-width: 960px; /* 狭めて読みやすく */
  margin-left: auto;
  margin-right: auto;
}

section {
  margin-bottom: 10px;
}
figcaption{
	font-size: 80%;
}

h1,h2,h3 {line-height:1.4;}
h2 {font-size:1.4rem; margin-bottom:12px;}
section h3 {

  font-size: 1.3rem;
  margin-bottom: 12px;
  padding-left: 12px;
  border-left: 5px solid #00552E;
  color: #222;
margin-top: 2rem;
}
/* 日付・重要表示（.day）を強調 */
.day {font-size:1.25rem; font-weight:900; color:#00552E; margin:8px 0;}

/* 表のレスポンシブ対応 */
.table-wrap {overflow:auto; -webkit-overflow-scrolling:touch; border-radius:8px; margin-bottom:14px; box-shadow:0 6px 16px rgba(0,0,0,0.04);}
table {width:100%; border-collapse:collapse;  background:#fff;}
th,td {padding:10px 6px; border:1px solid #e6e6e6; text-align:left; vertical-align:top;}
th {background:#fafafa; font-weight:700;}

/* spot images */
.spot{
	margin-top: 1rem;
}
.spot p{
	max-width: 100%;
	word-break: break-all!important;
}

/* 新しいspot-item横並びレイアウト */
.spot-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

.spot-content {
  flex: 1;
}

.spot_image {
  flex: 0 0 300px; /* 画像の幅を固定 */
}

.spot_image figure {
  margin: 0;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

.spot_image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.spot_image figcaption {
  text-align: center;
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
  padding: 5px;
}

.spot_name {font-weight:700; font-size:1.12rem; margin-bottom:8px; color:#00552E;}
.spot_name span {display:inline-block; background:#00552E; color:#fff; font-size:0.9rem; padding:2px 8px; margin-right:8px; border-radius:4px;}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .spot-item {
    flex-direction: column;
    gap: 15px;
  }
  
  .spot_image {
    flex: none;
    width: 100%;
  }
}

/* small screens adjust */
@media (max-width:900px) {
  .spot_image figure {flex-basis:100%;}
  
}

/* small screens adjust */
@media (max-width:600px) {
.spot_image {display:block;}
}


/* conditions dl */
.conditions dl {background:#fff; border:1px solid #eee; padding:18px; border-radius:8px;}
.conditions dt{font-weight:700; margin-top:12px;}
.conditions dd{margin-left:16px; margin-bottom:12px;}
.conditions table {width:100%; border-collapse:collapse; margin-top:10px;}
.conditions table td {border:1px solid #e6e6e6; padding:10px;}

/* application steps */
.application .step {background:#fff; border-radius:10px; padding:18px; box-shadow:0 6px 16px rgba(0,0,0,0.04); margin-bottom:12px;}
.application .step.arrow {background:transparent; box-shadow:none; text-align:center;}
.application .arrow-icon {font-size:1.3rem; color:#e60033; display:inline-block; transform:translateY(-6px);}
.step_title {text-align:center; font-weight:900; font-size:1.05rem; color:#fff; background-color: #00552e; display:block; padding:8px 14px; border-radius:8px; position:relative;  margin:0 auto 10px;}
.step_title::before {content:""; position:absolute; inset:-6px; background:linear-gradient(90deg,#e60033,#ff7b9b); z-index:-1; border-radius:10px; opacity:0.95;}

/* CTA */
.center-cta {text-align:center; margin-top:30px;margin-bottom: 20px;}
.cta-button {display:inline-block; background:linear-gradient(90deg,#ff416c,#ff7300); color:#fff; padding:14px 26px; border-radius:40px; font-weight:800; box-shadow:0 8px 24px rgba(255,80,100,0.18); transition:transform .16s ease; border: none;width: 80%!important;font-size: 1.4rem;text-decoration: none!important;}
.cta-button:hover, .cta-button:focus {transform:translateY(-3px); outline:none;}
.cta-button-2 {display:inline-block; background:linear-gradient(90deg,#4158d0,#c850c0); color:#fff; padding:14px 26px; border-radius:40px; font-weight:800; box-shadow:0 8px 24px rgba(65,88,208,0.18); transition:transform .16s ease; border: none;width: 80%!important;font-size: 1.4rem;text-decoration: none!important;}
.cta-button-2:hover, .cta-button-2:focus {transform:translateY(-3px); outline:none;}

/* footer */
footer {background:#111; color:#fff; padding:20px 10px; text-align:center; font-size:0.9rem;}
footer a {color:#fff; opacity:0.9;}

/* header small */
header.scrolled {box-shadow:0 6px 20px rgba(0,0,0,0.08);}
@media (max-width:520px) {

  .top-title h1 {font-size:1.05rem;}
}

/* --- global readability overrides --- */
.container { max-width: 1050px; margin-left:auto; margin-right:auto; padding-left:20px; padding-right:20px; }
body { line-height:1.75; }
.section { padding-top:36px; padding-bottom:36px; }

@media (max-width:600px){
  body { line-height:1.6; font-size:15px; }
  .top .top-title h1 { font-size:28px; }
  .top-slider .slide { height:300px; }
}

/* Spot photos: 2 columns on desktop, single column on mobile */
.spot-gallery { display:flex; flex-wrap:wrap; gap:16px; }
.spot-gallery .spot { flex:1 1 calc(50% - 16px); min-width:260px; }
.spot-gallery .spot img { width:100%; height:auto; display:block; }
@media (max-width:800px){
  .spot-gallery .spot { flex-basis:100%; }
}

/* ==============================
   リスト・リンク
============================== */
ul {
  list-style: disc;
  margin-left: 1.5em;
}
ol {
  list-style: decimal;
  margin-left: 1.5em;
}
a {
  color: #06c;
  text-decoration: underline;
}
/* ==============================
   出発日・金額（重要情報）
============================== */
.info p.day {
  font-weight: bold;
  color: #e60033;
  margin: 10px 0;
  font-size: 1.2rem;
}

/* ==============================
   テーブル
============================== */
/* 共通：schedule以外 */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}
th, td {
  border: 1px solid #ccc;

}
th {
  background: #f6f6f6;
  font-weight: bold;
  text-align: center;
}
td {
  text-align: center;
}

/* pay専用 */

.pay th {
	text-align: center;
  vertical-align: middle;
}
.pay td {
  text-align: center;
vertical-align: middle;
}

/* schedule専用 */
.schedule {
  overflow-x: auto;
	min-width: 768px!important;
}
.schedule table {
  min-width: 768px!important;
}
.schedule th {
  text-align: center;
}
.schedule td {
  text-align: left;
font-size: 85%;
}

/* torikeshi */

.torikeshi td {
  vertical-align: middle!important;
}

.application button {
  display: inline-block;
  margin-top: 20px;
  padding: 18px 50px;
  font-size: 1.3rem;
  font-weight: bold;
  background: #e60033;
  color: #fff;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s;
}
.application button:hover {
  background: #c10029;
}

.t-c{text-align: center!important;	
}

.t-l{text-align: left!important;
	
}

.t-r{text-align: right;
	
}

.pink{
	color: #ff416c;
}
.fwb{
	font-weight: bold;
}

.small{font-size: 85%;
	
}

.pc{
	display: block!important;
}
.sp{
	display: none!important;
}

@media (max-width:600px){
.pc{
	display: none!important;
}
.sp{
	display: block!important;
}
}

/* YES/NOボタン共通 */
.yes_no {
  display: flex;
  justify-content: center;
  gap: 24px; /* ボタンの間隔を広めに */
  margin: 28px 0 12px;
}

.mokofo {
  display: inline-block;
  padding: 16px 40px; /* 大きめサイズ */
  font-size: 1.4rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}

/* 色指定 */
.mokofo.yes {
  background: #007bff; /* 青 */
}

.mokofo.no {
  background: #dc3545; /* 赤 */
}

.mokofo:hover {
  transform: translateY(-3px);
  opacity: 0.9;
}

/* 説明文 */
.yes_no-caption {
  text-align: center;
  font-size: 1rem;
  color: #555;
}

/* スマホでは縦並び */
@media (max-width: 600px) {
  .yes_no {
    flex-direction: column;
    gap: 16px;
  }
  .mokofo {
    text-align: center;
  }
}

.bank{
	border: dotted darkgray 1px;
	margin: 10px auto;
	padding: 10px;
	
}

strong{
	color: #004DA0!important;
}
.red{
	color: red;
	font-weight: bold;
}

.fp {font-size:1.1rem; font-weight:600; color:#e60033;}

.vc{
	vertical-align: middle;
}

/* ===== 旅行コースデザイン強化CSS ===== */

/* 全体レイアウト */
.spot {
  margin-top: 2rem;
  padding: 1rem;
  background: linear-gradient(180deg, #f9f9f6 0%, #ffffff 100%);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}
.spot:hover {
  box-shadow: 0 10px 30px rgba(0, 85, 46, 0.1);
}

/* 各コースブロック */
.spot-block {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #ccc;
}
.spot-block:last-child {
  border-bottom: none;
}

/* 見出し（コース名） */
.spot_name {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 12px;
  color: #004d2b;
display: block;
}


/* 説明文 */
.read {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  background: #f7faf7;
  padding: 1rem 1.2rem;
  border-left: 4px solid #8cbfa1;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}

/* フェードアニメーション */
.spot-block {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fwb-red{
font-weight: bold;
color: red;
}

.bgp{background-color:#00552E;
	color:#FFFFFF;
	display: inline-block;
	font-weight: bold;
	padding: 2px 6px;
	font-size: 1.2rem;
	margin-top: 12px;
	margin-bottom: 0px;
}

/* ツアー別の色分け */
.tour-mindfulness .tour-category {
    background: linear-gradient(135deg, #00552E 0%, #004DA0 100%);
}

.tour-kabuki .tour-category {
    background: linear-gradient(135deg, #8B0000 0%, #DC143C 100%);
}

.tour-mountain .tour-category {
    background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
}

#arrange{
	border: 2px #A3000A solid;
	padding: 2rem;
	margin: 60px auto;
}

@media (max-width:768px) {
	#arrange{
	border: 2px #A3000A solid;
	padding: 1rem;
	margin: 0 auto;
}
}

.arr{background:linear-gradient(90deg,#4158d0,#c850c0);
	color: #FFFFFF;
	padding: 20px 10px;
	text-align: center;
}

.mt-50{
	margin-top: 50px;
}