@charset "UTF-8";
@import url("layout.css");
@import url("component.css");

:root {
	--current-header-h: 0px; /* JSで上書きされるまでのフォールバック */
	--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-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-base: clamp(1.4rem, 1.171rem + 0.48vw, 1.6rem);
	--font-size-sm: clamp(1.3rem, 1.186rem + 0.24vw, 1.4rem);
	--font-size-xs: ;
	--font-size-xxs: ;

	--color-orange: #FF5611;
	--color-green: #2EB6AA;
	--color-sand: #FFFCEB;
	--color-beige: #F0ECCD;
	--color-navy: #0B2E5E;
	--color-miffy: #FFC80B;
	--color-white: #fff;
	--color-black: #000;
	--color-dialog-menu-btn: #fff;
	--color-dialog-menu-bg: #fff;
	--color-dialog-menu-link: #fff;

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

	/*--align--*/
	--align-center: center;
	--align-center-sp: center;
	--align-left: left;
	--align-left-sp: left;

	--layout-space-section: 6rem;
	/*section縦の余白*/
	--layout-space-base-horizontal: 2.4rem;
	/*横の余白*/
	--layout-space-base-vrtical: 4.8rem;
	/*縦の余白*/
	--layout-space: 1.2rem;
}

@media screen and (min-width: 1025px) {
	:root {
		--layout-space: 2.4rem;
		--layout-space-base-horizontal: 4.8rem;
	}
}


/******************
l-  Layout
c-  Component
p-  Project
u-  Utility
******************/

.l-wrapper {
  position: relative;
  --section-color-primary:#000;
  --section-color-secondary:#D9D9D9;
  --section-color-accent:#c0c0c0;
  color:var(--section-color-primary);
  background:var(--section-color-secondary);
}

.l-section {
  position: relative;
	font-family: var(--font-family-Zen-Go);
	--section-padding:clamp(1rem, -0.143rem + 2.38vw, 2rem);
	--section-font-size-hedding:clamp(2.4rem, 0.343rem + 4.29vw, 4.2rem);
	--section-font-size-title:clamp(2.4rem, 1.029rem + 2.86vw, 3.6rem);
	--section-font-size-name:clamp(2rem, 1.086rem + 1.9vw, 2.8rem);
	--section-font-size-p:clamp(1.3rem, 0.957rem + 0.71vw, 1.6rem);
	--section-font-size-notice:clamp(1rem, 0.771rem + 0.48vw, 1.2rem);
	--section-font-size-btn:clamp(1.4rem, 0.943rem + 0.95vw, 1.8rem);
  
}

.c-section-body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 0 0 calc(var(--section-padding) * 6);
	gap: calc(var(--section-padding) * 4);
}
.c-section-inner {
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding:0 calc(var(--section-padding) * 2);
}

.c-header{
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(var(--section-padding) * 1.5);
}
.l-section h2{
	font-family: var(--font-family-Zen-Mi);
	font-size:var(--section-font-size-title);
	position: relative;
	font-weight:500;
	text-align: center;
}
.l-section h2 em{
	font-size:140%;
}
.l-section h2 small{
	font-size:70%;
}
.l-section h3{
	font-family: var(--font-family-Zen-Mi);
	position: relative;
  text-wrap: pretty;
  word-break: auto-phrase;
  @supports not (word-break: auto-phrase) {
    word-break: keep-all;
    overflow-wrap: anywhere; 
  }
}
.l-section p{
	font-size:var(--section-font-size-p);
	font-weight: 500;
}
.l-section figcaption{
	font-size:var(--section-font-size-notice);
	font-weight: 500;
	text-align: right;
}

.l-section .notice{
	font-size:var(--section-font-size-notice);
	font-weight: 500;
}

.l-section .c-btn {
	background-color: var(--section-color-primary);
	border-color: var(--section-color-primary);
	color: #fff;
	padding: 1.6rem 2rem 1.6rem 2.4rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	max-width: 70%;
	min-width: 280px;
	margin: 0 auto;
	font-size: var(--section-font-size-btn);
}

.l-section .c-btn.c-btn-text {
	background: none;
	border: none;
	color: var(--color-black);
	padding: 0.5rem 0rem;
	box-shadow: unset;
	max-width: unset;
	margin: 0 auto;
	border-bottom: 1px solid;
	border-radius: 0;
	font-size: calc(var(--section-font-size-btn) * 0.9);
	max-width: none;
	min-width: auto;
}

.l-section .c-btn span {
	justify-content: center;
	gap: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
}


.pretty-text {
  text-wrap: pretty;
  word-break: auto-phrase;
  @supports not (word-break: auto-phrase) {
    word-break: keep-all;
    overflow-wrap: anywhere; 
  }
}

.p-card-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(var(--section-padding) * 4);
  column-gap: calc(var(--section-padding) * 2);
  align-items: flex-start;
}
.p-card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--section-padding) * 1.6);
}
.p-card figure{
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
}
.p-card figure picture{
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	width: 100%;
}
.p-card figure picture img{
  height: 100%;
}

.p-card-header{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--section-padding) * 1);
}
.p-card-header h3{
	font-size: var(--section-font-size-name);
	font-weight:700;
	line-height: 1.4;
	text-align: center;
	color:var(--privilege-color);
	text-wrap: pretty;
	word-break: auto-phrase;
}

.p-card-header sup,
.p-card-header small{
	font-size:60%;
}
.p-card-header p {
	font-size: var(--section-font-size-p);
	line-height: 1.6;
	font-weight: 500;
}


@media screen and (min-width: 1025px) {
	.l-section {
		max-width: 1280px;
		margin: 0 auto;
	}
}



/*---------------
#hero{}
---------------*/

#hero {
	position: relative;
}

/* ヒーロー上にグラデーションオーバーレイ */
#hero::before {
	content: "";
}
#hero .c-section-body {
	justify-content: center;
	flex-direction: column;
	padding:0;
}

/* テキストコンテンツ：下部中央 */
.h-hero__content {
	padding: calc(var(--section-padding) * 3) calc(var(--section-padding) * 2) calc(var(--section-padding) * 3);
	text-align: center;
	color: var(--color-black);
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap:calc(var(--section-padding) * 1.5);
}
.h-hero__content > div{
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--section-padding) * 1.5);
  justify-content: center;
  align-items: center;
}

.h-hero__content h1 {
	font-family: var(--font-family-Zen-Mi);
	font-size: calc(var(--section-font-size-hedding) * 1.2);
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	margin: 0 0 12px;
	text-wrap: pretty;
	word-break: auto-phrase;
	color: var(--privilege-color);
}
.h-hero__content .date {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--section-padding) * 1);
}
.h-hero__content .date p {
  font-size: var(--section-font-size-p);
  display: table;
  margin: 0 auto;
  background: #000;
  border-radius: 9999px;
  color: #fff;
  padding: 1rem 1.5rem;
  line-height: 1;
}

.h-hero__content .date dl {
  font-family: var(--font-family-Zen-Mi);
  font-size: calc(var(--section-font-size-p) * 1.3);
  gap: calc(var(--section-padding) * 1);
  align-items: center;
  line-height: 1;
  display: grid;
  grid-template-columns: 70px max-content; 
  width: fit-content; /* 全体の幅を中身に合わせる */
  align-self: flex-start;
}

.h-hero__content .date dl dt {
  background: var(--section-color-primary);
  font-size: calc(var(--section-font-size-p) * 0.9);
  color: #fff;
  line-height: 1;
  padding: 0.5rem;
}

.h-hero__content .date dl dd {
  margin: 0;
  text-align: left;
}
.h-hero__content .date dl dd em{
font-size:150%;
}



@media screen and (min-width: 1025px) {
	.h-hero__content {
		display: grid;
		grid-template-columns: 1.8fr 1fr;
		gap: calc(var(--section-padding) * 4);
		padding: calc(var(--section-padding) * 3) calc(var(--section-padding) * 0) calc(var(--section-padding) * 3);
	}
}


/*---------------
#term{}
---------------*/

#term {
	position: relative;
}
#term .c-header{
  padding: calc(var(--section-padding) * 2);
  background: #fff;
}
#term .c-header:before {
	content:"";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-image: linear-gradient(45deg, var(--section-color-secondary) 10px, transparent 0),
	linear-gradient(-45deg, var(--section-color-secondary) 10px, transparent 0),
	linear-gradient(135deg, var(--section-color-secondary) 10px, transparent 0),
	linear-gradient(-135deg, var(--section-color-secondary) 10px, transparent 0);
}

#term .c-header p{
  font-size: calc(var(--section-font-size-p) * 1.1);
}

/*---------------
#highlights{}
---------------*/

#highlights {
	position: relative;
}
#highlights .c-header{
  flex-direction: column;
  gap: calc(var(--section-padding) * 1);
}

#highlights h2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--section-padding) * 0);
}
#highlights h2 em {
	position: relative;
	font-weight: 600;
	display: block;
	line-height: 1;
}
#highlights h2:before {
  content: "";
  width: 100%;
  height: 20%;
  background: var(--section-color-accent);
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  opacity:1;
}

#highlights .p-card figure {
  gap: calc(var(--section-padding) * 0.2);
}
#highlights .p-card figure picture {
  aspect-ratio:auto;
}

#highlights .p-card figure figcaption {
	font-size: calc(var(--section-font-size-p) * 1.1);
	font-weight: 600;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 49%, rgba(255, 255, 255, 1) 86%, rgba(253, 205, 0, 0) 130%);
}

@media screen and (min-width: 1025px) {
	#highlights .p-card-wrapper {
		flex-wrap: wrap;
		align-items: flex-end;
		gap: calc(var(--section-padding) * 3);
	}

	#highlights .p-card{
	  width: calc(100% / 2 - calc(var(--section-padding) * 1.5));
	}
	#highlights .p-card:nth-child(3){
	  width: calc(100% / 1.6 - calc(var(--section-padding) * 1.5));
	}
	#highlights .p-card:nth-child(4){
	  width: calc(100% / 2.7 - calc(var(--section-padding) * 1.5));
	}
}




/*---------------
#profile{}
---------------*/

#profile {
	position: relative;
}
#profile .c-header{
	flex-direction: column;
	gap: calc(var(--section-padding) * 1);
	background: var(--section-color-accent);
	padding: calc(var(--section-padding) * 2) calc(var(--section-padding) * 2) calc(var(--section-padding) * 2);
}

#profile .c-header h3 {
  font-family: var(--font-family-Zen-Mi);
  font-size: var(--section-font-size-title);
  position: relative;
  font-weight: 500;
  text-align: left;
}

@media screen and (min-width: 1025px) {
	#profile .c-header {
		display: grid;
		grid-template-columns: 1fr 1.5fr;
		gap: calc(var(--section-padding) * 2);
		padding: calc(var(--section-padding) * 3) calc(var(--section-padding) * 3) calc(var(--section-padding) * 3);
	}
}

/*---------------
#outline{}
---------------*/

#outline {
  position: relative;
  background: var(--section-color-primary);
  color: #fff;
  max-width: none;
}

#outline .c-section-body {
  max-width: 960px;
  padding: calc(var(--section-padding) * 3) 0 calc(var(--section-padding) * 3);
  gap: calc(var(--section-padding) * 4);
    margin: 0 auto;
}

#outline .c-section-inner {
}
#outline .c-header{
}
#outline h2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--section-padding) * 0);
}
#outline h2 em {
  position: relative;
  font-weight: 600;
  display: block;
  line-height: 1;
  font-size:120%;
  padding: calc(var(--section-padding) * 0) calc(var(--section-padding) * 3) 0;
}
#outline h2:before {
  content: "";
  width: 100%;
  height: 20%;
  background: var(--section-color-accent);
  position: absolute;
  bottom: -0.5rem;
  left: 0;
  opacity: 1;
}

#outline table {
  color: #fff;
}
#outline table th {
  padding: 1rem;
  border-bottom: 2px var(--section-color-secondary) solid;
  white-space: nowrap;
  text-align: center;
  width: auto;
}
#outline table td {
  padding: 1rem;
  border-bottom: 1px var(--section-color-secondary) solid;
  text-align: left;
  background: transparent;
  line-height: 1.6;
  vertical-align: top;
}

@media screen and (min-width: 1025px) {

}