/*===============================*/
/* variable */
/*===============================*/
:root {
  --BG-BLACK: #0d0d0d;
  --TEXT-BLACK: #000000;
  --DECO-BLACK: #000000;
  --BG-WHITE: #ffffff;
  --TEXT-WHITE: #ffffff;
  --DECO-WHITE: #ffffff;

  --FOOTER-BG: #000000;
  --FOOTER-NOTE: #747272;

  --LAYOUT-LINE01: 0 3rem;
  --LAYOUT-LINE02: 0 1rem;
  --LAYOUT-LINE03: 0 .5rem;

  --BREAKPOINT-MOBILE: 560px;
  --BREAKPOINT-DESKTOP: 1360px;

  --C-ACCENT:#ad000d ;
  --C-BASE: #333333;
  --C-MAIN: #004680;
  --C-CP02:#0062b3;
  --C-BG:#fffde5;

  --f-MEDIUM:500;
  --f-BOLD:700;
}

/*===============================*/
/* reset 旧端末・OS用 */
/*===============================*/

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  vertical-align: bottom;
}

a {
  color: var(--TEXT-WHITE);
  text-decoration: none;
  transition: 0.1s ease-out;
}

a:active {
  color: var(--TEXT-WHITE);
}

a:focus {
  outline: none;
}

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

video {
  width: 100%;
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
}

/*===============================*/
/* base */
/*===============================*/
html {
  font-size: 1.7857142857142856vw; /*画面幅が560pxの時に10px*/
  font-size: calc(calc(10 / 560) * 100vw); /* 画面幅が560pxの時に10px*/
  height: 100%;
}
@media screen and (min-width: 560px) {
  html {
    font-size: 62.5%;
  }
}

body {
  font-family: m-plus-1p, sans-serif, 
  "ヒラギノ角ゴ pro w3", "Hiragino Kaku Gothic pro", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-weight: var(--f-BOLD);
  font-style: normal;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--TEXT-BLACK);
  background-color: var(--BG-WHITE);
}

/*===============================*/
/* layout */
/*===============================*/

.l_wrapper {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
}
@media screen and (min-width: 1361px) {
  .l_wrapper {
    grid-template-columns: 1fr minmax(0, 560px) 17.1875vw;
  }
}

.layout-center {
  position: relative;
  margin: 0 auto;
  width: 100%;
  z-index: 1;
}

.l_left,
.l_right {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
}

.layout-left__inner,.layout-right__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/*===============================*/
/* footer */
/*===============================*/

.footer {
  position: relative;
  z-index: 1;
  background-color: var(--FOOTER-BG);
  padding: 0 2.7rem;
}

.footer-inner {
  padding: 6rem 0 3.2rem;
}

.footer-download {
  padding: 0 3rem 5.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-download__icon {
  width: 84%;
  margin-bottom: 4.5rem;
}

.footer-link {
  margin-bottom: 4.4rem;
}

.footer-link__item {
  display: block;
  position: relative;
  width: 100%;
  color: var(--TEXT-WHITE);
  font-size: 2.1rem;
  font-weight: 500;
  letter-spacing: .1rem;
  overflow-wrap: break-word;
  font-feature-settings: "palt";
  margin-bottom: 2rem;
  transition: all 0.1s ease-out;
}

.footer-link__item:last-child {
  margin-bottom: 0;
}

.footer-note__copyright {
  font-size: 1.1rem;
  color: var(--FOOTER-NOTE);
  font-weight: var(--f-MEDIUM);
  padding: 0 1.2rem;
  margin-bottom: 5rem;
  text-indent: -1em;
  padding-left: 1em;
}

.footer-note,
.copyright {
  font-size: 1.6rem;
  color: var(--FOOTER-NOTE);
  font-weight: var(--f-MEDIUM);
  line-height: 1.7;
  letter-spacing: -.02rem;
}

.footer-note {
  font-size:1.4rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

.copyright {
  text-align: center;
}

/*===============================*/
/* store-badge */
/*===============================*/
:root {
  --BadgeHight-s:55;
  --BadgeHight-m:70;
}

.store-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

.store-badge__ios {
  width: 100%;
  max-width: calc((38.3rem * var(--BadgeHight-m)) / 140);
  height: auto;
  max-height: var(--BadgeHight-m)px;
  margin-right: 1.4rem;
}

.store-badge__ggp {
  width: 100%;
  max-width: calc((47.3rem * var(--BadgeHight-m)) / 140);
  height: auto;
  max-height: var(--BadgeHight-m)px;
}

.cp .store-badge__ios {
  max-width: calc((38.3rem * var(--BadgeHight-s)) / 140);
  max-height: var(--BadgeHight-s)px;
}

.cp .store-badge__ggp {
  max-width: calc((47.3rem * var(--BadgeHight-s)) / 140);
  max-height: var(--BadgeHight-s)px;
}

/*===============================*/
/* component */
/*===============================*/

.c_pagetop {
  width: 15.25rem;
  margin: 0 auto 2.1rem;
}

.c_h-pop {
  transition: 0.2s ease-in-out;
}

@media (hover: hover) and (pointer: fine) {
  .c_h-opacity:hover {
    opacity: 0.7;
  }
  .c_h-pop:hover {
    transform: translateY(-0.8rem);
  }
  .c_h-zoom:hover {
    transform: scale(1.05);
  }
}

.c_icon-arrow {
  padding-left:3.3rem;
}

.c_icon-arrow::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2rem;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(../img/common/icon-link.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.c_icon-linkArrow[target=_blank]::after {
  content:"";
  background-image: url(../img/common/icon-externalLink.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  padding-right: 2.8rem;
  margin-left: 0.5rem;
}

/*===============================*/
/* btn */
/*===============================*/
/*============ btn-base ============*/
.btn {
  width: 36.2rem;
  height: 6.8rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: var(--C-BASE);
  border: solid 0.4rem transparent;
  border-radius: 100px;
  margin:0 auto;
}

.btn-deco-border {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: solid 0.2rem var(--DECO-WHITE);
  border-radius: 100px;
}

.btn-text {
  font-size:1.7rem;
  flex-basis: 70%;
}

.btn-inactive {
  width: 36.2rem;
  height: 6.8rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: solid 0.4rem transparent;
  border-radius: 100px;
  margin:0 auto;
  Opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

/*============ btn-icon ============*/

.btn.icon-x::before {
  position: absolute;
  top:50%;
  left:2rem;
  transform: translateY(-50%);
  background-image: url(../img/common/sns-icon-x-white.png);
  background-repeat: no-repeat;
  background-size: contain;
  width: 2.4rem;
  height: 2.5rem;
}

/*============ btn-hover ============*/

@media (hover: hover) {
  .btn:hover {
    background-color: var(--BG-WHITE);
    border: solid 0.4rem var(--C-BASE);
    color: var(--C-BASE);
  }
  /*action-btn A ボーダーあり*/
  .btn:hover.btn-deco {
    background-color: var(--TEXT-WHITE);
    border: solid 0.2rem var(--DECO-WHITE);
  } 
  .btn:hover .btn-deco-border {
    border: solid 0.2rem var(--DECO-BLACK);
  }
}

/*===============================*/
/* svg symbol */
/*===============================*/

.icon-x {
  width: 4rem;
  height: 4rem;
  fill: var(--DECO-WHITE);
}

.deco-arrow {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  padding: 1rem;
  box-sizing: content-box;
  fill: var(--DECO-WHITE);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover .icon-x,
  .btn:hover .deco-arrow {
    fill: var(--C-BASE);
  }
}