@charset "UTF-8";

/* --------------------------------------------------------------
Foundation層
- リセットCSSやベーススタイル
-------------------------------------------------------------- */
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
:where(html) {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

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

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

/* Vertical rhythm */
/* ============================================ */
:where(p, table, blockquote, address, pre, iframe, form, figure, dl) {
  margin: 0;
}

/* Headings */
/* ============================================ */
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-weight: inherit;
  font-size: inherit;
}

/* Lists (enumeration) */
/* ============================================ */
:where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
:where(dt) {
  font-weight: bold;
}

:where(dd) {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
:where(hr) {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  margin: 0;
  clear: both;
  overflow: visible; /* 2 */
  border-top-width: 1px;
  color: inherit;
}

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

:where(address) {
  font-style: inherit;
}

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

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

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(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.
 */
:where(code, kbd, samp) {
  font-size: inherit; /* 2 */
  font-family: monospace, monospace; /* 1 */
}

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

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

:where(sub) {
  bottom: -0.25em;
}

:where(sup) {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
:where(svg, img, embed, object, iframe) {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
:where(button, input, optgroup, select, textarea) {
  -webkit-appearance: none; /* 1 */
  -moz-appearance: none;
  appearance: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  vertical-align: middle;
}

/**
 * Correct cursors for clickable elements.
 */
:where(button, [type=button], [type=reset], [type=submit]) {
  cursor: pointer;
}

:where(button:disabled, [type=button]:disabled, [type=reset]:disabled, [type=submit]:disabled) {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:where(:-moz-focusring) {
  outline: auto;
}

:where(select:disabled) {
  opacity: inherit;
}

/**
 * Remove padding
 */
:where(option) {
  padding: 0;
}

/**
 * Reset to invisible
 */
:where(fieldset) {
  min-width: 0;
  margin: 0;
  padding: 0;
}

:where(legend) {
  padding: 0;
}

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

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

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

/**
 * Correct the outline style in Safari.
 */
:where([type=search]) {
  outline-offset: -2px; /* 1 */
}

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
:where(::-webkit-file-upload-button) {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
:where([type=number]) {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
:where(label[for]) {
  cursor: pointer;
}

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

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

/*
 * Remove outline for editable content.
 */
:where([contenteditable]:focus) {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
:where(table) {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

:where(caption) {
  text-align: left;
}

:where(td, th) {
  padding: 0;
  vertical-align: top;
}

:where(th) {
  font-weight: normal;
  text-align: left;
}

/*
フォント指定
-------------------------------------------------------------- */
/* --------------------------------------------------------------
サイト内で使い回す色やline-heightなどをCSS変数にここで設定
-------------------------------------------------------------- */
:root {
  --c-base: #000;
  --c-black: #222;
  --c-lightblue: #BDEDFF;
  --c-blue: #35B5E5;
  --c-lightpink: #FFDFEA;
  --c-pink: #FF689B;
  --c-headpink: #FE689B;
  --c-white: #fff;
  --font-base: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  --line-gray: #A3A2A3;
  --line-height-primary: 2.0;
  --line-height-list: 1.4;
  --link-blue: #0B98E8;
  --title-pink: #FF82AC;
  --mokuji-line-color: #222;
  --clmp0912: clamp(0.9rem, 0.72rem + 0.5vw, 1.2rem);
  --clmp1214: clamp(1.2rem, 1.08rem + 0.33vw, 1.4rem);
  --clmp1215: clamp(1.2rem, 1.02rem + 0.5vw, 1.5rem);
  --clmp1216: clamp(1.2rem, 0.96rem + 0.67vw, 1.6rem);
  --clmp1218: clamp(1.2rem, 0.84rem + 1vw, 1.8rem);
  --clmp1315: clamp(1.3rem, 1.18rem + 0.33vw, 1.5rem);
  --clmp1415: clamp(1.4rem, 1.34rem + 0.17vw, 1.5rem);
  --clmp1416: clamp(1.4rem, 1.28rem + 0.33vw, 1.6rem);
  --clmp1516: clamp(1.5rem, 1.44rem + 0.17vw, 1.6rem);
  --clmp1518: clamp(1.5rem, 1.32rem + 0.5vw, 1.8rem);
  --clmp1520: clamp(1.5rem, 1.2rem + 0.83vw, 2rem);
  --clmp1618: clamp(1.6rem, 1.48rem + 0.33vw, 1.8rem);
  --clmp1724: clamp(1.7rem, 1.28rem + 1.17vw, 2.4rem);
  --clmp1820: clamp(1.8rem, 1.68rem + 0.33vw, 2rem);
  --clmp1824: clamp(1.8rem, 1.44rem + 1vw, 2.4rem);
  --clmp1828: clamp(1.8rem, 1.2rem + 1.67vw, 2.8rem);
  --clmp2024: clamp(2rem, 1.76rem + 0.67vw, 2.4rem);
  --clmp2028: clamp(2rem, 1.52rem + 1.33vw, 2.8rem);
  --clmp2030: clamp(2rem, 1.4rem + 1.67vw, 3rem);
  --clmp2432: clamp(2.4rem, 1.92rem + 1.33vw, 3.2rem);
  --sp-width: 94.444%;
  --hover-op: 0.6;
  --transition-time: all 0.3s;
  --transition-btn: 0.3s ease-in-out;
  --transition-accordion: 0.3s ease;
}

/*
指定した変数を各プロパティに設定
また、リセットCSSでリセットできなかったものをここで処理
-------------------------------------------------------------- */
* {
	min-height: 0vw;
}
html {
	font-size: 10px;
}
body {
  background: var(--c-white);
  color: var(--c-base);
  font-family: var(--font-base);
  font-size: 62.5%;
  line-height: 1;
}
:where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  padding: 0;
  font-weight: inherit;
  font-size: inherit;
}
:where(p) {
  font-size: 1.5rem;
  line-height: var(--line-height-primary);
  text-align: justify;
}
:where(p + p) {
  margin-top: 32px;
}
:where(a, button) {
  color: inherit;
}
:where(button) {
  border: none;
  background-color: transparent;
  cursor: pointer;
}
:where(img, picture, svg) {
  width: 100%;
  max-width: 100%;
  height: 100%;
}
:where(img) {
  -o-object-fit: cover;
  object-fit: cover;
}
:where(input, textarea, select) {
  border: none;
  border-radius: 0; /* iOS対策 */
  background-color: transparent;
  color: inherit;
}

/* --------------------------------------------------------------
Layout
-------------------------------------------------------------- */
.l-headbar {
  background: var(--c-pink);
  padding: 4px 0;
  height: 20px;
}
.l-headbar__lead {
  margin: 0 auto;
  max-width: 1000px;
}
.l-headbar__text {
  color: var(--c-white);
  font-size: var(--clmp0912);
  font-weight: 600;
}

/*
ヘッダー
-------------------------------------------------------------- */
.l-header {
  background: var(--c-lightblue);
}
.l-header__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1000px;
  padding: 24px;
}
.l-header__nav {
  background: var(--c-white);
  border-radius: 24px;
  padding: 12px 30px 13px;
  width: 585px;
}
.l-header__nav ul {
  display: flex;
  justify-content: space-between;
}
.l-header__nav ul li {
  transition: color .2s cubic-bezier(.11,.76,0,1);
}
.l-header__nav ul li a {
  position: relative;
  font-size: clamp(1.3rem, 0.845rem + 0.6vw, 1.5rem);
  font-weight: 600;
}
.l-header__nav ul li a::after {
  content:"";
  display:block;
  position:absolute;
  top: calc(50% + 18px);
  left:0;
  width:0;
  height:3px;
  background-color: var(--c-pink);
  -webkit-transition:width 0.2s ease;
  -moz-transition:width 0.2s ease;
  -o-transition:width 0.2s ease;
  transition:width 0.2s ease;
}
.l-header__nav ul li a:hover {
  color: var(--c-pink);
}
.l-header__nav ul li a:hover::after {
  width: 100%;
}

/*
SPメニュー
-------------------------------------------------------------- */
/* nav */
/* ============================================ */
.l-header__button {
  border: 1px solid var(--c-pink);
  border-radius: 50%;
  background: var(--c-white);
  appearance: none;
  cursor: pointer;
  display: none;
  outline: none;
  position: fixed;
  right: 10px;
  top: 28px;
  height: 60px;
  width: 60px;
  z-index: 200;
  /* transition: all .2s ease 0s; */
}
.l-header__buttonLine {
  display: block;
  position: relative;
  height: 60px;
  width: 60px;
}
.l-header__buttonLine span,
.l-header__buttonLine::before,
.l-header__buttonLine::after {
  display: block;
  position: absolute;
  left: calc(50% - 1px);
  top: calc(50% - 2px);
  transform: translateX(-50%);
  background-color: var(--c-pink);
  border-radius: 2px;
  width: 30px;
  height: 2px;
  color: var(--c-pink);
  overflow: hidden;
  opacity: 1;
  transform-origin: center center;
  transition: all .2s ease 0s;
}
.l-header__buttonLine::before {
  content: "";
  transform: translate(-50%, -9px);
}
.l-header__buttonLine::after {
  content: "";
  transform: translate(-50%, 9px);
}
/* ハンバーガーメニュー三本線オープン時 */
.l-header__button[aria-expanded="true"] .l-header__buttonLine span {
  opacity: 0;
}
.l-header__button[aria-expanded="true"] .l-header__buttonLine::before {
  transform: translate(-50%, 0) rotate(45deg);
}
.l-header__button[aria-expanded="true"] .l-header__buttonLine::after {
  transform: translate(-50%, 0) rotate(135deg);
}
.modal-container {
  background-color: var(--c-lightblue);
  position: fixed;
  top: 0;
  z-index: 20;
  height: 100%;
  right: -100%;
  width: 100%;
  /* transition: right .2s ease-in-out; */
}
.modal-container[aria-hidden="false"] {
  /* overflow-y: scroll; */
  overflow-y: auto;
  right: 0;
  animation: fadeInMenu 0.3s cubic-bezier(0, 0, 0.2, 1);
  /* transition: right .2s ease-in-out; */
}
@keyframes fadeInMenu {
  from { opacity: 0; }
  to { opacity: 1; }
}
#l-header__spmenuContent {
  margin: 23px auto;
  width: 88.889%;
}
#l-header__spmenuContent picture {
  display: block;
  width: 31.25%;
  max-width: 269px;
}
#l-header__spmenuContent ul {
  margin-top: 30px;
}
#l-header__spmenuContent ul li {
  text-align: center;
  margin-bottom: 15px;
}
#l-header__spmenuContent ul li a {
  border-radius: 18.5px;
  background: #fff;
  display: block;
  padding: 13px;
  font-size: 1.4rem;
  font-weight: 600;
}

/* --------------------------------------------------------------
共通
-------------------------------------------------------------- */
.l-inner {
  margin: 0 auto;
  max-width: 1000px;
}
.l-inner--min {
  margin: 0 auto;
  max-width: 800px;
}
.l-section {
  padding: 105px 0;
}
.u-ib {
  display: inline-block;
}

/* --------------------------------------------------------------
フッター
-------------------------------------------------------------- */
.l-footer {
  background: var(--c-pink);
  padding-bottom: 10px;
}
.l-footer__inner {
  margin: 0 auto;
  max-width: 800px;
}
.l-footer__upperGroup {
  border-bottom: 1px solid var(--c-white);
  padding: 36px 0 16px;
}
.l-footer__upperGroup ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.l-footer__upperGroup ul li {
  white-space: nowrap;
  margin-bottom: 20px;
}
.l-footer__upperGroup ul li:nth-child(3n + 1) {
  width: 260px;
}
.l-footer__upperGroup ul li:nth-child(3n + 2) {
  width: 240px;
}
.l-footer__upperGroup li a {
  color: var(--c-white);
  font-size: 1.4rem;
  font-weight: 600;
}
/*
.l-footer__upperGroup ul:after {
    content: "";
    display: block;
    width: 230px;
    height: 0;
}
*/
.l-footer__lowerGroup {
  padding: 36px 0;
}
.l-footer__lowerGroup ul {
  display: flex;
  justify-content: space-between;
}
.l-footer__lowerGroup ul li {
  white-space: nowrap;
}
.l-footer__lowerGroup ul li a {
  color: var(--c-white);
  font-size: 1.4rem;
  font-weight: 600;
}
.l-footer ul li a:hover {
  border-bottom: 1px solid #fff;
}
.l-footer__copyright {
  display: block;
  color: var(--c-white);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}

/* --------------------------------------------------------------
TOPページ
-------------------------------------------------------------- */
/*
共通コンポーネント
-------------------------------------------------------------- */
.c-breadcrumb {
  margin-top: 20px;
}
.c-breadcrumb__list {
  font-size: var(--clmp1214);
  display: flex;
  align-items: center;
  margin: 0 auto 72px;
  max-width: 1000px;
  padding-left: 25px;
}
.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.c-breadcrumb__item:not(:last-of-type)::after {
  display: inline-block;
  content: "";
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_breadcrumb.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 11px;
  width: 5px;
  margin: 0 12px;
}
.c-breadcrumb__item > a {
  color: var(--c-base);
  border-bottom: 1px solid var(--c-base);
  transition: var(--transition-time);
}
.c-breadcrumb__item > a:hover {
  border-bottom: 1px solid var(--c-white);
  opacity: var(--hover-op);
}
.c-caption__circle {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.c-caption__circle::before {
  position: absolute;
  display: inline-block;
  content: "";
  background: var(--title-pink);
  border-radius: 50%;
  height: 50px;
  width: 50px;
  z-index: -1;
}
.c-caption__circle span {
  display: block;
  margin-left: 13px;
  color: var(--c-base);
  font-size: var(--clmp2030);
  font-weight: 600;
}
.c-mainImg {
  margin: 0 auto;
  max-width: 800px;
}
.c-sectionImg {
  margin: 0 auto;
  max-width: 800px;
}
.c-sectionImgWide {
  margin: 0 auto;
  max-width: 1000px;
}
.c-mainSpeech {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.c-mainSpeech picture {
  flex-shrink: 0;
  display: block;
  width: 127px;
  margin-right: 23px;
}
.c-mainSpeech__inner {
  position: relative;
  border: 3px solid var(--c-pink);
  border-radius: 10px;
  padding: 20px;
  background: var(--c-white);
}
.c-mainSpeech__inner::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -17px;
  display: inline-block;
  content: "";
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_01.svg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 17px;
  width: 17px;
}
.c-caption__box {
  border: 3px solid var(--c-base);
  border-radius: 5px;
  background: var(--c-white);
  padding: 20px;
  width: 99%;
  margin-bottom: 70px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  box-shadow: 10px 10px 0 -3px var(--c-pink), 10px 10px 0 0 var(--c-base);
}
.c-caption__box span {
  font-size: var(--clmp1828);
  font-weight: 600;
}
.c-white__box {
  background: var(--c-white);
  padding: 60px 100px;
}
.c-lead__title {
  position: relative;
  border-bottom: 3px solid #222;
}
.c-lead__title::before {
  position: absolute;
  content: '';
  width: 50px;
  left: 0;
  bottom: -3px;
  border-bottom: 3px solid var(--c-pink);
}
.c-lead__title span {
  display: inline-block;
  font-size: var(--clmp1724);
  font-weight: 600;
  margin-bottom: 10px;
}
.c-lead__title div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
.c-lead__title div span {
  margin-bottom: 0;
}
.c-lead__title div span.c-lead_titleLabel {
  background: var(--c-base);
  border-radius: 31px;
  color: var(--c-white);
  padding: 5px 20px;
  font-size: var(--clmp1520);
}
.c-lead__title div span.c-lead_titleLabel--pink {
  background: var(--c-pink);
}
.c-btn__right {
  text-align: right;
}
.c-btn__right a {
  display: inline-block;
  border-radius: 25.5px;
  border: 3px solid var(--c-pink);
  background: #FFF3F7;
  padding: 15px;
  transition: var(--transition-btn);
}
.c-btn__right a span {
  color: var(--c-pink);
  font-size: var(--clmp1415);
  font-weight: 600;
}
.c-btn__right a span::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid var(--c-pink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 10px;
}
.c-btn__right a:hover {
  background: var(--c-pink);
}
.c-btn__right a:hover span {
  color: var(--c-white);
}
.c-btn__right a:hover span::after {
  border-left: 8px solid var(--c-white);
}
/* 追加 */
.c-btn__center {
  text-align: center;
}
.c-btn__center a {
  display: inline-block;
  border-radius: 25.5px;
  border: 3px solid var(--c-pink);
  background: #FFF3F7;
  padding: 15px;
  transition: var(--transition-btn);
}
.c-btn__center a span {
  color: var(--c-pink);
  font-size: var(--clmp1415);
  font-weight: 600;
}
.c-btn__center a span::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid var(--c-pink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 10px;
}
.c-btn__center a:hover {
  background: var(--c-pink);
}
.c-btn__center a:hover span {
  color: var(--c-white);
}
.c-btn__center a:hover span::after {
  border-left: 8px solid var(--c-white);
}

a.c-noLink {
  pointer-events: none;
}
.c-tableTitle {
  display: block;
  font-size: var(--clmp1618);
  font-weight: 600;
}
.c-tableOrg table {
  width: 100%;
  border: 5px solid var(--c-pink);
  border-top: 1px solid var(--c-pink);
  border-collapse: separate;
  border-spacing: 0;
}
.c-tableOrg table thead th {
  background: var(--c-pink);
  text-align: center;
  padding: 10px 5px;
  vertical-align: middle;
  width: 25%;
}
.c-tableOrg table thead th:not(:last-of-type) {
  border-right: 1px solid #fff;
}
.c-tableOrg table thead th span {
  color: var(--c-white);
  font-size: var(--clmp1215);
  font-weight: 600;
  line-height: 2;
}
.c-tableOrg table tbody th {
  background: var(--c-lightpink);
  border-right: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  text-align: center;
  padding: 20px;
  vertical-align: middle;
}
.c-tableOrg table tbody th span {
  font-size: var(--clmp1215);
  font-weight: 600;
  line-height: 2;
}
.c-tableOrg table tbody td {
  border-right: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  text-align: center;
  padding: 20px;
  vertical-align: middle;
}
.c-tableOrg table .bdr_none {
  border-right: none;
  border-bottom: none;
}
.c-tableOrg table tbody td span {
  font-size: var(--clmp1215);
  font-weight: 300;
  line-height: 2;
}
.c-tableOrg table tbody tr:last-child th,
.c-tableOrg table tbody tr:last-child td {
  border-bottom: none;
}
.c-tableOrgHorizon table {
  width: 100%;
  border: 5px solid var(--c-pink);
  border-left: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.c-tableOrgHorizon caption {
  font-size: var(--clmp1618);
  font-weight: 600;
  line-height: 1.66;
  margin-bottom: 5px;
}
.c-tableOrgHorizon table th {
  background: var(--c-pink);
  border-bottom: 1px solid var(--c-white);
  padding: 20px 0;
  text-align: center;
  line-height: 1.86667;
  vertical-align: middle;
  min-width: 250px;
  width: 25%;
}
.c-tableOrgHorizon table th span {
  color: var(--c-white);
  font-size: var(--clmp1218);
  font-style: normal;
  font-weight: 600;
  line-height: 1.667;
}
.c-tableOrgHorizon table td {
  border-bottom: 1px solid var(--line-gray);
  font-size: var(--clmp1215);
  font-weight: 300;
  line-height: 1.86667;
  padding: 20px;
  width: 75%;
}
.c-tableOrgHorizon table tr:last-child th,
.c-tableOrgHorizon table tr:last-child td {
  border-bottom: none;
}
.c-tableOrgHorizon table caption {
  font-size: var(--clmp1618);
  font-weight: 600;
  line-height: 1.66;
  margin-bottom: 5px;
}
.c-tableOrgHorizon table td b {
  font-weight: 600;
}
.c-quoteBox {
  background: #FFEBF2;
  border-radius: 15px;
  position: relative;
  padding: 36px;
}
.c-quoteBox::before,
.c-quoteBox::after {
  position: absolute;
  top: 20px;
  left: 20px;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_quote.svg);
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 67px;
  width: 68px;
}
.c-quoteBox::after {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 20px;
  right: 20px;
  transform: rotate(180deg);
}
.c-quoteBox blockquote {
  position: relative;
  z-index: 1;
}
.c-quoteBox blockquote span {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2;
}
.c-quoteBox blockquote .c-quoteBoxTitle span {
  font-weight: 600;
}
.c-quoteBoxLead span {
  display: block;
  text-indent: 1em;
}
.c-quoteBoxList {
  counter-reset: qlist 0;
  margin-left: 11px;
}
.c-quoteBoxList li {
  display: flex;
}
.c-quoteBoxList li:not(:last-of-type) {
  margin-bottom: 15px;
}
.c-quoteBoxList li::before {
  counter-increment: qlist 1;
  content: counter(qlist, cjk-ideographic);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2;
}
.c-quoteBoxList li span {
  display: block;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2;
  text-indent: 1em;
}
.c-quoteBoxNum {
  display: flex;
}
.c-quoteBoxNum span {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 2;
}
.c-quoteBoxNum span:first-child {
  font-weight: 600;
  margin-right: 1em;
}
.c-quoteBoxNum span:last-child {
  display: block;
  text-indent: 1em;
}
.c-quoteBoxReference {
  text-align: right;
  margin-right: -3px;
}
.c-quoteBox blockquote .c-quoteBoxReference span {
  font-size: var(--clmp1215);
}
.c-quoteBoxReference a {
  color: #0B98E8;
  font-weight: 600;
  font-style: normal;
  transition: var(--transition-time);
}
.c-quoteBoxReference a:hover {
  text-decoration-line: underline;
}
.c-humanInfo {
  display: flex;
  gap: 20px;
}
.c-humanInfoImg {
  flex-shrink: 0;
  width: 200px;
}
.c-humanInfoImg span {
  display: block;
  background: #35B5E5;
  border-radius: 50%;
  padding: 2px;
  height: 200px;
  width: 200px;
}
.c-humanInfoImg span img {
  width: 198px;
}
.c-humanInfoTable {
  flex: 1;
}
.c-humanInfoTable table {
  width: 100%;
  border: none;
  border-collapse: separate;
  border-spacing: 0;
}
.c-humanInfoTable table th {
  background: var(--c-lightblue);
  border-bottom: 1px solid var(--line-gray);
  font-size: var(--clmp1215);
  font-weight: 600;
  line-height: 2;
  padding: 10px 20px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  min-width: 145px;
  width: 25%;
}
.c-humanInfoTable table td {
  border-bottom: 1px solid var(--line-gray);
  font-size: var(--clmp1215);
  line-height: 2;
  padding: 10px 20px;
  width: 75%;
}
.c-iconTitle {
  display: flex;
  align-items: center;
  gap: 5px;
}
.c-iconTitleImg {
  height: 30px;
  width: 30px;
}
.c-iconTitleText {
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.667;
}
.p-tried__point {
  display: flex;
  gap: 36px;
}
.p-tried__pointImg {
  flex-shrink: 0;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10));
  width: 220px;
}
.p-tried__pointText {
  padding-top: 15px;
}
.c-bubble__box {
  position: relative;
  padding: 60px 100px;
  border: 3px solid #adadad;
}
.c-bubble__box::before {
  content: "";
  border-color: #adadad transparent transparent transparent;
  border-width: 23px 28px 0px 28px;
  margin-left: -28px;
  top: 100%;
  left: 50%;
  position: absolute;
}
.c-bubble__box::after {
  content: "";
  border-color: #fff transparent transparent transparent;
  border-width: 23px 28px 0px 28px;
  margin-left: -28px;
  margin-top: -3px;
  top: 100%;
  left: 50%;
  position: absolute;
}
.c-bubble__box--nobottom::before,
.c-bubble__box--nobottom::after {
  border: none;
}
.c-bubble__boxInner::before {
  content: "";
  border-color: #adadad transparent transparent transparent;
  border-width: 23px 28px 0px 28px;
  margin-left: -28px;
  top: 0;
  left: 50%;
  position: absolute;
}
.c-bubble__boxInner::after {
  content: "";
  border-color: #fff transparent transparent transparent;
  border-width: 23px 28px 0px 28px;
  margin-left: -28px;
  margin-top: -3px;
  top: 0;
  left: 50%;
  position: absolute;
}
.c-bubble__box--gray {
  background: #f2f2f2;
  border: none;
}
.c-bubble__box--gray::before,
.c-bubble__box--gray::after {
  border-top: 22px solid #f2f2f2;
}
.c-bubble__box--gray .c-bubble__boxInner::before {
  border-top: 22px solid #f2f2f2;
}
.c-bubble__box--gray .c-bubble__boxInner::after {
  border-top: 22px solid var(--c-lightblue);
}
.c-bubble__box--white {
  background: #fff;
  border: 3px solid #fff;
}
.c-bubble__box--white::before,
.c-bubble__box--white::after {
  border-top: 22px solid #fff;
}
.c-bubble__box--white .c-bubble__boxInner::before {
  border-top: 22px solid #fff;
}
.c-bubble__box--white .c-bubble__boxInner::after {
  border-top: 22px solid var(--c-lightblue);
}
.c-bubble__boxCol {
  display: flex;
  align-items: center;
  gap: 36px;
}
.c-bubble__boxCol picture {
  flex-shrink: 0;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10));
  display: block;
  max-width: 340px;
  width: 42.76%;
}
.c-bubble__boxColImg {
  display: flex;
  justify-content: space-between;
}
.c-blue__box {
  display: inline-block;
  background: #E8F9FF;
  padding: 20px;
}
.c-blue__box--wide {
  display: block;
  padding: 36px;
}
.c-blue__boxList li {
  position: relative;
  display: block;
  padding-left: 25px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2;
}
.c-blue__boxList li span {
  font-weight: 300;
}
.c-blue__boxList li::before {
  position: absolute;
  display: inline-block;
  content: "";
  top: 10px;
  left: 0;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_check.svg);
  background-repeat: no-repeat;
  background-size: contain;
  height: 15px;
  width: 15px;
}
.c-blue__boxList li a {
  color: #35B5E5;
  font-size: 1.5rem;
  font-weight: 600;
}
.c-blue__boxList li a:hover {
  text-decoration: underline;
}
.c-blue__boxTimeline {
  display: flex;
  align-items: center;
  gap: 50px;
}
.c-blue__boxTimeline picture {
  margin-left: 28px;
  width: 53px;
}
.c-blue__boxTimelineList {
  counter-reset: timeline_c;
}
.c-blue__boxTimelineList li {
  position: relative;
  color: var(--c-base);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.4;
  padding-left: 34px;
}
.c-blue__boxTimelineList li::before {
  content: counter(timeline_c);
  counter-increment: timeline_c;
  background-color: var(--c-pink);
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 22px;
  width: 22px;
  color: #ffffff;
  font-size: 85%;
  line-height: 1;
  position: absolute;
  top: 6px;
  left: 0;
}
.c-bubble__speech {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.c-bubble__speechImg {
  flex-shrink: 0;
  width: 120px;
}
.c-bubble__speechImg span {
  display: block;
  background: #35B5E5;
  border-radius: 50%;
  padding: 2px;
  height: 120px;
  width: 120px;
}
.c-bubble__speechImg span img {
  width: 118px;
}
.c-bubble__speechText {
  position: relative;
  border: 2px solid #35B5E5;
  border-radius: 10px;
  padding: 20px;
  width: 85%;
  background-color: #fff;
}
.c-bubble__speechText span {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}
.c-bubble__speechText::before {
  position: absolute;
  top: calc(50% - 8px);
  left: -16px;
  display: inline-block;
  content: "";
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_06.svg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 16px;
  width: 16px;
}
.c-bubble__boxImg picture {
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10));
}
.c-bubble__boxImg--center {
  margin: 0 auto;
  max-width: 340px;
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.10));
}

/*
Appleギフトカード買取とは
-------------------------------------------------------------- */
.p-mokuji {
  margin-bottom: 105px;
}
.p-mokuji__lead {
  counter-reset: mokuji_mainNum 0;
}
.p-mokuji__wrap {
  border: 3px solid var(--mokuji-line-color);
  border-radius: 10px;
  margin: 0 auto;
  max-width: 560px;
  padding: 36px;
}
.p-mokuji__wrapTitle {
  font-size: var(--clmp2024);
  font-weight: 600;
  margin-bottom: 32px;
}
.p-mokuji__wrap ol li:not(:last-of-type) {
  margin-bottom: 20px;
}
.p-mokuji__wrap a.p-mokuji__list {
  display: inline-flex;
  align-items: center;
  color: var(--c-base);
  font-size: var(--clmp1618);
  font-weight: 600;
  transition: var(--transition-time);
}
.p-mokuji__wrap a.p-mokuji__list::before {
  counter-increment: mokuji_mainNum 1;
  content:  counter(mokuji_mainNum, decimal-leading-zero);
  color: #fff;
  display: inline-block;
  font-size: var(--clmp1416);
  font-weight: 600;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_ribbon.svg);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 20px;
  padding: 8px 0 0 5px;
  height: 30px;
  width: 40px;
}
.p-mokuji__wrap a:hover span {
  color: var(--c-pink);
  border-bottom: 1px solid var(--c-pink);
}
.p-mokuji__wrap ul {
  counter-reset: mokuji_subNum 0;
  margin-top: 20px;
  margin-left: 20px;
}
.p-mokuji__wrap ol li:not(:last-of-type) ul li {
  margin-bottom: 15px;
}
.p-mokuji__wrap a.p-mokuji__lower {
  display: inline-flex;
  align-items: center;
  color: var(--c-base);
  font-size: var(--clmp1618);
  font-weight: 600;
}
.p-mokuji__wrap a.p-mokuji__lower::before {
  counter-increment: mokuji_subNum 1;
  content:  counter(mokuji_subNum, decimal-leading-zero);
  color: var(--c-pink);
  display: inline-block;
  font-size: var(--clmp1618);
  font-weight: 600;
  margin-right: 20px;
  line-height: 1.4;
}
.p-mokuji__wrap a.p-mokuji__lower span {
  font-size: 1.5rem;
  font-weight: 600;
}

/*
Appleギフトカード買取の換金率
-------------------------------------------------------------- */
.p-index__exchangeSpeech .c-mainSpeech__inner {
  width: 80%;
}

/*
Appleギフトカード買取優良サービス
-------------------------------------------------------------- */
.p-index__serviceTableAtt {
  display: block;
  font-size: var(--clmp1214);
  margin-bottom: 5px;
}
.p-index__serviceTable table {
  border-right: 5px solid var(--c-pink);
  border-bottom: 5px solid var(--c-pink);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.p-index__serviceTable table img {
  -o-object-fit: contain;
  object-fit: contain;
}
.p-index__serviceTable table th {
  background: var(--c-pink);
  border-right: 1px solid var(--c-white);
  height: 50px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}
.p-index__serviceTable table th:nth-child(1) {
  min-width: 150px;
}
.p-index__serviceTable table th:nth-child(3) {
  min-width: 110px;
}
.p-index__serviceTable table th:nth-child(4) {
  min-width: 85px;
}
.p-index__serviceTable table th:last-of-type {
  border-right: none;
  width: 260px;
}
.p-index__serviceTable table th span {
  display: block;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.28;
}
.p-index__serviceTable table td {
  padding: 0 8px;
  border-right: 1px solid var(--line-gray);
  border-bottom: 1px solid var(--line-gray);
  text-align: center;
  height: 80px;
  vertical-align: middle;
  white-space: nowrap;
}
.p-index__serviceTable table td:last-of-type {
  border-right: none;
}
.p-index__serviceTable table tr:last-of-type td {
  border-bottom: none;
}
.p-index__serviceTable table td span {
  font-size: 1.5rem;
  font-weight: 300;
}
.p-index__serviceTable table td span.p-index__serviceTable--per {
  display: inline-block;
  font-size: var(--clmp1415);
  text-align: left;
  line-height: var(--line-height-list);
  padding: 0 12px;
}
.p-index__serviceTable table th.p-index__serviceTable--sticky,
.p-index__serviceTable table td.p-index__serviceTable--sticky {
  border-left: 5px solid var(--c-pink);
}
.p-index__serviceTable table th.p-index__serviceTable--sticky::after,
.p-index__serviceTable table td.p-index__serviceTable--sticky::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -1px;
  background: var(--c-pink);
  height: 1px;
  width: 5px;
}
.p-index__serviceTable--sticky picture {
  display: block;
  margin: 0 auto 5px;
  height: auto;
  width: 110px;
  transition: var(--transition-time);
}
.p-index__serviceTable table td.p-index__serviceTable--sticky a span {
  color: var(--link-blue);
  font-size: var(--clmp1415);
  font-weight: 600;
  text-decoration-line: underline;
  transition: var(--transition-time);
}
.p-index__serviceTable--sticky a picture:hover,
.p-index__serviceTable--sticky a span:hover {
  cursor: pointer;
  opacity: var(--hover-op);
}
.p-index__serviceTable table ol {
  padding-left: 7px;
}
.p-index__serviceTable table ol li {
  font-size: 1.4rem;
  text-align: left;
  line-height: var(--line-height-list);
}
.p-index__serviceTable table ol li::before {
  content: "・";
}
.p-index__serviceTable table ul {
  display: flex;
  align-items: center;
  column-gap: 2px;
}
.p-index__serviceTable table ul li {
  width: 32px;
}
.p-index__serviceTable table ul li img {
  -o-object-fit: contain;
  object-fit: contain;
}
.p-index__serviceBox {
  border-radius: 10px;
  border: 3px solid var(--c-base);
  margin-bottom: 60px;
}
.p-index__serviceBoxTitle {
  border-radius: 7px 7px 0 0;
  background: var(--title-pink);
  height: 70px;
  display: grid;
  place-items: center;
}
.p-index__serviceBoxTitle span {
  font-size: var(--clmp2432);
  font-weight: 600;
}
.p-index__serviceBoxCont {
  padding: 36px 100px 67px;
}
.p-index__serviceBoxImg {
  margin-bottom: 36px;
}
.p-index__serviceBoxTable table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.p-index__serviceBoxTable table th {
  background: var(--c-lightpink);
  border-bottom: 1px solid var(--line-gray);
  font-size: var(--clmp1215);
  font-weight: 600;
  line-height: 1.6;
  padding: 20px;
  text-align: center;
  vertical-align: middle;
  /* white-space: nowrap; */
  width: 23.5%;
}
.p-index__serviceBoxTable table td {
  border-bottom: 1px solid var(--line-gray);
  font-size: var(--clmp1315);
  font-weight: 300;
  line-height: 1.6;
  padding: 20px 36px;
  vertical-align: middle;
  background: #fff;
  span { word-break: break-all ;}
}
.p-index__serviceBoxTable table ul li span {
  display: inline-flex;
  align-items: center;
  column-gap: 7px;
}
.p-index__serviceBoxTable table ul li span::before {
  display: inline-block;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_check.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 15px;
  width: 15px;
}
.p-index__serviceBoxTable table span.p-index__serviceBoxTable--Bold {
  font-weight: 600;
}
.p-index__serviceBoxTable table span.p-index__serviceBoxTable--Bold::before {
  content: "▼";
}
.p-index__serviceBoxTable table ol.p-index__serviceBoxTable--list {
  margin-bottom: 20px;
}
.p-index__serviceBoxTable table ol li::before {
  content: "・";
}
.p-index__serviceBoxTable table  {
  content: "・";
}
.p-index__serviceBoxVoice {
  margin: 36px 0 24px;
}
.p-index__serviceBoxVoiceTitle span {
  display: flex;
  align-items: center;
  column-gap: 5px;
  font-size: var(--clmp1824);
  font-weight: 600;
}
.p-index__serviceBoxVoiceTitle span::before {
  display: inline-block;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_chat.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 23px;
  width: 23px;
}
.p-index__serviceBoxVoiceList {
  margin: 20px 36px 36px;
}
.p-index__serviceBoxVoiceList li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 20px;
  margin-bottom: 20px;
}
.p-index__serviceBoxVoiceList li::after {
  display: inline-block;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 76px;
  width: 76px;
}
.p-index__serviceBoxVoiceList li.p-index__serviceBoxVoiceMale::after {
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_male.svg);
}
.p-index__serviceBoxVoiceList li.p-index__serviceBoxVoiceFemale::after {
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_female.svg);
}
.p-index__serviceBoxVoiceText {
  position: relative;
  border: 2px solid #A7E7FF;
  border-radius: 10px;
  padding: 20px;
  width: 85%;
}
.p-index__serviceBoxVoiceText span {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}
.p-index__serviceBoxVoiceMale .p-index__serviceBoxVoiceText {
  border-color: #A7E7FF;
  background-color: #E8F9FF;
}
.p-index__serviceBoxVoiceFemale .p-index__serviceBoxVoiceText {
  border-color: #FFB2CC;
  background-color: #FFEBF2;
}
.p-index__serviceBoxVoiceText::after {
  position: absolute;
  top: calc(50% - 8px);
  right: -16px;
  display: inline-block;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  height: 16px;
  width: 16px;
}
.p-index__serviceBoxVoiceMale .p-index__serviceBoxVoiceText::after {
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_02.svg);
}
.p-index__serviceBoxVoiceFemale .p-index__serviceBoxVoiceText::after {
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_03.svg);
}
.p-index__serviceBoxBtn {
  margin: 36px auto 0;
  width: 428px;
}

.p-index__serviceBoxBtn a {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 100%;
	margin: auto;
	padding: 18px;
	font-weight: bold;
	border-radius: 10px;
  background: #fff;
	color: #27acd9;
	border: 5px solid var(--c-pink);
  border-radius: 39px;
	box-shadow: 7px 7px var(--c-pink);
	transition: var(--transition-btn);
}
.p-index__serviceBoxBtn a:hover {
	box-shadow: none;
	transform: translate(4px, 4px);
	color: #27acd9;
}
.p-index__serviceBoxBtn a span {
	display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 15px;
  color: var(--c-pink);
  font-size: var(--clmp2028);
  font-weight: 600;
}
.p-index__serviceBoxBtn a span::after {
  display: inline-block;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_link.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 31px;
  width: 31px;
}

/* 追加 */
.p-index__serviceBoxBtn_wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  @media screen and (max-width:768px) {
    display: block;
  }
}
.p-index__serviceBoxBtn.--blue {
  @media screen and (max-width:768px) {
    margin: 16px auto 0;
  }
}
.p-index__serviceBoxBtn.--blue a {
  border: 5px solid var(--c-blue);
	box-shadow: 7px 7px var(--c-blue);
}
.p-index__serviceBoxBtn.--blue a span {
  color: var(--c-blue);
}
.p-index__serviceBoxBtn.--blue a span::after {
  display: none;
}

/*
優良買取サービスの選び方
-------------------------------------------------------------- */
.p-index__choiceSpeech .c-mainSpeech__inner {
  width: 80%;
}

/*
買取可能な Apple ギフトカードの種類
-------------------------------------------------------------- */
.p-index__kindSpeech .c-mainSpeech__inner {
  width: 84%;
}

/*
Appleギフトカード買取が人気の理由
-------------------------------------------------------------- */
.p-index__popularitySpeech {
  margin-bottom: 30px;
}
.p-index__popularitySpeech .c-mainSpeech__inner {
  width: 80%;
}

/*
Appleギフトカード買取の安全性
-------------------------------------------------------------- */
.p-index__safetySpeech .c-mainSpeech__inner {
  width: 84%;
}
.p-index__safetySpeech ul {
  margin-top: -8px;
  margin-bottom: 8px;
}
.p-index__safetySpeech ul li {
  margin-top: 16px;
}
.p-index__safetySpeech ul li span {
  display: inline-flex;
  align-items: center;
  column-gap: 5px;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
}
.p-index__safetySpeech ul li span::before {
  display: inline-block;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_check.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  height: 15px;
  width: 15px;
}

/*
専門店での売却を推奨する理由
-------------------------------------------------------------- */
.p-index__reasonMeans ul {
  display: flex;
  align-items: stretch;
  column-gap: 20px;
  justify-content: center;
}
.p-index__reasonMeans li {
  display: flex;
  flex-direction: column;
  background: #FFF3F7;
  border: 3px solid var(--c-pink);
  padding: 16px 6px 20px;
  width: 220px;
}
.p-index__reasonMeansText {
  flex-grow: 1;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 8px;
}
.p-index__reasonMeansText span {
  display: block;
}
.p-index__reasonMeansText span + span {
  margin-top: 8px;
}
.p-index__reasonMeansText--col01 {
  margin-top: 12px;
}
.p-index__reasonMeansImg {
  margin: 0 auto;
  height: 90px;
  width: 90px;
}
.p-index__reasonMeansImg source,
.p-index__reasonMeansImg img {
  -o-object-fit: contain;
  object-fit: contain;
}

/*
Apple ギフトカード買取よくある質問
-------------------------------------------------------------- */
.p-index__faq .c-caption__box span {
  font-size: var(--clmp1824);
}
.p-index__faqList li {
  border-radius: 10px;
  border: 3px solid var(--c-lightblue);
  background: var(--c-lightblue);
  cursor: pointer;
  -webkit-transition: var(--transition-accordion);
  transition: var(--transition-accordion);
  margin-bottom: 20px;
}
.p-index__faqQuestion {
  position: relative;
}
.p-index__faqQuestionInner {
  display: flex;
  align-items: center;
  column-gap: 10px;
  padding: 20px 50px 20px 20px;
}
.p-index__faqQuestionInner span {
  color: var(--c-black);
  font-size: var(--clmp1820);
  font-weight: 600;
}
.p-index__faqQuestionInner span + span {
  color: var(--c-base);
  flex-shrink: 1;
  font-size: var(--clmp1518);
  line-height: 1.4;
}
.p-index__faqAnswer {
  display: none;
}
.p-index__faqQuestion[data-show="true"] + .p-index__faqAnswer {
  display: block;
}
.p-index__faqAnswerInner {
  background: #fff;
  border-radius: 0 0 7px 7px;
  display: flex;
  column-gap: 10px;
  padding: 20px;
}
.p-index__faqAnswerInner span {
  color: var(--c-blue);
  font-size: var(--clmp1820);
  font-weight: 600;
}
.p-index__faqAnswerText {
  flex-shrink: 1;
}
.p-index__faqAnswerText p {
  color: var(--c-base);
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.6;
}
.p-index__faqBtn {
  position: absolute;
  top: 50%;
  right: 45px;
}
.p-index__faqBtn span {
  position: absolute;
  display: block;
  top: 50%;
  width: 25px;
  height: 3px;
  background: var(--c-blue);
  transition: var(--transition-accordion);
}
.p-index__faqBtn span + span {
  transform: rotate(90deg);
}
.p-index__faqQuestion[data-show="true"] .p-index__faqBtn span + span {
  transform: rotate(0deg);
}
.p-index__faqSpeech {
  margin-top: 36px;
  margin-bottom: 0;
}
.p-index__faqSpeech .c-mainSpeech__inner {
  padding: 4px 20px 8px;
  width: 84%;
}
/*-------------------------------------------------------------- */
/*-------------------------------------------------------------- */
/*
常に供給が不足している状態
-------------------------------------------------------------- */
.c__flexPink ul {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 20px;
  justify-content: center;
}
.c__flexPink li {
  display: flex;
  row-gap: 10px;
  flex-direction: column;
  background: #FFF3F7;
  border: 3px solid var(--c-pink);
  padding: 20px 12px;
}
.c__flexPinkText {
  flex-grow: 1;
  text-align: center;
  margin-bottom: 8px;
}
.c__flexPinkText span {
  display: block;
  font-size: var(--clmp1516);
  font-weight: 600;
}
.c__flexPinkText span.c__flexPinkText--small {
  font-size: var(--clmp1216);
  font-weight: 600;
}
.c__flexPinkText span + span {
  margin-top: 9px;
}
.c__flexPinkText--col01 {
  margin-top: 12px;
}
.c__flexPinkImg {
  margin: 0 auto;
  height: 90px;
  width: 90px;
}
.c__flexPinkImg source,
.c__flexPinkImg img {
  -o-object-fit: contain;
  object-fit: contain;
}
/*-------------------------------------------------------------- */
/*-------------------------------------------------------------- */
/*
Appleギフトカードお得な買い方
-------------------------------------------------------------- */


/* 間隔調整 */
.l-blue_bg { background: var(--c-lightblue); }
.l-mt20 { margin-top: 20px; }
.l-mt30 { margin-top: 30px; }
.l-mt36 { margin-top: 36px; }
.l-mb0 { margin-bottom: 0px; }
.l-mb10 { margin-bottom: 10px; }
.l-mb15 { margin-bottom: 15px; }
.l-mb16 { margin-bottom: 16px; }
.l-mb20 { margin-bottom: 20px; }
.l-mb25 { margin-bottom: 25px; }
.l-mb30 { margin-bottom: 30px; }
.l-mb36 { margin-bottom: 36px; }
.l-mb40 { margin-bottom: 40px; }
.l-mb46 { margin-bottom: 46px; }
.l-mb50 { margin-bottom: 50px; }
.l-mb60 { margin-bottom: 60px; }
.l-mb70 { margin-bottom: 70px; }
.l-mb105 { margin-bottom: 105px; }
.l-pt15 { padding-top: 15px; }
.l-pt105 { padding-top: 105px; }
.l-pt115 { padding-top: 115px; }
.l-pb36 { padding-bottom: 36px; }
.l-pb95 { padding-bottom: 95px; }
.l-pb105 { padding-bottom: 105px; }
.l-w80p { width: 80%; }
.l-w84p { width: 84%; }
.l-w370 { width: 370px; }

@media screen and (max-width: 1100px) {
  .l-headbar__lead,
  .l-inner,
  .c-breadcrumb__list {
    width: var(--sp-width);
  }
  .c-breadcrumb__list {
    padding-left: 0;
  }
  .c-white__box,
  .c-bubble__box {
    padding-left: calc(100px - calc(calc(1100px - 100vw) / 8.3 ));
    padding-right: calc(100px - calc(calc(1100px - 100vw) / 8.3 ));
  }
  .p-index__serviceTable--scroll {
    overflow: overflow-x;
  }
  .p-index__serviceTable--sticky {
    position: sticky;
    top: 0;
    left: 0;
    background: none;
    border-left: none;
    border-right: none;
  }
  .p-index__serviceTable--sticky::before {
    background: var(--c-white);
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
  th.p-index__serviceTable--sticky::before {
    background: var(--c-pink);
  }
  .p-index__serviceBoxCont {
    padding: 36px 0 60px;
    margin: 0 auto;
    width: 80%;
  }
  .l-w370 {
    width: calc(50% - 10px);
  }
}
@media screen and (max-width: 992px) {
  .p-index__serviceBoxCont {
    width: 90%;
  }
  .l-footer__inner {
    width: var(--sp-width);
  }
}

@media screen and (max-width: 768px) {
  .l-header__inner {
    padding: 16px 0;
    margin: 0 auto;
    width: var(--sp-width);
  }
  #l-header__spmenuContent picture,
  .l-header__logo {
    width: 150px;
  }
  .l-header__nav {
    display: none;
  }
  .l-header__button {
    display: block;
  }
  .l-footer__upperGroup {
    display: none;
  }
  .l-footer__lowerGroup ul {
    flex-direction: column;
    text-align: center;
    row-gap: 20px;
  }
  .l-footer__lowerGroup {
    padding: 60px 0;
  }
  .l-section {
    padding: 60px 0;
  }
  .p-index__reasonMeans ul {
    flex-direction: column;
    row-gap: 15px;
  }
  .p-index__reasonMeans li {
    padding: 20px;
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 15px;
    width: 100%;
  }
  .p-index__reasonMeansText {
    text-align: left;
    margin-bottom: 0;
  }
  .p-index__reasonMeansText--col01 {
    margin: 0;
  }
  .p-index__reasonMeansImg {
    height: 50px;
    width: 50px;
  }
  .c__flexPink ul {
    flex-direction: column;
    row-gap: 15px;
  }
  .c__flexPink li {
    flex-direction: row-reverse;
    align-items: center;
    column-gap: 15px;
    padding: 20px;
    width: 100%;
  }
  .c__flexPinkText {
    text-align: left;
    margin-bottom: 0;
  }
  .c__flexPinkText--col01 {
    margin: 0;
  }
  .c__flexPinkImg {
    height: 50px;
    width: 50px;
  }
  .p-mokuji__wrap a.p-mokuji__lower {
    align-items: flex-start;
  }
  .p-mokuji__wrap a.p-mokuji__lower span {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.4;
  }
  .c-tableOrg table thead th span,
  .c-tableOrg table tbody th span,
  .c-tableOrg table tbody td span {
    display: inline-block;
  }
  .c-tableOrg table tbody td span br {
    display: none;
  }
  .c-tableOrgHorizon table th {
    min-width: auto;
    white-space: nowrap;
  }
  .c-tableOrgHorizon table th span {
    display: block;
  }
  .c-humanInfo {
    flex-direction: column;
    gap: 20px;
  }
  .c-humanInfoImg {
    margin: 0 auto;
  }
  .p-tried__point {
    flex-direction: column;
    gap: 5px;
  }
  .p-tried__pointImg {
    max-width: 220px;
    margin: 0 auto;
  }
  .c-blue__boxTimeline {
    flex-direction: column;
    gap: 20px;
  }
  .l-pt60_t { padding-top: 60px; }
  .l-pt65_t { padding-top: 65px; }
  .l-pb55_t { padding-bottom: 55px; }
  .l-pb60_t { padding-bottom: 60px; }
  .l-w100p_t { width: 100%; }
}

@media screen and (max-width: 576px) {
  :root {
    --line-height-primary: 1.86667;
  }
  :where(p + p) {
    margin-top: 28px;
  }
  .l-headbar {
    height: 15px;
    padding: 2px 0;
  }
  .l-header__inner {
    padding: 8px 0;
  }
  #l-header__spmenuContent picture,
  .l-header__logo {
    width: 100px;
  }
  .l-header__button {
    top: 24px;
  }
  .l-header__button,
  .l-header__buttonLine {
    height: 34px;
    width: 34px;
  }
  .l-header__buttonLine span, .l-header__buttonLine::before, .l-header__buttonLine::after {
    width: 18px;
  }
  .l-header__buttonLine::before {
    transform: translate(-50%, -6px);
  }
  .l-header__buttonLine::after {
    transform: translate(-50%, 6px);
  }
  .l-footer__lowerGroup ul {
    row-gap: 20px;
  }
  .c-breadcrumb {
    margin-top: 10px;
  }
  .c-breadcrumb__list {
    margin-bottom: 42px;
  }
  .c-caption__circle::before {
    top: 0;
    height: 40px;
    width: 40px;
  }
  .c-caption__circle span {
    line-height: 1.5;
  }
  .c-mainImg {
    margin: 0 auto;
  }
  .c-caption__box {
    padding: 15px;
    box-shadow: 5px 5px 0 -3px var(--c-pink), 5px 5px 0 0 var(--c-base);
    margin-bottom: 25px;
  }
  .tried .c-caption__box {
    padding: 15px 14px;
  }
  .c-caption__box span {
    line-height: 1.4;
  }
  .c-white__box,
  .c-bubble__box {
    padding: 30px 15px;
  }
  .c-mainSpeech {
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
  }
  .c-mainSpeech picture {
    flex-shrink: 0;
    margin-left: 10px;
    width: 80px;
  }
  .c-mainSpeech__inner {
    background: var(--c-white);
    margin-top: -45px;
  }
  .c-mainSpeech__inner::before {
    top: -16px;
    left: 100px;
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_01.svg);
    height: 16px;
    width: 22px;
  }
  .c-humanInfoTable table th {
    line-height: 1.5;
    min-width: auto;
    padding: 10px 3px;
  }
  .c-humanInfoTable table td {
    line-height: 1.5;
    padding: 10px 0 10px 10px;
  }
  .c-bubble__speech {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 auto;
  }
  .c-bubble__speechImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    z-index: 1;
  }
  .c-bubble__speechImg span {
    height: 50px;
    width: 50px;
  }
  .c-bubble__speechImg span img {
    width: 48px;
  }
  .c-bubble__speechText {
    background: var(--c-white);
    margin-top: 45px;
    width: 100%;
  }
  .c-bubble__speechText::before {
    top: -16px;
    left: 63px;
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_06.svg);
    height: 16px;
    width: 20px;
  }
  .c-tableOrg table {
    border: 2px solid var(--c-pink);
    border-top: 1px solid var(--c-pink);
  }
  .c-tableOrg table tbody th,
  .c-tableOrg table tbody td {
    padding: 20px 5px;
  }
  .c-tableOrg table thead th span,
  .c-tableOrg table tbody th span,
  .c-tableOrg table tbody td span {
    line-height: 1.5;
  }
  .c-tableOrgHorizon table {
    border: 2px solid var(--c-pink);
  }
  .c-tableOrgHorizon table th,
  .c-tableOrgHorizon table td {
    padding: 10px;
    line-height: 1.5;
  }
  .c-tableOrgHorizon table th span {
    line-height: 1.5;
  }
  .c-quoteBox {
    padding: 30px 20px;
  }
  .c-quoteBox::before, .c-quoteBox::after {
    top: 15px;
    left: 15px;
    height: 47px;
    width: 47px;
  }
  .c-quoteBox::after {
    top: auto;
    left: auto;
    bottom: 15px;
    right: 15px;
  }
  .c-quoteBox blockquote span {
    line-height: 1.86667;
  }
  .c-quoteBoxList {
    margin-left: 15px;
  }
  .p-mokuji {
    margin-bottom: 60px;
  }
  .p-mokuji__wrap {
    padding: 30px 20px;
  }
  .p-mokuji__wrapTitle {
    margin-bottom: 30px;
  }
  .p-mokuji__wrap a.p-mokuji__list {
    align-items: flex-start;
  }
  .p-mokuji__wrap a.p-mokuji__list::before {
    margin-right: 6px;
  }
  .p-mokuji__wrap a.p-mokuji__list span {
    line-height: 1.6;
  }
  .p-mokuji__wrap ul {
    margin-left: 15px;
  }
  .p-mokuji__wrap a.p-mokuji__lower::before {
    margin-right: 10px;
  }
  .p-index__serviceBoxBtn {
    width: 100%;
    max-width: 310px;
  }
  .p-index__serviceBoxBtn a {
    padding: 16px 10px;
    box-shadow: 4px 4px var(--c-pink);
  }
  .p-index__exchangeSpeech .c-mainSpeech__inner {
    width: 100%;
  }
  .p-index__service {
    padding: 65px 0 28px;
  }
  .p-index__service .c-sectionImg {
    margin-bottom: 12px;
  }
  .p-index__serviceBox {
    margin-bottom: 30px;
  }
  .p-index__serviceTableAtt {
    margin-bottom: 8px;
  }
  .p-index__serviceBoxTitle {
    height: 60px;
  }
  .p-index__serviceBoxCont {
    padding: 15px 15px 46px;
    width: 100%;
  }
  .p-index__serviceBoxImg {
    margin-bottom: 15px;
  }
  .p-index__serviceBoxTable table th {
    padding: 10px 5px;
    width: auto;
    min-width: 100px;
  }
  .p-index__serviceBoxTable table td {
    padding: 10px;
  }
  .p-index__serviceBoxTable table ol li {
    display: flex;
    align-items: flex-start;
  }
  .p-index__serviceBoxTable table ol.p-index__serviceBoxTable--list {
    margin-bottom: 15px;
  }
  .p-index__serviceBoxTable table ul li span::before {
    height: 14px;
    width: 14px;
  }
  .p-index__serviceBoxVoice {
    margin: 30px 0;
  }
  .p-index__serviceBoxVoiceTitle span::before {
    height: 20px;
    width: 20px;
  }
  .p-index__serviceBoxVoiceList {
    margin: 22px 0;
  }
  .p-index__serviceBoxVoiceList li {
    align-items: flex-end;
    flex-direction: column-reverse;
  }
  .p-index__serviceBoxVoiceList li::after {
    height: 50px;
    width: 50px;
    z-index: 10;
  }
  .p-index__serviceBoxVoiceText {
    margin-top: -10px;
    width: 100%;
  }
  .p-index__serviceBoxVoiceText::after {
    top: -16px;
    left: auto;
    right: 60px;
    height: 16px;
    width: 22px;
  }
  .p-index__serviceBoxVoice {
    margin-bottom: 18px;
  }
  .p-index__serviceBoxVoiceList {
    margin: 15px 0 30px;
  }
  .p-index__serviceBoxVoiceList li {
    margin-bottom: 12px;
  }
  .p-index__serviceBoxVoiceList li:nth-child(2) {
    align-items: flex-start;
  }
  .p-index__serviceBoxVoiceList li:nth-child(2) .p-index__serviceBoxVoiceText::after {
    left: 60px;
    right: auto;
  }
  .p-index__serviceBoxVoiceMale .p-index__serviceBoxVoiceText::after {
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_02.svg);
  }
  .p-index__serviceBoxVoiceList li:nth-child(2).p-index__serviceBoxVoiceMale .p-index__serviceBoxVoiceText::after {
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_04.svg);
  }
  .p-index__serviceBoxVoiceFemale .p-index__serviceBoxVoiceText::after {
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_03.svg);
  }
  .p-index__serviceBoxVoiceList li:nth-child(2).p-index__serviceBoxVoiceFemale .p-index__serviceBoxVoiceText::after {
    background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_speech_sp_05.svg);
  }
  .p-index__serviceBoxBtn a span::after {
    height: 18px;
    width: 18px;
  }
  .p-index__choiceSpeech .c-mainSpeech__inner {
    width: 100%;
  }
  .p-index__kindSubTitleText:before {
    width: 30px;
  }
  .p-index__kindSpeech .c-mainSpeech__inner {
    width: 100%;
  }
  .p-index__safetySpeech .c-mainSpeech__inner {
    width: 100%;
  }
  .p-index__safetySpeech ul {
    margin-bottom: 4px;
  }
  .p-index__safetySpeech ul li {
    margin-top: 12px;
  }
  .p-index__reasonMeans li {
    padding: 20px;
  }
  .p-index__faqList li {
    margin-bottom: 15px;
  }
  .p-index__faqBtn {
    top: 22px;
    right: 25px;
  }
  .p-index__faqBtn span {
    width: 15px;
  }
  .p-index__faqQuestionInner {
    align-items: flex-start;
    padding: 15px 30px 15px 15px;
    column-gap: 5px;
  }
  .p-index__faqQuestionInner span + span {
    line-height: 1.4;
  }
  .p-index__faqAnswerInner {
    padding: 15px;
    column-gap: 4px;
  }
  .p-index__faqSpeech .c-mainSpeech__inner {
    width: 100%;
  }
  .c__flexPinkText span + span {
    line-height: 1.4;
  }
  .c-btn__right a {
    padding: 16px 0;
    width: 100%;
  }
  .c-btn__right a span {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .c-btn__right a span::after {
    border-left: 5px solid var(--c-pink);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }
  .c-btn__right a:hover span::after {
    border-left: 5px solid var(--c-white);
  }
  .c-bubble__box::before,
  .c-bubble__boxInner::before {
    border-width: 15px 20px 0px 20px;
    margin-left: -20px;
  }
  .c-bubble__box::after,
  .c-bubble__boxInner::after {
    border-width: 15px 20px 0px 20px;
    margin-left: -20px;
    margin-top: -3px;
  }
  .c-bubble__boxCol {
    flex-direction: column;
    gap: 18px;
  }
  .c-bubble__boxCol picture {
    width: 100%;
  }
  .c-blue__box {
    padding: 15px;
  }
  .c-blue__boxList li {
    line-height: 1.6;
  }
  .c-blue__boxList li:not(:last-child) {
    margin-bottom: 5px;
  }
  .c-blue__boxList li::before {
    top: 7px;
  }
  .c-blue__boxList li span{
    line-height: 1.86667;
  }
  .c-lead__title div {
    gap: 5px;
  }
  .c-lead__title div span.c-lead_titleLabel {
    padding: 5px 10px;
    white-space: nowrap;
  }
  .c-bubble__boxCol {
    gap: 20px;
  }
  .c-blue__boxTimelineList li {
    line-height: 1.86667;
  }
  .c-blue__boxTimelineList li:not(:last-child) {
    margin-bottom: 5px;
  }
  .c-blue__boxTimelineList li::before {
    top: 3px;
  }
  .l-mt10_s { margin-top: 10px; }
  .l-mt15_s { margin-top: 15px; }
  .l-mt20_s { margin-top: 20px; }
  .l-mt30_s { margin-top: 30px; }
  .l-mt32_s { margin-top: 32px; }
  .l-mb0_s { margin-bottom: 0px; }
  .l-mb5_s { margin-bottom: 5px; }
  .l-mb10_s { margin-bottom: 10px; }
  .l-mb14_s { margin-bottom: 14px; }
  .l-mb15_s { margin-bottom: 15px; }
  .l-mb16_s { margin-bottom: 16px; }
  .l-mb20_s { margin-bottom: 20px; }
  .l-mb25_s { margin-bottom: 25px; }
  .l-mb28_s { margin-bottom: 28px; }
  .l-mb30_s { margin-bottom: 30px; }
  .l-mb32_s { margin-bottom: 32px; }
  .l-mb40_s { margin-bottom: 40px; }
  .l-mb45_s { margin-bottom: 45px; }
  .l-mb46_s { margin-bottom: 46px; }
  .l-mb50_s { margin-bottom: 50px; }
  .l-mb60_s { margin-bottom: 60px; }
}

@media screen and (max-width: 380px) {
  .c-tableOrg table tbody td {
    padding: 20px 0;
  }
  .p-tried__pointImg {
    max-width: none;
    width: 100%;
  }
}

/* scrollhint */
@keyframes scroll-hint-appear {
  0% {
    transform: translateX(40px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50%,
  100% {
    transform: translateX(-40px);
    opacity: 0;
  }
}
.scroll-hint.is-right-scrollable {
  /* background: linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)); */
}
.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0)), linear-gradient(270deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint.is-left-scrollable {
  background: linear-gradient(90deg, rgba(0, 0, 0, .15) 0, rgba(0, 0, 0, 0) 16px, rgba(0, 0, 0, 0));
}
.scroll-hint-icon {
  position: absolute;
  top: 140px;
  left: calc(50% - 48px);
  box-sizing: border-box;
  width: 97px;
  height: 97px;
  border-radius: 5px;
  transition: opacity .3s;
  opacity: 0;
  background: rgba(0, 0, 0, .5);
  text-align: center;
  padding: 10px;
}
.scroll-hint-icon-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  pointer-events: none;
}
.scroll-hint-text {
  margin-top: 4px;
}
.scroll-hint-text span {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--c-white);
  line-height: 1.3;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon {
  opacity: .8;
}
.scroll-hint-icon:before {
  display: inline-block;
  width: 36px;
  height: 36px;
  color: #FFF;
  vertical-align: middle;
  text-align: center;
  content: "";
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(https://kougakubako.com/applegift/wp-content/uploads/icon_scroll.svg);
}
/*
.scroll-hint-icon:after {
  content: "";
  width: 34px;
  height: 14px;
  display: block;
  position: absolute;
  top: 10px;
  left: 50%;
  margin-left: -20px;
  background-repeat: no-repeat;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
  opacity: 0;
  transition-delay: 2.4s;
}
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:after {
  opacity: 1;
}
*/
.scroll-hint-icon-wrap.is-active .scroll-hint-icon:before {
  animation: scroll-hint-appear 1.2s linear;
  animation-iteration-count: 2;
}
.scroll-hint-icon-white {
  background-color: #FFF;
  box-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.scroll-hint-icon-white:before {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDQ8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-icon-white:after {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDI8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiLz48L2c+PC9nPjwvc3ZnPg==);
}
.scroll-hint-icon-white .scroll-hint-text {
  color: #000;
}
.p-mokuji__foot {
  background:#fff9e7;
  padding: 24px;
  margin: 40px auto 0;
  max-width: 860px;
  width: 100%;
}
.p-mokuji__foot p {
  font-size: var(--clmp1618);
  line-height: 1.5;
}
.p-mokuji__footTitle {
  display: block;
  font-size: var(--clmp1618);
  text-align: center;
  font-weight: 700;
  margin-bottom: 24px;
}
.c-floatMenu {
  background: #eee;
  border: 2px solid #fff;
  /* border-right: none; */
  border-radius: 8px 8px 8px 8px;
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  /*overflow-x: hidden;
  overflow-y: auto;*/
  overflow: hidden;
  height: auto;
  max-height: 60%;
  width: 280px;
  z-index: 2;
}
.c-floatMenu .p-mokuji__foot {
  display: none;
}
.c-floatMenu .p-mokuji__wrap {
  background: none;
  box-sizing: border-box;
  border: none;
  max-height: 60vh;
  max-width: none;
  margin: 8px;
  overflow: auto;
  padding: 16px;
  width: 264px;
}
.c-floatMenu .p-mokuji__wrapTitle {
  font-size: 1.6rem;
  margin-bottom: 16px;
}
.c-floatMenu .p-mokuji__wrap ol li:not(:last-of-type) {
  margin-bottom: 16px;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__list {
  align-items: flex-start;
  font-size: 1.4rem;
  line-height: 1.5;
}
.c-floatMenu .p-mokuji__wrap a:hover span {
  color: var(--c-black);
  border-bottom: none;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__list:hover {
  text-decoration: underline;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__list::before {
  color: #000;
  content: ">";
  font-size: 1.4rem;
  background: none;
  margin-right: 8px;
  padding: 0;
  height: auto;
  width: auto;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__list:hover::before {
  text-decoration: none;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__lower:hover {
  text-decoration: underline;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__lower::before {
  color: #000;
  content: ">";
  font-size: 1.2rem;
  margin-right: 8px;
}
.c-floatMenu .p-mokuji__wrap a.p-mokuji__lower span {
  font-size: 1.3rem;
  line-height: 1.4;
}
.c-floatMenu .p-mokuji__wrap ul {
  margin-top: 16px;
  margin-left: 12px;
}
.c-floatMenu .p-mokuji__wrap ol li ul li {
  margin-bottom: 12px!important;
}
@media screen and (max-width:1620px) {
.c-floatMenu {
  width: auto;
  right:0px;
  border-radius: 8px 0px 0px 8px;
  border-right: none;
}
.is-floatOn {
  border-right: none;
  border-radius: 8px 0px 0px 8px;
  right: 0;
  width: 280px;
}
.c-floatMenu .p-mokuji__wrap {
  padding: 0;
  min-width: 32px;
  width: auto;
  height: auto;
}
.c-floatMenu .p-mokuji__wrapTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 23px 8px 18px;
  margin-bottom: 0;
  letter-spacing: 5px;
  writing-mode: vertical-rl;
}
.c-floatMenu .p-mokuji__wrapTitle:hover {
  background: #ddd;
  border-radius: 8px;
}
.c-floatMenu .is-open {
  padding: 16px 8px;
  letter-spacing: normal;
  writing-mode: unset;
}
.c-floatMenu .is-open::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  color: #333;
  line-height: 1;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(25%) rotate(45deg);
}
.c-floatMenu ol {
  display: none;
}
.c-floatMenu .is-open + ol {
  display: block;
  padding: 0 16px 16px;
}
}
@media screen and (max-width:768px) {
.c-floatMenu {
  display: none;
}
}


/* --- 基本設定 --- */
:root {
  --c-pink: #ff6b81;
  --c-black: #333;
  --c-white: #fff;
  --btn-size: 50px; /* ボタンサイズ */
}
.l-lightgray_bg {
  background: #f0f4f8;
}
.p-index__serviceBoxVoiceTitle {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

/* --- スライダーラッパー --- */
.voice_btn_wrap {
  position: relative;
}

.voice_scroll_wrap {
  /* width: 100%; */
  overflow-x: auto;
  padding-bottom: 20px; /* 影切れ防止 */
  cursor: grab;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
  @media screen and (max-width: 768px) {
    margin: 0 calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
  }
}
.voice_scroll_wrap::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}
.voice_scroll_wrap.active {
  cursor: grabbing;
}

.voice_wrap {
  display: flex;
  gap: 16px;
  width: fit-content;
  /* padding: 10px 2px; 影のための微調整 */
}

/* --- カードスタイル (四角いまま) --- */
.voice_box {
  padding: 16px;
  background: #fff;
  position: relative;
  width: 340px;
  height: 280px;
  /* box-shadow:  0 0px 10px rgba(0,0,0,0.05); */
  border-radius: 0; /* カードは四角く */
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  @media screen and (max-width: 768px) {
    width: 260px;
  }
}

.voice_head {
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
  margin-bottom: 8px;
  position: relative;
  padding-left: 76px;
  min-height: 70px;
  @media screen and (max-width: 768px) {
    padding-left: 60px;
  }
}

/* アバター画像 (丸く修正) */
.voice_head::before {
  content: '';
  background: #ddd url('https://kougakubako.com/applegift/wp-content/uploads/icon_male.svg') no-repeat center/cover;
  width: 60px;
  height: 60px;
  border-radius: 50%; /* ここを丸く */
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  @media screen and (max-width: 768px) {
    width: 52px;
    height: 52px;
  }
}
/* .voice_head.--female::before {
  background: #ddd url('https://kougakubako.com/applegift/wp-content/uploads/icon_female.svg') no-repeat center/cover;
} */
.voice_box:nth-child(odd) > .voice_head::before {
  background: #ddd url('https://kougakubako.com/applegift/wp-content/uploads/icon_female.svg') no-repeat center/cover;
}

.voice_ttl {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  margin: 0 0 4px;
  text-align: left;
}
.voice_card, .voice_rate {
  margin: 0;
  font-size: 12px;
  color: gray;
  line-height: var(--line-height-primary);
  text-align: left;
}

/* --- テキストエリアと省略制御 --- */
.voice_text_container {
  position: relative;
  /* flex-grow: 1; */
  overflow: hidden;

}

.voice_text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-black);
  max-height: 160px; 
  overflow: hidden;
  user-select: none;
  
}
.voice_text p {
  line-height: var(--line-height-primary);
  font-size: 14px;
}
.voice_box.is-overflow .voice_text {
    color: transparent;
    background: linear-gradient(180deg, #000 0, rgba(255, 255, 255, 0) 100%);
    -webkit-background-clip: text;
}

/* グラデーション (透明→白) */
.voice_box.is-overflow .voice_text_container::after {
  content: '';
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  pointer-events: none;
}

/* --- 続きを読むボタン (四角いまま) --- */
.btn_read_more {
  display: none;
  font-size: 13px;
  border: 2px solid var(--c-pink);
  color: var(--c-pink);
  padding: 8px 24px;
  background: var(--c-white);
  cursor: pointer;
  border-radius: 0;
  
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
  border-radius: 50vh;
}

.btn_read_more:hover {
  background: var(--c-pink);
  color: white;
}

.voice_box.is-overflow .btn_read_more {
  display: block;
}


/* --- 左右ナビゲーションボタン (丸く修正) --- */
.buttonleft, .buttonright {
  position: absolute;
  background: rgba(255, 255, 255, 1);
  /* box-shadow: 0 0px 10px rgba(0,0,0,0.1); */
  width: var(--btn-size);
  height: var(--btn-size);
  border: none;
  border-radius: 50%; /* ここを丸く */
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s, opacity 0.3s, visibility 0.3s;
  border: 2px solid var(--c-pink);
}
.buttonleft:hover, .buttonright:hover {
  background: var(--c-pink);
}
.buttonleft:hover .arrow-icon, .buttonright:hover .arrow-icon {
  border-top: 2px solid var(--c-white);
  border-right: 2px solid var(--c-white);
}

/* 非表示状態のスタイル */
.buttonleft.is-hidden, .buttonright.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.buttonleft {
  left: calc(var(--btn-size) / 2 * -1); /* -25px */
  @media screen and (max-width: 768px) {
    left: 0px;
  }
}
.buttonright {
  right: calc(var(--btn-size) / 2 * -1); /* -25px */
  @media screen and (max-width: 768px) {
    right: 0px 
  }
}

/* 矢印アイコン */
.arrow-icon {
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--c-pink);
  border-right: 2px solid var(--c-pink);
}
.buttonleft .arrow-icon {
  transform: rotate(-135deg); 
  margin-left: 4px; 
}
.buttonright .arrow-icon {
  transform: rotate(45deg); 
  margin-right: 4px; 
}


/* --- モーダル (角丸なし・CSSで閉じるボタン) --- */
dialog.myModal {
  border: none;
  border-radius: 0;
  padding: 0;
  /* box-shadow: 0 0px 10px rgba(0,0,0,0.1); */
  max-width: 600px;
  width: 90%;
  background: #fff;
}
dialog.myModal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.modal_inner {
  padding: 40px 30px 30px;
  position: relative;
}

/* 閉じるボタン (×) 
   z-indexを追加して確実に押せるように修正 
*/
.modal_close_btn {
  position: absolute;
  top: 0;
  right: 0;
  background: #333;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  z-index: 100; /* 最前面へ */
}
.modal_close_btn:hover {
  opacity: 0.8;
}

.close-mark {
  position: relative;
  display: block;
  width: 18px;
  height: 18px;
}
.close-mark::before, .close-mark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #fff;
}
.close-mark::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-mark::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のスタイル */
.modal_content_area .voice_head {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
/* モーダル内のアイコンも丸くする */
.modal_content_area .voice_head::before {
  border-radius: 50%;
}


.modal_body .voice_text {
  max-height: none;
  overflow: visible;
  font-size: 15px;
}

.modal_body .voice_text p { 
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}
.voice_ttl,
.voice_card,
.voice_rate,
.voice_text p,
.btn_read_more {
  user-select: none;
}

.l-overflow {
  overflow: hidden;
}
.l-section.--min {
  padding-top: 0;
}

.voice_length {
  font-size: 14px;
  position: relative;
  top: -0.5em;
  display: inline-block;
  border-radius: 4px;
  color: gray;
  padding: 2px 8px;
}
.voice_length span {
  font-weight: bold;
}


.u-link {
  color: var(--link-blue);
  text-decoration: underline;
  transition: 0.3s all;
}
.u-link:hover {
  opacity: 0.6;
}