@charset "utf-8";
/* インポート */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

/* =====================
  変数：文字と色の設定 
===================== */
:root {
  --sans-serif-font-set:
    "シネマレター", "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic W3",
    sans-serif;
  --title-font: "Montserrat";

  --font-size-xl: 1.5rem; /*   24px  ：h1 */
  --font-size-lg: 1.25rem; /*  20px */
  --font-size-md: 1rem; /*     16px ：h2、h3、h4 */
  --font-size-sm: 0.875rem; /* 14px ：本文*/
  --font-size-xs: 0.75rem; /*  12px ：補足*/
  --font-size-2x: 2.4rem; /* ★アイコン */

  --main-color: #9fa19f; /* ５区の色　rgb(159, 161, 159)*/
  --main-color-pale: #cdcfcf; /* 薄い５区　*/
  --primary: #353839; /* 本文テキストの色：オニキスブラック */
  --secondary: #cea54f;
  --tertiary: #a59393;
  --quaternary: #b76e79; /* ローズゴールド */
  --rgba-shadow: rgba(0, 0, 0, 0.12);
  --rgba-white: rgba(255, 255, 255, 0.2);
  --rgba-white8: rgba(255, 255, 255, 0.8);

  --shadow-panel: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
  --shadow-base: 0 0 3px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 4px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  --transition-speed: 0.3s;
}

html {
  scroll-padding-top: 64px;
}
body {
  font-family: var(--sans-serif-font-set);
  font-size: var(--font-size-sm);
}

a,
.btn-link {
  text-decoration: none;
  color: var(--main-color);
}

/* ***** 見出し ***** */
h1 {
  position: relative;
  padding: 0 0.5em 0.5em 2.5rem;
  font-size: var(--font-size-xl);
  line-height: 2;
}
h1::before,
h1::after {
  position: absolute;
  content: "";
  border-radius: 100%;
}
h1::before {
  top: 0.2em;
  left: 0.2em;
  width: 18px;
  height: 18px;
  background-color: var(--secondary);
  z-index: 2;
}
h1::after {
  top: 0.7em;
  left: 0.7em;
  width: 13px;
  height: 13px;
  background-color: rgb(from var(--tertiary) r g b / 0.5);
}

h1 span {
  /*カテゴリ*/
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.25;
  margin-top: -0.8rem;
  margin-bottom: -0.8rem;
}

/* 行間の指定：折り返した時間延びさせない */
.heading {
  line-height: 1; /* 全体の余白を締める */
}
.category,
.en {
  display: block;

  line-height: 1.5;
}
.heading .h1-title {
  font-size: var(--font-size-xl);
  display: block;
  line-height: 1.3; /* 折り返し前提 */
}
.category {
  margin-bottom: 1em;
}
.en {
  margin-top: 0.75em;
}
/* ここまで */

.sponcer p {
  padding-left: 2.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
.sponsored::before {
  content: "主催：";
}
.co-hosted::before {
  content: "共催：";
}
.special-cooperated::before {
  content: "特別協力：";
}
.cooperated::before {
  content: "協力：";
}
.produced::before {
  content: "制作：";
}

h2 {
  font-size: var(--font-size-md);
  line-height: 1.25;
  margin-top: 1.3125rem;
  margin-bottom: 1rem;
  padding: 0 0.5em 0 2rem;
  color: var(--secondary);
}

/* 絵本コンサートサブタイトル */
h2 span {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.25;
}

/* タイムライン：各回 */
h3 {
  font-size: var(--font-size-md);
  font-weight: bold;
  line-height: 1.25;
  margin-top: 1.3125rem;
  margin-bottom: 1rem;
  padding: 0 0.5em 0 2rem;
  color: var(--tertiary);
}
/* グリーンマーケットの各回と日程、絵本パネル展と日程 */
h3 span {
  display: block;
  font-size: var(--font-size-sm);
  line-height: 1.25;
}

/* イタリア絵本ラインナップ */
h4 {
  font-size: var(--font-size-md);
  line-height: 1.25;
  margin-top: 1.3125rem;
  margin-bottom: 1rem;
  padding: 0 0.5em 0 2rem;
  color: var(--quaternary);
}

p,
ol li,
ul li {
  font-size: var(--font-size-sm);
}

.btn-link {
  font-family: var(--sans-serif-font-set);
  margin-top: 0.25rem;
  margin-bottom: 0;
}

figcaption,
.note {
  font-size: var(--font-size-xs);
}

/* =========================
   header
========================= */
.title {
  color: var(--main-color);
  font-size: clamp(1rem, 0.782rem + 1.09vw, 1.6rem);
  font-weight: 500;
}
.top-title {
  font-size: clamp(1rem, 0.455rem + 2.73vw, 2.5rem);
}
.title span,
.top-title span {
  font-family: var(--title-font);
}

header h5 {
  color: var(--main-color);
  font-family: var(--title-font);
  font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}
.text-outline {
  letter-spacing: 1px;
  text-shadow:
    2px 2px 1px var(--rgba-white),
    -2px 2px 1px var(--rgba-white),
    2px -2px 1px var(--rgba-white),
    -2px -2px 1px var(--rgba-white),
    2px 0px 1px var(--rgba-white),
    0px 2px 1px var(--rgba-white),
    -2px 0px 1px var(--rgba-white),
    0px -2px 1px var(--rgba-white);
}
.top-text-outline {
  color: white;
  letter-spacing: 2px;
  text-shadow:
    2px 2px 1px var(--main-color-pale),
    -2px 2px 1px var(--main-color-pale),
    2px -2px 1px var(--main-color-pale),
    -2px -2px 1px var(--main-color-pale),
    2px 0px 1px var(--main-color-pale),
    0px 2px 1px var(--main-color-pale),
    -2px 0px 1px var(--main-color-pale),
    0px -2px 1px var(--main-color-pale);
}
/* for SP */
@media screen and (max-width: 620px) {
  .title {
    display: flex;
    flex-direction: column;
    align-items: start;
  }
}

/* =========================
   footer
========================= */
.footer-title span {
  display: block;
  font-family: var(--title-font);
  line-height: 2;
  text-align: start;
}

/* =========================
   背景色
========================= */
body {
  color: var(--primary);
  background-image: radial-gradient(
    circle,
    #f8f9ff,
    #f9f9ff,
    #fbf9ff,
    #fcfaff,
    #fdfaff,
    #fefafe,
    #fffafd,
    #fffafc,
    #fff9fa,
    #fff8f6,
    #fff8f3,
    #fef9f0
  );
}

aside {
  background-image: linear-gradient(
    to right top,
    #eadfdf,
    #ede3e3,
    #f0e7e6,
    #f2ebea,
    #f5efee,
    #f7f2f1,
    #f9f4f5,
    #fbf7f8,
    #fcf9fa,
    #fcfbfc,
    #fefdfe,
    #ffffff
  );
}

/* section */
section {
  padding: 3rem 1rem;
  background-image: var(--bg);
  border-radius: 8px;
}

main > section:first-of-type {
  margin-top: 1rem;
}

main > section:nth-of-type(odd):not(:first-of-type) {
  --bg: linear-gradient(
    to right top,
    #ffedf7,
    #feecf7,
    #fdebf7,
    #fceaf8,
    #fbe9f8,
    #fde9f6,
    #fee9f4,
    #ffe9f2,
    #ffebed,
    #ffedea,
    #fff0e8,
    #fdf3e9
  );
}

main > section:nth-of-type(even) {
  --bg: linear-gradient(
    to left bottom,
    #f3e7e9,
    #f4e7ed,
    #f3e8f1,
    #f0e9f6,
    #ebebfb,
    #e8eafc,
    #e4e9fc,
    #e0e8fd,
    #dee4fb,
    #dddff9,
    #dddbf6,
    #ddd6f3
  );
}
/* コンサート用背景 */
main > section.bg-concert-01 {
  --bg: linear-gradient(-225deg, #e3fdf5 0%, #ffe6fa 100%);
}
main > section.bg-concert-02 {
  background-image: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
}
main > section.bg-concert-03 {
  /* --bg: linear-gradient(135deg, #eaf04c 0%, #f3730a 100%); */
  --bg:
    radial-gradient(
      circle at 56% 8%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 36%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 25% 36%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 81%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 77% 26%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 32% 90%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 92% 1%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 82% 1%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 81% 59%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 46%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 94% 78%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 1% 76%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 27% 72%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 78% 29%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 91% 35%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 34%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 6% 20%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    linear-gradient(135deg, rgb(169, 192, 244), rgb(227, 253, 245));
}
main > section.bg-concert-04 {
  background-image:
    radial-gradient(
      circle at 56% 8%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 88% 36%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 25% 36%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 75% 81%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 77% 26%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 3%,
      transparent 3%,
      transparent 100%
    ),
    radial-gradient(
      circle at 32% 90%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 92% 1%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 82% 1%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 81% 59%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 13% 46%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 94% 78%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 1% 76%,
      rgba(98, 96, 96, 0.03) 0%,
      rgba(98, 96, 96, 0.03) 7%,
      transparent 7%,
      transparent 100%
    ),
    radial-gradient(
      circle at 27% 72%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 78% 29%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 91% 35%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 100% 34%,
      rgba(28, 27, 27, 0.02) 0%,
      rgba(28, 27, 27, 0.02) 5%,
      transparent 5%,
      transparent 100%
    ),
    radial-gradient(
      circle at 6% 20%,
      rgba(112, 103, 103, 0.01) 0%,
      rgba(112, 103, 103, 0.01) 5%,
      transparent 5%,
      transparent 100%
    ),
    linear-gradient(
      to right bottom,
      #fdfcfb,
      #fdf8f3,
      #fcf4ea,
      #fbf0e2,
      #faecd9,
      #f7e8d4,
      #f5e5d0,
      #f2e1cb,
      #eeddc9,
      #ead9c7,
      #e6d5c5,
      #e2d1c3
    );
}

section:last-child {
  margin-bottom: 3rem;
}

/* 画像エリアの背景 */
.bg-img-w {
  background-color: var(--rgba-white);
  padding: 14px;
  border-radius: 6px;
  box-shadow: var(--shadow-panel);
}

.boder-dashed {
  border-bottom: 1px dashed var(--primary);
}

/* =====================
  上に戻るボタン
===================== */
.cp_arrows span {
  display: inline-block;
  background-color: var(--rgba-white);
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.08);
  border-radius: 100%;
  margin-bottom: 10px;
  width: 32px;
  height: 32px;
  transition: 0.3s;
}

/*矢印の縦線*/
.cp_arrows .cp_arrow_up {
  position: relative;
  vertical-align: middle;
  top: 2px;
  left: -6px;
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--main-color-pale);
  border-radius: 4px;
  margin: 0 20px;
}
/*矢印の＜の部分*/
.cp_arrows .cp_arrow_up:before,
.cp_arrows .cp_arrow_up:after {
  position: absolute;
  content: "";
  top: -1.5px;
  width: 4px;
  height: 13px;
  background: var(--main-color-pale);
  border-radius: 4px;
}
.cp_arrows .cp_arrow_up:before {
  left: 3px;
  transform: rotate(-45deg);
}
.cp_arrows .cp_arrow_up:after {
  right: 3px;
  transform: rotate(45deg);
}
.cp_arrows .cp_arrow_up {
  transform: rotate(0deg);
}

/* マウスホバー */
.cp_arrows span:hover,
.cp_arrows span:focus {
  background-color: rgba(159, 161, 159, 0.2);
  box-shadow:
    0 0 3px rgba(0, 0, 0, 0.24),
    0 2px 2px rgba(0, 0, 0, 0.08);
}

/* =====================
  テキスト関連
===================== */
/* インデント */
.indent {
  text-indent: 1rem;
}
.indent2 {
  text-indent: 2rem;
}

.outdent {
  text-indent: -1rem;
}

/* ぶら下げ */
.indent-hanging {
  text-indent: -1rem;
  padding-left: 1rem;
}
.indent-hanging2 {
  text-indent: -2rem;
  padding-left: 2rem;
}
.indent-hanging3 {
  text-indent: -3rem;
  margin-left: 3rem;
}
.indent-hanging4 {
  text-indent: -4rem;
  padding-left: 4rem;
}

/* 両端揃え(均等割り付け) */
.justify {
  text-align: justify;
  word-break: break-all;
  /* text-justify: inter-ideograph; */
  /* text-justify: inter-character; */
  text-wrap: pretty;
  line-break: strict;
  overflow-wrap: anywhere;
  letter-spacing: 0.03em;
}

/* フォントサイズ指定 */
.font-size-lg {
  font-size: var(--font-size-lg);
}

.font-size-md {
  font-size: var(--font-size-md);
}

.font-size-sm {
  font-size: var(--font-size-sm);
}
.font-size-xs {
  font-size: var(--font-size-xs);
}

/* フォントの色 */
.primary {
  color: var(--primary);
}
.main-color {
  color: var(--main-color);
}

/* =====================
  改行のタイミング
  - 1行のときは中央揃え、画面が狭くなって2行以上に改行されたら左揃えにする
  - 折り返しの位置を設定する
  ===================== */

.text-wrapper {
  text-align: center; /* ① 全体を中央に寄せる */
}

.text-content {
  display: inline-block; /* ② 中身の幅に合わせたブロックにする */
  text-align: left; /* ③ 改行したときは左揃えにする */
}

.no-wrap {
  display: inline-block;
}

/* =====================
  幅の指定
===================== */
.mw-240 {
  max-width: 240px;
}
.mw-320 {
  max-width: 320px;
}
.mw-336 {
  max-width: 336px;
}
.mw-400 {
  max-width: 480px;
}
.mw-480 {
  max-width: 480px;
}

.mw-640 {
  max-width: 640px;
}

/* =========================
   余白
========================= */
.mt-8 {
  margin-top: 4rem;
}
.pt-8 {
  padding-top: 4rem;
}
.p-2px {
  padding: 2px;
}

@media screen and (min-width: 992px) {
  .mt-8 {
    margin-top: 8rem;
  }
  .pt-8 {
    padding-top: 8rem;
  }
}

/* =========================
   location
========================= */
.side-note-marker::before {
  font-family: "Bootstrap-icons";
  content: "\F586"; /* アイコンの文字コード  ★fill：\F588 */
  color: var(--secondary);
}

.star01,
.star02 {
  display: inline;
  color: var(--tertiary);
  position: relative;
  padding-right: 0.75rem;
}
.star01::before,
.star02::before {
  font-family: "Bootstrap-icons";
  font-weight: 400;
  content: "\F588"; /* アイコンの文字コード  ☆\F588*/
  color: var(--secondary);
  font-size: var(--font-size-2x);
  z-index: 99;
}
.star01::before {
  opacity: 0.5;
  position: absolute;
  top: -1.3rem;
  left: -0.85rem;
  z-index: 10;
}
.star02::before {
  opacity: 0.5;
  position: absolute;
  top: -1rem;
  left: -0.85rem;
  z-index: 10;
}