@charset "UTF-8";
/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
*,
::before,
::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

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

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

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

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

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

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

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

dd {
  margin-left: 0;
}

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

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

address {
  font-style: inherit;
}

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

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

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

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

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
  max-width: 100%;
}

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

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
       appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
       appearance: radio;
}

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

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

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

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

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

legend {
  padding: 0;
}

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

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

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

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

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

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

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

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

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

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

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

caption {
  text-align: left;
}

td,
th {
  padding: 0;
}

body {
  font-family: "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
  background: #f6f6f6;
}

a {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.commonInner {
  width: 960px;
  max-width: 94%;
  margin: 0 auto;
}

.sectionFlex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 80px;
}

.sectionFlex.is-backGroundWhite {
  width: 960px;
  max-width: 94%;
  margin: 80px auto 0;
  background: #fff;
  padding: 40px 65px;
  border-radius: 10px;
}

.sectionTitle {
  width: calc(100% - 160px);
  font-size: 30px;
  font-weight: bold;
  line-height: 1;
}

.sectionViewMore {
  position: relative;
  width: 160px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid #676767;
  text-align: center;
  line-height: 28px;
}

.sectionViewMore:hover {
  opacity: 0.75;
}

.sectionViewMore::after {
  content: "";
  display: block;
  position: absolute;
  top: 10px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-color: #333;
  border-width: 2px 2px 0 0;
  border-style: solid;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.sectionViewMore__text {
  font-size: 16px;
  letter-spacing: 0.05em;
}

.sectionContents {
  width: 100%;
  padding-top: 25px;
}

@media screen and (max-width: 1024px) {
  .sectionFlex.is-backGroundWhite {
    padding: 35px 3.5%;
  }
  .sectionTitle {
    font-size: 28px;
  }
}

@media screen and (max-width: 768px) {
  .commonInner {
    max-width: 90%;
  }
  .sectionFlex {
    margin-top: 55px;
  }
  .sectionFlex.is-backGroundWhite {
    max-width: 100%;
    margin-top: 55px;
    padding: 40px 5% 50px;
    border-radius: 0;
  }
  .sectionTitle {
    width: 100%;
    font-size: 22px;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .sectionViewMore {
    margin-top: 20px;
    width: 100%;
    height: 40px;
    border-radius: 20px;
    line-height: 38px;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .sectionViewMore::after {
    top: 15px;
    right: 15px;
  }
  .sectionViewMore__text {
    font-size: 14px;
    letter-spacing: 0.03em;
  }
  .sectionContents {
    width: 100%;
    padding-top: 16px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.flexList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flexList::before, .flexList::after {
  content: "";
  width: 23.6%;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.flexItem {
  width: 23.6%;
}

@media screen and (min-width: 880px) and (max-width: 1024px) {
  .contentsMain.is-menuOpen .flexList::before, .contentsMain.is-menuOpen .flexList::after {
    content: "";
    width: 32%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .contentsMain.is-menuOpen .flexItem {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 32%;
  }
}

@media screen and (min-width: 769px) and (max-width: 887px) {
  .contentsMain.is-menuOpen .flexList::before, .contentsMain.is-menuOpen .flexList::after {
    content: "";
    width: 48%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .contentsMain.is-menuOpen .flexItem {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
    width: 48%;
  }
}

@media screen and (max-width: 768px) {
  .flexList::before, .flexList::after {
    content: "";
    width: 48.2%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .flexItem {
    width: 48.2%;
  }
}

.notificationIcon {
  display: inline-block;
}

.notificationIconInner {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid #cfcfcf;
  font-size: 23px;
  line-height: 32px;
  font-weight: normal;
  font-family: 'icomoon' !important;
}

.notificationIconInner::after {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 10px;
  position: absolute;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  left: -1px;
  bottom: -2px;
  color: #fff;
  line-height: 1;
  padding: 1px 0 0;
}

.notificationIconInner.notificationIcon__system {
  background: #98bfff;
  border: 1px solid #88a5eb;
  color: #fff;
}

.notificationIconInner.notificationIcon__system::before {
  content: "\e944";
}

.notificationIconInner.notificationIcon__system::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.notificationIcon__board::before {
  content: "\e942";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__qanda::before {
  content: "\e945";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__comment::before {
  content: "\e943";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__trophy::before {
  content: "\e941";
  font-weight: normal;
}

.notificationIconInner.notificationIcon__gfsLogo {
  background: #98bfff;
  color: #fff;
  border: 1px solid #88a5eb;
}

.notificationIconInner.notificationIcon__gfsLogo::before {
  content: "\e940";
}

.notificationIconInner.notificationIcon__gameOver::before {
  content: "\e95f";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__gameOver::after {
  content: "\e95e";
  background: #e8a619;
}

.notificationIconInner.notificationIcon__tubuyaki::before {
  content: "\e99f";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__tubuyakiFollow::before {
  content: "\e9a1";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.notificationIcon__paidQuestions {
  background: #e7c85d;
  border: 1px solid #e2ae3d;
  color: #fff;
}

.notificationIconInner.notificationIcon__paidQuestions::before {
  content: "\e9ad";
}

.notificationIconInner.notificationIcon__paidQuestions::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.notificationIcon__stockexpected::before {
  content: "\e9ac";
  color: #b5b5b5;
  font-weight: normal;
}

.notificationIconInner.is-boardRes::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.is-boardReaction::after {
  content: "\e93c";
  background: #e95d52;
}

.notificationIconInner.is-boardFollow::after {
  content: "\e93a";
  background: #6888ef;
}

.notificationIconInner.is-qandaRes::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.is-qandaNice::after {
  content: "\e960";
  background: #e95d52;
}

.notificationIconInner.is-commentRes::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.is-commentReaction::after {
  content: "\e93c";
  background: #e95d52;
}

.notificationIconInner.is-tubuyakiRes::after {
  content: "\e93f";
  background: #48b3a5;
}

.notificationIconInner.is-tubuyakiFollow::after {
  content: "\e9a0";
  background: #e95d52;
}

.notificationIconInner.is-trophyBronze::before {
  color: #ad6c4f;
}

.notificationIconInner.is-trophySilver::before {
  color: #7f859e;
}

.notificationIconInner.is-trophyGold::before {
  color: #dda02b;
}

.notificationIconInner.is-trophyDiamond::before {
  color: #6bbee9;
}

.contentsBody {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* 掲示板用 */
  /* END 掲示板用 */
}

.contentsBody--newBBS {
  /* 71pxはPC headerの高さです */
  height: calc(100% - 71px);
}

@media screen and (max-width: 768px) {
  .contentsBody--newBBS {
    /* 61pxはheaderの高さです */
    height: calc(100% - 61px);
  }
}

.contentsSide {
  width: 260px;
  position: fixed;
  margin-left: -260px;
  -webkit-transition: margin .3s ease;
  transition: margin .3s ease;
}

.contentsSide.is-menuOpen {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  margin-left: 0;
}

.contentsSide.is-menuOpen .globalNavi__closePc {
  display: block;
  opacity: 1;
}

.contentsMain {
  width: 100%;
  /* 掲示板用 */
  /* END 掲示板用 */
}

.contentsMain--newBBS {
  height: 100%;
}

/* 掲示板用 */
.js--no-scroll .contentsBody--newBBS {
  position: relative;
  z-index: 250;
}

/* END 掲示板用 */
.is-gfsTop .contentsBody {
  overflow-x: hidden;
}

.is-gfsTop .contentsSide {
  width: 260px;
  position: fixed;
  -webkit-transition: margin .3s ease;
  transition: margin .3s ease;
}

.is-gfsTop .contentsSide.is-menuOpen {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  margin-left: 0;
}

.is-gfsTop .contentsSide.is-menuOpen .globalNavi__closePc {
  display: none;
  opacity: 0;
}

.is-gfsTop .contentsMain {
  -webkit-transition: width .3s ease, margin .3s ease;
  transition: width .3s ease, margin .3s ease;
}

.is-gfsTop .contentsMain.is-menuOpen {
  width: calc(100% - 260px);
  margin-left: 260px;
}

@media screen and (max-width: 1024px) {
  .contentsSide {
    width: 220px;
    margin-left: -220px;
  }
  .is-gfsTop .contentsSide {
    width: 220px;
    margin-left: -220px;
  }
  .is-gfsTop .contentsMain.is-menuOpen {
    width: calc(100% - 220px);
    margin-left: 220px;
  }
}

@media screen and (max-width: 768px) {
  .contentsBody {
    width: 100%;
    display: block;
  }
  .contentsSide {
    width: 305px;
    position: fixed;
    -webkit-transform: translateX(-104%);
            transform: translateX(-104%);
    margin-left: 0;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
  }
  .contentsSide.is-menuOpen {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin-left: 0;
  }
  .contentsSide.is-menuOpen .globalNavi__closePc {
    display: none;
    opacity: 0;
  }
  .contentsMain.is-menuOpen {
    width: 100%;
    margin-left: 0;
  }
  .is-gfsTop .contentsSide {
    width: 305px;
    position: fixed;
    -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
    margin-left: 0;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
  }
  .is-gfsTop .contentsSide.is-menuOpen {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    margin-left: 0;
  }
  .is-gfsTop .contentsMain.is-menuOpen {
    width: 100%;
    margin-left: 0;
  }
}

.lowerTitle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 40px auto 25px;
}

.lowerTitle__icon {
  font-size: 26px;
}

.lowerTitle__text {
  font-size: 20px;
  padding-left: 8px;
}

@media screen and (max-width: 768px) {
  .lowerTitle {
    margin: 35px auto 15px;
  }
  .lowerTitle__text {
    padding-left: 4px;
  }
}

.search-title-box {
  background: #1f2c5c !important;
  color: #fff;
}

.search-title-box .search-title {
  font-size: 20px !important;
  margin: 0 auto;
  max-width: 960px;
  padding: 15px 0 !important;
}

.search-title-box .searchSubText {
  font-size: 22.4px;
  font-size: 1.4rem;
}

@media screen and (max-width: 768px) {
  .search-title-box .search-title {
    padding: 15px 13px !important;
  }
  .search-title-box .searchSubText {
    font-size: 1.2rem;
  }
}

.videoBeginner {
  position: relative;
}

.videoBeginner::before {
  content: "";
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 26px;
  height: 26px;
  border: 1px solid #d3d3d3;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAAsElEQVQoke3LMWrCcABG8V+CQyCrhyjRU3iAgqOUrEpHEdcOXYsHaHfnggfI0Au4VM0hurTwB6ekSwNpa0B33/i990WhyN4wxDNW6Wj/ocXd600fC8zwHoUiq1s+4AVP088KlpgibYKe36SY4z6JONaSP/7foSGJO0TX3sn1cO5he0G/jZGjPCMukcfpaL/DABMcToSHHzdcj8td1DahyGLcVjwuviqh9oDNelxWTfMN57Yrlp/2jgMAAAAASUVORK5CYII=");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 15px;
  z-index: 9;
}

@media screen and (max-width: 768px) {
  .videoBeginner::before {
    top: -7px;
    left: -7px;
    width: 23px;
    height: 23px;
    background-size: 11px 13px;
  }
}

.premiumService .globalNavi__listItem__link::after {
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  margin-left: 3px;
  background-image: url(/img/icon_premium.svg);
  background-image: url(/img/icon_premium.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.premiumService.headerNavi__dropDownItem {
  position: relative;
}

.premiumService.headerNavi__dropDownItem::after {
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  position: absolute;
  top: 3px;
  right: 3px;
  background-image: url(/img/icon_premium.svg);
  background-image: url(/img/icon_premium.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.premiumService .footerNavi__listItem__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.premiumService .footerNavi__listItem__link::before {
  content: "";
  display: block;
  width: 16px;
  height: 20px;
  margin-left: 3px;
  background-image: url(/img/icon_premium.svg);
  background-image: url(/img/icon_premium.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

@media screen and (max-width: 768px) {
  .premiumService .footerNavi__listItem__link::before {
    width: 14px;
    height: 15px;
  }
}

@-webkit-keyframes failed_top {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes failed_top {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes failed_img {
  0% {
    -webkit-transform: translate(0, -30%);
            transform: translate(0, -30%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes failed_img {
  0% {
    -webkit-transform: translate(0, -30%);
            transform: translate(0, -30%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
    opacity: 1;
  }
}

@-webkit-keyframes fadein_page {
  0% {
    display: none;
    opacity: 0;
    height: 0;
  }
  1% {
    display: block;
    opacity: 0;
    height: auto;
  }
  100% {
    opacity: 1;
    height: auto;
    display: block;
  }
}

@keyframes fadein_page {
  0% {
    display: none;
    opacity: 0;
    height: 0;
  }
  1% {
    display: block;
    opacity: 0;
    height: auto;
  }
  100% {
    opacity: 1;
    height: auto;
    display: block;
  }
}

@-webkit-keyframes tutorial_focus_delay {
  from {
    background-color: rgba(255, 255, 255, 0);
  }
  to {
    background-color: white;
  }
}

@keyframes tutorial_focus_delay {
  from {
    background-color: rgba(255, 255, 255, 0);
  }
  to {
    background-color: white;
  }
}

@-webkit-keyframes tutorial_active_delay {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

@keyframes tutorial_active_delay {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
  }
}

.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  height: auto;
  z-index: 500;
  background: #fff;
  -webkit-filter: none;
          filter: none;
  border-bottom: 1px solid #cfcfcf;
  display: block;
}

.headerWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.headerLeftBlock {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.headerMenu {
  width: 70px;
  height: 70px;
  padding-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  border: 0;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.headerMenu:hover {
  background: #f1f1f1;
}

.headerMenuInner {
  text-align: center;
  color: #1f2c5c;
}

.headerMenuIcon {
  display: block;
  font-size: 26px;
}

.headerMenuText {
  font-size: 12px;
  line-height: 1.2;
}

.headerMenu.is-menuOpen {
  background: #f1f1f1;
}

.headerMenu.is-menuOpen .headerMenuIcon {
  width: 22px;
  height: 26px;
  padding-top: 4px;
  position: relative;
}

.headerMenu.is-menuOpen .headerMenuIcon::before, .headerMenu.is-menuOpen .headerMenuIcon::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 4px;
  width: 28px;
  height: 3px;
  background-color: #1f2c5c;
}

.headerMenu.is-menuOpen .headerMenuIcon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.headerMenu.is-menuOpen .headerMenuIcon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.headerMenu.isTutorialFocus {
  position: relative;
  z-index: 998;
  -webkit-animation: tutorial_focus_delay .2s .6s ease forwards;
          animation: tutorial_focus_delay .2s .6s ease forwards;
  -webkit-transition: none;
  transition: none;
}

.headerMenu--tutorialClone {
  opacity: 0;
  visibility: hidden;
  position: absolute;
}

.headerMenu--tutorialClone.isTutorialFocus {
  position: absolute;
  z-index: 1000;
  visibility: visible;
  -webkit-animation: none;
          animation: none;
}

.headerLogo {
  margin-left: 15px;
  text-decoration: none;
}

.headerLogoBox {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0 auto;
}

.headerLogo__image {
  display: block;
  width: 90px;
}

.headerLogo__icon {
  display: block;
  width: 34px;
  height: 32px;
  margin-right: 10px;
}

.headerLogo__icon img {
  width: 100%;
}

.headerLogo__font {
  display: block;
  width: 170px;
  font-size: 0;
}

.headerNavi.isTutorialFocus {
  position: relative;
  z-index: 998;
  -webkit-animation: tutorial_focus_delay .2s .6s ease forwards;
          animation: tutorial_focus_delay .2s .6s ease forwards;
}

.headerNavi__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 0;
}

.headerNavi__item {
  position: relative;
  width: 70px;
  height: 70px;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.headerNavi__item:last-child {
  margin-right: 20px;
}

.headerNavi__item.headerNavi__item--login:last-child {
  margin-right: 10px;
  margin-left: 10px;
}

.headerNavi__item:hover {
  background: #f1f1f1;
}

.headerNavi__item--login {
  width: 160px;
  height: 40px;
  margin-left: 5px;
}

.headerNavi__itemInner {
  width: 100%;
  height: 100%;
  padding-top: 12px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
}

.headerNavi__itemInner:hover {
  text-decoration: none;
}

.headerNavi__itemInner--login {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 100%;
  padding-top: 0;
  padding-right: 4px;
  background: #1f2c5c;
  border-radius: 4px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.headerNavi__itemInner--login:hover {
  opacity: .8;
}

.headerNavi__itemIcon {
  font-size: 24px;
  color: #1f2c5c;
  height: 36px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.headerNavi__itemIcon--login {
  margin-right: 5px;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
}

.headerNavi__itemIcon .icon-bell2 {
  position: relative;
}

.headerNavi__itemImage {
  width: 35px;
  height: 35px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
}

.headerNavi__itemName {
  font-size: 12px;
  line-height: 1.2;
  color: #1f2c5c;
  margin-bottom: 0;
}

.headerNavi__itemName--login {
  font-size: 16px;
  color: #fff;
}

.header.isTutorial {
  position: static;
}

@media screen and (max-width: 768px) {
  .header {
    z-index: 250;
  }
  .headerWrap {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .headerLeftBlock {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .headerMenu {
    width: 60px;
    height: 60px;
    padding-top: 5px;
  }
  .headerMenu:hover {
    background: #f1f1f1;
  }
  .headerMenuInner {
    text-align: center;
    color: #1f2c5c;
  }
  .headerMenuIcon {
    font-size: 24px;
  }
  .headerMenuText {
    font-size: 10px;
    line-height: 1.2;
  }
  .headerMenu.is-menuOpen .headerMenuIcon::before, .headerMenu.is-menuOpen .headerMenuIcon::after {
    width: 22px;
    height: 2px;
    background-color: #1f2c5c;
  }
  .headerLogo {
    margin-left: 10px;
  }
  .headerLogoBox {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .headerLogo__icon {
    display: block;
    width: 40px;
    height: 35px;
    margin-right: 3px;
  }
  .headerLogo__icon img {
    width: 100%;
  }
  .headerLogo__font {
    margin-top: 5px;
    width: 50px;
    height: 25px;
  }
  .headerNavi {
    padding-right: 0;
  }
  .headerNavi__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .headerNavi__item {
    position: relative;
    width: 55px;
    height: 60px;
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  .headerNavi__item:hover {
    background: #f1f1f1;
  }
  .headerNavi__item:last-child {
    margin-right: 10px;
  }
  .headerNavi__item.headerNavi__item--login:last-child {
    margin-right: 0;
    margin-left: 5px;
  }
  .headerNavi__item.loggedIn {
    margin-right: 10px;
  }
  .headerNavi__item--login {
    width: 65px;
    height: 60px;
  }
  .headerNavi__itemInner {
    display: block;
    width: 100%;
    height: 100%;
    padding-top: 5px;
    text-align: center;
    cursor: pointer;
  }
  .headerNavi__itemInner--login {
    padding-top: 10px;
    padding-right: 0;
    border-radius: 0;
  }
  .headerNavi__itemIcon {
    font-size: 21px;
    color: #1f2c5c;
    margin-top: 4px;
    display: block;
    height: auto;
  }
  .headerNavi__itemIcon--login {
    display: block;
    margin-right: 0;
    text-align: center;
    font-size: 20px;
    color: #fff;
  }
  .headerNavi__itemIcon .icon-bell-fill {
    position: relative;
  }
  .headerNavi__itemImage {
    width: 35px;
    height: 35px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
  }
  .headerNavi__itemName {
    font-size: 10px;
    line-height: 1.2;
    color: #1f2c5c;
  }
  .headerNavi__itemName--login {
    display: block;
    margin-top: 5px;
    text-align: center;
    color: #fff;
  }
}

.headerBanner {
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.headerBanner.is-beginner {
  height: 90px;
  padding-top: 30px;
}

.headerBanner.is-toushi {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 80px;
  background-color: #ffd21e;
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity .3s ease, visibility .3s ease;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 21;
}

.headerBanner.is-toushi::before, .headerBanner.is-toushi::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}

.headerBanner.is-toushi::before {
  width: 386px;
  left: 0;
  background: url("/img/common/floating_banner_toushi_bgleft__pc.png") no-repeat left top/auto 100%;
}

.headerBanner.is-toushi::after {
  width: 278px;
  right: 0;
  background: url("/img/common/floating_banner_toushi_bgright__pc.png") no-repeat left top/auto 100%;
}

.headerBanner.is-toushi.isHide {
  visibility: hidden;
  opacity: 0;
}

.headerBannerInner {
  height: 100%;
  margin: 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
  z-index: 1;
}

.headerBannerWrap {
  height: 60px;
  background: url("/img/common/floating_banner_beginner_bg.png") repeat top left;
}

.beginnerBanner__character {
  width: 104px;
  height: 100%;
  /* margin: -10px 15px 0 0; */
  overflow: hidden;
}

.beginnerBanner__character img {
  margin-top: -28px;
}

.beginnerBanner__mark {
  display: none;
}

.beginnerBanner__content {
  width: calc(100% - 104px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 15px;
}

.beginnerBanner__text {
  color: #fff;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 1;
}

.beginnerBanner__textLarge {
  font-size: 28px;
  letter-spacing: 0.13em;
  padding-right: 35px;
  position: relative;
}

.beginnerBanner__textLarge::after {
  content: "";
  display: block;
  position: absolute;
  right: 10px;
  top: 0;
  width: 20px;
  height: 30px;
  background: url("/img/common/floating_banner_beginner.png") no-repeat center center/contain;
}

.beginnerBanner__textSmall {
  font-size: 18px;
  letter-spacing: 0.05em;
  padding-top: 5px;
}

.beginnerBanner__button {
  position: relative;
  width: 180px;
  height: 40px;
  margin-left: 17px;
  line-height: 40px;
  background: #feda00;
  -webkit-box-shadow: #ef9800 0 3px 0;
          box-shadow: #ef9800 0 3px 0;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  border-radius: 5px;
  text-align: center;
}

.beginnerBanner__button::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #526a74;
  border-right: 2px solid #526a74;
}

.beginnerBanner__button:hover {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 0.9;
}

.beginnerBanner__buttonText {
  font-size: 16px;
  color: #526a74;
  font-weight: bold;
}

.beginnerBanner__close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  width: 100%;
  height: 30px;
  line-height: 30px;
  left: 0;
  top: 0;
  background: #66808a;
  color: #fff;
  cursor: pointer;
}

.beginnerBanner__closeIcon {
  width: 17px;
  height: 17px;
  margin-right: 5px;
  position: relative;
  border: 1px solid #fff;
  border-radius: 50%;
}

.beginnerBanner__closeIcon::before, .beginnerBanner__closeIcon::after {
  content: "";
  position: absolute;
  top: 7px;
  left: 3px;
  width: 9px;
  height: 1px;
  background: #fff;
}

.beginnerBanner__closeIcon::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.beginnerBanner__closeIcon::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.beginnerBanner__closeText {
  font-size: 12px;
}

.toushiBanner__character {
  width: 150px;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: calc(50% + 327px);
}

.toushiBanner__character img {
  margin-top: -23px;
}

.toushiBanner__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 1;
}

.toushiBanner__logo img {
  height: auto;
}

.toushiBanner__text {
  font-size: 29px;
  font-weight: bold;
  text-align: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: 15px;
  padding: 0 5px;
  line-height: 1.6;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(255, 255, 255, .7)));
  background: linear-gradient(transparent 60%, rgba(255, 255, 255, .7) 60%);
  letter-spacing: 0.05em;
}

.toushiBanner__text1 {
  color: #1c734f;
}

.toushiBanner__text2 {
  color: #000;
}

.toushiBanner__button {
  position: relative;
  width: 180px;
  height: 40px;
  margin-left: 17px;
  line-height: 40px;
  background: #1b9361;
  -webkit-box-shadow: #095b08 0 3px 0;
          box-shadow: #095b08 0 3px 0;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  border-radius: 5px;
  text-align: center;
}

.toushiBanner__button::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

.toushiBanner__button:hover {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-box-shadow: none;
          box-shadow: none;
  opacity: 0.9;
}

.toushiBanner__buttonText {
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

@media screen and (max-width: 1140px) {
  .headerBanner.is-visible.is-beginner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .beginnerBanner {
    margin: auto 0 auto auto;
  }
  .beginnerBanner__character {
    width: 90px;
    height: 100%;
  }
  .beginnerBanner__character img {
    margin-top: -20px;
  }
  .beginnerBanner__content {
    width: calc(100% - 90px);
    margin-left: 8px;
  }
  .beginnerBanner__text {
    padding-top: 3px;
  }
  .beginnerBanner__textLarge {
    font-size: 22px;
    padding-right: 28px;
  }
  .beginnerBanner__textLarge::after {
    width: 16px;
    height: 24px;
  }
  .beginnerBanner__textSmall {
    font-size: 15px;
    letter-spacing: 0.03em;
    padding-top: 0;
  }
  .beginnerBanner__button {
    width: 140px;
    margin-left: 10px;
  }
  .beginnerBanner__button::before {
    width: 7px;
    height: 7px;
    right: 10px;
  }
  .beginnerBanner__buttonText {
    font-size: 14px;
  }
  .toushiBanner__character {
    width: 140px;
    left: calc(50% + 277px);
  }
  .toushiBanner__logo {
    width: 140px;
  }
  .toushiBanner__text {
    font-size: 22px;
    margin-left: 15px;
  }
  .toushiBanner__button {
    width: 140px;
    margin-left: 10px;
  }
  .toushiBanner__button::before {
    width: 7px;
    height: 7px;
    right: 10px;
  }
  .toushiBanner__buttonText {
    font-size: 14px;
  }
}

@media screen and (max-width: 768px) {
  .headerBanner.is-beginner {
    height: 100px;
    background: url("/img/common/floating_banner_beginner_bg.png") repeat top left/50px auto;
  }
  .headerBanner.is-toushi {
    height: 70px;
    background-color: #ffd21e;
  }
  .headerBanner.is-toushi::before, .headerBanner.is-toushi::after {
    width: 50%;
    height: 100%;
  }
  .headerBanner.is-toushi::before {
    background: url("/img/common/floating_banner_toushi_bgleft__sp.png") no-repeat left top/auto 100%;
  }
  .headerBanner.is-toushi::after {
    background: url("/img/common/floating_banner_toushi_bgright__sp.png") no-repeat right top/auto 100%;
  }
  .headerBannerInner {
    height: auto;
    margin: 0 auto;
  }
  .beginnerBanner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .beginnerBanner__character {
    width: 78px;
    min-width: 76px;
    height: 100%;
    overflow: visible;
  }
  .beginnerBanner__character img {
    margin-top: 0;
    margin-bottom: -20px;
    -webkit-transform: translateX(10px);
            transform: translateX(10px);
  }
  .beginnerBanner__mark {
    width: 78px;
    min-width: 76px;
    padding-right: 30px;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  .beginnerBanner__mark img {
    width: 20px;
    height: auto;
    margin: 0 auto;
  }
  .beginnerBanner__content {
    min-width: 240px;
    width: 240px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin-left: 0;
    text-align: center;
  }
  .beginnerBanner__text {
    padding-top: 10px;
  }
  .beginnerBanner__textLarge {
    font-size: 19px;
    letter-spacing: 0.05em;
    padding-right: 4px;
    position: relative;
  }
  .beginnerBanner__textLarge::after {
    content: none;
  }
  .beginnerBanner__textSmall {
    font-size: 13px;
    padding-top: 5px;
  }
  .beginnerBanner__button {
    width: 150px;
    height: 25px;
    margin-left: 0;
    margin-top: 8px;
    line-height: 25px;
    -webkit-box-shadow: #ef9800 0 2px 0;
            box-shadow: #ef9800 0 2px 0;
    border-radius: 4px;
  }
  .beginnerBanner__button::before {
    width: 7px;
    height: 7px;
    right: 8px;
    border-top: 1px solid #526a74;
    border-right: 1px solid #526a74;
  }
  .beginnerBanner__button:hover {
    -webkit-transform: translateY(2px);
            transform: translateY(2px);
  }
  .beginnerBanner__buttonText {
    font-size: 12px;
  }
  .beginnerBanner__close {
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .beginnerBanner__closeIcon {
    width: 11px;
    height: 11px;
    margin-right: 5px;
  }
  .beginnerBanner__closeIcon::before, .beginnerBanner__closeIcon::after {
    top: 4px;
    left: 1px;
    width: 7px;
  }
  .beginnerBanner__closeText {
    font-size: 12px;
  }
  .toushiBanner {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .toushiBanner__character {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 22.5%;
    background: transparent url("/img/common/floating_banner_yuichiro.png") no-repeat left bottom/auto 122%;
  }
  .toushiBanner__character img {
    display: none;
  }
  .toushiBanner__content {
    width: 240px;
    min-width: 240px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding-bottom: 8px;
  }
  .toushiBanner__logo {
    width: 73px;
    margin-right: 8px;
  }
  .toushiBanner__text {
    margin-top: 8px;
    font-size: 15px;
    margin-left: 0;
    padding: 0 1px;
    line-height: 1.1;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, transparent), color-stop(60%, rgba(255, 255, 255, .7)));
    background: linear-gradient(transparent 60%, rgba(255, 255, 255, .7) 60%);
    letter-spacing: 0.04em;
  }
  .toushiBanner__text1 {
    color: #1c734f;
  }
  .toushiBanner__text2 {
    color: #000;
  }
  .toushiBanner__button {
    width: 150px;
    height: 25px;
    margin-left: 0;
    margin-top: 8px;
    line-height: 25px;
    -webkit-box-shadow: #095b08 0 2px 0;
            box-shadow: #095b08 0 2px 0;
    border-radius: 4px;
  }
  .toushiBanner__button::before {
    width: 7px;
    height: 7px;
    right: 8px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
  }
  .toushiBanner__button:hover {
    -webkit-transform: translateY(3px);
            transform: translateY(3px);
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .toushiBanner__buttonText {
    font-size: 12px;
    color: #fff;
    font-weight: bold;
  }
}

.footer {
  position: relative;
  background: #414141;
  width: 100%;
  letter-spacing: 0.025em;
}

.footerNavi {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  max-width: 94%;
  width: 960px;
  margin: 0 auto;
}

.footerNavi__list {
  max-width: 240px;
  width: 25%;
  padding: 56px 0 36.5px;
  color: #fff;
}

.footerNavi__listTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12.5px;
}

.footerNavi__listItem + .footerNavi__listTitle {
  margin-top: 32.5px;
}

.footerNavi__listItemLead {
  color: #fff;
  font-size: 14px;
}

.footerNavi__listItem__link {
  font-size: 14px;
  color: #cecece;
}

.footerNavi__listItem__link:hover {
  opacity: .75;
}

.footerNavi__listItem__link:visited {
  color: #cecece;
}

.footerNavi__listChildItemLink {
  color: #cecece;
  font-size: 14px;
}

.footerNavi__sns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  margin-bottom: 56px;
  gap: 20px;
}

.footerNavi__snsItem--light .footerNavi__snsLink {
  background-color: #AFD1F1;
}

.footerNavi__snsItem--light .footerNavi__snsLink::before {
  background-image: url(/img/icon_x.svg);
}

.footerNavi__snsItem--dark .footerNavi__snsLink {
  background-color: #3977B7;
  color: #fff;
}

.footerNavi__snsItem--dark .footerNavi__snsLink::before {
  background-image: url(/img/icon_x_white.svg);
}

.footerNavi__snsLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 14px;
  max-width: 350px;
  width: 100%;
  height: 85px;
  padding-right: 30px;
  padding-left: 30px;
  border-radius: 6px;
}

.footerNavi__snsLink::before {
  content: "";
  display: inline-block;
  width: 33px;
  height: 33px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.footerNavi__snsHead {
  display: block;
  font-size: 14px;
  font-size: 22.4px;
  font-size: 1.4rem;
}

.footerNavi__snsTitle {
  font-size: 28.8px;
  font-size: 1.8rem;
  font-weight: bold;
}

.footerNavi__snsTitleSub {
  font-size: 19.2px;
  font-size: 1.2rem;
}

.copyright {
  display: block;
  background: #414141;
  border-top: 1px solid #606060;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
  color: #7b7b7b;
  text-align: center;
  font-size: 12px;
}

@media screen and (min-width: 769px) {
  .footerNavi__listItem + .footerNavi__listItem {
    margin-top: 8px;
  }
  .footerNavi__listChildItemLink::before {
    content: "-";
    margin-right: 4px;
  }
  .footerNavi__listChildItemLink:hover {
    opacity: .75;
  }
  .footerNavi__listChildItem + .footerNavi__listChildItem {
    margin-top: -2px;
  }
}

@media screen and (max-width: 768px) {
  .footer {
    background: #414141;
    width: 100%;
  }
  .footerNavi {
    display: block;
    max-width: 90%;
    padding: 40px 0 0;
    overflow: hidden;
  }
  .footerNavi__list {
    max-width: 100%;
    width: 100%;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    position: relative;
  }
  .footerNavi__list + .footerNavi__list {
    margin-top: 31px;
  }
  .footerNavi__listTitle {
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #5f5f5f;
  }
  .footerNavi__listItem {
    position: relative;
    width: 50%;
    margin-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .footerNavi__listItem + .footerNavi__listTitle {
    margin-top: 31px;
  }
  .footerNavi__listItem::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background-color: #5f5f5f;
  }
  .footerNavi__listItem--wide {
    display: block;
    width: 100%;
    padding: 12px 0 17px;
  }
  .footerNavi__listItem--wide::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 1px;
    background-color: #5f5f5f;
  }
  .footerNavi__listItemLead {
    font-size: 12px;
  }
  .footerNavi__listItem__link {
    display: block;
    position: relative;
    width: 100%;
    padding: 13.8px 0;
    font-size: clamp(10px, 3.2vw, 12px);
    line-height: 1.2;
  }
  .footerNavi__listItem__link::after {
    content: "\e914";
    position: absolute;
    top: 50%;
    right: 15px;
    color: #878787;
    font-size: 12px;
    font-family: 'icomoon' !important;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .footerNavi__listChild {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-top: 10.6px;
  }
  .footerNavi__listChildItemLink {
    font-size: 12px;
  }
  .footerNavi__listChildItem + .footerNavi__listChildItem {
    margin-left: 40px;
  }
  .footerNavi__listChildItem + .footerNavi__listChildItem .footerNavi__listChildItemLink {
    position: relative;
  }
  .footerNavi__listChildItem + .footerNavi__listChildItem .footerNavi__listChildItemLink::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: -20px;
    width: 1px;
    height: 12px;
    background-color: #5f5f5f;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  .footerNavi__sns {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    margin-top: 36px;
    margin-bottom: 0;
  }
  .footerNavi__snsItem {
    width: 100%;
  }
  .footerNavi__snsLink {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    margin-inline: auto;
    padding-right: 20px;
    padding-left: 30px;
  }
  .copyright {
    margin: 0 auto;
    border-top: none;
  }
}

.globalNavi {
  background: #fff;
  height: calc(100% - 70px);
  z-index: 250;
}

.globalNavi.is-visibleBeginner {
  height: calc(100% - 160px);
}

.globalNavi.isTutorial {
  z-index: 998;
}

.globalNavi.isTutorial::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 998;
  background-color: rgba(0, 0, 0, .7);
  content: "";
}

.globalNaviInner {
  height: 100%;
  overflow-y: scroll;
}

.globalNavi__closePc {
  position: absolute;
  top: 15px;
  right: -50px;
  width: 35px;
  height: 35px;
  display: none;
  opacity: 0;
  cursor: pointer;
}

.globalNavi__closeLinePc {
  width: 35px;
  height: 35px;
}

.globalNavi__closeLinePc::before, .globalNavi__closeLinePc::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  position: absolute;
  top: 10px;
  left: 0;
  border-radius: 2px;
}

.globalNavi__closeLinePc::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.globalNavi__closeLinePc::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.globalNavi__userInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.globalNavi__userInfoIcon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}

.globalNavi__userInfoName {
  width: calc(100% - 40px);
  padding: 0 20px 0 15px;
  font-size: 14px;
  word-break: break-all;
  color: #fff;
}

.globalNavi__userInfoText {
  margin-top: 12px;
  font-size: 12px;
  color: #fff;
}

.globalNavi__userMypageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 20px 10px 20px 30px;
  background: #1f2c5c;
}

.globalNavi__userMypageLink.isTutorialFocus {
  position: relative;
  z-index: 998;
  background: #1f2c5c;
}

.globalNavi__userMypageLink:hover {
  opacity: .8;
}

.globalNavi__userMypageLink__icon::before {
  font-size: 12px;
  color: #fff;
}

.globalNavi__login {
  padding: 30px 20px 10px;
}

.globalNavi__loginLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 40px;
  padding-right: 4px;
  background: #1f2c5c;
  border-radius: 4px;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.globalNavi__loginLink:hover {
  opacity: .8;
}

.globalNavi__loginIcon {
  margin-right: 5px;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
}

.globalNavi__loginText {
  font-size: 16px;
  color: #fff;
}

.globalNavi__login + .globalNavi__list {
  border-top: 0;
}

.globalNavi__hotBanner {
  padding: 10px;
}

.globalNavi__hotBannerItem + .globalNavi__hotBannerItem {
  margin-top: 10px;
}

.globalNavi__hotBannerItemLink:hover {
  opacity: .8;
}

.globalNavi__tileList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.globalNavi__tileListItem {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-preferred-size: 33.3%;
      flex-basis: 33.3%;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}

.globalNavi__tileListItem__link {
  width: 100%;
  min-height: 92px;
  padding: 14px;
}

.globalNavi__tileListItem__link:hover, .globalNavi__tileListItem__link.isTutorialFocus {
  background: #eff2fd;
}

.globalNavi__tileListItem__link:visited {
  color: #1f2c5c;
}

.globalNavi__tileListItem__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 23px;
  color: #1f2c5c;
}

.globalNavi__tileListItem__icon--live {
  font-size: 25px;
}

.globalNavi__tileListItem__text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 10px;
  text-align: center;
  line-height: 1.2;
  font-size: 12px;
  color: #1f2c5c;
}

.globalNavi__tileListItem__text--live {
  margin-top: 8px;
}

.globalNavi__tutorialFocus.isTutorialFocus {
  position: relative;
  z-index: 998;
  background-color: #fff;
}

.globalNavi__listTitle {
  padding: 8px 10px 6px 25px;
  background-color: #f3f4f7;
  color: #656565;
  font-size: 12px;
}

.globalNavi__listItem__link {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 10px 11px 25px;
  border-top: 1px solid #e9e9e9;
  color: #1f2c5c;
  font-size: 14px;
}

.globalNavi__listItem__link:hover, .globalNavi__listItem__link.isTutorialFocus {
  background: #eff2fd;
}

.globalNavi__listItem__link:visited {
  color: #1f2c5c;
}

.globalNavi__listItem__link--borderBottom {
  border-bottom: 1px solid #e9e9e9;
}

.globalNavi__listItem__inner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  width: 100%;
  padding: 12px 12px 11px 25px;
  color: #1f2c5c;
  font-size: 14px;
  cursor: pointer;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  border-top: 1px solid #e9e9e9;
}

.globalNavi__listItem__inner:hover, .globalNavi__listItem__inner.isTutorialFocus {
  background: #eff2fd;
}

.globalNavi__listItem__inner::after {
  font-size: 12px;
  color: #1f2c5c;
  font-family: 'icomoon' !important;
  content: "\e914";
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  position: absolute;
  top: 15px;
  right: 13px;
}

.globalNavi__listItem__inner.is-active::after {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.globalNavi__listItem__inner--toggle {
  border-top: 1px solid #e9e9e9;
}

.globalNavi__listItem__contentsLink {
  display: block;
  position: relative;
  width: 100%;
  padding: 4px 12px 4px 55px;
  border-top: 1px solid #e2e2e2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  color: #1f2c5c;
  white-space: nowrap;
}

.globalNavi__listItem__contentsLink:hover, .globalNavi__listItem__contentsLink.isTutorialFocus {
  background: #eff2fd;
}

.globalNavi__listItem__icon {
  font-size: 14px;
  padding-right: 10px;
}

.globalNavi__listItem__icon--lg {
  margin-left: -2px;
  font-size: 18px;
  padding-right: 10px;
}

.globalNavi__companyList {
  margin: 28px 0 40px 30px;
}

.globalNavi__companyListItem {
  width: 100%;
  padding: 6px 0;
  font-size: 12px;
}

.globalNavi__companyListItem__link {
  color: #1f2c5c;
}

.globalNavi__companyListItem__link:hover {
  opacity: .7;
}

.globalNavi__companyListItem__link:visited {
  color: #1f2c5c;
}

.globalNavi__companyListItem__inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.globalNavi__companyListItem__innerRight {
  position: relative;
  margin-left: 20px;
}

.globalNavi__companyListItem__innerRight::before {
  content: "|";
  display: block;
  position: absolute;
  left: -10px;
  top: -2px;
  font-size: 14px;
  color: #1f2c5c;
}

.globalNavi__logout {
  padding: 0 25px 40px;
}

.globalNavi__logoutButton {
  display: block;
  width: 100%;
  padding: 10px 0;
  color: #333;
  font-size: 16px;
  text-align: center;
  border: 1px solid #cfcfcf;
  border-radius: 5px;
}

.globalNavi__logoutButton:hover {
  background: #eff2fd;
}

[data-toggle] + [data-toggle-contents] {
  display: none;
}

@media screen and (max-width: 1024px) {
  .globalNavi__tileListItem__link {
    padding: 14px 8px;
  }
  .globalNavi__tileListItem__text {
    font-size: 12px;
  }
  .is-gfsTop .globalNavi__tileListItem__link {
    padding: 14px 8px;
  }
  .is-gfsTop .globalNavi__tileListItem__text {
    font-size: 12px;
  }
}

@media screen and (min-width: 769px) {
  .global-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .4);
    z-index: 100;
  }
  .is-gfsTop .global-overlay {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .globalNavi {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    height: 100%;
  }
  .globalNavi.is-visibleBeginner {
    height: 100%;
  }
  .globalNaviInner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 60px;
    -webkit-box-shadow: 10px 0px 9px -10px #777;
            box-shadow: 10px 0px 9px -10px #777;
  }
  .globalNavi__loginLink {
    width: 100%;
    height: 50px;
    border-radius: 3px;
  }
  .globalNavi__loginIcon {
    margin-right: 6px;
    font-size: 16px;
  }
  .globalNavi__loginText {
    font-size: 16px;
  }
  .globalNavi__login + .globalNavi__list {
    border-top: 0;
  }
  .globalNavi__listTitle {
    font-size: 15px;
  }
  .globalNavi__listItem__link {
    padding: 16px 10px 15px 25px;
    border-top: 1px solid #e9e9e9;
    font-size: 16px;
  }
  .globalNavi__listItem__inner {
    padding: 10px 12px 10px 25px;
    font-size: 16px;
  }
  .globalNavi__listItem__contentsLink {
    padding: 5px 12px 5px 55px;
    font-size: 14px;
  }
  .globalNavi__heading {
    position: relative;
    width: 100%;
    height: 60px;
    padding: 15px 13px 8px 15px;
    background: #fff;
    z-index: 1;
    -webkit-box-shadow: 0px 5px 9px -10px #777;
            box-shadow: 0px 5px 9px -10px #777;
  }
  .globalNavi__heading.isTutorial {
    z-index: 999;
  }
  .globalNavi__heading.isTutorial::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .7);
    content: "";
  }
  .globalNavi__close {
    width: 30px;
  }
  .globalNavi__closePc {
    display: none;
  }
  .globalNavi__closeLine {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    position: relative;
  }
  .globalNavi__closeLine::before, .globalNavi__closeLine::after {
    content: "";
    width: 100%;
    height: 3px;
    background: #656565;
    position: absolute;
    top: 10px;
    left: 0;
  }
  .globalNavi__closeLine::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .globalNavi__closeLine::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .globalNavi__closeLinePc {
    display: none;
  }
  .globalNavi__closeText {
    color: #656565;
    font-size: 10px;
  }
  .global-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 250;
  }
}

.headerNavi__dropDown {
  position: absolute;
  top: 70px;
  right: 0;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: none;
  font-size: 13px;
  display: none;
}

.headerNavi__dropDown.is-function {
  width: 260px;
}

.headerNavi__dropDown.is-help {
  width: 250px;
}

.headerNavi__dropDown.is-notification {
  width: 320px;
  height: 480px;
  overflow-y: hidden;
}

.headerNavi__dropDownList {
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.headerNavi__dropDownItem {
  width: 78px;
  height: 78px;
  border-radius: 5px;
}

.headerNavi__dropDownItem:hover {
  background: #f1f1f1;
}

.headerNavi__dropDownItem__link {
  display: block;
  padding-top: 10px;
  text-align: center;
}

.headerNavi__dropDownItem__icon {
  font-size: 30px;
  color: #1f2c5c;
}

.headerNavi__dropDownItem__text {
  font-size: 11px;
  line-height: 1.2;
  color: #1f2c5c;
}

.headerNavi__dropDownItem--senbatsuzemi .headerNavi__dropDownItem__link {
  padding-top: 2px;
}

.headerNavi__dropDownItem--senbatsuzemi .headerNavi__dropDownItem__icon {
  font-size: 40px;
  display: block;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownList {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 0;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownItem {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 1;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownItem::after {
  content: "\e914";
  position: absolute;
  top: 50%;
  right: 15px;
  color: #1f2c5c;
  font-size: 16px;
  font-family: 'icomoon' !important;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: -1;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownItem + .headerNavi__dropDownItem {
  border-top: 1px solid #e2e2e2;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownItem__link {
  padding: 14px 20px;
  text-align: left;
}

.headerNavi__dropDown.is-help .headerNavi__dropDownItem__text {
  font-size: 16px;
}

.headerNavi__item.is-dropdown {
  position: relative;
}

.headerNavi__item.is-dropdown:hover > .headerNavi__dropDown {
  display: block;
}

.notificationLength {
  font-family: 'Noto Sans JP', sans-serif;
  display: inline-block;
  width: auto;
  max-width: 32px;
  min-width: 20px;
  height: 20px;
  padding: 3px 4px 2px;
  position: absolute;
  top: -5px;
  right: -16px;
  border-radius: 10px;
  background: #e50000;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
}

.notificationLength.is-tabInner {
  top: -2px;
  right: -2px;
}

.notification {
  font-family: 'Noto Sans JP', sans-serif;
}

.notification__tab {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #d9d9d9;
  background: #fff;
}

.notification__tabItem {
  width: 48%;
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  border: 1px solid #1f2c5c;
  border-radius: 5px;
  text-align: center;
  color: #1f2c5c;
  font-size: 12px;
  line-height: 1.3;
  cursor: pointer;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.notification__tabItem.is-active {
  background: #1f2c5c;
  color: #fff;
}

.notification__tabItem:hover {
  opacity: 0.75;
}

.notification__content {
  display: none;
  position: relative;
  text-align: right;
  background: #fff;
}

.notification__content.is-active {
  display: block;
}

.notification__content .allReadButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 92%;
  height: 25px;
  margin: 0 auto;
  border: 1px solid #bfbfbf;
  border-radius: 13px;
  color: #bfbfbf;
  background: #fff;
  letter-spacing: 0.02em;
  text-align: center;
  pointer-events: none;
  cursor: default;
}

.notification__content .allReadButton.is-unRead {
  cursor: pointer;
  pointer-events: auto !important;
  color: #677eb3;
  border: 1px solid #677eb3;
}

.notification__content .allReadButton.is-unRead:hover {
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
  opacity: 0.75;
}

.notification__content .allReadButtonText {
  font-size: 12px;
  font-weight: bold;
}

.notification__content .allReadButton .check {
  font-size: 18px;
  padding-right: 1px;
}

.notification__content .allReadButtonWrap {
  width: 100%;
  background: #fff;
  padding: 14px 8px 14px 0;
}

.notificationWrap {
  padding: 0 8px 40px 0;
  height: 427px;
  overflow-y: scroll;
  text-align: left;
}

.notificationItem {
  color: #878787;
  background: #f8f8f8;
}

.notificationItem + .notificationItem {
  border-top: 1px solid #d9d9d9;
}

.notificationItem:hover {
  opacity: 0.8;
}

.notificationItem.is-unRead {
  background: #fff;
}

.notificationItem.is-unRead h2 {
  color: #315096;
}

.notificationItem.is-unRead .notificationItem__link {
  position: relative;
}

.notificationItem.is-unRead .notificationItem__link::before {
  content: "未読";
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 15px;
  border-radius: 10px;
  font-size: 10px;
  color: #fff;
  line-height: 15px;
  text-align: center;
  background: #e50000;
}

.notificationItem__link {
  display: block;
  padding: 9px 10px 12px;
}

.notificationItem__date {
  color: #878787;
  font-size: 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.notificationItem__time {
  margin-left: 5px;
}

.notificationItem__category {
  width: 70px;
  height: 15px;
  line-height: 15px;
  border-radius: 3px;
  margin-right: 8px;
  color: #fff;
  text-align: center;
}

.notificationItem__content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 5px;
}

.notificationItem__contentIconLarge {
  width: 30px;
  height: 30px;
}

.notificationItem__contentIcon + .notificationItem__contentText {
  width: calc(100% - 30px);
  padding-left: 10px;
}

.notificationItem__contentText {
  width: 100%;
}

.notificationItem__contentText h2 {
  font-size: 14px;
  line-height: 1.4;
  font-weight: normal;
}

.notificationItem__contentText p {
  margin-top: 3px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notificationBottom {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #7a8dba;
  text-align: center;
}

.notificationBottomLink {
  position: relative;
  display: block;
  line-height: 40px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: #fff !important;
  font-weight: bold;
}

.notificationBottomLink:hover {
  opacity: 0.75;
}

.notificationBottomLink__icon {
  position: absolute;
  top: 15px;
  right: 10px;
  font-size: 10px;
}

@media screen and (max-width: 768px) {
  .headerNavi__dropDown {
    position: fixed;
    top: 0;
    right: 0;
    border: none;
    display: block;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease;
  }
  .headerNavi__dropDown.is-function {
    display: none;
  }
  .headerNavi__dropDown.is-notification {
    width: 340px;
    max-width: 90%;
    height: 100%;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
    z-index: 500;
  }
  .headerNavi__dropDown.is-notification.is-menuOpen {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .notificationLength {
    min-width: 16px;
    height: 16px;
    padding: 1px 4px 2px;
    top: -3px;
    right: -14px;
    border-radius: 8px;
  }
  .notificationLength.is-tabInner {
    top: -5px;
    right: -5px;
  }
  .notification {
    font-family: 'Noto Sans JP', sans-serif;
  }
  .notificationHeading {
    width: 100%;
    height: 60px;
    padding: 8px 13px 8px 18px;
    background: #1f2c5c;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .notificationHeading__title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    color: #fff;
  }
  .notificationHeading__icon {
    font-size: 16px;
    margin-right: 8px;
  }
  .notificationHeading__text {
    font-size: 18px;
  }
  .notification__close {
    width: 30px;
    cursor: pointer;
  }
  .notification__closeLine {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    position: relative;
  }
  .notification__closeLine::before, .notification__closeLine::after {
    content: "";
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 0;
  }
  .notification__closeLine::before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .notification__closeLine::after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }
  .notification__closeText {
    color: #fff;
    font-size: 10px;
  }
  .notification__tab {
    padding: 15px 20px 12px;
  }
  .notification__tabItem {
    width: 48%;
    height: 57px;
    border-radius: 4px;
    font-size: 16px;
  }
  .notification__content {
    display: none;
    position: static;
    text-align: right;
  }
  .notification__content.is-active {
    display: block;
  }
  .notification__content .allReadButton {
    width: 100%;
    height: 30px;
  }
  .notification__content .allReadButtonText {
    font-size: 14px;
  }
  .notification__content .allReadButtonWrap {
    padding: 16px 20px;
  }
  .notificationWrap {
    padding: 0 15px 50px 0;
    padding-top: 122px;
    height: 100%;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
  }
  .notificationItem.is-unRead .notificationItem__link::before {
    top: 8px;
    right: 10px;
    width: 44px;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
  }
  .notificationItem__link {
    display: block;
    padding: 9px 10px 12px 20px;
  }
  .notificationItem__date {
    font-size: 14px;
  }
  .notificationItem__time {
    margin-left: 8px;
  }
  .notificationItem__category {
    width: 82px;
    height: 22px;
    line-height: 22px;
    border-radius: 3px;
    margin-right: 10px;
    font-size: 12px;
  }
  .notificationItem__content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 7px;
  }
  .notificationItem__contentIconLarge.noticeIconLarge {
    width: 34px;
    height: 34px;
    font-size: 24px;
  }
  .notificationItem__contentIcon + .notificationItem__contentText {
    width: calc(100% - 34px);
    padding-left: 15px;
  }
  .notificationItem__contentText p {
    margin-top: 5px;
    font-size: 13px;
  }
  .notificationBottom {
    height: 50px;
  }
  .notificationBottomLink {
    line-height: 50px;
    font-size: 16px;
  }
  .notificationBottomLink__icon {
    top: 19px;
    right: 15px;
    font-size: 12px;
  }
}

.video-js .wideModeButton {
  position: relative;
  width: 40px;
  height: 100%;
  overflow: hidden;
  border: 0;
  text-indent: 100%;
  white-space: nowrap;
}

.video-js .wideModeButton::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 15px;
  height: 12px;
  margin: auto;
  border: 2px solid #fff;
  content: "";
}

@media screen and (max-width: 1040px) {
  .video-js .wideModeButton {
    display: none;
  }
}

.video-js.vjs-fullscreen .wideModeButton {
  display: none;
}

.favoriteSaveModal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  background: rgba(0, 0, 0, .85);
  -webkit-transition: opacity .2s ease, visibility .2s ease;
  transition: opacity .2s ease, visibility .2s ease;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}

@-moz-document url-prefix() {
  .favoriteSaveModal {
    transform: none;
  }
}

.favoriteSaveModal__wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  max-width: 375px;
  padding: 40px 20px;
}

.favoriteSaveModal__inner {
  max-height: calc(80vh - 70px);
  overflow-y: auto;
  border-radius: 5px;
  background-color: #fff;
}

.favoriteSaveModal__contents {
  display: none;
}

.favoriteSaveModal__contents.isActive {
  display: block;
}

.favoriteSaveModal__head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 49px;
  padding: 11px 30px;
  background-color: #e1e9f4;
}

.favoriteSaveModal__heading {
  color: #1f2c5c;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.6875;
}

.favoriteSaveModal__detailCheck {
  padding: 20px 30px 28px;
}

.favoriteSaveModal__detailNewList {
  padding: 18px 30px 30px;
}

.favoriteSaveModal__checkboxList {
  display: grid;
  grid-template-columns: 100%;
  row-gap: 10px;
}

.favoriteSaveModal__checkboxLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.favoriteSaveModal__checkboxInput {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.favoriteSaveModal__checkboxInput:checked + .favoriteSaveModal__checkboxText::before {
  border-color: #1d2c5c;
  background-color: #1d2c5c;
}

.favoriteSaveModal__checkboxInput:checked + .favoriteSaveModal__checkboxText::after {
  opacity: 1;
}

.favoriteSaveModal__checkboxText {
  display: inline-block;
  position: relative;
  max-width: 100%;
  padding-left: 30px;
  overflow: hidden;
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.71428;
  white-space: nowrap;
  cursor: pointer;
  text-overflow: ellipsis;
}

.favoriteSaveModal__checkboxText::before, .favoriteSaveModal__checkboxText::after {
  display: block;
  position: absolute;
  content: "";
}

.favoriteSaveModal__checkboxText::before {
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #707070;
  border-radius: 2px;
  background-color: #fff;
  -webkit-transition: border-color .2s ease, background-color .2s ease;
  transition: border-color .2s ease, background-color .2s ease;
}

.favoriteSaveModal__checkboxText::after {
  opacity: 0;
  top: 7px;
  left: 4px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  width: 13px;
  height: 7px;
  -webkit-transition: opacity .2s ease-in-out;
  transition: opacity .2s ease-in-out;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
}

.favoriteSaveModal__inputText {
  display: block;
  width: 100%;
  padding: 7px 1px;
  font-size: 25.6px;
  font-size: 1.6rem;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #dbdbdb;
}

.favoriteSaveModal__inputText::-webkit-input-placeholder {
  color: #dbdbdb;
}

.favoriteSaveModal__inputText::-moz-placeholder {
  color: #dbdbdb;
}

.favoriteSaveModal__inputText::-ms-input-placeholder {
  color: #dbdbdb;
}

.favoriteSaveModal__inputText::placeholder {
  color: #dbdbdb;
}

.favoriteSaveModal__errorMessage {
  display: none;
  margin-top: 8px;
  line-height: 1.2;
}

.favoriteSaveModal__errorMessageText {
  color: #eb6a6a;
  font-weight: bold;
  font-size: 19.2px;
  font-size: 1.2rem;
}

.favoriteSaveModal__errorMessage.isError {
  display: block;
}

.favoriteSaveModal__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: 220px;
  min-height: 40px;
  margin: auto;
  padding: 6px 12px;
  border: 2px solid #1f2c5c;
  border-radius: 5px;
  background-color: #1f2c5c;
  text-align: center;
  -webkit-transition: opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  transition: opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}

.favoriteSaveModal__button:disabled {
  border-color: #dbdbdb;
  background-color: #dbdbdb;
  color: #fff;
  cursor: auto;
}

@media (hover: hover) and (pointer: fine) {
  .favoriteSaveModal__button:not(:disabled):hover {
    opacity: .75;
  }
}

.favoriteSaveModal__buttonText {
  color: #fff;
  font-weight: bold;
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.71428;
}

.favoriteSaveModal__buttonList {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  grid-template-columns: 100%;
  row-gap: 10px;
  margin-top: 18px;
}

.favoriteSaveModal__buttonList--newList {
  margin-top: 31px;
}

.favoriteSaveModal__button--white {
  border-color: #333;
  background-color: #fff;
}

.favoriteSaveModal__button--white .favoriteSaveModal__buttonText {
  color: #333;
}

.favoriteSaveModal__button--plus .favoriteSaveModal__buttonText {
  position: relative;
  padding-left: 18px;
}

.favoriteSaveModal__button--plus .favoriteSaveModal__buttonText::before, .favoriteSaveModal__button--plus .favoriteSaveModal__buttonText::after {
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 10px;
  height: 2px;
  margin: auto;
  background-color: #333;
  content: "";
}

.favoriteSaveModal__button--plus .favoriteSaveModal__buttonText::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.favoriteSaveModal__closeButton {
  position: absolute;
  top: 6px;
  right: 22px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 0;
  text-indent: 100%;
  white-space: nowrap;
}

.favoriteSaveModal__closeButton::before, .favoriteSaveModal__closeButton::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  margin: auto;
  background: #555;
  content: "";
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.favoriteSaveModal__closeButton::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.favoriteSaveModal__closeButton::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .favoriteSaveModal__closeButton:hover::before, .favoriteSaveModal__closeButton:hover::after {
    opacity: .75;
  }
}

.favoriteSaveModal.isOpen {
  visibility: visible;
  opacity: 1;
}

@use "../../_utility/_utility" as *;
@use "sass:math";
/* ----------
nonUserModal
------------- */
.nonUserModal {
  visibility: hidden;
  opacity: 0;
}

.nonUserModal.isOpen {
  visibility: visible;
  opacity: 1;
}

.nonUserModal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100%;
  z-index: 500;
  display: block;
  opacity: 1;
}

.nonUserModal__body {
  width: 640px;
  height: auto;
  max-width: 90%;
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 501;
  display: block;
  opacity: 1;
  background-color: #fff;
  border: 1px solid #E2E2E2;
  border-radius: 2px;
}

.nonUserModal__close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -40px;
  right: 0;
  border: none;
  cursor: pointer;
}

.nonUserModal__close::before, .nonUserModal__close::after {
  content: "";
  width: 28px;
  height: 3px;
  background: #fff;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.nonUserModal__close::before {
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}

.nonUserModal__close::after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}

.nonUserModal__headingImage {
  width: 100%;
  height: auto;
}

.nonUserModal__content {
  margin-top: 30px;
  padding: 0 49px 46px;
  background: #fff;
}

.nonUserModal__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  line-height: 1.4;
}

.nonUserModal__itemMark {
  -ms-flex-preferred-size: 60px;
      flex-basis: 60px;
}

.nonUserModal__itemMark img {
  height: auto;
}

.nonUserModal__itemContent {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.nonUserModal__itemLabel {
  display: inline-block;
  width: 78px;
  margin-bottom: 6px;
  color: #fff;
  background-color: #E03131;
  border-radius: 25vw;
  font-size: 19.2px;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 20px;
  text-align: center;
}

.nonUserModal__itemText {
  color: #3977B7;
  font-size: 32px;
  font-size: 2rem;
  font-weight: bold;
}

.nonUserModal__itemNote {
  margin-top: 5px;
  font-size: 22.4px;
  font-size: 1.4rem;
}

.nonUserModal__item + .nonUserModal__item {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px dashed #E2E2E2;
}

.nonUserModal__item--label .nonUserModal__itemMark {
  margin-top: 5px;
}

.nonUserModal__login {
  margin-top: 14px;
  font-size: 19.2px;
  font-size: 1.2rem;
  color: #333;
  line-height: 1.4;
  text-align: center;
}

.nonUserModal__loginLink {
  padding-bottom: 1px;
  color: #3977B7;
  border-bottom: 1px solid #3977B7;
}

.nonUserModal__loginLink::before, .nonUserModal__loginLink::after {
  content: "";
  width: 100%;
}

.nonUserModal__loginLink:hover {
  opacity: .85;
  border-bottom: none;
}

.nonUserModal__login > a.nonUserModal__loginLink {
  color: #3977B7;
}

.nonUserModal__button {
  margin-top: 30px;
}

.nonUserModal__button > a.nonUserModal__buttonLink {
  color: #fff;
}

.nonUserModal__button:hover {
  opacity: .85;
}

.nonUserModal__buttonLink {
  width: 295px;
  margin: 0 auto;
  padding: 14px;
  line-height: 1;
  border-width: 1px;
  border-style: solid;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #fff;
  border-color: #1D3480;
  background: #1D3480;
  border-radius: 2px;
  position: relative;
}

@media screen and (max-width: 768px) {
  .nonUserModal__body {
    top: 74px;
    width: 80%;
    max-width: 340px;
    translate: -50% 0;
  }
  .nonUserModal__wrapper {
    max-height: 83vh;
    overflow: scroll;
  }
  .nonUserModal__close {
    width: 26px;
    height: 26px;
    top: -40px;
  }
  .nonUserModal__close::before, .nonUserModal__close::after {
    content: "";
    width: 26px;
  }
  .nonUserModal__content {
    margin-top: 20px;
    padding: 0 31px 26px;
  }
  .nonUserModal__item {
    gap: 10px;
  }
  .nonUserModal__itemMark {
    -ms-flex-preferred-size: 52px;
        flex-basis: 52px;
  }
  .nonUserModal__itemText {
    font-size: 1.6rem;
  }
  .nonUserModal__item + .nonUserModal__item {
    margin-top: 12px;
    padding-top: 12px;
  }
  .nonUserModal__item--label .nonUserModal__itemMark {
    margin-top: 0;
  }
  .nonUserModal__login {
    font-size: 12px;
    line-height: 1.33333;
  }
  .nonUserModal__buttonLink {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    font-size: 16px;
    border-radius: 4px;
  }
}

.fixedBanner {
  position: fixed;
  right: 10px;
  bottom: 10px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
}

@media screen and (max-width: 768px) {
  .fixedBanner {
    right: 5px;
    bottom: 5px;
  }
}

.fixedBanner__close {
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  background-color: #fdfdfe;
  border-radius: 50%;
  margin-left: auto;
  margin-bottom: 5px;
}

.fixedBanner__closeBorder {
  display: inline-block;
  width: 25px;
  height: 3px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  position: absolute;
  left: 5px;
  top: 17px;
  background-color: #b3b3b3;
  border-radius: 25vw;
}

.fixedBanner__closeBorder:nth-of-type(2) {
  display: inline-block;
  width: 25px;
  background-color: #b3b3b3;
  height: 3px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: relative;
  left: 0px;
  top: 17px;
}

.fixedBanner.isShow {
  visibility: visible;
  opacity: 1;
}

.fixedBanner.isStop {
  position: absolute;
  top: -270px;
}

@media screen and (max-width: 768px) {
  .fixedBanner.isStop {
    top: -205px;
  }
}

.fixedBanner.isClose {
  visibility: hidden;
  opacity: 0;
}

.fixedBanner__content {
  width: 392px;
  border: 2px solid #ccc;
  color: #333;
}

@media screen and (max-width: 768px) {
  .fixedBanner__content {
    width: 74.66667vw;
    border: 1px solid #ccc;
  }
}

.fixedBanner__top {
  position: relative;
  padding: 8px;
  background-color: #fff;
}

.fixedBanner__top::after {
  display: block;
  position: absolute;
  right: 10px;
  bottom: -20px;
  width: 43px;
  height: 42px;
  background: url(/img/fixedbanner_image01.webp) no-repeat center/cover;
  content: "";
}

@media screen and (max-width: 768px) {
  .fixedBanner__top {
    padding: 1.86667vw;
  }
  .fixedBanner__top::after {
    right: 2vw;
    bottom: -3.46667vw;
    width: 8.13333vw;
    height: 8vw;
  }
}

.fixedBanner__balloon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 60px;
  height: 60px;
  background: url(/img/fixedbanner_bg01.webp) no-repeat center/cover;
  font-size: 17.6px;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.36364;
  text-align: center;
  -webkit-transform: rotate(-15deg);
          transform: rotate(-15deg);
}

@media screen and (max-width: 768px) {
  .fixedBanner__balloon {
    left: 1.33333vw;
    bottom: 2.26667vw;
    width: 11.33333vw;
    height: 11.33333vw;
    font-size: 2.13333vw;
  }
}

.fixedBanner__title {
  color: #fa4b4b;
  font-size: 28.8px;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .fixedBanner__title {
    font-size: 3.46667vw;
  }
}

.fixedBanner__bottom {
  padding: 19px 32px;
  background: url(/img/fixedbanner_bg02.webp) no-repeat center/cover;
}

@media screen and (max-width: 768px) {
  .fixedBanner__bottom {
    padding: 3.33333vw 5.73333vw;
  }
}

.fixedBanner__text {
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.75;
  text-align: center;
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 6px;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
}

@media screen and (max-width: 768px) {
  .fixedBanner__text {
    font-size: 3.73333vw;
  }
}

.fixedBanner__button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  position: relative;
  width: 100%;
  padding: 7px;
  margin-top: 20px;
  border-radius: 9999px;
  background-color: #fa4b4b;
  color: #fff;
  font-size: 28.8px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.2;
}

.fixedBanner__button::after {
  display: block;
  position: absolute;
  right: 30px;
  top: 50%;
  font-size: 20.8px;
  font-size: 1.3rem;
  font-family: "icomoon";
  font-weight: normal;
  line-height: 1;
  color: #fff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  content: "\ea09";
}

.fixedBanner__button span {
  display: inline-block;
  position: relative;
  padding: 0 10px;
  font-size: 17.6px;
  font-size: 1.1rem;
}

.fixedBanner__button span::before, .fixedBanner__button span::after {
  display: block;
  position: absolute;
  top: 50%;
  width: 1px;
  height: 15px;
  background-color: #fff;
  content: "";
}

.fixedBanner__button span::before {
  left: 0;
  -webkit-transform: translateY(-50%) rotate(-45deg);
          transform: translateY(-50%) rotate(-45deg);
}

.fixedBanner__button span::after {
  right: 0;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

@media screen and (max-width: 768px) {
  .fixedBanner__button {
    gap: 0.53333vw;
    padding: 1.06667vw;
    margin-top: 4vw;
    font-size: 3.46667vw;
  }
  .fixedBanner__button::after {
    right: 4vw;
    font-size: 3.46667vw;
  }
  .fixedBanner__button span {
    padding: 0 1.86667vw;
    font-size: 2.13333vw;
  }
  .fixedBanner__button span::before, .fixedBanner__button span::after {
    height: 2.13333vw;
  }
}

.topMainVisual {
  position: relative;
  padding-top: 45px;
}

.topMainVisual.is-down {
  padding-top: 50px;
}

@media screen and (max-width: 768px) {
  .topMainVisual {
    padding-top: 50px;
  }
  .topMainVisual.is-down {
    padding-top: 68px;
  }
}

.contentsMain .watching {
  position: relative;
  background: none;
}

.contentsMain .watchingContainer {
  height: 0;
  overflow: hidden;
  position: relative;
  background: #f6f6f6;
}

.contentsMain .watchingContainer.is-open {
  height: auto;
}

.contentsMain .watchingWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin: 0 auto;
  padding: 12px 0 22px !important;
  width: 960px;
  max-width: 94% !important;
}

.contentsMain .watchingThumbnail {
  width: 158px;
  background: #fff;
  padding: 2px;
  position: relative;
}

.contentsMain .watchingThumbnail:hover {
  opacity: 0.8;
}

.contentsMain .watchingState {
  position: relative;
}

.contentsMain .watching .watchTime {
  bottom: 6px;
}

.contentsMain .watchingBar {
  left: 2px;
}

.contentsMain .watching .watched .watchbar {
  background: rgba(51, 51, 51, .8);
}

.contentsMain .watching .watchbar {
  background: #d52484;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.contentsMain .watching__watchText {
  background: #d52484;
  border-radius: 3px;
  color: white;
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  padding: 1px 5px;
  position: absolute;
  bottom: 5px;
  left: 2px;
  z-index: 1;
}

.contentsMain .watching__time {
  padding: 1px 5px;
  position: absolute;
  color: #fff;
  font-size: 16px;
  font-size: 1rem;
  z-index: 2;
  bottom: 2px;
  right: 2px;
  background: rgba(51, 51, 51, .8);
}

.contentsMain .watchingDetail {
  padding: 4px 15px 0 18px;
  width: calc(100% - 378px);
}

.contentsMain .watchingDetail__text {
  font-size: 14px;
  margin-top: 5px;
}

.contentsMain .watchingDetail__title {
  font-size: 16px;
}

.contentsMain .watchingText {
  color: #d4435f;
  font-size: 16px;
}

.contentsMain .watchingText__icon {
  margin-right: 5px;
}

.contentsMain .watchingLink {
  width: 220px;
  text-align: center;
}

.contentsMain .watchingLink__button {
  position: relative;
  display: block;
  width: 100%;
  height: 40px;
  padding: 0;
  background: #d4435f;
  color: #fff;
  line-height: 40px;
  border-radius: 5px;
}

.contentsMain .watchingLink__button:hover {
  opacity: 0.75;
}

.contentsMain .watchingLink__buttonIcon {
  position: absolute;
  font-size: 20px;
  left: 14px;
  top: 10px;
  font-size: 20px;
}

.contentsMain .watchingLink__buttonText {
  display: inline-block;
  font-size: 16px;
  padding-left: 20px;
}

.contentsMain .watchingLink__text {
  color: #1f2c5c;
  font-size: 14px;
  text-decoration: underline;
  margin-top: 5px;
}

.contentsMain .watchingLink__text:hover {
  opacity: 0.75;
}

.contentsMain .watchingClose {
  width: 180px;
  height: 20px;
  border-radius: 20px 20px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  background: #e2e2e2;
  color: #838383;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  cursor: pointer;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.contentsMain .watchingClose:hover {
  opacity: 0.75;
}

.contentsMain .watchingClose__text {
  font-size: 12px;
}

.contentsMain .watchingClose__icon {
  font-size: 10px;
  margin-right: 5px;
}

.contentsMain .watchingOpen {
  width: 180px;
  height: 20px;
  border-radius: 0 0 20px 20px;
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  bottom: -20px;
  left: 50%;
  background: #e2e2e2;
  color: #838383;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  cursor: pointer;
  z-index: 10;
}

.contentsMain .watchingOpen:hover .watchingOpen__text, .contentsMain .watchingOpen:hover .watchingOpen__icon {
  opacity: 0.8;
}

.contentsMain .watchingOpen.is-open {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.contentsMain .watchingOpen.isTutorialFocus {
  z-index: 998;
  background-color: #fff;
}

.contentsMain .watchingOpen__text {
  font-size: 12px;
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.contentsMain .watchingOpen__icon {
  font-size: 10px;
  margin-right: 8px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

.contentsMain .watching--notWatching .watchingWrap {
  display: block !important;
  padding: 20px 0 30px !important;
  text-align: center;
}

@media screen and (max-width: 1024px) {
  .contentsMain .watchingDetail {
    padding: 4px 12px 0 15px;
    width: calc(100% - 338px);
  }
  .contentsMain .watchingLink {
    width: 180px;
  }
  .contentsMain .watchingLink__buttonIcon {
    font-size: 16px;
    top: 12px;
  }
  .contentsMain .watchingLink__buttonText {
    font-size: 14px;
    padding-left: 12px;
  }
}

@media screen and (max-width: 768px) {
  .contentsMain .watchingContainer.is-open {
    padding: 15px 5% 18px;
  }
  .contentsMain .watchingWrap {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 5px 0 0 0 !important;
    max-width: 100% !important;
  }
  .contentsMain .watchingThumbnail {
    width: 140px;
    padding: 1px;
  }
  .contentsMain .watching .watchTime {
    bottom: 5px;
  }
  .contentsMain .watchingDetail {
    padding: 4px 0 0 15px;
    width: calc(100% - 140px);
  }
  .contentsMain .watchingDetail__text {
    font-size: 10px;
    margin-top: 0;
  }
  .contentsMain .watchingDetail__title {
    font-size: 12px;
  }
  .contentsMain .watchingText {
    font-size: 14px;
  }
  .contentsMain .watchingText__icon {
    margin-right: 3px;
    font-size: 16px;
    padding-bottom: 3px;
  }
  .contentsMain .watchingLink {
    width: 100%;
    margin-top: 8px;
  }
  .contentsMain .watchingLink__button {
    border-radius: 4px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .contentsMain .watchingLink__buttonIcon {
    position: relative;
    left: auto;
    top: auto;
    font-size: 20px;
  }
  .contentsMain .watchingLink__buttonText {
    font-size: 16px;
    padding-left: 10px;
  }
  .contentsMain .watchingLink__text {
    display: inline-block;
    margin-top: 10px;
  }
  .contentsMain .watchingClose {
    width: 20px;
    height: 20px;
    border-radius: 0;
    display: block;
    position: absolute;
    bottom: auto;
    top: 10px;
    left: auto;
    right: 4%;
    background: none;
    color: #b4b4b4;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  .contentsMain .watchingClose__text {
    display: none;
  }
  .contentsMain .watchingClose__icon {
    font-size: 20px;
    margin-right: 0;
  }
  .contentsMain .watching--notWatching .watchingWrap {
    padding: 0 20px !important;
  }
}

.count {
  width: 100%;
  position: absolute;
  left: 0;
  top: 25px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.count.is-down {
  top: 36px;
}

.countWrap {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #f6f6f6;
  line-height: 35px;
  border-radius: 18px;
  height: 35px;
  width: 900px;
  padding: 0 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
}

.countDay {
  font-size: 16px;
  font-weight: bold;
  color: #8d8d8d;
}

.countDay__year::after, .countDay__month::after {
  content: ".";
}

.countData {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.countData__item {
  padding-left: 25px;
  letter-spacing: 0.03em;
  font-size: 16px;
}

.countData__itemText {
  font-weight: bold;
  padding-right: 5px;
}

.countData__itemTextLarge {
  padding: 0 0 0 5px;
  font-size: 20px;
}

.countData__icon {
  font-size: 22px;
  margin-right: 10px;
}

.countData__icon.icon-people::before {
  vertical-align: middle;
}

.countData__icon.icon-book-open {
  font-size: 16px;
  margin-right: 3px;
}

@media screen and (max-width: 1024px) {
  .countWrap {
    padding: 0 40px;
    max-width: 96%;
  }
  .countDay {
    font-size: clamp(13px, 1.8vw, 16px);
  }
  .countData__item {
    padding-left: 20px;
    font-size: clamp(13px, 1.8vw, 16px);
  }
  .countData__itemTextLarge {
    font-size: clamp(15px, 2.3vw, 20px);
  }
  .countData__icon {
    font-size: clamp(16px, 2.4vw, 22px);
    margin-right: 10px;
  }
}

@media screen and (max-width: 768px) {
  .count {
    height: 30px;
    top: 13px;
  }
  .count.is-down {
    top: 30px;
  }
  .count.notLoggedIn {
    top: 14px;
  }
  .countWrap {
    line-height: 30px;
    padding: 0 15px;
  }
  .countDay {
    font-size: clamp(9px, 1.8vw, 12px);
  }
  .countData__item {
    padding-left: 5px;
    font-size: clamp(9px, 1.8vw, 12px);
  }
  .countData__itemText {
    padding-right: 5px;
  }
  .countData__itemTextLarge {
    padding: 0 0 0 5px;
    font-size: clamp(14px, 2.2vw, 16px);
  }
  .countData__icon {
    font-size: clamp(14px, 3.5vw, 18px);
    margin-right: 3px;
  }
  .countData__icon.icon-book-open {
    font-size: clamp(12px, 3vw, 14px);
    margin-right: 0;
  }
}

@media screen and (max-width: 320px) {
  .countDay {
    margin-top: 2px;
  }
  .countDay__year {
    display: none;
  }
  .countData__icon {
    display: none;
  }
  .countData__itemText {
    padding-right: 3px;
  }
}

.newsWrap {
  height: 200px;
  overflow-y: scroll;
}

.newsItem + .newsItem {
  border-top: 1px solid #d1d1d1;
}

.newsItem__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 10px 0;
}

.newsItem__link:hover {
  opacity: 0.75;
}

.newsItem__category {
  width: 90px;
  border-radius: 5px;
  font-size: 12px;
  color: #fff;
  line-height: 20px;
  text-align: center;
}

.newsItem__time {
  width: 90px;
  padding-left: 15px;
  font-size: 12px;
}

.newsItem__title {
  width: calc(100% - 180px);
  padding-left: 20px;
  font-size: 16px;
  font-weight: normal;
}

.category-01 {
  background: #6c3d8f;
}

.category-02 {
  background: #75af42;
}

.category-03 {
  background: #e1537e;
}

.category-04 {
  background: #3477b0;
}

.category-05 {
  background: #15bbc5;
}

.category-06 {
  background: #777777;
}

@media screen and (max-width: 768px) {
  .newsSection {
    padding-top: 25px;
  }
  .newsWrap {
    height: 440px;
  }
  .newsItem + .newsItem {
    border-top: 1px solid #d1d1d1;
  }
  .newsItem__link {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 10px 0;
  }
  .newsItem__category {
    width: 80px;
    border-radius: 4px;
    font-size: 10px;
    line-height: 16px;
  }
  .newsItem__time {
    padding-left: 6px;
    font-size: 12px;
  }
  .newsItem__title {
    width: 100%;
    padding-left: 0;
    margin-top: 5px;
    font-size: 14px;
  }
}

.topSlide {
  width: 900px;
  margin: 0 auto;
  max-width: 94%;
  z-index: 10;
  position: relative;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
}

.topSlideWrap {
  width: 100%;
  background: rgba(255, 255, 255, .95);
  position: relative;
  padding: 0 0 6px;
}

.topSlideList {
  width: 100%;
}

.topSlideItem {
  width: 100%;
  padding: 5px 5px 0 5px;
  height: auto;
}

.topSlideItem__link {
  display: block;
  width: 100%;
  background: #fff;
}

.topSlideItem__link:hover {
  opacity: 0.75;
}

.topSlideItem__link img {
  width: 100% !important;
  height: auto;
  border: none;
  margin: 0;
}

.topSlideProgress {
  width: 100%;
  position: absolute;
  bottom: 1px;
  left: 0;
}

.topSlideProgressBar {
  display: block;
  height: 4px;
  background: #bbbbbb;
}

.topSlideNavi .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background: #fff;
}

.topSlideNavi .slick-dots li {
  width: 20%;
  max-width: 20%;
  padding: 3px;
  border: 0;
  position: relative;
  margin-bottom: 0;
}

.topSlideNavi .slick-dots li:hover {
  opacity: 0.75;
}

.topSlideNavi .slick-dots li::before {
  content: "";
  background: rgba(0, 0, 0, .4);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.topSlideNavi .slick-dots li.slick-active {
  border-top: none !important;
}

.topSlideNavi .slick-dots li.slick-active::before {
  display: none;
}

@media screen and (max-width: 768px) {
  .topSlide {
    margin: 5px auto;
    max-width: 100%;
    width: calc(100% - 20px);
    -webkit-transform: translateY(0);
            transform: translateY(0);
    padding-bottom: 60px;
  }
  .topSlideWrap {
    width: 100%;
    background: #fff;
    position: relative;
    padding: 0 0 6px;
  }
  .topSlideList {
    width: 100%;
  }
  .topSlideItem {
    width: 100%;
    padding: 3px 3px 0 3px;
    height: auto;
  }
  .topSlideItem__link {
    display: block;
    width: 100%;
  }
  .topSlideItem__link img {
    width: 100% !important;
    height: auto;
    border: none;
    margin: 0;
  }
  .topSlideProgress {
    width: 100%;
    position: absolute;
    bottom: 1px;
    left: 0;
  }
  .topSlideNavi .slick-dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    width: 100%;
  }
  .topSlideNavi .slick-dots li {
    width: 20%;
    max-width: 20%;
    padding: 2px;
    border: 0;
    position: relative;
    margin-bottom: 0;
    margin-right: 0;
  }
  .topSlideNavi .slick-dots li::before {
    content: "";
    background: rgba(0, 0, 0, .2);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .topSlideNavi .slick-dots li.slick-active {
    border-top: none !important;
  }
  .topSlideNavi .slick-dots li.slick-active::before {
    display: none;
  }
}

/* live 配信 */
.liveItem {
  margin-top: 10px;
  display: block;
}

.liveItem:hover {
  opacity: 0.75;
}

.liveItem__icon {
  font-size: 20px;
}

.liveItem__icon.is-active {
  color: #da2525;
}

.liveItem__day {
  font-size: 14px;
  font-weight: bold;
}

.liveItem__day__large {
  font-size: 18px;
}

.liveItem__time {
  font-weight: bold;
  font-size: 14px;
  color: #8d8d8d;
}

.liveItem__thumbnail {
  width: 100%;
  margin-top: 8px;
  -webkit-box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
          box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
  border-radius: 5px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .liveItem {
    display: block;
    margin: 0 auto 20px;
  }
  .liveItem__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .liveItem__icon {
    font-size: 22px;
    margin-right: 5px;
  }
  .liveItem__day {
    font-size: 12px;
    font-weight: bold;
  }
  .liveItem__day__large {
    font-size: 16px;
    letter-spacing: 0.02em;
  }
  .liveItem__time {
    width: 100%;
    display: block;
    font-size: 12px;
  }
  .liveItem__thumbnail {
    width: 100%;
    margin-top: 8px;
    -webkit-box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
            box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
    border-radius: 5px;
    overflow: hidden;
  }
}

/* 新着動画 */
.videoItem {
  position: relative;
  background: #fff;
  padding: 6px;
  border-radius: 5px;
  margin-bottom: 16px;
  -webkit-box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
          box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .3);
}

.videoItem:hover .videoItem__favoriteIcon {
  display: block;
}

.videoItem:hover .videoItem__thumbnail {
  opacity: 0.7;
}

.videoItem__link {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  top: 0;
  left: 0;
}

.videoItem__favoriteText {
  position: absolute;
  display: none;
  margin: 1.5em 0;
  padding: 7px 10px;
  border-radius: 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #fff;
  z-index: 11;
  right: -82px;
  top: -62px;
  font-size: 19.2px;
  font-size: 1.2rem;
  font-weight: bold;
  display: none;
}

.videoItem__favoriteText::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 10px solid transparent;
  border-top: 10px solid #fff;
}

.videoItem__favoriteIcon {
  background: rgba(255, 255, 255, .75);
  position: absolute;
  top: 6px;
  right: 6px;
  border-radius: 5px;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  font-size: 20.8px;
  font-size: 1.3rem;
  color: #777;
  border: 1px solid #ccc;
  cursor: pointer;
  z-index: 10;
  display: none;
  -webkit-transition: all .2s ease;
  transition: all .2s ease;
}

.videoItem__favorite:hover .videoItem__favoriteIcon {
  background: rgba(213, 36, 132, .8);
  color: #fff;
}

.videoItem__favorite:hover .videoItem__favoriteText {
  display: block;
}

.videoItem__watchState {
  position: relative;
}

.videoItem__watchState::before {
  background: rgba(234, 238, 242, .8);
  content: "";
  height: 4px;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.videoItem .watchbar {
  background: #d52484;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
}

.videoItem__watchText {
  background: #d52484;
  border-radius: 3px;
  color: white;
  font-size: 16px;
  font-size: 1rem;
  font-weight: normal;
  padding: 1px 5px;
  position: absolute;
  bottom: 5px;
  left: 2px;
  z-index: 1;
}

.videoItem__watchTime {
  padding: 1px 5px;
  position: absolute;
  color: white;
  font-size: 16px;
  font-size: 1.0rem;
  z-index: 2;
  bottom: 2px;
  right: 2px;
  background: rgba(51, 51, 51, .8);
}

.videoItem__thumbnail {
  height: auto;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.videoItem__information {
  padding: 8px 5px 0;
}

.videoItem__title {
  font-size: 15px;
  font-weight: normal;
}

.videoItem__category {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.videoItem__categoryItem + .videoItem__categoryItem {
  margin-left: 5px;
}

.videoItem__categoryItem + .videoItem__categoryItem::before {
  content: "-";
  color: #61789c;
}

.videoItem__categoryTag {
  background: #e1e9f4;
  border-radius: 3px;
  border: 1px solid #cddefa;
  color: #61789c !important;
  padding: 0 5px;
  font-size: 10px;
  position: relative;
  z-index: 2;
  line-height: 22px;
}

.videoItem__categoryTag:hover {
  background: #e1e9f4;
  opacity: 0.8;
}

.videoItem__chapter {
  font-size: 10px;
  color: #61789c;
  padding: 0 0 0 5px;
}

@media screen and (max-width: 768px) {
  .videoItem {
    position: relative;
    background: #fff;
    padding: 5px 5px 8px;
    border-radius: 4px;
    margin-bottom: 3.4vw;
    -webkit-box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .2);
            box-shadow: 0 2px 20px -7px rgba(0, 0, 0, .2);
  }
  .videoItem__favoriteText {
    display: none;
  }
  .videoItem__favoriteIcon {
    top: 5px;
    right: 5px;
  }
  .videoItem__favorite:hover .videoItem__favoriteText {
    display: none;
  }
  .videoItem__title {
    font-size: 14px;
  }
  .videoItem__category {
    margin-top: 5px;
  }
  .videoItem__categoryItem + .videoItem__categoryItem {
    margin-left: 3px;
  }
  .videoItem__categoryTag {
    border-radius: 2px;
    padding: 1px 3px;
    font-size: 10px;
    line-height: 14px;
  }
  .videoItem__chapter {
    padding: 0 0 0 3px;
  }
}

.rankingList.is-topPage {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.rankingList.is-topPage:after {
  content: "";
  width: 31%;
}

.rankingList.is-topPage .rankingItem {
  width: 47.5%;
  position: relative;
  margin-top: 20px;
  cursor: pointer;
}

.rankingList.is-topPage .rankingItem:hover {
  opacity: 0.75;
}

.rankingList.is-topPage .rankingItem:nth-child(-n+3) {
  width: 31%;
  margin-top: 35px;
}

.rankingList.is-topPage .rankingItem:nth-child(-n+3) .rankingItem__banner {
  padding-bottom: 9px;
}

.rankingList.is-topPage .rankingItem:nth-child(n+4) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__banner {
  width: 40%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 10px;
  padding-left: 10px;
}

.rankingList.is-topPage .rankingItem:nth-child(n+4).rankingItem--higher .rankingItem__rank {
  position: relative;
  top: 0px;
  width: 36px;
}

.rankingList.is-topPage .rankingItem__title {
  font-size: 16px;
  line-height: 1.5;
}

.rankingList.is-topPage .rankingItem .rankingItem__banner img {
  width: 100%;
}

.rankingList.is-topPage .rankingItem__rank {
  display: inline-block;
  font-weight: bold;
  font-size: 15px;
  position: relative;
  color: #5d5d5d;
  font-weight: bold;
}

.rankingList.is-topPage .rankingItem__rankNumber {
  display: inline-block;
  font-size: 24px;
  line-height: 1;
}

.rankingList.is-topPage .rankingItem__rankText {
  display: inline-block;
  font-size: 15px;
  padding-left: 1px;
}

.rankingList.is-topPage .rankingItem--higher .rankingItem__title {
  position: relative;
  padding-left: 70px;
}

.rankingList.is-topPage .rankingItem--higher .rankingItem__rank {
  position: absolute;
  top: -4px;
  left: 0;
  width: 55px;
}

@media screen and (min-width: 769px) and (max-width: 887px) {
  .contentsMain.is-menuOpen .rankingList.is-topPage {
    display: block;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage:after {
    content: "";
    width: 0;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem {
    width: 100%;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem:nth-child(-n+3) {
    width: 100%;
    margin-top: 20px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem:nth-child(-n+3) .rankingItem__banner {
    width: 180px;
    padding-bottom: 0;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__banner {
    width: 180px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__title {
    width: calc(100% - 180px);
    padding-left: 15px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__title {
    width: calc(100% - 180px);
    font-size: 14px;
    padding-left: 16px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank {
    -webkit-transform: translateY(-36%);
            transform: translateY(-36%);
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no1 {
    background: url(../img/top/rank01__sp.svg) no-repeat border-box center top/contain;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no2 {
    background: url(../img/top/rank02__sp.svg) no-repeat border-box center top/contain;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no3 {
    background: url(../img/top/rank03__sp.svg) no-repeat border-box center top/contain;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no1, .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no2, .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank.rankingItem__rank__no3 {
    left: 0;
    padding: 3px 8px 5px 8px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank[class*="rankingItem__rank__no"] .rankingItem__rankNumber {
    font-size: 26px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem__rank[class*="rankingItem__rank__no"] .rankingItem__rankText {
    font-size: 16px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem--higher .rankingItem__title {
    position: relative;
    padding-left: 70px;
  }
  .contentsMain.is-menuOpen .rankingList.is-topPage .rankingItem--higher .rankingItem__rank {
    position: absolute;
    top: -4px;
    left: 0;
    width: 34px;
  }
}

@media screen and (max-width: 768px) {
  .rankingList.is-topPage {
    display: block;
  }
  .rankingList.is-topPage:after {
    content: "";
    width: 0;
  }
  .rankingList.is-topPage .rankingItem {
    width: 100%;
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .rankingList.is-topPage .rankingItem:nth-child(-n+3) {
    width: 100%;
    margin-top: 20px;
  }
  .rankingList.is-topPage .rankingItem:nth-child(-n+3) .rankingItem__banner {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    width: 145px;
    padding-bottom: 0;
  }
  .rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__banner {
    width: 145px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .rankingList.is-topPage .rankingItem:nth-child(n+4) .rankingItem__title {
    width: calc(100% - 145px);
    padding-top: 0;
    padding-left: 15px;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .rankingList.is-topPage .rankingItem:nth-child(n+4).rankingItem--higher .rankingItem__rank {
    position: absolute;
    top: 0px;
    width: 34px;
  }
  .rankingList.is-topPage .rankingItem:nth-child(n+4).rankingItem--higher .rankingItem__title {
    padding-top: 0;
    padding-left: 40px;
  }
  .rankingList.is-topPage .rankingItem__title {
    width: calc(100% - 145px);
    font-size: 14px;
    padding-left: 16px;
  }
  .rankingList.is-topPage .rankingItem__rankNumber {
    display: inline-block;
    font-size: 20px;
  }
  .rankingList.is-topPage .rankingItem__rankText {
    display: inline-block;
    font-size: 13px;
    padding-left: 1px;
  }
  .rankingList.is-topPage .rankingItem--higher .rankingItem__title {
    padding-left: 40px;
    margin-left: 15px;
  }
  .rankingList.is-topPage .rankingItem--higher .rankingItem__rank {
    position: absolute;
    top: 0;
    width: 34px;
  }
}

.bottomBannerSection {
  margin-bottom: 90px;
}

.bottomBannerItem {
  width: 50%;
}

.bottomBannerItem:hover {
  opacity: 0.75;
}

.bottomBannerItem img {
  width: 100%;
}

@media screen and (max-width: 768px) {
  .bottomBannerSection {
    background: #e4eaf1;
    margin-bottom: 0;
    padding: 1px 0 15px;
  }
  .bottomBannerItem {
    width: 100%;
  }
}

.twitterSection {
  background: #e4eaf1;
  padding: 55px 0 90px;
}

.twitterSection img {
  width: 100%;
  height: auto;
}

.twitterBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 40px;
}

.twitterItem {
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  border-radius: 5px;
  overflow: hidden;
}

.twitterItem a:hover {
  opacity: .75;
}

.button__gfs-official {
  width: 600px;
  max-width: 100%;
  margin: 65px auto 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
          box-shadow: 0 5px 10px rgba(0, 0, 0, .05);
  border-radius: 5px;
  overflow: hidden;
}

.button__gfs-official__link:hover {
  opacity: .75;
}

@media screen and (max-width: 768px) {
  .twitterBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 20px;
  }
  .twitterItem {
    width: 100%;
  }
  .button__gfs-official {
    width: 100%;
    margin: 20px auto 0;
  }
}

.tutorial {
  --offsetTop: 0;
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  -webkit-transition: opacity .2s ease, visibility .2s ease;
  transition: opacity .2s ease, visibility .2s ease;
}

.tutorial.isOpen {
  visibility: visible;
  opacity: 1;
}

.tutorial--overlay {
  z-index: 997;
  background-color: rgba(0, 0, 0, .7);
}

.tutorial__start, .tutorial__end, .tutorial__headerMenuButton, .tutorial__step, .tutorial__again {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  padding: 12px;
  -webkit-transition: opacity .2s ease, visibility .2s ease;
  transition: opacity .2s ease, visibility .2s ease;
}

.tutorial__startContents, .tutorial__endContents, .tutorial__headerMenuButtonContents, .tutorial__stepContents, .tutorial__againContents {
  border-radius: 10px;
}

.tutorial__start.isActive, .tutorial__end.isActive, .tutorial__headerMenuButton.isActive, .tutorial__step.isActive, .tutorial__again.isActive {
  visibility: visible;
  opacity: 1;
}

.tutorial__start, .tutorial__end {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 724px;
}

.tutorial__startContents, .tutorial__endContents {
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
          box-shadow: 0 10px 20px rgba(0, 0, 0, .3);
  background: linear-gradient(90deg, rgba(0, 0, 0, .05) 2px, transparent 2px), linear-gradient(rgba(0, 0, 0, .05) 2px, transparent 2px), #506dbf;
  background-position: -5px 5px;
  background-size: 11px 11px;
}

.tutorial__startHeading, .tutorial__endHeading {
  color: #fee117;
  font-weight: bold;
  font-size: 64px;
  font-size: 4rem;
  line-height: 1.5;
  letter-spacing: .055em;
  text-align: center;
}

.tutorial__startCharacterImage, .tutorial__endCharacterImage {
  height: auto;
}

.tutorial__startText, .tutorial__endText {
  color: #fff;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.6875;
  letter-spacing: 0;
  text-align: center;
}

.tutorial__startButton, .tutorial__endButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.tutorial__startContents {
  padding: 38px 30px 52px;
}

.tutorial__startCharacter {
  max-width: 300px;
  margin: 24px auto 0;
}

.tutorial__startText {
  margin-top: 35px;
}

.tutorial__startButton {
  margin-top: 15px;
}

.tutorial__endContents {
  padding: 42px 30px 46px;
}

.tutorial__endCharacter {
  max-width: 248px;
  margin: 14px auto 0;
}

.tutorial__endText {
  margin-top: 28px;
}

.tutorial__endNotice {
  margin-top: 8px;
  color: #fee117;
  font-weight: bold;
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

.tutorial__endButton {
  margin-top: 17px;
}

.tutorial__headerMenuButton {
  --headerMenuButtonTopPosition: calc(var(--offsetTop) - 14px);
  top: var(--headerMenuButtonTopPosition);
  left: 60px;
  max-width: 466px;
}

.tutorial__headerMenuButton::before {
  display: block;
  position: absolute;
  top: -4px;
  left: -4px;
  -webkit-transform: rotate(-42deg);
          transform: rotate(-42deg);
  width: 0;
  height: 0;
  border-width: 0 20px 40px 20px;
  border-style: solid;
  border-color: transparent transparent #566db9 transparent;
  content: "";
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="20" /><feOffset dx="1" dy="11" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
          filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
  will-change: filter;
}

.tutorial__headerMenuButton.isActive {
  visibility: hidden;
  opacity: 0;
  -webkit-animation: tutorial_active_delay .2s 1.2s ease forwards;
          animation: tutorial_active_delay .2s 1.2s ease forwards;
}

.tutorial__headerMenuButtonContents {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
  padding: 44px 40px;
  background-color: #566db9;
}

.tutorial__headerMenuButtonText {
  color: #fff;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.6875;
  letter-spacing: .075em;
  text-align: center;
}

.tutorial__step {
  --stepTopPosition: var(--offsetTop);
  top: var(--stepTopPosition);
  max-width: min(584px, calc(100vw - 212px));
}

.tutorial__step::before {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-width: 28.28px 42.44px 28.28px 0;
  border-style: solid;
  border-color: transparent #566db9 transparent transparent;
  content: "";
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="20" /><feOffset dx="1" dy="11" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
  -webkit-filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
          filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .3));
  will-change: filter;
}

.tutorial__step[data-active-step-page="step_mypage"], .tutorial__step[data-active-step-page="step_lecture"], .tutorial__step[data-active-step-page="step_contents"], .tutorial__step[data-active-step-page="step_comm"], .tutorial__step[data-active-step-page="step_help"] {
  left: 252px;
}

.tutorial__step[data-active-step-page="step_mypage"]::before, .tutorial__step[data-active-step-page="step_lecture"]::before, .tutorial__step[data-active-step-page="step_contents"]::before, .tutorial__step[data-active-step-page="step_comm"]::before, .tutorial__step[data-active-step-page="step_help"]::before {
  top: 72px;
  left: -30px;
}

.tutorial__step[data-active-step-page="step_mypage"] {
  --stepTopPosition: calc(var(--offsetTop) - 44px);
}

.tutorial__step[data-active-step-page="step_lecture"], .tutorial__step[data-active-step-page="step_contents"], .tutorial__step[data-active-step-page="step_comm"], .tutorial__step[data-active-step-page="step_help"] {
  --stepTopPosition: calc(var(--offsetTop) - 22px);
}

.tutorial__step[data-active-step-page="step_utility"]::before, .tutorial__step[data-active-step-page="step_watching"]::before {
  top: -37px;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.tutorial__step[data-active-step-page="step_utility"] {
  right: 18px;
  --stepTopPosition: calc(var(--offsetTop) + 16px);
}

.tutorial__step[data-active-step-page="step_utility"].isActive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: tutorial_active_delay .2s 1.2s ease forwards;
          animation: tutorial_active_delay .2s 1.2s ease forwards;
}

.tutorial__step[data-active-step-page="step_utility"]::before {
  right: 58px;
}

.tutorial__step[data-active-step-page="step_watching"] {
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  --stepTopPosition: calc(var(--offsetTop) + 44px);
}

.tutorial__step[data-active-step-page="step_watching"]::before {
  right: 0;
  left: 0;
  margin: auto;
}

.tutorial__stepContents {
  position: relative;
  min-height: 180px;
  padding: 55px 30px 38px;
  background-color: #566db9;
}

.tutorial__stepItem {
  display: none;
}

.tutorial__stepItem.isActive {
  display: block;
}

.tutorial__stepDetail {
  display: grid;
  grid: "image" auto "text" auto / 100%;
  row-gap: 15px;
}

.tutorial__stepDetailImage {
  grid-area: image;
}

.tutorial__stepDetailText {
  grid-area: text;
}

.tutorial__stepDetailText > :first-child {
  margin-top: 0;
}

.tutorial__stepTitle {
  display: none;
}

.tutorial__stepText {
  color: #fff;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: .075em;
}

.tutorial__stepPager {
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-columns: 150px minmax(0, 1fr) 150px;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  width: 100%;
  max-width: 387px;
  margin: 17px auto 0;
}

.tutorial__stepPagerNumber {
  color: #fff;
  font-weight: bold;
  font-size: 22.4px;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
}

.tutorial__again {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  max-width: 504px;
}

.tutorial__againContents {
  padding: 36px 30px 40px;
  background-color: #fff;
}

.tutorial__againText {
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: .075em;
  text-align: center;
}

.tutorial__againButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 16px;
}

.tutorial__button {
  width: 100%;
  max-width: 180px;
  min-height: 41px;
  margin-bottom: 2px;
  padding: 5px 12px;
  border: 0;
  border-radius: 5px;
  -webkit-box-shadow: 0 2px 0 #bb9b03;
          box-shadow: 0 2px 0 #bb9b03;
  background-color: #fee117;
  color: #556DB7;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tutorial__button:hover {
    opacity: .75;
  }
}

.tutorial__button--end {
  max-width: 338px;
}

.tutorial__button--prev, .tutorial__button--next {
  position: relative;
  padding: 5px 25px;
}

.tutorial__button--prev::before, .tutorial__button--prev::after, .tutorial__button--next::before, .tutorial__button--next::after {
  display: block;
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 2px;
  margin: auto;
  background-color: #556db7;
  content: "";
}

.tutorial__button--prev::before, .tutorial__button--next::before {
  top: -2px;
}

.tutorial__button--prev::after, .tutorial__button--next::after {
  top: 7px;
}

.tutorial__button--prev::before, .tutorial__button--prev::after {
  left: 16px;
  border-radius: 0 10px 10px 0;
}

.tutorial__button--prev::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.tutorial__button--prev::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.tutorial__button--next::before, .tutorial__button--next::after {
  right: 16px;
  border-radius: 10px 0 0 10px;
}

.tutorial__button--next::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.tutorial__button--next::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.tutorial__confirmButton {
  width: 100%;
  max-width: 126px;
  min-height: 41px;
  padding: 5px 12px;
  border: 1px solid #3977b7;
  border-radius: 5px;
  background-color: #fff;
  color: #3977b7;
  font-weight: bold;
  font-size: 25.6px;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .tutorial__confirmButton:hover {
    opacity: .75;
  }
}

.tutorial__closeButton {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 0;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.tutorial__closeButton::before, .tutorial__closeButton::after {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  height: 2px;
  margin: auto;
  background-color: #fff;
  content: "";
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.tutorial__closeButton::before {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.tutorial__closeButton::after {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

@media (hover: hover) and (pointer: fine) {
  .tutorial__closeButton:hover {
    opacity: .75;
  }
}

.tutorial__em {
  color: #fee117;
  font: inherit;
}

.tutorial__video {
  display: block;
  aspect-ratio: 500 / 205;
  width: 100%;
  height: 100%;
}

.tutorial__slider {
  overflow: hidden;
}

.tutorial__slider img {
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
}

@media screen and (max-width: 1024px) {
  .tutorial__step[data-active-step-page="step_mypage"], .tutorial__step[data-active-step-page="step_lecture"], .tutorial__step[data-active-step-page="step_contents"], .tutorial__step[data-active-step-page="step_comm"], .tutorial__step[data-active-step-page="step_help"] {
    left: 212px;
  }
}

@media screen and (max-width: 768px) {
  .tutorial__startContents, .tutorial__endContents, .tutorial__headerMenuButtonContents, .tutorial__stepContents, .tutorial__againContents {
    border-radius: 5px;
  }
  .tutorial__startContents, .tutorial__endContents {
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
            box-shadow: 0 5px 10px rgba(0, 0, 0, .3);
    background: linear-gradient(90deg, rgba(0, 0, 0, .05) 1px, transparent 1px), linear-gradient(rgba(0, 0, 0, .05) 1px, transparent 1px), #506dbf;
    background-position: 0 0;
    background-size: 6px 6px;
  }
  .tutorial__startHeading, .tutorial__endHeading {
    font-size: 3rem;
    letter-spacing: .075em;
  }
  .tutorial__startText, .tutorial__endText {
    margin-top: 20px;
    font-size: 1.4rem;
    line-height: 1.71428;
  }
  .tutorial__startContents {
    padding: 35px 15px 41px;
  }
  .tutorial__startInner {
    max-height: calc(85vh - 79px);
    overflow-y: auto;
  }
  .tutorial__startCharacter {
    max-width: 239px;
    margin: 17px auto 0;
  }
  .tutorial__endContents {
    padding: 33px 15px 37px;
  }
  .tutorial__endInner {
    max-height: calc(85vh - 73px);
    overflow-y: auto;
  }
  .tutorial__endCharacter {
    max-width: 224px;
    margin: 12px auto 0;
  }
  .tutorial__endNotice {
    margin-top: 5px;
    font-size: 1rem;
  }
  .tutorial__headerMenuButton {
    --headerMenuButtonTopPosition: calc(var(--offsetTop) - 13px);
    left: 43px;
    max-width: min(324px, calc(100vw - 45px));
  }
  .tutorial__headerMenuButton::before {
    border-width: 0 17.5px 35px 17.5px;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="10" /><feOffset dx="1" dy="6" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
  }
  .tutorial__headerMenuButtonContents {
    padding: 40px;
  }
  .tutorial__headerMenuButtonText {
    font-size: 1.4rem;
    line-height: 1.71428;
  }
  .tutorial__step {
    max-width: 374px;
  }
  .tutorial__step::before {
    border-width: 15.675px 23.7px 15.675px 0;
    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="10" /><feOffset dx="1" dy="6" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,0.3)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
    -webkit-filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
            filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .3));
  }
  .tutorial__step[data-active-step-page="step_mypage"], .tutorial__step[data-active-step-page="step_lecture"], .tutorial__step[data-active-step-page="step_contents"], .tutorial__step[data-active-step-page="step_comm"], .tutorial__step[data-active-step-page="step_help"] {
    left: 0;
  }
  .tutorial__step[data-active-step-page="step_mypage"]::before, .tutorial__step[data-active-step-page="step_lecture"]::before, .tutorial__step[data-active-step-page="step_contents"]::before, .tutorial__step[data-active-step-page="step_comm"]::before, .tutorial__step[data-active-step-page="step_help"]::before {
    right: 0;
    left: 0;
    margin: auto;
  }
  .tutorial__step[data-active-step-page="step_mypage"]::before, .tutorial__step[data-active-step-page="step_lecture"]::before {
    top: -13px;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .tutorial__step[data-active-step-page="step_contents"], .tutorial__step[data-active-step-page="step_comm"], .tutorial__step[data-active-step-page="step_help"] {
    --stepTopPosition: 0;
  }
  .tutorial__step[data-active-step-page="step_contents"]::before, .tutorial__step[data-active-step-page="step_comm"]::before, .tutorial__step[data-active-step-page="step_help"]::before {
    top: auto;
    bottom: -13px;
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
  .tutorial__step[data-active-step-page="step_mypage"] {
    --stepTopPosition: 156px;
  }
  .tutorial__step[data-active-step-page="step_lecture"] {
    --stepTopPosition: 206px;
  }
  .tutorial__step[data-active-step-page="step_utility"]::before, .tutorial__step[data-active-step-page="step_watching"]::before {
    top: -13px;
  }
  .tutorial__step[data-active-step-page="step_utility"] {
    right: 0;
    --stepTopPosition: calc(var(--offsetTop) + 3px);
  }
  .tutorial__step[data-active-step-page="step_utility"]::before {
    right: 56px;
  }
  .tutorial__step[data-active-step-page="step_watching"] {
    --stepTopPosition: calc(var(--offsetTop) + 22px);
  }
  .tutorial__stepContents {
    display: grid;
    min-height: 280px;
    padding: 32px 15px 17px;
  }
  .tutorial__stepInner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    max-height: 231px;
    overflow-y: auto;
  }
  .tutorial__stepDetail {
    grid: "image text" auto/min(155px, 48.4375%) minmax(0, 1fr);
    gap: 0 10px;
  }
  .tutorial__stepDetailImage {
    padding-top: 3px;
  }
  .tutorial__stepTitle {
    display: block;
    color: #fee117;
    font-weight: bold;
    font-size: 1.7rem;
    line-height: 1.41176;
    letter-spacing: .075em;
  }
  .tutorial__stepTitleNarrow {
    letter-spacing: 0;
  }
  .tutorial__stepText {
    margin-top: 5px;
    font-size: 1.4rem;
  }
  .tutorial__stepPager {
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    max-width: 320px;
    margin: 16px auto 0;
  }
  .tutorial__stepPagerNumber {
    font-size: 1rem;
  }
  .tutorial__again {
    max-width: 324px;
  }
  .tutorial__againContents {
    padding: 21px 15px 25px;
  }
  .tutorial__againInner {
    max-height: calc(85vh - 46px);
    overflow-y: auto;
  }
  .tutorial__againText {
    font-size: 1.4rem;
    line-height: 1.71428;
  }
  .tutorial__againButton {
    margin-top: 14px;
  }
  .tutorial__button {
    max-width: 174px;
    min-height: 34px;
    margin-bottom: 3px;
    border-radius: 4px;
    -webkit-box-shadow: 0 3px 0 #bb9b03;
            box-shadow: 0 3px 0 #bb9b03;
    font-size: 1.4rem;
  }
  .tutorial__button--end {
    max-width: 257px;
  }
  .tutorial__button--prev, .tutorial__button--next {
    max-width: 110px;
    border-radius: 3px;
    font-size: 1.2rem;
  }
  .tutorial__button--prev::before, .tutorial__button--prev::after, .tutorial__button--next::before, .tutorial__button--next::after {
    width: 6px;
  }
  .tutorial__button--prev::before, .tutorial__button--next::before {
    top: -4px;
  }
  .tutorial__button--prev::after, .tutorial__button--next::after {
    top: 3px;
  }
  .tutorial__button--prev {
    padding: 5px 15px 5px 20px;
  }
  .tutorial__button--prev::before, .tutorial__button--prev::after {
    left: 12px;
  }
  .tutorial__button--next {
    padding: 5px 20px 5px 15px;
  }
  .tutorial__button--next::before, .tutorial__button--next::after {
    right: 12px;
  }
  .tutorial__confirmButton {
    max-width: 99px;
    min-height: 32px;
    border-radius: 3px;
    font-size: 1.2rem;
  }
  .tutorial__closeButton {
    top: 20px;
    right: 20px;
    width: 25px;
    height: 25px;
  }
  .tutorial__closeButton::before, .tutorial__closeButton::after {
    width: 14px;
  }
  .tutorial__em--pc {
    color: inherit;
  }
  .tutorial__video {
    aspect-ratio: 310 / 350;
  }
}

@media screen and (max-width: 359px) {
  .tutorial__headerMenuButtonContents {
    padding: 40px 15px;
  }
  .tutorial__step[data-active-step-page="step_mypage"] .tutorial__stepContents, .tutorial__step[data-active-step-page="step_lecture"] .tutorial__stepContents, .tutorial__step[data-active-step-page="step_utility"] .tutorial__stepContents, .tutorial__step[data-active-step-page="step_watching"] .tutorial__stepContents {
    min-height: auto;
  }
  .tutorial__step[data-active-step-page="step_mypage"] .tutorial__stepInner, .tutorial__step[data-active-step-page="step_lecture"] .tutorial__stepInner, .tutorial__step[data-active-step-page="step_utility"] .tutorial__stepInner, .tutorial__step[data-active-step-page="step_watching"] .tutorial__stepInner {
    max-height: calc(85vh - var(--stepTopPosition) - 73px);
  }
}

.lineGuide {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, .85);
  -webkit-transition: opacity .2s ease, visibility .2s ease;
  transition: opacity .2s ease, visibility .2s ease;
}

.lineGuide.isOpen {
  visibility: visible;
  opacity: 1;
}

.lineGuide__wrapper {
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 100%;
  max-width: 900px;
  padding: 45px 20px;
}

.lineGuide__inner {
  max-height: calc(85vh - 90px);
  overflow-y: auto;
}

.lineGuide__head {
  display: grid;
  place-items: center;
  min-height: 150px;
  border-radius: 10px 10px 0 0;
  padding: 10px 20px;
  background: url(/img/top/line_guide/lineguide_bg03__pc.png) left -58px top -38px no-repeat, url(/img/top/line_guide/lineguide_bg04__pc.png) right -58px top -38px no-repeat, #0695c7;
}

.lineGuide__headText {
  position: relative;
  padding: 22px 124px;
  color: #fff;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-weight: bold;
  font-size: 48px;
  font-size: 3rem;
  letter-spacing: .025em;
  line-height: 1.36;
  text-align: center;
}

.lineGuide__headText::before, .lineGuide__headText::after {
  display: block;
  position: absolute;
  content: "";
}

.lineGuide__headText::before {
  inset: auto auto 0 0;
  width: 106px;
  height: 102px;
  background: url(/img/top/line_guide/lineguide_bg01.png) center/contain no-repeat;
}

.lineGuide__headText::after {
  inset: auto 0 0 auto;
  width: 106px;
  height: 104px;
  background: url(/img/top/line_guide/lineguide_bg02.png) center/contain no-repeat;
}

.lineGuide__contents {
  display: grid;
  grid: "illust detail" auto/auto minmax(0, 1fr);
  gap: 0 24px;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  padding: 0 30px 0 12px;
}

.lineGuide__contentsDetail {
  grid-area: detail;
  padding: 40px 0 27px;
}

.lineGuide__contentsIllust {
  grid-area: illust;
  -ms-flex-item-align: end;
      align-self: flex-end;
  padding-top: 30px;
}

.lineGuide__contentsIllustImage {
  height: auto;
}

.lineGuide__title {
  display: block;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-weight: bold;
  font-size: 41.6px;
  font-size: 2.6rem;
  letter-spacing: .025em;
  line-height: 1.25;
  text-align: center;
}

.lineGuide__balloon {
  margin-top: 7px;
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.lineGuide__balloonText {
  position: relative;
  padding: 0 32px;
  color: #06c755;
  -webkit-font-feature-settings: "palt";
          font-feature-settings: "palt";
  font-weight: bold;
  font-size: 54.4px;
  font-size: 3.4rem;
  letter-spacing: .025em;
  line-height: 1.25;
  text-align: center;
}

.lineGuide__balloonText::before, .lineGuide__balloonText::after {
  display: block;
  position: absolute;
  bottom: 20px;
  width: 38px;
  height: 4px;
  background-color: currentColor;
  border-radius: 5px;
  content: "";
}

.lineGuide__balloonText::before {
  left: -6px;
  rotate: 60deg;
}

.lineGuide__balloonText::after {
  right: -6px;
  rotate: -60deg;
}

.lineGuide__text {
  margin-top: 8px;
  font-size: 28.8px;
  font-size: 1.8rem;
  line-height: 1.55;
}

.lineGuide__lineQr {
  margin-top: 25px;
  display: grid;
  grid-template-columns: 32.65% minmax(0, 1fr);
}

.lineGuide__lineQrTitle {
  padding: 10px;
  position: relative;
  display: grid;
  place-items: center;
  background-color: #0695c7;
  border-radius: 10px 0 0 10px;
  color: #fff;
  font-weight: bold;
  font-size: 32px;
  font-size: 2rem;
  line-height: 1.25;
  text-align: center;
}

.lineGuide__lineQrTitle::after {
  display: block;
  position: absolute;
  inset: 50% -13px auto auto;
  translate: 0 -50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15.5px 0 15.5px 14px;
  border-color: transparent transparent transparent #0695c7;
  content: "";
}

.lineGuide__lineQrContents {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27.62%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 15px;
  padding: 10px 20px 9px 24px;
  background-color: #f2f2f2;
}

.lineGuide__lineQrText {
  font-size: 19.2px;
  font-size: 1.2rem;
  line-height: 1.416;
}

.lineGuide__lineQrCodeImage {
  height: auto;
}

.lineGuide__lineLink {
  display: none;
}

.lineGuide__note {
  margin-top: 7px;
  font-size: 22.4px;
  font-size: 1.4rem;
}

.lineGuide__registeredButton {
  display: inline;
  vertical-align: inherit;
  color: #0695c7;
  font-size: 22.4px;
  font-size: 1.4rem;
  border: 0;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .lineGuide__registeredButton:hover {
    opacity: .75;
  }
}

.lineGuide__closeButton {
  position: absolute;
  inset: 12px 15px auto auto;
  width: 30px;
  height: 30px;
  overflow: hidden;
  border: 0;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.lineGuide__closeButton::before, .lineGuide__closeButton::after {
  display: block;
  position: absolute;
  inset: 0;
  width: 25px;
  height: 2px;
  margin: auto;
  background-color: #fff;
  content: "";
  -webkit-transition: opacity .2s ease;
  transition: opacity .2s ease;
}

.lineGuide__closeButton::before {
  rotate: -45deg;
}

.lineGuide__closeButton::after {
  rotate: 45deg;
}

@media (hover: hover) and (pointer: fine) {
  .lineGuide__closeButton:hover {
    opacity: .75;
  }
}

@media screen and (max-width: 768px) {
  .lineGuide__head {
    min-height: 100px;
    padding: 10px;
    background: url(/img/top/line_guide/lineguide_bg03__sp.png) left -20px top 5px/108px auto no-repeat, url(/img/top/line_guide/lineguide_bg04__sp.png) right -20px top 5px/112px auto no-repeat, #0695c7;
  }
  .lineGuide__headText {
    padding: 7px 40px;
    font-size: 1.7rem;
    line-height: 1.323;
  }
  .lineGuide__headText::before {
    width: 64px;
    height: 62px;
    inset: auto auto 0 -7px;
  }
  .lineGuide__headText::after {
    width: 64px;
    height: 63px;
    inset: auto -7px 0 auto;
  }
  .lineGuide__contents {
    display: block;
    padding: 0 20px;
  }
  .lineGuide__contentsDetail {
    padding: 17px 0 27px;
  }
  .lineGuide__contentsIllust {
    display: none;
  }
  .lineGuide__title {
    font-size: 1.6rem;
    line-height: 1.4;
  }
  .lineGuide__balloon {
    margin-top: 2px;
  }
  .lineGuide__balloonText {
    padding: 0 20px;
    font-size: 1.9rem;
    line-height: 1.4;
  }
  .lineGuide__balloonText::before, .lineGuide__balloonText::after {
    bottom: 11px;
    width: 18px;
    height: 2px;
  }
  .lineGuide__balloonText::before {
    left: 2px;
  }
  .lineGuide__balloonText::after {
    right: 2px;
  }
  .lineGuide__text {
    margin-top: 6px;
    font-size: 1.3rem;
    line-height: 1.615;
    text-align: left;
  }
  .lineGuide__lineQr {
    display: none;
  }
  .lineGuide__lineLink {
    margin: 11px auto 0;
    padding-top: 10px;
    max-width: 360px;
    width: 100%;
    display: block;
    position: relative;
  }
  .lineGuide__lineLinkTitle {
    position: relative;
    padding: 15px 15px 15px 112px;
    color: #fff;
    background-color: #0695c7;
    border-radius: 5px 5px 0 0;
    font-weight: bold;
    font-size: 1.5rem;
    line-height: 1.4;
    text-align: center;
  }
  .lineGuide__lineLinkTitle::after {
    display: block;
    position: absolute;
    translate: calc(-50% + 48px) 0;
    width: 0;
    height: 0;
    border-style: solid;
    inset: auto auto -8px 50%;
    border-width: 8px 9.5px 0 9.5px;
    border-color: #0695c7 transparent transparent transparent;
    content: "";
  }
  .lineGuide__lineLinkContents {
    padding: 18px 15px 18px 112px;
    border-radius: 0 0 5px 5px;
    background-color: #f2f2f2;
  }
  .lineGuide__lineLinkButton {
    position: relative;
    display: block;
    max-width: 168px;
    margin: 0 auto;
    width: 100%;
    background-color: #06c755;
    border-radius: 18px;
    border: 0;
    padding: 10px 22px 10px 16px;
    font-family: inherit !important;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    line-height: 1.5;
    color: #fff;
    -webkit-font-feature-settings: "palt";
            font-feature-settings: "palt";
    font-weight: bold;
    font-size: 1.1rem;
    letter-spacing: .025em;
  }
  .lineGuide__lineLinkButton:visited {
    color: #fff;
  }
  .lineGuide__lineLinkButton::before {
    font-family: "icomoon",sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    inset: 50% 12px auto auto;
    translate: 0 -50%;
    font-weight: normal;
    font-size: 1rem;
  }
  .lineGuide__lineLinkIllust {
    position: absolute;
    inset: auto auto 0 -9px;
    width: 126px;
  }
  .lineGuide__lineLinkIllustImage {
    height: auto;
  }
  .lineGuide__note {
    margin-top: 11px;
    font-size: 1.1rem;
  }
  .lineGuide__registeredButton {
    font-size: 1.1rem;
  }
  .lineGuide__closeButton {
    top: 10px;
  }
}

@media screen and (max-width: 360px) {
  .lineGuide__headText {
    padding: 7px 35px;
  }
  .lineGuide__headText::before {
    width: 50px;
    height: 49px;
  }
  .lineGuide__headText::after {
    width: 50px;
    height: 50px;
  }
}

/* ----------
topModal
------------- */
.topModal {
  visibility: hidden;
  opacity: 0;
}

.topModal.isOpen {
  visibility: visible;
  opacity: 1;
}

.topModal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100vh;
  z-index: 500;
  display: block;
  opacity: 1;
}

.topModal__close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  cursor: pointer;
}

.topModal__close:hover {
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .topModal__close {
    top: -30px;
    right: 0;
  }
}

.topModal__close::before, .topModal__close::after {
  content: "";
  width: 28px;
  height: 3px;
  background: #9799A1;
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
}

@media screen and (max-width: 768px) {
  .topModal__close::before, .topModal__close::after {
    background: #fff;
  }
}

.topModal__close::before {
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}

.topModal__close::after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}

.topModal__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 501;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .topModal__wrapper {
    overflow-y: scroll;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.topModal__body {
  position: relative;
  padding: 50px 63px;
  max-width: 638px;
  opacity: 1;
  background: #fff;
  border-radius: 2px;
  z-index: 501;
}

@media screen and (max-width: 768px) {
  .topModal__body {
    width: 80%;
    padding: 8vw 8.4vw;
  }
}

.topModal__image {
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .topModal__image {
    margin-bottom: 5svh;
  }
}

.topModal__image img {
  max-width: 512px;
  max-height: 200px;
}

@media screen and (max-width: 768px) {
  .topModal__image img {
    max-width: 100%;
    height: auto;
  }
}

.topModal__title {
  margin-bottom: 40px;
  font-size: 24px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .topModal__title {
    font-size: 2.2rem;
    margin-bottom: 5svh;
  }
}

.topModal__text {
  text-align: center;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .topModal__text {
    text-align: justify;
  }
}

.topModal__textWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .topModal__textWrap {
    gap: 3.75svh;
  }
}

.topModal__button {
  display: inline-block;
  padding: 8px 16px;
  background: #192D6E;
  background: linear-gradient(85deg, #192D6E 0%, #1E3682 100%);
  border-radius: 4px;
}

.topModal__button:hover {
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .topModal__button {
    display: block;
    text-align: center;
  }
}

.topModal__buttonWrap {
  margin-top: 40px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .topModal__buttonWrap {
    margin-top: 5svh;
    text-align: left;
  }
}

.topModal__buttonText {
  color: #fff;
}

/* ----------
satisfactionModal
------------- */
.satisfactionModal {
  visibility: hidden;
  opacity: 0;
}

.satisfactionModal.isOpen {
  visibility: visible;
  opacity: 1;
}

.satisfactionModal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100vh;
  z-index: 500;
  display: block;
  opacity: 1;
}

.satisfactionModal__close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  cursor: pointer;
}

.satisfactionModal__close:hover {
  cursor: pointer;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__close {
    top: -30px;
    right: 0;
  }
}

.satisfactionModal__close::before, .satisfactionModal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  background-color: #9799A1;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__close::before, .satisfactionModal__close::after {
    background-color: #fff;
  }
}

.satisfactionModal__close::before {
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}

.satisfactionModal__close::after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}

.satisfactionModal__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 501;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__wrapper {
    overflow-y: scroll;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 50px 36px;
  }
}

.satisfactionModal__body {
  position: relative;
  padding: 58px 63px 50px;
  max-width: 640px;
  width: 100%;
  opacity: 1;
  background-color: #fff;
  border-radius: 2px;
  z-index: 501;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__body {
    width: 100%;
    padding: 6.667vw 8vw;
  }
}

.satisfactionModal__title {
  padding-bottom: 28px;
  line-height: 1.4;
  font-weight: bold;
  text-align: center;
  font-size: 38.4px;
  font-size: 2.4rem;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__title {
    font-size: 2.2rem;
    padding-bottom: 3.2svh;
  }
}

.satisfactionModal__text {
  text-align: center;
  line-height: 1.6;
  font-size: 25.6px;
  font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__text {
    text-align: justify;
  }
}

.satisfactionModal__textWrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__textWrap {
    gap: 3.75svh;
  }
}

.satisfactionModal__choiceWrap {
  margin: 20px auto 0;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__choiceWrap {
    margin: 20px auto 0;
  }
}

@media screen and (max-width: 360px) {
  .satisfactionModal__choiceWrap {
    max-width: revert;
  }
}

.satisfactionModal__choiceGuide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  max-width: 310px;
  margin: 0 auto;
  padding: 0 6px;
  font-size: 25.6px;
  font-size: 1.6rem;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__choiceGuide {
    max-width: 270px;
    font-size: 1.2rem;
    letter-spacing: .03em;
  }
}

.satisfactionModal__choiceList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  max-width: 310px;
  margin: 0 auto;
  padding: 6px 0 10px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__choiceList {
    max-width: 270px;
    gap: 5px;
    padding: 10px 0 10px;
  }
}

.satisfactionModal__choiceItem {
  position: relative;
  height: 44px;
  width: 44px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__choiceItem {
    height: 40px;
    width: 40px;
  }
}

.satisfactionModal__choiceButton {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  margin: 0;
  cursor: pointer;
}

.satisfactionModal__choiceButton:checked + .satisfactionModal__choiceTile {
  color: #fff;
  -webkit-transform: scale(1.09, 1.09);
          transform: scale(1.09, 1.09);
  background: -webkit-gradient(linear, right top, left top, from(#22BDFF), to(#4162FF));
  background: linear-gradient(270deg, #22BDFF 0%, #4162FF 100%);
}

.satisfactionModal__choiceButton:checked + .satisfactionModal__choiceTile .satisfactionModal__choiceTileLabel {
  color: #fff;
}

.satisfactionModal__choiceTile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3;
  border-radius: 9999px;
  padding: 16px;
  padding: 1rem;
  -webkit-transition: -webkit-transform 300ms ease;
  transition: -webkit-transform 300ms ease;
  transition: transform 300ms ease;
  transition: transform 300ms ease, -webkit-transform 300ms ease;
}

.satisfactionModal__choiceTileLabel {
  text-align: center;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-size: 38.4px;
  font-size: 2.4rem;
  color: #1a1f30;
}

.satisfactionModal__choiceSubmitButton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 30px auto 0;
  padding: 8px 16px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 4px;
  background: linear-gradient(85deg, #192D6E 0%, #1E3682 100%);
  color: #fff;
  border: none;
}

@media screen and (max-width: 768px) {
  .satisfactionModal__choiceSubmitButton {
    width: 100%;
  }
}

.satisfactionModal__choiceSubmitButton:hover {
  opacity: .7;
}

.satisfactionModal__choiceSubmitButton.is-inactive {
  background: #9da8c4;
}

.satisfactionModal__choiceSubmitButton.is-inactive:hover {
  opacity: 1;
  cursor: default;
}

.satisfactionModal__comment {
  padding-top: 33px;
}

.satisfactionModal__commentTitle {
  font-weight: bold;
}

.satisfactionModal__commentTextarea {
  width: 100%;
  min-height: 110px;
  max-height: 250px;
  margin-top: 8px;
  padding: 9px;
  border: solid 1px #E2E2E2;
  color: #141517;
}

.satisfactionModal__commentTextarea::-webkit-input-placeholder {
  color: #9799A1;
}

.satisfactionModal__commentTextarea::-moz-placeholder {
  color: #9799A1;
}

.satisfactionModal__commentTextarea::-ms-input-placeholder {
  color: #9799A1;
}

.satisfactionModal__commentTextarea::placeholder {
  color: #9799A1;
}

.satisfactionModal--2 {
  margin-top: 10px;
}

.satisfactionModal--2 .satisfactionModal__title {
  padding-bottom: 26px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal--2 .satisfactionModal__title {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 350px) {
  .satisfactionModal--2 .satisfactionModal__title {
    font-size: 2.1rem;
  }
}

.satisfactionModal--2 .satisfactionModal__text {
  font-weight: bold;
}

.satisfactionModal--2 .satisfactionModal__choiceWrap {
  margin: 13px auto 0;
}

.satisfactionModal--2 .satisfactionModal__choiceButton {
  opacity: 1;
  top: 50%;
  left: 12px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background: #fff;
  border: 2px solid #E2E2E2;
  border-radius: 50px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.satisfactionModal--2 .satisfactionModal__choiceButton:checked {
  border-color: #1A2F71;
}

.satisfactionModal--2 .satisfactionModal__choiceButton:checked::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 8px;
  width: 10px;
  height: 10px;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  background: #1A2F71;
  border-radius: 50px;
}

.satisfactionModal--2 .satisfactionModal__choiceButton:checked + .satisfactionModal__choiceTile {
  color: unset;
  -webkit-transform: none;
          transform: none;
  background: none;
  border-color: #1A2F71;
}

.satisfactionModal--2 .satisfactionModal__choiceButton:checked + .satisfactionModal__choiceTile .satisfactionModal__choiceTileLabel {
  color: unset;
  border-color: #1A2F71;
}

.satisfactionModal--2 .satisfactionModal__choiceTile {
  display: block;
  padding: 0;
  background: #fff;
  border: none;
  border-radius: unset;
  -webkit-transition: none;
  transition: none;
}

.satisfactionModal--2 .satisfactionModal__choiceTileLabel {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  padding: 8px 10px 8px 38px;
  letter-spacing: .008em;
  font-size: 25.6px;
  font-size: 1.6rem;
  color: #1a1f30;
  text-align: left;
  border: 2px solid #E2E2E2;
  border-radius: 4px;
}

.satisfactionModal--2 .satisfactionModal__choiceList {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px 0;
  max-width: 380px;
  margin: 0 auto;
  padding: 0;
}

@media screen and (max-width: 768px) {
  .satisfactionModal--2 .satisfactionModal__choiceList {
    max-width: 100%;
  }
}

.satisfactionModal--2 .satisfactionModal__choiceItem {
  height: auto;
  width: 100%;
}

.satisfactionModal--2 .satisfactionModal__choiceSubmitButton {
  margin: 28px auto 0;
}

@media screen and (max-width: 768px) {
  .satisfactionModal--2 .satisfactionModal__choiceSubmitButton {
    margin: 30px auto 0;
  }
}

.satisfactionModal--2 .satisfactionModal__body {
  padding: 58px 63px 60px;
}

@media screen and (max-width: 768px) {
  .satisfactionModal--2 .satisfactionModal__body {
    padding: 6.667vw 8vw 9.333vw;
  }
}

@media screen and (max-width: 768px) {
  .satisfactionModal--2 .satisfactionModal__close {
    top: -36px;
    right: 2px;
  }
}

@use "sass:math";
.friendIntroductionnModal {
  visibility: hidden;
  opacity: 0;
}

.friendIntroductionnModal.isOpen {
  visibility: visible;
  opacity: 1;
}

.friendIntroductionnModal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  width: 100%;
  height: 100vh;
  z-index: 500;
  display: block;
  opacity: 1;
}

.friendIntroductionnModal__wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  z-index: 501;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 768px) {
  .friendIntroductionnModal__wrapper {
    overflow-y: scroll;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 78px;
    padding-bottom: 50px;
  }
}

.friendIntroductionnModal__body {
  position: relative;
  max-width: 50vw;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  opacity: 1;
  border-radius: 2px;
  z-index: 501;
}

@media screen and (max-width: 768px) {
  .friendIntroductionnModal__body {
    max-width: 80vw;
  }
}

.friendIntroductionnModal__bodyImage img {
  height: auto;
}

.friendIntroductionnModal__close {
  width: 28px;
  height: 28px;
  position: absolute;
  top: -45px;
  right: 0;
  border: none;
  cursor: pointer;
}

.friendIntroductionnModal__close:hover {
  cursor: pointer;
}

.friendIntroductionnModal__close::before, .friendIntroductionnModal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  background-color: #fff;
  border-radius: 3px;
}

@media screen and (max-width: 768px) {
  .friendIntroductionnModal__close::before, .friendIntroductionnModal__close::after {
    background-color: #fff;
  }
}

.friendIntroductionnModal__close::before {
  -webkit-transform: translateX(-50%) rotate(45deg);
          transform: translateX(-50%) rotate(45deg);
}

.friendIntroductionnModal__close::after {
  -webkit-transform: translateX(-50%) rotate(-45deg);
          transform: translateX(-50%) rotate(-45deg);
}

/* 応急処置 */
#change_gender #newgender {
  border: 1px solid #aaa;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  padding: 2px 2px 2px 0;
}

#change_birthday select {
  border: 1px solid #aaa;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
  padding: 2px 2px 2px 0;
}

.mypage-list .ticket-info::before {
  content: "";
}

.player_box, .play_box {
  z-index: 10;
}

.wide .play_box {
  width: 100vw;
}

.stocks_inner .mv {
  position: relative;
  z-index: 10;
}

@media screen and (max-width: 768px) {
  .tsubuyakiGFS .snsHeader {
    top: 60px;
  }
}

@media screen and (max-width: 834px) {
  #detail #videoPlayer,
  #detail #vjs_video_3 {
    position: fixed;
    z-index: 100;
    top: 60px !important;
  }
}

.layout--pc {
  display: block;
}

.layoutInline--pc {
  display: inline;
}

.layout--sp,
.layoutInline--sp {
  display: none;
}

@media screen and (max-width: 768px) {
  .layout--pc,
  .layoutInline--pc {
    display: none;
  }
  .layout--sp {
    display: block;
  }
  .layoutInline--sp {
    display: inline;
  }
}