@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

:root {
  --font-family: "ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","-apple-system",BlinkMacSystemFont,sans-serif;
  /* --font-family-bold: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Arial, Meiryo, sans-serif; */
  --font-family-bold: var(--font-family);

  --color-haruwari: #FC5075;
  --color-link: #326691;

  --pri-gray-40: #e1e1e1;
  --sem-plain-tertiary: color-mix(in srgb, #000 52%, transparent);


}

*,
::before,
::after {
  --clamp-root-font-size: 10;
  --clamp-slope: calc((var(--clamp-max) - var(--clamp-min)) / (var(--clamp-viewport-max) - var(--clamp-viewport-min)));
  --clamp-y-axis-intersection: calc(var(--clamp-min) - (var(--clamp-slope) * var(--clamp-viewport-min)));
  --clamp-preffered-value: calc(
    var(--clamp-y-axis-intersection) * (1rem / var(--clamp-root-font-size)) + (var(--clamp-slope) * 100vi)
  );
  --clamp-min-calc: calc(var(--clamp-min) * (1rem / var(--clamp-root-font-size)));
  --clamp-max-calc: calc(var(--clamp-max) * (1rem / var(--clamp-root-font-size)));
  --clamp-fallback: calc(var(--clamp-min-calc) + (var(--clamp-max) - var(--clamp-min)) * (100vw / 1000));
  --clamp: clamp(
    var(--clamp-min-calc),
    var(--clamp-preffered-value),
    var(--clamp-max-calc)
  );
}

body {
  --clamp-viewport-min: 375;
  --clamp-viewport-max: 1000;
  --clamp-min: 14;
  --clamp-max: 16;
}

/* =============================================================================
   #Foundation
   ========================================================================== */
/* -----------------------------------------------------------------------------
   #base
   -------------------------------------------------------------------------- */
/* テーマカラー
  -------------------------------------------------------------------------- */
/*MJcolor*/
body.mj .list-qa-question::before,
body.mj .list-qa-answer::before,
body.mj .sec-option .ttl-01,
body.mj .sec-plan .ttl-01,
body.mj .sec-qa .ttl-01,
body.mj .sv-content-price,
body.mj .sv-content-point-btn,
body.mj .sv-content-point-btn02 {
  color: #333;
}

body.mj .list-qa-question::before,
body.mj .list-qa-answer::before,
body.mj .m-link__local__row--link,
body.mj .nav-utility-list-item,
.mod-caution a:link {
  color: #336e9c;
}
body.mj .hero,
body.mj .sv-content-card,
body.mj .sec-service,
body.mj .sec-device,
body.mj .mod-option-price,
body.mj .sv-content-point,
body.mj .sv-content-point02 {
  background-color: #f4e9e2;
}

body.mj .mod-option-card,
body.mj .list-qa-item,
body.mj .is-active .list-qa-question,
body.mj .sv-content-card {
  border-color: #e17fa8;
}

body.mj .ico-arrow::before {
  border-left-color: #e17fa8;
}

body.mj .list-qa-answer,
body.mj .ico-slide::before {
  border-top-color: #336e9c;
}

body.mj .list-qa-answer {
  background-color: #eff8ff;
}
@media screen and (min-width: 1000px) {
  body.mj .header-sv {
    background-color: #00324E;
  }
}

body.mj .hero-logo__label.__primary {
  color: #fff;
  background-color: #00324e;
}
body.mj .header-logo {
  width: 89px;
}
@media screen and (min-width: 1000px) {
  body.mj .header-logo {
    width: 128px;
  }
}
body.mj .hero {
  background: url(../images/bg_mainvisual_sv_sp.jpg) 100% 0 / cover no-repeat #f4e9e2;
}
@media screen and (min-width: 1000px) {
  body.mj .hero {
    background: url(../images/bg_mainvisual_sv.jpg) -455px 0 / cover no-repeat #f4e9e2;
  }
}
@media screen and (min-width: 1300px) {
  body.mj .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 50% 0 / cover no-repeat #f4e9e2;
  }
}
@media screen and (min-width: 2000px) {
  body.mj .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 48% 0 / auto 100% no-repeat #f4e9e2;
  }
}
body.mj .hero-logo {
  top: 15.370705%;
}
body.mj .hero-logo__item {
  width: 176px;
}
body.mj .hero-text {
  top: 13%;
}
body.mj .hero-text--rows {
  top: 27%;
}
/* body.mj.haruwari .hero-text,
body.mj.anniversary .hero-text {
  top: 30.68%;
} */
body.mj.campaign .hero-text {
  top: 24%;
}
/* @media screen and (min-width: 650px) {
  body.mj .hero-text--rows,
  body.mj.haruwari .hero-text,
  body.mj.anniversary .hero-text,
  body.mj.campaign .hero-text {
    top: 37%;
  }
} */
@media screen and (min-width: 1000px) {
  body.mj.campaign .header-btn-in {
    width: 152px;
  }
  body.mj .hero-text,
  body.mj.haruwari .hero-text,
  body.mj.anniversary .hero-text,
  body.mj.campaign .hero-text {
    top: 61.280289%;
  }
  body.mj .hero-text--rows {
    top: 61%;
  }
}
@media screen and (min-width: 1260px) {
  body.mj .hero-text--rows {
    top: 65.280289%;
  }
}
body.mj .hero-text-read,
body.mj .ttl-01:before {
  background-color: #336e9c;
}
body.mj .serviceListBox {
  background-color: rgba(0, 87, 144, 0.6);
}

body.mj .sec-device {
  background: linear-gradient(0deg, rgba(0,  87,  144,  0.85), rgba(0,  87,  144,  0.85)), url(../images/bg_device.jpg) center center / cover no-repeat;
}
@media screen and (min-width: 500px) {
  body.mj .sec-device {
    background: linear-gradient(0deg,rgba(0, 87, 144, 0.85),rgba(0, 87, 144, 0.85)),url(../images/bg_device.jpg) 60% center / cover no-repeat;
  }
}
@media screen and (min-width: 1000px) {
  body.mj .sec-device {
    background: linear-gradient(0deg,rgba(0, 87, 144, 0.85),rgba(0, 87, 144, 0.85)),url(../images/bg_device.jpg) center 0 / cover no-repeat;
  }
}
body.mj .sv-content-title {
  background-color: #336E9C;
}
body.mj #pre-free-guide {
  background-color: #eaf6ff;
}

/*SScolor*/
body.ss .header-sv {
  color: #fff;
  margin-left: 1px;
}
body.ss .header .anchorList {
  color: #fff;
  text-shadow: 1px 1px 3px #979797;
}
body.ss .header.__fixed .anchorList {
  color: #333;
  text-shadow: none;
}
@media screen and (min-width: 1000px) {
  body.ss .header-sv {
    margin-left: 4px;
    background-color: #00408c;
  }
}
@media screen and (min-width: 1260px) {
  body.ss .header .anchorList {
    color: #333;
    text-shadow: none;
  }
}
body.ss .list-qa-question::before,
body.ss .list-qa-answer::before,
/* body.ss .sec-option .ttl-01, */
/* body.ss .sec-plan .ttl-01, */
/* body.ss .sec-qa .ttl-01, */
/* body.ss .sv-content-price, */
body.ss .sv-content-point-btn,
body.ss .sv-content-point-btn02,
body.ss .nav-utility-list-link,
body.ss .m-link__local__row--link,
body.ss .mod-caution a:link {
  color: #0069b7;
}

body.ss .hero,
body.ss .sv-content-card,
body.ss .sec-service,
body.ss .sec-device,
body.ss .mod-option-price,
body.ss .sv-content-point,
body.ss.sv-content-point02 {
  background-color: #dcdee3;
}

body.ss .mod-option-card,
body.ss .list-qa-item,
body.ss .is-active .list-qa-question,
body.ss .sv-content-card {
  border-color: #f08200;
}

body.ss .ico-arrow::before {
  border-left-color: #f08200;
}

body.ss .list-qa-answer,
body.ss .ico-slide::before {
  border-top-color: #0069b7;
}

body.ss .list-qa-answer {
  background-color: #dfedf8;
}
body.ss .hero-logo__label.__primary {
  background-color: #00408c;
}
body.ss .hero-text-read,
body.ss .ttl-01:before {
  background-color: #0069b7;
}
body.ss .serviceListBox {
  background-color: rgba(0, 85, 162, 0.6);
}
body.ss .sec-svContent {
  background-color: #f7fcff;
}
body.ss #pre-free-guide {
  background-color: #EAF6FF;
}
body.ss .sv-content-title {
  background-color: #0069B7;
}
body.ss .hero {
  background: url(../images/bg_mainvisual_sv.jpg) -86px 0 / cover no-repeat #dcdee3;
}
body.ss .hero-logo {
  top: 15.370705%;
}
body.ss .hero-logo__item {
  width: 176px;
}
body.ss .hero-text {
  top: 34%;
}
@media screen and (max-width: 649px) {
  body.ss .hero-text--rows .hero-text-read {
    margin-top: 10px;
  }
}
@media screen and (min-width: 650px) {
  body.ss .hero-text {
    top: 46%;
  }
}
@media screen and (min-width: 1000px) {
  body.ss .hero {
    background: url(../images/bg_mainvisual_sv.jpg) -108px 0 / cover no-repeat #dcdee3;
  }
  body.ss .hero-text {
    top: 60%;
  }
  body.ss.haruwari .hero-text {
    top: 60%;
  }
  body.ss .hero-text--rows {
    top: 61%;
  }
}
@media screen and (min-width: 1260px) {
  body.ss .hero-text--rows {
    top: 63.652803%;
  }
}
@media screen and (min-width: 1300px) {
  body.ss .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 50% 0 / auto 100% no-repeat #dcdee3;
  }
}
@media screen and (min-width: 2000px) {
  body.ss .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 50% 0 / auto 100% no-repeat #dcdee3;
  }
}
body.ss .sec-device {
  background: linear-gradient(0deg, rgba(0, 85, 162, 0.8), rgba(0, 85, 162, 0.8)), url(../images/bg_device.jpg) center center / cover no-repeat;
}
@media screen and (min-width: 500px) {
  body.ss .sec-device {
    background: linear-gradient(0deg, rgba(0, 85, 162, 0.8), rgba(0, 85, 162, 0.8)), url(../images/bg_device.jpg) 60% center / cover no-repeat;
  }
}
@media screen and (min-width: 1000px) {
  body.ss .sec-device {
    background: linear-gradient(0deg, rgba(0, 85, 162, 0.8), rgba(0, 85, 162, 0.8)), url(../images/bg_device.jpg) center 0 / cover no-repeat;
  }
}
/*vscolor*/
body.veritas .header-sv {
  color: #3e4e5e;
}
body.veritas .anchorList {
  color: #fff;
}
body.veritas .sec-svContent {
  background-color: #f3f3f3;
}
body.veritas .list-qa-question::before,
body.veritas .list-qa-answer::before,
body.veritas .sec-option .ttl-01,
body.veritas .sv-content-price,
body.veritas .sv-content-point-btn,
body.veritas .sv-content-point-btn02,
body.veritas .nav-utility-list-link,
body.veritas .m-link__local__row--link {
  color: #6098d6;
}

body.veritas .hero,
body.veritas .sv-content-card,
body.veritas .sec-service,
body.veritas .mod-option-price,
body.veritas .sv-content-point,
body.veritas.sv-content-point02,
body.veritas .subscriberLink {
  background-color: #0e0705;
}

body.veritas .mod-option-card,
body.veritas .list-qa-item,
body.veritas .is-active .list-qa-question,
body.veritas .sv-content-card {
  border-color: #6098d6;
}

body.veritas .ico-arrow::before {
  border-left-color: #6098d6;
}

body.veritas .list-qa-answer,
body.veritas .ico-slide::before {
  border-top-color: #6098d6;
}

body.veritas .list-qa-answer {
  background-color: rgba(223, 237, 248, 1);
}
body.veritas .hero-logo__label.__primary {
  color: #3e4e5e;
  background-color: #bdd3eb;
}
@media screen and (min-width: 1000px) {
  body.veritas .hero-text {
    top: 56%;
  }
}

/* Season color - hatsuwari */
body.hatsuwari .hero-text-read,
body.hatsuwari .hero-text-note,
body.hatsuwari .ttl-danger {
  color: #C00708;
}

body.hatsuwari .hero-text-read {
  background-color: #fff;
}

body.hatsuwari .header-btn,
body.hatsuwari .btn-in,
body.hatsuwari .timeline-bar__item--free,
body.hatsuwari .timeline-bar__item.timeline-bar__item--free:before {
  background-color: #C00708;
}

/* Season color - haruwari */
body.haruwari .hero-text-read,
body.haruwari .hero-text-note,
body.haruwari .ttl-danger {
  color: var(--color-haruwari);
}

body.haruwari .hero-text-read {
  background-color: #fff;
}

body.haruwari .header-btn,
body.haruwari .btn-in,
body.haruwari .timeline-bar__item--free,
body.haruwari .timeline-bar__item.timeline-bar__item--free:before {
  background-color: var(--color-haruwari);
}

/* Season color - anniversary */
body.campaign .hero-text-read,
body.campaign .ttl-danger,
body.anniversary .hero-text-read,
body.anniversary .ttl-danger {
  color: #0073b6;
}

body.anniversary .hero-text-read,
body.campaign .hero-text-read {
  background-color: #fff;
}

body.anniversary .header-btn,
body.anniversary .btn-in,
body.anniversary .timeline-bar__item--free,
body.anniversary .timeline-bar__item.timeline-bar__item--free:before {
  /* background-color: #f78600; */
}
/*!
 * ress.css v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */
html {
  overflow-y: scroll;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;

  -webkit-text-size-adjust: 100%;
}

*,
::after,
::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

::after,
::before {
  vertical-align: inherit;
  text-decoration: inherit;
}

* {
  margin: 0;
  padding: 0;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

hr {
  overflow: visible;
}

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

summary {
  display: list-item;
}

small {
  font-size: 80%;
}

[hidden],
template {
  display: none;
}

abbr[title] {
  border-bottom: 1px dotted;
  text-decoration: none;
}

a {
  background-color: transparent;

  -webkit-text-decoration-skip: objects;
}

a:active,
a:hover {
  outline-width: 0;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

mark {
  color: #000;
  background-color: #ff0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: 0.4em;
}

sup {
  top: -0.5em;
}

input {
  border-radius: 0;
}

[role="button"],
[type="button"],
[type="reset"],
[type="submit"],
button {
  cursor: pointer;
}

[disabled] {
  cursor: default;
}

[type="number"] {
  width: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

button,
input,
optgroup,
select,
textarea {
  font: inherit;
}

optgroup {
  font-weight: 700;
}

button {
  overflow: visible;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border-style: 0;
}

[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
button:-moz-focusring {
  outline: 1px dotted ButtonText;
}

[type="reset"],
[type="submit"],
button,
html [type="button"] {
  -webkit-appearance: button;
}

button,
select {
  text-transform: none;
}

button,
input,
select,
textarea {
  border-style: none;
  color: inherit;
  background-color: transparent;
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

select::-ms-expand {
  display: none;
}

select::-ms-value {
  color: currentColor;
}

legend {
  display: table;
  max-width: 100%;
  border: 0;
  color: inherit;
  white-space: normal;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

img {
  border-style: none;
}

progress {
  vertical-align: baseline;
}

svg:not(:root) {
  overflow: hidden;
}

audio,
canvas,
progress,
video {
  display: inline-block;
}

@media screen {
  [hidden~="screen"] {
    display: inherit;
  }
  [hidden~="screen"]:not(:active):not(:focus):not(:target) {
    clip: rect(0 0 0 0) !important;
    position: absolute !important;
  }
}

[aria-busy="true"] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

::-moz-selection {
  color: #000;
  background-color: #b3d4fc;
  text-shadow: none;
}

::selection {
  color: #000;
  background-color: #b3d4fc;
  text-shadow: none;
}

/* #Base
   -------------------------------------------------------------------------- */
/**
 * Baseレイヤーにはプロジェクトにおける、基本的なベーススタイルを定義します。
 * 要素セレクタや属性セレクタなど、詳細度はできるかぎり低く保っておきます。
 * 基本的にclass属性は使用しません。
 */
html {
  font-size: 62.5%;
}

@media screen and (min-width: 1000px) {
  html {
    height: 100%;
  }
}

body {
  color: #333;
  font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック",sans-serif;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  -webkit-font-kerning: normal;
  font-kerning: normal;
  background-color: #fff;
}

@media screen and (min-width: 1000px) {
  body {
    /* min-width: 1134px; */
    height: 100%;
    font-size: 1.8rem;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: #333;
  }
}

a,
button {
  -webkit-transition: opacity 0.3s, color 0.3s, background-color 0.3s;
  transition: opacity 0.3s, color 0.3s, background-color 0.3s;
}

a {
  color: inherit;
  text-decoration: none;
}

a:visited {
  color: inherit;
}

a:hover,
a:active,
a:focus {
  opacity: 0.75;
  text-decoration: none;
}

a[href^="tel"] {
  color: inherit;
  cursor: default;
  pointer-events: none;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #e7e7e7;
  vertical-align: middle;
  letter-spacing: normal;
  background-color: #fff;
}

input,
select {
  height: 3em;
  padding: 0.5em 1em;
}

textarea {
  height: 9em;
  padding: 0.5em 1em;
}

strong {
  font-weight: normal;
}

small {
  font-size: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: 300;
}

ul,
ol {
  list-style-type: none;
}

figure,
figcaption {
  margin: 0;
}

figure {
  text-align: center;
}

table {
  width: 100%;
  border-spacing: 0;
}

th {
  text-align: left;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

[src$=".svg"],
[data$=".svg"] {
  width: 100%;
}

i,
cite,
em,
address,
dfn {
  font-style: normal;
}

i,
source {
  display: inline-block;
}

i {
  line-height: 0;
  vertical-align: middle;
}

picture {
  display: block;
  line-height: 0;
  text-align: center;
}

code,
pre {
  font-family: Consolas, Menlo, Courier, monospace;
}

code {
  padding: 0.2em;
  border-radius: 2px;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, 0.06);
}

pre code {
  padding: 0;
  font-size: 1rem;
  background-color: inherit;
}

svg {
  width: 20px;
  height: 20px;
}

:placeholder-shown {
  color: #999;
}

::-webkit-input-placeholder {
  color: #999;
}

::-moz-placeholder {
  opacity: 1;
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}

/* =============================================================================
   #Layout
   ========================================================================== */
/* #contents
  -------------------------------------------------------------------------- */
/**
 * contents
 */

.l-row {
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.l-row.__center {
  justify-content: center;
}
.l-row.__wrap {
  flex-wrap: wrap;
}
.l-col {
  /* OLD - iOS 6-, Safari 3.1-6 */ /* Safari 6.1+. iOS 7.1+, BB10 */ /* IE 10 */
  flex: 1 1 auto;
  min-height: 1px;
}
.l-col.__30 {
  flex: 0 0 30%;
  max-width: 30%;
}
.l-col.__40 {
  flex: 0 0 40%;
  max-width: 40%;
}
.l-col.__50 {
  flex: 0 0 50%;
  max-width: 50%;
}
.l-col.__60 {
  flex: 0 0 60%;
  max-width: 60%;
}
.l-col.__70 {
  flex: 0 0 70%;
  max-width: 70%;
}
.l-col.__100 {
  flex: 0 0 100%;
  max-width: 100%;
}
.l-col.__apps-specific-icon {
  flex: 0 0 37.1875%;
  max-width: 37.1875%;
}
.l-col.__apps-specific-app {
  flex: 0 0 62.8125%;
  max-width: 62.8125%;
}
@media screen and (min-width: 768px) {
  .l-col.__46--md {
    flex: 0 0 46.822742%;
    max-width: 46.822742%;
  }
  .l-col.__50--md {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .l-col.__54--md {
    flex: 0 0 53.177258%;
    max-width: 53.177258%;
  }
}

.layout__container {
  margin: 0 auto;
  max-width: 1344px;
  padding-inline: 16px;
  width: 100%;
}
.layout__section {
  padding-block: 32px;
}
@media screen and (min-width: 768px) {
  .layout__container {
    padding-inline: 24px;
  }
}
 @media screen and (min-width: 1008px) {
  .layout__section {
    padding-block: 72px;
  }
}

.contents {
  /* padding-top: 49px; */
  padding-top: 0;
}
@media screen and (min-width: 1000px) {
  .contents {
    padding-top: 0;
  }
}

/**
 * contents-main
 */
/**
 * contents-frame
 */
.contents-frame {
  padding: 0 15px;
}

@media screen and (min-width: 1000px) {
  .contents-frame {
    width: 100%;
    max-width: 1034px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 0;
  }
}

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

/* #Footer
  -------------------------------------------------------------------------- */
  .footer {
    padding: 11px 0 10px;
    color: #fff;
    background-color: #0a385b;
  }
  @media screen and (min-width: 1000px) {
    .footer {
      padding: 21px 0;
    }
  }
  .footer-in {
    font-size: 0;
    padding: 0 16px;
    text-align: center;
  }
  .footer-logo {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.65;
    margin-right: 12px;
    width: 57px;
    height: 12px;
    vertical-align: text-bottom;
  }
  .footer-copylight {
    display: inline;
    font-size: 1.2rem;
    line-height: 1.65;
    text-align: left;
  }
  @media screen and (min-width: 1000px) {
    .footer-copylight {
      -webkit-transform: none;
      -ms-transform: none;
      transform: none;
    }
  }

/* #Header
  -------------------------------------------------------------------------- */
/**
 * header
 */
.header {
  position: relative;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.header.__fixed {
  position: fixed;
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.header.__fixed .header-logoBox {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.header.__fixed .anchorList {
  color: #333;
}
@media screen and (min-width: 1000px) {
  .header {
    position: absolute;
    height: 81px;
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 2px 8px rgba(17, 15, 15, 0);
  }
  .header .header-logoBox {
    display: none;
  }
  .header.__is-shown {
    position: fixed;
    top: 0;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .header.__is-shown .header-logoBox {
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
  }
}

.header-in {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  height: 49px;
  max-width: 100%;
  padding-left: 8px;
  /* margin: 0 auto; */
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 1000px) {
  .header-in {
    height: 100%;
    margin-left: 2%;
    padding: 0;
  }
}

.header-logo {
  width: 100px;
  height: auto;
  font-size: 0;
}

@media screen and (min-width: 1000px) {
  .header-logo {
    width: 158px;
  }
}
.header-logoBox {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}
@media screen and (min-width: 1000px) {
  .header-logoBox {
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  }
}
.header-sv {
  display: inline-block;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  margin-left: 8px;
}
.header-sv img {
  width: 78px;
}
@media screen and (min-width: 1000px) {
.header-sv {
  font-size: 1.2rem;
  padding: 5px 12px;
  margin-left: 12px;
  margin-top: 2px;
  background-color: #bdd3eb;
  border-radius: 20px;
}
}

.header-btn {
  min-width: 100px;
  height: 100%;
  color: #fff;
  font-size: 1.4rem;
  font-weight: normal;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.1em;
  background-color: #f78600;
  cursor: pointer;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-left: auto;
}

@media screen and (min-width: 321px) {
  .header-btn {
    min-width: 120px;
  }
}

@media screen and (min-width: 1000px) {
  .header-btn {
    min-width: 160px;
    color: #fff;
    font-size: 2rem;
    font-weight: 300;
    text-decoration: none;
    letter-spacing: 0.1em;
    background-color: #f78600;
    cursor: pointer;

    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-left: 24px;
  }
}

.header-btn-in {
  padding: 0 4px;
  width: 100px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
}
body.hatsuwari .header-btn-in,
body.haruwari .header-btn-in {
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
}
@media screen and (min-width: 1000px) {
  .header-btn-in {
    /*padding: 0 12px;*/
    width: 148px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
  }
}

@media screen and (min-width: 1000px) {
  .header-btn-in-sp {
    display: block;
    padding-top: 16px;
  }
}
/* .btn-in::after{
  content: "";
  display: inline-block;
  width: 24px;
  height: 12px;
  margin-left: 8px;
  background: url(../images/ico_btn.png)no-repeat 0 0 / 24px 12px;
} */
.header-btn-txt-01,
.header-btn-txt-02 {
  display: inline-block;
}
.header-btn-txt-01 {
  font-size: 1.5rem;
}
.header-btn-txt-02 {
  font-size: 1.2rem;
}
 @media screen and (min-width: 1000px) {
  .header-btn-txt-01 {
    font-size: 2rem;
  }
  .header-btn-txt-02 {
    font-size: 1.6rem;
  }
}
.header-utility {
  margin-left: auto;
}

.header-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.header-list-item {
  width: 21px;
  margin: 0 12px 0 6px;
}

@media screen and (min-width: 1000px) {
  .header-list-item {
    width: 42px;
    margin-left: 22px;
  }
}

@media screen and (min-width: 1000px) {
  .header-list-item:last-child {
    margin-right: 0;
  }
}
.anchorList {
  font-size: 1.4rem;
  display: none;
}
.anchorList li + li {
  margin-left: 12px;
}

@media screen and (min-width: 1000px) {
  .anchorList {
    margin-left: auto;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    font-size: 1.4rem;
  }
  .anchorList li {
    flex: 0 0 auto;
  }
}

/* #Wrapper
   -------------------------------------------------------------------------- */
/**
 * wrapper
 */
.wrapper {
  overflow: hidden;
}

@media screen and (min-width: 1000px) {
  .wrapper {
    overflow: visible;
  }
}

/* =============================================================================
   #Object
   ========================================================================== */
/* -----------------------------------------------------------------------------
   #Component
   -------------------------------------------------------------------------- */

/* #m-list__apps
-------------------------------------------------------------------------- */
.m-list__apps-specific {
  margin: 30px -30px 0 -30px;
}
.m-list__apps-specific .s-right {
  padding-right: 17px;
}
@media screen and (min-width: 370px) {
  .m-list__apps-specific {
    margin: 30px auto 0;
  }
}
.m-list__apps-specific-title {
  white-space: nowrap;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  height: 26px;
}
.m-list__apps-specific-title + .btn {
  width: 100%;
  vertical-align: bottom;
}

.m-list__apps {
  width: 100%;
  padding: 33px;
  margin: 22px auto 0;
  border: 1px solid #fff;
}
@media screen and (min-width: 1000px) {
  .m-list__apps {
    width: 664px;
  }
}
.m-list__apps-box {
  display: -o-flex;
  display: -ms-flex;
  display: flex;
}
.m-list__apps-box.__left {
  /* padding-right: 8px; */
}
.m-list__apps-box.__right {
  padding-left: 14px;
}
.m-list__apps-item {
  min-height: 1px;
  padding: 0 0;
}
.m-list__apps-item.__iphone-desc {
  flex: 0 0 172px;
  max-width: 171.5px;
  padding-right: 7.5px;
}
.m-list__apps-item.__iphone-code {
  flex: 0 0 93.5px;
  max-width: 93.5px;
  padding-left: 7.5px;
}
.m-list__apps-item.__desc {
  flex: 0 0 210.5px;
  max-width: 210.5px;
  padding-right: 7.5px;
}
.m-list__apps-item.__code {
  flex: 0 0 93.5px;
  max-width: 93.5px;
  padding-left: 7.5px;
}
.m-list__apps-title {
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-align: left;
  padding: 5px 0;
}
.m-list__apps-figure {
  text-align: left;
}
.m-list__apps-figure.__desc > img {
  width: 100%;
}
.m-list__apps-figure.__code > img {
  width: 100%;
  max-width: 86px;
}

/* #m-note
   -------------------------------------------------------------------------- */
.m-note__general,
.m-note__general--md,
.m-note__danger--md {
  margin-top: 27px;
}
.m-note__general.__lighter,
.m-note__general--md.__lighter,
.m-note__danger--md.__lighter {
  opacity: 0.7;
}
.m-note__general--lg .m-note__general--item,
.m-note__general--lg .m-note__danger--item {
  margin: auto 24px;
}
.m-note__general--items,
.m-note__danger--items {
  display: inline-block;
  text-align: left;
  max-width: 563px;
  margin: 0 auto;
}
.m-note__danger--items {
  padding: 10px 20px;
  border: 2px solid #d11100;
}
.m-note__general--item,
.m-note__danger--item {
  font-size: 10px;
  line-height: 1.6;
  text-indent: -0.5em;
  padding-left: 0.5em;
}
.m-note__danger--item {
  font-weight: 600;
  color: #d11100;
}
.m-note__general--md .m-note__general--item,
.m-note__danger--md .m-note__danger--item {
  font-size: 12px;
}
.m-note__general--marker {
  display: inline-block;
  list-style-type: none;
  text-align: left;
  font-weight: normal;
  margin: 0 0 -0.5em;
  padding: 0 0 0.5em;
  width: 0.5em;
}
.m-note__general--marker.__company {
  display: inline-block;
  height: 24px;
  width: 24px;
  margin-left: -0.5em;
  margin-right: 8px;
  margin-bottom: -8px;
  background: url(../images/ico_company_vs.svg) 0 0 / contain no-repeat;
}

@media screen and (min-width: 1000px) {
  .m-note__general,
  .m-note__general--md,
  .m-note__danger--md {
    margin-top: 19px;
  }
  .m-note__general--lg .m-note__general--item, .m-note__general--lg .m-note__danger--item {
    font-size: 12px;
    margin: 0;
  }
}

/* #m-timeline
   -------------------------------------------------------------------------- */
.timeline-wrapper {
  position: relative;
  max-width: 1000px;
  padding-left: 27px;
  padding-right: 12px;
  margin: 48px auto 0;
}
@media screen and (min-width: 1000px) {
  .timeline-wrapper {
    padding-left: 33px;
    padding-right: 12px;
  }
}
.timeline-wrapper + .timeline-wrapper {
  margin-top: 80px;
}
.timeline-bar {
  width: 100%;
  height: 24px;
}
.timeline-bar__item {
  position: relative;
  display: inline-block;
  height: 24px;
  border-top-left-radius: 1em;
  border-bottom-left-radius: 1em;
  /* margin-right: -2px; */
}
.timeline-bar__item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -27px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  display: inline-block;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid #fff;
}
@media screen and (min-width: 1000px) {
  .timeline-bar__item:before {
    left: -33px;
    width: 67px;
    height: 67px;
  }
}
@media screen and (max-width: 768px), print {
  .timeline-bar__item {
    font-size: 10px;
  }
}
.timeline-bar__item--free {
  background: #f78600;
}
.timeline-bar__item.timeline-bar__item--free:before {
  background-color: #f78600;
}
.timeline-bar__item--daily {
  background-color: #003e70;
}
.timeline-bar__item.timeline-bar__item--daily:before {
  background-color: #003e70;
}
.timeline-bar__item--regular {
  background-color: #0076d6;
}
.timeline-bar__item.timeline-bar__item--regular:before {
  background-color: #0076d6;
}
.timeline-bar__item.timeline-bar__item--regular:after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 12px;
  border-color: transparent transparent transparent #0076d6;
}
.timeline-desc {
  width: 100%;
}
.timeline-desc__sub {
  display: inline-block;
  bottom: 0;
  font-size: 10px;
  margin-left: 0.25em;
  font-weight: normal;
}
.timeline-desc__item {
  display: inline-block;
  white-space: nowrap;
  font-weight: 800;
  font-size: 10px;
  line-height: 1.2;
  padding-left: 1.5%;
  vertical-align: top;
}
@media screen and (min-width: 1000px) {
  .timeline-desc__item {
    font-size: 14px;
    line-height: 1.8;
  }
}
.timeline-desc__item:before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  background-color: #ccc;
  margin: 0 auto 4px;
}

.timeline-label--start {
  left: -27px;
}
.timeline-bar__item--free,
.timeline-desc__item--free {
  width: 85%;
}
.timeline-label--one-month {
  left: calc(85% - 60px);
}
@media screen and (min-width: 1000px) {
  .timeline-label--start {
    left: -33px;
  }
  .timeline-label--one-month {
    left: calc(85% - 70px);
  }
}
.timeline-bar__item--daily,
.timeline-desc__item--daily {
  width: 42.5%;
}
.timeline-bar__item--regular,
.timeline-desc__item--regular {
  width: 15%;
}
.timeline-desc__item--regular {
  padding-left: 10%;
}
@media screen and (min-width: 1000px) {
  .timeline-desc__item--regular {
    padding-left: 3%;
  }
}
/* timeline-bar--beginning */
.timeline-bar--beginning .timeline-bar__item--daily,
.timeline-desc--beginning .timeline-desc__item--daily,
.timeline-label--beginning .timeline-label--one-month,
.m-note__general--beginning.m-note__general--item {
  display: none;
}

/* timeline-bar--first-week */
.timeline-bar--first-week .timeline-bar__item--free,
.timeline-desc--first-week .timeline-desc__item--free {
  width: 42.5%;
}
.timeline-bar--first-week .timeline-bar__item--daily,
.timeline-desc--first-week .timeline-desc__item--daily {
  width: 42.5%;
}
.timeline-label--first-week .timeline-label--one-month {
  left: calc(42.5% - 43px);
}
.timeline-label--next-month {
  left: calc(85% - 60px);
}
/* .timeline-label--first-week .timeline-label--next-month,
.timeline-label--second-weeks .timeline-label--next-month,
.timeline-label--third-weeks .timeline-label--next-month,
.timeline-label--fourth-weeks .timeline-label--next-month,
.timeline-label--fifth-weeks .timeline-label--next-month {
  left: calc(85% - 60px);
} */
@media screen and (min-width: 1000px) {
  .timeline-label--first-week .timeline-label--one-month {
    left: calc(42.5% - 52px);
  }
  .timeline-label--next-month {
    left: calc(85% - 71px);
  }
  /* .timeline-label--first-week .timeline-label--next-month,
  .timeline-label--second-weeks .timeline-label--next-month,
  .timeline-label--third-weeks .timeline-label--next-month,
  .timeline-label--fourth-weeks .timeline-label--next-month,
  .timeline-label--fifth-weeks .timeline-label--next-month {
    left: calc(85% - 70px);
  } */
}

/* timeline-bar--second-weeks */
.timeline-bar--second-weeks .timeline-bar__item--free,
.timeline-desc--second-weeks .timeline-desc__item--free {
  width: 47.5%;
}
.timeline-bar--second-weeks .timeline-bar__item--daily,
.timeline-desc--second-weeks .timeline-desc__item--daily {
  width: 37.5%;
}
.timeline-label--second-weeks .timeline-label--one-month {
  left: calc(47.5% - 46px);
}
@media screen and (min-width: 1000px) {
  .timeline-label--second-weeks .timeline-label--one-month {
    left: calc(47.5% - 55px);
  }
}

/* timeline-bar--third-weeks */
.timeline-bar--third-weeks .timeline-bar__item--free,
.timeline-desc--third-weeks .timeline-desc__item--free {
  width: 52.5%;
}
.timeline-bar--third-weeks .timeline-bar__item--daily,
.timeline-desc--third-weeks .timeline-desc__item--daily {
  width: 32.5%;
}
@media screen and (min-width: 1000px) {
  .timeline-bar--third-weeks .timeline-bar__item--free,
  .timeline-desc--third-weeks .timeline-desc__item--free {
    width: 49.25%;
  }
  .timeline-bar--third-weeks .timeline-bar__item--daily,
  .timeline-desc--third-weeks .timeline-desc__item--daily {
    width: 35.75%;
  }
}
.timeline-label--third-weeks .timeline-label--one-month {
  left: calc(52.5% - 47px);
}
@media screen and (min-width: 1000px) {
  .timeline-label--third-weeks .timeline-label--one-month {
    left: calc(49.25% - 55px);
  }
}

/* timeline-bar--fourth-weeks */
.timeline-bar--fourth-weeks .timeline-bar__item--free,
.timeline-desc--fourth-weeks .timeline-desc__item--free {
  width: 51%;
}
.timeline-bar--fourth-weeks .timeline-bar__item--daily,
.timeline-desc--fourth-weeks .timeline-desc__item--daily {
  width: 34%;
}
@media screen and (min-width: 1000px) {
  .timeline-bar--fourth-weeks .timeline-bar__item--free,
  .timeline-desc--fourth-weeks .timeline-desc__item--free {
    width: 51%;
  }
  .timeline-bar--fourth-weeks .timeline-bar__item--daily,
  .timeline-desc--fourth-weeks .timeline-desc__item--daily {
    width: 34%;
  }
}
.timeline-label--fourth-weeks .timeline-label--one-month {
  left: calc(51% - 46px);
}
@media screen and (min-width: 1000px) {
  .timeline-label--fourth-weeks .timeline-label--one-month {
    left: calc(51% - 55px);
  }
}

/* timeline-bar--fifth-weeks */
.timeline-bar--fifth-weeks .timeline-bar__item--free,
.timeline-desc--fifth-weeks .timeline-desc__item--free {
  width: 58%;
}
.timeline-bar--fifth-weeks .timeline-bar__item--daily,
.timeline-desc--fifth-weeks .timeline-desc__item--daily {
  width: 27%;
}
.timeline-desc--fifth-weeks .timeline-desc__item--daily {
  padding-left: 0;
  margin-left: -10px;
}
@media screen and (min-width: 1000px) {
  .timeline-bar--fifth-weeks .timeline-bar__item--free,
  .timeline-desc--fifth-weeks .timeline-desc__item--free {
    width: 68%;
  }
  .timeline-bar--fifth-weeks .timeline-bar__item--daily,
  .timeline-desc--fifth-weeks .timeline-desc__item--daily {
    width: 17%;
  }
  .timeline-desc--fifth-weeks .timeline-desc__item--daily {
    padding-left: 1.5%;
    margin-left: 0;
  }
}
.timeline-label--fifth-weeks .timeline-label--one-month {
  left: calc(58% - 48px);
}
@media screen and (min-width: 1000px) {
  .timeline-label--fifth-weeks .timeline-label--one-month {
    left: calc(68% - 63px);
  }
}

/* timeline-bar--3-days-ago */
.timeline-bar--3-days-ago .timeline-bar__item--free,
.timeline-desc--3-days-ago .timeline-desc__item--free {
  width: 58%;
}
.timeline-bar--3-days-ago .timeline-bar__item--daily,
.timeline-desc--3-days-ago .timeline-desc__item--daily {
  width: 27%;
}
.timeline-desc--3-days-ago .timeline-desc__item--daily {
  padding-left: 0;
  margin-left: -10px;
}
@media screen and (min-width: 500px) {
  .timeline-bar--3-days-ago .timeline-bar__item--free,
  .timeline-desc--3-days-ago .timeline-desc__item--free {
    width: 70%;
  }
  .timeline-bar--3-days-ago .timeline-bar__item--daily,
  .timeline-desc--3-days-ago .timeline-desc__item--daily {
    width: 15%;
  }
  .timeline-desc--3-days-ago .timeline-desc__item--daily {
    position: relative;
    right: 8px;
    padding-left: 1.5%;
    margin-left: 0;
  }
}
@media screen and (min-width: 1000px) {
  .timeline-bar--3-days-ago .timeline-bar__item--free,
  .timeline-desc--3-days-ago .timeline-desc__item--free {
    width: 75%;
  }
  .timeline-bar--3-days-ago .timeline-bar__item--daily,
  .timeline-desc--3-days-ago .timeline-desc__item--daily {
    width: 10%;
  }
  .timeline-desc--3-days-ago .timeline-desc__item--daily {
    position: relative;
    right: 8px;
    padding-left: 1.5%;
    margin-left: 0;
  }
}

.timeline-label--3-days-ago .timeline-label--one-month {
  left: calc(58% - 50px);
}
@media screen and (min-width: 500px) {
  .timeline-label--3-days-ago .timeline-label--one-month {
    left: calc(70% - 56px);
  }
}
@media screen and (min-width: 1000px) {
  .timeline-label--3-days-ago .timeline-label--one-month {
    left: calc(75% - 68px);
  }
}

.timeline-label {
  position: absolute;
  display: block;
  width: 100%;
  height: 24px;
  z-index: 1;
}
.timeline-label--start,
.timeline-label--one-month,
.timeline-label--next-month {
  display: inline-block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  width: 54px;
}
@media screen and (min-width: 1000px) {
  .timeline-label--start,
  .timeline-label--one-month,
  .timeline-label--next-month {
    font-size: 14px;
    width: 67px;
  }
}
.timeline-label__desc {
  display: inline-block;
  font-size: 11px;
  line-height: 1;
  width: 100%;
}

/* .sns
-------------------------------------------------------------------------- */
.sns__container {
  margin: 32px auto 0;
  max-width: 400px;
}
.sns__list {
  display: block;
  font-size: 10px;
  line-height: 1.65;
}

@media screen and (min-width: 1000px) {
  .sns__container {
    margin-top: 48px;
  }
  .sns__list {
    font-size: 12px;
    line-height: 1.65;
  }
}

/* .m-table
-------------------------------------------------------------------------- */
.m-table__prices {
  display: inline-table;
  background-color: #fff;
  /* width: 66.666667%; */
  padding: 10px 16px;
  border: 1px solid #acdcff;
  margin: 32px auto 0;
}
@media screen and (min-width: 375px) {
  .m-table__prices {
    padding: 10px 15px;
  }
}
@media screen and (min-width: 1000px) {
  .m-table__prices {
    padding: 10px 20px;
  }
}
.m-table__prices-inner {
  display: table-row;
}
.m-table__price-desc {
  display: table-cell;
  vertical-align: middle;
  font-weight: bold;
  font-size: 14px;
  text-align: left;
  width: 83px;
  letter-spacing: -0.2px;
}
@media screen and (min-width: 375px) {
  .m-table__price-desc {
    width: 84px;
    letter-spacing: 0;
  }
}
@media screen and (min-width: 1000px) {
  .m-table__price-desc {
    font-size: 1.6rem;
    width: 96px;
  }
}
.m-table__price-cost {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.5;
}
@media screen and (min-width: 1000px) {
  .m-table__price-cost {
    font-size: 18px;
  }
}
.m-table__price-cost--sub {
  display: inline-block;
  margin-left: 0.25em;
  font-weight: normal;
}
.m-table__price-cost--c-blue {
  color: #336e9c;
}
.m-table__price-cost--td-l {
  text-decoration: line-through;
}
.m-table__price-cost--fw-n {
  font-weight: normal;
}

/* .m-txt
-------------------------------------------------------------------------- */
.m-txt__sm {
  font-size: 10px;
}
@media screen and (min-width: 1000px) {
  .m-txt__sm {
    font-size: 12px;
  }
}
/* #btn-end
   -------------------------------------------------------------------------- */
.btn-end {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: none;
  flex-direction: row;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}
/* m-link__local__row--link
-------------------------------------------------------------------------- */
.m-link__local__row--link {
  color: var(--color-link);
  text-decoration: underline;
}
.m-link__local__row--link:visited {
  color: var(--sem-plain-tertiary);
}
@media (hover:hover) {
  .m-link__local__row--link:hover {
    text-decoration: none;
    opacity: 1;
  }
}

@media screen and (min-width: 1000px) {
  .m-link__local__row--link:hover img {
    opacity: 0.7;
  }
}

.btn-end-in {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-height: 42px;
  padding: 9px 30px;
  border-radius: 4px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.33;
  text-decoration: none;
  letter-spacing: 0.1em;
  background-color: #0a385b;
  cursor: pointer;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  .btn-end-in {
    min-width: 664px;
    min-height: 65px;
    border-radius: 4px;
    font-size: 2.4rem;
  }
}

/* #btn-pagetop
   -------------------------------------------------------------------------- */
.btn-pagetop {
  opacity: 0;
  position: fixed;
  z-index: 10;
  right: 15px;
  bottom: 43px;
  width: 36px;
  height: 36px;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

@media screen and (min-width: 1000px) {
  .btn-pagetop {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 72px;
    height: 72px;
  }
}

@media screen and (min-width: 1000px) {
  .btn-pagetop_wrap {
    position: fixed;
    right: 0;
    bottom: 43px;
    left: 0;
    width: 100%;
    min-width: 1054px;
    max-width: 1174px;
    height: 0;
    margin: 0 auto;
  }
}

.btn-pagetop a {
  display: block;
  visibility: hidden;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

@media screen and (min-width: 1000px) {
  .btn-pagetop a {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
  }
}

@media screen and (min-width: 1000px) {
  .btn-pagetop a:hover {
    opacity: 0.7;
  }
}

.btn-pagetop img {
  width: 100%;
}

/* 表示されるとき */
.btn-pagetop.is-show {
  opacity: 1;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  -webkit-transform: rotateY(360deg);
  transform: rotateY(360deg);
}

.btn-pagetop.is-show a {
  visibility: visible;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
}

/* #btn-wrap
   -------------------------------------------------------------------------- */
.btn-wrap {
  text-align: center;
  max-width: 280px;
  margin: 32px auto 0;
}

@media screen and (min-width: 1000px) {
  .btn-wrap {
    max-width: 500px;
    margin: 40px auto 0;
  }
}

.btn-wrap.s-wide {
  margin-top: 30px;
}

.btn__group {
  margin: 32px auto 24px;
}

.btn {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: none;
  flex-direction: row;

  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
}

.btn__item {
  font-size: 1.2rem;
  line-height: 1.65;
}

.btn__item + .btn__item {
  margin-top: 16px;
}

.btn-in {
  display: -webkit-inline-box;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  height: 48px;
  padding: 0 12px;
  color: #fff;
  font-size: 1.6rem;
  font-weight: normal;
  text-decoration: none;
  letter-spacing: 0.1em;
  background-color: #f78600;
  cursor: pointer;
  font-weight: 500;
  border-radius: 2px;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.c-button {
  font-family: var(--font-family-bold);
  font-weight: 700;
  padding: 12px 32px;
}
@media screen and (min-width: 1000px) {
  .btn__group {
    margin-top: 40px;
  }

  .btn-in {
    min-width: 300px;
    height: 81px;
    font-size: 30px;
    font-size: 3rem;
    padding: 0 12px;
  }

  .btn__item {
    font-size: 1.6rem;
    line-height: 1.5;
  }
}
/* #fig-option
  -------------------------------------------------------------------------- */
.fig-option {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 66px;
  padding: 0 10px;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.btn.is-google img {
  max-width: 176px;
}

@media screen and (min-width: 1000px) {
  .fig-option {
		height: 135px;
  }
}

@media screen and (min-width: 1000px) {
  .fig-option-img.s-viewer {
		width: 90px;
  }
  .fig-option-img.s-mj {
		width: 80px;
  }
  .fig-option-img.s-digital {
		width: 230px;
  }
  .fig-option-img.s-watch {
		width: 238px;
  }
  .fig-option-img.s-premium {
		width: 268px;
  }
}

/* #fig-plan
  -------------------------------------------------------------------------- */
.fig-plan-term {
  margin-top: 30px;
}

@media screen and (min-width: 1000px) {
  .fig-plan-term {
    margin-top: 40px;
  }
}

.fig-plan-term-wrap {
  margin: 0 -10px;
}

@media screen and (min-width: 1000px) {
  .fig-plan-term-wrap {
    margin: 0;
  }
}

.fig-plan-term-img-pc {
  max-width: 90%;
  display: none !important;
}

@media screen and (min-width: 1000px) {
  .fig-plan-term-img-pc {
    max-width: 100%;
    display: block !important;
  }
}

.fig-plan-term-img-sp {
  margin: 0 auto;
  max-width: 94%;
  display: block !important;
}

@media screen and (min-width: 1000px) {
  .fig-plan-term-img-sp {
    max-width: 100%;
    display: none !important;
  }
}

/* #hero
  -------------------------------------------------------------------------- */
.hero {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  color: #fff;
  flex-direction: column;

  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  background: url(../images/bg_mainvisual_sv_sp.jpg) 0 0 / cover no-repeat;
}
.hero-in {
  position: relative;
  height: 440px;
}
@media screen and (min-width: 1000px) {
  .hero {
    background: url(../images/bg_mainvisual_sv.jpg) -400px 0 / cover no-repeat;
  }
  .hero-in {
    position: relative;
    width: 100%;
    max-width: 1290px;
    min-width: 1000px;
    height: 553px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1300px) {
  .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 46% 0 / cover no-repeat;
  }
}
@media screen and (min-width: 2000px) {
  .hero {
    background: url(../images/bg_mainvisual_sv.jpg) 60% 0 / auto 100% no-repeat;
  }
}
.hero-in::before {
  content: "";
  position: absolute;
  top: 54%;
  right: 8px;
  width: 309px;
  height: 250px;
  background: url(../images/20251210_MJ_noBanzuke_1343_1028.png) no-repeat;
  background-size: contain;
}
/* @media screen and (max-width: 375px) {
  .hero-in::before {
    top: 50%;
  }
} */
@media screen and (min-width: 650px) {
  .hero-in::before {
    width: 410px;
    height: 322px;
    top: 40%;
  }
}
@media screen and (min-width: 1000px) {
  .hero-in::before {
    top: 26%;
    right: 24px;
    width: 585px;
    height: 463px;
  }
}
@media screen and (min-width: 1260px) {
  .hero-in::before {
    top: 24%;
    right: 8px;
    width: 652px;
    height: 500px;
  }
}
.hero-logo {
  display: none;
  margin-left: auto;
  position: absolute;
  top: 25.135624%;
  left: 2%;
  font-size: 0;
}
@media screen and (min-width: 1000px) {
  .hero-logo {
    display: inline-block;
  }
}
@media screen and (min-width: 1340px) {
  .hero-logo {
    left: 0;
  }
}
.hero-logo__item {
  display: inline-block;
  width: 320px;
}
.hero-logo__label {
  display: inline-block;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  padding: 2px 21px;
  border-radius: 20px;
  margin-top: 16px;
}
.hero-text {
  display: inline-block;
  margin-left: auto;
  position: absolute;
  top: 31.363636%;
  left: 2%;
  right: 2%;
}
@media screen and (min-width: 1000px) {
  .hero-text {
    height: auto;
    bottom: 14%;
    top: 63.652803%;
  }
}
@media screen and (min-width: 1340px) {
  .hero-text {
    height: auto;
    left: 0;
  }
}

.hero-read {
  font-size: 2.8vw;
  font-weight: bold;
}

.hero-text-read {
  display: inline-block;
  font-size: 2rem;
  text-align: left;
  top: 74px;
  line-height: 1.6;
  margin-top: 8px;
  letter-spacing: 2.5px;
  line-height: 1.6;
  font-weight: 500;
  background-color: #6098d6;
  padding: 2px 8px;
}
.hero-text-note {
  color: #333;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 8px;
}
@media screen and (min-width: 650px) {
  .hero-text-read {
    font-size: 2.4rem;
  }
}
@media screen and (min-width: 1000px) {
  .hero-text-read {
    font-size: 3rem;
    text-align: left;
    top: 74px;
    line-height: 1.6;
    letter-spacing: 2.5px;
    line-height: 1.6;
    padding: 0;
    padding: 4px 16px;
    margin-top: 8px;
    display: inline-block;
  }
  .hero-text-read--d-n-pc + .hero-text-read {
    position: relative;
    top: 0;
    left: -22px;
    padding-left: 0;
  }
  .hero-text-read--d-n-pc {
    display: none;
  }
  .hero-read {
    width: 424px;
    margin-left: auto;
    font-size: 2.4rem;
    font-weight: normal;
  }
}
@media screen and (min-width: 1260px) {
  .hero-text-read--d-n-xl + .hero-text-read {
    position: relative;
    top: 0;
    left: -0.4em;
    padding-left: 0;
  }
  .hero-text-read--d-n-xl {
    display: none;
  }
}

.hero-pr {
	background-color: #f78600;
	font-size: 2rem;
}
@media screen and (min-width: 1000px) {
	.hero-pr {
		font-size: 3rem;
	}
}

.hero-read-dsr3 {
  font-size: 3.3vw;
  margin-left: 54%;
  margin-right: 5px;
  font-weight: bold;
}

@media screen and (min-width: 1000px) {
  .hero-read-dsr3 {
    width: 380px;
    margin-left: auto;
    margin-right: 0;
    font-size: 3rem;
    text-align: center;
    font-weight: normal;
  }
}

.hero-title {
  margin-top: 5px;
  font-size: 25vw;
  font-weight: bold;
  line-height: 1.1;
}

@media screen and (min-width: 1000px) {
  .hero-title {
    margin: 3px -10px 0 0;
    font-size: 20rem;
  }
}

@media screen and (min-width: 1000px) {
  .hero-end .hero-title {
    margin: 50px -10px 0 0;
  }
}

.hero .btn-wrap {
    margin-top: 16px;
}

@media screen and (min-width: 1000px) {
  .hero .btn-wrap {
    right: 0;
    bottom: 80px;
    left: auto;
    margin-top: 32px;
  }
}

.hero .btn-in {
  min-width: 0;
  height: 42px;
  width: 100%;
  font-size: 1.4rem;
}
.btn-wrap .btn {
  display: block;
}
@media screen and (min-width: 1000px) {
  .hero .btn-in {
    width: auto;
    min-width: 300px;
    font-size: 2.4rem;
    height: 74px;
  }
}
.hero-sub {
  text-align: left;
  background-color: #ffffbc;
  padding: 8px 16px;
  font-size: 1rem;
}

@media screen and (min-width: 1000px) {
  .hero-sub {
    text-align: center;
    background-color: #ffffbc;
    padding: 16px 0;
    font-size: 1.4rem;
  }
}
.hero-pc {
  display: none !important;
}
@media screen and (min-width: 1000px) {
  .hero-sp {
    display: none !important;
  }
  .hero-pc {
    display: inline-block !important;
  }
}
.hero-in span {
  display: inline-block;
}

/* subscriberLink
  --------------------------------------------------------------------------*/
  .subscriberLink {
    height: 48px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

@media screen and (min-width: 1000px) {
  .subscriberLink {
      height: 56px;
    }
}

.subscriberLink-text {
  font-size: 1.2rem;
}
@media screen and (min-width: 1000px) {
  .subscriberLink-text {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1000px) {
  .subscriberLink-text {
    font-size: 1.6rem;
  }
}
  .subscriberLink-text a {
    color: #fff;
}

/* #ico-arrow
  -------------------------------------------------------------------------- */
.ico-arrow::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-width: 4px 0 4px 3px;
  border-style: solid;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

@media screen and (min-width: 1000px) {
  .ico-arrow::before {
    border-width: 8px 0 8px 10px;
  }
}

/* #ico-slide
  -------------------------------------------------------------------------- */
.ico-slide::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-top: 2px;
  border-width: 7px 4px 0 4px;
  border-style: solid;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (min-width: 1000px) {
  .ico-slide::before {
    border-width: 11px 7px 0 7px;
  }
}

.is-active .ico-slide::before {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* #Link-ico
   -------------------------------------------------------------------------- */
.link-ico {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: left;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

.link-ico > :first-child {
  margin-right: 3px;
}

@media screen and (min-width: 1000px) {
  .link-ico > :first-child {
    margin-right: 8px;
  }
}

/* #list-option
-------------------------------------------------------------------------- */
.list-option {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 15px -10px -18px;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

@media screen and (min-width: 1000px) {
  .list-option {
    margin: 30px -17px -30px;
  }
}

.list-option-item {
  width: 43%;
  margin: 0 7px 18px;
}

@media screen and (min-width: 1000px) {
  .list-option-item {
    width: 322px;
    margin: 0 17px 30px;
  }
}

/* #list-qa
-------------------------------------------------------------------------- */
.list-qa {
  margin-top: 10px;
  font-size: 1.2rem;
  line-height: 1.7;
}

@media screen and (min-width: 1000px) {
  .list-qa {
    margin-top: 25px;
    font-size: 1.4rem;
    line-height: 1.9;
  }
}

.list-qa-item {
  margin-top: 8px;
  background-color: #fff;
}

@media screen and (min-width: 1000px) {
  .list-qa-item {
    margin-top: 17px;
    font-size: 1.4rem;
  }
}

.list-qa-item:first-child {
  margin-top: 0;
}

.list-qa-question {
	cursor: pointer;
	display: block;
  overflow: hidden;
  position: relative;
  padding: 8px 24px 8px 12px;
  border-radius: 2px;
  width: 100%;
  text-align: inherit;
  transition: all var(--transition-speed) ease-out;
}
@media (any-hover: hover) {
  .list-qa-question:hover {
    background-color: var(--pri-gray-40);
    opacity: 1;
  }
}

@media screen and (min-width: 1000px) {
  .list-qa-question {
    padding: 10px 36px 10px 24px;
  }
}

@media screen and (min-width: 1000px) {
  .list-qa-question:hover {
    opacity: 0.75;
  }
}

.list-qa-question::before {
  content: "Q";
  float: left;
  margin-right: 1em;
  font-size: 1.6rem;
}

@media screen and (min-width: 1000px) {
  .list-qa-question::before {
    font-size: 1.8rem;
  }
}

.list-qa-body {
  display: block;
  overflow: hidden;
  padding-top: 4px;
}

@media screen and (min-width: 1000px) {
  .list-qa-body {
    padding-top: 2px;
  }
}
.list-qa-text {
  color: #333;
}
@media screen and (min-width: 1000px) {
  .list-qa-text {
    font-size: 1.6rem;
  }
}
.list-qa-answer {
  display: none;
  position: relative;
  padding: 7px 15px 7px 10px;
}

@media screen and (min-width: 1000px) {
  .list-qa-answer {
    padding: 20px 36px 20px 23px;
  }
}

.list-qa-answer::before {
  content: "A";
  float: left;
  margin-right: 10px;
  font-size: 1.6rem;
}

@media screen and (min-width: 1000px) {
  .list-qa-answer::before {
    margin-right: 23px;
    font-size: 1.8rem;
  }
}

.list-qa-question .ico-slide,
.list-qa-answer .ico-slide {
  position: absolute;
  top: 0;
  right: 8px;
  bottom: 0;
  height: 8px;
  margin: auto;
}

@media screen and (min-width: 1000px) {
  .list-qa-question .ico-slide,
  .list-qa-answer .ico-slide {
    right: 16px;
    height: 16px;
  }
}

/*「質問」を開いたとき*/
.is-active .list-qa-answer {
  display: block;
}

/* #List service
   -------------------------------------------------------------------------- */
.list-service {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 24px 0 0;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  .list-service {
    max-width: 100%;
  }
}
.serviceListBox {
  width: 100%;
  margin-left: auto;
  background-color: rgba(45, 92, 164, 0.6);
  padding: 24px 0;
}
@media screen and (min-width: 1000px) {
  .serviceListBox {
    width: 100%;
    height: 100%;
    padding: 24px 80px;
    margin-left: auto;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -ms-align-items: center;
    -webkit-align-items: center;
    align-items: center;
  }
}
@media screen and (min-width: 1260px) {
  .serviceListBox {
    width: 50%;
    padding: 24px 0;
  }
}

.serviceListInner {
  margin: 0 auto;
  width: 85%;
}

.list-service-item {
  width: 100%;
  text-align: center;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.list-service-item + .list-service-item {
  margin-top: 32px;
}

@media screen and (min-width: 1000px) {
  .list-service-item {
    width: calc((100% - 41px) / 2);
    margin-top: 40px;
  }
.list-service-item + .list-service-item {
  margin-top: 40px;
  }
  .list-service-item:nth-of-type(2n) {
    margin-left: 40px;
  }
}

.list-service-icon {
  margin-right: 24px;
  text-align: right;
  min-width: 40px;
}
.list-service-icon img {
  width: 40px;
}

@media screen and (min-width: 1000px) {
  .list-service-icon {
    min-width: 40px;
  }
}
@media screen and (min-width: 1000px) {
  .list-service-icon {
    min-width: 40px;
  }
}

.list-service-title {
  color: #333;
  font-size: 1.4rem;
  font-weight: normal;
  text-align: left;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .list-service-title {
    font-size: 1.6rem;
  }
}
@media screen and (min-width: 1000px) {
  .list-service-title {
    font-size: 1.8rem;
    font-weight: 300;
  }
}

.list-service-text {
  width: 100%;
  margin: 8px auto 0;
  margin-top: 8px;
  font-size: 1.2rem;
  line-height: 1.6;
  text-align: left;
  color: #fff;
}

@media screen and (min-width: 768px) {
  .list-service-text {
    font-size: 1.4rem;
  }
}

@media screen and (min-width: 1000px) {
  .list-service-text {
    margin-top: 8px;
    font-size: 1.4rem;
  }
}

/* #nbd service
   -------------------------------------------------------------------------- */
.nbd-service-wrap {
  width: 100%;
  background-color: #fff;
}

.nbd-service-content {
  padding: 24px;
  margin-top: 8px;
  border: 1px solid #e17ea8;
  border-radius: 2px;
  padding: 32px 8px 16px;
}

@media screen and (min-width: 1000px) {
  .nbd-service-content {
    padding: 56px 32px 40px;
    margin-top: 32px;
    border: 2px solid #e17ea8;
    border-radius: 4px;
  }
}

.nbd-service-content p {
  font-size: 1.2rem;
  padding: 16px;
  line-height: normal;
  margin-top: 4px;
}

@media screen and (min-width: 1000px) {
  .nbd-service-content p {
    font-size: 1.5rem;
    margin-top: 24px;
  }
}

.nbd-service-img {
  margin: 0 auto;
  display: block !important;
}

@media screen and (min-width: 1000px) {
  .nbd-service-img {
    width: 80%;
    margin: 0 auto;
    display: block !important;
  }
}

/* #nav-utility
  -------------------------------------------------------------------------- */
.nav-utility {
  padding: 25px 0;
}

@media screen and (min-width: 1000px) {
  .nav-utility {
    padding: 20px 0;
  }
}

.nav-utility-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: -11px;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.nav-utility-list-item {
  margin: 11px 24px 0;
}

.nav-utility-list-link {
  font-size: 12px;
  line-height: 1.8;
}

@media screen and (min-width: 1000px) {
  .nav-utility-list-link {
    text-decoration: none;
  }
}

.nav-utility-list-link:hover {
  color: #8a8a8a;
}

/* #sec-option
-------------------------------------------------------------------------- */
.sec-option {
  padding: 20px 0 30px;
}

@media screen and (min-width: 1000px) {
  .sec-option {
    padding: 40px 0 55px;
  }
}

@media screen and (min-width: 1000px) {
  .sec-option-inner {
    width: 1034px;
    margin: 0 auto;
  }
}

.sec-svContent {
    padding: 48px 8px 32px;
    /*background-color: #f3f3f3;*/
  }
  @media screen and (min-width: 650px) {
    .sec-svContent {
      padding: 104px 24px 80px;
    }
}
  @media screen and (min-width: 1000px) {
    .sec-svContent {
      padding: 72px 24px 80px;
    }
}

/* #sec-plan
-------------------------------------------------------------------------- */
.sec-plan {
  padding: 20px 8px 30px;
}

@media screen and (min-width: 1000px) {
  .sec-plan {
    padding: 55px 20px 55px;
  }
}

/* #sec-qa
-------------------------------------------------------------------------- */
.sec-qa {
  padding: 20px 0 10px;
  background-color: #f3f3f3;
}

@media screen and (min-width: 1000px) {
  .sec-qa {
    padding: 30px 0 20px;
  }
}
@media screen and (min-width: 1260px) {
  .sec-qa {
    padding: 40px 0 20px;
  }
  #subscriber + .sec-qa {
    padding: 40px 0 20px;
    padding-top: 104px;
  }
}

@media screen and (min-width: 1000px) {
  .sec-qa-child {
    margin-bottom: 30px;
  }
}

.sec-qa-child:last-child {
  margin-bottom: 0;
}

/* #sec-service
-------------------------------------------------------------------------- */
.sec-service {
  position: relative;
  color: #333;
  background: #fff url(../images/bg_service.jpg) -120px -80px / auto 185% no-repeat;
  z-index: -1;
}
@media screen and (min-width: 1000px) {
  .sec-service {
    background: #fff url(../images/bg_service.jpg) 0 20% / cover no-repeat;
    height: 495px;
  }
}
.sec-service:before {
  content: "";
  background: inherit;
  width: 100%;
  filter: blur(2px);
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  z-index: -1;
}
@media screen and (min-width: 1000px) {
  .sec-service:before {
    content: "";
    background: inherit;
    filter: blur(0px);
  }
}

/* #sec-device
-------------------------------------------------------------------------- */
.sec-device {
  color: #333;
  padding: 32px 8px;
  background: linear-gradient(0deg, rgba(45, 92, 164, 0.85), rgba(45, 92, 164, 0.85)), url(../images/bg_device.jpg) center center / cover no-repeat;
}
@media screen and (min-width: 500px) {
  .sec-device {
    background: linear-gradient(0deg, rgba(45, 92, 164, 0.85), rgba(45, 92, 164, 0.85)), url(../images/bg_device.jpg) 60% center / cover no-repeat;
  }
}
@media screen and (min-width: 1000px) {
  .sec-device {
    background: linear-gradient(0deg, rgba(45, 92, 164, 0.85), rgba(45, 92, 164, 0.85)), url(../images/bg_device.jpg) center 0 / cover no-repeat;
  }
}
.sec-device__box {
  color: #fff;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 85, 162, 0.8); */
  padding: 0 16px;
}
@media screen and (min-width: 1000px) {
  .sec-device__box {
    padding: 0;
  }
}
.sec-device__box-inner {
  text-align: center;
  margin: 0 auto;
}
@media screen and (min-width: 1000px) {
  .sec-device__box-inner {
    width: 85%;
  }
}

/* #ttl-01
-------------------------------------------------------------------------- */
.ttl-01 {
  font-size: 1.8rem;
  line-height: 1.28;
  text-align: center;
  font-weight: normal;
  color: #333;
  position: relative;
  padding-bottom: 24px;
  font-weight: 300;
}

.ttl-01:before {
  content: "";
  position: absolute;
  bottom: 0;
  display: inline-block;
  width: 56px;
  height: 4px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #6098d6;
}
.ttl-sub-01 {
  display: inline-block;
  font-size: 1.2rem;
  margin-top: 8px;
  width: 100%;
}
.ttl-danger {
  color: #f78600;
	font-weight: 600;
}
@media screen and (min-width: 768px) {
  .ttl-01 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 1000px) {
  .ttl-01 {
    font-size: 2.8rem;
    /*
    letter-spacing: 0.1em;
    */
  }
  .ttl-sub-01 {
    font-size: 1.6rem;
    margin-top: 0;
  }
}
.sec-plan .ttl-01 {
  color: #616161;
}
.ttl-sub-01--block {
  display: block;
  margin-top: 8px;
}
/* #ttl-02
-------------------------------------------------------------------------- */
.ttl-02 {
  margin-top: 8px;
  font-size: 1.6rem;
  text-align: center;
  font-weight: 500;
}

@media screen and (min-width: 768px) {
  .ttl-02 {
    margin-top: 8px;
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1000px) {
  .ttl-02 {
    margin-top: 8px;
    font-size: 2.8rem;
  }
}

/* #ttl-03
-------------------------------------------------------------------------- */
.ttl-03,
.ttl-03__table {
  font-size: 1.6rem;
  color: #fff;
  text-align: center;
  font-weight: 300;
}
.ttl-03__subtitle,
.ttl-03__subtitle-table {
  color: #fff;
  text-align: center;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 30px;
}
.ttl-03__subtitle-table {
  display: inline-block;
}
.ttl-03__subtitle-table span {
  display: inline-block;
	vertical-align: middle;
}
.ttl-03__subtitle-icon {
  display: inline-block;
  width: 86px;
  height: 86px;
}
.ttl-03__subtitle-icon img {
  width: 86px;
}
.ttl-03__subtitle-txt {
  padding-left: 18px;
  padding-right: 18px;
  font-family: 'ヒラギノ角ゴ Pro W6', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', sans-serif;
  font-size: 0;
  text-align: center;
  margin-bottom: 20px;
}
.ttl-03__subtitle-txt > span:not(.ttl-03__subtitle-txt-sm) {
  font-size: 24px;
}
@media screen and (min-width: 768px) {
  .ttl-03 {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1000px) {
  .ttl-03 {
    font-size: 2.8rem;
    text-align: center;
  }
  .ttl-03__subtitle-txt {
    margin-bottom: 0;
    padding-right: 0;
    text-align: left;
  }
}

/* #ttl-04
-------------------------------------------------------------------------- */
.ttl-04 {
  margin-top: 12px;
  font-size: 1.2rem;
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .ttl-04 {
    margin-top: 24px;
    font-size: 2.4rem;
  }
}

/* #subtitle
-------------------------------------------------------------------------- */
.subtitle {
  font-size: 1.4rem;
}
h2 .subtitle {
  font-size: 1.2rem;
}
@media screen and (min-width: 1000px) {
  h2 .subtitle {
    font-size: 1.4rem;
  }
}

/* #attention
-------------------------------------------------------------------------- */
.attention {
    text-align: center;
    font-size: 1rem;
    margin-top: 4px;
}

@media screen and (min-width: 1000px) {
  .attention {
    text-align: center;
    font-size: 1.3rem;
    margin-top: 8px;
  }
}

/* -----------------------------------------------------------------------------
   #Project
   -------------------------------------------------------------------------- */
/* caution
  -------------------------------------------------------------------------- */
.caution {
  padding: 0 0 30px;
  background-color: #f3f3f3;
  font-feature-settings: "palt";
  font-size: 12px;
  line-height: 1.9;
}
@media screen and (min-width: 768px) {
  .caution {
    padding: 0 0 30px;
    color: #333;
    background-color: #f3f3f3;
    font-size: 14px;
    line-height: 1.8;
  }
}
.caution.caution-01 .caution-list{
  width: 100%;
  margin: 0 auto;
  padding: 7.81% 8px 0;
}
@media screen and (min-width: 1000px) {
  .caution.caution-01 .caution-list {
    width: 100%;
    padding: 34px 20px 0;
    font-size: 14px;
  }
}
.caution-title {
  font-size: 1.8rem;
  font-weight: bold;
}
.caution-heading {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
}
.caution-list-desc {
  position: relative;
  margin-left: 1em;
}
.caution-list-desc::before {
  display: block;
  content: '';
  position: absolute;
  top: 0.8em;
  left: -1em;
  width: 4px;
  height: 4px;
  background-color: #333;
  border-radius: 100%;
}
@media screen and (min-width: 768px) {
  .caution-list-desc::before {
    top: 0.65em;
    width: 6px;
    height: 6px;
  }
}
.caution-list-sub {
  padding-left: 2em;
  text-indent: -1em;
}
.caution-list-sub.caution-list-sub-txt {
  padding-left: 1em;
  text-indent: 0;
}
.caution-list-item {
  padding: 1em 0 0 1em;
}
.caution-list-link {
  color: var(--color-link);
  text-decoration: underline;
}
@media (hover:hover) {
  .caution-list-link:hover {
    text-decoration: none;
    opacity: 1;
  }
}
.caution-list-link:visited {
  color: var(--sem-plain-tertiary);
}


.caution .common-inner {
  padding: 0;
}
@media screen and (min-width: 768px) {
  .caution .common-inner {
    width: 1034px;
  }
}
.caution-list {
  font-feature-settings: "palt";
  font-size: 1.2rem;
  font-weight: 400;
  width: auto;
  margin: 0 auto;
  padding: 32px 0 0 0;
  line-height: 1.8;
}
@media screen and (min-width: 768px) {
  .caution-list {
   font-size: 1.4rem;
  }
}

/* caution-list-tbl共通 */
.caution-list-tbl01,
.caution-list-tbl02,
.caution-list-tbl-th,
.caution-list-tbl-td {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-collapse: collapse;
  color: #000;
  text-align: center;
  vertical-align: middle;
}
.caution-list-tbl01,
.caution-list-tbl02 {
  width: 100%;
  background-color: #fff;
}
.caution-list-tbl-th {
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}
.caution-list-tbl-th,
.caution-list-tbl-td  {
  display: table-cell !important;
  padding: 2%;
}
@media screen and (min-width: 768px) {
  .caution-list-tbl-th,
  .caution-list-tbl-td {
    padding: 10px;
  }
}
.caution-list-tbl-th--wid01 {
  width: 19%;
}
.caution-list-tbl-th--wid02 {
  width: 57%;
}
.caution-list-tbl-th--col2 {
  width: 50%;
}
.caution-list-tbl-th--col3 {
  width: 33.33333%;
}
@media screen and (min-width: 768px) {
  .caution-list-tbl-th--wid01 {
    width: auto;
  }
  .caution-list-tbl-th--wid02 {
    width: 78%;
  }
}
.caution-list-tbl-th--border {
  border-top: none;
  border-bottom: 3px double #000;
}

/* caution-list-tbl02 */
.caution-list-tbl02 .caution-list-tbl-td {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-collapse: collapse;
  color: #000;
  text-align: left;
  vertical-align: middle;
}

/* mod-caution
-------------------------------------------------------------------------- */
.mod-caution {
  padding: 30px 0 30px;
  font-size: 12px;
  line-height: 1.9;
  background-color: #f3f3f3;
}
.mod-caution-top-spaced {
  margin-top: 16px;
}
.mod-caution-list-desc {
  position: relative;
  margin-left: 1em;
}
.mod-caution-list-desc:before {
  display: block;
  content: "";
  position: absolute;
  top: 0.8em;
  left: -1em;
  width: 4px;
  height: 4px;
  background-color: #333;
  border-radius: 100%;
}
@media screen and (min-width: 768px) {
  .mod-caution-list-desc::before {
    top: 0.65em;
    width: 6px;
    height: 6px;
  }
}

@media screen and (min-width: 1000px) {
  .mod-caution {
    padding: 30px 0 30px;
    color: #333;
    font-size: 14px;
    line-height: 1.8;
    background-color: #f3f3f3;
  }
}

.mod-caution a:link {
  color: #67779f;
}

@media screen and (min-width: 1000px) {
  .sec-inner {
    position: relative;
    max-width: 1290px;
    margin-right: auto;
    margin-left: auto;
  }
}

.mod-caution dl {
  width: 100%;
  margin: 0 auto;
  padding: 7.81% 8px 0;
}

@media screen and (min-width: 1000px) {
  .mod-caution dl {
    width: 100%;
    padding: 34px 20px 0;
    font-size: 14px;
  }
}

.mod-caution dl dt {
  color: #333;
	margin-top: 1em;
	font-weight: 600;
}
.mod-caution dl dd {
	padding-left: 2em;
}

/* .mod-caution dl dd {
  padding-left: 1em;
  text-indent: -1em;
} */
/*
@media screen and (min-width: 1000px) {
  .mod-caution dl dd {
    padding-left: 1em;
    text-indent: -1em;
  }
}*/

.mod-caution dl table,
.mod-caution dl table th,
.mod-caution dl table td {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-collapse: collapse;
  color: #000;
  text-align: center;
  vertical-align: middle;
}

.mod-caution dl table.table2 td {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #000;
  border-collapse: collapse;
  color: #000;
  text-align: left;
  vertical-align: middle;
}

.mod-caution dl table {
  width: 100%;
}

.mod-caution dl table th {
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
}

.mod-caution dl table th,
.mod-caution dl table td {
  display: table-cell !important;
  padding: 2%;
}

@media screen and (min-width: 1000px) {
  .mod-caution dl table th,
  .mod-caution dl table td {
    padding: 10px;
  }
}

.mod-caution dl table.tab01 .wid01 {
  width: 19%;
}

@media screen and (min-width: 1000px) {
  .mod-caution dl table.tab01 .wid01 {
    width: auto;
  }
}

.mod-caution dl table.tab01 .wid02 {
  width: 27%;
}

.mod-caution dl table.tab02 th,
.mod-caution dl table.tab02 td {
  width: 50%;
}

.mod-caution dl table.tab01 .bor2_1,
.mod-caution dl table.tab01 .bor2_2,
.mod-caution dl table.tab01 .bor2_3 {
  border-bottom: 1px dotted #000;
}

.mod-caution dl table.tab01 .bor2_4 {
  border-bottom: 3px double #000 !important;
}

.mod-caution dl table.tab01 .bor3_1,
.mod-caution dl table.tab01 .bor3_2,
.mod-caution dl table.tab01 .bor3_3 {
  border-top: none;
  border-bottom: 3px double #000;
}

.mod-caution dl table.tab01 .wid03 {
  width: 19%;
}

@media screen and (min-width: 1000px) {
  .mod-caution dl table.tab01 .wid03.bor3_1 {
    width: 15%;
  }
  .mod-caution dl table.tab01 .wid03.bor3_2,
  .mod-caution dl table.tab01 .wid03.bor3_3 {
    width: 30%;
  }
}

/* mod-caution
-------------------------------------------------------------------------- */
.mod-end {
  position: relative;
  z-index: 1;
  margin-top: -17.7vw;
  padding: 12px 0 17px;
  color: #fff;
  font-size: 16px;
  background-color: #0a385b;
}

@media screen and (min-width: 1000px) {
  .mod-end {
    margin: 0;
    padding: 34px 0 30px;
    font-size: 24px;
  }
}

.mod-end-text {
  margin-bottom: 12px;
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .mod-end-text {
    margin-bottom: 29px;
  }
}

.mod-end .btn-end-in {
  color: #0a385b;
  background-color: #fff;
}

@media screen and (min-width: 1000px) {
  .mod-end .btn-end-in {
    padding: 12px 30px 6px;
  }
}

/* mod-option
-------------------------------------------------------------------------- */
.mod-option-card {
  border: 1px solid;
  border-radius: 2px;
}

.mod-option-price {
  height: 25px;
  padding: 4px 0;
  color: #fff;
  text-align: center;
  vertical-align: middle;
}

@media screen and (min-width: 1000px) {
  .mod-option-price {
    height: 50px;
    padding: 12px 0;
    font-size: 2.4rem;
  }
}

.mod-option-text {
  margin-top: 8px;
  font-size: 1rem;
  text-align: center;
}

@media screen and (min-width: 1000px) {
  .mod-option-text {
    font-size: 1.2rem;
    line-height: 1.24;
  }
}
/* sv-content
-------------------------------------------------------------------------- */
.sv-content-list__container {
  position: relative;
}
.sv-content-list__container:after {
  content: "";
  position: absolute;
  top: 0;
  right: -17px;
  width: 24px;
  height: 100%;
  background-color: red;

  background: -moz-linear-gradient(left,  rgba(243,243,243,0) 0%, rgba(243,243,243,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(243,243,243,0) 0%,rgba(243,243,243,1) 100%);
  background: linear-gradient(to right,  rgba(243,243,243,0) 0%,rgba(243,243,243,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3f3f3', endColorstr='#f3f3f3',GradientType=1 );
}
.sv-content-list__row {
  margin-right: -16px;
}
.sv-content-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0 0;
  padding: 0;

  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.sv-content-list--scroll {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
}
.sv-content-list--scroll:after {
  content: "";
  display: block;
  flex: 0 0 16px;
  max-width: 16px;
}

@media screen and (min-width: 1000px) {
  .sv-content-list {
    margin: 32px 0 0;
    flex-wrap: nowrap;
  }
}

.sv-content-item {
  width: 100%;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
}
.sv-content-item + .sv-content-item {
  margin-top: 35px;
}
.sv-content-list--scroll .sv-content-item {
  display: block;
  flex: 0 0 214px;
  max-width: 214px;
}
.sv-content-list--scroll .sv-content-item--logo {
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  flex: 0 0 80px;
  max-width: 80px;
  padding-bottom: 64px;
}
.sv-content-list--scroll .sv-content-item + .sv-content-item {
  margin-left: 16px;
  margin-top: 0;
}
@media screen and (min-width: 768px) {
  .sv-content-list--scroll .sv-content-item--logo {
    padding-bottom: 136px;
  }
  .sv-content-list--scroll .sv-content-item + .sv-content-item {
    margin-left: 24px;
  }
}
@media screen and (min-width: 1000px) {
  .sv-content-item {
  width: 312px;
  display: block;
  margin-top: 0;
  }
  .sv-content-item + .sv-content-item {
    margin-left: 35px;
    margin-top: 0;
  }
  .sv-content-list--scroll .sv-content-item {
    flex: 0 0 312px;
    max-width: 312px;
  }
  .sv-content-list--scroll .sv-content-item + .sv-content-item {
    margin-left: 35px;
    margin-top: 0;
  }
  .sv-content-list--scroll .sv-content-item--logo {
    flex: 0 0 104px;
    max-width: 104px;
    padding-bottom: 56px;
  }
}
@media screen and (min-width: 1260px) {
  .sv-content-item {
    width: 406px;
  }
}

.sv-content-item02 {
  width: 100%;
  margin: 0 auto 10px;
}

@media screen and (min-width: 1000px) {
  .sv-content-item02 {
    width: 510px;
    margin: 0 8px 34px;
  }
}

.sv-content-card {
  border: 1px solid;
  border-radius: 2px;
}

.sv-content-head {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 75px;
  padding: 10px 12px 10px;
	background-color: #fff;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 1000px) {
  .sv-content-head {
    flex-direction: column;
    padding: 10px 24px 19px;

    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
  }
}

.sv-content-img {
  width: calc((100% - 24px) / 2);
}
.sv-content-list--scroll .sv-content-img {
  width: 100%;
}
@media screen and (min-width: 1000px) {
  .sv-content-img {
    width: 100%;
  }
}

.sv-content-text {
  display: inline-block;
  float: left;
  margin-left: 12px;
  width: calc(100% / 2);
}
.sv-content-list--scroll .sv-content-text {
  width: 100%;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .sv-content-text {
    margin-left: 24px;
    width: calc((100% - 24px) / 2);
  }
}

@media screen and (min-width: 1000px) {
  .sv-content-text {
    width: 100%;
    margin: 0;
  }
}

.sv-content-title {
  font-size: 1.2rem;
  background-color: #6098d6;
  padding: 4px 8px;
  color: #fff;
  display: inline-block;
  letter-spacing: -1px;
}
.sv-content-list--scroll .sv-content-title {
  margin-top: 16px;
}
@media screen and (min-width: 768px) {
  .sv-content-title {
    font-size: 1.8rem;
    letter-spacing: 0;
  }
}
@media screen and (min-width: 1000px) {
  .sv-content-title {
    font-size: 1.8rem;
    line-height: 1.5;
    display: inline-block;
    margin-top: 20px;
  }
  .sv-content-list--scroll .sv-content-title {
    margin-top: 20px;
  }
}

.sv-content-title .s-small {
  display: inline-block;
  margin-right: -30%;
  font-size: 1rem;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}

@media screen and (min-width: 1000px) {
  .sv-content-title .s-small {
    margin-right: 0;
    font-size: 1.4rem;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.sv-content-price {
  position: relative;
  font-size: 1.2rem;
}

@media screen and (min-width: 1000px) {
  .sv-content-price {
    font-size: 2.4rem;
    text-align: center;
  }
}

.sv-content-price-large {
  margin-left: 2px;
  font-size: 2rem;
}

@media screen and (min-width: 1000px) {
  .sv-content-price-large {
    font-size: 3rem;
  }
}

.sv-content-price-asterisk {
  position: absolute;
  color: #333;
  font-size: 1rem;
}

.sv-content-detail {
  position: relative;
  font-size: 1.2rem;
  margin-top: 8px;
}

@media screen and (min-width: 768px) {
  .sv-content-detail {
    position: relative;
    margin: 8px 0;
    line-height: 1.5;
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1000px) {
  .sv-content-detail {
    position: relative;
    margin: 16px 0;
    line-height: 1.6;
    font-size: 1.4rem;
  }
}

.sv-content-point {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 40px;
  padding: 8px 8px 8px;
  color: #fff;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*マージン調整*/
ul.sv-content-list .sv-content-card div:nth-of-type(3).sv-content-point {
	padding: 0 8px 8px;
}

@media screen and (min-width: 1000px) {
  .sv-content-point {
    padding: 16px 20px;
  }
  ul.sv-content-list .sv-content-card div:nth-of-type(3).sv-content-point {
    padding: 16px 20px;
  }
}

.sv-content-point02 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 40px;
  padding: 0 8px 8px;
  color: #fff;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  .sv-content-point02 {
    padding: 16px 20px 8px;
  }
  .sv-content-point02:last-child {
    padding: 0px 20px 16px;
  }
}

.sv-content-point03 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 40px;
  padding: 8px 8px 8px;
  color: #fff;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  .sv-content-point03 {
    padding: 28px 20px 24px;
  }
}

.-subtext {
  margin-right: 10px;
  font-size: 10px;
  text-align: left;
}

.sv-content-point-subtext {
  padding-right: 12px;
  font-size: 1.6rem;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-subtext {
    margin-right: 15px;
    padding: 0;
    font-size: 2rem;
  }
}

.sv-content-point-subtext.s-fontsize-01 {
  font-size: 1.6rem;
  padding-right: 12px;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-subtext.s-fontsize-01 {
    font-size: 2rem;
    padding-right: 0px;
  }
}

.sv-content-point-subtext.s-margin-01 {
  margin: 0 7px 3px;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-subtext.s-margin-01 {
    margin: 0 22px 0 0;
    font-size: 1.8rem;
  }
}

.sv-content-point-text {
  font-size: 2.8rem;
  line-height: 1.4;
  font-weight: bold;

  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-text {
    font-size: 6rem;
    line-height: 1;
	font-weight: normal;
  }
}

.sv-content-point-text.s-fontsize-01 {
  font-size: 1.7rem;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-text.s-fontsize-01 {
    font-size: 3.6rem;
  }
}

.sv-content-point-btn {
  background-color: #245483;
  font-size: 1.6rem;
  color: #fff !important;
  font-weight: normal;
  width: 100%;
  height: 48px;
  text-align: center;
  border-radius: 4px;
  padding-top: 12px;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-btn {
    background-color: #245483;
    font-size: 2.2rem;
    color: #fff !important;
    font-weight: normal;
    width: 100%;
    height: 132px;
    text-align: center;
    border-radius: 4px;
    padding-top: 48px;
  }
}

.sv-content-point-btn02 {
  background-color: #f37f45;
  font-size: 1.6rem;
  color: #fff !important;
  font-weight: normal;
  width: 100%;
  height: 48px;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  padding-top: 12px;
  letter-spacing: 0.1em;
}

@media screen and (min-width: 1000px) {
  .sv-content-point-btn02 {
    background-color: #f37f45;
    font-size: 2.2rem;
    color: #fff !important;
    font-weight: normal;
    width: 100%;
    height: 62px;
    text-align: center;
    text-decoration: none;
    border-radius: 4px;
    padding-top: 18px;
  }
}

.sv-content-fig {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 18px;
  text-align: center;

  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

@media screen and (min-width: 1000px) {
  .sv-content-fig {
    padding-left: 0px;
    margin-top: 16px;
  }
}

.sv-content-fig-image {
  width: 100%;
  margin: 0 auto;
}

@media screen and (min-width: 1000px) {
  .sv-content-fig-image {
    width: 100%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1000px) {
  .sv-content-point-present {
    font-size: 2.4rem;
  }
}

.sv-content-link {
  text-decoration: none;

  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media screen and (min-width: 1000px) {
  .sv-content-link {
    margin: 10px 0 0 0;
    font-size: 1.6rem;

    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
}

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

.sv-content-attention-list {
  margin-top: 5px;
  font-size: 1rem;
  text-align: left;
  letter-spacing: -0.05em;
}

@media screen and (min-width: 1000px) {
  .sv-content-attention-list {
    margin-top: 15px;
    font-size: 1.2rem;
    line-height: 1.7;
    text-align: left !important;
    letter-spacing: normal;
  }
}

@media screen and (max-width: 374px) {
  .sv-content-attention-list {
    text-align: left;
  }
}

.sv-content-term-list {
  margin-top: 7px;
  font-size: 1rem;
  letter-spacing: -0.025em;
}

@media screen and (min-width: 1000px) {
  .sv-content-term-list {
    margin-top: 20px;
    font-size: 1.2rem;
    line-height: 1.7;
    letter-spacing: normal;
  }
}

/* -----------------------------------------------------------------------------
   #scope
   -------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------
  #Utility
  -------------------------------------------------------------------------- */

/* pc
-------------------------------------------------------------------------- */
.is-pc,
.is-pc__block {
  display: none;
}
@media screen and (min-width: 1000px) {
  .is-sp {
    display: none;
  }
  .is-pc {
    display: inline-block;
  }
  .is-pc__block {
    display: block;
  }
}
.is-apple {
  display: none;
}
.is-google {
  display: inline;
}
.iphone .is-apple {
  display: inline;
}
.iphone .is-google {
  display: none;
}

/* u-txt
-------------------------------------------------------------------------- */
.u-txt_red {
  color: #d11100;
}
.u-txt--strong {
  font-weight: 700 !important;
}
.u-txt--palt {
  -webkit-font-feature-settings: "palt" !important;
  font-feature-settings: "palt" !important;
}
.u-background--lp {
  background-color: #f3f3f3 !important;
}
.u-pt__0 {
  padding-block-start: 0 !important;
}
.u-mt__1 {
  margin-block-start: 4px !important;
}
.__none-spaced {
  margin-top: 0 !important;
}
.__15-spaced {
  margin-top: 15px !important;
}

/* #Align
  -------------------------------------------------------------------------- */
/*doc
---
name: s-align
category: utility
tag: Align
---

画像などを左右や中央に配置します。

```ejs
<div class="s-left">
 <img src="http://via.placeholder.com/150x150">
</div>

<div class="s-center">
 <img src="http://via.placeholder.com/150x150">
</div>

<div class="s-right">
 <img src="http://via.placeholder.com/150x150">
</div>
```
*/
.s-left {
  text-align: left !important;
}

@media screen and (min-width: 375px) {
  .s-left-sm {
    text-align: left !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-left-md {
    text-align: left !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-left-lg {
    text-align: left !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-left-xl {
    text-align: left !important;
  }
}

.s-center {
  text-align: center !important;
}

@media screen and (min-width: 375px) {
  .s-center-sm {
    text-align: center !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-center-md {
    text-align: center !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-center-lg {
    text-align: center !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-center-xl {
    text-align: center !important;
  }
}

.s-right {
  text-align: right !important;
}

@media screen and (min-width: 375px) {
  .s-right-sm {
    text-align: right !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-right-md {
    text-align: right !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-right-lg {
    text-align: right !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-right-xl {
    text-align: right !important;
  }
}

/* #Price
  -------------------------------------------------------------------------- */

#price {
    padding: 40px 0 40px;
}
@media screen and (min-width: 1000px) {
  #price {
      padding: 40px 24px 80px;
  }
}
.table-price {
  border-bottom: 1px solid #e7e7e7;
  font-size: 1rem;
  letter-spacing: -0.02em;
  background-color: #fff;
  margin-top: 24px;
}
.table-price tbody + tbody:before {
  content: "";
  display: block;
  height: 20px;
  width: 100%;
}
.table-price-icon {
  margin-right: 8px;
  min-width: 24px;
}
.table-price-icon:before {
  content: "";
  margin-right: 8px;
  min-width: 24px;
}
@media screen and (min-width: 768px) {
  .table-price-icon {
    margin-right: 12px;
    min-width: 24px;
  }
}
@media screen and (min-width: 1000px) {
  .table-price-icon {
    min-width: 24px;
  }
}
.table-price-icon img {
  min-width: 24px;
}
@media screen and (min-width: 768px) {
  .table-price-icon img {
    width: 24px;
  }
}

.table-price-title {
  text-indent: -3em;
  padding-left: 3em !important;
}
.table-price-title:before {
  content: "";
  display: inline-block;
  height: 24px;
  width: 24px;
  background: url(../images/ico_company_vs.svg) no-repeat;
  background-size: contain;
  margin-right: 8px;
}
@media screen and (min-width: 768px) {
  .table-price-title {
    text-indent: -1em;
    padding-left: 1em !important;
  }
  .table-price-title:before {
    margin-right: 12px;
  }
}

@media screen and (min-width: 1000px) {
  .table-price {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    font-size: 1.8rem;
    margin-top: 40px;
  }
}

.table-price thead th {
  /* display: none; */
  text-align: center;
  font-size: 1rem;
  /* width: 20.1%; */
  width: 24%;
  border-top: none;
}

@media screen and (min-width: 321px) {
  .table-price thead th {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1000px) {
  .table-price thead th {
    width: 11.1%;
    padding-left: 2px;
    border-top: none;
    font-size: 1.4rem;
    text-align: center;
  }
  .table-price thead th:first-child {
    border-left: none;
  }
}

.table-price thead th:nth-child(1) {
  width: 40%;
}

.table-price thead th:nth-child(2) {
  width: 36%;
}

.table-price thead th:nth-child(3) {
  width: 24%;
}

@media screen and (min-width: 1000px) {
  .table-price thead th:nth-child(1) {
    width: 35.5%;
	}

	.table-price thead th:nth-child(4) {
    width: 21.1%;
	}

	.table-price thead th:nth-child(5) {
    width: 20%;
	}
	.table-price thead th:nth-child(2) {
    width: 11.1%;
	}

	.table-price thead th:nth-child(3) {
    width: 11.1%;
	}
}
@media screen and (min-width: 1000px) {
  .table-price thead {
    display: table-header-group;
  }
}

.table-price tbody th,
.table-price tbody td {
  height: 64px;
}

@media screen and (max-width: 399px) {
  .table-price tbody th,
  .table-price tbody td {
    height: 74px;
    padding: 4px;
  }
}

@media screen and (min-width: 1000px) {
  .table-price tbody th,
  .table-price tbody td {
    height: auto;
  }
}

.table-price tbody th {
  font-size: 1rem;
}

@media screen and (min-width: 321px) {
  .table-price tbody th {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1000px) {
  .table-price tbody th {
    font-size: 1.5rem;
  }
}

.sp-none {
	display: none;
}

@media screen and (min-width: 1000px) {
	.sp-none {
		display: table-cell;
	}
}

.table-price th,
.table-price td {
  padding: 4px 0;
  border-top: 1px solid #e7e7e7;
  font-weight: normal;
}

@media screen and (min-width: 1000px) {
  .table-price th,
  .table-price td {
    padding: 7px 2px;
  }
}

.table-price th {
  width: 35%;
}

@media screen and (min-width: 1000px) {
  .table-price th {
    width: 30%;
    padding-left: 0;
    font-size: 1.2rem;
  }
}

.table-price td {
  text-align: center;
      border-left: 1px solid #e7e7e7;
}

@media screen and (min-width: 1000px) {
  .table-price td {
    border-left: 1px solid #e7e7e7;
  }
}

.table-price td:nth-child(4) {
  width: 36%;
}

@media screen and (min-width: 1000px) {
  .table-price td:nth-child(4) {
    width: auto;
  }
}

@media screen and (min-width: 1000px) {
  .table-price td:nth-child(5) {
    width: auto;
  }
}

.table-price .link-ico {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@media screen and (min-width: 1000px) {
  .table-price .link-ico {
    font-size: 1.8rem;
  }
}

.table-price-display {
  /* display: none; */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
}

@media screen and (min-width: 1000px) {
  .table-price-display {
    display: table-cell;
  }
}

.table-price-bg {
  font-size: 1.2rem;
  background-color: #90aed8;
}

@media screen and (min-width: 1000px) {
  .table-price-bg {
    font-size: 1.8rem;
  }
}
.table-price .table-price-comingSoon {
  color: #fff;
  background-color: #90aed8;
}
.table-price .table-price-monthly {
  color: #6097d6;
  background-color: #e8f0f9;
}
.table-price .table-price-comingSoon,
.table-price .table-price-monthly {
  font-size: 1.2rem;
}

@media screen and (min-width: 321px) {
  .table-price .table-price-comingSoon,
  .table-price .table-price-monthly {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1000px) {
  .table-price .table-price-comingSoon,
  .table-price .table-price-monthly {
    font-size: 1.8rem;
    height: 61px;
  }
}

.comingSoon {
  display: none;
}

/* 0227追加 .table-price-btn
   -------------------------------------------------------------------------- */
.table-price-btn {
  font-size: 1.2rem;
  background-color: #f78600;
  color: #fff;
}

@media screen and (min-width: 1000px) {
  .table-price-btn {
    font-size: 1.8rem;
  }
}

.table-price-notes {
  display: block;
  width: 120%;
  font-size: 1rem;
  -webkit-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

@media screen and (min-width: 1000px) {
  .table-price-text {
    font-size: 1.2rem;
  }
}

.table-price-cut {
  display: inline-block;
  position: relative;
  padding: 0 7px;
  font-size: 1rem;
}

@media screen and (min-width: 1000px) {
  .table-price-cut {
    padding: 0 11px;
    font-size: 1.5rem;
  }
}

.table-price-cut::before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  margin: auto;
  background-color: #ec4d90;
}

.mod-lead {
  display: block;
  font-size: 1.6rem;
  width: 100%;
  margin: 28px auto 0;
  padding-left: 1em;
}
@media screen and (min-width: 768px) {
  .mod-lead {
    width: 511px;
    margin: 28px auto 0;
  }
}
.mod-lead__item {
  position: relative;
  font-size: 1.2rem;
}
@media screen and (min-width: 768px) {
  .mod-lead__item {
    font-size: 1.6rem;
  }
}
.mod-lead__item:not(:first-of-type) {
  margin-top: 8px;
}
.mod-lead__item:before {
  content: "";
  display: block;
  position: absolute;
  top: 0.55em;
  left: -1em;
  width: 6px;
  height: 6px;
  background-color: #333;
  border-radius: 100%;
}
.mod-lead__item a {
  text-decoration: underline;
}
.mod-lead-item-notes {
    margin-top: 18px;
    font-size: 1.2rem;
    text-align: center;
}
@media screen and (min-width: 1000px) {
  .mod-lead-item-notes {
      margin-top: 24px;
      font-size: 1.6rem;
  }
}
.mod-lead-item-notes a {
  text-decoration: underline;
}

/* #pre-free-guide
  -------------------------------------------------------------------------- */
#pre-free-guide {
  background-color: #ebf1f9;
  overflow: hidden;
  padding: 32px 8px;
}
@media screen and (min-width: 1000px) {
  #pre-free-guide {
      padding: 56px 16px;
  }
}

.pre-free-guide-box {
  text-align: center;
  max-width: 1485px;
  padding: 0 16px;
}
@media screen and (min-width: 1000px) {
  .pre-free-guide-box {
    text-align: center;
    max-width: 1485px;
    padding: 32px 0;
  }
}

/* #pre-guide
  -------------------------------------------------------------------------- */
#pre-guide {
    background-color: #6098d6;
    padding: 32px 8px;
}
@media screen and (min-width: 1000px) {
  #pre-guide {
      padding: 56px 16px;
  }
}

.pre-guide-box {
  text-align: center;
  background-color: #f7f7f7;
  max-width: 1485px;
  padding: 24px 16px;
}
@media screen and (min-width: 1000px) {
  .pre-guide-box {
    text-align: center;
    background-color: #fff;
    max-width: 1485px;
    padding: 32px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
}

.pre-guide-detail {
  font-size: 1.2rem;
  margin-top: 16px;
  line-height: 1.6;
}
@media screen and (min-width: 768px) {
  .pre-guide-detail {
    font-size: 1.2rem;
  }
}
@media screen and (min-width: 1000px) {
    .pre-guide-detail {
      font-size: 1.4rem;
    }
}
/* #subscriber
   -------------------------------------------------------------------------- */
#subscriber {
    margin: 18px 0 0;
    background-color: #eeeeee;
    padding: 40px 0 40px;
}
@media screen and (min-width: 768px) {
  #subscriber {
      font-size: 1.4rem;
  }
}
@media screen and (min-width: 1260px) {
  #subscriber {
      margin: 24px 0 0;
      padding: 40px 0 10px;
      height: 480px;
  }
}

.subscriber-listBox {
  margin: 0 0 0 0;
}
@media screen and (min-width: 1000px) {
  .subscriber-listBox {
    padding: 0;
  }
}
@media screen and (min-width: 1260px) {
    .subscriber-listBox {
      display: -webkit-flex;
      display: -ms-flex;
      display: flex;
      padding: 40px 0 32px;
      justify-content: space-between;
      /* max-width: 1320px; */
      margin: 0 0 0 0;
      /* position: absolute; */
    }
}

.subscriber-listContent {
  background-color: #fff;
  padding: 16px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  margin-top: 24px;
}
@media screen and (min-width: 1000px) {
  .subscriber-listContent {
    margin: 24px;
  }
}
@media screen and (min-width: 1260px) {
  .subscriber-listContent {
    width: 406px;
    width: calc((100% - 40px) / 3);
    height: 340px;
    background-color: #fff;
    padding: 32px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: 0;
    z-index: 5;
  }
}
.subscriber-listContent + .subscriber-listContent {
  margin-top: 24px;
}
@media screen and (min-width: 1260px) {
  .subscriber-listContent + .subscriber-listContent {
    margin-left: 24px;
    margin-top: 0;
  }
}
.subscriber-listTitle {
  font-size: 1.8rem;
  text-align: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #90aed8;
}
@media screen and (min-width: 1000px) {
  .subscriber-listTitle {
    font-size: 2.4rem;
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #90aed8;
  }
}
.subscriber-sbox {
  margin-top: 24px;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 1260px) {
  .subscriber-sbox {
    margin-top: 24px;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
    height: 192px;
  }
}
.subscriber-sbox figure {
  margin-top: 16px;
  margin-bottom: 16px;
}
.appImg img {
  width: 64px;
}
@media screen and (min-width: 1000px) {
  .appImg img {
    width: 78px;
  }
}
.subscriber-sboxContent {
  text-align: center;
  width: 50%;
  height: 100%;
  padding: 8px 32px 8px 0;
}
.subscriber-sboxContent + .subscriber-sboxContent {
  border-left: 1px solid #dededf;
  padding: 8px 0 8px 18px;
}
@media screen and (min-width: 1260px) {
  .subscriber-sboxContent {
    padding: 0 32px 0 0;
  }
  .subscriber-sboxContent + .subscriber-sboxContent {
    border-left: 1px solid #dededf;
    padding: 0 0 0 32px;
  }
}
.sboxTitle {
  font-size: 1.8rem;
  color: #90aed8;
}
.sboxL {
  font-size: 2.4rem;
}
@media screen and (min-width: 321px) {
  .sboxL {
    font-size: 2.8rem;
  }
}
@media screen and (min-width: 1000px) {
  .sboxL {
    font-size: 3.2rem;
  }
}
.sbcText01 {
  margin-top: 0px;
}
@media screen and (min-width: 1000px) {
  .sbcText01 {
    margin-top: 0px;
  }
}
@media screen and (min-width: 1260px) {
  .sbcText01 {
    margin-top: 32px;
  }
}
.sbcText02 {
  margin-top: 8px;
}
.noteText {
  text-align: center;
}

.grayScale {
  margin: 28px 0 28px;
  width: 100%;
  height: 400px;
  background-color: #ddd;
}

/* #Display
   -------------------------------------------------------------------------- */
/*doc
---
name: s-display
category: utility
tag: Display
---

表示非表示を切り替えます。改行位置のコントロールもできます。

```ejs
<p class="s-dn-md"><code>$-md</code>以降は非表示になります。</p>
<p class="s-dn s-db-md"><code>$-md</code>以降は表示されます。</p>
<p>基本はなりゆきでウィンドウサイズが狭くなると、<span class="s-dib">ここから改行されます。</span></p>
<p><code>$-md</code>以降になると、<span class="s-db-md">ここから改行されます。</span></p>
```
*/
.s-dn {
  display: none !important;
}

@media screen and (min-width: 375px) {
  .s-dn-sm {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-dn-md {
    display: none !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-dn-lg {
    display: none !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-dn-xl {
    display: none !important;
  }
}

.s-db {
  display: block !important;
}

@media screen and (min-width: 375px) {
  .s-db-sm {
    display: block !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-db-md {
    display: block !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-db-lg {
    display: block !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-db-xl {
    display: block !important;
  }
}

.s-di {
  display: inline !important;
}

@media screen and (min-width: 375px) {
  .s-di-sm {
    display: inline !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-di-md {
    display: inline !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-di-lg {
    display: inline !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-di-xl {
    display: inline !important;
  }
}

.s-dib {
  display: inline-block !important;
}

@media screen and (min-width: 375px) {
  .s-dib-sm {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-dib-md {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1000px) {
  .s-dib-lg {
    display: inline-block !important;
  }
}

@media screen and (min-width: 1200px) {
  .s-dib-xl {
    display: inline-block !important;
  }
}

/* #inner
  -------------------------------------------------------------------------- */
.s-inner {
  padding-right: 8px;
  padding-left: 8px;
}

@media screen and (min-width: 1000px) {
  .s-inner {
    max-width: 1290px;
    margin-right: auto;
    margin-left: auto;
    padding-right: 0;
    padding-left: 0;
  }
}

/* #Sr-only
   -------------------------------------------------------------------------- */
/*doc
---
name: s-sr-only
category: utility
tag: Sr-only
---

要素を非表示にさせますが、スクリーンリーダーには読み上げられます。

```block
<div>
  <span class="p-icon p-icon--rss" aria-hidden="true"></span>
  <span class="s-sr-only">rss購読</span>
</div>
```
*/
.s-sr-only {
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
}

/* 11262020 update分
  -------------------------------------------------------------------------- */
/* .ttl-03 */
.ttl-03__subtitle-table div {
  display: table-cell;
  vertical-align: middle;
}
.ttl-03__subtitle-txt-sm {
  font-size: 10px;
  font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo,
    'ＭＳ Ｐゴシック', sans-serif;
  vertical-align: middle;
}
@media screen and (min-width: 1000px) {
  .ttl-03__subtitle-txt-sm {
    font-size: 16px;
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
  }
}

/* .m-list__apps */
.m-list__apps-figure.__code > img {
  width: 100%;
  max-width: 100px;
}
.m-list__apps-item.__code,
.m-list__apps-item.__iphone-code {
  flex: 0 0 100px;
  max-width: 100px;
  padding-left: 0px;
}
.m-list__apps-item.__iphone-desc,
.m-list__apps-item.__desc {
  padding-right: 0px;
  margin-right: 22px;
}
.m-list__apps-title {
  text-align: center;
  padding: 5px 0 15px;
}
.m-list__apps {
  border-radius: 3px;
}
.m-list__apps-specific {
  margin: 20px auto 0;
}
@media screen and (min-width: 1000px) {
  .m-list__apps {
    max-width: 960px;
    width: 90%;
  }
  .m-list__apps-specific {
    margin: 0 auto 0;
  }
}

/* .sec-device */
.sec-device {
  padding: 32px 0 48px;
}
.sec-device__box {
  padding: 0;
}
.sec-device__mock {
  -ms-flex-negative: 1;
	flex-shrink: 1;
  -webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
  -ms-flex-preferred-size: 186px;
	flex-basis: 186px;
  max-width: 186px;
}
.sec-device__mock-wrapper {
  -webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 24px 16px 20px;
  margin-bottom: 20px;
  border-bottom: solid 1px rgba(225, 225, 225, 0.4);
}
.sec-device__mock-title {
  font-size: 10px;
  margin-bottom: 8px;
}
.sec-device__mock-title:before {
  content: "";
  background-color: #f78600;
  border-radius: 50%;
  display: inline-block;
  font-size: 8px;
  height: 6px;
  margin-right: 2px;
  width: 6px;
  vertical-align: middle;
}
.sec-device__mock-text {
  display: inline-block;
  vertical-align: middle;
}
.sec-device__mock-img {
  width: 186px;
  height: auto;
}
.sec-device__icon {
  box-sizing: content-box;
  -ms-flex-negative: 1;
	flex-shrink: 1;
  -webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
  -ms-flex-preferred-size: 65px;
	flex-basis: 65px;
  max-width: 65px;
  padding: 15px 20px 0;
}
.sec-device__icon-img {
  width: 100%;
  max-width: 65px;
}
@media screen and (min-width: 1000px) {
  .sec-device {
    height: auto;
    padding: 72px 36px 90px;
  }
  .sec-device__box {
    padding: 0;
  }
  .sec-device__mock-wrapper {
    border-bottom: none;
    margin-bottom: 40px;
    padding: 24px 16px 0;
  }
  .sec-device__mock-title {
    font-size: 15px;
  }
  .sec-device__mock-title:before {
    height: 8px;
    margin-right: 4px;
    width: 8px;
  }
  .sec-device__icon {
    padding: 24px 40px 0;
  }
}

/* .m-note */
li.l-col.__46--md.sec-device__iphone {
  flex: auto;
  max-width: 288px;
}
li.l-col.__54--md.sec-device__android {
  flex: auto;
  max-width: 327px;
  margin-left: 30px;
}

.visibility--hidden {
  visibility: hidden;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
  overflow: hidden;
}

.c-note-list {
  list-style: none;
  counter-reset: note-counter;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.65;
  text-align: left;
  margin-top: 16px;
  margin-inline: auto;
}
.c-note-list__group {
  margin-top: 32px;
}
.c-note-list__title {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.65;
  margin-bottom: 12px;
  text-align: left;
}
.c-note-list__item {
  position: relative;
  padding-left: 1em;
}
.c-note-list__item::before {
  content: "※";
  position: absolute;
  left: 0;
  top: 0;
  color: #333;
}
.c-note-list__item--no-marker {
  padding-left: 0;
  &::before {
    display: none;
  }
}
.c-note-list__item--no-marker::before {
  display: none;
}
.c-note-list__item--increment {
  counter-increment: note-counter;
  padding-left: 2em;
}
.c-note-list__item--increment::before {
  content: "※" counter(note-counter);
}
.c-note-list__item--disc::before {
    content: "・";
  }
.c-note-list__item.m-note__general--beginning {
  display: none;
}
@media screen and (min-width: 1000px) {
  .c-note-list {
    margin-top: 12px;
  }
}

/* ******************************************************
#info
****************************************************** */

#information .section_subttl {
  --clamp-min: 18;
  --clamp-max: 40;
  padding: 1em 0;
  line-height: 1.3;
  text-align: center;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
  font-weight: bold;
	width: 90%;
	margin: auto;
}
#information .section_subttl em{
	color: #ea513a;
}
#information .section_ttl {
  --clamp-min: 18;
  --clamp-max: 24;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
  padding: 0;
  line-height: 1.3;
  text-align: center;
  font-weight: bold;
}
#information .section_ttl b {
  position: relative;
  display: inline-block;
  line-height: 1.5;
}
#information .section_ttl em{
	color: #336e9c;
}
/*#information .section_ttl small {
  display: block;
  margin-top: 1em;
  font-size: 46.1%;
  color: #336e9c;
}*/
#information .section_ttl.second-t{
	margin-top: 3.5em;
	padding-bottom: 0;
}
.blk-recognize{
	margin: 40px auto 20px auto;
	width: 90%;
}
.blk-recognize h3{
    font-size: 3.846vw;
	text-align: center;
	color: #336e9c;
}
.blk-recognize h3 small{
	display: block;
    font-size: 80%;
}
.grid-reco-area{
	margin: 40px auto;
}
.col-reco{
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	margin-bottom: 30px;
}
.col-reco h4,
.single-reco-area h4{
  --clamp-min: 14;
  --clamp-max: 18;
	padding: 14px 10px 10px 10px;
	color:#2868a7;
	font-size: var(--clamp-fallback);
  font-size: var(--clamp);
	text-align: left;
	font-weight: bold;
}
.col-reco h4 em,
.single-reco-area h4 em{
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: #b21a40;
	color: #fff;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	margin-right: .5em;
}
.col-reco figure{
	width: 100%;
	background-color: #336e9c;
}
.col-reco figure img{
	width: 100%;
}
.col-reco figcaption{
  --clamp-min: 16;
  --clamp-max: 20;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
	background-color: #336e9c;
	padding: .5em 0 .3em 0;
	color: #fff;
	text-align: center;
	font-weight: bold;
	margin-bottom: .5em;
}
.col-reco figcaption small{
	display: block;
	font-size: 80%;
}
.col-reco dl{
	padding: 1em;
}
.col-reco dt,
.col-reco dd {
  --clamp-min: 14;
  --clamp-max: 18;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
}

.col-reco dt{
	font-weight: bold;
	color: #336e9c;
}
.col-reco dd{
	background-color: #f4f4f4;
	margin: .5em 0;
	padding: .6em;
}
.col-reco dd span{
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}
.single-reco-area{
	margin: 40px auto;
	box-shadow: 0 0 15px rgba(0,0,0,.1);
	margin-bottom: 130px;
	padding-bottom: 1em;
}
.single-reco-area p{
	font-size: 3.418vw;
	font-weight: bold;
	color: #336e9c;
	margin: -.5em 0 0 3em;
	padding-right: 1em;
}
.grid-reco-area-2 {
  margin: 0 auto;
}
.grid-reco-area-3{
	margin: 20px auto 0;
}
.grid-reco-area-2,
.grid-reco-area-3 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 1.5em 1em 1.5em;
}
.grid-reco-area-2 li{
  --clamp-min: 14;
  --clamp-max: 18;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
	font-weight: bold;
	position: relative;
}
.grid-reco-area-2 li em{
	display: inline-block;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background: #ea513a;
	color: #fff;
	text-align: center;
	line-height: 35px;
	font-size: 1.709vw;
	margin-right: .5em;
	font-weight: bold;
	position: absolute;
	top: -5px;
	left: -5px;
}
.grid-reco-area-3 li{
  --clamp-min: 14;
  --clamp-max: 18;
  font-size: var(--clamp-fallback);
  font-size: var(--clamp);
	font-weight: bold;
	position: relative;
}
.blk-recognize .grid-reco-area-3 span{
	color: #ea513a;
	padding: .5em .5em .3em .5em;
	line-height: 1;
	border: 1px solid #ea513a;
	font-weight: bold;
	display: inline-block;
}
.blk-recognize.orignal-cont{
	background: #eaf6ff;
	padding: 1.5em 0;
}
@media screen and (min-width: 768px), print {
  .grid-reco-area,
  .grid-reco-area-2,
  .grid-reco-area-3{
    display: flex;
    flex-direction: row;
    gap: 8px 16px;
    width: 100%;
    max-width: 920px;
    flex-wrap: wrap;
  }
.col-reco{
	width: 46.5%;
	}
.grid-reco-area-2 li em{
	width: 40px;
	height: 40px;
	line-height: 40px;
	top: -5px;
	left: 0;
}
}
@media screen and (min-width: 1000px), print {
#information .section_subttl {
	width: 100%;
	max-width: 720px;
	font-size: 40px;
}
#information .section_ttl {
    font-size: 24px;
  }
#information .section_ttl small {
  }
.grid-reco-area,
.grid-reco-area-2{
	display: flex;
	justify-content: space-between;
	max-width: 1116px;
	margin-bottom: 10px;
	flex-wrap: wrap;
	}
.col-reco{
	width: 31.5%;
	}
.col-reco h4{
	font-size: 18px;
	text-align: center;
	/*letter-spacing:-0.02em;*/
	}
.col-reco h4 em,
.single-reco-area h4 em{
	font-size: 16px;
	}
.col-reco figure{}
.col-reco figcaption{
	font-size: 20px;
}
.col-reco figcaption.space-2{
	padding-top: 1em;
	height: 3.65em;
	}
.col-reco dl{}
.col-reco dt{
	font-size: 18px;}
.col-reco dd{
	font-size: 16px;}
.single-reco-area{
	width: 780px;
	margin: 0 auto 30px auto;
}
.single-reco-area h4{
	font-size: 18px;
	padding-top: 1em;
	text-align: center;
}
.single-reco-area p{
	font-size: 20px;
}
.grid-reco-area-2 li{
	font-size: 18px;
	/*padding-left: 50px;*/
}
.grid-reco-area-2 li em{
	font-size: 12px;
	top: -10px;
}
.grid-reco-area-3{
	display: flex;
  align-items: center;
	justify-content: flex-start;
  gap: 16px;
	max-width: 1116px;
	flex-wrap: wrap;
  margin-bottom: 0;
  padding-bottom: 0;
}
.grid-reco-area-3 li{
	font-size: 18px;
	text-align: center;
}
	.grid-reco-area-3 li:last-child{
		margin-right: 0;
	}
.blk-recognize .grid-reco-area-3 span{
	width: 10em;
	font-size: 16px;
	}
}

body.mj .hero-text-read.mjcp{
  background-color: #C00708;
}

.hero-text-read.mjcp {
  font-size: 3rem;
  font-weight: 900;
}
@media screen and (min-width: 650px) {
  .hero-text-read.mjcp {
    font-size: 3.4rem;
  }
}
@media screen and (min-width: 1000px) {
  .hero-text-read.mjcp {
    font-size: 4rem;
  }