:root {
  --bg-color-light: #fafafa;
  --bg-color-dark: #1f1f20;
  --sub-bg-color-light: #f0f0f0;
  --sub-bg-color-dark: #2a2a2b;
  --text-color-light: #232324;
  --text-color-dark: #ffffff;
  --sub-text-color-light: #6e6e6f;
  --sub-text-color-dark: #929293;
  --link-color-light: #232324;
  --link-color-dark: #ffffff;
  --link-hover-color-light: rgba(35, 35, 36, 0.6);
  --link-hover-color-dark: rgba(255, 255, 255, 0.6);
  --primary-color-light: #757575;
  --primary-color-dark: #999999;
  --mobile-column-count: 1;
  --body-width: 960px;
  --border-color-light: #e5e5ea;
  --border-color-dark: #3a3a3c;
  --box-color-light: #c7c7cc;
  --box-color-dark: #48484a;
  --box-color-talk-light: #232324;
  --box-color-talk-dark: #48484a;
  --alert-color-light: #bf1419;
  --alert-color-dark: #ff5555;
  --color-logo-primary: #737373;
  --card-color-light: #fff;
  --card-color-dark: #3a3a3b;
  --balloon-color-light: #fff;
  --balloon-color-dark: #3a3a3b;
  --image-logo-site-light: url(./../../stories/img/common/logo_site_black.svg);
  --image-logo-site-dark: url(./../../stories/img/common/logo_site_white.svg);
  --image-tagline-light: url(./../../stories/img/common/image_tagline_black.svg);
  --image-tagline-dark: url(./../../stories/img/common/image_tagline_white.svg);
  --icon-new-contract-light: url(./../../stories/img/common/icon_new-contract_black.svg);
  --icon-new-contract-dark: url(./../../stories/img/common/icon_new-contract_white.svg);
  --icon-address-change-light: url(./../../stories/img/common/icon_address-change_black.svg);
  --icon-address-change-dark: url(./../../stories/img/common/icon_address-change_white.svg);
  --icon-bs-contract-light: url(./../../stories/img/common/icon_bs-contract_black.svg);
  --icon-bs-contract-dark: url(./../../stories/img/common/icon_bs-contract_white.svg);
  --accent-blue-color-light: #4ec2ff;
  --accent-blue-color-dark: #fff;
  --accent-yellow-color-light: #D1D200;
  --accent-yellow-color-dark: #fff;
  --accent-pink-color-light: #FF8082;
  --accent-pink-color-dark: #fff
}

:root,
* {
  --bg-color: var(--bg-color-light);
  --sub-bg-color: var(--sub-bg-color-light);
  --text-color: var(--text-color-light);
  --sub-text-color: var(--sub-text-color-light);
  --link-color: var(--link-color-light);
  --link-hover-color: var(--link-hover-color-light);
  --primary-color: var(--primary-color-light);
  --border-color: var(--border-color-light);
  --box-color: var(--box-color-light);
  --box-color-talk: var(--box-color-talk-light);
  --alert-color: var(--alert-color-light);
  --logo-color: var(--color-logo-primary);
  --card-color: var(--card-color-light);
  --balloon-color: var(--balloon-color-light);
  --image-logo-site: var(--image-logo-site-light);
  --image-tagline: var(--image-tagline-light);
  --icon-new-contract: var(--icon-new-contract-light);
  --icon-address-change: var(--icon-address-change-light);
  --icon-bs-contract: var(--icon-bs-contract-light);
  --accent-blue: var(--accent-blue-color-light);
  --accent-yellow: var(--accent-yellow-color-light);
  --accent-pink: var(--accent-pink-color-light)
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #232324;
  color: var(--text-color);
  letter-spacing: .1rem
}

*:before,
*:after {
  color: #fff
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
small,
strong,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 100%;
  vertical-align: baseline
}

body {
  -webkit-text-size-adjust: 100%;
  line-height: 1
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block
}

ol,
ul {
  list-style: none
}

a {
  margin: 0;
  padding: 0;
  background: transparent;
  font-size: 100%;
  text-decoration: none;
  vertical-align: baseline
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #e5e5ea;
  border-top: 1px solid var(--border-color)
}

input,
select,
button {
  outline: none;
  vertical-align: middle
}

input {
  -webkit-appearance: none
}

textarea {
  outline: none
}

img {
  font-size: 0;
  line-height: 0;
  vertical-align: top
}

.display-block-md {
  display: none
}

.display-none-md {
  display: block
}

body {
  background-color: #fafafa;
  background-color: var(--bg-color);
  font-size: 16px;
  line-height: 1.5
}

.wrapper {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh
}

.groupHeader {
  background-color: #666
}

.groupHeader__inner {
  padding: 2px 10px
}

.groupHeader__logotype {
  width: 55px;
  line-height: 1
}

.groupHeader__logotype img {
  width: 100%
}

.siteHeader {
  -webkit-transition: top .5s;
  z-index: 9999;
  position: sticky;
  top: 0px;
  margin-top: 0px;
  background-color: #fff;
  background-color: var(--card-color);
  opacity: 0.9;
  transition: top .5s
}

.siteHeader__inner {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1056px;
  margin: 0 auto;
  padding: 2.5px 0px 2.5px 5px
}

.siteHeader__identity {
  width: 157.1px;
  line-height: 1
}

.siteHeader__identity--logoSite {
  display: block;
  z-index: 1;
  position: relative;
  width: 157.1px;
  height: 36px;
  margin: auto;
  margin-top: 0px;
  background-image: url(./../../stories/img/common/logo_site_black.svg);
  background-image: var(--image-logo-site);
  background-size: 157.1px 36px;
  font-size: 0
}

.siteHeader.is-inview {
  top: -72px
}

.headerNav--pc {
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center
}

.headerNav--pc__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: static;
  width: auto;
  height: auto;
  margin-right: 2px
}

.headerNav--pc__item {
  margin: 0;
  font-size: 10px
}

.headerNav--pc__item a {
  color: #232324;
  color: var(--text-color)
}

.headerNav--pc__item a .icon {
  display: block;
  z-index: 1;
  position: relative;
  width: 20px;
  height: 20px;
  margin: auto;
  margin-top: 2px;
  background-size: 20px 20px;
  font-size: 0
}

.headerNav--pc__item a span {
  -webkit-font-feature-settings: "palt", "kern"0;
  -webkit-font-kerning: none;
  margin: 0 2.5px;
  color: #232324;
  color: var(--text-color);
  font-feature-settings: "palt", "kern"0;
  font-kerning: none;
  letter-spacing: 0px;
  line-height: 1;
  word-break: keep-all
}

.headerNav--pc__item--newContract {
  background-image: url(./../../stories/img/common/icon_new-contract_black.svg);
  background-image: var(--icon-new-contract)
}

.headerNav--pc__item--addressChange {
  background-image: url(./../../stories/img/common/icon_address-change_black.svg);
  background-image: var(--icon-address-change)
}

.headerNav--pc__item--BSContract {
  background-image: url(./../../stories/img/common/icon_bs-contract_black.svg);
  background-image: var(--icon-bs-contract)
}

.footerNav {
  padding: 8px 10px;
  background: #666
}

.footerNav__item {
  -webkit-box-align: left;
  -ms-flex-align: left;
  -webkit-box-pack: left;
  -ms-flex-pack: left;
  align-items: left;
  justify-content: left;
  width: 100%;
  padding: 5px 2.5px;
  border-top: 1px solid #8c8c8c;
  font-size: 12px
}

.footerNav__item a {
  display: block;
  padding: 7.5px 10px;
  color: #fff;
  letter-spacing: .05em;
  line-height: 1;
  text-align: left;
  text-decoration: underline
}

.footerNav__item a:hover {
  color: #ddd
}

.footerNav .footer {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  padding: 15px 0 15px 10px
}

.footerNav .footer__logos {
  width: 14.77vw
}

.footerNav .footer__logos img {
  vertical-align: middle
}

.footerNav .footer__copyright {
  margin-left: 12px;
  color: #fff;
  font-size: 10px;
  letter-spacing: .05em;
  line-height: 1.5
}

.header-display {
  width: 100%;
  margin-top: 0;
  overflow: hidden
}

.header-display.is-guide {
  margin-top: -16px
}

.article {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  background: #fff
}

.article[data-theme=gray] {
  background-color: #f5f5f5
}

.article__inner,
.article__inner--narrow {
  margin: 0 auto;
  padding: 60px 15px;
  color: #232324;
  color: var(--text-color);
  font-size: 17px
}

.article__inner {
  max-width: 1160px
}

.article__inner--narrow {
  max-width: 780px
}

.article__date {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  color: #999;
  font-size: 14px;
  line-height: 1
}

.article__title {
  position: relative;
  margin-bottom: 48px;
  padding: 0 0 8px;
  color: #232324;
  color: var(--text-color);
  font-size: 19px;
  font-weight: bold;
  line-height: 1.6;
  text-align: center
}

.article__title::after {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  width: 20px;
  height: 2px;
  margin: auto;
  background-color: #c4d700;
  content: ""
}

.article__body {
  font-size: 17px;
  line-height: 1.6
}

.article__body>*+* {
  margin-top: 1em
}

.article__body h3 {
  margin-top: 2em;
  margin-bottom: 1em;
  font-size: 19px;
  line-height: 1.3333333
}

.article__body hr {
  margin: 40px auto
}

.article__body small {
  font-size: 14px
}

.article__body img {
  max-width: 100%;
  height: auto
}

.article__body a:not([class*="button"]) {
  text-decoration: underline
}

.list-decimal {
  margin-left: 1.5em;
  list-style: decimal
}

.list-lower-latin {
  margin-left: 1.5em;
  list-style: lower-latin
}

.list-disc {
  margin-left: 1.5em;
  list-style: disc
}

li>[class^="list"] {
  margin-top: .25em
}

[class^="list"]>li+li {
  margin-top: .25em
}

.button,
.form .mktoForm .mktoButton,
[class*="button--"] {
  -webkit-transition: all .4s;
  display: inline-block;
  border-radius: 4px;
  outline: none;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all .4s
}

.button,
.form .mktoForm .mktoButton {
  -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0);
  z-index: 2;
  background-color: #ff3a71;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0);
  color: #fff
}

.button,
.form .mktoForm .mktoButton,
.button--base {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2
}

.button--largest {
  padding: 13px 75px;
  font-size: 18px;
  line-height: 1.33333
}

.button--large,
.form .mktoForm .mktoButton {
  padding: 13px 75px;
  font-size: 13px;
  line-height: 1.33333
}

.button--small {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5
}

.button--mini {
  padding: 1px 5px;
  font-size: 12px;
  line-height: 1.5
}

[class*="button"]+[class*="button"] {
  margin-left: 5px
}

.button--large+.button--large,
.form .mktoForm .mktoButton+.button--large,
.form .mktoForm .button--large+.mktoButton,
.form .mktoForm .mktoButton+.mktoButton {
  margin-left: 10px
}

.button--block+.button--block {
  margin-top: 5px;
  margin-left: 0
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button--"].btn-block {
  width: 100%
}

.button,
.form .mktoForm .mktoButton,
[class*="button--"],
[class*="button--"][data-theme="base"] {
  border: 1px solid #e0e0e0;
  background-color: #fff;
  color: #999
}

.button:hover,
.form .mktoForm .mktoButton:hover,
[class*="button--"]:hover,
[class*="button--"][data-theme="base"]:hover {
  -webkit-box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2)
}

.button[data-theme="flat"],
.form .mktoForm .mktoButton[data-theme="flat"],
[class*="button--"][data-theme="flat"] {
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  color: #999
}

.button[data-theme="flat"]:hover,
.form .mktoForm .mktoButton[data-theme="flat"]:hover,
[class*="button--"][data-theme="flat"]:hover {
  -webkit-box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  color: #00a0dd
}

.button[data-theme="positive"],
.form .mktoForm .mktoButton,
.mktoText .theme--positive[class*="button"],
.mktoForm .theme--positive[class*="button"],
[class*="button--"][data-theme="positive"] {
  border: 1px solid #fc8300;
  background-color: #fc8300;
  color: #fff
}

.button[data-theme="positive"]:hover,
.form .mktoForm .mktoButton:hover,
.mktoText .theme--positive:hover[class*="button"],
.mktoForm .theme--positive:hover[class*="button"],
[class*="button--"][data-theme="positive"]:hover {
  border: 1px solid #fc8300;
  background-color: #ff9c30
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 4px 7px;
  border-radius: 3px;
  background-color: #eee;
  color: #999;
  font-size: 10px;
  font-style: normal;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap
}

.badge:empty {
  display: none
}

.badge--flat,
.badge--frame {
  display: inline-block;
  padding: 5px 0;
  font-size: 13px
}

.badge--frame {
  padding: 5px 7px 3px;
  border-radius: 3px;
  font-size: 12px
}

.badge--circle {
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  overflow: hidden;
  border-radius: 50%;
  font-size: 10px;
  line-height: 2.5em;
  text-align: center
}

.badge--large {
  padding: 6px 12px;
  font-size: 13px;
  line-height: 1.2
}

.badge[data-theme="danger"] {
  background-color: #ff1154;
  color: #fff
}

.badge[data-theme="warning"] {
  background-color: #fc0;
  color: #fff
}

.badge[data-theme="success"] {
  background-color: #00c99c;
  color: #fff
}

.badge[data-theme="info"] {
  background-color: #999;
  color: #fff
}

.badge[data-theme="plain"] {
  background-color: transparent;
  color: #999
}

.badge[data-theme="primary"] {
  background-color: #00a0dd;
  color: #fff
}

.badge--flat {
  background: transparent;
  color: #232324;
  color: var(--text-color)
}

.badge--flat[data-theme="danger"] {
  color: #ff1154
}

.badge--flat[data-theme="warning"] {
  color: #fc0
}

.badge--flat[data-theme="success"] {
  color: #00c99c
}

.badge--flat[data-theme="info"] {
  color: #232324;
  color: var(--text-color)
}

.badge--flat[data-theme="primary"] {
  color: #00a0dd
}

.badge--frame {
  border: solid 1px #333;
  color: #232324;
  color: var(--text-color)
}

.badge--frame[data-theme="danger"] {
  border-color: #ff1154;
  color: #ff1154
}

.badge--frame[data-theme="warning"] {
  border-color: #fc0;
  color: #fc0
}

.badge--frame[data-theme="success"] {
  border-color: #00c99c;
  color: #00c99c
}

.badge--frame[data-theme="info"] {
  border-color: #333;
  color: #232324;
  color: var(--text-color)
}

.badge--frame[data-theme="primary"] {
  border-color: #00a0dd;
  color: #00a0dd
}

.badge--frame[data-theme="weak"] {
  border-color: #eee;
  color: #eee
}

.badge--flat {
  background: transparent;
  color: #232324;
  color: var(--text-color)
}

.badge--flat[data-theme="danger"] {
  color: #ff1154
}

.badge--flat[data-theme="warning"] {
  color: #fc0
}

.badge--flat[data-theme="success"] {
  color: #00c99c
}

.badge--flat[data-theme="info"] {
  color: #232324;
  color: var(--text-color)
}

.badge--flat[data-theme="plain"] {
  color: #aaa
}

.badge--circle {
  background-color: #eee;
  color: #999
}

.badge--circle[data-theme="danger"] {
  background-color: #ff1154;
  color: #fff
}

.badge--circle[data-theme="warning"] {
  background-color: #fc0;
  color: #fff
}

.badge--circle[data-theme="success"] {
  background-color: #00c99c;
  color: #fff
}

.badge--circle[data-theme="info"] {
  background-color: #999;
  color: #fff
}

.badge--circle[data-theme="plain"] {
  background-color: transparent;
  color: #999
}

.button+[class*="badge"],
.form .mktoForm .mktoButton+[class*="badge"],
[class*="button--"]+[class*="badge"],
[class*="badge"]+.button,
.form .mktoForm [class*="badge"]+.mktoButton,
[class*="badge"]+[class*="button--"] {
  margin-left: 10px
}

.popover,
[class*="popover--"],
.dropdown,
.dropdown--small,
.dropdown--noLabel,
.hint,
.hint--small,
.hint--small__link,
.tooltip,
[class*="tooltip--"] {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  position: relative;
  overflow: visible;
  transform: translateZ(0);
  backface-visibility: hidden
}

.popover:before,
[class*="popover--"]:before,
.dropdown__container,
.dropdown--small__container,
.hint__container,
.hint__container--small,
.hint__container--long,
.hint__container--long--topLeft,
.tooltip__container {
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-transition: all .2s;
  -webkit-box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 1;
  position: absolute;
  padding: 10px;
  transform: translateZ(0);
  border-radius: 4px;
  backface-visibility: hidden;
  box-shadow: 0px 1px 1px 0 rgba(0, 0, 0, 0.2);
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  white-space: normal;
  transition: all .2s
}

.tooltip__container:before {
  position: absolute;
  content: ''
}

[class*="popover"][data-position="t"]:before,
[class*="hint"][data-position="t"] [class*="hint__container"],
[data-position="t"] .hint__container,
[data-position="t"] .tooltip__container {
  top: auto;
  right: -120px;
  bottom: calc(100% + 10px);
  left: -120px;
  margin-right: auto;
  margin-left: auto
}

[class*="popover"][data-position="tr"]:before,
[class*="hint"][data-position="tr"] [class*="hint__container"],
[data-position="tr"] .hint__container,
[data-position="tr"] .tooltip__container {
  top: auto;
  right: 0;
  bottom: calc(100% + 10px);
  left: auto
}

[class*="popover"][data-position="br"]:before,
[class*="hint"][data-position="br"] [class*="hint__container"],
[data-position="br"] .hint__container,
[data-position="br"] .tooltip__container {
  top: calc(100% + 10px);
  right: 0;
  bottom: auto;
  left: auto
}

[class*="popover"][data-position="b"]:before,
[class*="hint"][data-position="b"] [class*="hint__container"],
[data-position="b"] .hint__container,
[data-position="b"] .tooltip__container {
  top: calc(100% + 10px);
  right: -120px;
  bottom: auto;
  left: -120px;
  margin-right: auto;
  margin-left: auto
}

[class*="popover"][data-position="bl"]:before,
[class*="hint"][data-position="bl"] [class*="hint__container"],
[data-position="bl"] .hint__container,
[data-position="bl"] .tooltip__container {
  top: calc(100% + 10px);
  right: auto;
  bottom: auto;
  left: 0
}

.popover:before,
[class*="popover--"]:before,
[class*="popover"][data-position="tl"]:before,
.hint__container,
.hint__container--small,
.hint__container--long,
.hint__container--long--topLeft,
[class*="hint"][data-position="tl"] [class*="hint__container"],
[data-position="tl"] .hint__container,
[data-position="tl"] .tooltip__container {
  bottom: calc(100% + 10px);
  left: -40px
}

.popover,
[class*="popover--"] {
  text-align: center
}

.popover:before,
[class*="popover--"]:before {
  background: #333;
  color: #fff;
  white-space: nowrap;
  content: attr(data-popover) ""
}

.popover:hover:before,
[class*="popover--"]:hover:before {
  display: inline-block;
  opacity: 1
}

.dropdown,
.dropdown--small,
.dropdown--noLabel {
  display: inline-block
}

.dropdown--small {
  z-index: 2
}

.dropdown__label,
.dropdown--small__label {
  padding-right: 35px
}

.dropdown--small__label {
  padding-bottom: 5px;
  border-color: #eee;
  color: #aaa;
  font-size: 11px
}

.dropdown--noLabel__label {
  padding-right: 0
}

.dropdown__label:after,
.dropdown--small__label:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  height: 10px;
  margin-top: -2px;
  border: solid 4px transparent;
  border-top: solid 4px rgba(0, 0, 0, 0.3);
  content: ''
}

.dropdown--noLabel__label:after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  height: 10px;
  margin-top: -2px;
  border: solid 4px transparent;
  border-top: solid 4px rgba(0, 0, 0, 0.3);
  content: ''
}

.dropdown__label i,
.dropdown--small__label i {
  margin-right: 2px;
  margin-left: -5px
}

.dropdown__container,
.dropdown--small__container {
  -webkit-box-shadow: none;
  top: 30px;
  right: 0;
  border: solid 1px #eee;
  border-top: none;
  border-radius: 0 0 2px 2px;
  box-shadow: none;
  color: #fff;
  line-height: 1.6
}

.dropdown__container,
.dropdown--small__container {
  padding: 0;
  background: #fff;
  font-size: 11px;
  text-align: left
}

.dropdown__container li,
.dropdown--small__container li {
  white-space: nowrap
}

.dropdown__container li a,
.dropdown--small__container li a {
  display: block;
  padding: 10px 29px 10px 10px;
  color: #232324;
  color: var(--text-color)
}

.dropdown__container li a:hover,
.dropdown--small__container li a:hover {
  background: #f8f8f8
}

.dropdown__label+.dropdown__container,
.dropdown__label+.dropdown--small__container {
  top: 30px
}

.dropdown--small__label+.dropdown__container,
.dropdown--small__label+.dropdown--small__container {
  top: 28px
}

.dropdown:hover .dropdown__label,
.dropdown:hover .dropdown--small__label,
.dropdown--small:hover .dropdown__label,
.dropdown--small:hover .dropdown--small__label,
.dropdown--noLabel:hover .dropdown__label,
.dropdown--noLabel:hover .dropdown--small__label {
  border-radius: 4px 4px 0 0;
  color: #777
}

.dropdown:hover .dropdown__container,
.dropdown:hover .dropdown--small__container,
.dropdown--small:hover .dropdown__container,
.dropdown--small:hover .dropdown--small__container,
.dropdown--noLabel:hover .dropdown__container,
.dropdown--noLabel:hover .dropdown--small__container {
  display: inline-block;
  opacity: 1
}

.dropdown:hover .dropdown__label:after,
.dropdown:hover .dropdown--small__label:after,
.dropdown--small:hover .dropdown__label:after,
.dropdown--small:hover .dropdown--small__label:after,
.dropdown--noLabel:hover .dropdown__label:after,
.dropdown--noLabel:hover .dropdown--small__label:after {
  margin-top: -9px;
  border: solid 4px transparent;
  border-bottom: solid 4px rgba(0, 0, 0, 0.3)
}

.hint {
  z-index: 2;
  font-size: 13px
}

.hint--small,
.hint--small__link {
  z-index: 2;
  font-size: 12px
}

.hint__container,
.hint__container--small,
.hint__container--long,
.hint__container--long--topLeft {
  min-width: 200px;
  max-width: 460px;
  padding: 10px 15px;
  color: #fff;
  line-height: 1.6
}

.hint__container {
  font-size: 13px
}

.hint__container--small {
  width: auto;
  max-width: 300px;
  font-size: 11px
}

.hint__container--long,
.hint__container--long--topLeft {
  width: auto;
  min-width: 400px;
  font-size: 13px
}

.hint__container p,
.hint__container p a,
.hint__container--small p,
.hint__container--long p,
.hint__container--long--topLeft p {
  padding: 0;
  color: #eee;
  text-align: left;
  text-align: justify
}

.hint__container p:last-child,
.hint__container p:last-child a,
.hint__container--small p:last-child,
.hint__container--long p:last-child,
.hint__container--long--topLeft p:last-child {
  margin-bottom: 0
}

.hint__container--long--topLeft {
  right: 0;
  left: auto
}

.hint [class*=icon-],
.hint--small [class*=icon-],
.hint--small__link [class*=icon-] {
  display: inline-block;
  border-radius: 50%;
  background: #aaa;
  color: #eee;
  text-align: center
}

.hint [class*=icon-] {
  width: 22px;
  height: 22px;
  margin: auto 3px;
  padding: 4px 0 4px
}

.hint--small [class*=icon-],
.hint--small__link [class*=icon-] {
  width: 16px;
  height: 16px;
  margin: 0 3px;
  padding: 2px 0;
  font-size: 10px
}

.hint:hover [class*=icon-],
.hint--small:hover [class*=icon-],
.hint--small__link:hover [class*=icon-] {
  background: #333
}

.hint:hover [class*="hint__container"],
.hint--small:hover [class*="hint__container"],
.hint--small__link:hover [class*="hint__container"] {
  display: inline-block;
  background: #333;
  opacity: 1
}

.hint--small__link .hint__container--small p,
.hint--small__link .hint__container--long p,
.hint--small__link .hint__container--long--topLeft p {
  position: relative;
  font-size: 12px
}

.hint--small__link .hint__container--small p a,
.hint--small__link .hint__container--long p a,
.hint--small__link .hint__container--long--topLeft p a {
  padding: 0 0 1px;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: pointer
}

.hint--small__link .hint__container--small p:after,
.hint--small__link .hint__container--long p:after,
.hint--small__link .hint__container--long--topLeft p:after {
  display: inline-block;
  position: absolute;
  bottom: -37px;
  left: -15px;
  width: 70px;
  height: 32px;
  content: " "
}

.hint--small__link[data-position="br"] p:after {
  top: -37px;
  right: -15px;
  bottom: unset;
  left: unset
}

.tooltip__container {
  left: 0;
  min-width: 220px;
  max-width: 600px
}

.tooltip__container:before {
  border: 6px solid transparent
}

[data-position="t"] .tooltip__container:before,
[data-position="tl"] .tooltip__container:before,
[data-position="tr"] .tooltip__container:before {
  border-bottom-width: 0
}

[data-position="b"] .tooltip__container:before,
[data-position="bl"] .tooltip__container:before,
[data-position="br"] .tooltip__container:before {
  border-top-width: 0
}

.hint__container[data-theme="success"],
[data-theme="success"] .tooltip__container {
  background-color: #00c99c;
  color: #fff
}

.hint__container[data-theme="success"]:before,
[data-theme="success"] .tooltip__container:before {
  border-color: #00c99c transparent
}

.hint__container[data-theme="danger"],
[data-theme="danger"] .tooltip__container {
  background-color: #ff1154;
  color: #fff
}

.hint__container[data-theme="danger"]:before,
[data-theme="danger"] .tooltip__container:before {
  border-color: #ff1154 transparent
}

.hint__container[data-theme="warning"],
[data-theme="warning"] .tooltip__container {
  background-color: #fc0;
  color: #fff
}

.hint__container[data-theme="warning"]:before,
[data-theme="warning"] .tooltip__container:before {
  border-color: #fc0 transparent
}

.hint__container[data-theme="info"],
[data-theme="info"] .tooltip__container {
  background-color: #999;
  color: #fff
}

.hint__container[data-theme="info"]:before,
[data-theme="info"] .tooltip__container:before {
  border-color: #999 transparent
}

.hint__container[data-theme="plain"],
[data-theme="plain"] .tooltip__container {
  background-color: #fff;
  color: #999
}

.hint__container[data-theme="plain"]:before,
[data-theme="plain"] .tooltip__container:before {
  border-color: #fff transparent
}

.hint__container[data-theme="forms"],
[data-theme="forms"] .tooltip__container {
  width: 245px;
  background-color: #f8f8f8
}

.hint__container[data-theme="forms"]:before,
[data-theme="forms"] .tooltip__container:before {
  border-color: #f8f8f8 transparent
}

[data-position="t"] .tooltip__container:before {
  bottom: -6px;
  left: 50%;
  margin-left: -6px
}

[data-position="tl"] .tooltip__container:before {
  right: auto;
  bottom: -6px;
  left: 16px
}

[data-position="tr"] .tooltip__container:before {
  right: 16px;
  bottom: -6px;
  left: auto
}

[data-position="b"] .tooltip__container:before {
  top: -6px;
  left: 50%;
  margin-left: -6px
}

[data-position="bl"] .tooltip__container:before {
  top: -6px;
  right: auto;
  left: 16px
}

[data-position="br"] .tooltip__container:before {
  top: -6px;
  right: 16px;
  left: auto
}

.hint--small__link .hint__container--small p {
  position: relative;
  font-size: 12px
}

.hint--small__link .hint__container--small p a {
  padding: 0 0 1px;
  border-bottom: 1px solid #fff;
  color: #fff;
  cursor: pointer
}

.hint--small__link .hint__container--small p:after {
  display: inline-block;
  position: absolute;
  bottom: -37px;
  left: -15px;
  width: 70px;
  height: 32px;
  content: " "
}

.hint--small__link[data-position="br"] p:after {
  top: -37px;
  right: -15px;
  bottom: unset;
  left: unset
}

.dialog,
.dialog--hasGlobalHeader {
  -webkit-transition: all .2s;
  display: none;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vh;
  width: 100%;
  height: 100vh;
  height: 100%;
  overflow-y: scroll;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  transition: all .2s
}

.dialog:before {
  display: inline-block;
  height: 100%;
  margin-right: -0.25em;
  vertical-align: middle;
  content: ''
}

.dialog__panel,
.dialog__panel--thin,
.dialog__panel--wide,
.dialog__panel--double,
.dialog--hasGlobalHeader__panel {
  display: inline-block;
  width: 600px;
  margin: auto;
  vertical-align: middle
}

.dialog__panel--thin {
  width: 480px
}

.dialog__panel--wide {
  width: 640px
}

.dialog__panel--double {
  width: 900px
}

.dialog--hasGlobalHeader__panel {
  width: 100%
}

.dialog__panel__head,
.dialog--hasGlobalHeader__panel__head {
  position: relative;
  padding: 40px 30px 30px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  background: #fff;
  font-size: 16px
}

.dialog__panel__head section,
.dialog--hasGlobalHeader__panel__head section {
  margin: 0 auto;
  padding: 10px;
  color: #999
}

.dialog__panel__head h1,
.dialog--hasGlobalHeader__panel__head h1 {
  line-height: 1.6
}

.dialog__panel__head hr,
.dialog--hasGlobalHeader__panel__head hr {
  margin: 2em auto
}

.dialog__panel__head p,
.dialog--hasGlobalHeader__panel__head p {
  font-size: 13px;
  line-height: 1.4
}

.dialog__panel__head p a,
.dialog--hasGlobalHeader__panel__head p a {
  text-decoration: underline
}

.dialog--hasGlobalHeader__panel__head {
  padding: 60px 0 40px;
  border-radius: 0;
  font-weight: normal
}

.dialog--hasGlobalHeader__panel__head section {
  width: 800px;
  margin: 0 auto;
  color: #999
}

.dialog--hasGlobalHeader__panel__head section .usage__title {
  padding: 20px 0;
  color: #00a0dd
}

.dialog--hasGlobalHeader__panel__head section .usage__detail {
  -webkit-transition: all .4s ease;
  width: 300%;
  margin: 0 -100%;
  padding: 20px 100%;
  background-color: #eee;
  transition: all .4s ease
}

.dialog--hasGlobalHeader__panel__head section .usage__detail .usage__detail__step {
  display: table-cell;
  width: 33%;
  text-align: center
}

.dialog--hasGlobalHeader__panel__head section .usage__detail .usage__detail__step div {
  padding: 10px 20px 0 30px;
  font-size: 13px;
  line-height: 1.5em;
  text-align: left
}

.dialog--hasGlobalHeader__panel__head h1 {
  line-height: 1.6
}

.dialog--hasGlobalHeader__panel__head hr {
  width: 580px;
  margin: 2em auto
}

.dialog--hasGlobalHeader__panel__head p {
  font-size: 13px
}

.dialog--hasGlobalHeader__panel__head .form {
  width: 400px;
  margin: 0 auto;
  padding: 40px 0 0
}

.dialog__panel__main,
.dialog--hasGlobalHeader__panel__main {
  padding: 40px;
  border-top: solid 1px #eee;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #f8f8f8
}

.dialog__panel__main p,
.dialog--hasGlobalHeader__panel__main p {
  padding: 10px 30px;
  color: #555;
  font-size: 13px;
  line-height: 1.6;
  text-align: left
}

.dialog--hasGlobalHeader__panel__main {
  min-width: 800px;
  border-radius: 0
}

.dialog__panel__main+.dialog__panel__main,
.dialog--hasGlobalHeader__panel__main+.dialog__panel__main,
.dialog__panel__main+.dialog--hasGlobalHeader__panel__main,
.dialog--hasGlobalHeader__panel__main+.dialog--hasGlobalHeader__panel__main {
  margin-top: -15px
}

.dialog__panel__main--double {
  display: table;
  background: #f8f8f8
}

.dialog__panel__main--double__content {
  display: table-cell;
  width: 450px;
  padding: 10px 20px
}

.dialog__panel__main--double__content:first-child {
  padding: 15px 60px 15px 40px;
  vertical-align: middle
}

.dialog__panel__main--double__content:last-child {
  position: relative;
  background: #f2f2f2
}

.dialog__panel__main--double__content:last-child:before {
  display: block;
  z-index: 2;
  position: absolute;
  top: 60px;
  left: -20px;
  height: 210px;
  border: solid 120px transparent;
  border-right: solid 20px #f2f2f2;
  border-left: solid 1px transparent;
  content: ''
}

.dialog__panel__foot {
  padding: 30px 40px;
  border-top: solid 1px #eee;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  background: #f8f8f8
}

.dialog__panel__extra {
  padding: 10px 0;
  color: #fff;
  font-size: 10px;
  text-align: right
}

.dialog__panel__extra a,
.dialog__panel__extra a:link,
.dialog__panel__extra a:hover,
.dialog__panel__extra a:visited,
.dialog__panel__extra a:active {
  color: #fff
}

.dialog__panel__close {
  position: absolute;
  top: 10px;
  right: 10px
}

.dialog__panel__close:before {
  color: #ccc;
  font-size: 16px
}

.dlg-Wovn {
  display: none;
  margin: 30px 0 0
}

.dlg-Wovn_list {
  padding: 15px 3px 0;
  text-align: center
}

.dlg-Wovn_item {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  list-style: none;
  text-align: center;
  cursor: default
}

.dlg-Wovn_item:first-child {
  padding-left: 0
}

.dlg-Wovn_item:last-child {
  padding-right: 0
}

.dlg-Wovn_switch {
  padding: 3px 5px;
  border-radius: 3px
}

.dlg-Wovn_switch.selected {
  border: solid 1px #eee;
  background: #f8f8f8
}

.dlg-Wovn_switch:hover {
  text-decoration: underline
}

.header__inner {
  -webkit-transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.58, 1);
  -webkit-transform: translateY(0);
  z-index: 10000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 42px;
  transform: translateY(0);
  transition: -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.58, 1);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.58, 1);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.58, 1), -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.58, 1);
  transition: transform 0.45s cubic-bezier(0.23, 1, 0.58, 1), -webkit-transform 0.45s cubic-bezier(0.23, 1, 0.58, 1)
}

.header__inner .navi {
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
  position: relative;
  align-items: center;
  width: 1056px;
  height: 56px;
  margin: 0 auto
}

.header__inner .navi__logo {
  width: 166px;
  margin: 0 auto 0 16px;
  padding-top: 3px
}

.header__inner .navi__logo img {
  -ms-interpolation-mode: bicubic;
  max-width: 100%;
  height: auto;
  vertical-align: top
}

.header__inner .navi__links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex
}

.header__inner .navi__links li {
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 24px
}

.header__inner .navi__links li a {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center
}

.header__inner .navi__links li a .icon {
  display: block;
  z-index: 1;
  position: relative;
  width: 28px;
  height: 28px;
  background-size: 28px 28px;
  font-size: 0
}

.header__inner .navi__links li a span {
  -webkit-font-feature-settings: "palt", "kern"0;
  -webkit-font-kerning: none;
  margin-left: 5px;
  color: #232324;
  color: var(--text-color);
  font-feature-settings: "palt", "kern"0;
  font-kerning: none;
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 1;
  word-break: keep-all
}

.header__inner .navi__links li.item--newContract .icon {
  background-image: url(./../../stories/img/icon_new-contract.svg)
}

.header__inner .navi__links li.item--addressChange .icon {
  background-image: url(./../../stories/img/icon_address-change.svg)
}

.header__inner .navi__links li.item--BSContract .icon {
  background-image: url(./../../stories/img/icon_bs-contract.svg)
}

.header__inner .navi-bg {
  -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateX(-50%);
  -webkit-transition: width .1s ease-out, height .1s ease-out;
  z-index: 0;
  position: absolute;
  top: 42px;
  left: 50%;
  width: 1056px;
  height: 56px;
  transform: translateX(-50%);
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
  transition: width .1s ease-out, height .1s ease-out
}

.nol-common-footer {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  max-width: 960px;
  margin: 0;
  outline: none;
  color: #232324;
  color: var(--text-color);
  font-size: 16px
}

.nol-common-footer *,
.nol-common-footer *:before,
.nol-common-footer *:after {
  -webkit-box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -webkit-font-feature-settings: "palt";
  box-sizing: border-box;
  margin: 0;
  outline: none;
  font-feature-settings: "palt";
  letter-spacing: 0
}

.nol-common-footer a {
  color: #232324;
  color: var(--link-color);
  text-decoration: none
}

.nol-common-footer {
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  background: #f0f0f0;
  background: var(--sub-bg-color)
}

.nol-common-footer-wrapper {
  width: 100%;
  overflow-x: hidden;
  background: #f0f0f0;
  background: var(--sub-bg-color)
}

.nol-common-footer-group {
  display: inline-block;
  width: 450px;
  margin-left: 50px;
  vertical-align: top
}

.nol-common-footer-group:nth-of-type(1) {
  margin-left: 0
}

.nol-common-footer-logo {
  z-index: 1;
  position: relative;
  width: 61px;
  height: 18px;
  background-image: url(./../../stories/img/common/logo_nhk_type_gray.svg);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 61px 18px;
  text-indent: -9999px
}

.nol-common-footer-logo:hover {
  background-image: url(./../../stories/img/common/logo_nhk_type_black.svg)
}

.nol-common-footer-logo.plus {
  width: 78px;
  height: 18px;
  background-image: url(./../../stories/img/common/logo_nhk_plus_type_gray.svg);
  background-size: 78px 18px
}

.nol-common-footer-logo.plus:hover {
  background-image: url(./../../stories/img/common/logo_nhk_plus_type_black.svg)
}

.nol-common-footer-logo.jsr {
  width: 175px;
  height: 18px;
  background-image: url(./../../stories/img/common/logo_nhk_jsr_type_gray.svg);
  background-size: 175px 20px
}

.nol-common-footer-logo.jsr:hover {
  background-image: url(./../../stories/img/common/logo_nhk_jsr_type_black.svg)
}

.nol-common-footer-logo a {
  display: block;
  width: 100%;
  height: 100%
}

.nol-common-footer-items {
  z-index: 1;
  position: relative;
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid #e5e5ea;
  border-top: 1px solid var(--border-color)
}

.nol-common-footer-item {
  display: inline-block;
  margin: 0 37px 0 0;
  padding: 13px 0;
  color: #737373;
  color: var(--logo-color);
  font-size: 12px;
  font-weight: bold
}

.nol-common-footer-item a {
  color: #737373;
  color: var(--logo-color)
}

.nol-common-footer-item a:hover {
  color: #232324;
  color: var(--text-color)
}

.nol-common-footer-copyright {
  display: block;
  width: 100%;
  margin-top: 60px;
  color: #6e6e6f;
  color: var(--sub-text-color);
  font-size: 12px;
  line-height: 1.4
}

@font-face {
  src: url("../fonts/icomoon.eot?jc7bmv");
  src: url("../fonts/icomoon.eot?jc7bmv#iefix") format("embedded-opentype"), url("../fonts/icomoon.ttf?jc7bmv") format("truetype"), url("../fonts/icomoon.woff?jc7bmv") format("woff"), url("../fonts/icomoon.svg?jc7bmv#icomoon") format("svg");
  font-family: 'icomoon';
  font-style: normal;
  font-weight: normal
}

[class^="icon-"],
[class*=" icon-"] {
  speak: none;
  -webkit-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga"1;
  -webkit-font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 2px 3px 0;
  font-family: 'icomoon' !important;
  font-feature-settings: "liga";
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-variant-ligatures: discretionary-ligatures;
  font-weight: normal;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none
}

.icon-users:before {
  content: "\e972"
}

.icon-settings:before {
  content: "\e934"
}

.icon-document:before {
  content: "\e939"
}

.icon-function:before {
  content: "\e900"
}

.icon-guide2:before {
  content: "\e901"
}

.icon-calendar:before {
  content: "\e932"
}

.icon-bullhorn:before {
  content: "\e902"
}

.icon-pen:before {
  content: "\e903"
}

.icon-forwarding--disabled:before {
  content: "\e904"
}

.icon-forwarding:before {
  content: "\e905"
}

.icon-alertBell--disabled:before {
  content: "\e906"
}

.icon-alertBell:before {
  content: "\e907"
}

.icon-payment:before {
  content: "\e908"
}

.icon-bulkMail:before {
  content: "\e909"
}

.icon-upload:before {
  content: "\e90a"
}

.icon-dots:before {
  content: "\e90b"
}

.icon-return:before {
  content: "\e90c"
}

.icon-destroy:before {
  content: "\e90d"
}

.icon-key:before {
  content: "\e90e"
}

.icon-help:before {
  content: "\e90f"
}

.icon-plus:before {
  content: "\e910"
}

.icon-close:before {
  content: "\e911"
}

.icon-check:before {
  content: "\e912"
}

.icon-gear:before {
  content: "\e913"
}

.icon-print:before {
  content: "\e914"
}

.icon-bell:before {
  content: "\e915"
}

.icon-guide:before {
  content: "\e916"
}

.icon-back:before {
  content: "\e917"
}

.icon-search:before {
  content: "\e918"
}

.icon-mail:before {
  content: "\e919"
}

.icon-link:before {
  content: "\e91a"
}

.icon-trash:before {
  content: "\e91b"
}

.icon-note:before {
  content: "\e91c"
}

.icon-stop:before {
  content: "\e91d"
}

.icon-template:before {
  content: "\e91e"
}

.icon-templates:before {
  content: "\e91f"
}

.icon-download:before {
  content: "\e920"
}

.icon-cloud:before {
  content: "\e921"
}

.icon-zoomout:before {
  content: "\e922"
}

.icon-zoomup:before {
  content: "\e923"
}

.icon-hint:before {
  content: "\e924"
}

.icon-telephone:before {
  content: "\e925"
}

.icon-downloads:before {
  content: "\e926"
}

.icon-bar:before {
  content: "\e927"
}

.icon-pipe:before {
  content: "\e928"
}

.icon-dot:before {
  content: "\e929"
}

.icon-triangle:before {
  content: "\e92a"
}

.icon-rhombus:before {
  content: "\e92b"
}

.icon-star:before {
  content: "\e92c"
}

.icon-finishDoc:before {
  content: "\e92d"
}

.icon-next:before {
  content: "\e92e"
}

.icon-facebook:before {
  content: "\e938"
}

.icon-lock:before {
  content: "\e92f"
}

.icon-headset:before {
  content: "\e930"
}

.icon-bubble:before {
  content: "\e931"
}

.icon-money:before {
  content: "\e933"
}

.icon-facebook3:before {
  content: "\e935"
}

.icon-twitter3:before {
  content: "\e936"
}

.icon-twitter:before {
  content: "\e937"
}

[class^="icon-"],
[class*=" icon-"] {
  font-size: 13px
}

.icon--biggest[class^="icon-"],
.icon--biggest[class*=" icon-"] {
  -webkit-transition: all .3s;
  display: inline-block;
  width: 35px;
  height: 35px;
  margin: 0 15px 0 5px;
  overflow: hidden;
  border: solid 3px #eee;
  border-radius: 50%;
  background: #fff;
  color: #ccc;
  font-size: 18px;
  text-align: center;
  vertical-align: middle;
  transition: all .3s
}

.icon--biggest[class^="icon-"]:before,
.icon--biggest[class*=" icon-"]:before {
  display: inline-block;
  padding: 3px
}

[class*="button"]:hover .icon--biggest[class^="icon-"],
[class*="button"]:hover .icon--biggest[class*=" icon-"] {
  -webkit-box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0px 2px 1px 0 rgba(0, 0, 0, 0.1)
}

.icon--xxlarge[class*="icon-"] {
  display: inline-block;
  width: 105px;
  height: 125px;
  overflow: hidden;
  color: #eee;
  font-size: 80px;
  text-align: center;
  vertical-align: middle
}

.stories__carousel {
  height: 400px;
  overflow-y: hidden
}

.stories__carousel__item {
  position: relative;
  width: 1200px;
  background: #000
}

.stories__carousel__item__title,
.stories__carousel__item__subtitle {
  z-index: 2;
  position: absolute;
  left: 0;
  width: 100%;
  color: #fff;
  font-weight: bold;
  text-align: center
}

.stories__carousel__item__title {
  top: 40%;
  font-size: 40px
}

.stories__carousel__item__subtitle {
  top: 60%;
  font-size: 20px
}

.stories__carousel__item__image {
  z-index: 1;
  position: relative
}

.stories__carousel__item__image--pc {
  display: block;
  width: 1200px;
  opacity: 0.8
}

.stories__carousel__item__image--pc img {
  width: 1200px
}

.stories__carousel__item__image--sp {
  display: none
}

.stories__hero {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  top: -30px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 590px;
  overflow: hidden
}

.stories__hero img {
  left: calc(50% - 688px);
  width: 1376px
}

.stories__hero--pc {
  display: block;
  position: absolute
}

.stories__hero--sp {
  display: none
}

.stories__hero__bg--pc {
  -webkit-filter: blur(30px);
  z-index: -1;
  position: absolute;
  top: -50px;
  left: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: 150%;
  filter: blur(30px);
  opacity: 1
}

.stories__staff-message-box {
  display: block;
  max-width: 960px;
  margin: 0 auto 56px;
  padding: 40px 48px;
  background-color: #f0f0f0;
  background-color: var(--sub-bg-color)
}

.stories__staff-message-box p {
  margin: 0 0 20px;
  font-size: 20px;
  line-height: 1.6
}

.stories__staff-message-box p:last-child {
  margin: 0
}

.stories__details {
  width: 100%;
  margin: 0 auto
}

.stories__details__header,
.stories__details__article {
  width: 960px
}

.stories__details__header {
  margin: 0px auto 60px
}

.stories__details__header .title--h1,
.stories__details__header .title--h1--no-line {
  margin-bottom: 24px;
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5
}

.stories__details__header .title--h1 span,
.stories__details__header .title--h1--no-line span {
  border-bottom: solid
}

.stories__details__header .title--h1 span.accent-color--blue,
.stories__details__header .title--h1--no-line span.accent-color--blue {
  border-color: #4ec2ff;
  border-color: var(--accent-blue)
}

.stories__details__header .title--h1 span.accent-color--yellow,
.stories__details__header .title--h1--no-line span.accent-color--yellow {
  border-color: #D1D200;
  border-color: var(--accent-yellow)
}

.stories__details__header .title--h1 span.accent-color--pink,
.stories__details__header .title--h1--no-line span.accent-color--pink {
  border-color: #FF8082;
  border-color: var(--accent-pink)
}

.stories__details__header .title--h1 .br--pc,
.stories__details__header .title--h1--no-line .br--pc {
  display: block
}

.stories__details__header .title--h1 .br--sp,
.stories__details__header .title--h1--no-line .br--sp {
  display: none
}

.stories__details__header .title--h1--no-line,
.stories__details__header .title--h1--no-line--no-line {
  text-align: center
}

.stories__details__header__staff-message {
  margin: 0 0 60px;
  text-align: center
}

.stories__details__header__staff-message img {
  margin: 0 0 24px
}

.stories__details__header__staff-message p {
  margin: 0 0 40px;
  font-size: 20px;
  line-height: 1.6
}

.stories__details__header__staff-message p:last-child {
  margin: 0
}

.stories__details__header__tags {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: 1;
  flex-flow: row wrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 16px
}

.stories__details__interviewee {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 780px;
  margin: 40px 0;
  margin: 0 auto;
  margin-bottom: 56px;
  padding: 40px 48px;
  border: 1px solid #e5e5ea;
  border: 1px solid var(--border-color);
  border-radius: 4px
}

.stories__details__interviewee img {
  width: 120px
}

.stories__details__interviewee__person-details {
  margin-left: 32px
}

.stories__details__interviewee__person-details h3 {
  margin-bottom: 12px;
  font-size: 20px
}

.stories__details__interviewee__person-details p {
  font-size: 20px;
  line-height: 1.5
}

.stories__details__article {
  margin: 0 auto 40px
}

.stories__details__article__text {
  margin-bottom: 40px
}

.stories__details__article__text .title--h2 {
  margin: 0 0 32px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.6
}

.stories__details__article__text .title--h2 span {
  display: block;
  padding-left: 16px;
  border-left: solid
}

.stories__details__article__text .title--h2 span.accent-color--blue {
  border-color: #4ec2ff;
  border-color: var(--accent-blue)
}

.stories__details__article__text .title--h2 span.accent-color--yellow {
  border-color: #D1D200;
  border-color: var(--accent-yellow)
}

.stories__details__article__text .title--h2 span.accent-color--pink {
  border-color: #FF8082;
  border-color: var(--accent-pink)
}

.stories__details__article__text p {
  margin: 24px 0;
  font-size: 20px;
  line-height: 1.6
}

.stories__details__article__text p.is--caption {
  margin-top: 8px;
  font-size: 16px
}

.stories__details__article__text p.is--box {
  padding: 16px;
  border: 1px solid #e5e5ea;
  border: 1px solid var(--border-color);
  border-radius: 4px
}

.stories__details__article .related-link {
  margin: 40px auto
}

.stories__details__article .related-link a {
  display: block;
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid #c7c7cc;
  border-radius: 5px;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  word-break: break-word
}

.stories__details__article .related-link a:hover {
  opacity: .6
}

.stories__details__article .related-link a:last-child {
  margin: 0
}

.stories__details__article .related-link a:after {
  -webkit-transform: rotate(45deg);
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 2px 10px;
  transform: rotate(45deg);
  border: 0;
  border-top: 2px solid #232324;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid #232324;
  border-right: 2px solid var(--text-color);
  content: ""
}

.stories__details__images {
  width: 100%;
  margin-bottom: 40px
}

.stories__details__images figure {
  width: 100%
}

.stories__details__images figure .images__container {
  -webkit-transition: width 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: relative;
  width: 92vw;
  max-width: 1520px;
  height: 57.87vw;
  min-height: 167.95px;
  max-height: 630px;
  overflow: hidden;
  transition: width 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.stories__details__images figure .images__container img {
  -o-object-fit: cover;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.stories__details__images figure .images__container .pc {
  display: block
}

.stories__details__images figure .images__container .sp {
  display: none
}

.stories__details__images figure figcaption {
  max-width: 960px;
  margin: 12px auto 0;
  font-size: 16px
}

.stories__details .images--left figure .images__container {
  border-radius: 0 10px 10px 0
}

.stories__details .images--left figure .images__container img {
  left: 0;
  border-radius: 0 10px 10px 0
}

.stories__details .images--right figure .images__container {
  margin-left: auto;
  border-radius: 10px 0 0 10px
}

.stories__details .images--right figure .images__container img {
  right: 0;
  border-radius: 10px 0 0 10px
}

.stories__details__talk {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto 40px
}

.stories__details__talk__wrapper {
  width: calc(93.33vw - 48px);
  max-width: 1152px;
  margin: 40px auto
}

.stories__details__talk .talk__person {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-flow: column;
  width: 120px
}

.stories__details__talk .talk__person__img {
  position: absolute
}

.stories__details__talk .talk__person__img .person__img {
  width: 120px;
  height: 120px;
  border: 1px solid #232324;
  border: 1px solid var(--box-color-talk);
  border-radius: 60px
}

.stories__details__talk .talk__person__detail ul {
  width: 120px;
  margin: 8px auto
}

.stories__details__talk .talk__person__detail ul li {
  font-size: 16px;
  line-height: 1.3;
  text-align: center
}

.stories__details__talk .talk__balloon {
  position: relative;
  width: 100%;
  width: calc(100% - 328px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: calc(100% - 328px);
  height: 100%;
  padding: 24px;
  border: 1px solid #232324;
  border: 1px solid var(--box-color-talk);
  border-radius: 16px;
  background-color: #fff;
  background-color: var(--balloon-color)
}

.stories__details__talk .talk__balloon::before,
.stories__details__talk .talk__balloon::after {
  display: block;
  position: absolute;
  top: 19px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  content: ''
}

.stories__details__talk .talk__balloon .title--h2 {
  font-size: 20px;
  line-height: 1.5
}

.stories__details__talk .talk__balloon .title--h3 {
  font-size: 20px;
  line-height: 1.6
}

.stories__details__talk .talk__balloon .question--h2 {
  font-size: 20px;
  line-height: 1.6
}

.stories__details__talk .talk__balloon p {
  font-size: 20px;
  line-height: 1.6
}

.stories__details__talk .talk__balloon a {
  font-size: 20px
}

.stories__details__talk .talk__balloon figure {
  margin: 16px 0 0;
  text-align: center
}

.stories__details__talk .talk__balloon figure img {
  margin-bottom: 12px
}

.stories__details__talk .talk__balloon figure figcaption .image__caption__text {
  font-size: 16px
}

.stories__details__talk .talk__balloon figure figcaption a {
  word-break: break-all
}

.stories__details__talk .talk__balloon__bg-gray-area {
  margin: 16px 0;
  padding: 24px;
  background-color: #f0f0f0;
  background-color: var(--sub-bg-color)
}

.stories__details__talk .talk__balloon__bg-gray-area p {
  margin-bottom: 24px
}

.stories__details__talk .talk__balloon__bg-gray-area ul {
  padding-left: 20px
}

.stories__details__talk .talk__balloon__bg-gray-area ul li {
  margin-bottom: 16px;
  font-size: 22px;
  list-style: disc
}

.stories__details__talk .talk__balloon__bg-gray-area ul li p {
  margin-bottom: 0px
}

.stories__details__talk .talk__balloon__bg-gray-area ul li:last-child {
  margin-bottom: 0
}

.stories__details .talk--left .talk__balloon {
  margin-left: 44px
}

.stories__details .talk--left .talk__balloon::before {
  left: -20px;
  border-right: 20px solid #232324;
  border-right: 20px solid var(--box-color-talk)
}

.stories__details .talk--left .talk__balloon::after {
  left: -19px;
  border-right: 20px solid #fff;
  border-right: 20px solid var(--balloon-color)
}

.stories__details .talk--right {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse
}

.stories__details .talk--right .talk__balloon {
  margin-right: 44px
}

.stories__details .talk--right .talk__balloon::before {
  right: -20px;
  border-left: 20px solid #232324;
  border-left: 20px solid var(--box-color-talk)
}

.stories__details .talk--right .talk__balloon::after {
  right: -19px;
  border-left: 20px solid #fff;
  border-left: 20px solid var(--balloon-color)
}

.stories__image--center {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px
}

.stories__image--center .image__container {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-transition: width 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 93.33vw;
  max-width: 1200px;
  height: 52.49vw;
  max-height: 675px;
  margin: 0 40px;
  overflow: hidden;
  border-radius: 10px;
  transition: width 0.7s cubic-bezier(0.215, 0.61, 0.355, 1)
}

.stories__image--center .image__container div {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  content: ""
}

.stories__image--center .image__container .pc {
  display: block
}

.stories__image--center .image__container .sp {
  display: none
}

.stories__image--center .image__caption {
  width: 93.33vw;
  max-width: 960px;
  margin: 12px auto 0
}

.stories__image--center .image__caption__text {
  font-size: 16px
}

.stories__image--center.is-wide .image__caption {
  max-width: 1152px
}

.stories__image--double {
  margin-bottom: 40px
}

.stories__image--double .images__container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  width: 80%;
  margin: 16px auto;
  padding: 16px;
  border: 1px solid #ccc;
  border-radius: 8px
}

.stories__image--double .images__container__left {
  width: 160px
}

.stories__image--double .images__container__left img {
  width: 160px;
  height: 108.56px
}

.stories__image--double .images__container__right {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex: 1;
  flex-flow: column;
  margin-left: 8px
}

.stories__image--double .images__container__right__title {
  font-size: 18px;
  font-weight: bold
}

.stories__image--double .images__container__right__description {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.25
}

.stories__tagline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  margin: 0 auto
}

.stories__tagline--imageTagline {
  display: block;
  z-index: 1;
  position: relative;
  width: 640px;
  height: 47.25px;
  margin: 96px auto 120px;
  background-image: url(./../../stories/img/common/image_tagline_black.svg);
  background-image: var(--image-tagline);
  background-repeat: no-repeat;
  background-size: 640px 47.25px;
  font-size: 0
}

.stories__media {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px
}

.stories__media .media-contents {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 32px;
  padding: 20px 0;
  border-top: 1px solid #e5e5ea;
  border-bottom: 1px solid #e5e5ea;
  background-color: #1f1f20;
  background-color: #1f1f20
}

.stories__media .media-contents .movie-iframe {
  width: 960px;
  height: 540px
}

.stories__media .media-contents .contents-image {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin: 0;
  padding: 0;
  font-size: 16px;
  text-decoration: none
}

.stories__media .media-contents .contents-image:hover {
  cursor: pointer
}

.stories__media .media-contents .contents-image .img-wrapper {
  display: inline-block;
  width: 100%;
  height: 100%
}

.stories__media .media-contents .contents-image .img-wrapper .play-button {
  display: inline-block;
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-decoration: none
}

.stories__media .media-contents .contents-image .img-wrapper .play-button:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: absolute;
  top: 33%;
  left: 36%;
  width: 33%;
  height: 36%;
  margin: 0;
  background-image: url(./../../stories/img/common/icon_play.svg);
  background-position: 50%;
  background-repeat: no-repeat;
  content: ""
}

.stories__media .media-contents .contents-image .img-wrapper .thumbnail {
  -webkit-box-shadow: none;
  z-index: 0;
  width: 960px;
  height: 540px;
  border-radius: 10px;
  box-shadow: none;
  vertical-align: bottom
}

.stories__media__details {
  width: 980px
}

.stories__media__details h2 {
  margin-bottom: 24px;
  font-size: 24px
}

.stories__media__details p {
  font-size: 20px
}

.stories__others {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  padding: 0
}

.stories__others .headline-component {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin-bottom: 24px
}

.stories__others .headline-title {
  z-index: 2;
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding-right: 10px;
  background: #fafafa;
  background: var(--bg-color);
  font-size: 24px;
  font-weight: 700;
  line-height: 40px
}

.stories__others .headline-title.accent-color--blue {
  color: #4ec2ff;
  color: var(--accent-blue)
}

.stories__others .headline-title.accent-color--yellow {
  color: #D1D200;
  color: var(--accent-yellow)
}

.stories__others .headline-title.accent-color--pink {
  color: #FF8082;
  color: var(--accent-pink)
}

.stories__others .headline-afterline {
  z-index: 1;
  position: absolute;
  top: 19px;
  left: 0;
  width: 100%;
  border-top: 2px solid;
  content: ""
}

.stories__others .headline-afterline.accent-color--blue {
  border-color: #4ec2ff;
  border-color: var(--accent-blue)
}

.stories__others .headline-afterline.accent-color--yellow {
  border-color: #D1D200;
  border-color: var(--accent-yellow)
}

.stories__others .headline-afterline.accent-color--pink {
  border-color: #FF8082;
  border-color: var(--accent-pink)
}

.stories__others .blog-pager {
  margin-top: 24px
}

.stories__others .blog-pager .page {
  width: 100%;
  font-size: 16px;
  text-align: center
}

.stories__others .blog-pager .more {
  width: 100%;
  margin-top: 10px
}

.stories__others .blog-pager .more:hover {
  cursor: pointer;
  opacity: .6
}

.stories__others .blog-pager .more .button {
  display: block;
  width: 335px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #c7c7cc;
  border: 1px solid var(--box-color);
  border-radius: 25px;
  background-color: #efefef;
  background-color: #efefef;
  color: #232324;
  color: var(--text-color);
  font-size: 16px;
  text-align: center
}

.stories__cards {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
  width: 960px;
  margin: 0 auto
}

.stories__cards.is--nhk .stories__card.is--nhk {
  display: block
}

.stories__cards.is--all .stories__card.is--normal {
  display: none
}

.stories__card {
  -webkit-transform: scale(1);
  -webkit-transition: all 0.15s ease-in-out;
  display: block;
  width: 304px;
  margin: 0 24px 24px 0;
  transform: scale(1);
  border: 1px solid #c7c7cc;
  border: 1px solid var(--box-color);
  border-radius: 4px;
  transition: all 0.15s ease-in-out
}

.stories__card:nth-child(3n) {
  margin-right: 0
}

.stories__card:hover {
  opacity: 0.75
}

.stories__card__image {
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 4px 4px 0 0 / 4px 4px 0 0
}

.stories__card__image img {
  -o-object-fit: fill;
  width: 100%;
  height: auto;
  object-fit: fill;
  border-radius: 4px 4px 0 0 / 4px 4px 0 0
}

.stories__card__title {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: normal;
  letter-spacing: .1rem
}

.stories__vertical-line {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin: 56px auto 60px
}

.stories__vertical-line .vertical-line-component {
  -webkit-transition: height .5s ease-out;
  display: block;
  display: inline-block;
  width: 2px;
  height: 114px;
  content: "";
  transition: height .5s ease-out
}

.stories__vertical-line .accent-color--blue {
  background-color: #4ec2ff;
  background-color: var(--accent-blue)
}

.stories__vertical-line .accent-color--yellow {
  background-color: #D1D200;
  background-color: var(--accent-yellow)
}

.stories__vertical-line .accent-color--pink {
  background-color: #FF8082;
  background-color: var(--accent-pink)
}

.stories__introduction {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60px;
  padding: 0
}

.stories__introduction img {
  width: 154px
}

.stories__introduction__message {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  margin: 48px auto
}

.stories__introduction__message p {
  width: 100%;
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.6
}

.stories__introduction__message .title--h2--underline {
  margin-bottom: 24px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.6
}

.stories__introduction__message .title--h2--underline span {
  border-bottom: solid;
  border-width: 4px
}

.stories__introduction__message .title--h2--underline .accent-color--blue {
  border-color: #4ec2ff;
  border-color: var(--accent-blue)
}

.stories__introduction__message .title--h2--underline .accent-color--yellow {
  border-color: #D1D200;
  border-color: var(--accent-yellow)
}

.stories__introduction__message .title--h2--underline .accent-color--pink {
  border-color: #FF8082;
  border-color: var(--accent-pink)
}

.stories__introduction__cards {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: space-between;
  max-width: 780px
}

.stories__introduction__card {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 780px;
  margin: 0 auto 24px;
  padding: 40px 48px;
  border-radius: 5px;
  background-color: #fff;
  background-color: var(--card-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2)
}

.stories__introduction__card:hover img,
.stories__introduction__card:hover .card__details {
  opacity: .6
}

.stories__introduction__card img {
  width: 266px
}

.stories__introduction__card .card__details {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  margin-left: 16px
}

.stories__introduction__card .card__details h3 {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  font-size: 24px;
  letter-spacing: 0em
}

.stories__introduction__card .card__details span {
  word-wrap: break-word;
  display: block;
  width: 100%;
  font-size: 20px;
  line-height: 1.5;
  white-space: normal;
  word-break: break-all
}

.stories__introduction .card--small {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row;
  align-items: stretch;
  justify-content: flex-start;
  max-width: 378px;
  margin: 0;
  padding: 40px 20px
}

.stories__introduction .card--small .card__icons {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center
}

.stories__introduction .card--small .card__details {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  -webkit-box-align: start;
  -ms-flex-align: start;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  justify-content: flex-start
}

.stories__introduction .card--small img {
  width: 80px;
  margin: 0 8px
}

.stories__introduction .base-link {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  margin: 24px 0 32px;
  padding: 0;
  color: #232324;
  color: var(--text-color);
  letter-spacing: 0em;
  text-decoration: none;
  text-decoration: underline;
  cursor: pointer
}

.stories__introduction .base-link .br--sp {
  display: none
}

.stories__introduction .arrow-link {
  font-size: 24px;
  font-weight: 700;
  text-decoration: none
}

.stories__introduction .arrow-link:after {
  -webkit-transform: rotate(45deg);
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 0 2px 10px;
  transform: rotate(45deg);
  border: 0;
  border-top: 2px solid #232324;
  border-top: 2px solid var(--text-color);
  border-right: 2px solid #232324;
  border-right: 2px solid var(--text-color);
  content: ""
}

.stories__introduction .arrow-link:hover {
  color: var(--link-hover-color);
  cursor: pointer
}

.stories__introduction .arrow-link:hover:after {
  border-top: 2px solid rgba(35, 35, 36, 0.6);
  border-top: 2px solid var(--link-hover-color);
  border-right: 2px solid rgba(35, 35, 36, 0.6);
  border-right: 2px solid var(--link-hover-color)
}

.stories__introduction__reception-fee-message {
  font-size: 20px;
  font-weight: bold
}

.stories__photo {
  display: none
}

.header-display-none {
  position: relative
}

.header-display-none .stories__hidden {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

.banner-contents {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row nowrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 864px;
  max-height: 168px;
  margin-top: 24px;
  border-radius: 4px;
  background-color: #FFF
}

.banner-contents .banner-color,
.banner-contents .banner-color::after {
  height: 168px;
  background-color: #4ec2ff;
  line-height: 70px
}

.banner-contents .banner-text {
  max-width: 502px;
  padding: 40px 16px 40px 40px
}

.banner-contents .banner-text h3 {
  margin-bottom: 16px;
  font-size: 20px
}

.banner-contents .banner-text div {
  margin-bottom: 8px;
  font-size: 16px
}

.banner-contents .banner-text small {
  font-size: 14px
}

.banner-contents .banner-color {
  z-index: 1;
  position: relative;
  left: 50px;
  left: 0px;
  width: 100%;
  max-width: 270px;
  margin: 0 0 0 auto;
  padding: 0 24px 0 16px
}

.banner-contents .banner-color img {
  margin: 25px 54px 26px 8px
}

.banner-contents .banner-color::after {
  -webkit-transform: skewX(-25deg);
  z-index: -999;
  position: absolute;
  top: 0;
  left: -40px;
  width: 140px;
  transform: skewX(-25deg);
  border-bottom-left-radius: 80px;
  content: ""
}

.text-attention-color {
  color: #c00
}

.animation.fade-in {
  -webkit-transform: translateY(30px);
  -webkit-transition: opacity .8s, -webkit-transform .8s;
  transform: translateY(30px);
  opacity: 0;
  transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, transform .8s;
  transition: opacity .8s, transform .8s, -webkit-transform .8s
}

.animation.fade-in.is-inview {
  -webkit-transform: translateY(0);
  -webkit-transition-delay: .4s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .4s
}

.animation.fade-in-reverse {
  -webkit-transform: translateY(-30px);
  -webkit-transition: opacity .8s, -webkit-transform .8s;
  transform: translateY(-30px);
  opacity: 0;
  transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, transform .8s;
  transition: opacity .8s, transform .8s, -webkit-transform .8s
}

.animation.fade-in-reverse.is-inview {
  -webkit-transform: translateY(0);
  -webkit-transition-delay: .4s;
  transform: translateY(0);
  opacity: 1;
  transition-delay: .4s
}

.animation.slide-in-left {
  -webkit-transform: translateX(-100px);
  -webkit-transition: opacity .8s, -webkit-transform .8s;
  transform: translateX(-100px);
  opacity: 0;
  transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, transform .8s;
  transition: opacity .8s, transform .8s, -webkit-transform .8s
}

.animation.slide-in-left.is-inview {
  -webkit-transform: translateX(0);
  -webkit-transition-delay: .4s;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .4s
}

.animation.slide-in-right {
  -webkit-transform: translateX(100px);
  -webkit-transition: opacity .8s, -webkit-transform .8s;
  transform: translateX(100px);
  opacity: 0;
  transition: opacity .8s, -webkit-transform .8s;
  transition: opacity .8s, transform .8s;
  transition: opacity .8s, transform .8s, -webkit-transform .8s
}

.animation.slide-in-right.is-inview {
  -webkit-transform: translateX(0);
  -webkit-transition-delay: .4ss;
  transform: translateX(0);
  opacity: 1;
  transition-delay: .4ss
}

.animation.bow {
  display: block;
  position: relative;
  width: 154px;
  height: 131px
}

.animation.bow.is-guide {
  width: 308px;
  height: 262px
}

.animation.bow.is-guide img {
  width: 308px;
  height: 262px
}

.animation.bow .bow1,
.animation.bow .bow2,
.animation.bow .bow3 {
  position: absolute;
  top: 0;
  left: 0
}

.animation.bow.is-inview .bow1 {
  -webkit-animation: bow1 2s linear 0s 1 normal forwards;
  -webkit-animation-play-state: running;
  z-index: 1;
  animation: bow1 2s linear 0s 1 normal forwards;
  animation-play-state: running
}

.animation.bow.is-inview .bow2 {
  -webkit-animation: bow2 2s linear 0s 1 normal forwards;
  -webkit-animation-play-state: running;
  z-index: 2;
  animation: bow2 2s linear 0s 1 normal forwards;
  animation-play-state: running
}

.animation.bow.is-inview .bow3 {
  -webkit-animation: bow3 2s linear 0s 1 normal forwards;
  -webkit-animation-play-state: running;
  z-index: 3;
  animation: bow3 2s linear 0s 1 normal forwards;
  animation-play-state: running
}

@-webkit-keyframes bow1 {
  0% {
    opacity: 1
  }

  76% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@keyframes bow1 {
  0% {
    opacity: 1
  }

  76% {
    opacity: 1
  }

  80% {
    opacity: 0
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes bow2 {
  0% {
    opacity: 0
  }

  76% {
    opacity: 0
  }

  80% {
    opacity: 1
  }

  96% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes bow2 {
  0% {
    opacity: 0
  }

  76% {
    opacity: 0
  }

  80% {
    opacity: 1
  }

  96% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@-webkit-keyframes bow3 {
  0% {
    opacity: 0
  }

  96% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@keyframes bow3 {
  0% {
    opacity: 0
  }

  96% {
    opacity: 0
  }

  100% {
    opacity: 1
  }
}

@media (prefers-color-scheme: light) {

  :root,
  * {
    --bg-color: var(--bg-color-light);
    --sub-bg-color: var(--sub-bg-color-light);
    --text-color: var(--text-color-light);
    --sub-text-color: var(--sub-text-color-light);
    --link-color: var(--link-color-light);
    --link-hover-color: var(--link-hover-color-light);
    --primary-color: var(--primary-color-light);
    --border-color: var(--border-color-light);
    --box-color: var(--box-color-light);
    --box-color-talk: var(--box-color-talk-light);
    --alert-color: var(--alert-color-light);
    --logo-color: var(--color-logo-primary);
    --card-color: var(--card-color-light);
    --balloon-color: var(--balloon-color-light);
    --image-logo-site: var(--image-logo-site-light);
    --image-tagline: var(--image-tagline-light);
    --icon-new-contract: var(--icon-new-contract-light);
    --icon-address-change: var(--icon-address-change-light);
    --icon-bs-contract: var(--icon-bs-contract-light);
    --accent-blue: var(--accent-blue-color-light);
    --accent-yellow: var(--accent-yellow-color-light);
    --accent-pink: var(--accent-pink-color-light)
  }

  .nol-common-footer-logo {
    background-image: url(./../../stories/img/common/logo_nhk_type_gray.svg)
  }

  .nol-common-footer-logo:hover {
    background-image: url(./../../stories/img/common/logo_nhk_type_black.svg)
  }

  .nol-common-footer-logo.jsr {
    background-image: url(./../../stories/img/common/logo_nhk_jsr_type_gray.svg)
  }

  .nol-common-footer-logo.jsr:hover {
    background-image: url(./../../stories/img/common/logo_nhk_jsr_type_black.svg)
  }
}

@media screen and (max-width: 1039px) {

  *,
  *:before,
  *:after {
    letter-spacing: .1rem
  }

  .stories__carousel {
    height: calc(100vw / 16 * 9)
  }

  .stories__carousel__item {
    width: 100vw;
    height: calc(100vw / 16 * 9)
  }

  .stories__carousel__item__title {
    top: 20%;
    padding: 20px;
    font-size: 18px
  }

  .stories__carousel__item__subtitle {
    font-size: 14px
  }

  .stories__hero {
    top: 0px;
    width: 100%;
    height: auto
  }

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

  .stories__hero--pc {
    display: none
  }

  .stories__hero--sp {
    display: block
  }

  .stories__staff-message-box {
    padding: 24px
  }

  .stories__details {
    width: 100%
  }

  .stories__details__header,
  .stories__details__article {
    width: calc(100% - 60px)
  }

  .stories__details__header {
    margin: 48px 30px 40px
  }

  .stories__details__header__staff-message {
    margin: 0 0 48px;
    text-align: center
  }

  .stories__details__header__staff-message p {
    font-size: 16px
  }

  .stories__details__header__summeries {
    margin: 32px 0;
    padding: 24px
  }

  .stories__details__header__summery {
    font-size: 16px
  }

  .stories__details__interviewee {
    display: block;
    width: 100%;
    margin: 0 0 40px;
    padding: 24px
  }

  .stories__details__interviewee img {
    display: block;
    margin: 0 auto;
    margin-bottom: 24px
  }

  .stories__details__interviewee__person-details {
    margin-left: 0px
  }

  .stories__details__interviewee__person-details h3 {
    font-size: 16px;
    text-align: center
  }

  .stories__details__interviewee__person-details p {
    font-size: 16px;
    line-height: 1.4
  }

  .stories__details__article {
    margin: 0 30px 32px
  }

  .stories__details__article__text {
    margin-bottom: 32px
  }

  .stories__details__article__text .title--h2 {
    margin-bottom: 32px;
    font-size: 20px;
    line-height: 1.5
  }

  .stories__details__article__text h5 {
    margin: 24px 0;
    font-size: 16px
  }

  .stories__details__article__text p {
    font-size: 16px;
    line-height: 1.8
  }

  .stories__details__article__text p.is--caption {
    font-size: 14px
  }

  .stories__details__article .related-link {
    margin: 32px auto
  }

  .stories__details__article .related-link a {
    font-size: 16px
  }

  .stories__details__images figure .images__container {
    height: 52.49vw
  }

  .stories__details__images figure .images__container .sp {
    display: block
  }

  .stories__details__images figure .images__container .pc {
    display: none
  }

  .stories__details__images figure figcaption {
    margin: 12px 30px;
    font-size: 14px
  }

  .stories__details__talk {
    display: block;
    margin: 0 auto 32px
  }

  .stories__details__talk__wrapper {
    margin: 32px auto
  }

  .stories__details__talk .talk__person {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 72px;
    height: 72px
  }

  .stories__details__talk .talk__person__img .person__img {
    width: 72px;
    height: 72px;
    border-radius: 36px
  }

  .stories__details__talk .talk__person__detail {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center
  }

  .stories__details__talk .talk__person__detail ul {
    position: static;
    width: 100%;
    margin: 0
  }

  .stories__details__talk .talk__person__detail ul li {
    font-size: 14px;
    line-height: 1.3
  }

  .stories__details__talk .talk__balloon {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin-top: 24px;
    padding: 16px;
    border-radius: 16px
  }

  .stories__details__talk .talk__balloon::before,
  .stories__details__talk .talk__balloon::after {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 0px;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    content: ''
  }

  .stories__details__talk .talk__balloon::before {
    top: -16px;
    border: 0px;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #232324;
    border-bottom: 16px solid var(--box-color-talk);
    border-left: 16px solid transparent
  }

  .stories__details__talk .talk__balloon::after {
    top: -15px;
    border: 0px;
    border-right: 16px solid transparent;
    border-bottom: 16px solid #fff;
    border-bottom: 16px solid var(--balloon-color);
    border-left: 16px solid transparent
  }

  .stories__details__talk .talk__balloon .title--h2 {
    font-size: 16px;
    line-height: 1.5
  }

  .stories__details__talk .talk__balloon .title--h3 {
    font-size: 16px;
    line-height: 1.6
  }

  .stories__details__talk .talk__balloon .question--h2 {
    font-size: 16px;
    line-height: 1.5
  }

  .stories__details__talk .talk__balloon p {
    font-size: 16px;
    line-height: 1.8
  }

  .stories__details__talk .talk__balloon p .text-attention-color {
    color: #c00
  }

  .stories__details__talk .talk__balloon a {
    font-size: 16px
  }

  .stories__details__talk .talk__balloon figure figcaption {
    text-align: left
  }

  .stories__details__talk .talk__balloon figure figcaption .image__caption__text,
  .stories__details__talk .talk__balloon figure figcaption a {
    font-size: 14px;
    line-height: 1.3
  }

  .stories__details__talk .talk__balloon figure figcaption .image__caption__text {
    margin-bottom: 16px
  }

  .stories__details__talk .talk__balloon__bg-gray-area p {
    margin-bottom: 16px
  }

  .stories__details__talk .talk__balloon__bg-gray-area ul li {
    font-size: 16px
  }

  .stories__details .talk--left .talk__person {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    flex-flow: row nowrap;
    justify-content: flex-start
  }

  .stories__details .talk--left .talk__person__img {
    margin-right: 16px
  }

  .stories__details .talk--left .talk__person__detail ul li {
    text-align: left
  }

  .stories__details .talk--left .talk__balloon {
    margin-left: 0
  }

  .stories__details .talk--left .talk__balloon::before {
    left: 22px;
    border-right: 16px solid transparent
  }

  .stories__details .talk--left .talk__balloon::after {
    left: 22px;
    border-right: 16px solid transparent
  }

  .stories__details .talk--right {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right
  }

  .stories__details .talk--right .talk__person {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-flow: row-reverse nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    right: 0;
    flex-flow: row-reverse nowrap;
    justify-content: flex-start
  }

  .stories__details .talk--right .talk__person__img {
    right: 0;
    margin-left: 16px
  }

  .stories__details .talk--right .talk__person__detail ul li {
    text-align: right
  }

  .stories__details .talk--right .talk__balloon {
    margin-right: 0;
    text-align: left
  }

  .stories__details .talk--right .talk__balloon::before {
    right: 20px;
    border-left: 20px solid transparent
  }

  .stories__details .talk--right .talk__balloon::after {
    right: 20px;
    border-left: 20px solid transparent
  }

  .stories__image--center {
    margin-bottom: 32px
  }

  .stories__image--center .image__container {
    margin: 0 auto;
    border-radius: 10px
  }

  .stories__image--center .image__container .pc {
    display: none
  }

  .stories__image--center .image__container .sp {
    display: block
  }

  .stories__image--center .image__caption__text {
    font-size: 14px;
    line-height: 1.3
  }

  .stories__attention figure {
    width: calc(100% - 60px);
    margin: 0 30px 48px
  }

  .stories__attention figure .images__container .stories__attention {
    margin: 0 auto
  }

  .stories__attention figure .images__container .stories__attention--pc {
    display: none
  }

  .stories__attention figure .images__container .stories__attention--sp {
    display: block;
    clear: both;
    border-radius: 10px
  }

  .stories__attention figcaption h3 {
    font-size: 20px
  }

  .stories__attention figcaption p {
    font-size: 16px
  }

  .stories__tagline {
    padding: 12px 30px 60px
  }

  .stories__tagline--imageTagline {
    width: 60%;
    margin: 0 auto;
    background-size: 100%
  }

  .stories__media .media-contents .movie-iframe {
    width: calc(100vw - 40px);
    height: calc(56.25vw - 22.5px)
  }

  .stories__media .media-contents .contents-image .img-wrapper .thumbnail {
    width: calc(100vw - 40px);
    height: calc(56.25vw - 22.5px)
  }

  .stories__media__details {
    width: calc(100vw - 40px)
  }

  .stories__others {
    padding: 0 30px 48px
  }

  .stories__others .headline-component {
    margin-bottom: 16px
  }

  .stories__others .headline-title {
    font-size: 22px
  }

  .stories__vertical-line {
    margin: 40px auto 0
  }

  .stories__vertical-line .vertical-line-component {
    height: 50px
  }

  .stories__introduction {
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 16px 0 48px
  }

  .stories__introduction__message {
    margin: 40px auto 16px
  }

  .stories__introduction__message p {
    font-size: 16px;
    line-height: 1.8
  }

  .stories__introduction__message .title--h2--underline {
    margin-bottom: 32px;
    font-size: 22px;
    line-height: 1.6
  }

  .stories__introduction__cards .card__details {
    margin-left: 0
  }

  .stories__introduction__cards .card__details h3 {
    font-size: 20px
  }

  .stories__introduction__cards .card__details span {
    font-size: 16px
  }

  .stories__introduction .card--big {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 24px 16px;
    text-align: center
  }

  .stories__introduction .card--big img {
    display: block;
    margin: 0 auto;
    margin-bottom: 24px
  }

  .stories__introduction .card--small {
    margin-bottom: 16px;
    padding: 32px 16px
  }

  .stories__introduction .card--small img {
    width: 60px;
    margin: 0 12px
  }

  .stories__introduction .base-link {
    display: block;
    width: 100%;
    margin-top: 22px;
    text-align: center
  }

  .stories__introduction .arrow-link {
    font-size: 20px
  }

  .stories__introduction .arrow-link:after {
    width: 10px;
    height: 10px
  }

  .stories__introduction__reception-fee-message {
    display: block;
    width: 100%;
    font-size: 16px;
    line-height: 1.8;
    text-align: center
  }

  .stories__cards {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-flow: column;
    flex-flow: column;
    width: 100%;
    margin: 0 auto
  }

  .stories__card {
    width: 100%;
    height: auto;
    margin: 0 auto 16px
  }

  .stories__card:last-child {
    margin-bottom: 0
  }

  .stories__card__image {
    max-width: calc(100vw - 42px);
    height: auto;
    border-radius: 4px 4px 0 0 / 4px 4px 0 0
  }

  .stories__card__image img {
    max-width: calc(100vw - 42px);
    height: auto
  }

  .stories__card__title {
    height: auto
  }

  .stories__photo {
    display: block;
    width: 100vw;
    margin: 0 auto 56px !important
  }

  .stories__photo__item {
    width: 100%;
    padding: 0 3.33vw
  }

  .stories__photo__image img {
    width: 100%;
    height: auto;
    border-radius: 8px
  }

  .stories__photo__caption {
    padding: 4px;
    font-size: 14px
  }

  .is-sp-hidden {
    display: none
  }
}

@media screen and (min-width: 768px) {
  .display-block-md {
    display: block
  }

  .display-none-md {
    display: none
  }

  body {
    font-size: 14px
  }

  .groupHeader {
    border-bottom-width: 5px
  }

  .groupHeader__inner {
    padding: 7px 10px
  }

  .groupHeader__logotype {
    width: 55px
  }

  .headerNav--pc__item {
    margin-left: 5px;
    padding: 2px 24px;
    font-size: 14px;
    font-weight: bold
  }

  .headerNav--pc__item a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center
  }

  .headerNav--pc__item a:hover {
    color: rgba(35, 35, 36, 0.6);
    color: var(--link-hover-color)
  }

  .headerNav--pc__item a .icon {
    width: 28px;
    height: 28px;
    margin-top: 0px;
    background-size: 28px 28px
  }

  .footerNav {
    position: relative;
    margin-bottom: -1px;
    color: #fff;
    text-align: center
  }

  .footerNav__items {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center
  }

  .footerNav__item {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row nowrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 0;
    border: none;
    font-size: 12px
  }

  .footerNav__item:nth-child(odd) {
    border-right: none
  }

  .footerNav__item+.footerNav__item::before {
    content: "\03000\0ff5c\03000"
  }

  .footerNav__item a {
    padding: 0;
    letter-spacing: .05em;
    text-align: center
  }

  .footerNav .footer__logos {
    width: 68px
  }

  .footerNav .footer__copyright {
    margin-left: 12px;
    color: #fff;
    font-size: 10px
  }

  .footer {
    padding: 8px 10px
  }

  .footer__logos {
    display: block;
    line-height: 1
  }

  .header-display {
    margin-top: 0px
  }

  .article__inner,
  .article__inner--narrow {
    padding: 60px 30px;
    font-size: 14px
  }

  .article__date {
    font-size: 12px
  }

  .article__title {
    margin-bottom: 40px;
    padding: 0 0 16px;
    font-size: 18px
  }

  .article__body {
    font-size: 14px
  }

  .article__body h3 {
    font-size: 16px
  }

  .article__body small {
    font-size: 12px
  }
}

@media screen and (min-width: 1039px) {
  .siteHeader {
    -webkit-box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
    top: 12px;
    width: 100%;
    max-width: 1056px;
    margin: 12px auto 0;
    border-radius: 5px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2)
  }

  .siteHeader__inner {
    padding: 12px 0px 12px 16px
  }

  .siteHeader__identity {
    width: 166px
  }

  .siteHeader__identity--logoSite {
    width: 166px;
    height: 36px;
    background-size: 166px 36px
  }

  .header-display {
    width: 100%;
    /* margin-top: -73px; */
    overflow: hidden
  }

  .header-display.is-guide {
    margin-top: 32px
  }
}

@media (max-width: 1080px) {
  .nol-common-footer {
    width: 100%;
    padding: 32px 20px
  }

  .nol-common-footer-group {
    display: inline-block;
    width: 100%;
    margin: 30px 0 0
  }

  .nol-common-footer-group:nth-of-type(1) {
    margin-top: 0
  }

  .nol-common-footer-items {
    display: inline-block;
    width: 100%;
    margin-top: 10px
  }

  .nol-common-footer-item {
    display: inline-block;
    margin-right: 20px;
    padding: 10px 0;
    font-size: 13px
  }

  .nol-common-footer-copyright {
    margin-top: 40px;
    font-size: 10px
  }
}

@media screen and (max-width: 1375px) {
  .stories__hero {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
  }
}

@media screen and (max-width: 1536px) {
  .stories__details__hero {
    height: auto
  }

  .stories__details__hero img {
    width: 100%
  }
}

@media screen and (max-width: 813px) {

  .stories__details__header .title--h1,
  .stories__details__header .title--h1--no-line {
    margin-bottom: 40px;
    font-size: 22px;
    line-height: 1.5
  }

  .stories__details__header .title--h1 .br--pc,
  .stories__details__header .title--h1--no-line .br--pc {
    display: none
  }

  .stories__details__header .title--h1 .br--sp,
  .stories__details__header .title--h1--no-line .br--sp {
    display: block
  }

  .stories__image--double {
    position: relative;
    margin-bottom: 32px
  }

  .stories__image--double .images__container {
    width: 90%
  }

  .stories__image--double .images__container__left {
    width: 120px
  }

  .stories__image--double .images__container__left img {
    width: 120px;
    height: 81.42px
  }

  .stories__image--double .images__container__right__title {
    font-size: 16px
  }

  .stories__image--double .images__container__right__description {
    display: none;
    font-size: 14px
  }

  .stories__introduction .card--small {
    max-width: 100%
  }

  .stories__introduction .card--small:last-child {
    margin-left: 0
  }

  .stories__tagline--imageTagline {
    width: 100%;
    max-width: 315px;
    margin: 0 auto;
    background-size: 100%
  }

  .animation.bow.is-guide {
    width: 154px;
    height: 131px
  }

  .animation.bow.is-guide img {
    width: 154px;
    height: 131px
  }
}

@media screen and (max-width: 428px) {
  .stories__introduction__message .br--pc {
    display: none
  }

  .stories__introduction .base-link .br--sp {
    display: block
  }

  .stories__others .blog-pager .more .button {
    width: 90%
  }
}

@media screen and (-ms-high-contrast: none) {
  .stories__hero--pc {
    position: relative;
    top: -120px
  }

  .stories__hero__bg--pc {
    display: none
  }

  .stories__introduction__cards {
    width: 100%
  }

  .stories__others .headline-title {
    width: 240px
  }
}

/* ヘッダーフッター用 --------------------------------------------------*/

body {
  font-feature-settings: normal;
}

img {
  max-width: none;
}

.wrapper {
  width: 100% !important;
  letter-spacing: .1rem;
}

.wrapper a {
  text-decoration: none;
}

@media screen and (-ms-high-contrast: none) {

  .stories__hero--pc {
    position: absolute;
  }

}

@media screen and (max-width: 1039px) {

  .stories__introduction .card--big .card__details,
  .stories__introduction .card--big .card__details h3 {
    text-align: center !important;
  }

}

footer {
  -webkit-font-feature-settings: "palt";
  font-feature-settings: "palt";
  line-height: 1;
}

footer ul.nol_link li,
footer .copyright p {
  color: #ffffff;
  letter-spacing: .05em;
}