@charset "UTF-8";
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
sassを使用しているので、こちらのcssファイルを直接編集しないでください。
先祖返りの原因となります。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ==================================================
_Setting
================================================== */
/* _Reset
-------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  width: initial;
  height: initial;
  font-size: 100%;
  font: inherit;
  color: inherit;
  line-height: inherit;
  vertical-align: baseline;
  background: initial;
  border: 0;
}

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

body {
  line-height: inherit;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

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

*:not(table), *:not(table)::before, *:not(table)::after, *:not(tbody), *:not(tbody)::before, *:not(tbody)::after, *:not(thead), *:not(thead)::before, *:not(thead)::after, *:not(tfoot), *:not(tfoot)::before, *:not(tfoot)::after, *:not(tr), *:not(tr)::before, *:not(tr)::after, *:not(th), *:not(th)::before, *:not(th)::after, *:not(td), *:not(td)::before, *:not(td)::after {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* _Base
-------------------------------------------------- */
html,
body {
  font-size: 16px;
  color: #ffffff;
  background: #000000;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "palt" 1;
          font-feature-settings: "palt" 1;
  letter-spacing: .05em;
}

html {
  overflow: hidden;
}

img,
svg {
  vertical-align: bottom;
}

svg {
  width: 100%;
  height: auto;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="submit"],
input[type="reset"],
textarea,
button,
select {
  color: #ffffff;
  border: none;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  border-radius: 0;
  background: transparent;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="submit"],
input[type="reset"],
a,
button {
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

[data-hidden] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  color: transparent;
  opacity: 0;
  -webkit-transform: scale(0);
          transform: scale(0);
}

a {
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
}

a[href=""] {
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  a:hover {
    opacity: .5;
  }
}

@media screen and (min-width: 769px) {
  [data-device="sp"] {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  body {
    height: 100vh;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }
  img {
    max-width: 100%;
  }
  [data-device="pc"] {
    display: none !important;
  }
}

/* _Keyframe
-------------------------------------------------- */
@-webkit-keyframes audio {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  30% {
    -webkit-transform: scaleY(0.9);
            transform: scaleY(0.9);
  }
  50% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  70% {
    -webkit-transform: scaleY(0.9);
            transform: scaleY(0.9);
  }
  90% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes audio {
  0% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  10% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  30% {
    -webkit-transform: scaleY(0.9);
            transform: scaleY(0.9);
  }
  50% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  70% {
    -webkit-transform: scaleY(0.9);
            transform: scaleY(0.9);
  }
  90% {
    -webkit-transform: scaleY(1.4);
            transform: scaleY(1.4);
  }
  100% {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}

/* _Extend
-------------------------------------------------- */
@media screen and (min-width: 769px) {
  .m-contents {
    margin: auto;
    width: 680px;
  }
}

@media screen and (min-width: 769px) {
  .m-off, .m-info {
    margin: auto;
    width: 355px;
  }
}

html,
body, input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="submit"],
input[type="reset"],
textarea,
button,
select, .m-intro__copy, .m-modal, .m-info, .m-name {
  font-family: "メイリオ", Meiryo, sans-serif;
  font-weight: 300;
  letter-spacing: 0;
}

.g-header, .g-func__tap, .m-off__check + label, .m-off__total span {
  font-family: nimbus-sans, sans-serif;
  font-weight: 700;
  letter-spacing: .04em;
}

.g-footer__contact, .g-contents, .m-intro, .m-contents, .m-off {
  font-family: fot-klee-pro, sans-serif;
  font-weight: 600;
}

.g-header, .g-func, .g-func__btns, .m-intro, .m-intro__subttl i,
.m-intro__subttl u,
.m-intro__subttl span, .m-intro__txt i,
.m-intro__txt u,
.m-intro__txt span, .m-intro__icon i,
.m-intro__icon u,
.m-intro__icon span, .m-intro__txt--2, .m-intro__copy, .m-visual__ttl, .m-visual__txt, .m-pagetop {
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

/* ==================================================
_Status
================================================== */
/* _Is
-------------------------------------------------- */
.is-disable {
  pointer-events: none;
}

.is-lock {
  height: 100%;
  overflow: hidden;
}

body:not(.is-load) {
  overflow: hidden;
}

/* ==================================================
_Global
================================================== */
/* _Header
-------------------------------------------------- */
.g-header {
  text-align: center;
}

@media screen and (min-width: 769px) {
  .g-header__ttl {
    font-size: 1.25rem;
  }
  .g-header__date {
    margin-top: 10px;
    font-size: 0.8125rem;
  }
}

@media screen and (max-width: 768px) {
  .g-header__ttl {
    font-size: 1.5rem;
  }
  .g-header__date {
    margin-top: 14px;
    font-size: 1rem;
  }
}

/* _Footer
-------------------------------------------------- */
.g-footer {
  text-align: center;
}

.g-footer a {
  text-decoration: underline;
}

.g-footer__contact {
  margin-top: 50px;
  margin-bottom: 60px;
  font-size: 1.125rem;
  line-height: 26px;
}

.g-footer__contact p {
  margin-top: 20px;
}

.g-footer__contact small {
  font-size: 0.75rem;
}

.g-footer__link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 28px 0;
  font-size: 0.75rem;
  background-color: #434343;
}

.g-footer__link p {
  padding-left: 20px;
}

.g-footer__link p:not(:first-of-type) {
  margin-left: 40px;
}

.g-footer__link p {
  background: url("../img/icon/icon-round-arrow.svg") no-repeat left center/14px;
}

.g-footer__copy {
  padding: 16px 0;
  background-color: #000000;
}

.g-footer__copy p {
  font-size: 0.625rem;
}

.g-footer__copy p:not(:first-of-type) {
  margin-top: 10px;
}

@media screen and (max-width: 768px) {
  .g-footer {
    margin: 0 -10px;
  }
}

/* _Contents
-------------------------------------------------- */
.g-contents {
  width: 100%;
  height: 100vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.g-contents__item, .g-contents__item--info {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
}

.g-contents__item > .g-header, .g-contents__item--info > .g-header {
  color: #ffffff;
  z-index: 99;
}

.g-contents__item--info {
  background-color: #000000;
  z-index: 99;
  overflow-y: scroll;
}

.g-contents__item--info::before {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover;
  pointer-events: none;
}

body.is-info .g-contents__item--info::before {
  content: "";
}

@media screen and (min-width: 769px) {
  .g-contents {
    -ms-scroll-snap-type: mandatory;
        scroll-snap-type: mandatory;
    -ms-scroll-snap-points-y: repeat(100vh);
        scroll-snap-points-y: repeat(100vh);
    -ms-scroll-snap-type: y mandatory;
        scroll-snap-type: y mandatory;
    overflow-y: auto;
  }
  .g-contents__item > .g-header, .g-contents__item--info > .g-header {
    margin-top: 40px;
  }
  .g-contents__item--info:not(.is-dark)::before {
    background-image: url("../img/pc/bg_normal.png");
  }
  .g-contents__item--info.is-dark::before {
    background-image: url("../img/pc/bg_dark.png");
  }
}

@media screen and (max-width: 768px) {
  .g-contents {
    pointer-events: none;
    overflow: hidden;
  }
  .g-contents > * {
    pointer-events: all;
  }
  .g-contents__item > .g-header, .g-contents__item--info > .g-header {
    margin-top: 8%;
  }
  .g-contents__item--info {
    padding: 0 10px;
  }
  .g-contents__item--info:not(.is-dark)::before {
    background-image: url("../img/sp/bg_normal.png");
  }
  .g-contents__item--info.is-dark::before {
    background-image: url("../img/sp/bg_dark.png");
  }
}

/* _Functions
-------------------------------------------------- */
.g-func {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
}

main:not(.is-active) .g-func {
  opacity: 0;
}

.g-func + .g-header {
  position: fixed;
  left: 0;
  width: 100%;
  color: rgba(255, 255, 255, 0.3);
  z-index: 99;
}

.g-func__logo, .g-func__60puls, .g-func__audio {
  position: absolute;
  pointer-events: all;
}

.g-func__60puls img {
  width: 39px;
  height: 37px;
}

.g-func__audio {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 27px;
}

.g-func__audio::before, .g-func__audio::after,
.g-func__audio span,
.g-func__audio i {
  display: block;
  width: 3px;
  background-color: #3296d4;
}

.g-func__audio::before, .g-func__audio::after {
  content: "";
  height: 7px;
}

.g-func__audio.is-stop span,
.g-func__audio.is-stop i {
  height: 7px;
}

.g-func__audio:not(.is-stop) span,
.g-func__audio:not(.is-stop) i {
  -webkit-animation-name: audio;
          animation-name: audio;
  -webkit-animation-duration: 1.2s;
          animation-duration: 1.2s;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.g-func__audio:not(.is-stop) span {
  height: 12px;
}

.g-func__audio:not(.is-stop) i {
  height: 17px;
}

@media screen and (min-width: 769px) {
  .g-func + .g-header {
    top: 40px;
  }
  .g-func__logo {
    top: 0;
    left: 40px;
  }
  .g-func__logo img {
    width: 75px;
    height: 103px;
  }
  .g-func__60puls {
    bottom: 40px;
    left: 50px;
  }
  .g-func__audio {
    bottom: 50px;
    right: 40px;
  }
  .g-func__btns {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .g-func + .g-header {
    top: 8%;
  }
  main.is-active .g-func + .g-header {
    opacity: 0;
  }
  .g-func__logo {
    top: 0;
    left: 10px;
  }
  .g-func__logo img {
    width: 34px;
    height: 52px;
  }
  .g-func__60puls {
    bottom: 10px;
    left: 10px;
  }
  .g-func__audio {
    bottom: 20px;
    right: 10px;
  }
  .g-func__txt {
    font-size: 0.75rem;
  }
  .g-func__btns {
    position: absolute;
    bottom: 0;
    left: 50%;
    text-align: center;
    pointer-events: all;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  main:not(.is-active) .g-func__btns {
    pointer-events: none;
  }
  body.is-scroll .g-func__btns {
    opacity: 0;
    pointer-events: none;
  }
  .g-func__next, .g-func__prev {
    display: block;
    margin: 8px auto;
    width: 28px;
    height: 28px;
    background-color: #ffffff;
    border-radius: 50%;
  }
  .g-func__next span, .g-func__prev span {
    opacity: 0;
  }
  .g-func__next[href="#"], .g-func__next[href=""], .g-func__prev[href="#"], .g-func__prev[href=""] {
    opacity: .5;
    pointer-events: none;
  }
  .g-func__next::before, .g-func__prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 12px 3px;
  }
  .g-func__next::before {
    border-top-color: #000000;
    -webkit-transform: translate(-50%, -20%);
            transform: translate(-50%, -20%);
  }
  .g-func__prev::before {
    border-bottom-color: #000000;
    -webkit-transform: translate(-50%, -80%);
            transform: translate(-50%, -80%);
  }
  .g-func__tap {
    margin: 12px auto;
    font-size: 1rem;
  }
}

/* ==================================================
_Modules
================================================== */
/* _Introduction
-------------------------------------------------- */
.m-intro {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9;
}

main.is-active .m-intro {
  pointer-events: none;
  opacity: 0;
}

.m-intro__ttl, .m-intro__txt {
  line-height: 1.5em;
}

.m-intro__subttl i,
.m-intro__subttl u,
.m-intro__subttl span, .m-intro__txt i,
.m-intro__txt u,
.m-intro__txt span, .m-intro__icon i,
.m-intro__icon u,
.m-intro__icon span {
  display: block;
  overflow: hidden;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

.m-intro__subttl i, .m-intro__txt i, .m-intro__icon i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.m-intro__subttl u, .m-intro__txt u, .m-intro__icon u {
  text-decoration: none;
}

body:not(.is-load) .m-intro__subttl i,
body:not(.is-load) .m-intro__subttl u, body:not(.is-load) .m-intro__txt i,
body:not(.is-load) .m-intro__txt u, body:not(.is-load) .m-intro__icon i,
body:not(.is-load) .m-intro__icon u {
  pointer-events: none;
  opacity: 0;
}

body.is-load .m-intro__subttl span, body.is-load .m-intro__txt span, body.is-load .m-intro__icon span {
  pointer-events: none;
  opacity: 0;
}

.m-intro__subttl {
  margin-bottom: 10px;
  font-size: 1.125rem;
}

.m-intro__txt, .m-intro__txt--2 {
  font-size: 0.75rem;
  color: #8e8a88;
}

.m-intro__txt--2 {
  margin-top: 10px;
  -webkit-transition-delay: 2s;
          transition-delay: 2s;
}

body:not(.is-load) .m-intro__txt--2 {
  opacity: 0;
}

.m-intro__txt small {
  font-size: 0.625rem;
}

.m-intro__icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 5px 0;
  opacity: .5;
}

.m-intro__icon img {
  width: 100%;
  max-width: 28px;
  width: 100%;
  max-height: 28px;
}

.m-intro__icon span:not(:first-of-type) {
  margin-left: 8px;
}

.m-intro__box {
  margin: auto;
  max-width: 296px;
  text-align: left;
}

body:not(.is-ie11) .m-intro__box dt::after {
  padding-bottom: .2em;
}

body:not(.is-ie11) .m-intro__box dt span {
  padding: .2em .6em .4em;
}

body:not(.is-ie11) .m-intro__box dd > span {
  padding: .2em .6em .4em;
}

body.is-ie11 .m-intro__box dt span {
  padding: .6em .6em 0;
}

body.is-ie11 .m-intro__box dd > span {
  padding: .6em .6em 0;
}

.m-intro__box dt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.m-intro__box dt::after,
.m-intro__box dt span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: rgba(255, 255, 255, 0.2);
}

.m-intro__box dt::after {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: 2px;
  width: 28.5px;
  font-family: sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
}

.m-intro__box dt span {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.m-intro__box dt:not(.is-active)::after {
  content: "+";
}

.m-intro__box dt.is-active::after {
  content: "-";
}

.m-intro__box dd {
  margin-top: 2px;
  overflow: hidden;
  -webkit-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
}

.m-intro__box dd > span {
  display: block;
  background-color: rgba(255, 255, 255, 0.1);
}

.m-intro__box dd a {
  text-decoration: underline;
}

.m-intro__box dd a::after {
  content: "";
  display: inline-block;
  margin: 0 4px;
  width: 10px;
  height: 11px;
  background: url("../img/icon/icon-copy.svg") no-repeat center center/contain;
  vertical-align: middle;
}

.m-intro__box dd:not(.is-active) {
  height: 0;
}

.m-intro__box dd.is-active {
  height: 124.5px;
}

.m-intro__copy {
  position: fixed;
  top: 50%;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 3.2em;
  width: 20em;
  font-size: 0.75rem;
  color: #000000;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 99999;
  border-radius: 1.6em;
  pointer-events: none;
}

.m-intro__copy:not(.is-active) {
  opacity: 0;
}

@media screen and (min-width: 769px) {
  .m-intro__ttl {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    font-size: 1.5rem;
    -webkit-transform: translateY(-150%);
            transform: translateY(-150%);
  }
  .m-intro__info {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 68px;
  }
}

@media screen and (max-width: 768px) {
  .m-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .m-intro__ttl {
    padding-bottom: 4%;
    font-size: 1.75rem;
  }
  .m-intro__ttl, .m-intro__info {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .m-intro__info {
    padding-bottom: 4%;
  }
}

/* _VisualContents
-------------------------------------------------- */
.m-visual {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.m-visual__ttl, .m-visual__txt {
  line-height: 1.5em;
  text-align: center;
}

main:not(.is-active) .m-visual__ttl, main:not(.is-active) .m-visual__txt {
  opacity: 0;
  pointer-events: none;
}

@media screen and (min-width: 769px) {
  .m-visual {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-bottom: 116px;
  }
  .m-visual._01:not(.is-bright) {
    background-image: url("../img/pc/main01_tiger_dark.png");
  }
  .m-visual._01.is-bright {
    background-image: url("../img/pc/main01_tiger_bright.png");
  }
  .m-visual._02:not(.is-bright) {
    background-image: url("../img/pc/main02_polar-bear_dark.png");
  }
  .m-visual._02.is-bright {
    background-image: url("../img/pc/main02_polar-bear_bright.png");
  }
  .m-visual._03:not(.is-bright) {
    background-image: url("../img/pc/main03_turtle_dark.png");
  }
  .m-visual._03.is-bright {
    background-image: url("../img/pc/main03_turtle_bright.png");
  }
  .m-visual__ttl {
    margin-bottom: 30px;
    font-size: 1.5rem;
  }
  .m-visual__txt {
    font-size: 0.875rem;
  }
}

@media screen and (max-width: 768px) {
  .m-visual {
    padding-top: 124px;
  }
  .m-visual._01:not(.is-bright) {
    background-image: url("../img/sp/main01_tiger_dark.png");
  }
  .m-visual._01.is-bright {
    background-image: url("../img/sp/main01_tiger_bright.png");
  }
  .m-visual._02:not(.is-bright) {
    background-image: url("../img/sp/main02_polar-bear_dark.png");
  }
  .m-visual._02.is-bright {
    background-image: url("../img/sp/main02_polar-bear_bright.png");
  }
  .m-visual._03:not(.is-bright) {
    background-image: url("../img/sp/main03_turtle_dark.png");
  }
  .m-visual._03.is-bright {
    background-image: url("../img/sp/main03_turtle_bright.png");
  }
  .m-visual__ttl {
    margin-bottom: 26px;
    font-size: 1.25rem;
  }
  .m-visual__txt {
    font-size: 0.75rem;
  }
}

/* _Contents
-------------------------------------------------- */
.m-contents__ttl {
  text-align: center;
}

.m-contents__txt {
  margin: 26px 0;
  font-size: 1.125rem;
  line-height: 26px;
}

.m-contents__txt span {
  background-color: #3296d4;
}

.m-contents__txt small {
  display: block;
  font-size: 0.75rem;
  line-height: 22px;
}

.m-contents__txt large {
  display: block;
  font-size: 1.5625rem;
  line-height: 38px;
  text-align: center;
}

.m-contents__col--4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 32px 0;
}

.m-contents__col--4 img {
  height: auto;
}

@media screen and (min-width: 769px) {
  .m-contents {
    margin-top: 50px;
    margin-bottom: 60px;
  }
  .m-contents__ttl {
    font-size: 1.5625rem;
    line-height: 38px;
  }
  .m-contents__col--4 img {
    width: 162px;
  }
}

@media screen and (max-width: 768px) {
  .m-contents {
    margin-top: 32px;
    margin-bottom: 32px;
  }
  .m-contents__ttl {
    font-size: 1.5625rem;
    line-height: 38px;
  }
  .m-contents__col--4 img {
    margin-bottom: 10px;
    width: calc(50% - 5px);
  }
}

/* _Off
-------------------------------------------------- */
.m-off {
  text-align: center;
}

.m-off__box {
  margin-bottom: 36px;
  padding: 36px 16px;
  border: 1px solid #3296d4;
}

.m-off__ttl {
  font-size: 1.5625rem;
  line-height: 38px;
}

.m-off__txt {
  -webkit-transition: color .6s ease;
  transition: color .6s ease;
  font-size: 1.125rem;
  line-height: 26px;
}

.m-off__txt large,
.m-off__txt small {
  display: inline-block;
}

.m-off__txt small {
  font-size: 0.75rem;
  line-height: 22px;
  text-align: left;
}

.m-off__txt large {
  margin: 8px 0 4px;
  font-size: 1.3125rem;
  line-height: 25px;
}

.m-off__txt span,
.m-off__txt i {
  -webkit-transition: opacity .6s ease;
  transition: opacity .6s ease;
}

.m-off__txt i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.m-off__check {
  display: none;
}

.m-off__check + label {
  display: block;
  margin: 38px auto;
  width: 137.5px;
  height: 50px;
  font-size: 1.75rem;
  border: 2px solid #3296d4;
  background-color: #000000;
  z-index: 9;
}

.m-off__check + label,
.m-off__check + label span {
  border-radius: 25px;
  overflow: hidden;
}

.m-off__check + label span {
  padding-left: 1.3em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-transition: background .6s ease, -webkit-transform .4s ease;
  transition: background .6s ease, -webkit-transform .4s ease;
  transition: background .6s ease, transform .4s ease;
  transition: background .6s ease, transform .4s ease, -webkit-transform .4s ease;
}

.m-off__check + label span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  -webkit-transition: background .6s ease;
  transition: background .6s ease;
}

.m-off__check:not(:checked) + label {
  background: #3296d4;
}

.m-off__check:not(:checked) + label span {
  background: #3296d4;
}

.m-off__check:not(:checked) + label span::before {
  background: #ffffff;
}

.m-off__check:not(:checked) ~ p i {
  opacity: 0;
}

.m-off__check:checked + label span {
  -webkit-transform: translateX(calc(100% - 48px));
          transform: translateX(calc(100% - 48px));
}

.m-off__check:checked + label span::before {
  background: #595757;
}

.m-off__check:checked ~ p {
  color: transparent;
}

.m-off__check:checked ~ p i {
  color: #ffffff;
}

.m-off__total {
  font-size: 0.75rem;
  line-height: 22px;
}

.m-off__total p {
  margin-top: 18px;
}

.m-off__total span {
  font-size: 1.375rem;
  line-height: 36px;
  background-color: #3296d4;
}

.m-off__total a {
  text-decoration: underline;
}

.m-off__twitter, .m-off__figure {
  margin: 34px 0;
}

.m-off__twitter {
  display: block;
  margin: 34px;
}

.m-off__twitter img {
  width: 146px;
  height: 40px;
}

.m-off__figure {
  font-size: 0.75rem;
  line-height: 22px;
  text-align: center;
}

.m-off__figure img {
  margin-bottom: 16px;
  width: 100%;
}

/* _Modal
-------------------------------------------------- */
.m-modal label:not([class*="bg"]) {
  display: block;
  cursor: pointer;
}

.m-modal img {
  display: block;
  width: 100%;
}

.m-modal input {
  display: none;
}

.m-modal input:not([id="close"]):checked ~ [class*="__bg"] {
  display: block;
}

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

.m-modal__item:not(p)::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  display: block;
  width: 16px;
  height: 16px;
  background: url("../img/icon/icon-plus.svg") no-repeat center center/contain;
  z-index: 6;
}

.m-modal__box {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 7px;
  width: 280px;
  border-radius: 4px;
  color: #595757;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: opacity .3s ease;
  transition: opacity .3s ease;
  z-index: 9;
}

input:not(:checked) + .m-modal__box {
  pointer-events: none;
  opacity: 0;
}

.m-modal__box figure {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.m-modal__box img {
  width: 60px;
}

.m-modal__box figcaption {
  margin-left: 12px;
  font-weight: 600;
}

.m-modal__box large,
.m-modal__box small {
  display: block;
}

.m-modal__box large {
  font-size: 1rem;
}

.m-modal__box small {
  margin-top: .4em;
  font-size: 0.625rem;
}

.m-modal__txt {
  margin: 6px 0;
  font-size: 0.75rem;
  line-height: 21px;
}

.m-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px;
  z-index: 9;
}

.m-modal__close img {
  width: 14px;
  height: 14px;
}

.m-modal__bg {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 769px) {
  .m-modal label {
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease;
  }
  .m-modal label:hover {
    opacity: .5;
  }
  .m-modal__item {
    width: 126px;
  }
  .m-modal__item:not(:nth-child(5n)) {
    margin-right: 12px;
  }
  .m-modal__item:nth-child(n+6) {
    margin-top: 12px;
  }
}

@media screen and (max-width: 768px) {
  .m-modal__item {
    width: calc(33.333% - 6.66667px);
  }
  .m-modal__item:not(:nth-child(3n-2)) {
    margin-left: 10px;
  }
  .m-modal__item:nth-child(n+4) {
    margin-top: 10px;
  }
}

/* _Information
-------------------------------------------------- */
.m-info {
  margin: 28px auto;
  padding: 6px;
  background-color: #ffffff;
}

.m-info__header img {
  width: 100%;
}

.m-info__box {
  margin: 14px 28px;
  max-width: 270px;
}

.m-info__box dt {
  margin: 6px 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: #3296d4;
}

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

.m-info__box a {
  display: block;
}

.m-info__link {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #3296d4;
  line-height: 26px;
  text-decoration: underline;
}

.m-info__link::after {
  content: "";
  display: inline-block;
  margin-left: .4em;
  width: 17px;
  height: 17px;
  background: url("../img/icon/icon-link-arrow.svg") no-repeat center center/contain;
}

/* _Detail
-------------------------------------------------- */
.m-detail {
  text-align: center;
}

.m-detail__ttl, .m-detail__catch {
  font-size: 1.125rem;
  line-height: 26px;
}

.m-detail__txt {
  margin: 26px 0;
  font-size: 0.75rem;
  line-height: 22px;
}

.m-detail__catch a {
  text-decoration: underline;
}

/* _Name
-------------------------------------------------- */
.m-name {
  margin: 20px 0;
  padding: 14px 14px 0;
  color: #000000;
  border-radius: 14px;
  background-color: #ffffff;
}

.m-name__box {
  padding-bottom: 18px;
  font-size: 0.875rem;
  line-height: 24px;
}

.m-name__box dt {
  font-weight: 600;
}

.m-name__box dt small {
  display: block;
  font-size: 0.625rem;
  line-height: 16px;
}

.m-name__box dd small {
  font-size: 0.75rem;
}

@media screen and (min-width: 769px) {
  .m-name__box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .m-name__box dt {
    padding-right: 16px;
    width: 126px;
  }
  .m-name__box dd {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
}

@media screen and (max-width: 768px) {
  .m-name__box dt {
    margin-bottom: 6px;
  }
}

/* _PageTop
-------------------------------------------------- */
.m-pagetop {
  position: fixed;
  bottom: 40px;
  z-index: 99;
}

.m-pagetop__link,
.m-pagetop img {
  display: block;
  width: 40px;
  height: 40px;
}

@media screen and (min-width: 769px) {
  .m-pagetop {
    right: 100px;
  }
  body:not(.is-info) .m-pagetop {
    opacity: 0;
    pointer-events: none;
  }
}

@media screen and (max-width: 768px) {
  .m-pagetop {
    right: 20px;
  }
  body:not(.is-scroll) .m-pagetop {
    opacity: 0;
    pointer-events: none;
  }
}

/* ==================================================
_Patches
================================================== */
/*# sourceMappingURL=style.css.map */