@charset "UTF-8";

:root {
  --cc1-main-color: #ed6c00;
  --mc1-main-color: #009d85;
  --vc1-main-color: #abcd03;
  --ce1-main-color: #5cb531;
  --me1-main-color: #008cd6;
  --ve1-main-color: #00a040;
  --ve2-main-color: #f5a200;
  --border-radius: 0.5rem;
  --button-border-radius: 0.5rem;
  --accordion-border-radius: 1rem;
  --modal-border-radius: 0.8rem;
  --gray-color: #6f6f6f;
  --black-color: #333333;
  --button-border-radius: 0.5rem;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Remove the touch event of images
 */
img {
  pointer-events: none;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 1.3em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  color: white;
  text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup,
.sub,
.sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub .sub {
  bottom: -0.25em;
}

sup,
.sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
  color: var(--black-color);
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/* 連続再生アイコン */
.player [type="checkbox"][id="contplay"] {
  display: none;
}

.player [type="checkbox"][id="contplay"] + .list-icon {
  background-image: url(../images/list.svg);
  background-size: 40px 80px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.player [type="checkbox"][id="contplay"] + .list-icon {
  width: 40px;
  height: 40px;
  background-position: 0 -40px;
}

.player [type="checkbox"][id="contplay"]:checked + .list-icon {
  background-position: 0 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/**
* カスタムチェックボックス
*/
input[type="checkbox"][class*="primary-checkbox"] {
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  height: 0px;
  width: 0px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="checkbox"][class*="primary-checkbox"]::before,
input[type="checkbox"][class*="primary-checkbox"]::after {
  content: "";
  display: block;
  position: absolute;
}

input[type="checkbox"][class*="primary-checkbox"]::before {
  background-color: #fff;
  border-radius: 0%;
  border: 1px solid #ddd;
  width: 22px;
  height: 22px;
  top: -0.8rem;
}

input[type="checkbox"][class*="primary-checkbox"]::after {
  border-bottom: 3px solid var(--color);
  border-left: 3px solid var(--color);
  opacity: 0;
  height: 6px;
  width: 11px;
  transform: rotate(-45deg);
  left: 6px;
  top: -0.3rem;
}

@media screen and (max-width: 768px) {
  input[type="checkbox"][class*="primary-checkbox"]::before {
    top: -1.2rem;
  }

  input[type="checkbox"][class*="primary-checkbox"]::after {
    top: -0.5rem;
  }
}

body.cc1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--cc1-main-color);
}

body.ce1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--ce1-main-color);
}

body.mc1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--mc1-main-color);
}

body.me1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--me1-main-color);
}

body.vc1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--vc1-main-color);
}

body.ve1 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--ve1-main-color);
}

body.ve2 input[type="checkbox"][class*="primary-checkbox"]::after {
  --color: var(--ve2-main-color);
}

input[type="checkbox"][class*="primary-checkbox"]:checked::after {
  opacity: 1;
}

/**
* カスタムラジオボックス
*/
input[type="radio"][class*="primary-radio"] {
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  height: 0px;
  width: 0px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="radio"][class*="primary-radio"]::before,
input[type="radio"][class*="primary-radio"]::after {
  content: "";
  display: block;
  position: absolute;
}

input[type="radio"][class*="primary-radio"]::before {
  background-color: #fff;
  border-radius: 50%;
  border: 1px solid #ddd;
  width: 22px;
  height: 22px;
  top: -0.8rem;
}

input[type="radio"][class*="primary-radio"]::after {
  background-color: var(--color);
  opacity: 0;
  border-radius: 50%;
  height: 14px;
  width: 14px;
  left: 4px;
  top: -0.5rem;
}

@media screen and (max-width: 768px) {
  input[type="radio"][class*="primary-radio"]::before {
    top: -1.2rem;
  }

  input[type="radio"][class*="primary-radio"]::after {
    top: -0.8rem;
  }
}

body.cc1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--cc1-main-color);
}

body.ce1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--ce1-main-color);
}

body.vc1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--vc1-main-color);
}

body.mc1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--mc1-main-color);
}

body.me1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--me1-main-color);
}

body.ve1 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--ve1-main-color);
}

body.ve2 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--ve2-main-color);
}

body.nc2 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--nc2-main-color);
}

body.nc3 input[type="radio"][class*="primary-radio"]::after {
  --color: var(--nc3-main-color);
}

input[type="radio"][class*="primary-radio"]:checked::after {
  opacity: 1;
}

/*----------------------------------------------------------------
  reset
-----------------------------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

ol {
  margin-block-start: 1.5rem;
  margin-block-end: 1.5rem;
  padding-inline-start: 4rem;
}

ul {
  margin-block-start: 1.2rem;
  margin-block-end: 1.2rem;
  padding-inline-start: 4rem;
}

button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

label {
  cursor: pointer;
}

*:focus {
  outline: none;
}

/*----------------------------------------------------------------
  設定
-----------------------------------------------------------------*/
.font-pron {
  font-family: "NewWords";
}

/*----------------------------------------------------------------
  基本設定
-----------------------------------------------------------------*/
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-size: 10px;
  /* 基準（px指定。変更不可） */
}

/* iPad以上でフォントサイズを自動変更 */
@media (min-width: 768px) {
  html {
    font-size: 14px;
    /* 倍率（px指定） */
  }
}

/* QR */
@font-face {
  font-family: "NewWords";
  src: url("../fonts/DoulosSIL-R.woff") format("woff");
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/DGTXT_NCGothic.woff") format("woff");
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/DGTXT_NCGothicBold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/NCGothicRegular.woff") format("woff");
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/NCGothic25dtBold.otf") format("OpenType");
  font-weight: bold;
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/NCGothicItalic_0.woff") format("woff");
  font-style: italic;
}

@font-face {
  font-family: "NCRegularFont";
  src: url("../fonts/NCGothicBoldItalic_6.woff") format("woff");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/DGTXT_CGothic_0.woff") format("woff");
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/DGTXT_CGothicBold_0.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/regular_en.woff") format("woff");
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/regular_en_bold.woff") format("woff");
  font-weight: bold;
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/regular_en_italic.woff") format("woff");
  font-style: italic;
}

@font-face {
  font-family: "RegularFont";
  src: url("../fonts/regular_en_bold_italic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/DGTXT_CGothic_0.woff") format("woff");
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/DGTXT_CGothicBold_0.woff") format("woff");
  font-weight: bold;
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/regular_en.woff") format("woff");
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/regular_en_bold.woff") format("woff");
  font-weight: bold;
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/regular_en_italic.woff") format("woff");
  font-style: italic;
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "RegularFont-org";
  src: url("../fonts/regular_en_bold_italic.woff") format("woff");
  font-style: italic;
  font-weight: bold;
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "specialfont";
  src: url("../fonts/special.woff") format("woff");
}

@font-face {
  font-family: "specialfont2";
  src: url("../fonts/special2.woff") format("woff");
  unicode-range: U+0101;
}

@font-face {
  font-family: "HelveticaNeue-org";
  src: local("Helvetica Neue");
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "Helvetica-org";
  src: local("Helvetica");
  unicode-range: U+0-2025, U+2027-10FFFF;
}

@font-face {
  font-family: "NCゴシック_bold";
  src: url("../../common/fonts/DGTXT_NCGothicBold.woff") format("woff");
}

@font-face {
  font-family: "NCGothic_bold";
  src: url("../../common/fonts/NCGothicBold_0.woff") format("woff");
}

.specialfont {
  font-family: "specialfont";
}

body {
  font-size: 1.5rem;
  font-family: Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    sans-serif;
  color: #000;
  line-height: 1.2;
  line-break: strict;
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  overscroll-behavior-y: none;
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0);
}

body:not(.vista) header,
body:not(.vista) #contents {
  font-family: "RegularFont", Helvetica, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", sans-serif;
}

body.vista header,
body.vista #contents {
  font-family: "specialfont2", "NCRegularFont", Helvetica,
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
}

/* もくじ・コンテンツページ　横幅最大1000px（コンテンツ980px） */
.header-wrap,
.acc-wrap,
.contents-wrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}

.header-wrap {
  height: 100%;
}

/* もくじページ */
.acc-wrap {
  padding-bottom: 40px;
  padding-top: 10px;
}

/* コンテンツページ */
.contents-wrap {
  padding: 0;
}

/* 第二階層ノンブル */
.hie2_nomble {
  display: inline-block;
  position: absolute;
  right: 40px;
  font-size: 11px;
  width: 60px;
  height: 20px;
  line-height: 20px;
  color: #231815;
  background-color: #e6e6e6;
  border-radius: 999px;
  box-shadow: 0px 0px 0px 2px rgb(255 255 255 / 60%);
  text-align: center;
}

/* もくじページ */
header.mokuji {
  position: fixed;
  top: 0;
  width: 100%;
  height: 73px;
  z-index: 100;
  pointer-events: auto;
}

/* もくじページ以外 */
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 73px;
  z-index: 100;
  pointer-events: auto;
  /* ダブルタップ無効用 */
}

@supports (padding-top: env(safe-area-inset-top)) {
  /* もくじページ */
  header.mokuji {
    padding-top: env(safe-area-inset-top);
    height: calc(73px + env(safe-area-inset-top));
  }

  /* もくじページ以外 */
  header {
    padding-top: env(safe-area-inset-top);
    height: calc(73px + env(safe-area-inset-top));
  }
}

/* もくじページ */
.has-zero-safe-area header.mokuji {
  height: calc(73px + 20px);
}

/* もくじページ以外 */
.has-zero-safe-area header {
  padding-top: 7px;
  height: calc(53px + 20px);
}

/* もくじページ */
main.mokuji {
  position: absolute;
  width: 100%;
  height: calc(100% - 73px);
  top: 73px;
}

/* もくじページ以外 */
main {
  position: absolute;
  width: 100%;
  height: calc(100% - 53px);
  top: 73px;
}

@supports (padding-top: env(safe-area-inset-top)) {
  /* もくじページ */
  main.mokuji {
    top: calc(73px + env(safe-area-inset-top));
    height: calc(100vh - 73px - env(safe-area-inset-top));
  }

  /* もくじページ以外 */
  main {
    top: calc(73px + env(safe-area-inset-top));
    height: calc(100vh - 73px - env(safe-area-inset-top));
  }
}

/* もくじページ */
.has-zero-safe-area main.mokuji {
  top: calc(73px + 20px);
  height: calc(100vh - 73px - 20px);
}

/* もくじページ以外 */
.has-zero-safe-area main {
  top: calc(73px + 20px);
  height: calc(100vh - 73px - 20px);
}

/* もくじページ */
main.mokuji #contents {
  overflow-y: scroll;
}

#contents {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#contents.contents-with-player {
  height: calc(100% - 64px);
}

#contents.contents-with-player.contents-with-seekbar {
  height: calc(100% - 80px);
}

#contents.contents-with-navpanel {
  height: calc(100% - 50px);
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  #contents {
    height: calc(100% - env(safe-area-inset-bottom));
  }

  #contents.contents-with-player {
    height: calc(100% - 64px - env(safe-area-inset-bottom));
  }

  #contents.contents-with-contents-with-seekbar {
    height: calc(100% - 80px - env(safe-area-inset-bottom));
  }

  #contents.contents-with-navpanel {
    height: calc(100% - 50px - env(safe-area-inset-bottom));
  }
}

#navpanel {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  overflow: hidden;
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  #navpanel {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(50px + env(safe-area-inset-bottom));
  }
}

#player {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 64px;
  overflow: hidden;
  background-color: #e5e5ea;
  touch-action: manipulation;
  /* ダブルタップ無効用 */
}

#player * {
  touch-action: manipulation;
  /* ダブルタップ無効用 */
}

#player.has-seekbar {
  height: 100px;
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  #player {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(64px + env(safe-area-inset-bottom));
  }

  #player.has-seekbar {
    padding-bottom: env(safe-area-inset-bottom);
    height: calc(100px + env(safe-area-inset-bottom));
  }
}

/**
=================================
Multi-Slider-Switch（ポップアップ）
=================================
**/

/* 配置場所とサイズ */
.multiswitch {
  float: right;
  width: calc(100% - 54px);
}

/* Multi-Slider-Switchごとに余白 */
.multiswitch:not(:last-of-type),
#player_settings .player-settings-section.playlist-through-wrap h3 {
  margin-bottom: 6px;
}

.multiswitch .slide-container {
  position: relative;
  display: flex;
  height: 30px;
  line-height: 22px;
  padding: 4px 0;
  user-select: none;
}

.multiswitch .slide-container label {
  text-align: center;
  z-index: 2;
}

.multiswitch .slide-container a {
  position: absolute;
  height: 100%;
  transition: left 0.1s ease-out;
  z-index: 1;
}

/*
  Auto adjusting widths
*/
.multiswitch label:nth-last-child(4),
.multiswitch label:nth-last-child(4) ~ label,
.multiswitch label:nth-last-child(4) ~ a {
  width: 33.3334%;
}

.multiswitch.elm2 label:nth-last-child(4),
.multiswitch.elm2 label:nth-last-child(4) ~ label,
.multiswitch.elm2 label:nth-last-child(4) ~ a,
.multiswitch.natural-fast label:nth-last-child(4),
.multiswitch.natural-fast label:nth-last-child(4) ~ label,
.multiswitch.natural-fast label:nth-last-child(4) ~ a,
.multiswitch.slow-natural label:nth-last-child(4),
.multiswitch.slow-natural label:nth-last-child(4) ~ label,
.multiswitch.slow-natural label:nth-last-child(4) ~ a {
  width: 50%;
}

/*
 Slider
*/
/* all options, first selected */
.multiswitch a {
  left: 0;
  border: 2px solid #e5e5ea;
  border-radius: 6px;
}

/* 3 options, 2nd selected */
.multiswitch.second_select a {
  left: 33.3334%;
}

/* 3 options, 3rd selected */
.multiswitch.third_select a {
  left: 66.6667%;
}

/* 3 options, 2nd selected */
.multiswitch.elm2.second_select a,
.multiswitch.natural-fast.second_select a {
  left: 0;
}

/* 3 options, 3rd selected */
.multiswitch.elm2.third_select a,
.multiswitch.natural-fast.third_select a {
  left: 50%;
}

/* 3 options, 2nd selected */
.multiswitch.slow-natural.second_select a {
  left: 50%;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.multiswitch .slide-container {
  font-size: 14px;
  background: #e5e5ea;
  color: #000;
  border-radius: 6px;
}

.multiswitch.player-settings-speed.natural-only .slide-container {
  color: #6f6f6f;
}

.multiswitch.player-settings-speed.natural-only .slide-container label {
  opacity: 0.3;
}

.multiswitch.player-settings-speed.natural-only
  .slide-container
  label:nth-of-type(2) {
  color: #000;
  opacity: 1;
}

.multiswitch .slide-container label {
  cursor: pointer;
}

.multiswitch .slide-container label:nth-of-type(2) {
  border-left: 1px solid transparent;
  /* 非表示 */
  border-right: 1px solid #bbb;
}

.multiswitch.second_select .slide-container label:nth-of-type(2) {
  border-right: 1px solid transparent;
  /* 非表示 */
  border-left: 1px solid transparent;
  /* 非表示 */
}

.multiswitch.third_select .slide-container label:nth-of-type(2) {
  border-right: 1px solid transparent;
  /* 非表示 */
  border-left: 1px solid #bbb;
}

.multiswitch.elm2.third_select .slide-container label:nth-of-type(2),
.multiswitch.natural-fast.third_select .slide-container label:nth-of-type(2) {
  border-right: 1px solid transparent;
  /* 非表示 */
  border-left: 1px solid transparent;
  /* 非表示 */
}

.multiswitch.slow-natural .slide-container label:nth-of-type(2) {
  border-right: 1px solid transparent;
  /* 非表示 */
  border-left: 1px solid transparent;
  /* 非表示 */
}

.multiswitch .slide-container a {
  background: #fff;
  height: 30px;
  top: 0;
}

#player_settings {
  display: none;
  position: fixed;
  bottom: 64px;
  right: 0px;
  margin: 1px;
  width: 278px;
  /* width: 224px; */
  background: #fcfcfc;
  border-radius: 8px;
  box-shadow: #00000040 0 0 120px 0;
  z-index: 999;
}

#player_settings.display_toggle {
  display: block;
}

/* 横幅最大1000pxを超えた場合（設定位置固定） */
@media (min-width: 1001px) {
  #player_settings {
    right: calc(50% - 500px);
  }
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape #player_settings.landscape-2col {
  /* grid-template-rows: 116px 80px; */
  /* 縦方向は自動autoとする */
  grid-template-columns: 278px 1fr;
  width: 556px;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape #player_settings.display_toggle.landscape-2col {
  display: grid !important;
}

#player_settings.has-seekbar {
  bottom: 100px;
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  #player_settings {
    bottom: calc(64px + env(safe-area-inset-bottom));
  }

  #player_settings.has-seekbar {
    bottom: calc(100px + env(safe-area-inset-bottom));
  }
}

#player_settings::after {
  content: "";
  display: block;
  position: absolute;
  bottom: -16px;
  right: 16px;
  border: 8px solid transparent;
  border-top-color: #fcfcfc;
}

#popup_overlay {
  display: none;
  width: 100%;
  height: calc(100% - 64px);
  position: absolute;
  top: 0;
}

#popup_overlay.has-seekbar {
  height: calc(100% - 100px);
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  #popup_overlay {
    height: calc(100% - 64px - env(safe-area-inset-bottom));
  }

  #popup_overlay.has-seekbar {
    height: calc(100% - 100px - env(safe-area-inset-bottom));
  }
}

header {
  font-family: "RegularFont", Helvetica, "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", sans-serif;
  background-color: grey;
  color: #fff;
}

/* CROWN English Communication I */
body.cc1 header {
  background-color: #ed6c00;
}

/* MY WAY English Communication I */
body.mc1 header {
  background-color: #009d85;
}

/* VISTA English Communication I */
body.vc1 header {
  background-color: #abcd03;
}

/* CROWN 論理表現 I */
body.ce1 header {
  background-color: #5cb531;
}

/* MY WAY 論理表現 I */
body.me1 header {
  background-color: #008cd6;
}

/* VISTA 論理表現 I */
body.ve1 header {
  background-color: #00a040;
}

/* VISTA 論理表現 II */
body.ve2 header {
  background-color: #f5a200;
}

header::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  bottom: 0;
  background-color: #fff;
  opacity: 0.5;
}

header .header_back {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
}

header .back {
  display: block;
  width: 50px;
  height: 53px;
  position: absolute;
  bottom: 0;
  background-image: url(../images/back.png);
  background-position: 15px center;
  background-size: 12px 20px;
  background-repeat: no-repeat;
  pointer-events: auto;
  cursor: pointer;
  /* 操作有効用 */
}

.header-title--center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* ヘッダ書名ロゴ */
.header-title--center img {
  width: 100%;
  padding-top: 7px;
}

/* 著作権 */
.header_links-wrap {
  position: relative;
}

#header_links {
  /* font-size: calc(100vw * 12 / 375); */
  position: absolute;
  top: -32px;
  right: 0px;
  /* height: 22px;
  line-height: 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer; */
  display: flex;
  gap: 10px;
}

#copyright_link,
#pronunciation_training_link {
  font-size: calc(100vw * 12 / 375);
  height: 22px;
  line-height: 22px;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  padding: 0 6px;
  margin: auto;
}

/* ポップアップ（著作権について） */
#popup_content {
  font-size: calc(100vw * 14 / 375);
}

@media (min-width: 375px) {
  .header-title--center {
    font-size: 15.5px;
  }

  /* 著作権 */
  #copyright_link,
  #pronunciation_training_link {
    font-size: 12px;
  }

  /* ポップアップ（著作権について） */
  #popup_content {
    font-size: 14px;
  }

  /* ヘッダ書名ロゴ */
  .header-title--center img {
    width: 355px;
    padding-top: 7px;
  }
}

/* 横幅がiPad（768px）以上の場合 */
@media (min-width: 768px) {
  /* ヘッダ書名ロゴ */
  .header-title--center img {
    width: 470px;
    padding-top: 11px;
  }
}

.header-title--center .lesson {
  font-weight: bold;
  margin-right: 0.5rem;
}

#copyright_link {
  display: inline-block;
  padding: 0 6px;
}

#copyright_link span {
  display: inline-block;
}

.help-wrap img {
  width: 25px;
}

#pronunciation_training_id {
  display: inline-block;
  padding: 0 6px;
}

#pronunciation_training_id span {
  display: inline-block;
}

.header-title--detail {
  margin-left: 40px;
  padding-top: 8px;
  height: 53px;
}

.header-title--detail .lesson {
  opacity: 0.5;
  font-size: 12px;
  white-space: nowrap;
}

.header-title--detail .lesson b {
  margin-right: 6.25px;
}

.header-title--detail .lesson .subtitle {
  font-size: 11px;
}

.header-title--detail .section {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 横幅がiPhone6/7/8（375px）未満の場合 */
@media (max-width: 374px) {
  .header-title--detail .section .long-title {
    position: relative;
    top: 2px;
    font-size: 13px;
  }

  .header-title--detail .section .long-title12 {
    position: relative;
    top: 2px;
    font-size: 12px;
  }
}

.navpanel {
  display: flex;
  flex-direction: row;
  background: #fcfcfc;
  border-top: 1px solid #c4c4c4;
}

.navpanel__item {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.navpanel__item.active {
  background: rgba(46, 125, 246, 0.3);
  /* 共通UI 明るく*/
}

.navpanel__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto;
  background-image: url(../images/navpanel.png);
  background-size: 84px 56px;
  background-repeat: no-repeat;
}

.navpanel__icon--listening {
  background-position: 0 -28px;
}

.navpanel__icon--words {
  background-position: -28px -28px;
}

.navpanel__icon--grammar {
  background-position: -56px -28px;
}

.navpanel__item.active .navpanel__icon {
  background-position-y: 0 !important;
}

.navpanel__label {
  text-align: center;
  margin-top: 2px;
  font-size: 11px;
  padding-bottom: 2px;
  line-height: 1;
  color: #6f6f6f;
}

.navpanel__item.active .navpanel__label {
  color: #2e7df6;
  /* 共通UI */
}

.navpanel-separator--solid {
  width: 0;
  border-right: 1px solid rgba(46, 125, 246, 0.4);
  /* 共通UI 明るく*/
}

.navpanel-separator--dotted {
  width: 0;
  border-right: 1px dashed rgba(46, 125, 246, 0.4);
  /* 共通UI 明るく*/
}

.player {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 80px;
  width: 100%;
  max-width: 1000px;
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  .player {
    height: calc(80px + env(safe-area-inset-bottom));
  }
}

.player #repeat_btn,
.player #play_pause_btn,
.player #prev_btn,
.player #next_btn {
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.player .force-disabled,
.player #repeat_btn.disable,
.player #play_pause_btn.disable,
.player #stop_btn.disable,
.player #prev_btn.disable,
.player #next_btn.disable {
  opacity: 0.2;
  pointer-events: none;
}

.player #play_pause_btn {
  width: 40px;
  height: 40px;
  left: 50%;
  margin-left: -45px;
  top: 28px;
  background-position: -30px -40px;
}

.player #play_pause_btn.hover {
  background-position-y: 0px;
}

.player #play_pause_btn.pause {
  background-position: -70px -40px;
}

.player #play_pause_btn.pause.hover {
  background-position-y: 0px;
}

.player #stop_btn {
  position: absolute;
  left: 50%;
  top: 28px;
  width: 40px;
  height: 40px;
  background-image: url(../images/control_stop.svg);
  background-size: 40px 80px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
  cursor: pointer;
  background-position: 0 -40px;
}

.player #stop_btn.hover {
  background-position: 0 0;
}

.player #prev_btn {
  width: 30px;
  height: 40px;
  left: 27%;
  top: 28px;
  background-position: 0px -40px;
}

@media screen and (min-width: 375px) {
  /* 画面サイズが375px以上 */
  .player #prev_btn {
    left: 50%;
    margin-left: -86px;
  }
}

.player #prev_btn.hover {
  background-position-y: 0px;
}

.player #next_btn {
  width: 30px;
  height: 40px;
  right: 27%;
  top: 28px;
  background-position: -110px -40px;
}

@media screen and (min-width: 375px) {
  /* 画面サイズが375px以上 */
  .player #next_btn {
    left: 50%;
    margin-left: 56px;
  }
}

.player #next_btn.hover {
  background-position-y: 0px;
}

.player #repeat_btn {
  width: 30px;
  height: 40px;
  left: 10px;
  top: 28px;
  background-position: -140px -40px;
}

.player #repeat_btn.on {
  background-position: -140px 0px;
}

.player #total_time,
.player #current_time {
  font-size: 12px;
  color: #6f6f6f;
  position: absolute;
  top: -12px;
  cursor: default;
}

.player #total_time {
  right: 10px;
}

.player #current_time {
  left: 10px;
}

.player #seek {
  margin: 0 60px;
  height: 15px;
  padding: 15px 0;
  position: relative;
  z-index: 6;
  cursor: pointer;
  bottom: 20px;
}

.player #seek .paragraph {
  position: absolute;
}

.player #seek .paragraph::after {
  content: "";
  position: absolute;
  border-right: 1px solid #b5b6b5;
  height: 20px;
  margin-top: -11px;
}

.player #seek .track {
  position: absolute;
  margin-left: -8px;
  width: 16px;
  height: 16px;
  background-color: #b5b6b5;
  border-radius: 10px;
  top: 8px;
  left: 0;
}

.player #seek .base {
  background-color: #b5b6b5;
  height: 2px;
  border-radius: 1px;
  overflow: hidden;
}

.player #seek .base .progress {
  background-color: #2e7df6;
  /* 共通UI */
  height: 100%;
  width: 0%;
}

.player #settings_btn {
  width: 30px;
  height: 40px;
  position: absolute;
  right: 10px;
  top: 28px;
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-position: -170px -40px;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 5;
}

.player #settings_btn.active {
  background-position: -170px 0px;
}

.player #settings_btn.disable {
  /*   opacity: 0.2;
  pointer-events: none; */
  display: none;
}

.player #settings_btn {
  transition: transform 0.1s;
}

.player #settings_btn.active {
  transform: rotate(22.5deg);
}

.player #speaker_btn {
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.player #prev2_btn,
.player #next2_btn {
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.player #speaker_btn.disable,
.player #prev2_btn.disable,
.player #next2_btn.disable {
  opacity: 0.2;
  pointer-events: none;
}

.player #speaker_btn {
  width: 36px;
  height: 40px;
  left: 50%;
  margin-left: -18px;
  top: 28px;
  background-position: -242px -40px;
}

.player #speaker_btn.hover {
  background-position-y: 0px;
}

.player #prev2_btn,
.player #next2_btn {
  width: 28px;
  height: 40px;
  left: 50%;
  top: 28px;
}

.player #prev2_btn {
  margin-left: -100px;
  background-position: -276px -40px;
}

.player #next2_btn {
  margin-left: 70px;
  background-position: -298px -40px;
}

.player #prev2_btn.hover,
.player #next2_btn.hover {
  background-position-y: 0px;
}

/* QR：連続再生 TBD */
.player #continuous_btn {
  height: 40px;
  left: 64px;
  top: 28px;
  position: absolute;
  z-index: 5;
  cursor: pointer;
}

.player #continuous_btn label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.player-settings .player-settings-section {
  display: block;
  padding-right: 16px;
  padding-left: 16px;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape
  .player-settings.landscape-2col
  .player-settings-section:nth-of-type(1) {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  border-right: 1px solid #c4c4c4;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape
  .player-settings.landscape-2col
  .player-settings-divider:nth-of-type(2) {
  border: none;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape
  .player-settings.landscape-2col
  .player-settings-section:nth-of-type(3) {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape
  .player-settings.landscape-2col
  .player-settings-section:nth-of-type(4) {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

/* 最初のセッティングセクション（吹き出し上に余白）*/
.player-settings .player-settings-section:first-of-type {
  padding-top: 8px;
}

/**
デバイス横向き（landscape）
================================= **/
body.landscape
  .player-settings.landscape-2col
  .player-settings-section:first-of-type {
  padding-bottom: 8px;
}

/* 最後のセッティングセクション（吹き出し下に余白）*/
.player-settings .player-settings-section:last-of-type {
  padding-bottom: 8px;
}

/**
デバイス横向き（landscape）
================================= **/
/* 通し読みの上に余白 */
body.landscape
  .player-settings.landscape-2col
  .player-settings-section.playlist-through-wrap {
  padding-top: 8px;
}

/* セッティングセクションの区切り線 */
.player-settings .player-settings-divider {
  border: none;
  border-bottom: 1px solid #c4c4c4;
}

/* セッティングセクションのタイトル */
.player-settings .player-settings-header {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #6f6f6f;
}

/* セッティンググループのタイトル（セッティングセクションと同じに） */
.player-settings .player-settings-group.font-header {
  font-size: 14px;
  font-weight: bold;
  color: #6f6f6f;
}

/* セッティングセクションのタイトル（通し読み） */
.player-settings
  .player-settings-section.playlist-through-wrap
  .player-settings-header {
  display: block;
}

.player-settings .player-settings-header:not(:last-of-type) {
  margin-right: 8px;
}

/* 内側にインデント */
.player-settings-group.ml-17,
.player-settings-section .ml-17 {
  margin-left: 17px;
}

/*
ResetCSS（H3）
===========================
*/
.player-settings h3 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* 通し読みのボタンの説明タイトル */
.player-settings .player-settings-section.playlist-through-wrap h3 {
  display: inline-block;
  font-size: 14px;
  color: #6f6f6f;
  height: 30px;
  line-height: 30px;
}

/* 通し読みOFF時 */
.player-settings-group.playlist-through-item.inactive {
  opacity: 0.3;
  pointer-events: none;
}

.player-settings .player-settings-item:not(.multiswitch-item) {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  line-height: 36px;
  cursor: pointer;
}

/* ラジオボタンの設定がないもの用 */
.player-settings .player-settings-other {
  font-size: 16px;
  line-height: 36px;
  cursor: pointer;
}

.player-settings
  .player-settings-item:not(.multiswitch-item):not(:last-of-type) {
  margin-right: 8px;
}

.player-settings
  .player-settings-header
  .player-settings-item:not(:last-of-type) {
  font-size: inherit;
  line-height: inherit;
}

.player-settings .player-settings-item:not(.multiswitch-item):active {
  background: #e9e9ec;
}

.player-settings .player-settings-item > input[type="checkbox"],
.player-settings .player-settings-item > input[type="radio"] {
  display: none;
}

.player-settings .player-settings-item > input[type="checkbox"] + i,
.player-settings .player-settings-item > input[type="radio"] + i {
  display: block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  margin-top: -2px;
  position: relative;
}

.player-settings .player-settings-item > input[type="checkbox"] + i::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  border: 1px solid #6f6f6f;
}

.player-settings
  .player-settings-item
  > input[type="checkbox"]:checked
  + i::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  margin: auto;
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-position: -227px -11px;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* 通し読みの項目以外 */
.player-settings
  .player-settings-item:not(.multiswitch-item)
  > input[type="radio"]
  + i::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  border: 1px solid #6f6f6f;
  border-radius: 16px;
}

/* 通し読みの項目以外 */
.player-settings
  .player-settings-item:not(.multiswitch-item)
  > input[type="radio"]:checked
  + i::before {
  border-color: #2e7df6;
  /* 共通UI */
}

/* 通し読みの項目以外 */
.player-settings
  .player-settings-item:not(.multiswitch-item)
  > input[type="radio"]:checked
  + i::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 10px;
  background-color: #2e7df6;
}

/* 通し読みの項目以外 */
.player-settings .player-settings-item:not(.multiswitch-item).disabled:active {
  background: none;
}

/* 通し読みの項目以外 */
.player-settings .player-settings-item:not(.multiswitch-item).disabled {
  color: #c2c2c2;
}

.player-settings
  .player-settings-item:not(.multiswitch-item).disabled
  > input[type="checkbox"]
  + i::before,
.player-settings
  .player-settings-item:not(.multiswitch-item).disabled
  > input[type="radio"]
  + i::before {
  border: 1px solid #c2c2c2;
}

.speech-highlight.natural .playing {
  color: #ff4b00;
  /*再生時に文字の一部が取り残される事象の対処*/
  text-shadow: 0 0 1em rgba(0, 0, 0, 0);
}

.speech-highlight.karaoke .playing {
  color: #23a2ff;
}

.speech-highlight.karaoke .done {
  color: #f00;
  transform: translateZ(0);
}

.speech-highlight.karaoke .complete {
  color: #f00;
}

.speech-highlight.shadowing .playing {
  color: #f00;
}

.speech-highlight.shadowing .done {
  color: transparent;
  transform: translateZ(0);
}

.speech-highlight.shadowing .complete {
  color: transparent;
}

.speech-highlight .mask,
.speech-highlight
  .mask
  span:not(.yaku-small):not(.threeleader):not(.underline-number):not(.notes-number):not(.pronunciation) {
  color: transparent;
  background: #eee888;
  margin-left: -1px;
  padding-left: 1px;
}

.speech-highlight .mask .done {
  color: transparent;
}

/* 新出語のハイライト色を優先 */
.speech-highlight .mask-word.highlight,
.speech-highlight
  .mask-word.highlight
  span:not(.yaku-small):not(.threeleader):not(.underline-number):not(.notes-number):not(.pronunciation) {
  background: #bfe4ff !important;
  margin-left: -1px;
  padding-left: 1px;
}

.speech-highlight .mask-phrase.highlight,
.speech-highlight
  .mask-phrase.highlight
  span:not(.yaku-small):not(.threeleader):not(.underline-number):not(.notes-number):not(.pronunciation) {
  background: #ffcabf;
  margin-left: -1px;
  padding-left: 1px;
}

/*
ResetCSS（H2）
===========================
*/
h2.book-index-label {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 20px;
  vertical-align: baseline;
  background: transparent;
}

h2.book-index-label {
  font-family: "RegularFont-org", "Helvetica-org", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", sans-serif;
  display: flex;
  align-items: center;
  flex-direction: unset;
  position: relative;
  height: 70px;
  margin-top: 10px;
  padding-left: 14px;
  padding-right: 40px;
  color: #333;
  font-weight: bold;
}

/* スクロール位置合わせ */
h2.book-index-label:first-of-type {
  margin-top: 0px;
}

h2.book-index-label .lesson {
  width: auto;
  min-width: 117px;
  /* 最小サイズ必要 */
  color: gray;
  font-weight: bold;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* background-color: skyblue; テスト */
}

h2.book-index-label .lesson.lesson-other {
  width: auto;
  margin-right: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

h2.book-index-label .lesson.me-unit1 {
  min-width: 173px;
  /* 最小サイズ変更 */
  margin-right: 20px;
}

h2.book-index-label .lesson.me-unit2 {
  min-width: 206px;
  /* 最小サイズ変更 */
  margin-right: 20px;
}

h2.book-index-label .long-title {
  display: inline-block;
}

/* 横幅がiPhone6/7/8（375px）未満の場合 */
@media (max-width: 374px) {
  h2.book-index-label .long-subtitle {
    font-size: 13px;
  }
}

h2.book-index-label .lesson-title {
  width: auto;
  /* 横幅指定なし */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* background-color: sandybrown; テスト */
}

h2.book-index-label:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: gray;
  opacity: 0.15;
}

/* CROWN English Communication I */
body.cc1 h2.book-index-label:before {
  background-color: #ed6c00;
}

/* MY WAY English Communication I */
body.mc1 h2.book-index-label:before {
  background-color: #009d85;
}

/* VISTA English Communication I */
body.vc1 h2.book-index-label:before {
  background-color: #95b211;
  /* 視認性のため#abcd03から変更 */
}

/* CROWN 論理表現 I */
body.ce1 h2.book-index-label:before {
  background-color: #5cb531;
}

/* MY WAY 論理表現 I */
body.me1 h2.book-index-label:before {
  background-color: #008cd6;
}

/* VISTA 論理表現 I */
body.ve1 h2.book-index-label:before {
  background-color: #00a040;
}

/* VISTA 論理表現 II */
body.ve2 h2.book-index-label:before {
  background-color: #f5a200;
}

/* CROWN English Communication I */
body.cc1 h2.book-index-label .lesson {
  color: #ed6c00;
}

/* MY WAY English Communication I */
body.mc1 h2.book-index-label .lesson {
  color: #009d85;
}

/* VISTA English Communication I */
body.vc1 h2.book-index-label .lesson {
  color: #95b211;
  /* 視認性のため#abcd03から変更 */
}

/* VISTA 論理表現 I */
body.ve1 h2.book-index-label .lesson {
  color: #00a040;
}

/* VISTA 論理表現 II */
body.ve2 h2.book-index-label .lesson {
  color: #f5a200;
}

/* CROWN 論理表現 I */
body.ce1 h2.book-index-label .lesson {
  color: #5cb531;
}

/* MY WAY 論理表現 I */
body.me1 h2.book-index-label .lesson {
  color: #008cd6;
}

/* CROWN English Communication I */
body.cc1 h2.pronunciation-training:before {
  background-color: #f00;
  cursor: pointer;
}

/* MY WAY English Communication I */
body.mc1 h2.pronunciation-training:before {
  background-color: #009d85;
  cursor: pointer;
}

/* VISTA English Communication I */
body.vc1 h2.pronunciation-training:before {
  background-color: #95b211;
  /* 視認性のため#abcd03から変更 */
  cursor: pointer;
}

/* VISTA 論理表現 I */
body.ve1 h2.pronunciation-training:before {
  background-color: #00a040;
  cursor: pointer;
}

/* VISTA 論理表現 II */
body.ve2 h2.pronunciation-training:before {
  background-color: #f5a200;
  cursor: pointer;
}

/* CROWN 論理表現 I */
body.ce1 h2.pronunciation-training:before {
  background-color: #5cb531;
  cursor: pointer;
}

/* MY WAY 論理表現 I */
body.me1 h2.pronunciation-training:before {
  background-color: #008cd6;
  cursor: pointer;
}

/* CROWN English Communication I */
body.cc1 h2.pronunciation-training .lesson {
  color: #f00;
}

/* MY WAY English Communication I */
body.mc1 h2.pronunciation-training .lesson {
  color: #009d85;
}

/* VISTA 論理表現 I */
body.ve1 h2.pronunciation-training .lesson {
  color: #00a040;
}

/* VISTA 論理表現 II */
body.ve2 h2.pronunciation-training .lesson {
  color: #f5a200;
}

/* VISTA English Communication I */
body.vc1 h2.pronunciation-training .lesson {
  color: #95b211;
  /* 視認性のため#abcd03から変更 */
}

/* CROWN 論理表現 I */
body.ce1 h2.pronunciation-training .lesson {
  color: #5cb531;
}

/* MY WAY 論理表現 I */
body.me1 h2.pronunciation-training .lesson {
  color: #008cd6;
}

.book-index-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* CROWN English Communication I */
body.cc1 .book-index-list .lesson {
  color: #ed6c00;
}

/* MY WAY English Communication I */
body.mc1 .book-index-list .lesson {
  color: #009d85;
}

/* VISTA English Communication I */
body.vc1 .book-index-list .lesson {
  color: #95b211;
  /* 視認性のため#abcd03から変更 */
}

/* CROWN 論理表現 I */
body.ce1 .book-index-list .lesson {
  color: #5cb531;
}

/* MY WAY 論理表現 I */
body.me1 .book-index-list .lesson {
  color: #008cd6;
}

/* VISTA 論理表現 I */
body.ve1 .book-index-list .lesson {
  color: #00a040;
}

/* VISTA 論理表現 II */
body.ve2 .book-index-list .lesson {
  color: #f5a200;
}

.book-index-list .mark-circle,
.header-title--detail .mark-circle {
  display: inline-block;
  position: relative;
  width: calc(1em + 4px);
  height: calc(1em + 4px);
  line-height: calc(1em + 4px + 0.15em);
  /* 0.15emは調整分 */
  text-align: center;
  color: #fff;
  border-radius: 50%;
}

.book-index-list .mark-circle.green {
  background-color: #36b449;
  /* ve3 付録❶　第三階層*/
}

.book-index-list .mark-circle.orange {
  background-color: #f5a400;
  /* ve3 Start UP　第三階層*/
}

.book-index-list .mark-circle.purple {
  background-color: #a674b0;
}

/* 文字の改行不可 */
.book-index-list .no-wrap {
  white-space: nowrap;
}

.book-index-list .hie2_box {
  position: absolute;
  width: calc(100% - 135px);
  align-items: center;
  flex-direction: unset;
  padding-right: 0;
  font-size: 18px;
  color: #000;
  display: block !important;
}

.book-index-list .hie2_begin {
  overflow: visible;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  color: #000;
  white-space: pre;
  /* 半角スペース表示 */
  /* background-color: skyblue; テスト */
}

.book-index-list .hie2_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  color: #000;
  /* background-color: sandybrown; テスト */
}

.book-index-list .sub-title {
  font-size: 16px;
}

.book-index-list .header_section_title {
  display: none;
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  h2.book-index-label {
    font-size: 17px;
    padding-left: 10px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  h2.book-index-label .lesson,
  h2.book-index-label .lesson.lesson-other {
    width: 100%;
    min-width: auto;
    /* 最小サイズ解除 */
  }

  h2.book-index-label .lesson-title {
    width: 100%;
    font-size: 16px;
    line-height: 1.2;
  }

  .book-index-list .hie2_box {
    font-size: 16px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }

  .book-index-list .hie2_begin,
  .book-index-list .hie2_title {
    font-size: 16px;
    width: 90%;
    display: inline-block;
    vertical-align: middle;
  }

  .book-index-list .hie2_begin {
    overflow: hidden;
  }

  .book-index-list .sub-title {
    font-size: 14px;
  }
}

.book-index-list .hie3_box {
  position: absolute;
  width: calc(100% - 40px);
  display: inherit;
  align-items: center;
  flex-direction: unset;
  padding-right: 0;
  font-size: 18px;
  color: #000;
}

.book-index-list > li {
  font-family: "RegularFont-org", "Helvetica-org", "ヒラギノ角ゴ ProN W3",
    "Hiragino Kaku Gothic ProN", sans-serif;
  border-bottom: 1px solid #c4c4c4;
}

.book-index-list .border-btm--hie2 {
  border-bottom: 1px solid #c4c4c4;
}

.book-index-list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 68px;
  padding: 0 40px 0 20px;
  color: #000;
  line-height: 1.3;
  text-decoration: none;
}

/* .book-index-list > li > a::after,
h2.book-index-label::after {
  content: "";
  display: block;
  width: 63px;
  height: 63px;
  position: absolute;
  right: -11px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_icon.svg);
  background-size: 13px 7px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
} */
/* CROWN English Communication I */
body.cc1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .book-index-list > li > a::after {
  background-image: url(../images/accordion_icon_ve2.svg);
}

.book-index-list > li.expandable > a::after {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_plus.svg);
  background-size: 24px 24px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: initial;
}

/* CROWN English Communication I */
body.cc1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .book-index-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ve2.svg);
}

h2.book-index-label::after {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_minus.svg);
  background-size: 24px 24px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: initial;
}

/* CROWN English Communication I */
body.cc1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 h2.book-index-label.expanded::after {
  background-image: url(../images/accordion_minus_ve2.svg);
}

.book-index-list > li.expandable.expanded > a::after,
.book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus.svg);
}

/* CROWN English Communication I */
body.cc1 .book-index-list > li.expandable.expanded > a::after,
body.cc1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .book-index-list > li.expandable.expanded > a::after,
body.mc1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .book-index-list > li.expandable.expanded > a::after,
body.vc1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .book-index-list > li.expandable.expanded > a::after,
body.ce1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .book-index-list > li.expandable.expanded > a::after,
body.me1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .book-index-list > li.expandable.expanded > a::after,
body.ve1 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .book-index-list > li.expandable.expanded > a::after,
body.ve2 .book-index-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ve2.svg);
}

h2.book-index-label::after {
  background-image: url(../images/accordion_plus.svg);
}

/* CROWN English Communication I */
body.cc1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 h2.book-index-label::after {
  background-image: url(../images/accordion_plus_ve2.svg);
}

.book-index-list > li.expandable.expanded > .expandable__headline,
.book-index-list > li.expandable.expanding > .expandable__headline {
  border-bottom: 1px solid #c4c4c4;
}

/* 第一階層 */
/* h2.book-index-label {
  box-shadow: none;
} */

.book-index-list > li.expandable > .expandable__contents {
  overflow: hidden;
  height: 0;
}

h2.book-index-label + .book-index-list {
  overflow: hidden;
  max-height: 0;
}

h2.book-index-label.expanded + .book-index-list {
  max-height: 2000px;
}

.book-index-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-left: 40px;
}

.book-index-sublist > li {
  border-bottom: 1px solid #e0e0e0;
}

.book-index-sublist > li:last-child {
  border-bottom: none;
}

.book-index-sublist > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 30px 0 0;
  font-size: 18px;
  color: #000;
  line-height: 1.3;
  text-decoration: none;
}

.book-index-list .hie3_title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 18px;
  color: #000;
  /* background-color: slategrey; テスト */
}

/* 動画アイコン */
.book-index-list .hie3_box .icon-movie {
  position: relative;
  display: inline-block;
  content: "";
  top: -2px;
  left: 0;
  background: url(../images/icon_movie.svg) no-repeat;
  height: 22px;
  min-width: 28px;
  vertical-align: middle;
  margin-right: 0.2em;
  cursor: pointer;
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  .book-index-sublist .hie2_box {
    font-size: 16px;
  }

  .book-index-list .hie3_box {
    font-size: 16px;
    overflow: hidden;
  }

  .book-index-list .hie3_title {
    font-size: 16px;
    width: 100%;
  }

  .book-index-list .hie3_box .icon-movie {
    top: -1px;
    height: 18px;
    min-width: 23px;
  }
}

/* 基本文とその他がアコーディオン内に混在 */
.fcindex-sublist.book-index-sublist > li > a {
  width: 100%;
}

.book-index-sublist > li > a::after {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_icon.svg);
  background-size: 13px 7px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}

/* CROWN English Communication I */
body.cc1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .book-index-sublist > li > a::after {
  background-image: url(../images/accordion_icon_ve2.svg);
}

.page-words {
  display: table;
  width: auto;
  margin: 0 auto;
  padding: 16px;
  /* px固定 */
  font-size: 2rem;
  line-height: 1.6;
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  .page-words {
    display: block;
    width: auto;
    margin: 0;
  }
}

.words-table {
  border-collapse: collapse;
  width: 100%;
}

/* QR:TODO：線があるバージョンとないバージョン */
.words-table.hasjp tr {
  border-top: 1px solid #c4c4c4;
}

.words-table.hasjp tr:first-child {
  border-top: none;
}

.words-table td {
  cursor: pointer;
  padding: 0.5rem 0;
}

@media (min-width: 768px) {
  .words-table th.en {
    width: auto !important;
  }

  .words-table td.en br {
    display: none;
  }
}

.words-table td.en {
  padding-right: 0.25rem;
  word-break: keep-all;
  font-weight: normal;
}

.words-table td.en .Bold {
  font-weight: bold;
}

/* QR */
.words-table td.en span.pronunciation {
  padding-left: 0.5em;
  font-family: "NewWords";
  font-weight: normal;
}

/* 発音記号に日本語を含む場合 */
.words-table td.en span.pronunciation span.jp {
  font-size: 0.8em;
}

.words-table td.jp {
  padding-left: 0.25rem;
  font-size: 0.9em;
}

.page-words .accent {
  position: relative;
}

/* QR：アクセント削除
.page-words .accent::after {
  position: absolute;
  content: "▼";
  top: -87.5%;
  left: 50%;
  transform: translate(-50%, 0px) scale(0.375);
}
*/
/* QR：ランク削除
.word-rank-a .en {
  font-weight: bold;
}

.word-rank-d .en {
  font-weight: bold;
}
*/
.page-honbun {
  max-width: 100vw;
}

body:not(.vista) .page-honbun {
  /* QR：リフロー */
  margin: 0 auto;
  padding: 16px;
  /* px固定 */
  font-size: 2rem;
  line-height: 1.6;
}

body.vista .page-honbun {
  margin: 0 auto;
  padding: 16px;
  /* px固定 */
  font-size: 2.4rem;
  line-height: 1.6;
}

.page-honbun.classroom .jp,
.page-honbun .mask-jp {
  font-size: 0.9em;
}

.page-honbun.classroom .text-num {
  width: 2em;
  text-align: right;
  text-indent: 0em;
  margin: 0 0.5em 0 -1em;
  display: inline-block;
}

.page-honbun > span {
  cursor: pointer;
}

.page-honbun dl {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.6em;
}

.page-honbun dl dt {
  float: left;
  clear: left;
  width: 3.6rem;
  font-size: 1.4rem;
  font-style: italic;
  text-align: right;
}

.page-honbun dl dt.standard {
  font-style: initial;
}

.page-honbun dl dt.wide {
  width: 7.5rem;
}

.page-honbun dl dt.wide-half {
  width: 5.4rem;
}

.page-honbun dl dt > .person {
  display: inline-block;
}

.page-honbun dl dt.rolelabel-left > .person {
  text-align: left;
}

.page-honbun dl dt.rolelabel-center > .person {
  text-align: center;
}

.page-honbun dl dt.rolelabel-left::after,
.page-honbun dl dt.rolelabel-center::after {
  content: ":";
  font-style: normal;
}

.person-coron {
  font-style: normal;
}

.page-honbun dl dd {
  margin-left: 3.6rem;
  padding-left: 0.8rem;
  cursor: pointer;
}

.page-honbun dl dd.hb-kaiwa-caption {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.page-honbun dl dt.wide + dd {
  margin-left: 7.5rem;
}

.page-honbun dl dt.wide-half + dd {
  margin-left: 5.4rem;
}

.page-honbun dl dt + dd.indent-10 {
  margin-left: 3.6rem;
  text-indent: 1rem;
}

.page-honbun.dialog dl {
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.6em;
}

.page-honbun.dialog dl dt {
  float: left;
  clear: left;
  width: 4rem;
  height: 2.4rem;
  margin: 1rem 0 0.6rem 6.6rem;
  line-height: 1.4;
  font-size: 1.9rem;
  font-style: initial;
  text-align: center;
  color: #fff;
  border-radius: 0.5rem;
}

.page-honbun.dialog dl dt.roleA {
  background-color: #60b6d8;
}

.page-honbun.dialog dl dt.roleB {
  background-color: #ee86a7;
}

.page-honbun.dialog div.dialog-img {
  margin: 0 1rem;
}

.page-honbun.dialog div.dialog-img img {
  width: 8rem;
}

.page-honbun.dialog div.dialog-img img.img-right {
  float: right;
}

.page-honbun.dialog dl dd {
  margin: 1.6rem 5rem;
  padding: 0.5rem 1rem 0.5rem 6.6rem;
  cursor: pointer;
  border-radius: 0.5rem;
  box-shadow: 0px 0px 0.2rem 0.2rem rgb(100 100 100 / 0.15),
    0px 0px 0.2rem 0.2rem rgb(100 100 100 / 0.15);
}

.page-honbun.dialog dl dt.roleA::after {
  content: "";
  position: relative;
  display: block;
  left: -3.6rem;
  margin-top: -5.1rem;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../images/balloon_left.png);
}

.page-honbun.dialog dl dd.roleB::before {
  content: "";
  position: relative;
  display: block;
  float: right;
  top: -2rem;
  margin-right: -2.9rem;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url(../images/balloon_right.png);
  background-position: 2.6rem 0px;
}

.page-honbun .half-line,
.page-honbun .fixed-line {
  display: block;
  height: 1rem;
}

.page-honbun .align-right {
  display: block;
  text-align: right;
}

.page-honbun .slash {
  visibility: hidden;
  color: #0078ff;
  font-weight: bold;
}

.page-honbun.slash .slash {
  visibility: visible;
}

.page-honbun .paragraph[data-color]::after {
  content: "";
  display: inline-block;
  margin-bottom: 0.2em;
}

.page-honbun .paragraph-canvas {
  position: absolute;
  z-index: -1;
}

.page-honbun .sentence-number {
  color: transparent;
  position: relative;
  transform: scaleX(0.5);
}

.page-honbun .sentence-number::after {
  content: attr(data-num);
  color: #fff;
  position: absolute;
  display: inline-flex;
  background-color: #dd94c0;
  font-weight: bold;
  border-radius: 50%;
  width: 1.2em;
  height: 1.2em;
  box-sizing: border-box;
  padding-top: 0.08em;
  padding-right: 0.01em;
  justify-content: center;
  align-items: center;
  font-size: 0.5em;
  top: 0.1em;
  left: -0.2em;
}

.page-honbun:not(#sounds) span.pronunciation {
  font-family: "NewWords";
}

.pronunciation i.i-mr {
  margin-right: 0.15em;
}

/* .page-honbun .circle-number {
  font-size: 12px;
}

.page-honbun .circle-number[data-number]::before {
  display: inline;
  color: #000 !important;
}

.page-honbun .circle-number[data-number="①"]::before {
  content: "①";
}

.page-honbun .circle-number[data-number="②"]::before {
  content: "②";
}

.page-honbun .circle-number[data-number="③"]::before {
  content: "③";
}

.page-honbun .circle-number[data-number="④"]::before {
  content: "④";
}

.page-honbun .circle-number[data-number="⑤"]::before {
  content: "⑤";
}

.page-honbun .circle-number[data-number="⑥"]::before {
  content: "⑥";
}

.page-honbun .circle-number[data-number="⑦"]::before {
  content: "⑦";
}

.page-honbun .circle-number[data-number="⑧"]::before {
  content: "⑧";
}

.page-honbun .circle-number[data-number="⑨"]::before {
  content: "⑨";
}

.page-honbun .circle-number[data-number="⑩"]::before {
  content: "⑩";
}

.page-honbun .circle-number[data-number="❶"]::before {
  content: "❶";
}

.page-honbun .circle-number[data-number="❷"]::before {
  content: "❷";
}

.page-honbun .circle-number[data-number="❸"]::before {
  content: "❸";
}

.page-honbun .circle-number[data-number="❹"]::before {
  content: "❹";
}

.page-honbun .circle-number[data-number="❺"]::before {
  content: "❺";
}

.page-honbun .circle-number[data-number="❻"]::before {
  content: "❻";
}

.page-honbun .circle-number[data-number="❼"]::before {
  content: "❼";
}

.page-honbun .circle-number[data-number="❽"]::before {
  content: "❽";
}

.page-honbun .circle-number[data-number="❾"]::before {
  content: "❾";
}

.page-honbun .circle-number[data-number="❿"]::before {
  content: "❿";
} */

/* .page-honbun .the-crown-news {
  display: block;
  text-align: center;
  letter-spacing: 0.125em;
} */

/* .page-honbun .useread-header-character {
  font-size: 80%;
} */

/* .page-honbun .togaki-num-en {
  display: none;
} */

body.mc1 .page-honbun .paragraph-number {
  display: inline-flex;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.3em;
  color: #fff;
  background-color: #e86509;
  border-radius: 0.4em;
  justify-content: center;
  align-items: center;
}

.page-honbun .indent-1,
.page-toolbox .indent-1,
.page-drill .indent-1 {
  display: inline-block;
  text-indent: -1em;
  padding-left: 1em;
}

.page-honbun .indent-11,
.page-toolbox .indent-11,
.page-drill .indent-11 {
  display: inline-block;
  text-indent: -1.1em;
  padding-left: 1.1em;
}

.page-honbun .indent-12,
.page-toolbox .indent-12,
.page-drill .indent-12 {
  display: inline-block;
  text-indent: -1.2em;
  padding-left: 1.2em;
}

.page-honbun .indent-13,
.page-toolbox .indent-13,
.page-drill .indent-13 {
  display: inline-block;
  text-indent: -1.3em;
  padding-left: 1.3em;
}

.page-honbun .indent-14,
.page-toolbox .indent-14,
.page-drill .indent-14 {
  display: inline-block;
  text-indent: -1.4em;
  padding-left: 1.4em;
}

.page-honbun .indent-15,
.page-toolbox .indent-15,
.page-drill .indent-15 {
  display: inline-block;
  text-indent: -1.5em;
  padding-left: 1.5em;
}

.page-honbun .indent-16,
.page-toolbox .indent-16,
.page-drill .indent-16 {
  display: inline-block;
  text-indent: -1.6em;
  padding-left: 1.6em;
}

.page-honbun .indent-17,
.page-toolbox .indent-17,
.page-drill .indent-17 {
  display: inline-block;
  text-indent: -1.7em;
  padding-left: 1.7em;
}

.page-honbun .indent-18,
.page-toolbox .indent-18,
.page-drill .indent-18 {
  display: inline-block;
  text-indent: -1.8em;
  padding-left: 1.8em;
}

.page-honbun .indent-19,
.page-toolbox .indent-19,
.page-drill .indent-19 {
  display: inline-block;
  text-indent: -1.9em;
  padding-left: 1.9em;
}

.page-honbun .indent-2,
.page-toolbox .indent-2,
.page-drill .indent-2 {
  display: inline-block;
  text-indent: -2em;
  padding-left: 2em;
}

.page-honbun .indent-21,
.page-toolbox .indent-21,
.page-drill .indent-21 {
  display: inline-block;
  text-indent: -2.1em;
  padding-left: 2.1em;
}

.page-honbun .indent-22,
.page-toolbox .indent-22,
.page-drill .indent-22 {
  display: inline-block;
  text-indent: -2.2em;
  padding-left: 2.2em;
}

.page-honbun .indent-23,
.page-toolbox .indent-23,
.page-drill .indent-23 {
  display: inline-block;
  text-indent: -2.3em;
  padding-left: 2.3em;
}

.page-honbun .indent-24,
.page-toolbox .indent-24,
.page-drill .indent-24 {
  display: inline-block;
  text-indent: -2.4em;
  padding-left: 2.4em;
}

.page-honbun .indent-25,
.page-toolbox .indent-25,
.page-drill .indent-25 {
  display: inline-block;
  text-indent: -2.5em;
  padding-left: 2.5em;
}

.page-honbun .indent-26,
.page-toolbox .indent-26,
.page-drill .indent-26 {
  display: inline-block;
  text-indent: -2.6em;
  padding-left: 2.6em;
}

.page-honbun .indent-27,
.page-toolbox .indent-27,
.page-drill .indent-27 {
  display: inline-block;
  text-indent: -2.7em;
  padding-left: 2.7em;
}

.page-honbun .indent-28,
.page-toolbox .indent-28,
.page-drill .indent-28 {
  display: inline-block;
  text-indent: -2.8em;
  padding-left: 2.8em;
}

.page-honbun .indent-29,
.page-toolbox .indent-29,
.page-drill .indent-29 {
  display: inline-block;
  text-indent: -2.9em;
  padding-left: 2.9em;
}

.page-honbun .indent-30,
.page-toolbox .indent-30,
.page-drill .indent-30 {
  display: inline-block;
  text-indent: -3em;
  padding-left: 3em;
}

.page-honbun .indent-09,
.page-toolbox .indent-09,
.page-drill .indent-09 {
  display: inline-block;
  text-indent: -0.9em;
  padding-left: 0.9em;
}

.page-honbun .indent-08,
.page-toolbox .indent-08,
.page-drill .indent-08 {
  display: inline-block;
  text-indent: -0.8em;
  padding-left: 0.8em;
}

.page-honbun .indent-07,
.page-toolbox .indent-07,
.page-drill .indent-07 {
  display: inline-block;
  text-indent: -0.7em;
  padding-left: 0.7em;
}

.page-honbun .indent-06,
.page-toolbox .indent-06,
.page-drill .indent-06 {
  display: inline-block;
  text-indent: -0.6em;
  padding-left: 0.6em;
}

.page-honbun .indent-05,
.page-toolbox .indent-05,
.page-drill .indent-05 {
  display: inline-block;
  text-indent: -0.5em;
  padding-left: 0.5em;
}

.page-honbun .indent-04,
.page-toolbox .indent-04,
.page-drill .indent-04 {
  display: inline-block;
  text-indent: -0.4em;
  padding-left: 0.4em;
}

.page-honbun .indent-03,
.page-toolbox .indent-03,
.page-drill .indent-03 {
  display: inline-block;
  text-indent: -0.3em;
  padding-left: 0.3em;
}

.page-honbun .indent-02,
.page-toolbox .indent-02,
.page-drill .indent-02 {
  display: inline-block;
  text-indent: -0.2em;
  padding-left: 0.2em;
}

.page-honbun .indent-01,
.page-toolbox .indent-01,
.page-drill .indent-01 {
  display: inline-block;
  text-indent: -0.1em;
  padding-left: 0.1em;
}

/* .page-honbun .width-95 {
  width: 95%;
}
.page-honbun .width-90 {
  width: 90%;
}
.page-honbun .width-85 {
  width: 85%;
}
.page-honbun .width-80 {
  width: 80%;
}
.page-honbun .width-75 {
  width: 75%;
}
.page-honbun .width-70 {
  width: 70%;
}
.page-honbun .width-65 {
  width: 65%;
}
.page-honbun .width-60 {
  width: 60%;
}
.page-honbun .width-55 {
  width: 55%;
}
.page-honbun .width-50 {
  width: 50%;
}
.page-honbun .width-45 {
  width: 45%;
}
.page-honbun .width-40 {
  width: 40%;
}
.page-honbun .width-35 {
  width: 35%;
}
.page-honbun .width-30 {
  width: 30%;
}
.page-honbun .width-25 {
  width: 25%;
}
.page-honbun .width-20 {
  width: 20%;
}
.page-honbun .width-15 {
  width: 15%;
}
.page-honbun .width-10 {
  width: 10%;
} */

.page-honbun .inline-block {
  display: inline-block;
}

.page-honbun .fll {
  float: left;
}

.page-honbun .flr {
  float: right;
}

.page-honbun .flex-row {
  display: flex;
  flex-direction: row;
}

.page-honbun div.use-exp {
  margin-bottom: 0.3em;
}

.page-honbun .use-exp-icon {
  display: inline-block;
  font-size: 0.8em;
  padding: 0.1em 0.6em;
  margin-right: 0.5em;
  border-radius: 0.4em;
  box-sizing: border-box;
}

.page-honbun .use-exp-icon.yellow {
  background-color: #fff3cb;
}

.page-honbun .use-exp-icon.pink {
  background-color: #fcdce2;
}

.page-honbun .use-exp-icon.green {
  background-color: #d6ebd4;
}

.page-honbun .use-exp-icon.gray {
  background-color: #c8d2e4;
}

.page-honbun .use-exp-icon.light-blue {
  background-color: #c7e2f5;
}

.page-honbun .dotted-slash::after {
  content: "=";
  font-weight: bold;
  color: #fff;
  position: absolute;
  margin-left: -0.5em;
  margin-top: -0.1em;
  display: inline-block;
  transform: scaleY(1.3);
}

.page-honbun .outline {
  border: #000 1px solid;
}

.index-controls {
  position: fixed;
  margin: 5px auto;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  right: 0;
  max-width: 900px;
  width: 100%;
  padding: 7px;
  background: #fff;
  border: 3px solid #c4c4c4;
  border-radius: var(--border-radius);
  box-shadow: #00000040 0 0 120px 0;
  font-size: 16px;
}

#point {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.page-toolbox {
  display: table;
  width: auto;
  margin: 0 auto;
  font-size: 2.1rem;
  line-height: 1.6;
}

@media (max-width: 767px) {
  .page-toolbox {
    display: block;
    max-width: 100%;
    width: auto;
    margin: 0;
  }
}

.page-toolbox .jp {
  font-size: 0.9em;
}

.toolbox-main {
  padding: 16px;
  /* px固定 */
}

.page-listen {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding: 16px;
  /* px固定 */
  max-width: calc(47rem + 32px);
  margin: 0 auto;
}

.listen-image-container {
  position: relative;
  width: 100%;
  max-width: 35rem;
  margin: 0 auto;
}

.listen-image {
  display: block;
  width: 100%;
  height: auto;
}

.page-drill {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-width: calc(45rem + 32px);
  margin: 0 auto;
  padding: 16px;
  /* px固定 */
}

.page-drill.honbun {
  max-width: initial;
}

.page-drill .read.playing {
  color: #ff4b00;
  /*再生時に文字の一部が取り残される事象の対処*/
  text-shadow: 0 0 1em rgba(0, 0, 0, 0);
}

.drill-image-container {
  position: relative;
  width: 100%;
}

.drill-image {
  display: block;
  width: 100%;
  height: auto;
}

.drill-image.first {
  opacity: 0.4;
}

.drill-image:active {
  opacity: 0.8;
}

.drill-card-counter {
  text-align: center;
  font-size: 1.4rem;
}

.tf-icon1 {
  color: #000;
  font-weight: bold;
  margin-left: -1rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.tf-icon1::after {
  content: "";
  position: relative;
  display: block;
  width: 1.6rem;
  height: 2.4rem;
  transform: rotate(45deg);
  box-shadow: 0.2rem 0.2rem 0.2rem rgb(0 0 0 / 20%);
  background-color: #fabe00;
  margin-top: -2.5rem;
  margin-left: -0.3rem;
  z-index: -1;
}

.tf-icon2 {
  color: #fff;
  font-weight: bold;
  margin-left: 1rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}

.tf-icon2::after {
  content: "";
  position: relative;
  display: block;
  width: 1.6rem;
  height: 2.4rem;
  transform: rotate(45deg);
  box-shadow: 0.2rem 0.2rem 0.2rem rgb(0 0 0 / 20%);
  background-color: #000;
  margin-top: -2.5rem;
  margin-left: -0.3rem;
  z-index: -1;
}

.fcindex-title {
  height: 120px;
  padding: 1rem;
  background: #f0f0f0;
  background-size: cover;
  font-size: 18px;
}

.fcindex-counter {
  text-align: right;
  padding: 0.5rem 1rem;
  margin-bottom: 0.5rem;
}

.fcindex-list {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-bottom: 228px;
}

.fcindex-list .lesson {
  margin-right: 8px;
  font-weight: bold;
  color: #2e7df6;
  /* 共通UI */
}

.fcindex-list .title {
  color: #000;
}

.fcindex-list .total {
  font-size: 13px;
  color: #6f6f6f;
}

.fcindex-list > li {
  border-bottom: 1px solid #c4c4c4;
}

.fcindex-list > li > a {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #000;
  text-decoration: none;
}

.fcindex-list > li:first-child > a {
  border-top: 0;
}

.fcindex-list > li.expandable > a {
  position: relative;
}

.fcindex-list > li > a::after {
  content: "";
  display: block;
  width: 63px;
  height: 63px;
  position: absolute;
  right: -11px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_icon.svg);
  background-size: 13px 7px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: rotate(-90deg);
}

/* CROWN English Communication I */
body.cc1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .fcindex-list > li > a::after {
  background-image: url(../images/accordion_icon_ve2.svg);
}

.fcindex-list > li.expandable > a::after {
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  margin: auto;
  background-image: url(../images/accordion_plus.svg);
  background-size: 24px 24px;
  background-position: center center;
  background-repeat: no-repeat;
  transform: initial;
}

/* CROWN English Communication I */
body.cc1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .fcindex-list > li.expandable > a::after {
  background-image: url(../images/accordion_plus_ve2.svg);
}

.fcindex-list > li.expandable.expanded > a::after,
.fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus.svg);
}

/* CROWN English Communication I */
body.cc1 .fcindex-list > li.expandable.expanded > a::after,
body.cc1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_cc1.svg);
}

/* MY WAY English Communication I */
body.mc1 .fcindex-list > li.expandable.expanded > a::after,
body.mc1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_mc1.svg);
}

/* VISTA English Communication I */
body.vc1 .fcindex-list > li.expandable.expanded > a::after,
body.vc1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_vc1.svg);
}

/* CROWN 論理表現 I */
body.ce1 .fcindex-list > li.expandable.expanded > a::after,
body.ce1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ce1.svg);
}

/* MY WAY 論理表現 I */
body.me1 .fcindex-list > li.expandable.expanded > a::after,
body.me1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_me1.svg);
}

/* VISTA 論理表現 I */
body.ve1 .fcindex-list > li.expandable.expanded > a::after,
body.ve1 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ve1.svg);
}

/* VISTA 論理表現 II */
body.ve2 .fcindex-list > li.expandable.expanded > a::after,
body.ve2 .fcindex-list > li.expandable.expanding > a::after {
  background-image: url(../images/accordion_minus_ve2.svg);
}

.fcindex-list > li.expandable.expanded > .expandable__headline,
.fcindex-list > li.expandable.expanding > .expandable__headline {
  border-bottom: 1px solid #c4c4c4;
}

.fcindex-list > li.expandable > .expandable__contents {
  overflow: hidden;
  height: 0;
}

.fcindex-list > li.expandable.expanding > .expandable__contents {
  transition: 0.3s height;
}

.expandable__headline .total {
  display: none;
}

.expandable__headline > input[type="checkbox"] {
  display: block;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 63px;
  cursor: pointer;
  opacity: 0;
}

.expandable__headline > input[type="checkbox"] + label {
  display: block;
  width: calc(100% - 40px);
  padding-right: 40px;
  padding-top: 21px;
  padding-bottom: 21px;
  position: relative;
}

.expandable__headline > input[type="checkbox"] + label::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -28px;
  border: 1px solid #6f6f6f;
}

.expandable__headline > input[type="checkbox"]:checked + label::after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  pointer-events: none;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: -28px;
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-position: -227px -11px;
  background-repeat: no-repeat;
}

.expandable__headline > input[type="checkbox"]:checked + label::after {
  opacity: 0.5;
}

.expandable__headline
  > input[type="checkbox"].all-checked:checked
  + label::after {
  opacity: 1;
}

.fcindex-sublist {
  margin: 0;
  padding: 0;
  list-style: none;
  padding-left: 40px;
}

.fcindex-sublist > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 50px;
  /* border-top: 1px solid #e0e0e0; */
  /* 2重にスタイルが当たっているので不要？ */
  cursor: pointer;
  /* QR */
}

.fcindex-sublist > li:first-child {
  border-top: 0;
}

.fcindex-sublist .lesson {
  margin-right: 0;
}

.fcindex-sublist .total {
  display: block;
  margin: auto;
  margin-right: 16px;
  min-width: 64px;
  text-align: right;
}

/*----------------------------------------------------------------
  Grammarコントロール（論表）
-----------------------------------------------------------------*/
.fcindex-controls {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 10px auto;
  max-width: calc(1000px - 20px);
  width: calc(100% - 20px);
  padding: 10px;
  background: #fff;
  border: 1px solid #c4c4c4;
  border-radius: 8px;
  box-shadow: #00000040 0 0 120px 0;
  font-size: 17px;
  /* px固定 */
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  .fcindex-controls {
    font-size: 15px;
  }
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  .fcindex-controls {
    bottom: env(safe-area-inset-bottom);
  }
}

.contents-with-navpanel + .fcindex-controls {
  bottom: 50px;
}

@supports (margin-bottom: env(safe-area-inset-bottom)) {
  .contents-with-navpanel + .fcindex-controls {
    bottom: calc(50px + env(safe-area-inset-bottom));
  }
}

.fcindex-controls.transition {
  transition: 0.25s all;
}

.fcindex-controls.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 0.5rem);
}

.fcindex-order {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fcindex-order__item {
  flex: 1 1;
  margin: 0 2.5px;
}

.fcindex-order__item:first-child {
  margin-left: 0;
}

.fcindex-order__item:last-child {
  margin-right: 0;
}

.fcindex-order-btn {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  color: #2e7df6;
  /* 共通UI */
  border: 1px solid #2e7df6;
  /* 共通UI */
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
}

.fcindex-order-btn:focus {
  outline: transparent;
}

.fcindex-order-btn {
  padding: 5px 0;
}

.fcindex-order-btn.en-jp,
.fcindex-order-btn.jp-en {
  padding: 0.5rem 1rem;
}

.fcindex-order-btn {
  position: relative;
}

.fcindex-order-btn.check.active::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(-2.625rem, 0);
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-position: -228px -12px;
  background-repeat: no-repeat;
}

.fcindex-order-btn.border.active {
  border: 1px solid transparent;
}

.fcindex-order-btn.border.active::after,
.fcindex-order-btn.border:active::after {
  content: "";
  display: block;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -1px;
  right: 0;
  bottom: 0;
  border: 2px solid #2e7df6;
  /* 共通UI */
  border-radius: 4px;
}

.fcindex-order-btn.border:active::after {
  box-shadow: 0 0 0 4px rgba(46, 125, 246, 0.3);
  /* 共通UI 明るく*/
}

.fcindex-order-btn .separator {
  margin: 5px 2px;
  border-bottom: 1px dashed #2e7df6;
  /* 共通UI */
}

.fcindex-order-btn .upper,
.fcindex-order-btn .lower {
  font-size: 13px;
  /* px固定 */
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  .fcindex-order-btn .upper,
  .fcindex-order-btn .lower {
    font-size: 11px;
  }
}

.fcindex-order-btn .blank {
  display: inline-block;
  width: 52px;
  height: 14px;
  border: 1px solid #2e7df6;
  /* 共通UI */
  vertical-align: text-bottom;
}

/* 横幅がiPad（768px）未満の場合 */
@media (max-width: 767px) {
  .fcindex-order-btn .blank {
    width: 44px;
    height: 12px;
  }
}

.fcindex-random {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 12.5px;
}

.fcindex-random > label {
  display: inline-flex;
  align-items: center;
}

.fcindex-random__checkbox {
  display: none;
}

.fcindex-random__checkbox + i {
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  position: relative;
}

.fcindex-random__checkbox + i::before,
.fcindex-random__checkbox + i::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid #6f6f6f;
  margin-right: 0.25rem;
}

.fcindex-random__checkbox:checked + i::after {
  background-image: url(../images/control.svg);
  background-size: 320px 80px;
  background-position: -228px -12px;
  background-repeat: no-repeat;
}

.fcindex-buttons {
  display: flex;
}

.fcindex-close-btn,
.fcindex-start-btn {
  padding: 7.5px 10px;
  border-radius: 4px;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.fcindex-close-btn {
  color: #fff;
  background-color: #6f6f6f;
  margin-right: 5px;
}

.fcindex-close-btn:active {
  background-color: #5c5c5c;
  box-shadow: 0 0 0 4px #c2c2c2;
}

.fcindex-start-btn {
  color: #fff;
  background-color: #2e7df6;
  /* 共通UI */
  flex-grow: 1;
}

.fcindex-start-btn:active {
  background-color: #2970dd;
  /* 共通UI 暗く*/
  box-shadow: 0 0 0 4px rgba(46, 125, 246, 0.3);
  /* 共通UI 明るく*/
}

.fcindex-start-btn {
  position: relative;
}

.fcindex-start-btn::after {
  content: "";
  display: block;
  width: 22px;
  height: 36px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  background-image: url(../images/chevron-right_white.svg);
  background-position: center;
  background-size: 10px;
  background-repeat: no-repeat;
}

.page-fwdetail,
.page-fgdetail {
  height: 100%;
  max-width: 54rem;
  margin: 0 auto;
}

/* .fcdetail-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 84px;
  padding: 0 2rem;
  border-bottom: 2px solid #c4c4c4;
} */

/* .fcdetail-header__lesson {
  color: #2e7df6;
  font-weight: bold;
  margin-bottom: 0.25rem;
} */

/* .fcdetail-header__title {
  font-size: 15.5px;
} */

.fcdetail-main,
.fcdetail-result {
  /* height: calc(100% - 84px); */
  height: calc(100% - 4px);
}

.fcdetail-main {
  position: relative;
  padding: 0 20px;
  /* px固定 */
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.fcdetail-main-progress {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 0;
  height: 0.2rem;
  background-color: #6f6f6f;
  transition: width 0.25s linear;
  z-index: 2;
}

.fcdetail-main-counter {
  text-align: right;
  position: absolute;
  right: 2.2rem;
  top: 0;
  color: #6f6f6f;
  z-index: 1;
  background-color: #fff;
  padding: 0 0.4rem;
}

.fcdetail-main-frame {
  height: 60%;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  padding: 0 1rem;
  border: 1px solid #c4c4c4;
  box-shadow: 0px 0.25rem 0.5rem #00000040;
}

.fcdetail-main-frame__guide {
  width: 7.5rem;
  height: 7.5rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 4px;
  background: #6f6f6f;
  opacity: 0;
}

.fcdetail-main-frame__guide-icon {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.75rem;
}

.fcdetail-main-frame__guide.show {
  opacity: 0.8;
  transition: 0.3s all;
}

.fcdetail-main-frame__guide.show .fcdetail-main-frame__guide-icon {
  animation: finger 0.5s;
  animation-delay: 1.25s;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

.page-fwdetail .fcdetail-main-frame {
  justify-content: center;
  align-items: center;
}

.page-fwdetail .fcdetail-main-frame__separator {
  border-bottom: 1px dashed transparent;
  margin: 0.5rem 1rem;
}

.fcdetail-main-frame.en-jp .fcdetail-main-frame__question {
  font-size: calc(100vw * 37.5 / 375);
}

@media (min-width: 375px) {
  .fcdetail-main-frame.en-jp .fcdetail-main-frame__question {
    font-size: 37.5px;
  }
}

.fcdetail-main-frame.en-jp .fcdetail-main-frame__answer {
  font-size: calc(100vw * 23.25 / 375);
}

@media (min-width: 375px) {
  .fcdetail-main-frame.en-jp .fcdetail-main-frame__answer {
    font-size: 23.25px;
  }
}

.fcdetail-main-frame.jp-en .fcdetail-main-frame__question {
  font-size: calc(100vw * 26.25 / 375);
}

@media (min-width: 375px) {
  .fcdetail-main-frame.jp-en .fcdetail-main-frame__question {
    font-size: 26.25px;
  }
}

.fcdetail-main-frame.jp-en .fcdetail-main-frame__answer {
  font-size: calc(100vw * 28.125 / 375);
}

@media (min-width: 375px) {
  .fcdetail-main-frame.jp-en .fcdetail-main-frame__answer {
    font-size: 28.125px;
  }
}

.page-fwdetail .fcdetail-main-frame:not(.opened) .fcdetail-main-frame__answer {
  visibility: hidden;
}

.page-fgdetail .fcdetail-main-frame {
  justify-content: space-evenly;
}

.page-fgdetail .fcdetail-main-frame__separator {
  border-bottom: 1px dashed #c4c4c4;
}

.page-fgdetail .fcdetail-main-frame__question,
.page-fgdetail .fcdetail-main-frame__answer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.page-fgdetail .fcdetail-main-frame__question {
  font-size: calc(100vw * 20 / 375);
}

@media (min-width: 375px) {
  .page-fgdetail .fcdetail-main-frame__question {
    font-size: 2rem;
  }
}

.page-fgdetail .fcdetail-main-frame__answer {
  font-size: calc(100vw * 15 / 375);
}

@media (min-width: 375px) {
  .page-fgdetail .fcdetail-main-frame__answer {
    font-size: 1.5rem;
  }
}

@media (max-height: 435px) {
  .page-fgdetail .fcdetail-main-frame__question .qr-gcc-font-small {
    font-size: 1.6rem;
  }
}

.fcdetail-main-frame.mask1:not(.opened) .fcdetail-main-frame__answer {
  visibility: hidden;
}

body.debug-mode
  .fcdetail-main-frame.mask1:not(.opened)
  .fcdetail-main-frame__answer {
  visibility: visible;
}

.fcdetail-main-frame.mask2:not(.opened) .blank {
  color: transparent;
}

body.debug-mode .fcdetail-main-frame.mask2:not(.opened) .blank {
  color: #000;
}

.fcdetail-main-frame.mask3:not(.opened) .fcdetail-main-frame__question {
  visibility: hidden;
}

body.debug-mode
  .fcdetail-main-frame.mask3:not(.opened)
  .fcdetail-main-frame__question {
  visibility: visible;
}

.fcdetail-main-frame.active,
.fcdetail-main-frame:active {
  background-color: #f4f4f4;
}

@keyframes finger {
  from {
    transform: translateY(0);
  }

  40% {
    transform: translateY(0.5rem);
  }

  60% {
    transform: translateY(0.5rem);
  }

  to {
    transform: translateY(0);
  }
}

.fcdetail-main-frame .blue-font {
  color: #0099cc;
}

.fcdetail-main-frame .g-red-font {
  color: #ff4b00;
  /*再生時に文字の一部が取り残される事象の対処*/
  text-shadow: 0 0 1em rgba(0, 0, 0, 0);
}

.fcdetail-main-controls {
  display: flex;
  margin-bottom: -1rem;
}

.fcdetail-main-controls__item {
  flex: 1;
  margin: 0 0.5rem;
}

.fcdetail-main-controls__item:first-child {
  margin-left: 0;
}

.fcdetail-main-controls__item:last-child {
  margin-right: 0;
}

.fcdetail-main-retry-btn,
.fcdetail-main-complete-btn {
  display: block;
  height: 54px;
  line-height: 56px;
  margin-bottom: 0.5rem;
  font-size: 18px;
  /* px固定 */
  letter-spacing: 0.05em;
  font-family: Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    sans-serif;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

.disabled.fcdetail-main-retry-btn,
.disabled.fcdetail-main-complete-btn {
  opacity: 0.4;
}

.fcdetail-main-retry-btn {
  color: #fff;
  background: #ed5ea6;
}

.fcdetail-main-retry-btn:not(.disabled).active,
.fcdetail-main-retry-btn:not(.disabled):active {
  background: #e93c93;
  box-shadow: 0 0 0 4px #f7bad9;
}

.fcdetail-main-complete-btn {
  color: #fff;
  background: #17cf73;
}

.fcdetail-main-complete-btn:not(.disabled).active,
.fcdetail-main-complete-btn:not(.disabled):active {
  background: #13ad60;
  box-shadow: 0 0 0 4px #98f4c6;
}

.fcdetail-main-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fcdetail-main-info__icon {
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 0.25rem;
}

.fcdetail-main-info__retry,
.fcdetail-main-info__complete {
  display: block;
  height: 24px;
  line-height: 26px;
  font-size: 20px;
  /* px固定 */
  color: #6f6f6f;
  text-align: center;
}

.fcdetail-main-frame {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}

.fcdetail-main-frame.complete {
  background-image: url(../images/frame-complete.png);
}

.fcdetail-main-frame.retry {
  background-image: url(../images/frame-retry.png);
}

.fcdetail-main-frame.transition {
  transition: 0.25s background-size;
}

.fcdetail-main-frame.complete,
.fcdetail-main-frame.retry {
  background-size: auto 75%;
}

.fcdetail-main-frame {
  position: relative;
}

.fcdetail-main-frame__index {
  display: none;
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  color: #6f6f6f;
  font-size: 24px;
}

.fcdetail-main-frame__progress {
  position: absolute;
  bottom: 0;
  background: #c4c4c4;
  height: 0.1rem;
  width: 0;
  visibility: hidden;
}

.fcdetail-main-frame__progress.transition {
  transition: all 0.5s linear;
}

.fcdetail-main-frame__progress.full {
  width: 100%;
}

.fcdetail-result {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  text-align: center;
  max-width: 540px;
  /* px固定 */
  margin: 0 auto;
  padding: 10px 20px;
}

.fcdetail-result-bg {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/frame-complete.png);
  background-size: 45vh;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 1;
  transition: 0.25s opacity;
  z-index: -1;
}

.fcdetail-result-bg.hidden {
  opacity: 0;
}

.fcdetail-result-title {
  font-size: 3.6rem;
}

.fcdetail-result-counter {
  color: #6f6f6f;
}

.fcdetail-result-counter__number {
  font-size: 1.25em;
}

.fcdetail-result-restart-btn,
.fcdetail-result-back-btn {
  display: block;
  font-family: Helvetica, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
    sans-serif;
  font-size: 16px;
  /* px固定 */
  margin: 10px 0;
  color: #fff;
  background: #2e7df6;
  /* 共通UI */
  border-radius: 4px;
  padding: 7.5px 0;
  text-align: center;
  text-decoration: none;
}

.fcdetail-result-restart-btn:active,
.fcdetail-result-back-btn:active {
  background: #2970dd;
  /* 共通UI 暗く*/
  box-shadow: 0 0 0 4px rgba(46, 125, 246, 0.3);
  /* 共通UI 明るく*/
}

.fcdetail-result-title .letter {
  display: inline-block;
}

.fcdetail-result-title .letter.done {
  animation: bounce 150ms;
  animation-direction: alternate-reverse;
  animation-timing-function: cubic-bezier(0.5, 0.05, 1, 0.5);
  animation-iteration-count: 2;
  transform: translate3d(0, 0, 0);
}

@keyframes bounce {
  from {
    transform: translate3d(0, -15px, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

.fcdetail-result-counter,
.fcdetail-result-controls {
  opacity: 1;
}

.fcdetail-result-counter.transition,
.fcdetail-result-controls.transition {
  transition: 0.25s opacity;
}

.fcdetail-result-counter.hidden,
.fcdetail-result-controls.hidden {
  opacity: 0;
}

.fcdetail-result-counter.hidden a,
.fcdetail-result-controls.hidden a {
  pointer-events: none;
}

.fcdetail-main-frame.mask2 .blank {
  display: inline-block;
  position: relative;
  text-align: center;
}

.fcdetail-main-frame.mask2 .blank::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.125rem;
  background-color: #000;
}

/* QR：長さ調整 */
.fcdetail-main-frame.mask2 .blank,
.fcdetail-main-frame.mask2 .blank.short {
  width: 3em;
}

.fcdetail-main-frame.mask2 .blank.medium {
  width: 4.5em;
}

.fcdetail-main-frame.mask2 .blank.long {
  width: 7em;
}

.fcdetail-main-frame.mask2 .blank.auto {
  width: inherit;
  padding-left: 0.25em;
  padding-right: 0.25em;
}

.fcdetail-main-frame .half-line {
  display: block;
  font-size: 0.5em;
}

.mask-bold,
.bold,
.Bold {
  font-weight: bold;
}

.italic,
.Italic {
  font-style: italic;
}

/* イタリックのoverflow:hidden;時の文字切れ対応 */
.italic-pr025 {
  font-style: italic;
  padding-right: 0.25em;
}

.role-mask.mask {
  border-bottom: 1px solid #eee888;
}

.underline-number,
.Underline-number {
  position: relative;
  top: 1.2rem;
  left: 0.2rem;
  font-size: 1.4rem;
  color: #000;
}

.notes-number {
  position: relative;
  top: -1.4rem;
  font-size: 1.4rem;
  color: #000;
}

.orange-border {
  border-color: #ed6c01 !important;
}

.page-honbun.expressions div.orange-border::before {
  border-top: #ed6c01 solid 20px !important;
}

.yellow-border {
  border-color: #f5a100 !important;
}

.page-honbun.expressions div.yellow-border::before {
  border-top: #f5a100 solid 20px !important;
}

.blue-border {
  border-color: #00aedf !important;
}

.black-border {
  border-color: #000 !important;
}

.red-border {
  border-color: #ff4b00 !important;
}

/*本文文字色設定 .hidden-maskを付けた場合は
マスク時に文字色を適用しない*/

.underline,
.Underline {
  border-bottom: 1px solid black;
}

/* GCC表示タイプ2では下線非表示*/
.fcdetail-main-frame.mask2 .underline,
.fcdetail-main-frame.mask2 .Underline {
  border-bottom: none;
}

:not(.mask) > .orange-font.hidden-mask,
.orange-font:not(.hidden-mask) {
  color: #ed6c01 !important;
}

.read:not(.playing) :not(.mask) > .red-font.hidden-mask,
.read:not(.playing) .red-font:not(.hidden-mask) {
  color: #ff4b00 !important;
}

:not(.mask) > .green-font.hidden-mask,
.green-font:not(.hidden-mask) {
  color: #6dba43 !important;
}

:not(.mask) > .black-font.hidden-mask,
.black-font:not(.hidden-mask) {
  color: #000 !important;
}

body.vista :not(.mask) > .green-font.hidden-mask,
body.vista .green-font:not(.hidden-mask) {
  color: #78bc28 !important;
}

:not(.mask) > .purple-font.hidden-mask,
.purple-font:not(.hidden-mask) {
  color: #a675b0 !important;
}

:not(.mask) > .pink-background {
  background-color: #f9d3e3;
}

.threeleader {
  display: inline-block;
  transform: translateY(-20%);
  text-indent: 0;
}

.nobr {
  white-space: nowrap;
  word-break: keep-all;
}

.main-movie-contents {
  width: 100%;
  height: auto;
}

.main-movie-contents .page-movie {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

.main-movie-contents .movie {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
  /* ※vimeoの.vp-centerがheight: calc(56.25vw); */
  overflow: hidden;
}

.main-movie-contents .movie.movie-nc28-size {
  padding-bottom: 53.54%;
}

.main-movie-contents .movie__frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 65vh;
  /* 端末横向きを想定 */
}

.movie-sample {
  text-align: center;
  margin: 16px;
  /* px固定 */
}

.movie-sample img {
  max-width: 100%;
}

span .yaku-small,
span.yaku-small {
  letter-spacing: -0.1em;
}

::-webkit-full-page-media,
:future,
:root span .yaku-small,
::-webkit-full-page-media,
:future,
:root span span.yaku-small {
  letter-spacing: 0.07em;
}

.Italic-mask-adjust.Italic-mask-adjust-mr {
  margin-right: -0.04em;
}

.Italic-mask-adjust .yaku-small {
  letter-spacing: 0;
}

/*----------------------------------------------------------------
  ポップアップ（著作権について）
-----------------------------------------------------------------*/
#popup_content {
  display: none;
  z-index: 10000;
  background-color: #fff;
  max-width: 980px;
  width: 90%;
  height: 90%;
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 10px;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
}

#pop_box {
  width: 100%;
  max-height: 85%;
  overflow-y: scroll;
  -ms-overflow-style: none;
}

#pop_box::-webkit-scrollbar {
  display: none;
}

#pop_header {
  text-align: right;
}

#pop_close {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 50%;
  margin-top: 0.3rem;
  margin-right: 0.3rem;
  font-size: 1.2rem;
  background-color: #323232;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.pop_title {
  border-bottom: 1px solid #888888;
  font-weight: bold;
}

.pop_title,
.pop_text {
  margin: 5% 1.5rem;
}

#pop_footer {
  margin: 1rem 0;
}

#modal {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 100%;
}

.dummy-content {
  line-height: 0;
  visibility: hidden;
  transform: scaleY(0);
}

.letter-space2-99 {
  letter-spacing: -0.01em;
}

.letter-space2-98 {
  letter-spacing: -0.02em;
}

.letter-space2-97 {
  letter-spacing: -0.03em;
}

.letter-space2-96 {
  letter-spacing: -0.04em;
}

.letter-space2-95 {
  letter-spacing: -0.05em;
}

.letter-space2-94 {
  letter-spacing: -0.06em;
}

.word-space2-99 {
  word-spacing: -0.01em;
}

.word-space2-98 {
  word-spacing: -0.02em;
}

.word-space2-97 {
  word-spacing: -0.03em;
}

.word-space2-96 {
  word-spacing: -0.04em;
}

.word-space2-95 {
  word-spacing: -0.05em;
}

.word-space2-94 {
  word-spacing: -0.06em;
}

.word-space2-93 {
  word-spacing: -0.07em;
}

.word-space2-92 {
  word-spacing: -0.08em;
}

.word-space2-91 {
  word-spacing: -0.09em;
}

.word-space2-90 {
  word-spacing: -0.1em;
}

.align-center {
  text-align: center;
  display: inline-block;
  width: 100%;
}

#listen .dashed-border {
  border-bottom: dashed 0.1em black;
  padding-top: 0.1em;
  margin-bottom: 0.2em;
}

/* Chromeで画面が白くなる不具合対策 */
#contents.on-force-redraw.force-redraw .read {
  text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0);
}

#contents.on-force-redraw:not(.force-redraw) .read {
  text-shadow: none;
}

/*----------------------------------------------------------------
  発音トレーニングガイドモーダル
-----------------------------------------------------------------*/
.modal-dialog {
  max-width: 900px;
}

@media screen and (min-width: 576px) and (max-width: 1000px) {
  .modal-dialog {
    margin-top: 20px;
    margin-right: calc(20px + env(safe-area-inset-right));
    margin-bottom: 20px;
    margin-left: calc(20px + env(safe-area-inset-left));
  }
}

.modal-content {
  background-color: #fff;
  border-radius: var(--modal-border-radius);
}

.modal-guide-title {
  margin-top: 20px;
  text-align: center;
}

.sentence-check-guide {
  font-size: 2em;
}

@media (max-width: 536px) {
  .guide-sentence-wrap-first {
    display: block;
  }

  .guide-sentence-wrap-second {
    display: block;
  }
}

@media (max-width: 337px) {
  .guide-sentence-wrap-first {
    display: inline;
  }

  .guide-sentence-wrap-second {
    display: inline;
  }
}

.header-title {
  display: block;
  font-size: 1.5rem;
}

.home-icon {
  position: absolute; /* アイコンを絶対位置に設定 */
  top: 10px; /* 上からの距離 */
  right: 8px; /* 右からの距離 */
  color: #fff; /* アイコンの色 */
  cursor: pointer;
  width: 2rem; /* アイコンのサイズ */
  height: 2rem; /* アイコンのサイズ */
  background-image: url("../images/house.svg");
  background-size: contain; /* アイコンを要素のサイズに合わせてリサイズ */
  background-repeat: no-repeat; /* アイコンを繰り返さない */
  background-position: center; /* アイコンを中央に配置 */
  vertical-align: middle; /* テキストの高さに合わせる */
  cursor: pointer; /* アイコンをクリック可能にする */
}

.home-icon:hover {
  color: #fff; /* ホバー時も色を白に保つ */
  text-decoration: none; /* ホバー時の下線を削除 */
}