/* ----------------------------------------------------------------------------
  Color
---------------------------------------------------------------------------- */
:root{
  --black-color: #333;
  --darkgray-color: #666;
  --gray-color: #8f8f8f;
  --lightgray-color: #adadad;
  --palegray-color: #efefef;
  --disable-color: #ddd;
  --palewhite-color: #f4f4f4;
  --white-color: #fff;
  --layer-color: rgba(0, 0, 0, 0.04);
  --layer-bg-color: rgba(0, 0, 0, 0.4);
  --primary-color: #e26762;
  --primaryhighlight-color: #ff6c58;
  --primaryactive-color: #c65651;
  --secondary-color: #a6764f;
  --secondaryhighlight-color: #c57e3f;
  --secondaryactive-color: #8e684A;
  --calendarsut-color: #4f82b1;
  --calendarsun-color: #c65651;
  --error-color: #c65651;
  --error-bg-color: rgba(198, 86, 81, 0.16);
  --primary-bg-color: rgba(198, 86, 81, 0.16);
  --secondary-bg-color: rgba(166, 118, 79, 0.10);
}

/* ----------------------------------------------------------------------------
  Typography
---------------------------------------------------------------------------- */
:root{
  /* font-family */
  ---font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP';
  /* title */
  --title--XXL: 3.2rem;
  --title--XL: 2.8rem;
  --title--L: 2.4rem;
  --title--M: 2rem;
  --title--S: 1.6rem;
  --title--XS: 1.4rem;
  --title--XXS: 1.2rem;
  --title--XXXS: 1.0rem;
  /* text */
  --text--L: 2rem;
  --text--M: 1.6rem;
  --text--S: 1.4rem;
  --text--XS: 1.2rem;
  --text--XXS: 1.0rem;
  --note-M: 1.6rem;
  --note-S: 1.4rem;
  --note-XS: 1.2rem;
  /* line-height */
  --linespacing: 125%;
  --note-linespacing: 150%;
}
[class*="title--"],
h1[class*="title--"],
h2[class*="title--"],
h3[class*="title--"],
h4[class*="title--"],
h5[class*="title--"],
h6[class*="title--"]{
  color: var(--black-color);
  font-weight: bold;
  line-height: var(--linespacing);
  margin: 0;
  padding: 0;
  border: none;
}
.title--XXL{
  font-size: var(--title--XXL);
}
.title--XL{
  font-size: var(--title--XL);
}
.title--L{
  font-size: var(--title--L);
}
.title--M,
h1.title--M,
h2.title--M,
h3.title--M{
  font-size: var(--title--M);
}
.title--S,
h2.title--S,
h3.title--S{
  font-size: var(--title--S);
}
.title--XS,
h1.title--XS,
h2.title--XS,
h3.title--XS{
  font-size: var(--title--XS);
}
.title--XXS{
  font-size: var(--title--XXS);
}
.title--XXXS{
  font-size: var(--title--XXXS);
}
[class*="text--"],
h1[class*="text--"],
h2[class*="text--"],
h3[class*="text--"],
h4[class*="text--"],
h5[class*="text--"],
h6[class*="text--"]{
  color: var(--darkgray-color);
  font-weight: normal;
  line-height: var(--linespacing);
  margin: 0;
  padding: 0;
  border: none;
}
.text--L{
  font-size: var(--text--L);
}
.text--M{
  font-size: var(--text--M);
}
.text--S{
  font-size: var(--text--S);
}
.text--XS,
h2.text--XS{
  font-size: var(--text--XS);
}
.text--XXS{
  font-size: var(--text--XXS);
}
/* note */
[class*="note--"]{
  color: var(--darkgray-color);
  line-height: var(--note-linespacing);
}
.note--M{
  font-size: var(--note-M);
}
.note--S{
  font-size: var(--note-S);
}
.note--XS{
  font-size: var(--note-XS);
}
/* boxテキスト */
[class*="textbox--"],
[class*="titlebox--"]{
  border-radius: var(--borderradius-button);
  padding: var(--padding-box--S);
  line-height: 132%;
}
[class*="textbox--"]{
  font-size: var(--text--S);
}
[class*="titlebox--"]{
  font-size: var(--title--XS);
  font-weight: bold;
}
[class*="textbox--"][class*="--gray"],
[class*="titlebox--"][class*="--gray"]{
  background-color: var(--layer-color);
}
[class*="textbox--"][class*="--white"],
[class*="titlebox--"][class*="--white"]{
  background-color: var(--white-color);
}
[class*="textbox--"][class*="text-overflow"]{
  padding: var(--padding-side--S);
  height: 44px;
  line-height: 44px;
}
/* エラーテキスト */
.text--error{
  color: var(--error-color);
  font-size: var(--text--XXS);
}
/* テキスト省略 */
[class*="text-overflow"]{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: break-spaces;
}
.text-overflow--1{
  -webkit-line-clamp: 1;
}
.text-overflow--2{
  -webkit-line-clamp: 2;
}
.text-overflow--3{
  -webkit-line-clamp: 3;
}
.text-overflow--4{
  -webkit-line-clamp: 4;
}

/* ----------------------------------------------------------------------------
  Icon
---------------------------------------------------------------------------- */
:root{
  /* icon */
  --icon-size: var(--text--L);
  /* badge */
  --badge-color: var(--primary-color);
}
[class*="icon-"]{
  font-size: var(--icon-size);
}
/* lineアイコンカラー指定 */
.icon-line{
  color: #06C755 !important;
}

/* ----------------------------------------------------------------------------
  Layout Column
---------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------
  Spacing
---------------------------------------------------------------------------- */
:root{
  /* margin */
  --margin-raw--M: 0 20px 0 0;
  --margin-raw--S: 0 10px 0 0;
  --margin-raw--XS: 0 4px 0 0;
  --margin-column--M: 20px 0 0 0;
  --margin-column--S: 12px 0 0 0;
  --margin-column--XS: 10px 0 0 0;
  --margin-column--XXS: 4px 0 0 0;
  --margin-box--S: 13px 12px;
  /* padding */
  --padding-side--M: 0 20px;
  --padding-side--S: 0 16px;
  --padding-side--XS: 0 12px;
  --padding-side--XXS: 0 10px;
  --padding-vertical--XXS: 10px 0;
  --padding-box--M: 20px;
  --padding-box--S: 13px 12px;
}

/* ----------------------------------------------------------------------------
  Image
---------------------------------------------------------------------------- */
img{
  vertical-align: bottom;
  width: 100%;
}
:root{
  /* aspect */
  --img-person: 1/1;
  --img-square: 1/1;
  --img-rectangle: 4/3;
  --img-rectangle-vertical: 3/4;
}
/* コンテンツ画像 */
[class*="img-square--"]{
  aspect-ratio: var(--img-square);
  background-color: var(--black-color);
  border-radius: var(--borderradius-button);
  object-fit: cover;
}
.img-square--XS{
  width: 64px;
}
.img-square--S{
  width: 80px;
}
.img-square--M{
  width: 150px;
}
[class*="img--rectangle"]{
  aspect-ratio: var(--img-rectangle);
  background-color: var(--black-color);
  object-fit: cover;
  width: 100%;
}
/* プロフィール画像 */
[class*="profile-img"]{
  border-radius: 50%;
  aspect-ratio: var(--img-person);
  height: auto;
  object-fit: cover;
}
.profile-img--S{
  width: 40px;
}
.profile-img--XS{
  width: 28px;
}

/* ----------------------------------------------------------------------------
  Corner Radius
---------------------------------------------------------------------------- */
:root{
  /* border-radius */
  --borderradius-button: 8px;
  --borderradius-form: 8px;
  --borderradius-card: 12px;
}

/* ----------------------------------------------------------------------------
  Shadow
---------------------------------------------------------------------------- */
:root{
  /* box-shadow */
  --shadow--S: 0 2px 10px rgb(0 0 0 / 8%);
  --shadow--M: 0 2px 40px rgb(0 0 0 / 10%);
  --shadow--L: 0 2px 60px rgb(0 0 0 / 12%);
}

/* ----------------------------------------------------------------------------
  Scroll
---------------------------------------------------------------------------- */
[class*="scrollx"]{
  white-space: nowrap;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

[class*="scrollx"]::-webkit-scrollbar{
  display: none;
}

/* ----------------------------------------------------------------------------
  Other
---------------------------------------------------------------------------- */
html, body{
  font-size: 62.5%;
  font-family: var(---font-family);
  background-color: var(--white-color);
  letter-spacing: 0;
  word-break: break-all;
}
a,
li,
td,
select,
input[type="text"],
input[type="checkbox"],
label,
input[type="submit"]{
  -webkit-transition: all 0.15s;
  -moz-transition: all 0.15s;
  -ms-transition: all 0.15s;
  transition: all 0.15s;
  font-family: var(---font-family);
}
a{
  color: var(--secondary-color);
}
a:hover{
  cursor: pointer;
  opacity: 1;
}

/* for pre-production server */
#pre-production-bar{
  background-color: rgba(0, 0, 0, 0.5);/* 黒の半透明背景 */
  color: white;/* 文字色は白 */
  font-size: 16px;
  padding: 10px 0;/* 上下に少しパディングを追加 */
  pointer-events: none;
  position: fixed;
  text-align: center;/* テキストを中央揃えに */
  top: 0;
  width: 100%;
  z-index: 1000;/* 他の要素の上に表示されるように */
}