@charset "UTF-8";

/* -------------------------------------
　Noto Sans JP
------------------------------------- */
/* Thin 100 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Thin.ttf');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/* ExtraLight 200 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-ExtraLight.ttf');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* Light 300 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Light.ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Regular 400 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Regular.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Medium 500 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Medium.ttf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* SemiBold 600 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold 700 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Bold.ttf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ExtraBold 800 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-ExtraBold.ttf');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Black 900 */
@font-face {
  font-family: 'Noto Sans JP';
  src: url('/fonts/NotoSansJP-Black.ttf');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------
　Roboto
------------------------------------- */
/* Thin 100 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Thin.ttf');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
/* ExtraLight 200 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-ExtraLight.ttf');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
/* Light 300 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Light.ttf');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Regular 400 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Regular.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Medium 500 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.ttf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
/* SemiBold 600 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-SemiBold.ttf');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Bold 700 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Bold.ttf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* ExtraBold 800 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-ExtraBold.ttf');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Black 900 */
@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Black.ttf');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------
　VARIABLES
------------------------------------- */
:root {
  /* メインカラー */
  --main-color: #f73139;

  /* フォントカラー */
  --font-color: #454545;
  --font-color-dark: #1a1a1a;
  --font-color-gray: #666666;
  --font-color-placeholder: #dddddd;

  /* グラデーション */
  --gradient-main: linear-gradient(90deg, #fde301, #fca11c, #f73139);

  /* 背景 */
  --header-bg-color: #454545;
  --drawer-menu-contents-bg: #f5f5f5;
  --logout-bg-color: #454545;
  --articles-caption-bg: #f5f5f5;
  --articles-category-bg: #f5f5f5;
  --th-bg-color: #454545;

  /* テキストリンク */
  --link-hover: #fca11c;

  /* ボタンhover */
  --btn-hover-transform: scale(1.02);
  --btn-hover-transform-medium: scale(1.05);
  --btn-hover-transform-big: scale(1.07);
  --btn-hover-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  /* ボーダー */
  --border: #dddddd;
  --border-ads-nav: #454545;
  --border-footer: #333333;
  --border-drawer-navi: #1a1a1a;

  /* Swiperバー */
  --swiper-bar: #f5f5f5;

  /* ポイントアイコン */
  --point-yellow: #fde301;
  --point-gray: #f5f5f5;

  /* その他 */
  --color-bg: #f5f5f5;
  --color-red: #f73139;
  --color-gray-light: #aaaaaa;
  --color-gray-lighter: #dddddd;
  --color-white: #ffffff;
  --color-gray: #f5f5f5;
  --color-yellow: #fde301;
  --color-orange: #fca11c;
  --color-black: #1a1a1a;
}

/* -------------------------------------
　common
------------------------------------- */
html {
  font-size: 16px;
}
body {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.8667; /* 28px */
  font-weight: 400;
  color: var(--font-color);
  letter-spacing: 0.05em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  width: 100%;
  background-color: #ffffff;
  /* 最小横幅 */
  min-width: 1400px;
  /* 文字詰め */
  font-feature-settings: 'palt';
  /* 単語折り返し設定 */
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* iOS Safari フォントサイズ拡大 リセット */
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 0.875rem; /* 14px */
    line-height: 1.5; /* 21px */
    font-weight: 500;
    min-width: 100%;
  }
}

img {
  font-size: 0;
  line-height: 0;
  vertical-align: bottom;
  border-width: 0px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* リンク */
a:link {
  color: var(--main-color);
  text-decoration: underline;
}
a:visited {
  color: var(--main-color);
  text-decoration: underline;
}
a:hover {
  color: var(--link-hover);
}
a:active {
  color: var(--link-hover);
}
a:hover img {
  opacity: 0.8;
}

/* スムーススクロール */
html {
  scroll-behavior: smooth;
}

/* 端末表示 */
.pc-display {
  display: block !important;
}
.sp-display {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .pc-display {
    display: none !important;
  }
  .sp-display {
    display: block !important;
  }
}

/* 枠 */
.basic-box {
  margin: 0 auto;
  width: 100%;
  max-width: 1260px;
  padding-right: 80px;
  padding-left: 80px;
  padding-bottom: 60px;
}

/* -------------------------------------
　header
------------------------------------- */
#header {
  background-color: var(--color-white);
}
#header .header-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 110px;
  padding: 0 0 0 100px;
}
#header .header-inner .header-logo a {
  display: inline-block;
  width: 245px;
  height: 83px;
  background-image: url(/images/logo.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  text-indent: -9999px;
}
#header .header-inner .header-logo a:hover {
  opacity: 0.8;
}
@media screen and (max-width: 767px) {
  #header {
    background-size: 18px auto;
    background-position: 19px 19px;
    border-bottom: 1px solid var(--border);
  }
  #header .header-inner {
    align-items: center;
    min-height: 56px;
    margin-right: 56px;
    padding: 0 4px 0 56px;
    border-right: 1px solid #dddddd;
  }
  #header .header-inner .header-logo {
    line-height: 1;
  }
  #header .header-inner .header-logo a {
    width: 100px;
    height: 34px;
  }
}

/**************** グローバルナビ ***************/
#header .header-inner .header-nav {
  width: calc(100% - 245px - 45px);
}
@media screen and (max-width: 767px) {
  #header .header-inner .header-nav {
    display: none;
  }
}

/* ユーザーナビ */
#header .header-inner .header-nav .user-nav {
  margin-bottom: 11px;
  padding-right: 50px;
}
#header .header-inner .header-nav .user-nav ul {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  list-style: none;
}
#header .header-inner .header-nav .user-nav ul li {
  margin-left: 8px;
  min-width: 130px;
}
#header .header-inner .header-nav .user-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  width: 100%;
  height: 32px;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--color-black);
  background-color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-gray-lighter);
  border-radius: 30px;
}
#header .header-inner .header-nav .user-nav ul li a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
#header .header-inner .header-nav .user-nav ul li a p {
  position: relative;
}

/* ログイン */
#header .header-inner .header-nav .user-nav ul li.login a p {
  padding-left: 20px;
}
#header .header-inner .header-nav .user-nav ul li.login a p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-login.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 会員登録 */
#header .header-inner .header-nav .user-nav ul li.member a {
  color: var(--color-white);
  background: var(--gradient-main);
  border: none;
}
#header .header-inner .header-nav .user-nav ul li.member a p {
  padding-left: 20px;
}
#header .header-inner .header-nav .user-nav ul li.member a p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-member.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 交換する */
#header .header-inner .header-nav .user-nav ul li.exchange a p {
  padding-left: 20px;
}
#header .header-inner .header-nav .user-nav ul li.exchange a p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-exchange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* マイリスト */
#header .header-inner .header-nav .user-nav > ul > li.my-list > a > p {
  padding-left: 16px;
}
#header .header-inner .header-nav .user-nav > ul > li.my-list > a > p::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 14px;
  background-image: url(/images/icon-mylist.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 所持ポイント */
#header .header-inner .header-nav .user-nav ul li.point a {
  background-color: var(--color-yellow);
  border: none;
  font-weight: 500;
}
#header .header-inner .header-nav .user-nav ul li.point a p .title {
  padding-left: 18px;
  padding-right: 6px;
  font-size: 0.8125rem;
  line-height: 1;
  color: var(--font-color);
}
#header .header-inner .header-nav .user-nav ul li.point a p .title::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-point.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#header .header-inner .header-nav .user-nav ul li.point a p .number {
  padding-right: 3px;
  font-size: 0.8125rem;
  line-height: 1;
}
#header .header-inner .header-nav .user-nav ul li.point a p.exchange {
  display: flex;
  align-items: center;
  width: auto;
  margin-left: 9px;
  padding: 0 12px 0 12px;
  height: 22px;
  line-height: 1;
  background-color: var(--color-white);
  border-radius: 11px;
}
#header .header-inner .header-nav .user-nav ul li.point a p.exchange span {
  position: relative;
  padding-left: 16px;
}
#header .header-inner .header-nav .user-nav ul li.point a p.exchange span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 11.14px;
  background-image: url(/images/icon-exchange-black.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 会員の名前 */
#header .header-inner .header-nav .user-nav ul li.member-name a {
  font-size: 0.75rem;
  line-height: 1;
  color: var(--font-color);
  font-weight: 400;
  border: none;
  border-radius: 0;
}
#header .header-inner .header-nav .user-nav ul li.member-name a span {
  margin-right: 4px;
  font-size: 0.8125rem;
  line-height: 1.4615;
  font-weight: 500;
  color: var(--color-black);
}
#header .header-inner .header-nav .user-nav ul li.member-name > a > p {
  position: relative;
  padding-right: 16px;
}
#header .header-inner .header-nav .user-nav ul li.member-name > a > p::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  background-image: url(/images/icon-member-name-arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
#header .header-inner .header-nav > .user-nav > ul > li.member-name a:hover {
  transform: none;
  box-shadow: none;
}

/* グローバルナビ */
#header .header-inner .header-nav .global-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 50px;
  height: 56px;
  background-color: var(--header-bg-color);
  border-radius: 28px 0 0 28px;
}
#header .header-inner .header-nav .global-nav > ul {
  display: flex;
  justify-content: flex-end;
  height: 100%;
  list-style: none;
}
#header .header-inner .header-nav .global-nav > ul > li {
  margin-left: 36px;
  height: 100%;
}
#header .header-inner .header-nav .global-nav > ul > li > a {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 0.875rem;
  line-height: 1.4285;
  color: var(--color-white);
  text-decoration: none;
}
#header .header-inner .header-nav .global-nav > ul > li:hover::after,
#header .header-inner .header-nav .global-nav > ul > li.focus::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #f73139;
}
#header .header-inner .header-nav .global-nav > ul > li > a.has-dropdown p {
  position: relative;
  padding-right: 16px;
}
#header .header-inner .header-nav .global-nav > ul > li > a.has-dropdown p::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 6px;
  background-image: url(/images/icon-global-nav-arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* SP用 ポイント・マイリスト */
#header .header-inner .sp-point-my {
  display: none;
}
@media screen and (max-width: 767px) {
  #header .header-inner .sp-point-my {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #header .header-inner .sp-point-my ul {
    list-style: none;
    display: flex;
    align-items: center;
  }
  #header .header-inner .sp-point-my .point a {
    display: flex;
    align-items: center;
    padding: 8px;
    width: 100%;
    height: 30px;
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--font-color-dark);
    background-color: var(--color-yellow);
    border: none;
    font-weight: 500;
    border-radius: 17px;
    text-decoration: none;
  }
  #header .header-inner .sp-point-my .point a p {
    position: relative;
    padding: 0 20px;
  }
  #header .header-inner .sp-point-my .point a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-point-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  #header .header-inner .sp-point-my .point a p::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 13px;
    background-image: url(/images/icon-exchange-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  #header .header-inner .sp-point-my .my-list {
    margin-left: 3px;
  }
}

/**************** SP用 ヘッダー下部 ***************/
.header-bottom-sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .header-bottom-sp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 6px 6px 20px;
    border-top: 1px solid var(--border);
  }

  /* 会員名 */
  .header-bottom-sp .member-name {
    padding-left: 20px;
    font-size: 0.625rem;
    line-height: 1;
    color: var(--font-color);
    position: relative;
  }
  .header-bottom-sp .member-name::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-member-name.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
  }
  .header-bottom-sp .member-name a {
    display: inline-block;
    color: var(--font-color-dark);
    text-decoration: none;
  }
  .header-bottom-sp .member-name span {
    margin-right: 4px;
    font-size: 0.75rem;
    line-height: 1;
    color: var(--font-color-dark);
  }

  /* ポイント */
  .header-bottom-sp .sp-point ul {
    list-style: none;
    display: flex;
    align-items: center;
  }
  .header-bottom-sp .sp-point .point a {
    display: flex;
    align-items: center;
    padding: 8px;
    width: 100%;
    height: 30px;
    font-size: 0.6875rem;
    line-height: 1;
    font-weight: 500;
    color: var(--font-color-dark);
    background-color: var(--color-yellow);
    border: none;
    font-weight: 500;
    border-radius: 17px;
    text-decoration: none;
  }
  .header-bottom-sp .sp-point .point a p {
    position: relative;
    padding: 0 20px;
  }
  .header-bottom-sp .sp-point .point a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-point-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .header-bottom-sp .sp-point .point a p::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 13px;
    background-image: url(/images/icon-exchange-sp.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
}

/**************** ドロップダウンメニュー（グローバルメニュー） ***************/
.global-nav > ul > li {
  position: relative;
}

/* 吹き出し */
.global-nav > ul > li .box {
  padding-top: 10px;
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
}

/* hover時に表示 */
.global-nav > ul > li:hover .box {
  display: block;
}

/* コンテンツ枠 */
.global-nav > ul > li .box .contents {
  padding: 15px;
  min-width: 484px;
  background: var(--gradient-main);
  border-radius: 8px;
}

/* メニュー */
.global-nav > ul > li .box .contents .menu {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  list-style: none;
}
.global-nav > ul > li .box .contents .menu li {
  margin-bottom: 10px;
  width: calc((100% / 2) - 5px);
}
.global-nav > ul > li .box .contents .menu li:nth-last-child(-n + 2) {
  margin-bottom: 0;
}
.global-nav > ul > li .box .contents .menu li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 54px;
  font-size: 0.875rem;
  line-height: 1.4285;
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
  border-radius: 27px;
  background-color: var(--color-white);
}
.global-nav > ul > li .box .contents .menu li a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

.global-nav > ul > li .box .contents .menu li.all {
  width: 100%;
}
.global-nav > ul > li .box .contents .menu li a {
  background-position: 6px 6px;
  background-repeat: no-repeat;
  background-size: 42px 42px;
}
.global-nav > ul > li .box .contents .menu li.all a {
  background-image: url(/images/icon-all.svg);
}
.global-nav > ul > li .box .contents .menu li.calc a {
  background-image: url(/images/icon-calc.svg);
}
.global-nav > ul > li .box .contents .menu li.links a {
  background-image: url(/images/icon-links.svg);
}
.global-nav > ul > li .box .contents .menu li.scoring a {
  background-image: url(/images/icon-scoring.svg);
}
.global-nav > ul > li .box .contents .menu li.classification a {
  padding-left: 20px;
  background-image: url(/images/icon-classification.svg);
}
.global-nav > ul > li .box .contents .menu li.protocol a {
  padding-left: 38px;
  background-image: url(/images/icon-protocol.svg);
}
.global-nav > ul > li .box .contents .menu li.glossary a {
  background-image: url(/images/icon-glossary.svg);
}
.global-nav > ul > li .box .contents .menu li.illust a {
  background-image: url(/images/icon-illust.svg);
}
.global-nav > ul > li .box .contents .menu li.template a {
  background-image: url(/images/icon-template.svg);
}
.global-nav > ul > li .box .contents .menu li.atlas a {
  background-image: url(/images/icon-atlas.svg);
}
.global-nav > ul > li .box .contents .menu li.other a {
  background-image: url(/images/icon-other.svg);
}

/*** オーバーレイ ***/
/* 画面全体を覆う黒20%のオーバーレイ */
.header-nav::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}

/* グローバルナビはオーバーレイより前面に出す */
.header-nav .global-nav {
  position: relative;
  z-index: 200;
}

/* has-dropdown を hover した時のみオーバーレイを表示 */
.header-nav:has(.global-nav > ul > li:hover > a.has-dropdown)::before {
  opacity: 1;
  pointer-events: auto;
}

/**************** ドロップダウンメニュー（ユーザーメニュー） ***************/
.user-nav > ul > li {
  position: relative;
}

/* 吹き出し */
.user-nav > ul > li .user-box {
  padding-top: 10px;
  display: none;
  position: absolute;
  top: calc(100% - 4px);
  right: 0;
  z-index: 1000;
}

/* hover時に表示 */
.user-nav > ul > li:hover .user-box {
  display: block;
}

/* コンテンツ枠 */
.user-nav > ul > li .user-box .user-contents {
  padding: 20px 0 0 0;
  min-width: 320px;
  background-color: var(--color-bg);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/*** コンテンツ枠 ****/
/* EDUONE POINT */
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box {
  padding: 18px 15px 20px 15px;
  background-color: var(--color-white);
  border-top: 1px dotted var(--border);
  border-bottom: 1px dotted var(--border);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .title {
  margin-bottom: 1px;
  font-size: 0.875rem;
  line-height: 1.3571;
  font-weight: 700;
  text-align: center;
  color: var(--font-color-dark);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point {
  text-align: center;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point p {
  display: inline-block;
  padding: 0 0 0 24px;
  font-size: 1.875rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-align: center;
  color: var(--font-color-dark);
  position: relative;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point p::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url(/images/icon-eduone-point.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .history {
  text-align: center;
  padding-top: 3px;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .history a {
  display: inline-block;
  width: auto;
  height: auto;
  padding: 0 10px;
  font-size: 0.75rem;
  line-height: 1.4166;
  font-weight: 500;
  text-decoration: none;
  color: var(--font-color-dark);
  position: relative;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .history a:hover {
  color: var(--main-color);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .history a::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 6px;
  background-image: url(/images/icon-point-history-arrow.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point-exchange {
  padding: 12px 25px 0 25px;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point-exchange a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 40px;
  font-size: 0.8125rem;
  line-height: 1;
  font-weight: 600;
  color: var(--font-color-dark);
  background-color: var(--color-yellow);
  border-radius: 20px;
  text-decoration: none;
  position: relative;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point-exchange a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point-exchange a span {
  position: relative;
  padding-left: 20px;
}
#header .user-nav > ul > li .user-box .user-contents .eduone-point-box .point-exchange a span::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 13px;
  background-image: url(/images/icon-point-exchange.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ユーザーナビ（ログイン時） */
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn {
  padding: 15px 15px 20px 15px;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li {
  list-style: none;
  margin-bottom: 7px;
  margin-left: 0;
  width: 100%;
  min-width: 100%;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li:last-child {
  margin-bottom: 0;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 42px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 700;
  color: var(--font-color-dark);
  background-color: var(--color-white);
  border: 1px solid var(--border);
  text-decoration: none;
  border-radius: 21px;
  background-repeat: no-repeat;
  background-position: 22px 50%;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li.my-list a {
  background-image: url(/images/icon-my-list.svg);
  background-size: 10px 14px;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li.webinars a {
  background-image: url(/images/icon-webinars.svg);
  background-size: 14px 13px;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li.messages a {
  background-image: url(/images/icon-messages.svg);
  background-size: 14px 14px;
}
#header .user-nav > ul > li .user-box .user-contents .user-nav-btn ul li.member-info a {
  background-image: url(/images/icon-user-member-info.svg);
  background-size: 16px 16px;
}

/* ログアウトボタン（ログイン時） */
#header .user-nav > ul > li .user-box .user-contents .btn-logout {
  padding: 0 15px 20px 15px;
}
#header .user-nav > ul > li .user-box .user-contents .btn-logout a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 46px;
  font-size: 0.875rem;
  line-height: 1;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  background-color: var(--logout-bg-color);
  border-radius: 27px;
}
#header .user-nav > ul > li .user-box .user-contents .btn-logout a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

/*** 重なり順をカスタマイズ ***/

/* グローバルナビ */
.header-nav .global-nav {
  position: relative;
  z-index: 200;
}

/* -------------------------------------
　SP用ドロワーメニュー（ハンバーガーメニュー）
------------------------------------- */
/**************** drawer base ***************/
.drawer {
  display: none;
}
@media screen and (max-width: 767px) {
  .drawer {
    display: block;
    /* 別のウィンドウが開く際のアニメーション(徐々に非表示) */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.7s ease,
      visibility 0.7s ease;
  }

  /* checkbox */
  .drawer #drawer-toggle {
    display: none;
  }

  /**************** button ***************/
  .drawer .drawer-button {
    /* 
    通常：absolute（ヘッダーなどのレイアウトに合わせて配置）
    上部固定にしたい場合は ↓ を変更

    position: fixed;

    に変更すると、メニューを開いていない状態でも
    ハンバーガーボタンが常に画面右上に固定されます。
    */
    position: absolute;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1002;
  }

  /* 
  メニューを開いた時のみ固定
  （通常は absolute → 開くと fixed）

  常に固定にする場合は
  この指定は削除してOK
  */
  .drawer #drawer-toggle:checked + .drawer-button {
    position: fixed;
  }

  /**************** hamburger ***************/
  .drawer .hamburger {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
  }
  .drawer .hamburger span {
    width: 22px;
    height: 1px;
    background: #000;
    display: block;
    border-radius: 999px;
    transition: 0.4s;
  }

  /* ×アニメーション */
  .drawer #drawer-toggle:checked + .drawer-button .hamburger span:nth-child(1) {
    transform: translateY(5px) rotate(30deg);
    background: #fff;
  }
  .drawer #drawer-toggle:checked + .drawer-button .hamburger span:nth-child(2) {
    opacity: 0;
  }
  .drawer #drawer-toggle:checked + .drawer-button .hamburger span:nth-child(3) {
    transform: translateY(-5px) rotate(-30deg);
    background: #fff;
  }

  /**************** menu text ***************/
  .drawer .menu-text {
    width: 22px;
    height: 6px;
    background: url(/images/drawer-menu.svg) center/contain no-repeat;
  }
  .drawer #drawer-toggle:checked + .drawer-button .menu-text {
    background: url(/images/drawer-menu-hover.svg) center/contain no-repeat;
  }

  /**************** overlay ***************/
  .drawer .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
    z-index: 1000;
  }
  .drawer #drawer-toggle:checked ~ .drawer-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  /**************** menu ***************/
  .drawer .drawer-menu {
    /* メニュー本体は fixed で画面全体に表示 */
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 56px 20px 30px 20px;
    background: var(--gradient-main);
    transform: translateX(100%);
    transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    overflow: auto;
    z-index: 1001;
  }
  .drawer #drawer-toggle:checked ~ .drawer-menu {
    transform: translateX(0);
  }

  /**************** menu list ***************/
  .drawer .drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .drawer .drawer-list li {
    margin-bottom: 24px;
  }
  .drawer .drawer-list a {
    color: #fff;
    text-decoration: none;
    font-size: 20px;
  }

  /**************** scroll lock ***************/
  body:has(.drawer #drawer-toggle:checked) {
    overflow: hidden;
  }

  /**************** contents ***************/
  .drawer .drawer-menu .header {
    margin-bottom: 10px;
    background-color: var(--drawer-menu-contents-bg);
    border-radius: 6px;
  }
  .drawer .drawer-menu .footer {
    background-color: var(--drawer-menu-contents-bg);
    border-radius: 6px;
  }

  /* ユーザーナビ */
  .drawer .drawer-menu .header .drawer-user-nav {
    padding: 15px 20px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    list-style: none;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li {
    width: calc((144 / 295) * 100%);
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li:last-child {
    margin-left: 0;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    width: 100%;
    height: 40px;
    font-size: 0.8125rem;
    line-height: 1.4166;
    color: var(--color-black);
    background-color: var(--color-white);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-gray-lighter);
    border-radius: 20px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li a:hover {
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-hover-box-shadow);
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li a p {
    position: relative;
  }

  /* ログイン */
  .drawer .drawer-menu .header .drawer-user-nav ul li.login a p {
    padding-left: 20px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li.login a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-login.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  /* 会員登録 */
  .drawer .drawer-menu .header .drawer-user-nav ul li.member a {
    color: var(--color-white);
    background: var(--gradient-main);
    border: none;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li.member a p {
    padding-left: 20px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li.member a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-member.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  /* マイリスト */
  .drawer .drawer-menu .header .drawer-user-nav ul li.my-list a p {
    padding-left: 16px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li.my-list a p::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 14px;
    background-image: url(/images/icon-mylist.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  /* メッセージ */
  .drawer .drawer-menu .header .drawer-user-nav ul li.message a p {
    padding-left: 20px;
  }
  .drawer .drawer-menu .header .drawer-user-nav ul li.message a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-message.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  /* ユーザーナビ（ログイン時） */
  .drawer .drawer-menu .drawer-user-nav-login {
    padding: 15px;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li {
    list-style: none;
    margin-bottom: 7px;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li:last-child {
    margin-bottom: 0;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 42px;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 700;
    color: var(--font-color-dark);
    background-color: var(--color-white);
    border: 1px solid var(--border);
    text-decoration: none;
    border-radius: 21px;
    background-repeat: no-repeat;
    background-position: 22px 50%;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li.my-list a {
    background-image: url(/images/icon-my-list.svg);
    background-size: 10px 14px;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li.webinars a {
    background-image: url(/images/icon-webinars.svg);
    background-size: 14px 13px;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li.messages a {
    background-image: url(/images/icon-messages.svg);
    background-size: 14px 14px;
  }
  .drawer .drawer-menu .drawer-user-nav-login ul li.my-member a {
    background-image: url(/images/icon-user-member-info.svg);
    background-size: 16px 16px;
  }

  /* 会員名・ポイント */
  .drawer .drawer-menu .drawer-member-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 20px 6px 15px;
    border-bottom: 1px dotted var(--border);
  }
  .drawer .drawer-menu .drawer-member-name.member-name-info {
    padding: 7px 6px 6px 20px;
  }
  .drawer .drawer-menu .drawer-member-name .member-name {
    padding-left: 20px;
    font-size: 0.75rem;
    line-height: 1.4166;
    color: var(--font-color);
    position: relative;
  }
  .drawer .drawer-menu .drawer-member-name.member-name-info .member-name {
    padding-left: 21px;
    font-size: 0.625rem;
    line-height: 1.5;
  }
  .drawer .drawer-menu .drawer-member-name .member-name::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-member-name.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
  }
  .drawer .drawer-menu .drawer-member-name .member-name a {
    display: inline-block;
    color: var(--font-color-dark);
    text-decoration: none;
  }
  .drawer .drawer-menu .drawer-member-name .member-name span {
    margin-right: 4px;
    font-size: 0.8125rem;
    line-height: 1.4615;
    color: var(--font-color-dark);
  }
  .drawer .drawer-menu .drawer-member-name.member-name-info .member-name span {
    font-size: 0.75rem;
    line-height: 1.4166;
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    list-style: none;
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li {
    margin-left: 5px;
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    width: 100%;
    height: 30px;
    color: var(--color-black);
    font-weight: 600;
    text-decoration: none;
    border-radius: 17px;
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li a p {
    position: relative;
    padding-left: 19px;
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li.point a {
    font-size: 0.6875rem;
    line-height: 1.3636;
    background-color: var(--color-yellow);
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li.point a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-point.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li.exchange a {
    font-size: 0.75rem;
    line-height: 1.4166;
    background-color: var(--color-white);
  }
  .drawer .drawer-menu .drawer-member-name .point-exchange ul li.exchange a p::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-exchange.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    transform: translateY(-50%);
  }

  /* ログアウトボタン */
  .drawer .drawer-menu .btn-logout a {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
    width: 100%;
    height: 46px;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 600;
    color: var(--color-white);
    text-decoration: none;
    background-color: var(--logout-bg-color);
    border-radius: 27px;
  }

  /* 会員名・ポイント */
  .drawer .drawer-menu .drawer-member-name .member-info a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 13px;
    height: 30px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    color: var(--font-color-dark);
    text-decoration: none;
    border: 1px solid var(--border);
    background-color: var(--drawer-menu-contents-bg);
    border-radius: 15px;
    box-sizing: border-box;
  }
  .drawer .drawer-menu .drawer-member-name .member-info a span {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .drawer .drawer-menu .drawer-member-name .member-info a span::before {
    content: '';
    display: inline-block;
    margin-right: 4px;
    width: 14px;
    height: 14px;
    background-image: url(/images/icon-member-info.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 50%;
  }

  /* EDUONE POINT */
  .drawer .drawer-menu .eduone-point-box {
    padding: 18px 15px 20px 15px;
    background-color: var(--color-white);
    border-bottom: 1px dotted var(--border);
  }
  .drawer .drawer-menu .eduone-point-box .title {
    margin-bottom: 1px;
    font-size: 0.875rem;
    line-height: 1.3571;
    font-weight: 700;
    text-align: center;
    color: var(--font-color-dark);
  }
  .drawer .drawer-menu .eduone-point-box .point {
    text-align: center;
  }
  .drawer .drawer-menu .eduone-point-box .point p {
    display: inline-block;
    padding: 0 0 0 24px;
    font-size: 1.875rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-align: center;
    color: var(--font-color-dark);
    position: relative;
  }
  .drawer .drawer-menu .eduone-point-box .point p::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(/images/icon-eduone-point.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .drawer .drawer-menu .eduone-point-box .history {
    text-align: center;
    padding-top: 3px;
  }
  .drawer .drawer-menu .eduone-point-box .history a {
    display: inline-block;
    padding: 0 10px;
    font-size: 0.75rem;
    line-height: 1.4166;
    font-weight: 500;
    text-decoration: none;
    color: var(--font-color-dark);
    position: relative;
  }
  .drawer .drawer-menu .eduone-point-box .history a::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 6px;
    background-image: url(/images/icon-point-history-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .drawer .drawer-menu .eduone-point-box .point-exchange {
    padding: 12px 20px 0 20px;
  }
  .drawer .drawer-menu .eduone-point-box .point-exchange a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    font-size: 0.8125rem;
    line-height: 1;
    font-weight: 600;
    color: var(--font-color-dark);
    background-color: var(--color-yellow);
    border-radius: 20px;
    text-decoration: none;
    position: relative;
  }
  .drawer .drawer-menu .eduone-point-box .point-exchange a span {
    position: relative;
    padding-left: 20px;
  }
  .drawer .drawer-menu .eduone-point-box .point-exchange a span::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 13px;
    background-image: url(/images/icon-point-exchange.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  /* drawer用 検索ワードフォーム */
  .drawer .drawer-menu .drawer-search-box {
    padding: 8px 15px;
    background-color: var(--drawer-menu-contents-bg);
    border-radius: 6px 6px 0 0;
  }
  .drawer .drawer-menu .drawer-search-box .search-box {
    display: flex;
    align-items: center;
    padding-right: 5px;
    border: 1px solid var(--border);
    border-radius: 23px;
    background-color: var(--color-white);
    overflow: hidden;
  }
  .drawer .drawer-menu .drawer-search-box .search-box input {
    flex: 1;
    border: none;
    padding: 11px 20px 7px 20px;
    font-size: 0.875rem;
    line-height: 1.4285;
    font-weight: 400;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    outline: none;
  }
  .drawer .drawer-menu .drawer-search-box .search-box input::placeholder {
    color: var(--font-color-placeholder);
  }
  .drawer .drawer-menu .drawer-search-box .search-box button {
    width: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .drawer .drawer-menu .drawer-search-box .search-box button img {
    width: 100%;
    height: auto;
  }
  .drawer .drawer-menu .drawer-search-box .search-box button:hover {
    transform: var(--btn-hover-transform-medium);
    box-shadow: var(--btn-hover-box-shadow);
  }

  /**************** アコーディオンメニュー ***************/
  .accordion {
    width: 100%;
  }
  .accordion .item {
    border-bottom: 1px solid var(--border);
  }
  .accordion .item:last-child {
    border-bottom: none;
  }

  /* アコーディオンボタン・リンクメニュー */
  .accordion .menu,
  .accordion .link-menu {
    width: 100%;
    padding: 17px 15px 17px 20px;
    font-size: 0.875rem;
    line-height: 1.4285;
    color: var(--font-color-dark);
    text-align: left;
    background-color: var(--color-white);
  }
  .accordion .item:first-child button,
  .accordion .item:first-child a {
    border-radius: 6px 6px 0 0;
  }
  .accordion .item:last-child button,
  .accordion .item:last-child a {
    border-radius: 0 0 6px 6px;
  }
  .accordion .menu {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .accordion .link-menu {
    display: block;
    text-decoration: none;
    color: inherit;
  }
  .accordion .menu p,
  .accordion .link-menu p {
    width: 100%;
    padding-right: 20px;
  }

  /* 矢印 */
  .accordion .arrow {
    background-image: url(/images/drawer-navi-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    width: 10px;
    height: 6px;
    transform: rotate(0deg);
    /* 画像なし矢印
    width: 10px;
    height: 6px;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333;
    transform: rotate(45deg);
    */
    transition: transform 0.3s ease;
  }

  /* 開いた時の矢印 */
  .accordion .item.active .arrow {
    transform: rotate(-180deg);
  }

  /* コンテンツ ------------------------------- */
  .accordion .content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease; /* スライドして開くように表示 */
    background-color: var(--drawer-menu-contents-bg);
  }
  .accordion .content .accordion-tools-menu-list-wrap {
    background: var(--color-bg);
  }

  /* ツール */
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    list-style: none;
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li a {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 52px;
    width: 100%;
    height: 78px;
    font-size: 0.625rem;
    line-height: 1.2;
    font-weight: 500;
    color: var(--font-color-dark);
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    background-color: var(--color-white);
    background-position: 50% 7px;
    background-repeat: no-repeat;
    background-size: 45px 45px;
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li a:hover {
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-hover-box-shadow);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.calc a {
    background-image: url(/images/icon-calc.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.links a {
    background-image: url(/images/icon-links.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.scoring a {
    background-image: url(/images/icon-scoring.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.classification a {
    padding-left: 0;
    background-image: url(/images/icon-classification.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.protocol a {
    padding-left: 0;
    background-image: url(/images/icon-protocol.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.glossary a {
    background-image: url(/images/icon-glossary.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.illust a {
    background-image: url(/images/icon-illust.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.template a {
    background-image: url(/images/icon-template.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.atlas a {
    background-image: url(/images/icon-atlas.svg);
  }
  .accordion .content .accordion-tools-menu-list-wrap .tools-menu-list li.other a {
    background-image: url(/images/icon-other.svg);
  }

  /* ニュース・記事 */
  .accordion .content .accordion-news-menu-list-wrap .news-menu-list {
    padding: 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    list-style: none;
  }
  .accordion .content .accordion-news-menu-list-wrap .news-menu-list li a {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 20px;
    width: 100%;
    min-height: 55px;
    font-size: 0.75rem;
    line-height: 1.4285;
    font-weight: 500;
    color: var(--font-color-dark);
    text-decoration: none;
    text-align: center;
    border-radius: 6px;
    background-color: var(--color-white);
    background-position: 50% 7px;
    background-repeat: no-repeat;
    background-size: 45px 45px;
  }
  .accordion .content .accordion-news-menu-list-wrap .news-menu-list li a:hover {
    transform: var(--btn-hover-transform);
    box-shadow: var(--btn-hover-box-shadow);
  }
}

/* -------------------------------------
　左上ドロワーメニュー（画像）
------------------------------------- */
/**************** drawer base ***************/
.drawer-left {
  /* 別のウィンドウが開く際のアニメーション(徐々に非表示) */
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}
/* checkbox */
.drawer-left #drawer-toggle-left {
  display: none;
}

/**************** button ***************/
.drawer-left .drawer-button {
  /* 
    通常：absolute（ヘッダーなどのレイアウトに合わせて配置）
    上部固定にしたい場合は ↓ を変更 

    position: fixed;

    に変更すると、メニューを開いていない状態でも
    ハンバーガーボタンが常に画面右上に固定されます。
    */
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  display: block;
  cursor: pointer;
  z-index: 1002;
  background-image: url(/images/icon-dots-square.svg);
  background-repeat: no-repeat;
  background-size: 20px auto;
  background-position: center;
}
.drawer-left .drawer-button:hover {
  background-color: rgba(245, 245, 245, 1);
}
@media screen and (max-width: 767px) {
  .drawer-left .drawer-button:hover {
    background-color: rgba(245, 245, 245, 0);
  }
}

/* 
  メニューを開いた時のみ固定
  （通常は absolute → 開くと fixed）

  常に固定にする場合は
  この指定は削除してOK
  */
.drawer-left #drawer-toggle-left:checked + .drawer-button {
  position: fixed;
  background-image: url(/images/icon-dots-square-hover.svg);
  background-repeat: no-repeat;
  background-size: 16px auto;
  background-position: center;
}

/**************** overlay ***************/
.drawer-left .drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s;
  z-index: 1000;
}
.drawer-left #drawer-toggle-left:checked ~ .drawer-overlay {
  opacity: 1;
  pointer-events: auto;
}

/**************** menu ***************/
.drawer-left .drawer-menu {
  /* メニュー本体は fixed で画面全体に表示 */
  position: fixed;
  top: 0;
  left: 0;
  min-width: 320px;
  height: 100%;
  padding: 70px 20px;
  background: var(--drawer-menu-contents-bg);
  transform: translateX(-100%);
  transition: 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  overflow: auto;
  z-index: 1001;
}
@media screen and (max-width: 767px) {
  .drawer-left .drawer-menu {
    width: 100%;
    padding: 56px 20px 30px 20px;
  }
}
.drawer-left #drawer-toggle-left:checked ~ .drawer-menu {
  transform: translateX(0);
}

/**************** menu list ***************/
.drawer-left .drawer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.drawer-left .drawer-list li {
  margin-bottom: 24px;
}
.drawer-left .drawer-list a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
}

/**************** scroll lock ***************/
body:has(.drawer-left #drawer-toggle-left:checked) {
  overflow: hidden;
}

/**************** contents ***************/
.drawer-left .drawer-menu .services-menu .services-menu-list {
  background-color: var(--color-white);
  border-radius: 6px;
}
.drawer-left .drawer-menu .services-menu .services-menu-list li {
  list-style: none;
  border-bottom: 1px dotted var(--border);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li:last-child {
  border-bottom: none;
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a {
  display: block;
  padding: 18px 15px 17px 15px;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--font-color-dark);
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .drawer-left .drawer-menu .services-menu .services-menu-list li a {
    display: block;
    padding: 17px 15px 17px 20px;
    font-size: 0.875rem;
    line-height: 1.4285;
    font-weight: 500;
    color: var(--font-color-dark);
    text-decoration: none;
  }
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a:hover {
  color: var(--main-color);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a p {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 40px;
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a p::before {
  content: '';
  display: inline-block;
  width: 23px;
  height: 23px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.ec-eduone p::before {
  background-image: url(/images/icon_ec-eduone.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.vets-channel p::before {
  background-image: url(/images/icon_vets_channel.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.vets-academy p::before {
  background-image: url(/images/icon_vets_academy.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.eduward-ebook p::before {
  background-image: url(/images/icon_eduward_ebook.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.etv-store p::before {
  background-image: url(/images/icon_etv_store.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.search-eduone p::before {
  background-image: url(/images/icon_search_eduone.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.ivalalearn p::before {
  background-image: url(/images/icon_ivalalearn.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.trim-plus p::before {
  background-image: url(/images/icon_trim_plus.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.trim p::before {
  background-image: url(/images/icon_trim.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.vets-vr p::before {
  background-image: url(/images/icon_vets_vr.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.qdi p::before {
  background-image: url(/images/icon_qdi.svg);
}
.drawer-left .drawer-menu .services-menu .services-menu-list li a.eduone-campaign p::before {
  background-image: url(/images/icon_eduone_campaign.svg);
}

/* -------------------------------------
  片方が開いたらもう片方を非表示(複数設置している場合)
------------------------------------- */

/* drawer が開いている時 → drawer-left を隠す */
body:has(.drawer #drawer-toggle:checked) .drawer-left {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* drawer-left が開いている時 → drawer を隠す */
body:has(.drawer-left #drawer-toggle-left:checked) .drawer {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* -------------------------------------
　footer
------------------------------------- */
.footer-wrap {
  padding: 80px 50px 0 50px;
  background-image: url(/images/footer-bottom-logo.svg);
  background-repeat: no-repeat;
  background-position: left 50% bottom 10px;
  background-size: calc(100% - 20px) auto;
  background-color: var(--color-black);
}
@media screen and (max-width: 767px) {
  .footer-wrap {
    padding: 60px 25px 0 25px;
    background-position: left 50% bottom 5px;
    background-size: calc(100% - 1.125rem) auto;
  }
}
.footer-box {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
}
@media screen and (max-width: 767px) {
  .footer-box {
    flex-direction: column;
  }
}

/* ------------- ロゴ・SNS ------------- */
.footer-box .logo-sns {
  width: 180px;
}
@media screen and (max-width: 767px) {
  .footer-box .logo-sns {
    margin: 0 auto;
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-footer);
  }
}

/* ロゴ */
.footer-box .logo-sns .logo {
  width: 180px;
}
@media screen and (max-width: 767px) {
  .footer-box .logo-sns .logo {
    margin: 0 auto;
    width: 170px;
  }
}
.footer-box .logo-sns .logo img {
  width: 100%;
  height: auto;
}

/* SNS */
.footer-box .logo-sns .sns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .footer-box .logo-sns .sns {
    margin-top: 20px;
  }
}
.footer-box .logo-sns .sns li {
  margin-right: 12px;
  width: 42px;
}
.footer-box .logo-sns .sns li:last-child {
  margin-right: 0;
}
.footer-box .logo-sns .sns li a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-white);
  border-radius: 50%;
  width: 42px;
  height: 42px;
}
.footer-box .logo-sns .sns li a img {
  height: auto;
  opacity: 1;
}
.footer-box .logo-sns .sns li a.x img {
  width: 20px;
}
.footer-box .logo-sns .sns li a.facebook img {
  width: 26px;
}
.footer-box .logo-sns .sns li a.instagram img {
  width: 22px;
}
.footer-box .logo-sns .sns li a:hover {
  transform: var(--btn-hover-transform-big);
  box-shadow: var(--btn-hover-box-shadow);
}

/* ------------- メイン ------------- */
.footer-main {
  width: calc(100% - 180px - 60px);
}
@media screen and (max-width: 767px) {
  .footer-main {
    width: 100%;
  }
}
.footer-main .footer-top {
  margin-bottom: 35px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .footer-main .footer-top {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 0;
  }
}

/* ユーザーナビ */
.footer-main .footer-top .user-nav {
  flex: 1;
}
.footer-main .footer-top .user-nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .footer-main .footer-top .user-nav ul {
    justify-content: center;
  }
}
.footer-main .footer-top .user-nav ul li {
  margin-left: 10px;
  min-width: 130px;
}
@media screen and (max-width: 767px) {
  .footer-main .footer-top .user-nav ul li {
    margin-left: calc(11 / 325 * 100%);
    width: calc(157 / 325 * 100%);
    min-width: auto;
  }
}
.footer-main .footer-top .user-nav ul li:first-child {
  margin-left: 0;
}
.footer-main .footer-top .user-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  width: 100%;
  height: 32px;
  font-size: 0.75rem;
  color: var(--color-black);
  background-color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-gray-lighter);
  border-radius: 30px;
}
@media screen and (max-width: 767px) {
  .footer-main .footer-top .user-nav ul li a {
    padding: 0 20px;
    height: 40px;
    font-size: 0.8125rem;
    border-radius: 20px;
  }
}
.footer-main .footer-top .user-nav ul li a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
.footer-main .footer-top .user-nav ul li a p {
  position: relative;
}

/* ログイン */
.footer-main .footer-top .user-nav ul li a.login p {
  padding-left: 20px;
}
.footer-main .footer-top .user-nav ul li a.login p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-login.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* ログアウト */
.footer-main .footer-top .user-nav ul li a.logout p {
  padding-left: 20px;
}
.footer-main .footer-top .user-nav ul li a.logout p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-logout.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* マイページ */
.footer-main .footer-top .user-nav ul li a.my-list {
  color: var(--color-white);
  background: var(--gradient-main);
  border: none;
}
.footer-main .footer-top .user-nav ul li a.my-list p {
  padding-left: 20px;
}
.footer-main .footer-top .user-nav ul li a.my-list p::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/icon-my.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 広告掲載のご案内・取材掲載のご依頼枠 */
.footer-main .footer-top .ads-nav ul {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  list-style: none;
}
.footer-main .footer-top .ads-nav ul li {
  margin-left: 15px;
  min-width: 250px;
}
.footer-main .footer-top .ads-nav ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  width: 100%;
  height: 54px;
  font-size: 0.9375rem;
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--border-ads-nav);
  border-radius: 30px;
  background-image: url(/images/ads-arrow.svg);
  background-repeat: no-repeat;
  background-position: right 20px top 50%;
  background-size: 13px auto;
}
.footer-main .footer-top .ads-nav ul li a:hover {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
}

@media screen and (max-width: 767px) {
  .footer-main .footer-top .ads-nav {
    width: 100%;
    margin-top: 15px;
  }

  .footer-main .footer-top .ads-nav ul {
    width: 100%;
  }

  .footer-main .footer-top .ads-nav ul li {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }
}

/* メニュー */
.footer-main .nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px 20px;
}
@media screen and (max-width: 767px) {
  .footer-main .nav {
    display: none;
  }
}
.footer-main .nav .col {
  width: 100%;
}
.footer-main .nav .col .box {
  margin-bottom: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--border-footer);
}
.footer-main .nav .col .box:last-child {
  margin-bottom: 0;
}
.footer-main .nav .col .box a {
  color: var(--color-white);
  text-decoration: none;
}
.footer-main .nav .col .box a:hover {
  color: var(--main-color);
}
.footer-main .nav .col .box h4 {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
}
.footer-main .nav .col .box ul {
  padding-top: 14px;
}
.footer-main .nav .col .box ul li {
  margin-bottom: 11px;
  padding-left: 17px;
  font-size: 0.8125rem;
  line-height: 1.4615;
  font-weight: 500;
  list-style: none;
  position: relative;
}
.footer-main .nav .col .box ul li:last-child {
  margin-bottom: 0;
}
.footer-main .nav .col .box ul li::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 1px;
  background-image: url(/images/icon-footer-nav.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* バナー */
.footer-main .bnr {
  padding-top: 40px;
}
.footer-main .bnr ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .footer-main .bnr ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
}
.footer-main .bnr ul li img {
  max-width: 100%;
  height: auto;
}

/* ------------- ボトム ------------- */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 80px auto 0 auto;
  padding-top: 35px;
  padding-bottom: 34px;
  width: 100%;
  max-width: 1400px;
  border-top: 1px solid var(--border-footer);
}
@media screen and (max-width: 767px) {
  .footer-bottom {
    flex-direction: column;
    margin: 41px auto 0 auto;
    padding-top: 25px;
    padding-bottom: 28px;
    width: 100%;
    max-width: 1400px;
    border-top: 1px solid var(--border-footer);
  }
}

/* その他メニュー */
.footer-bottom .links ul {
  display: flex;
  align-items: center;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .footer-bottom .links ul {
    flex-direction: column;
  }
}
.footer-bottom .links ul li {
  margin-right: 40px;
}
@media screen and (max-width: 767px) {
  .footer-bottom .links ul li {
    margin-right: 0;
    margin-bottom: 15px;
  }
  .footer-bottom .links ul li:last-child {
    margin-bottom: 0;
  }
}
.footer-bottom .links ul li a {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.4166;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .footer-bottom .links ul li a {
    font-size: 0.75rem;
    line-height: 1.4166;
  }
}
.footer-bottom .links ul li a:hover {
  color: var(--main-color);
}

/* コピーライト */
.footer-bottom .copy small {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--color-white);
}
@media screen and (max-width: 767px) {
  .footer-bottom .copy {
    margin-top: 21px;
    padding-top: 23px;
    width: 100%;
    border-top: 1px solid var(--border-footer);
    text-align: center;
  }
  .footer-bottom .copy small {
    font-size: 0.5625rem;
    line-height: 1.22222;
    text-align: center;
  }
}

/* -------------------------------------
　ページトップへボタン
------------------------------------- */
.pagetop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;
  background: var(--main-color);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 999;
}
@media screen and (max-width: 767px) {
  .pagetop {
    right: 10px;
    bottom: 10px;
    width: 44px;
    height: 44px;
  }
}
.pagetop.is-show {
  opacity: 1;
  pointer-events: auto;
}
.pagetop a {
  display: block;
  width: 100%;
  height: 100%;
  background: url('../images/pegetop-arrow.svg') no-repeat center;
  background-size: 17.51px 16px;
  text-indent: -9999px; /* 文字非表示 */
}
@media screen and (max-width: 767px) {
  .pagetop a {
    background-size: 12.26px 11.2px;
  }
}
.pagetop:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

/* -------------------------------------
　contents
------------------------------------- */
.container {
  display: flex;
  justify-content: space-between;
  margin: 30px auto 160px auto;
  width: 100%;
  max-width: 1400px;
  padding: 0 50px;
}
.container-single {
  margin: 30px auto 160px auto;
  width: 100%;
  max-width: calc(950px + (50px + 50px));
  padding: 0 50px;
}
.auth-container {
  margin: 30px auto 160px auto;
  width: 100%;
  max-width: calc(1200px + (50px + 50px));
  padding: 0 50px;
}
@media screen and (max-width: 767px) {
  .container {
    flex-direction: column;
    margin: 0 auto 120px auto;
    padding: 0;
  }
  .container-single {
    margin: 15px auto 120px auto;
    padding: 0 20px;
  }
  .auth-container {
    margin: 15px auto 120px auto;
    padding: 0 20px;
  }
  .container-sp-padd0 {
    padding: 0;
  }
  .container-sp-padd0 .breadcrumb {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 20px - 20px);
  }
}
.container > .contents {
  width: 950px;
}
@media screen and (max-width: 767px) {
  .container > .contents {
    padding-bottom: 0;
    width: 100%;
  }
}
.container .sidebar {
  width: 300px;
}
@media screen and (max-width: 767px) {
  .container .sidebar {
    padding-top: 45px;
    width: 100%;
  }
}

/* 下層ページ */
.container-subpage {
  margin: 30px auto 160px auto;
  width: 100%;
  max-width: 1400px;
  padding: 0 50px;
}
.container-subpage .container {
  padding: 0;
}
@media screen and (max-width: 767px) {
  .container-subpage {
    margin: 15px auto 120px auto;
    padding: 0;
  }
  .container-subpage .breadcrumb {
    margin-left: 20px;
    margin-right: 20px;
    width: calc(100% - 20px - 20px);
  }
}

/* コンテンツタイトル */
.contents-title {
  margin-bottom: 21px;
}
@media screen and (max-width: 767px) {
  .contents-title {
    margin-bottom: 24px;
  }
}
.contents-title h2 {
  padding-left: 36px;
  font-size: 1.5rem;
  line-height: 1.458;
  font-weight: 700;
  color: var(--font-color-dark);
  position: relative;
}
@media screen and (max-width: 767px) {
  .contents-title h2 {
    padding: 0 20px;
    font-size: 1.25rem;
    line-height: 1.45;
    font-weight: 700;
    text-align: center;
  }
}
.contents-title h2::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 6px;
  background-image: url(/images/contents-title.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .contents-title h2::before {
    width: 20px;
    height: 5px;
    top: auto;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* コンテンツボタン */
.contents-btn {
  padding-top: 25px;
}
@media screen and (max-width: 767px) {
  .contents-btn {
    padding: 20px 20px 0 20px;
  }
}
.contents-btn ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}
.contents-btn ul li {
  margin-left: 10px;
  min-width: 300px;
}
@media screen and (max-width: 767px) {
  .contents-btn ul li {
    margin-left: 10px;
    min-width: 160px;
  }
}
.contents-btn ul li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 54px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  background: var(--gradient-main);
  border-radius: 30px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .contents-btn ul li a {
    min-height: 42px;
    font-size: 0.875rem;
    line-height: 1.4285;
  }
}
.contents-btn ul li a::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(/images/icon-contents-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .contents-btn ul li a::after {
    content: '';
    display: inline-block;
    width: 27px;
    height: 27px;
    background-image: url(/images/icon-contents-btn.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
  }
}
.contents-btn ul li a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

/* ------------- SP用 検索ワードフォーム ------------- */
.sp-search-box {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-search-box {
    display: block;
    padding: 8px 20px;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--border);
  }
  .sp-search-box .search-box {
    display: flex;
    align-items: center;
    padding-right: 5px;
    border: 1px solid var(--border);
    border-radius: 23px;
    background-color: var(--color-white);
    overflow: hidden;
  }
  .sp-search-box .search-box input {
    flex: 1;
    border: none;
    padding: 11px 20px 7px 20px;
    font-size: 0.875rem;
    line-height: 1.4285;
    font-weight: 400;
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    outline: none;
  }
  .sp-search-box .search-box input::placeholder {
    color: var(--font-color-placeholder);
  }
  .sp-search-box .search-box button {
    width: 30px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .sp-search-box .search-box button img {
    width: 100%;
    height: auto;
  }
  .sp-search-box .search-box button:hover {
    transform: var(--btn-hover-transform-medium);
    box-shadow: var(--btn-hover-box-shadow);
  }
}

/* 下層ページタイトル */
.page__title {
  margin-bottom: 26px;
}
.page__title .title {
  font-size: 1.5rem;
  line-height: 1.458;
  font-weight: 700;
  color: var(--font-color-dark);
  padding-left: 36px;
  position: relative;
}
.page__title .title::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 6px;
  background-image: url(/images/icon-page-title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .page__title {
    margin-bottom: 26px;
  }
  .page__title .title {
    padding: 0;
    font-size: 1.25rem;
    line-height: 1.45;
    text-align: center;
  }
  .page__title .title::before {
    width: 20px;
    height: 5px;
    top: auto;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* 下層ページサブタイトル */
.page__subtitle .subtitle {
  margin-bottom: 28px;
  padding: 5px 0 2px 18px;
  font-size: 1.5rem;
  line-height: 1.458;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--font-color-dark);
  position: relative;
}
.page__subtitle .subtitle::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 80%; /* 高さは調整可能 */
  background-color: #f73139;
  border-radius: 2px;
}
@media screen and (max-width: 767px) {
  .page__subtitle .subtitle {
    margin: 0 0 20px 0;
    padding: 0 0 0 13px;
    font-size: 1.125rem;
    line-height: 1.555;
  }
  .page__subtitle .subtitle::before {
    top: calc(50% - 3px);
    width: 3px;
    height: 95%; /* 高さは調整可能 */
  }
}

/* リード文 */
.lead__text {
  margin-bottom: 53px;
}
.lead__text_pb {
  margin-bottom: 28px;
}
.lead__text .title {
  margin-bottom: 23px;
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--font-color-dark);
}
.lead__text p {
  margin-bottom: 23px;
  font-size: 0.9375rem;
  line-height: 1.866;
  font-weight: 400;
}
.lead__text p:last-child {
  margin-bottom: 0;
}
.lead__text p .required {
  color: var(--color-red);
}
/* ※リスト */
.asterisk {
  margin-bottom: 23px;
}
.asterisk:last-child {
  margin-bottom: 0;
}
.asterisk li {
  padding-left: 1.3em;
  font-size: 0.9375rem;
  line-height: 1.866;
  font-weight: 400;
  list-style: none;
  position: relative;
}
.asterisk li::before {
  content: '※';
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .lead__text {
    margin-bottom: 28px;
  }
  .lead__text .title {
    margin-bottom: 16px;
    font-size: 1rem;
    line-height: 1.45;
    font-weight: 700;
    color: var(--font-color-dark);
  }
  .lead__text p {
    margin-bottom: 16px;
    font-size: 0.875rem;
    line-height: 1.714;
    font-weight: 400;
  }
  .asterisk {
    margin-bottom: 16px;
  }
  .asterisk li {
    font-size: 0.875rem;
    line-height: 1.714;
    font-weight: 400;
  }
}

/* -------------------------------------
　共通　一覧
------------------------------------- */
.top-articles-section {
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
  .top-articles-section {
    margin-bottom: 45px;
    box-sizing: border-box;
  }
}
.top-articles-section:last-child {
  margin-bottom: 0;
}
.list-wrap {
  width: 100%;
  list-style: none;
  border-top: 1px solid var(--border);
}
.list-wrap li {
  border-bottom: 1px solid var(--border);
  background-color: var(--color-white);
}
.list-wrap li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  text-decoration: none;
  position: relative;
}
@media screen and (max-width: 767px) {
  .list-wrap li a {
    padding: 15px 20px;
  }
}
.list-wrap li a.pr {
  position: relative;
}
.list-wrap li a.pr::after {
  content: 'PR';
  display: inline-block;
  padding: 5px 13px 2px 13px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 500;
  color: var(--font-color);
  border: 1px solid var(--border);
  border-radius: 30px;
  position: absolute;
  top: 20px;
  right: 0;
}

/* 画像 */
.list-wrap li a figure {
  margin-right: 20px;
  width: 135px;
}
@media screen and (max-width: 767px) {
  .list-wrap li a figure {
    margin-right: 12px;
    width: 110px;
  }
}
.list-wrap li a figure img {
  width: 100%;
  aspect-ratio: 135 / 90;
  object-fit: cover;
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .list-wrap li a figure img {
    border-radius: 6px;
  }
}
.list-wrap li a figure.image-contain img {
  object-fit: contain;
}
.list-wrap li a .content {
  flex: 1;
}

/* 名前・タグ */
.list-wrap li a .name-tag {
  margin-bottom: 12px;
  min-height: 27px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .list-wrap li a .name-tag {
    align-items: center;
    margin-bottom: 7px;
    min-height: 22px;
  }
}
.list-wrap li a .name-tag .name {
  font-size: 0.75rem;
  line-height: 2;
  font-weight: 400;
  color: var(--font-color);
}
@media screen and (max-width: 767px) {
  .list-wrap li a .name-tag .name {
    font-size: 0.625rem;
    line-height: 1.5;
    flex: 1;
  }
}
@media screen and (max-width: 767px) {
  .list-wrap li a .name-tag .tag {
    width: 120px;
  }
}
.list-wrap li a .name-tag .tag ul {
  display: flex;
  list-style: none;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .name-tag .tag ul {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
}
.list-wrap li a .name-tag .tag ul li {
  display: inline-block;
  margin-left: 3px;
  margin-bottom: 3px;
  padding: 5px 13px 2px 13px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 500;
  color: var(--font-color);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 30px;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .name-tag .tag ul li {
    padding: 3px 8px 3px 8px;
    font-size: 0.5625rem;
    line-height: 1.22222;
  }
}
.list-wrap li a .name-tag .tag ul li.category {
  background-color: var(--color-gray);
}

/* アイコン、タイトル、PR */
.list-wrap li a .content .header {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.list-wrap li a .content .header .title-box {
  width: 100%;
}
.list-wrap li a .content .header .title-box .icon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 5px;
}
.list-wrap li a .content .header .title-box .icon p {
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 5px;
  padding: 5px 15px 3px 15px;
  font-size: 0.6875rem;
  line-height: 1.4545;
  font-weight: 500;
  border-radius: 30px;
}
.list-wrap li a .content .header .title-box .icon p.new {
  color: var(--color-white);
  background-color: var(--main-color);
}
.list-wrap li a .content .header .title-box .icon p.reviews {
  color: var(--font-color);
  background-color: var(--color-white);
  border: 1px solid var(--border);
}
.list-wrap li a .content .header .title-box .title {
  width: calc(100% - 80px);
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--font-color-dark);
  /* 省略 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .header .title-box .title {
    width: 100%;
    font-size: 0.875rem;
    line-height: 1.5;
    /* 省略 */
    -webkit-line-clamp: 3;
  }
}
.list-wrap li a:hover .content .header .title-box .title {
  color: var(--main-color);
}
.list-wrap li a .content .header .title-box .title .new {
  margin-left: 12px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 700;
  color: var(--main-color);
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .header .title-box .title .new {
    margin-left: 5px;
    font-size: 0.5625rem;
    line-height: 1.22222;
  }
}
.list-wrap li a .content .header .label {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding-left: 10px;
}
.list-wrap li a .content .header .label p {
  display: inline-block;
  padding: 5px 13px 2px 13px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 500;
  color: var(--font-color);
  border: 1px solid var(--border);
  border-radius: 30px;
}

.list-wrap li a .tag-box {
  position: absolute;
  top: 20px;
  right: 0;
}
.list-wrap li a .tag-box ul {
  display: flex;
  list-style: none;
}
.list-wrap li a .tag-box ul li {
  display: inline-block;
  margin-left: 5px;
  padding: 5px 13px 2px 13px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 500;
  color: var(--font-color);
  border: 1px solid var(--border);
  border-radius: 30px;
}

/* 日付、名前、ポイント */
.list-wrap li a .content .footer {
  display: flex;
  justify-content: space-between;
  padding-top: 14px;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .footer {
    align-items: center;
    padding-top: 8px;
  }
}
.list-wrap li a .content .footer .date p {
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 400;
  color: var(--font-color);
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .footer .date p {
    font-size: 0.625rem;
    line-height: 1.3;
  }
}
.list-wrap li a .content .footer .meta {
  display: flex;
  align-items: center;
}
.list-wrap li a .content .footer .meta .name {
  font-size: 0.75rem;
  line-height: 1.4166;
  font-weight: 400;
  color: var(--font-color);
}
.list-wrap li a .content .footer .meta .point {
  margin-top: -3px;
  padding-left: 5px;
  display: flex;
  justify-content: flex-end;
  min-width: 80px;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .footer .meta .point {
    margin-top: 0;
    min-width: 50px;
  }
}
.list-wrap li a .content .footer .meta .point p {
  padding: 5px 10px 3px 28px;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.3333;
  font-weight: 500;
  color: var(--font-color-dark);
  min-width: 60px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  border-radius: 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .list-wrap li a .content .footer .meta .point p {
    padding: 4px 8px 3px 24px;
    font-size: 0.625rem;
    line-height: 1.3;
    min-width: 50px;
    background-size: 12px 12px;
    background-position: 4px 50%;
  }
}
.list-wrap li a .content .footer .meta .point-yellow p {
  background-color: var(--point-yellow);
  background-image: url(/images/icon-point-yellow.svg);
}
.list-wrap li a .content .footer .meta .point-gray p {
  background-color: var(--point-gray);
  background-image: url(/images/icon-point-gray.svg);
}

/* -------------------------------------
　右列
------------------------------------- */
/* ------------- 共通 ------------- */
.sidebar .sidebar-section {
  margin-bottom: 30px;
}
.sidebar .sidebar-section:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .sidebar .sidebar-section {
    margin-bottom: 45px;
  }
}
.sidebar .side-title {
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--font-color-dark);
  text-align: center;
}
@media screen and (max-width: 767px) {
  .sidebar .side-title {
    margin-bottom: 24px;
    padding: 0 20px;
    font-size: 1.25rem;
    line-height: 1.45;
    font-weight: 700;
    color: var(--font-color-dark);
    text-align: center;
    position: relative;
  }
  .sidebar .side-title::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 5px;
    background-image: url(/images/contents-title.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    top: auto;
    bottom: -9px;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);
  }
}

/* ------------- 検索ワードフォーム ------------- */

.search-box {
  display: flex;
  align-items: center;
  padding-right: 5px;
  border: 1px solid var(--border);
  border-radius: 23px;
  background-color: var(--color-white);
  overflow: hidden;
}
.search-box input {
  flex: 1;
  border: none;
  padding: 13px 20px 12px 20px;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 400;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  outline: none;
}
.search-box input::placeholder {
  color: var(--font-color-placeholder);
}
.search-box button {
  width: 36px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
}
.search-box button img {
  width: 100%;
  height: auto;
}
.search-box button:hover {
  transform: var(--btn-hover-transform-medium);
  box-shadow: var(--btn-hover-box-shadow);
}

/* aside */
.search-keyword-box {
  display: flex;
  align-items: center;
  padding-right: 5px;
  border: 1px solid var(--border);
  border-radius: 23px;
  background-color: var(--color-white);
  overflow: hidden;
}
.search-keyword-box input {
  flex: 1;
  border: none;
  padding: 13px 20px 12px 20px;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 400;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  outline: none;
}
.search-keyword-box input::placeholder {
  color: var(--font-color-placeholder);
}
.search-keyword-box button {
  width: 36px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-sizing: border-box;
}
.search-keyword-box button img {
  width: 100%;
  height: auto;
}
.search-keyword-box button:hover {
  transform: var(--btn-hover-transform-medium);
  box-shadow: var(--btn-hover-box-shadow);
}

/* ------------- メッセージ ------------- */
/* リスト */
.sidebar .message-list ul {
  border-top: 1px solid var(--border);
}
.sidebar .message-list ul li {
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.sidebar .message-list ul li a {
  display: block;
  padding: 15px 0 16px 0;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .sidebar .message-list ul li a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
  }
}
.sidebar .message-list ul li a .title p {
  font-size: 0.8125rem;
  line-height: 1.6153;
  font-weight: 500;
  color: var(--font-color-dark);
}
@media screen and (max-width: 767px) {
  .sidebar .message-list ul li a .title p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}
.sidebar .message-list ul li a:hover .title p {
  color: var(--main-color);
}
.sidebar .message-list ul li a .title p .new {
  margin-left: 7px;
  font-size: 0.5625rem;
  line-height: 1.2222;
  font-weight: 700;
  color: var(--main-color);
}
.sidebar .message-list ul li a .date {
  padding-top: 8px;
}
.sidebar .message-list ul li a .date p {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--font-color);
}

/* ------------- バナー ------------- */
@media screen and (max-width: 767px) {
  .sidebar .bnr-list {
    padding: 0 20px;
  }
}
.sidebar .bnr-list ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
}
.sidebar .bnr-list ul li {
  margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
  .sidebar .bnr-list ul li {
    margin-bottom: 12px;
    width: 100%;
  }
}
.sidebar .bnr-list ul li:last-child {
  margin-bottom: 0;
}
.sidebar .bnr-list ul li a {
  display: inline-block;
}
@media screen and (max-width: 767px) {
  .sidebar .bnr-list ul li a {
    width: 100%;
  }
}
.sidebar .bnr-list ul li a img {
  max-width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .sidebar .bnr-list ul li a img {
    width: 100%;
  }
}

/* ------------- ポイントGETできる記事 ------------- */
/* タイトルバナー */
.sidebar .bnr-side-point {
  margin-bottom: 30px;
}
.sidebar .bnr-side-point a img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .sidebar .bnr-side-point {
    margin-bottom: 20px;
    padding: 0 20px;
  }
}

/* リスト */
.sidebar .point-list ul {
  border-top: 1px solid var(--border);
}
.sidebar .point-list ul li {
  border-bottom: 1px solid var(--border);
  list-style: none;
}
.sidebar .point-list ul li a {
  display: block;
  padding: 15px 0 15px 0;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a {
    padding: 15px 20px;
  }
}
.sidebar .point-list ul li a .title p {
  font-size: 0.8125rem;
  line-height: 1.6153;
  font-weight: 500;
  color: var(--font-color-dark);
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a .title p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}
.sidebar .point-list ul li a:hover .title p {
  color: var(--main-color);
}
.sidebar .point-list ul li a .meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a .meta {
    padding-top: 8px;
  }
}
.sidebar .point-list ul li a .meta .date {
  padding-top: 8px;
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a .meta .date {
    padding-top: 0;
  }
}
.sidebar .point-list ul li a .meta .date p {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--font-color);
}
.sidebar .point-list ul li a .meta .point {
  margin-top: -3px;
  padding-left: 5px;
  display: flex;
  justify-content: flex-end;
  min-width: 80px;
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a .meta .point {
    margin-top: 0;
    min-width: 50px;
  }
}
.sidebar .point-list ul li a .meta .point p {
  padding: 5px 10px 3px 28px;
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.3333;
  font-weight: 500;
  color: var(--font-color-dark);
  min-width: 60px;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  border-radius: 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .sidebar .point-list ul li a .meta .point p {
    padding: 4px 8px 3px 24px;
    font-size: 0.625rem;
    line-height: 1.3;
    min-width: 50px;
    background-size: 12px 12px;
    background-position: 4px 50%;
  }
}
.sidebar .point-list ul li a .meta .point-yellow p {
  background-color: var(--point-yellow);
  background-image: url(/images/icon-point-yellow.svg);
}
.sidebar .point-list ul li a .meta .point-gray p {
  background-color: var(--point-gray);
  background-image: url(/images/icon-point-gray.svg);
}

/* ------------- 予約済みのWEB講演会 ------------- */
/* リスト */

@media screen and (max-width: 767px) {
  .sidebar .webinar-list {
    padding: 0 20px;
  }
}
.sidebar .webinar-list ul li {
  margin-bottom: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  list-style: none;
}
.sidebar .webinar-list ul li:last-child {
  margin-bottom: 0;
}
.sidebar .webinar-list ul li a {
  display: block;
  padding: 15px 15px 14px 15px;
  text-decoration: none;
}
.sidebar .webinar-list ul li a .title p {
  font-size: 0.8125rem;
  line-height: 1.6153;
  font-weight: 500;
  color: var(--font-color-dark);
}
@media screen and (max-width: 767px) {
  .sidebar .webinar-list ul li a .title p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}
.sidebar .webinar-list ul li a:hover .title p {
  color: var(--main-color);
}
.sidebar .webinar-list ul li a .title p .new {
  margin-left: 7px;
  font-size: 0.5625rem;
  line-height: 1.2222;
  font-weight: 700;
  color: var(--main-color);
}
.sidebar .webinar-list ul li a .date {
  padding-top: 6px;
}
.sidebar .webinar-list ul li a .date p {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--font-color);
}

/* ------------- あなたにおすすめ ------------- */
/* リスト */
.sidebar .recommend-list {
  border-top: 1px solid var(--border);
}
.sidebar .recommend-list ul li {
  border-bottom: 1px dotted var(--border);
  list-style: none;
}
.sidebar .recommend-list ul li:last-child {
  border-bottom: 1px solid var(--border);
}
.sidebar .recommend-list ul li a {
  display: block;
  padding: 4px 0 4px 0;
  text-decoration: none;
}
@media screen and (max-width: 767px) {
  .sidebar .recommend-list ul li a {
    padding: 6px 20px 6px 6px;
  }
}
.sidebar .recommend-list ul li a dl {
  display: flex;
  justify-content: space-between;
}
.sidebar .recommend-list ul li a dl dt {
  display: flex;
  justify-content: center;
  margin-right: 10px;
  width: 26px;
  min-height: 71px;
  border-radius: 13px;
}
@media screen and (max-width: 767px) {
  .sidebar .recommend-list ul li a dl dt {
    margin-right: 12px;
  }
}
.sidebar .recommend-list ul li a dl dt.red {
  color: var(--color-white);
  background-color: var(--color-red);
}
.sidebar .recommend-list ul li a dl dt.orange {
  color: var(--color-white);
  background-color: var(--color-orange);
}
.sidebar .recommend-list ul li a dl dt.yellow {
  color: var(--color-white);
  background-color: var(--color-yellow);
}
.sidebar .recommend-list ul li a dl dt.gray {
  color: var(--font-color);
  background-color: var(--color-gray);
}
.sidebar .recommend-list ul li a dl dt p {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.3846;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .sidebar .recommend-list ul li a dl dt p {
    font-size: 0.8125rem;
    line-height: 1.3846;
  }
}
.sidebar .recommend-list ul li a dl dd {
  display: flex;
  align-items: center;
  flex: 1;
}
.sidebar .recommend-list ul li a dl dd p {
  font-size: 0.8125rem;
  line-height: 1.6153;
  font-weight: 500;
  color: var(--font-color-dark);
}
@media screen and (max-width: 767px) {
  .sidebar .recommend-list ul li a dl dd p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}
.sidebar .recommend-list ul li a:hover dl dd p {
  color: var(--main-color);
}

/* ------------- WEB講演会 ------------- */
.sidebar .lecture-item-list ul .item {
  list-style: none;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.sidebar .lecture-item-list ul .item > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 19px 19px 15px 19px;
  text-decoration: none;
}
.sidebar .lecture-item-list ul .item > a .header .title {
  margin-bottom: 5px;
}
.sidebar .lecture-item-list ul .item > a .header .title h3 {
  font-size: 0.9375rem;
  line-height: 1.66666;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--font-color-dark);
}
.sidebar .lecture-item-list ul .item > a:hover .header .title h3 {
  color: var(--main-color);
}
.sidebar .lecture-item-list ul .item > a .header .date {
  font-size: 0.625rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--font-color);
}
.sidebar .lecture-item-list ul .item > a .footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px dotted var(--border);
}
.sidebar .lecture-item-list ul .item > a .footer .name {
  font-size: 0.75rem;
  line-height: 1.4166;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--font-color);
}

/* ポイント */
.sidebar .lecture-item-list ul .item > a .footer .point {
  padding-left: 5px;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.sidebar .lecture-item-list ul .item > a .footer .point p {
  padding: 5px 10px 3px 28px;
  display: inline-block;
  min-width: 60px;
  font-size: 0.75rem;
  line-height: 1.3333;
  font-weight: 500;
  color: var(--font-color-dark);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  border-radius: 30px;
  box-sizing: border-box;
}
.sidebar .lecture-item-list ul .item > a .footer .point-yellow p {
  background-color: var(--point-yellow);
  background-image: url(/images/icon-point-yellow.svg);
}
.sidebar .lecture-item-list ul .item > a .footer .point-gray p {
  background-color: var(--point-gray);
  background-image: url(/images/icon-point-gray.svg);
}

/* ボタン */
.sidebar .lecture-item-list ul .item .btn {
  padding: 20px 20px 20px 20px;
  background-color: var(--color-bg);
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
}
.sidebar .lecture-item-list ul .item .btn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 280px;
  height: 46px;
  font-size: 0.875rem;
  line-height: 1.428;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  position: relative;
  box-sizing: border-box;
}
.sidebar .lecture-item-list ul .item .btn > a::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
.sidebar .lecture-item-list ul .item .btn.watch > a {
  color: var(--color-white);
  border: 1px solid var(--main-color);
  background-color: var(--main-color);
}
.sidebar .lecture-item-list ul .item .btn.watch > a::after {
  background-color: var(--color-white);
  background-image: url(/images/top/icon-lectures-watch-arrow.svg);
}
.sidebar .lecture-item-list ul .item .btn.reserved > a {
  color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  background-color: var(--color-gray-light);
}
.sidebar .lecture-item-list ul .item .btn.reservation > a {
  color: var(--font-color-dark);
  border: 1px solid var(--border);
  background-color: var(--color-white);
}
.sidebar .lecture-item-list ul .item .btn.reservation > a::after {
  background-color: var(--main-color);
  background-image: url(/images/top/icon-lectures-arrow.svg);
}
.sidebar .lecture-item-list ul .item .btn > a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

/* -------------------------------------
　パンくずリスト
------------------------------------- */
.breadcrumb {
  margin-bottom: 40px;
  padding: 0 3px 7px 0;
  width: 100%;
  border-bottom: 1px solid var(--border);
}
@media screen and (max-width: 767px) {
  .breadcrumb {
    margin-bottom: 33px;
    padding: 0 0 7px 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
}
.breadcrumb ul {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.breadcrumb ul li {
  margin-right: 15px;
  font-size: 0.6875rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--font-color);
  position: relative;
}
@media screen and (max-width: 767px) {
  .breadcrumb ul li {
    margin-right: 9px;
    font-size: 0.625rem;
    line-height: 1.5;
  }
}
.breadcrumb ul li::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 8px;
  margin-left: 15px;
  background-image: url(/images/breadcrumb-arrow.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 0 50%;
}
@media screen and (max-width: 767px) {
  .breadcrumb ul li::after {
    content: '';
    display: inline-block;
    width: 4px;
    height: 6px;
    margin-left: 8px;
    background-image: url(/images/breadcrumb-arrow.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 50%;
  }
}
.breadcrumb ul li:last-child::after {
  content: none;
}
.breadcrumb ul li a {
  display: inline-block;
  color: var(--font-color-dark);
  text-decoration: none;
  position: relative;
}
.breadcrumb ul li a:hover {
  color: var(--main-color);
}

/* -------------------------------------
　フォーム
------------------------------------- */
.form__box {
  margin-bottom: 120px;
}
@media screen and (max-width: 767px) {
  .form__box {
    margin-bottom: 60px;
  }
}
.form__box:last-child {
  margin-bottom: 0;
}
.form__body {
  width: 100%;
  border-top: 1px dotted var(--border);
}
.form__body__multiple .form__body {
  margin-bottom: 60px;
}
.form__body__multiple .form__body:last-child {
  margin-bottom: 0;
}
.form__body th,
.form__body td {
  padding: 25px 0;
  border-bottom: 1px dotted var(--border);
}
.form__body th {
  padding-left: 5px;
  width: 205px;
  min-width: 205px;
  font-size: 0.875rem;
  line-height: 1.428;
  font-weight: 500;
  color: var(--font-color);
  text-align: left;
}
.form__body td {
  padding-right: 5px;
  width: calc(100% - 205px);
  font-size: 0.875rem;
  line-height: 1.428;
  font-weight: 500;
  color: var(--font-color);
  text-align: left;
}
/* .form__body td p {
  margin-bottom: 1em;
}
.form__body td p:last-child {
  margin-bottom: 0;
} */
@media screen and (max-width: 767px) {
  .form__body th,
  .form__body td {
    display: block;
  }
  .form__body th {
    display: block;
    padding: 20px 0 8px 0;
    border-bottom: none;
    width: 100%;
    font-size: 0.75rem;
    line-height: 1.428;
    font-weight: 500;
    color: var(--font-color);
    text-align: left;
  }
  .form__body td {
    display: block;
    padding: 0 0 20px 0;
    width: 100%;
    font-size: 0.8125rem;
    line-height: 1.428;
    font-weight: 500;
    color: var(--font-color);
    text-align: left;
  }
}
.form__body th .form__label .required {
  color: var(--main-color);
  margin-left: 4px;
}
.form__body td .remarks {
  padding-top: 12px;
  font-size: 0.75rem;
  line-height: 1.416;
  font-weight: 400;
  /*color: var(--main-color);*/
}
@media screen and (max-width: 767px) {
  .form__body td .remarks {
    padding-top: 10px;
    font-size: 0.625rem;
  }
}
.form__body td .form__text {
  margin-bottom: 18px;
}
@media screen and (max-width: 767px) {
  .form__body td .form__text {
    margin-bottom: 7px;
  }
}
.form__body td .form__text p {
  margin-bottom: 30px;
}
.form__body td .form__text p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .form__body td .form__text p {
    font-size: 0.875rem;
    line-height: 1.571;
  }
}

/* 名前・フリガナ */
.form__body td .name {
  display: flex;
  align-items: center;
  gap: 30px;
}
.form__body td .name .form__field {
  display: flex;
  align-items: center;
}
.form__body td .name .form__field p {
  width: 39px;
}
.form__field input {
  flex: 1;
}
@media screen and (max-width: 767px) {
  .form__body td .name {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .form__body td .name .form__field {
    width: 100%;
  }
  .form__body td .name .form__field p {
    width: 42px;
  }
}

/* 国 */
.country-flex {
  display: flex;
  align-items: center;
  gap: 19px;
}
@media screen and (max-width: 767px) {
  .country-flex {
    gap: 15px;
  }
}

/* 条件 */
.form__body td .conditions__field {
  display: flex;
  align-items: center;
  gap: 20px;
}
.form__body td .conditions__field p {
  font-size: 0.75rem;
  line-height: 1.4166;
  font-weight: 400;
}
@media screen and (max-width: 767px) {
  .form__body td .conditions__field {
    flex-wrap: wrap;
    gap: 10px;
  }
  .form__body td.reg-category .conditions__field {
    align-items: flex-start;
    flex-direction: column;
  }
  .form__body td.password .conditions__field {
    flex-direction: column;
    align-items: flex-start;
  }
  .form__body td .conditions__field p {
    font-size: 0.625rem;
    line-height: 1.4166;
    font-weight: 400;
  }
  .form__body td.reg-category .conditions__field p {
    font-size: 0.75rem;
    line-height: 1.583;
    font-weight: 400;
  }
}

/* 住所 */
.form__body .zipcode th,
.form__body .zipcode td {
  padding: 25px 0 0 5px;
  border-bottom: none;
}
.form__body .pref th,
.form__body .pref td {
  padding: 20px 0 0 5px;
  border-bottom: none;
}
.form__body .address th,
.form__body .address td {
  padding: 20px 0 25px 5px;
}
.form__body .address-between th,
.form__body .address-between td {
  padding: 20px 0 0 5px;
  border-bottom: none;
}
@media screen and (max-width: 767px) {
  .form__body .zipcode th {
    padding: 20px 0 8px 0;
    border-bottom: none;
  }
  .form__body .zipcode td {
    padding: 0 0 17px 0;
    border-bottom: none;
  }
  .form__body .pref th {
    padding: 0 0 8px 0;
    border-bottom: none;
  }
  .form__body .pref td {
    padding: 0 0 17px 0;
    border-bottom: none;
  }
  .form__body .address th {
    padding: 0 0 8px 0;
  }
  .form__body .address td {
    padding: 0 0 20px 0;
  }
}

/* 会員規約への同意 */
.agree {
  display: flex;
  align-items: center;
  gap: 8px;
}
.agree .checkbox {
  margin-bottom: 0;
}
.agree .terms a {
  display: inline-block;
  color: var(--font-color-dark);
  text-decoration: none;
  padding-right: 17px;
  position: relative;
}
.agree .terms a:hover {
  color: var(--main-color);
}
.agree .terms a::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-image: url(/images/icon-ex.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .agree {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 3px;
    gap: 2px;
  }
  .agree .checkbox {
    margin-bottom: 10px;
  }
  .agree .terms {
    padding-left: 30px;
  }
  .agree .terms a {
    font-size: 0.75rem;
    line-height: 1.416;
    padding-right: 15px;
  }
  .agree .terms a::after {
    width: 10px;
    height: 10px;
  }
}

/* チェックボックス横並び */
.checkbox-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 25px;
}

/* ------------- 入力フィールド ------------- */
.form__body td input[type='text'],
.form__body td input[type='email'],
.form__body td input[type='tel'],
.form__body td input[type='password'] {
  padding: 13px 20px 12px 20px;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1;
  font-weight: 400;
  color: var(--font-color);
  border: 1px solid var(--border);
  background-color: var(--color-white);
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  outline: none;
  border-radius: 23px;
}
.form__body td input[type='text']:disabled {
  background-color: var(--color-bg);
}
@media screen and (max-width: 767px) {
  .form__body td input[type='text'],
  .form__body td input[type='email'],
  .form__body td input[type='tel'],
  .form__body td input[type='password'] {
    padding: 11px 20px 10px 20px;
    font-size: 0.875rem;
    border-radius: 20px;
  }
}
.form__body td input::placeholder {
  color: #dddddd;
}

/* 入力フォーム長さ */
.form__body td .name input {
  width: 260px;
}
.form__body td.birthday input {
  width: 200px;
}
.form__body td.country input {
  width: 260px;
}
.form__body .zipcode td input {
  width: 200px;
}
.form__body .address td input {
  min-width: 100%;
}
.form__body td.tel input {
  width: 200px;
}
.form__body td.email input {
  width: 100%;
}
.form__body td.password input {
  width: 260px;
}
.form__body td.license-id input {
  width: 260px;
}
.form__body td.license-yr input {
  width: 100px;
}
.form__body td.facility input {
  width: 100%;
}
.form__body td.facility-zipcode input,
.form__body td.facility-tel input,
.form__body td.facility_fax input {
  width: 260px;
}
.form__body td.from_yrmth input {
  width: 120px;
}
.form__body td.school input {
  width: 260px;
}
.form__body td.school-name input {
  width: 100%;
}
.form__body td.settings .conditions__field.journal-books-form input[type='text'] {
  width: 100px;
}
.form__body td.student-id input {
  width: 260px;
}
.form__body td.lab input {
  width: 260px;
}
.form__body td.enter_yr input,
.form__body td.graduate_yr input {
  width: 100px;
}
.form__body td.facility-name input {
  min-width: 100%;
}
.form__body td.delivery-name input {
  width: 370px;
}
@media screen and (max-width: 767px) {
  .form__body td .name input {
    width: 100%;
  }
  .form__body td.birthday input {
    width: 100%;
  }
  .form__body td.country input {
    width: 100%;
    flex: 1;
  }
  .form__body .zipcode td input {
    width: 130px;
  }
  .form__body .address td input {
    min-width: 100%;
  }
  .form__body td.tel input {
    min-width: 100%;
  }
  .form__body td.password input {
    min-width: 100%;
  }
  .form__body td.license-id input {
    width: calc(100% - 7em);
  }
  .form__body td.facility-zipcode input,
  .form__body td.facility-tel input,
  .form__body td.facility_fax input {
    width: calc(100% - 7em);
  }
  .form__body td.delivery-name input {
    width: 100%;
  }
}

/* 余白 */
.form__body td.license-yr .conditions__field {
  gap: 10px;
}
.form__body td.from_yrmth .conditions__field {
  gap: 10px;
}
.form__body td.school .conditions__field {
  gap: 10px;
  padding-top: 15px;
}
.form__body td.settings .conditions__field.journal-books-form {
  padding-top: 15px;
}

/* ------------- セレクトボックス ------------- */
.form__body td select {
  font-size: 0.9375rem;
  line-height: 46px;
  color: var(--font-color);
  max-width: 100%;
  height: 46px;
  padding: 0 56px 0 20px;
  font-size: 0.9375rem;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  border: 1px solid var(--border);
  background-color: var(--color-white);
  background-color: #ffffff;
  border-radius: 23px;
  background-image: url('/images/form_select_arrow.svg');
  background-repeat: no-repeat;
  background-size: 12px 7px;
  background-position: right 17px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .form__body td select {
    font-size: 0.875rem;
  }
  .form__body td.school select {
    width: 100%;
    box-sizing: border-box;
  }
}

/* 入力フォーム長さ */
.form__body .pref td select {
  min-width: 200px;
}
@media screen and (max-width: 767px) {
  .form__body .pref td select {
    min-width: 100%;
  }
}

/* ------------- テキストエリア ------------- */
.form__body td textarea {
  display: block;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.866;
  font-weight: 400;
  color: var(--font-color);
  padding: 13px 20px 12px 20px;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  border: 1px solid var(--border);
  border-radius: 8px;
  background-color: var(--color-white);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

/* 高さ */
.form__body td .referral_remarks_textarea {
  height: 150px;
}
.form__body td .request_textarea {
  height: 200px;
}
.form__body td .request_textarea {
  height: 200px;
}
.form__body td .inquiry_details_textarea {
  height: 250px;
}
@media screen and (max-width: 767px) {
  .form__body td .referral_remarks_textarea {
    height: 100px;
  }
  .form__body td .request_textarea {
    height: 150px;
  }
  .form__body td .inquiry_details_textarea {
    height: 200px;
  }
}

/* ------------- ラジオボタン ------------- */
.radio-flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}
@media screen and (max-width: 767px) {
  .radio-flex {
    gap: 26px;
  }
}

/* ラジオボタン非表示 */
.radio input[type='radio'] {
  display: none;
}

/* ラベル全体 */
.radio-flex label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  line-height: 1;
}
.radio-flex label:last-child {
  margin-right: 0;
}
@media screen and (max-width: 767px) {
  .radio-flex label {
    font-size: 0.8125rem;
    line-height: 1;
  }
}

/* 外側の丸 */
.radio-flex label::before {
  content: '';
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: var(--color-white);
  margin-right: 8px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .radio-flex label::before {
    margin-right: 6px;
  }
}

/* チェック状態 */
.radio-flex label:has(input[type='radio']:checked)::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--main-color);
  border-radius: 50%;
  top: 50%;
  left: 10px;
  transform: translate(-50%, -50%);
}

/* ------------- チェックボタン ------------- */
.checkbox input[type='checkbox'] {
  display: none;
}
.checkbox label {
  display: block;
  margin-left: 28px;
  position: relative;
}
.checkbox label::before {
  content: '';
  display: block;
  position: absolute;
  top: -1px;
  left: -28px;
  height: 20px;
  width: 20px;
  border: 1px solid var(--border);
  background-color: #ffffff;
}
.checkbox input[type='checkbox']:checked + label::before {
  background: var(--main-color);
  border: 1px solid var(--main-color);
}
.checkbox input[type='checkbox']:checked + label::after {
  content: '';
  display: inline-block;
  height: 8px;
  width: 12px;
  background-image: url('/images/checkbox.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  position: absolute;
  top: 5px;
  left: -24px;
}
@media screen and (max-width: 767px) {
  .checkbox label {
    margin-left: 30px;
    font-size: 0.8125rem;
  }
  .checkbox label::before {
    content: '';
    display: block;
    position: absolute;
    top: -1px;
    left: -28px;
    height: 20px;
    width: 20px;
    border: 1px solid var(--border);
    background-color: #ffffff;
  }
  .checkbox input[type='checkbox']:checked + label::before {
    background: var(--main-color);
    border: 1px solid var(--main-color);
  }
  .checkbox input[type='checkbox']:checked + label::after {
    content: '';
    display: inline-block;
    height: 8px;
    width: 12px;
    background-image: url('/images/checkbox.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: absolute;
    top: 5px;
    left: -24px;
  }
}

/* ------------- フォームボタン ------------- */
.form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 40px;
}
.form__submit button[type='submit'],
.form__submit button[type='button'] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  min-width: 320px;
  width: auto;
  min-height: 54px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  background: var(--gradient-main);
  border-radius: 30px;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}
.form__submit button[type='submit']:hover,
.form__submit button[type='button']:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
.form__submit button[type='submit']::after,
.form__submit button[type='button']::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(/images/icon-contents-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
}
.form__submit button[type='button'].back {
  min-width: 180px;
  padding: 2px 5px 0 20px;
}
.form__submit button[type='button'].back::after {
  right: auto;
  left: 9px;
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 767px) {
  .form__submit {
    padding-top: 25px;
    gap: 10px;
  }
  .form__submit button[type='submit'],
  .form__submit button[type='button'] {
    padding: 2px 20px 0 10px;
    min-width: 265px;
    min-height: 42px;
    font-size: 0.875rem;
    line-height: 1.428;
  }
  .form__submit button[type='submit']::after,
  .form__submit button[type='button']::after {
    width: 27px;
    height: 27px;
    right: 7px;
  }
  .form__submit.form__submittwo-column [type='submit'] {
    min-width: 200px;
  }
  .form__submit button[type='button'].back {
    min-width: 120px;
    padding: 2px 5px 0 20px;
  }
  .form__submit button[type='button'].back::after {
    right: auto;
    left: 9px;
    transform: translateY(-50%) rotate(180deg);
  }
}

/* リンクボタン */
.btn-area ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.btn-area ul li {
  list-style: none;
}
.btn-area a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 60px 0 40px;
  min-width: 320px;
  width: auto;
  min-height: 54px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  background: var(--gradient-main);
  border-radius: 30px;
  position: relative;
}
.btn-area a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
.btn-area a::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(/images/icon-contents-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
}

.btn-area button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 60px 0 40px;
  min-width: 320px;
  width: auto;
  min-height: 54px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color-white);
  text-decoration: none;
  background: var(--gradient-main);
  border-radius: 30px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  position: relative;
}
.btn-area button:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
.btn-area button::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url(/images/icon-contents-btn.svg);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 9px;
  transform: translateY(-50%);
}
.btn-area li button.back {
  min-width: 180px;
  padding: 2px 5px 0 20px;
}
.btn-area li button.back::after {
  right: auto;
  left: 9px;
  transform: translateY(-50%) rotate(180deg);
}
.btn-area li a.link-back {
  min-width: 320px;
  padding: 0 40px 0 60px;
}
.btn-area li a.link-back::after {
  right: auto;
  left: 9px;
  transform: translateY(-50%) rotate(180deg);
}
@media screen and (max-width: 767px) {
  .btn-area ul {
    gap: 10px;
  }
  .btn-area a {
    padding: 2px 20px 0 10px;
    min-width: 265px;
    min-height: 42px;
    font-size: 0.875rem;
    line-height: 1.428;
  }
  .btn-area a::after {
    width: 27px;
    height: 27px;
    right: 7px;
  }
  .btn-area button {
    padding: 2px 20px 0 10px;
    min-width: 265px;
    min-height: 42px;
    font-size: 0.875rem;
    line-height: 1.428;
  }
  .btn-area li button::after {
    width: 27px;
    height: 27px;
    right: 7px;
  }
  .btn-area li button.back {
    min-width: 120px;
    padding: 2px 5px 0 20px;
  }
  .btn-area button.back::after {
    right: auto;
    left: 9px;
    transform: translateY(-50%) rotate(180deg);
  }
  .btn-area .form__submittwo-column button {
    min-width: 200px;
  }
  .btn-area li a.link-back {
    min-width: 265px;
    padding: 2px 10px 0 20px;
    min-height: 42px;
    font-size: 0.875rem;
    line-height: 1.428;
  }
  .btn-area li a.link-back::after {
    width: 27px;
    height: 27px;
    right: auto;
    left: 9px;
    transform: translateY(-50%) rotate(180deg);
  }
}

/* ------------- ファイルアップロードボタン ------------- */
.form__body td input[type='file'] {
  width: auto;
  font-size: 0.875rem;
  line-height: 1.428;
  font-weight: 500;
  color: var(--font-color);
  background-color: #fff;
}
.form__body .student-id {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 15px;
}
@media screen and (max-width: 767px) {
  .form__body .student-id {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
}

/* ------------- アンケート枠 ------------- */
.enquete_form_box {
  padding: 30px;
  background-color: var(--color-bg);
  border-radius: 8px;
}
@media screen and (max-width: 767px) {
  .enquete_form_box {
    padding: 20px;
    border-radius: 6px;
  }
  .enquete_form_box .enquete_form_group.radio-flex {
    gap: 15px 26px;
  }
}
.enquete_form_box .enquete_form_group {
  margin-bottom: 15px;
}
.enquete_form_box .enquete_form_group:last-child {
  margin-bottom: 0;
}
.enquete_form_box .enquete_form_group-flex {
  display: flex;
  align-items: center;
}
.enquete_form_box .enquete_form_group .radio-th {
  width: 238px;
}
.enquete_form_box .enquete_form_group .radio-td {
  width: calc(100% - 238px);
}
.enquete_form_box .enquete_form_group .label-remarks {
  margin-bottom: 13px;
}
@media screen and (max-width: 767px) {
  .enquete_form_box .enquete_form_group-flex {
    display: block;
  }
  .enquete_form_box .enquete_form_group .radio-th {
    width: 100%;
  }
  .enquete_form_box .enquete_form_group .radio-td {
    padding-top: 10px;
    width: 100%;
  }
  .enquete_form_box .enquete_remarks {
    padding-top: 7px;
  }
  .enquete_form_box .enquete_form_group .label-remarks {
    margin-bottom: 7px;
  }
}

/* 入力フォーム長さ */
.enquete_form_box .enquete_form_group .staff_enquete {
  width: 260px;
}
.enquete_form_box .enquete_form_group .dealer_enquete {
  width: 260px;
}
.enquete_form_box .enquete_form_group .other_enquete {
  width: 100%;
}
.form__body .reg-category select {
  width: 260px;
}
@media screen and (max-width: 767px) {
  .enquete_form_box .enquete_form_group .staff_enquete {
    width: 100%;
  }
  .enquete_form_box .enquete_form_group .dealer_enquete {
    width: 100%;
  }
  .form__body .reg-category select {
    width: 100%;
  }
}

/* カスタマイズ */
.form__body .reg-category p {
  line-height: 1.5;
}

/* ------------- ▼設定する / ▼閉じる枠 ------------- */
.form__body td.settings .settings-toggle-btn {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 0.875rem;
  line-height: 1.428;
  font-weight: 500;
  color: var(--font-color);
  text-decoration: underline;
}
.form__body td.settings .settings-toggle-content {
  display: none;
  margin-top: 20px;
}
.form__body td.settings .settings-toggle-content .checkbox-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
}
.form__body td.settings .settings-toggle-content .flex-12 p {
  width: 12em;
}
.form__body td.settings .settings-toggle-content .flex-20 p {
  width: 20em;
}
.form__body td.settings .settings-toggle-content .flex-50 p {
  width: calc(50% - (20px / 2));
}
@media screen and (max-width: 767px) {
  .form__body td.settings .settings-toggle-content .flex-50 p {
    width: 100%;
  }
}
.form__body td.settings .settings-toggle-content .checkbox-flex .conditions__field p {
  width: auto;
}
.form__body td.settings .settings-toggle-content .checkbox label {
  display: block;
  margin-bottom: 12px;
  position: relative;
}
.form__body td.settings .other-input {
  margin-top: 10px;
}
.form__body td.settings .conditions__field input[type='text'] {
  width: 500px;
}
@media screen and (max-width: 767px) {
  .form__body td.settings .conditions__field input[type='text'] {
    width: calc(100% - 4em);
  }
}
.form__body td.settings .conditions__field {
  width: 100%;
  gap: 10px;
}
.form__body td.settings .settings-other {
  padding-left: 30px;
}

/* 歴 */
.settings-toggle-content .history-wrap {
  margin-top: 25px;
  border-top: 1px solid var(--border);
}
.settings-toggle-content .history-wrap .history-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 25px 0 25px 0;
  border-bottom: 1px solid var(--border);
}
.settings-toggle-content .history-wrap .history-box:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.settings-toggle-content .history-wrap .history-box dt {
  width: 5em;
}
.settings-toggle-content .history-wrap .history-box dd {
  width: calc(100% - 5em);
}
.settings-toggle-content .history-wrap .history-box dt,
.settings-toggle-content .history-wrap .history-box dd {
  margin-bottom: 15px;
}
.settings-toggle-content .history-wrap .history-box dt:last-child,
.settings-toggle-content .history-wrap .history-box dd:last-child {
  margin-bottom: 0;
}
.settings-toggle-content .history-wrap .history-box dd input.date {
  width: 120px;
}

/* -------------------------------------
　スライダー共通
------------------------------------- */
/* 外枠 */
.two-and-half-wrap {
  position: relative;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap {
    padding: 0 0 0 20px;
  }
}

/* スライダー本体 hidden */
.two-and-half-slider {
  overflow: hidden;
}

/* カスタム矢印 */
.two-and-half-wrap .two-half-next {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  position: absolute;

  /* 縦中央 */
  top: 50%;
  transform: translateY(-50%);

  right: -30px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url(/images/top/swiper-custom-two-and-half-slider.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17.5px 16px;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .two-half-next {
    width: 44px;
    height: 44px;
    right: 032px;
    background-size: 12.26px 11.2px;
  }
}
.two-and-half-wrap .two-half-next:hover {
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  background-image: url(/images/top/swiper-custom-two-and-half-slider-hover.svg);
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .two-half-next:hover {
    background-color: #fff;
    border: 1px solid #ddd;
    background-image: url(/images/top/swiper-custom-two-and-half-slider.svg);
  }
}

/* [デフォルト] 矢印上部マージン削除 */
.two-and-half-wrap .swiper-button-next {
  margin-top: 0;
}

/* [デフォルト] 矢印非表示 */
.two-and-half-wrap .swiper-button-next svg {
  display: none;
}

/* 横と高さ揃える */
.two-and-half-wrap .swiper-wrapper {
  align-items: stretch;
}
.two-and-half-wrap .swiper-slide {
  height: auto;
}

/* 最後に到達したら矢印を消す */
.two-and-half-wrap .swiper-button-disabled {
  display: none;
}

/* -------------------------------------
　共通 スライダー
------------------------------------- */
/* レイアウト */
.two-and-half-wrap .swiper-slide {
  border-radius: 8px;
  border: 1px solid var(--border);
  /* コンテンツを縦に並べて上下に配置 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide {
    border-radius: 6px;
  }
}
.two-and-half-wrap .swiper-slide a {
  text-decoration: none !important;
  /* コンテンツを縦に並べて上下に配置 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}
.two-and-half-wrap .swiper-slide figure {
  position: relative;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}
.two-and-half-wrap .swiper-slide figure img {
  width: 100%;
  aspect-ratio: 348 / 197;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide figure img {
    border-radius: 6px 6px 0 0;
  }
}
.two-and-half-wrap .swiper-slide figure p {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  color: #ffffff;
  font-size: 0.6875rem;
  line-height: 1.4545;
  font-weight: 600;
  opacity: 0;
}
.two-and-half-wrap .swiper-slide a:hover figure p {
  opacity: 1;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide figure p {
    display: none;
  }
}
.two-and-half-wrap .swiper-slide .content {
  padding: 20px 25px;
  /* コンテンツを縦に並べて上下に配置 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content {
    padding: 15px 20px;
  }
}

/* アイコン */
.two-and-half-wrap .swiper-slide .content .header .icon {
  margin-bottom: 10px;
}
.two-and-half-wrap .swiper-slide .content .header .icon ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}
.two-and-half-wrap .swiper-slide .content .header .icon ul li {
  margin-right: 6px;
}
.two-and-half-wrap .swiper-slide .content .header .icon ul li {
  display: inline-block;
  padding: 5px 13px 2px 13px;
  font-size: 0.6875rem;
  line-height: 1.3636;
  font-weight: 500;
  color: var(--font-color);
  border: 1px solid var(--border);
  border-radius: 30px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .header .icon ul li {
    display: inline-block;
    padding: 4px 12px 4px 12px;
    font-size: 0.5625rem;
    line-height: 1.22222;
  }
}
.two-and-half-wrap .swiper-slide .content .header .icon ul li.live {
  padding: 0;
  border: none;
  border-radius: 0;
  width: 100%;
  max-width: 66px;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .header .icon ul li.live {
    max-width: 55px;
  }
}
.two-and-half-wrap .swiper-slide .content .header .icon ul li.live img {
  width: 100%;
  aspect-ratio: 66 / 24;
  object-fit: cover;
  display: block;
  opacity: 1;
}

/* タイトル */
.two-and-half-wrap .swiper-slide .content .header .title h3 {
  font-size: 1.125rem;
  line-height: 1.4444;
  font-weight: 600;
  color: var(--font-color-dark);
  /* 省略 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .header .title h3 {
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 600;
  }
}
.two-and-half-wrap .swiper-slide a:hover .content .header .title h3 {
  color: var(--main-color);
}

/* 日付、名前、ポイント */
.two-and-half-wrap .swiper-slide .content .footer {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dotted var(--border);
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .footer {
    margin-top: 11px;
    padding-top: 14px;
    border-top: 1px dotted var(--border);
  }
}
.two-and-half-wrap .swiper-slide .content .footer .date {
  font-size: 13px;
  line-height: 1.3846;
  font-weight: 500;
  color: var(--font-color);
}
.two-and-half-wrap .swiper-slide .content .footer .calendar {
  margin-bottom: 14px;
  padding-left: 21px;
  font-size: 0.8125rem;
  line-height: 1.3846;
  font-weight: 500;
  color: var(--font-color);
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .footer .calendar {
    margin-bottom: 10px;
    padding-left: 21px;
    font-size: 0.75rem;
    line-height: 1.333;
  }
}
.two-and-half-wrap .swiper-slide .content .footer .calendar::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url(/images/top/icon-calendar.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .content .footer .calendar::before {
    top: calc(50% - 2px);
  }
}
.two-and-half-wrap .swiper-slide .content .footer .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.two-and-half-wrap .swiper-slide .content .footer .meta .name {
  font-size: 0.875rem;
  line-height: 1.4285;
  font-weight: 400;
  color: var(--font-color);
}
.two-and-half-wrap .swiper-slide .content .footer .meta .point {
  padding-left: 5px;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
}
.two-and-half-wrap .swiper-slide .content .footer .meta .point p {
  padding: 5px 10px 3px 28px;
  display: inline-block;
  min-width: 60px;
  font-size: 0.75rem;
  line-height: 1.3333;
  font-weight: 500;
  color: var(--font-color-dark);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: 5px 50%;
  border-radius: 30px;
  box-sizing: border-box;
}
.two-and-half-wrap .swiper-slide .content .footer .meta .point-yellow p {
  background-color: var(--point-yellow);
  background-image: url(/images/icon-point-yellow.svg);
}
.two-and-half-wrap .swiper-slide .content .footer .meta .point-gray p {
  background-color: var(--point-gray);
  background-image: url(/images/icon-point-gray.svg);
}

/* ボタン */
.two-and-half-wrap .swiper-slide .btn {
  padding: 20px 45px 25px 45px;
  background-color: var(--color-bg);
  border-radius: 0 0 8px 8px;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .btn {
    padding: 15px 28px 20px 28px;
    border-radius: 0 0 6px 6px;
  }
}
.two-and-half-wrap .swiper-slide .btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 46px;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--font-color-dark);
  border: 1px solid var(--border);
  background-color: var(--color-white);
  border-radius: 30px;
  position: relative;
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .btn a {
    padding-top: 2px;
    height: 42px;
    font-size: 0.875rem;
    line-height: 1.4285;
    border-radius: 30px;
  }
}
.two-and-half-wrap .swiper-slide .btn a::after {
  content: '';
  display: inline-block;
  width: 30px;
  height: 30px;
  background-color: var(--main-color);
  background-image: url(/images/top/icon-lectures-arrow.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 10px 10px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px) {
  .two-and-half-wrap .swiper-slide .btn a::after {
    width: 28px;
    height: 28px;
    background-size: 10px 9px;
    right: 7px;
  }
}
.two-and-half-wrap .swiper-slide .btn a:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

.two-and-half-wrap .swiper-slide .btn.reserved a {
  color: var(--color-white);
  border: 1px solid var(--color-gray-light);
  background-color: var(--color-gray-light);
}
.two-and-half-wrap .swiper-slide .btn.reserved a::after {
  content: none;
}

/* 一覧ボタン */
.two-and-half-wrap .list-btn-box {
  border-radius: 8px;
  border: none;
  display: block;
  background-color: var(--color-bg);
  box-sizing: border-box;
}
.two-and-half-wrap .list-btn-box a {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 矢印 */
.two-and-half-wrap .list-btn-box .list-btn .arrow {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    url(/images/top/swiper-custom-two-and-half-slider-list.svg) center / 17.5px 16px no-repeat,
    var(--gradient-main);
}
.two-and-half-wrap .list-btn-box a:hover .list-btn .arrow {
  background:
    url(/images/top/swiper-custom-two-and-half-slider-hover.svg) center / 17.5px 16px no-repeat,
    var(--main-color);
}

/* テキスト */
.two-and-half-wrap .list-btn-box .list-btn .text {
  padding-top: 12px;
  line-height: 1.5;
  color: var(--font-color-dark);
  font-weight: 700;
  text-align: center;
}

/* ------------- モーダルウィンドウ ------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}
.modal.is-active {
  display: block;
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.2);
}
.modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 80px);
  max-width: 600px;
  padding-bottom: 40px;
  border-radius: 8px;
  background: #ffffff;
  transform: translate(-50%, -50%);
  text-align: center;
}
.modal__text {
  margin-bottom: 27px;
  padding: 25px 20px 25px 20px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4444;
  border-bottom: 1px dotted var(--border);
  color: var(--font-color-dark);
}
.modal__description {
  margin-bottom: 26px;
  font-size: 0.9375rem;
  line-height: 1.866;
  font-weight: 400;
}
.modal__buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.modal__button {
  min-width: 250px;
  padding: 19px 20px;
  border-radius: 999px;
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.modal__button--cancel {
  background: #aaaaaa;
  color: #ffffff;
}
a.modal__button--submit {
  background: #f73139;
  color: #ffffff;
  text-decoration: none;
}
.modal__button--cancel:hover,
.modal__button:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}

/* スマホ */
@media screen and (max-width: 767px) {
  .modal__content {
    width: calc(100% - 40px);
    max-width: 100%;
    padding-bottom: 25px;
    border-radius: 6px;
  }
  .modal__text {
    margin-bottom: 14px;
    padding: 14px 20px 14px 20px;
    font-size: 0.875rem;
    line-height: 1.5;
  }
  .modal__description {
    margin-bottom: 16px;
    padding: 0 25px;
    font-size: 0.875rem;
    line-height: 1.714;
    font-weight: 400;
  }
  .modal__buttons {
    padding: 0 25px;
    gap: 11px;
  }
  .modal__button {
    min-width: 137px;
    padding: 14px 20px;
    font-size: 0.875rem;
  }
}

/* テーブル　*/
.basic-table-scroll {
  margin-bottom: 28px;
  width: 100%;
}
.basic-table-scroll:last-child {
  margin-bottom: 0;
}
.basic-table {
  width: 100%;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.basic-table th {
  padding: 14px 20px 11px 20px;
  font-size: 0.875rem;
  line-height: 1.7142;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background-color: #ffffff;
}
.basic-table td {
  padding: 14px 20px 11px 20px;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 400;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background-color: #ffffff;
}
.basic-table th.gray,
.basic-table td.gray {
  font-weight: 500;
  background-color: var(--color-bg);
}
.basic-table td.status p span {
  display: inline-block;
  padding: 7px 15px 5px 15px;
  color: var(--font-color-dark);
  background-color: var(--color-bg);
  border: 1px solid var(--border);
  border-radius: 23px;
}
@media screen and (max-width: 767px) {
  .basic-table-scroll {
    width: calc(100% + 20px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .basic-table {
    width: max-content;
    min-width: calc(100% - 20px);
  }
  .basic-table th,
  .basic-table td {
    white-space: nowrap;
  }
  .basic-table th {
    padding: 11px 64px 7px 64px;
    font-size: 0.875rem;
    line-height: 1.7142;
    font-weight: 500;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background-color: #ffffff;
  }
  .basic-table td {
    padding: 11px 64px 7px 64px;
    font-size: 0.9375rem;
    line-height: 1.6;
    font-weight: 400;
    text-align: center;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background-color: #ffffff;
  }
}

/* ボタン */
.basic-table td a.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 90px;
  font-size: 0.9375rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  height: 46px;
  border-radius: 23px;
  color: var(--font-color-dark);
  background-color: #ffffff;
  border: 1px solid var(--border);
}
.basic-table td a.btn:hover {
  transform: var(--btn-hover-transform);
  box-shadow: var(--btn-hover-box-shadow);
}
@media screen and (max-width: 767px) {
  .basic-table td a.btn {
    width: 90px;
    font-size: 0.875rem;
    height: 42px;
    border-radius: 30px;
  }
}