@charset "UTF-8";
/*
 * elements.css — デザイントークン・リセット・ユーティリティ
 *
 * 役割: CSS変数（色・フォント・spacing）、基本要素リセット、
 *       テキスト/アライメント等のユーティリティクラス、アニメーション定義
 * スコープ: 全LP共通（変更頻度: 低）
 *
 * 目次:
 *  :root        CSS変数（色・フォント・spacing）
 *  button       基本リセット
 *  budoux-ja    改行制御
 *  font helpers フォントファミリー
 *  text utils   フォントサイズ
 *  alignment    テキスト配置
 *  figure       figure/figcaption
 *  animation    fade-in-up / riseUp
 */


:root {
	--color-htb-orange:#FF5611;
	--color-htbgreen:#2EB6AA;
	--color-htbsand:#f9f7eb;
	--color-htbnavy:#0b2e5e;
	--color-htbbeige: #F0ECCD;
	--color-white: #fff;
	--color-black:#000;

	--color-dialog-menu-btn: #fff;
	--color-dialog-menu-bg:#000;	
	--color-dialog-menu-link:#fff;	


	--font-family-Zen-Go:YakuHanJP,"Zen Kaku Gothic New", sans-serif;
	--font-family-Zen-Maru-Go:YakuHanJP,"Zen Maru Gothic", sans-serif;
	--font-family-Zen-Mi:YakuHanMP,"Zen Old Mincho", serif;
	--font-family-Jost:YakuHanJP,"Jost", sans-serif;	
	--font-family-Noto-Sans:YakuHanJP, "Noto Sans JP", sans-serif;
	--font-family-Noto-Serif:YakuHanMP ,"Noto Serif JP", serif;	

	--font-family-LINE-bold:YakuHanJP,"LINE Seed Bold, sans-serif";
	--font-family-LINE-regular:YakuHanJP,"LINE Seed Regular, sans-serif";
	--font-family-LINE-thin:YakuHanJP,"LINE Seed Thin, sans-serif";
	

	--font-size-2xl:clamp(3rem, 1.457rem + 2.38vw, 3.6rem);
	--font-size-headding: var(--font-size-2xl);
	--font-size-read:clamp(1.5rem, 0.257rem + 2.38vw, 2.4rem);	
	--font-size-base:clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);
 	--font-size-xl: clamp(2.4rem, 1.943rem + 0.95vw, 2.8rem);
 	--font-size-lg: clamp(2rem, 1.114rem + 1.43vw, 2.4rem);
 	--font-size-md :clamp(1.6rem, 1.143rem + 0.95vw, 2rem);
 	--font-size-sm: clamp(1.3rem, 1.186rem + 0.24vw, 1.4rem);
 	--font-size-xs: clamp(1rem, 0.771rem + 0.48vw, 1.2rem);
 	--font-size-xxs: clamp(0.8rem, 0.686rem + 0.24vw, 0.9rem);
	
	--font-lineheight-120:120%;
	--font-lineheight-140:140%;
	--font-lineheight-150:150%;
	--font-lineheight-160:160%;
	--font-lineheight-170:170%;
	--font-lineheight-200:200%;

	--font-weight-primary:400;
	--font-weight-light:300;
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-bold:700;
	--font-weight-black:900;


	--color-htb-ticket:#ff5611;
	--color-htb-enjoy:#42ab6a;
	--color-htb-event:#3399cc;
	--color-htb-gourmet:;	
	--color-htb-shopping:;
	--color-htb-hotels:#2eb6aa;


	--align-center:center;
	--align-center-sp:center;
	--align-left:left;
	--align-left-sp:left;
	--align-right:right;
	--align-right-sp:right;

	/* Spacing - Mobile First */
	--space-section: 4rem;         /* section間の縦リズム */
	--space-x: 2.4rem;             /* ページ横マージン（広） */
	--space-x-sm: 1.6rem;          /* コンテンツ内横padding（狭） */
	--space-y: 3.8rem;             /* ブロック間縦余白 */
	--space-gap: 1.6rem;           /* flex/grid gap */
	--card-gap: 3.2rem;            /* c-card-group内カード間余白 */
	--content-max-width: 1200px;   /* PC時のコンテンツ最大幅 */
}

@media screen and (min-width: 1024px) {
	:root {
		--space-section: 8rem;
		--space-x: 0;
		--space-x-sm: 3.2rem;
		--space-y: 7.6rem;
	}
}



button{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
	color: inherit;
	font: inherit;
	background: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	text-align: inherit;
	text-transform: inherit;
	cursor: pointer;
	border: 0;
	position: relative;
}

budoux-ja {
  /* 句読点や記号以外では改行しないようにする */
  word-break: keep-all;
  /* 画面幅を超える長い単語（URLなど）は、どこでも改行できるようにする */
  overflow-wrap: anywhere;
}


/* =============================================
   font helpers
============================================= */

.font-sans-serif{
	font-family:var(--font-family-Zen-Go);
}
.font-serif{
	font-family:var(--font-family-Zen-Mi);
	font-weight: 300!important;
}
.font-marugo{
	font-family:var(--font-family-Zen-Maru-Go);
}


/* =============================================
   text utilities
============================================= */

.text-heading{
  font-size: var(--font-size-headding);
  text-align: center;
  font-weight: 300;
}
.text-read{
  font-size: var(--font-size-read);
  font-weight: 500;
}

.text-base{
  font-size: var(--font-size-base);
  font-weight: 500;
}
.text-2xl{
  font-size: var(--font-size-2xl);
  font-weight: 500;
}
.text-xl{
  font-size: var(--font-size-xl);
  font-weight: 500;
}
.text-lg{
  font-size: var(--font-size-lg);
  font-weight: 500;
}
.text-md{
  font-size: var(--font-size-md);
}
.text-sm{
  font-size: var(--font-size-sm);
}
.text-xs{
  font-size: var(--font-size-xs);
}
.text-xxs{
  font-size: var(--font-size-xxs);
}
[class^="text-"] small {
  font-size:70%;
}


/* =============================================
   alignment
============================================= */

.align-c{
text-align: var(--align-center) !important;
}
.align-c-sp{
text-align: var(--align-center-sp) !important;
}
.align-l{
text-align: var(--align-left) !important;
}
.align-l-sp{
text-align: var(--align-left-sp) !important;
}
.align-r{
text-align: var(--align-right) !important;
}
.align-r-sp{
text-align: var(--align-right-sp) !important;
}


/* =============================================
   figure
============================================= */

figure{
	position: relative;
	display: flex;
	height: 100%;
}
figure figcaption{
	position: absolute;
	bottom: 5px;
	right: 5px;
	color: #fff;
	font-family: var(--font-family-Zen-Go);
	font-weight: 600;
	font-size: 10px;
	line-height: 1;
}
figure figcaption[data-color="white"]{
  color: #fff;
}
figure figcaption[data-position="left"]{
	left: 5px;
}
figure figcaption[data-color="black"]{
  color: #000;
}
figure figcaption img{
  aspect-ratio: auto !important;
  width: 80px;
}


/* =============================================
   animation
============================================= */

.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up.active {
	opacity: 1;
	transform: translateY(0);
}

@keyframes riseUp {
	from {
	  opacity: 0;
	  transform: translateY(30px);
	}
	to {
	  opacity: 1;
	  transform: translateY(0);
	}
}