@charset "UTF-8";
/*------------------------------------------------------------
	レスポンシブCSS
	- タブレット（768px〜1439px）：ヒーローと余白を調整
	- スマートフォン（767px以下）：フルモバイルレイアウト
------------------------------------------------------------*/

/* ========================================
   PC表示時（1440px以上）：スマホ用パーツ非表示
======================================== */
.hero_sp {
  display: none;
}

/* PC表示時：スマホ用改行を非表示 */
.sp_br {
  display: none;
}


/*============================================================
	タブレット（768px〜1439px）
	ヒーローエリアのみhero_sp.jpgに差し替え
	コンテンツは左右余白を追加
============================================================*/
@media screen and (max-width: 1439px) {

/* 修正後（ドットをカンマに） */
html, body {
  min-width: 100%;
}

/* ヒーロー：hero_sp.jpgを表示 */
.hero_sp {
  display: block;
  width: 100%;
}

.hero_sp img {
  width: 100%;
  height: auto;
  display: block;
}

.headerbox {
  width: 100%;
  position: static;
}

/* PC版ヒーローパーツを非表示（off20は残す） */
.headlogo_itobrand,
.hero_main,
.ill_bird,
.ill_woman,
.ill_kutsu,
.ill_boy,
.ill_bag,
.ill_rainbow,
.ill_yashi,
.ill_guide,
.ill_flower {
  display: none;
}

/* 20%バッジ（ギャラリーに重ねる） */
.off20 {
	width: 500px;
  height: auto;
  margin: 0 auto -100px auto;
  position: relative;
  z-index: 100;
}

.off20 img {
  width: 100%;
  height: auto;
}

/* コンテンツ幅を統一（左右30pxの余白） */
.infobox,
.info_grid,
.period_box,
.cta_grid {
  width: calc(100% - 60px);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.whitebox {
  max-width: 100%;
  box-sizing: border-box;
}

.infbox_scrooll {
  padding: 30px;
  box-sizing: border-box;
}

.infottl {
  display: none;
}

.infotexbox {
  width: 100%;
  margin-left: 0;
}

.footer {
  padding: 50px 30px;
}

} /* タブレット @media 閉じ */


/*============================================================
	スマートフォン（767px以下）
============================================================*/


@media screen and (max-width: 767px) {
/* タブレット用のwidth指定をリセット */
.infobox,
.info_grid,
.period_box,
.cta_grid {
  width: auto;
}
	
/*------------------------------------------------------------
	共通
------------------------------------------------------------*/
body {
  font-size: 16px;
}

/* 修正後 */
html, body {
  min-width: 100%;
}

/*------------------------------------------------------------
	ヘッダー・ヒーローエリア
	hero_sp.jpg 1枚に差し替え
------------------------------------------------------------*/

/* スマホ用ヒーロー画像を表示 */
.hero_sp {
  display: block;
  width: 100%;
}

.hero_sp img {
  width: 100%;
  height: auto;
  display: block;
}

/* headerboxの固定幅を解除 */
.headerbox {
  width: 100%;
  position: static;
}

/* PC版ヒーローパーツを非表示（off20バッジは残す） */
.headlogo_itobrand,
.hero_main,
.ill_bird,
.ill_woman,
.ill_kutsu,
.ill_boy,
.ill_bag,
.ill_rainbow,
.ill_yashi,
.ill_guide,
.ill_flower {
  display: none;
}

/* 20%バッジをスマホ用に調整（ギャラリーに重ねる） */
.off20 {
  width: 220px;
  height: auto;
  margin: 0 auto -80px auto;
  position: relative;
  z-index: 100;
}

.off20 img {
  width: 100%;
  height: auto;
}

/*------------------------------------------------------------
	ティッカースライド（写真ギャラリー）
------------------------------------------------------------*/
.gallerybg {
  height: 140px;
  margin-top: 0;
  margin-bottom: 30px;
}

#gallery {
  height: 140px;
}

.gallaryitem {
  width: 200px;
  height: 140px;
  background-size: cover;
}

/*------------------------------------------------------------
	お知らせ
------------------------------------------------------------*/
.infobox {
  padding: 0 15px;
  box-sizing: border-box;
}

/* お知らせ看板を非表示 */
.infottl {
  display: none;
}

/* スクロールボックスの左パディングをリセット */
.infbox_scrooll {
  padding: 20px 15px;
  max-width: 100%;
  overflow-x: hidden;
}

.whitebox {
  max-width: 100%;
  padding: 20px 15px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.infotexbox {
  width: 100%;
  margin-left: 0;
}

/* 日付とテキストを縦積み */
.infolist {
  flex-direction: column;
  padding: 12px 0;
}

.date {
  width: 100%;
  font-size: 14px;
  margin-bottom: 4px;
}

.infotex {
  width: 100%;
	line-height: 1.4em;
}

/*------------------------------------------------------------
	インフォメーションカード（対象者・補助期間など）
------------------------------------------------------------*/
.info_grid {
  grid-template-columns: 1fr;  /* 2列→1列 */
  gap: 16px;
  padding: 0 15px;
}

.info_card {
  padding: 20px 16px;
  border-radius: 12px;
}

.info_card img {
  width: 80px;
  height: auto;
  margin-bottom: 10px;
}

.info_card h3 {
  font-size: 20px;
  margin-bottom: 8px;
}


.info_card span {
  font-size: 14px;
}

/*------------------------------------------------------------
	期間テーブル共通（実施期間・予約開始など）
------------------------------------------------------------*/
.period_section {
  padding: 15px 0;
}

.period_box {
  padding: 20px 15px;
  border-radius: 12px;
  margin: 0 15px;
}

.period_header {
flex-direction: column;  /* ← 追加：横並び→縦積みに */
  margin-bottom: 16px;
}

.period_header img {
  width: 40px;
  height: auto;    /* ← これを追加 */
}

.period_header h2 {
  font-size: 20px;
}

/* 2列テーブル → 縦積み */
.period_row {
  grid-template-columns: 1fr;
  padding: 14px 8px;
  gap: 4px;
}

.period_name {
  font-size: 1em;
}

.period_date {
  font-size: 0.9em;
}

/*------------------------------------------------------------
	3列テーブル（最低宿泊料金・割引上限）→ カード型縦積み
------------------------------------------------------------*/
.period_table--3col .period_row--header {
  display: none;  /* ヘッダー行は非表示 */
}

.period_table--3col .period_row {
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 14px 8px;
}

/* 金額の前にラベルを付ける（nth-child: 1=会社名, 2=最低宿泊料金, 3=割引上限） */
.period_table--3col .period_date {
  text-align: left;
}

.period_table--3col .period_date:nth-child(2)::before {
  content: "最低宿泊料金：";
  font-weight: 700;
  color: #1e88c8;
}

.period_table--3col .period_date:nth-child(3)::before {
  content: "割引上限：";
  font-weight: 700;
  color: #1e88c8;
}

/*------------------------------------------------------------
	CTAボタン（予約するボタン）
------------------------------------------------------------*/
.cta_section {
  padding: 30px 15px;
}

.cta_grid {
  grid-template-columns: 1fr;  /* 2列→1列 */
  gap: 14px;
}

.cta_btn {
  padding: 20px 20px;
  font-size: 16px;
  border-radius: 10px;
}

.cta_arrow {
  font-size: 20px;
  padding: 4px;
}

/*------------------------------------------------------------
	フッター
------------------------------------------------------------*/

/* スマホ用改行を表示 */
.sp_br {
  display: inline;
}

.footer {
  flex-direction: column;
  gap: 24px;
  padding: 30px 20px;
  text-align: center;
}

.foot_logo {
  width: 120px;
  margin: 0 auto;
}

.foot_info {
  text-align: center;
}

.footname a {
  font-size: 1.1em;
}

.footadress {
  font-size: 14px;
  line-height: 1.8em;
}


} /* @media 閉じ */