@charset "utf-8";
@font-face {
  font-family: Noto Sans JP;
  font-weight: 400;
  src: url(fonts/NotoSansJP-Regular.woff) format('woff');
  font-display: swap
}

@font-face {
  font-family: Noto Sans JP;
  font-weight: 500;
  src: url(fonts/NotoSansJP-Medium.woff) format('woff');
  font-display: swap
}

@font-face {
  font-family: Noto Sans JP;
  font-weight: 700;
  src: url(fonts/NotoSansJP-Bold.woff) format('woff');
  font-display: swap
}

:root {
  --cl-f-b: #121212;
  --cl-f-b-l: #313330;
  --cl-f-gy-d: #494D49;
  --cl-f-gy: #666666;
  --cl-f-gy-l: #808080;
  --cl-f-gy-xl: #999;
  --cl-f-w: #fff;
  --cl-g: #3DA422;
  --cl-g-l: #6ecf45;
  --cl-g-xl: #eef8ed;
  --cl-o: #F96400;
  --cl-b: #181A18;
  --cl-gy-xl: #e6e6e6;
  --cl-bg: #F2F0EC;
  --fs-pc-title1: 3.6rem;
  --fs-pc-title2: 3.2rem;
  --fs-pc-title3: 2.2rem;
  --fs-pc-body: 1.5rem;
  --fs-pc-caption1: 1.3rem;
  --fs-pc-caption2: 1.2rem;
  --fs-sp-title1: 2.8rem;
  --fs-sp-title2: 2.4rem;
  --fs-sp-title3: 2.0rem;
  --fs-sp-body: 1.4rem;
  --fs-sp-caption1: 1.2rem;
  --fs-sp-caption2: 1.1rem;
  --fs-pc-pg-title: 3.6rem;
  --fs-pc-pg-subtitle: 2.0rem;
  --fs-pc-sec-title: 2.8rem;
  --fs-pc-card-title: 1.6rem;
  --fs-pc-card-txt: 1.4rem;
  --fs-pc-hdr-nav: 1.4rem;
  --fs-pc-ftr-nav: 1.2rem;
  --fs-pc-input: 1.8rem;
  --fs-sp-pg-title: 2.8rem;
  --fs-sp-pg-subtitle: 1.8rem;
  --fs-sp-sec-title: 2.2rem;
  --fs-sp-card-title: 1.5rem;
  --fs-sp-card-txt: 1.3rem;
  --fs-sp-ftr-nav: 1.2rem;
  --fs-sp-menu-p: 1.4rem;
  --fs-sp-menu-s: 1.3rem;
  --fs-sp-input: 1.6rem;
  --fw-b: 700;
  --fw-m: 500;
  --fw-r: 400;
  --content-w-pc: 94.4rem
}

html {
  font-size: 62.5%
}

@media (-ms-high-contrast:none), (-ms-high-contrast:active) {
  html {
    font-size: 10px
  }
}

body {
  background-color: var(--cl-f-w);
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'ヒラギノ角ゴシック', 'Yu Gothic', '游ゴシック', Meiryo, 'メイリオ', sans-serif;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-body);
  font-weight: var(--fw-r);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  word-wrap: break-word
}

@media only screen and (max-width:768px) {
  body {
    font-size: var(--fs-sp-body)
  }
}

body.loaded {
  background-color: var(--cl-fw)
}

body.forbidScroll {
  position: fixed
}

.wrapper {
  background-color: #fff
}

ul {
  margin: 0;
  padding: 0;
  list-style: none
}

a {
  display: block;
  color: #333;
  outline: 0;
  transition: .4s;
  text-decoration: none
}

a:active, a:hover {
  text-decoration: none;
  opacity: .7
}

small {
  color: #fff;
  letter-spacing: .1em
}

input:-ms-input-placeholder {
  color: #aaa
}

img {
  image-rendering: -webkit-optimize-contrast
}

#splash {
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: var(--cl-g)
}

#splash__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45rem;
  height: 5rem;
  max-width: 80%;
  overflow: hidden
}

#splash__logo .splash__logo__img {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: transform .8s ease-in-out;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left
}

#splash__logo .splash__logo__img.smoothTextAppear {
  opacity: 1;
  transform: translate3d(0, 0, 0) skewY(0)
}

#splash__logo__img__svg {
  width: 100%;
  height: 100%
}

.hdr__menu {
  position: fixed;
  z-index: 999;
  top: -100vh;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--cl-g);
  transition: top .6s;
  overflow: hidden
}

.hdr__menu.panelactive {
  top: 0;
  left: 0
}

.hdr__menu.panelactive .menu__list {
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch
}

@media only screen and (max-width:768px) {
  .hdr__menu, .hdr__menu.panelactive .menu__list {
    width: 100vw
  }
}

.hdr__menu a {
  color: var(--cl-f-w);
  letter-spacing: .1em;
  height: 4.8rem;
  line-height: 4.8rem
}

.menu__list {
  padding: 6.8rem 2.4rem 2.4rem 2.4rem
}

.menu__list__primary, .menu__list__secondary {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.menu__list__primary {
  font-size: var(--fs-sp-menu-p);
  font-weight: var(--fw-b)
}

.menu__list__secondary {
  margin-top: 1.6rem;
  font-size: var(--fs-sp-menu-s);
  font-weight: var(--fw-m)
}

.menu__list__copy {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 4.8rem
}

.menu__list__copy small {
  order: 1;
  display: block;
  margin-bottom: .8rem;
  margin-top: 1.6rem
}

.menu__list__sns {
  order: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start
}

.menu__list__sns li {
  margin-left: 3.2rem
}

.btnSns {
  width: 3.2rem;
  height: 3.2rem;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%
}

.btnSns--fb {
  background-image: url(../img/ico-fb.svg)
}

.btnSns--tw {
  background-image: url(../img/ico-tw.svg)
}

.hdr__nav {
  position: fixed;
  height: 8rem;
  width: 100%;
  z-index: 999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 3.2rem;
  background-color: var(--cl-f-w);
  transition: background-color .4s
}

.hdr__nav__logo {
  position: relative;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
  width: 32rem;
  height: 3.6rem
}

.hdr__nav__logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cl-f-w);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1
}

.hdr__nav__logo::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  visibility: visible;
  width: 100%;
  height: 100%;
  background-image: url(../img/img-logo.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 center;
  z-index: 2
}

@media (max-width:767.98px) {
  .hdr__nav {
    height: 6rem;
    padding: 0 1.6rem
  }
  .hdr__nav nav {
    display: none
  }
  .hdr__nav__logo {
    width: 24.5rem;
    height: 2.8rem
  }
}

.hdr__nav ul {
  list-style: none;
  display: flex;
  justify-content: center
}

.hdr__nav ul li {
  margin-left: 2.4rem
}

.hdr__nav ul li a {
  display: block;
  text-decoration: none;
  font-size: var(--fs-pc-hdr-nav);
  font-weight: var(--fw-b);
  color: var(--cl-g);
  text-align: center;
  white-space: nowrap
}

.hdr__nav.UpMove {
  animation: UpAnime .4s forwards
}

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0)
  }
  to {
    opacity: 0;
    transform: translateY(-100px)
  }
}

.hdr__nav.DownMove {
  animation: DownAnime .4s forwards;
  background-color: var(--cl-f-w)
}

@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-100px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.btnMenu {
  position: fixed;
  z-index: 9999;
  top: 1.2rem;
  right: 1.6rem;
  cursor: pointer;
  width: 36px;
  height: 36px
}

@media only screen and (min-width:768px) {
  .btnMenu {
    display: none
  }
}

.btnMenu span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 9px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--cl-f-gy-d);
  width: 45%
}

.hdr__nav.nav-init .btnMenu span {
  background-color: var(--cl-f-gy-d)
}

.hdr__nav.nav-init.panelactive .btnMenu span {
  background-color: var(--cl-f-gy-d)
}

.btnMenu span:nth-of-type(1) {
  top: 14px
}

.btnMenu span:nth-of-type(2) {
  top: 22px
}

.btnMenu.active span:nth-of-type(1) {
  top: 12px;
  left: 10px;
  transform: translateY(6px) rotate(-45deg);
  width: 45%
}

.btnMenu.active span:nth-of-type(2) {
  top: 24px;
  left: 10px;
  transform: translateY(-6px) rotate(45deg);
  width: 45%
}

.hdr__title {
  width: 100%;
  padding-top: 8rem;
  background-color: #fff;
  position: relative
}

.hdr__title::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 0
}

.hdr__title__wrapper {
  width: 100%;
  height: 18.1rem;
  overflow: hidden;
  background-image: url(../img/img-bg-ttl-01.png), url(../img/img-bg-ttl-02.jpg);
  background-position: left bottom, center;
  background-repeat: repeat-x, no-repeat;
  background-size: auto, cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 4.8rem
}

.hdr__title__e img {
  height: var(--fs-pc-pg-title)
}

.hdr__title__j h2 {
  margin-top: 1.6rem;
  font-size: var(--fs-pc-pg-subtitle);
  font-weight: var(--fw-m);
  color: var(--cl-f-w);
  line-height: 1
}

@media only screen and (max-width:767.98px) {
  .hdr__title {
    padding-top: 6rem
  }
  .hdr__title__wrapper {
    height: 14.5rem;
    padding-top: 3.6rem
  }
  .hdr__title__e img {
    height: var(--fs-sp-pg-title)
  }
  .hdr__title__e.-small01 img {
    height: var(--fs-sp-title2)
  }
  .hdr__title__e.-small02 img {
    height: var(--fs-sp-title3)
  }
  .hdr__title__j h2 {
    margin-top: .8rem;
    font-size: var(--fs-sp-pg-subtitle)
  }
}

.smooth {
  animation-name: smoothAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  transform-origin: left;
  opacity: 0
}

@keyframes smoothAnime {
  from {
    transform: translate3d(0, 100%, 0) skewY(12deg);
    opacity: 0
  }
  to {
    transform: translate3d(0, 0, 0) skewY(0);
    opacity: 1
  }
}

.smoothTrigger {
  opacity: 0
}

span.smoothText {
  overflow: hidden;
  display: block
}

span.smoothTextTrigger {
  transition: .8s ease-in-out;
  transform: translate3d(0, 100%, 0) skewY(12deg);
  transform-origin: left;
  display: block
}

span.smoothTextTrigger.smoothTextAppear {
  transform: translate3d(0, 0, 0) skewY(0)
}

.fadeUpTrigger {
  opacity: 0
}

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  animation-delay: .8s;
  opacity: 0
}

.fadeUp2 {
  animation-name: fadeUpAnime;
  animation-duration: .4s;
  animation-fill-mode: forwards;
  opacity: 0
}

@keyframes fadeUpAnime {
  from {
    opacity: 0;
    transform: translateY(5rem)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.zoomOutTrigger {
  transform-origin: center;
  transform: scale(1.2);
  opacity: 0
}

.zoomOut {
  animation-name: zoomOutAnime;
  animation-duration: .8s;
  animation-fill-mode: forwards;
  animation-delay: .8s
}

@keyframes zoomOutAnime {
  from {
    opacity: 0;
    transform: scale(1.2)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}

.bodywrap {
  position: relative;
  min-height: 100vh
}

.ftr {
  position: relative;
  width: 100%;
  background-color: var(--cl-b);
  color: var(--cl-f-w)
}

.bodywrap .ftr {
  position: absolute;
  bottom: 0;
  left: 0
}

.ftr__logo a {
  display: block;
  width: 28.4rem;
  height: 3.2rem;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url(../img/img-logo-w.svg);
  background-repeat: no-repeat;
  background-position: 0 center;
  background-size: contain
}

.ftr__sns {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 3.2rem
}

.ftr__sns li {
  margin-right: 3.2rem
}

.ftr__nav li a {
  color: var(--cl-f-w);
  font-weight: var(--fw-m)
}

.ftr__copy small {
  color: #999
}

@media (min-width:768px) {
  .ftr {
    padding: 4rem 6rem 8rem 6rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap
  }
  .ftr__logo {
    flex: 0 0 auto
  }
  .ftr__sns {
    margin-top: 3.2rem;
    width: 100%
  }
  .ftr__nav {
    flex: 0 1 auto;
    margin-left: auto;
    margin-top: 1.2rem;
    font-size: var(--fs-pc-ftr-nav);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 1.2rem;
    width: 80%
  }
  .ftr__nav li {
    margin-left: 2.4rem
  }
  .ftr__copy {
    position: absolute;
    bottom: 8rem;
    right: 6rem
  }
}

@media (max-width:767.98px) {
  .ftr {
    padding: 3.2rem 2.4rem 8rem 2.4rem
  }
  .ftr__logo {
    position: absolute
  }
  .ftr__logo a {
    width: 19.1rem;
    height: 2.2rem
  }
  .ftr__sns {
    position: absolute;
    left: 2.4rem;
    bottom: 8rem
  }
  .ftr__nav {
    font-size: var(--fs-sp-ftr-nav);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start
  }
  .ftr__nav li {
    margin-top: 3.2rem
  }
  .ftr__nav li:first-of-type {
    margin-top: .4rem
  }
  .ftr__copy {
    margin-top: 3.2rem;
    text-align: right
  }
}

#btnPgTop {
  width: 4.8rem;
  height: 4.8rem
}

#btnPgTop a {
  width: 100%;
  height: 100%;
  background-image: url(../img/btn-circle-up-w.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%
}

#btnPgTop {
  position: fixed;
  right: 1.6rem;
  z-index: 2;
  transform: translateY(10rem);
  opacity: 0;
  transition: opacity .3s;
  bottom: 1.6rem
}

#btnPgTop.showBtn {
  transform: translateY(0);
  opacity: 1
}

.sec__title {
  display: flex;
  flex-direction: column;
  align-items: center
}

.sec__title__e img {
  width: auto;
  height: var(--fs-pc-sec-title)
}

.sec__title__j {
  margin-top: .8rem;
  font-size: var(--fs-pc-caption1);
  font-weight: var(--fw-m);
  color: var(--cl-f-gy)
}

.sec__title__j--w {
  color: rgba(255, 255, 255, .8)
}

.btnNext {
  position: absolute;
  right: 6rem;
  top: 3.8rem
}

.btnNext a {
  width: 6rem;
  height: 6rem;
  background-size: 100%;
  background-repeat: no-repeat
}

.secVs .btnNext {
  top: calc(50% - 3rem)
}

.btnNext--w a {
  background-image: url(../img/ico-arrow-w.svg)
}

.btnNext--g a {
  background-image: url(../img/ico-arrow-g.svg)
}

@media only screen and (max-width:767.98px) {
  .sec__title__e img {
    height: var(--fs-sp-sec-title)
  }
  .sec__title__j {
    margin-top: .4rem;
    font-size: var(--fs-sp-caption1)
  }
  .btnNext {
    right: 2.4rem;
    top: 4.2rem
  }
  .btnNext a {
    width: 4.8rem;
    height: 4.8rem
  }
  .secVs .btnNext {
    top: 6rem
  }
}

.slick-next, .slick-prev {
  position: absolute;
  z-index: 3;
  top: 8rem;
  cursor: pointer;
  background: url(../img/btn-circle-g.svg);
  outline: 0;
  height: 4.8rem;
  width: 4.8rem;
  transition: opacity .4s
}

.slick-next:active, .slick-next:hover, .slick-prev:active, .slick-prev:hover {
  opacity: .7
}

.slick-prev {
  left: 2.4rem;
  transform: rotate(-180deg)
}

.slick-next {
  right: 2.4rem
}

.slick-dots {
  position: relative;
  z-index: 3;
  text-align: center;
  height: 3.2rem
}

.slick-dots li {
  display: inline-block;
  margin: 0 .5rem
}

.slick-dots button {
  color: transparent;
  outline: 0;
  width: .8rem;
  height: .8rem;
  display: block;
  border-radius: 50%;
  background: #fff
}

.slick-dots .slick-active button {
  background: #333
}

@media only screen and (min-width:768px) {
  .slick-next, .slick-prev {
    top: 50%
  }
  .slick-prev {
    left: 6rem
  }
  .slick-next {
    right: 6rem
  }
}

.btnAppStore {
  height: 5rem
}

.btnGooglePlay {
  height: 6.4rem;
  margin-top: -.7rem
}

.qrAppStore, .qrGooglePlay {
  width: 9.4rem;
  height: 9.4rem;
  display: flex;
  justify-content: center
}

.qrAppStore canvas {
  width: 9.4rem;
  height: 9.4rem;
  border: solid 6px;
  border-color: #fff;
  width: 9.5rem
}

.qrGooglePlay canvas {
  width: 9.4rem;
  height: 9.4rem;
  border: solid 6px;
  border-color: #fff;
  margin-top: .6rem
}

.accItem {
  display: none
}

.accBtn.acc-open::after {
  background-image: url(../img/btn-acc-open.svg)
}

.hdrTop {
  width: 100%;
  height: 100vh;
  min-height: 100vh
}

@supports (-webkit-touch-callout:none) {
  .hdrTop {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available
  }
}

.hdrTop .hdr__nav.nav-init .hdr__nav__logo::before {
  visibility: visible
}

.hdrTop .hdr__nav.nav-init .hdr__nav__logo::after {
  visibility: hidden
}

.hdrTop .hdr__nav ul li a {
  color: var(--cl-f-w)
}

.hdrTop .hdr__nav.nav-init .btnMenu span {
  background-color: var(--cl-f-w)
}

.hdr__kp {
  position: absolute;
  z-index: 2;
  left: 6rem;
  bottom: 6rem;
  transform: none;
  text-align: left
}

.hdr__kp h2 {
  font-size: var(--fs-pc-title1);
  font-weight: var(--fw-m);
  letter-spacing: 1rem;
  color: #fff
}

@media only screen and (max-width:767.98px) {
  .hdr__kp {
    top: 50%;
    left: 2.4rem;
    bottom: auto;
    transform: translateY(-50%)
  }
  .hdr__kp h2 {
    font-size: var(--fs-sp-title1)
  }
}

.hdr__scrl {
  position: absolute;
  right: 3.2rem;
  bottom: 7rem;
  height: 6rem
}

@media only screen and (max-width:767.98px) {
  .hdr__scrl {
    bottom: 13rem
  }
}

.hdr__scrl span {
  position: absolute;
  left: -15px;
  top: -15px;
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: .05em
}

.hdr__scrl span {
  transform: rotate(-90deg);
  left: -23px;
  top: -36px
}

.hdr__scrl::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 30px;
  background: #fff;
  animation: pathmove 3s ease-in-out infinite;
  opacity: 0
}

@keyframes pathmove {
  0% {
    height: 0;
    top: 0;
    opacity: 0
  }
  30% {
    height: 30px;
    opacity: 1
  }
  100% {
    height: 0;
    top: 50px;
    opacity: 0
  }
}

.hdr__tp {
  position: absolute;
  bottom: 2.4rem;
  right: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .3)
}

.hdr__tp a {
  display: block;
  padding: 2rem 2.4rem;
  padding-right: 6rem;
  width: 100%;
  height: 100%;
  color: var(--cl-f-w);
  font-size: var(--fs-sp-body);
  font-weight: var(--fw-m);
  overflow: hidden;
  background-image: url(../img/btn-circle-right-w.svg);
  background-size: 3.2rem 3.2rem;
  background-repeat: no-repeat;
  background-position: right 2.4rem top 50%
}

.hdr__tp__dt {
  width: 100%;
  overflow: hidden
}

.hdr__tp__dt__dt {
  margin-right: 1em
}

.hdr__tp__dt__lbl {
  color: #bfbfbf
}

.hdr__tp__ct {
  margin-top: .4rem;
  font-size: 1.4rem;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

@media only screen and (min-width:768px) {
  .hdr__tp {
    bottom: 6.4rem;
    right: 6rem;
    width: 45rem;
    max-width: calc(50% - 6rem)
  }
  .hdr__tp a {
    padding-right: 8rem;
    font-size: var(--fs-pc-body)
  }
}

.secVs {
  position: relative;
  min-height: 346px;
  padding: 6rem 2.4rem;
  background: var(--cl-bg) url(../img/top/img-bg-vision.png) repeat-x;
  background-size: 1024px auto
}

.secVs__txt {
  margin: 2.4rem auto 0;
  color: var(--cl-f-w);
  font-size: var(--fs-sp-pg-subtitle);
  letter-spacing: .05em;
  text-align: center
}

@media only screen and (min-width:768px) {
  .secVs {
    position: relative;
    padding: 8rem 6rem
  }
  .secVs__txt {
    max-width: calc(100% - 12rem);
    font-size: var(--fs-pc-pg-subtitle);
    letter-spacing: .1em
  }
}

.secRmrk {
  background-color: #e4f2e0;
  background-position: 100% 0
}

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

.secRmrk__slider .slider__item {
  width: 100%;
  background-repeat: no-repeat;
  background-position: right top;
  background-size: contain
}

.secRmrk__slider .slider__item--01 {
  background-image: url(../img/img-top-slider-01.png)
}

.secRmrk__slider .slider__item--02 {
  background-image: url(../img/img-top-slider-02.png);
  background-position: left top
}

.secRmrk__slider .slider__item--03 {
  background-image: url(../img/img-top-slider-03.png)
}

.secRmrk__slider .slider__item__balloon {
  padding: 2.4rem 2.8rem;
  font-weight: var(--fw-m);
  border-radius: 1.6rem;
  background-color: #fff;
  box-shadow: 0 0 3rem rgba(0, 0, 0, .1)
}

@media only screen and (max-width:767.98px) {
  .secRmrk__slider .slider__item__balloon {
    margin: 24rem 2.4rem 1.6rem 2.4rem;
    width: calc(100% - 4.8rem);
    min-height: 10em;
    font-size: var(--fs-sp-body)
  }
}

@media only screen and (min-width:768px) {
  .secRmrk {
    height: 36rem
  }
  .secRmrk__slider .slider__item {
    height: 36rem
  }
  .secRmrk__slider .slider__item--01 .slider__item__balloon {
    top: 20%;
    left: 15%
  }
  .secRmrk__slider .slider__item--02 .slider__item__balloon {
    top: 30%;
    right: 15%
  }
  .secRmrk__slider .slider__item--03 .slider__item__balloon {
    top: 30%;
    left: 15%
  }
  .secRmrk__slider .slider__item__balloon {
    position: absolute;
    width: 48rem;
    max-width: 50%;
    font-size: var(--fs-pc-body)
  }
  .secRmrk__slider .slick-dots {
    margin: -5rem 0 0 0
  }
}

.secSrv {
  overflow: hidden;
  position: relative
}

.top .secSrv {
  background-color: var(--cl-bg)
}

.secSrv__srv {
  position: relative;
  overflow: hidden
}

.secSrv__srv .btnNext {
  top: 0
}

.srv__img {
  position: relative
}

.srv__img__mirai {
  position: absolute;
  background-color: #fff;
  border-radius: 1.4rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  overflow: hidden;
  min-height: 11.2rem
}

.mirai {
  overflow: hidden;
  position: relative;
  width: 100%;
  color: var(--cl-f-b-l);
  opacity: 1;
  transition: opacity .5s
}

.mirai.fadeOut {
  opacity: 0
}

.mirai__icon {
  visibility: hidden;
  margin-left: 1rem;
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%
}

.mirai__icon.mirai__icon--01 {
  background-image: url(../img/miraiIcon/ico-mirai-01.svg)
}

.mirai__icon.mirai__icon--02 {
  background-image: url(../img/miraiIcon/ico-mirai-02.svg)
}

.mirai__icon.mirai__icon--03 {
  background-image: url(../img/miraiIcon/ico-mirai-03.svg)
}

.mirai__icon.mirai__icon--04 {
  background-image: url(../img/miraiIcon/ico-mirai-04.svg)
}

.mirai__icon.mirai__icon--05 {
  background-image: url(../img/miraiIcon/ico-mirai-05.svg)
}

.mirai__icon.vshow {
  animation: mirai-icon-scale .4s ease-out
}

@keyframes mirai-icon-scale {
  0% {
    transform: scale(.9)
  }
  5% {
    transform: scale(1.5)
  }
  100% {
    transform: scale(1)
  }
}

.mirai__age--num {
  font-size: 2.4rem;
  font-family: Saira, sans-serif;
  visibility: hidden
}

.mirai__age--unit {
  font-size: 1.2rem;
  visibility: hidden
}

.mirai .vshow {
  visibility: visible!important
}

.mirai__msg {
  font-size: 1.4rem;
  visibility: hidden;
  letter-spacing: .08em
}

.srv__appname {
  background-image: url(../img/img-logo.svg);
  background-repeat: no-repeat
}

.srv__appname__name {
  color: var(--cl-f-b-l);
  font-weight: var(--fw-b)
}

.srv__explain__title {
  color: var(--cl-f-b-l);
  font-weight: var(--fw-b)
}

.srv__explain__txt {
  color: var(--cl-f-b-l)
}

.srv__explain__btns {
  display: flex;
  flex-direction: row
}

.TextTyping span {
  display: none
}

.TextTyping::after {
  content: "_";
  animation: typinganime .8s ease infinite;
  font-weight: var(--fw-b);
  padding: 0
}

@keyframes typinganime {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@media only screen and (min-width:768px) {
  .secSrv {
    background-position: calc(50% - 25rem) 2.4rem;
    background-size: contain;
    overflow: hidden
  }
  .top .secSrv {
    padding-top: 8rem;
    background-size: 70rem
  }
  .srv__img {
    float: left;
    width: 50%
  }
  .srv__appname, .srv__explain {
    float: right;
    width: 50%;
    padding-left: 2rem
  }
  .srv__explain__title, .srv__explain__txt {
    max-width: 54rem
  }
  .srv__img {
    height: 39.8rem;
    overflow: hidden
  }
  .srv__img__img {
    position: absolute;
    top: 0;
    right: 4rem;
    height: 100%
  }
  .srv__img__img img {
    width: auto;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 166/199
  }
  .srv__img__mirai {
    bottom: 3.6rem;
    right: 2rem;
    width: 37rem;
    padding: 1.4rem 2.4rem 1.6rem 2.4rem
  }
  .srv__appname {
    min-height: 4rem;
    background-position: top 0 left 2rem;
    background-size: 31rem auto
  }
  .srv__appname__name {
    margin-top: 5rem;
    font-size: var(--fs-pc-body);
    font-weight: var(--fw-b)
  }
  .top .srv__appname {
    background-size: 23rem auto
  }
  .top .srv__appname__name {
    margin-top: 3.5rem
  }
  .srv__explain {
    margin-top: 4rem;
    padding-right: 6rem
  }
  .srv__explain__title {
    font-size: var(--fs-pc-title3);
    font-weight: var(--fw-b)
  }
  .srv__explain__txt {
    margin-top: 1.6rem;
    font-size: var(--fs-pc-body)
  }
  .srv__explain__btns {
    margin-top: 4rem;
    align-items: flex-start;
    justify-content: flex-start
  }
  .secSrv .btnAppStore {
    margin-right: 1rem
  }
}

@media only screen and (max-width:767.98px) {
  .secSrv {
    background-position: -5rem 1.6rem;
    background-size: contain;
    overflow: hidden;
    padding-top: 4rem
  }
  .secSrv__srv {
    display: flex;
    flex-direction: column;
    padding: 0 2.4rem
  }
  .srv__appname {
    order: 1
  }
  .srv__img {
    order: 2;
    margin-top: 1.6rem
  }
  .srv__explain {
    order: 3;
    margin-top: 2.4rem
  }
  .srv__appname {
    min-height: 3rem;
    background-position: top left;
    background-size: auto 3rem
  }
  .srv__appname__name {
    margin-top: 4rem;
    font-size: var(--fs-sp-body)
  }
  .top .srv__appname {
    background-size: auto 2.4rem
  }
  .top .srv__appname__name {
    margin-top: 3rem
  }
  .srv__img__img {
    margin-left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 40rem;
    min-width: 31.6rem
  }
  .srv__img__img img {
    width: 100%;
    height: auto
  }
  .srv__img__mirai {
    bottom: 2.4rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 37rem;
    min-width: 32rem;
    padding: 1.4rem 2.4rem 1.6rem 2.4rem
  }
  .srv__explain__title {
    font-size: var(--fs-sp-title3)
  }
  .srv__explain__txt {
    margin-top: 1.6rem;
    font-size: var(--fs-sp-body)
  }
  .srv__explain__btns {
    margin-top: 2.4rem;
    align-items: flex-start;
    justify-content: center
  }
  .secSrv .btnAppStore {
    margin-left: 1.2rem;
    margin-right: .8rem
  }
}

.uv__slider {
  position: relative;
  width: 80rem;
  margin: 0 auto
}

.uv__slider .slider__item {
  width: 100%;
  margin: 8rem 2rem 2rem 2rem
}

.uv__slider .slider__item a {
  background-color: #fff;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  border-radius: 1.4rem;
  overflow: hidden
}

.uv__slider .slider__item a .slider__item__article, .uv__slider .slider__item a .slider__item__img {
  transition: opacity .4s
}

.uv__slider .slider__item a:active .slider__item__article, .uv__slider .slider__item a:active .slider__item__img, .uv__slider .slider__item a:hover .slider__item__article, .uv__slider .slider__item a:hover .slider__item__img {
  opacity: .7
}

.uv__slider .slider__item a:active, .uv__slider .slider__item a:hover {
  opacity: 1
}

.uv__slider .slider__item__img {
  width: 36rem;
  height: 24rem;
  overflow: hidden;
  position: relative
}

.uv__slider .slider__item__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/overlays/b.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: .2
}

.uv__slider .slider__item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.uv__slider .slider__item__article {
  margin: 1.6rem 2rem;
  min-height: 18rem
}

.uv__slider .article__appname {
  color: var(--cl-g);
  font-size: var(--fs-pc-caption2);
  font-weight: var(--fw-b)
}

.uv__slider .article__title {
  margin-top: .4rem;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-card-title);
  font-weight: var(--fw-b)
}

.uv__slider .article__txt {
  margin-top: 1.2rem;
  color: var(--cl-f-b-l);
  font-size: var(--fs-pc-card-txt)
}

@media only screen and (min-width:768px) {
  .uv__slider {
    max-width: calc(100vw - 12rem)
  }
  .uv__slider .slick-prev {
    left: -6rem
  }
  .uv__slider .slick-next {
    right: -6rem
  }
}

@media only screen and (max-width:767.98px) {
  .uv__slider {
    width: 100%
  }
  .uv__slider .slider__item {
    margin: 4rem 2.4rem 1.6rem 2.4rem
  }
  .uv__slider .slider__item__img {
    width: calc(100vw - 4.8rem);
    height: 24rem;
    overflow: hidden
  }
  .uv__slider .article__appname {
    font-size: var(--fs-sp-caption2)
  }
  .uv__slider .article__title {
    font-size: var(--fs-sp-card-title)
  }
  .uv__slider .article__txt {
    font-size: var(--fs-sp-card-txt)
  }
}

.top .secTp {
  position: relative;
  padding: 4rem 2.4rem
}

.secTp .tplist {
  margin-top: 2.4rem
}

@media only screen and (min-width:768px) {
  .secTp .tplist {
    margin-top: 2.4rem
  }
}

.tplist__item a {
  padding: 1.6rem;
  width: 24rem;
  height: 16rem;
  overflow: hidden;
  background-color: #fff;
  border-radius: .8rem;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1)
}

.tplist__item a:active .tplist__item__lbl, .tplist__item a:active .tplist__item__txt, .tplist__item a:hover .tplist__item__lbl, .tplist__item a:hover .tplist__item__txt {
  opacity: .7
}

.tplist__item a:active, .tplist__item a:hover {
  opacity: 1
}

.tplist__item__lbl {
  position: relative;
  font-size: 1.3rem;
  font-weight: var(--fw-m);
  color: var(--cl-g);
  line-height: 2rem;
  white-space: nowrap;
  text-indent: 6.1rem
}

.tplist__item__lbl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5.3rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100%
}

.item-news .tplist__item__lbl::before {
  background-image: url(../img/img-tp-news.svg)
}

.item-tips .tplist__item__lbl::before {
  background-image: url(../img/img-tp-tips.svg)
}

.tplist__item__txt {
  position: relative;
  width: 100%;
  height: calc(1.5em * 4);
  overflow: hidden;
  color: var(--cl-f-b);
  font-weight: var(--fw-m)
}

.tplist__item__txt::after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  width: 6em;
  height: 1.5em;
  background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, .5))
}

@media only screen and (max-width:767.98px) {
  .tplist {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
  }
  .tplist__item {
    margin-top: 2.4rem
  }
  .tplist__item:first-of-type {
    margin-top: 0
  }
  .tplist__item__txt {
    margin-top: 1rem;
    font-size: var(--fs-sp-body)
  }
}

@media only screen and (min-width:768px) {
  .tplist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    padding-left: 2rem
  }
  .tplist__item {
    margin-right: 2rem;
    margin-bottom: 2rem
  }
  .tplist__item__txt {
    margin-top: 1rem;
    font-size: var(--fs-pc-body)
  }
}

.secDl {
  width: 100%;
  background-image: url(../img/img-bg-dl.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left 60% top 63%
}

.secDl__title {
  color: var(--cl-f-w);
  font-size: var(--fs-pc-pg-subtitle);
  font-weight: var(--fw-b)
}

.secDl__txt {
  color: var(--cl-f-w);
  font-size: 1rem
}

.secDl__btns {
  display: flex;
  align-items: flex-start;
  justify-content: center
}

.secDl__btns__android, .secDl__btns__ios {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start
}

.secDl__btns .qrAppStore {
  margin-top: 1.2rem
}

@media only screen and (min-width:768px) {
  .secDl {
    overflow: hidden
  }
  .secDl__wrapper {
    position: relative;
    margin: 4rem auto;
    margin-bottom: 5.2rem;
    width: 68rem
  }
  .secDl__title, .secDl__txt {
    width: 32rem
  }
  .secDl__txt {
    margin-top: 2.4rem
  }
  .secDl__btns {
    position: absolute;
    top: 0;
    right: 0;
    justify-content: flex-end
  }
  .secDl__btns__ios {
    margin-right: 1rem
  }
}

@media only screen and (max-width:767.98px) {
  .secDl {
    padding: 3.2rem 2.4rem;
    background-size: 230%;
    background-position: left 60% top 63%
  }
  .secDl__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start
  }
  .secDl__title {
    order: 1;
    text-align: center;
    font-size: var(--fs-sp-pg-subtitle)
  }
  .secDl__btns {
    order: 2;
    margin-top: 2.4rem
  }
  .secDl__txt {
    order: 3;
    margin-top: 1.2rem
  }
  .secDl .hide-sp {
    display: none
  }
}

.privacypolicy .wrapper, .salespolicy .wrapper, .termsofuse .wrapper {
  padding: 6rem
}

.secIntro {
  color: var(--cl-f-b-l)
}

.secRule {
  margin-top: 4.8rem
}

.secRule__title {
  position: relative;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.secRule__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.6rem;
  width: 5rem;
  height: .2rem;
  background-color: var(--cl-g)
}

.secRule__list, .secRule__txt {
  margin-top: 3.2rem
}

.secRule__txt a {
  display: inline;
  color: var(--cl-g);
  font-weight: var(--fw-m);
  text-decoration: underline
}

.secRule__list .ul--bullet, .secRule__list ol {
  margin-left: 2em
}

.secRule__list ol>li {
  margin-top: 1.5em;
  margin-bottom: .4rem;
  list-style-type: none
}

.secRule__list .ol--lv1 {
  counter-reset: cnt1
}

.secRule__list .ol--lv1>li {
  counter-increment: cnt1
}

.secRule__list .ol--lv1>li::before {
  content: "(" counter(cnt1) ")";
  display: inline-block;
  margin-left: -2em;
  width: 2em
}

.secRule__list .ol--lv2 {
  counter-reset: cnt2
}

.secRule__list .ol--lv2>li {
  position: relative
}

.secRule__list .ol--lv2>li::before {
  content: counter(cnt2);
  counter-increment: cnt2;
  display: inline-block;
  margin-left: -2.2em;
  margin-right: .9em;
  width: 1.2em;
  text-align: center;
  font-size: 90%;
  letter-spacing: -.1em;
  vertical-align: top
}

.secRule__list .ol--lv2>li::after {
  content: "";
  position: absolute;
  display: block;
  top: .1em;
  left: -2em;
  width: 1.2em;
  height: 1.2em;
  border: 1px solid var(--cl-f-b);
  border-radius: 50%
}

.secRule a {
  display: inline;
  color: var(--cl-g);
  font-weight: var(--fw-m);
  text-decoration: underline
}

.secRule .mgt0 {
  margin-top: 0
}

.secRule .mgt1 {
  margin-top: 1.5em
}

.secRule__list .ul--bullet li {
  margin-bottom: .4rem;
  list-style-type: none
}

.secRule__list .ul--bullet>li::before {
  content: "\02022";
  display: inline-block;
  margin-left: -1.6em;
  width: 1.6em
}

.pageend {
  margin-top: 1.5em;
  text-align: right
}

@media only screen and (min-width:768px) {
  .privacypolicy .wrapper, .salespolicy .wrapper, .termsofuse .wrapper {
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
}

@media only screen and (max-width:767.98px) {
  .privacypolicy .wrapper, .salespolicy .wrapper, .termsofuse .wrapper {
    padding: 4rem 2.4rem
  }
  .termsofuse .hdr__title__j h2 {
    font-size: 95%
  }
  .secRule {
    margin-top: 4rem
  }
  .secRule__title {
    font-size: var(--fs-sp-title3)
  }
  .secRule__title::after {
    width: 4rem
  }
}

.vision .hdr__title__wrapper {
  background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-vision-02_sp.jpg)
}

.secPr {
  padding: 8rem 0 0;
  letter-spacing: .05em
}

.secPr:first-of-type {
  padding-top: 6rem
}

.secPr__title {
  color: var(--cl-g);
  font-size: var(--fs-pc-title1);
  font-weight: var(--fw-m)
}

.secPr__grp__title {
  color: var(--cl-f-b);
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.secPr__grp__txt {
  margin-top: 2rem;
  color: var(--cl-f-b-l)
}

@media only screen and (min-width:768px) {
  .vision .hdr__title__wrapper {
    background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-vision-02.jpg)
  }
  .secPr {
    max-width: var(--content-w-pc);
    margin: 0 auto
  }
  .secPr__title {
    padding: 0 2rem
  }
  .secPr__grp {
    padding-top: 4rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap
  }
  .secPr__grp--l .secPr__grp__explain {
    order: 1;
    margin: 0 4rem 0 2rem
  }
  .secPr__grp--l .secPr__grp__img {
    order: 2
  }
  .secPr__grp--r .secPr__grp__explain {
    order: 2;
    margin: 0 2rem 0 4rem
  }
  .secPr__grp--r .secPr__grp__img {
    order: 1
  }
  .secPr__grp__img {
    flex: 0 0 auto;
    max-width: 50%;
    overflow: hidden
  }
  .secPr__grp__img img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  .secPr__grp__img--01 {
    width: 40rem;
    height: 25rem
  }
  .secPr__grp__img--02 {
    width: 30rem;
    height: 38rem
  }
  .secPr__grp__img--03 {
    width: 32.8rem;
    height: 38rem
  }
  .secPr__grp__img--04 {
    width: 36rem;
    height: 36rem
  }
  .secPr__grp__img--05 {
    width: 30rem;
    height: 24rem
  }
  .secPr__grp__img--06 {
    width: 30rem;
    height: 38rem
  }
}

@media only screen and (max-width:767.98px) {
  .secPr {
    padding: 6rem 2.4rem 0
  }
  .secPr:first-of-type {
    padding-top: 4rem
  }
  .secPr__title {
    padding: 0;
    font-size: var(--fs-sp-title1)
  }
  .secPr__grp {
    padding-top: 3.2rem
  }
  .secPr__grp__title {
    font-size: var(--fs-sp-title3)
  }
  .secPr__grp__txt {
    margin-top: 2.4rem;
    color: var(--cl-f-b-l)
  }
  .secPr__grp__img {
    margin-top: 2.4rem;
    width: 100%;
    overflow: hidden
  }
  .secPr__grp__img img {
    width: 100%;
    max-height: 30rem;
    object-fit: cover
  }
  .secPr__grp__img--04 img {
    max-height: none
  }
}

_:-ms-lang(x)::-ms-backdrop, .secPr__grp__img img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%
}

.secVsKp {
  width: 100%;
  margin-top: 6rem;
  padding: 6rem 0;
  background-image: url(../img/vision/img-vs-kp.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center
}

.secVsKp__txt {
  margin-left: 2.4rem;
  color: var(--cl-f-w);
  font-size: var(--fs-pc-title2);
  font-weight: var(--fw-m);
  text-align: center;
  letter-spacing: .1em
}

@media only screen and (max-width:767.98px) {
  .secVsKp__txt {
    font-size: var(--fs-sp-title2)
  }
}

.service .hdr__title__wrapper {
  background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-service-02_sp.jpg)
}

@media only screen and (min-width:768px) {
  .service .hdr__title__wrapper {
    background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-service-02.jpg)
  }
  .service .secSrv {
    margin: 0 auto;
    padding: 6rem 0;
    max-width: var(--content-w-pc)
  }
  .service .srv__appname, .service .srv__explain {
    float: left;
    width: auto;
    padding-left: 2rem;
    padding-right: 2rem
  }
  .service .srv__appname {
    background-position: top 0 left 2rem
  }
  .service .srv__explain__title, .service .srv__explain__txt {
    max-width: none
  }
  .service .srv__img {
    float: right;
    padding-right: 2rem
  }
  .service .secSrv.fns .srv__appname, .service .secSrv.fns .srv__explain {
    max-width: calc(100% - 41rem);
    width: 100%
  }
  .service .secSrv.fns .srv__img {
    width: 41rem
  }
  .service .srv__img__img, .service .srv__img__mirai {
    right: 50%;
    transform: translateX(50%)
  }
}

.secFunc__funcGrp {
  display: flex
}

.funcGrp__video {
  position: relative;
  z-index: 0
}

.funcGrp__video a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9.6rem;
  height: 9.6rem;
  transform: translate(-50%, -50%);
  display: none;
  background-image: url(../img/ico-play.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center;
  z-index: 1
}

.funcGrp__video.stop a {
  display: block
}

.funcGrp__video video {
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  border-radius: .8rem
}

.funcGrp__video img {
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  border-radius: .8rem
}

.funcGrp__plan img {
  margin-top: 2.4rem;
  width: 100%;
  height: auto;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  border-radius: .8rem
}

.funcGrp__explain__name {
  color: var(--cl-f-gy);
  font-size: var(--fs-pc-caption1);
  font-weight: var(--fw-b)
}

.funcGrp__explain__title {
  margin-top: .8rem;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.funcGrp__explain__txt {
  margin-top: .4rem;
  color: var(--cl-f-b)
}

.funcGrp__explain__note {
  margin-top: .4rem;
  color: var(--cl-f-gy);
  font-size: 1rem
}

.funcGrp__explain__text2 {
  margin-top: .4rem;
  color: var(--cl-f-gy)
}

.img-helpo {
  width: 20rem;
  height: 4rem
}

.img-hokenbo {
  width: 11.3rem;
  height: 4rem
}

.img-alsok {
  height: 7rem
}

.img-otta {
  width: 11.3rem;
  height: 4rem
}

.img-smbc {
  height: 5rem
}

.funcGrp__explain__partner {
  margin-top: 4rem
}

.funcGrp__explain__partner__kome {
  vertical-align: top
}

.secFunc__funcGrp--note {
  display: block;
  color: var(--cl-f-gy)
}

@media only screen and (min-width:768px) {
  .secFunc {
    margin: 0 auto;
    padding: 6rem 0;
    max-width: var(--content-w-pc)
  }
  .secFunc__funcGrp {
    margin-top: 4rem;
    width: 100%;
    padding: 0 2rem;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between
  }
  .secFunc__funcGrp:first-of-type {
    margin-top: 0
  }
  .funcGrp__video {
    flex: 0 0 auto
  }
  .funcGrp__video video {
    width: 30rem
  }
  .funcGrp__video img {
    width: 30rem;
    height: auto
  }
  .funcGrp__explain__name {
    margin-top: 4rem
  }
  .secFunc__funcGrp--l .funcGrp__video {
    order: 1;
    margin-right: 8rem
  }
  .secFunc__funcGrp--l .funcGrp__explain {
    order: 2
  }
  .secFunc__funcGrp--r .funcGrp__video {
    order: 2;
    margin-left: 8rem
  }
  .secFunc__funcGrp--r .funcGrp__explain {
    order: 1
  }
}

@media only screen and (max-width:767.98px) {
  .secFunc {
    padding: 4rem 0;
    max-width: var(--content-w-pc)
  }
  .secFunc__funcGrp {
    margin-top: 6rem;
    padding: 0 2.4rem;
    flex-direction: column;
    align-items: center
  }
  .secFunc__funcGrp:first-of-type {
    margin-top: 2rem
  }
  .funcGrp__video {
    margin-top: 4rem
  }
  .funcGrp__video video {
    width: 26rem
  }
  .funcGrp__video img {
    width: 26rem;
    height: auto
  }
  .secFunc__funcGrp .funcGrp__video {
    order: 2
  }
  .secFunc__funcGrp .funcGrp__explain {
    order: 1
  }
}

.secFunc__funcGrp--note {
  margin-top: 2.4rem
}

.secUv {
  position: relative;
  padding: 4rem 0;
  padding-bottom: 1rem;
  background-color: var(--cl-bg)
}

.secUv .uv__slider .slider__item {
  margin-top: 2.4rem
}

.secFaq {
  position: relative;
  padding: 4rem 0
}

.secFaq .faqlist {
  margin-top: 2.4rem
}

.faqlist .faqlist__item {
  border-top: 1px solid var(--cl-gy-xl)
}

.faqlist .faqlist__item:last-of-type {
  border-bottom: 1px solid var(--cl-gy-xl)
}

.faqlist__item__q {
  cursor: pointer;
  position: relative;
  padding: 1.6rem 6.4rem 1.6rem 5.2rem;
  transition: background-color .4s
}

.faqlist__item__a, .faqlist__item__q {
  word-break: break-all
}

.faqlist__item__a {
  position: relative;
  padding: 1.6rem 2rem 1.6rem 5.2rem;
  background-color: var(--cl-g-xl);
  margin-bottom: 1.6rem
}

.faqlist__item__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.6rem;
  width: 2.8rem;
  height: 2.8rem;
  transform: translateY(-50%);
  background-image: url(../img/btn-acc-close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

.faqlist__item__a::before, .faqlist__item__q::before {
  content: "";
  position: absolute;
  left: 2rem;
  top: 1.6rem;
  width: 1.2rem;
  height: 2.2rem;
  background-image: url(../img/ico-faq-q.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center
}

.faqlist__item__a::before {
  background-image: url(../img/ico-faq-a.svg)
}

.faqlist__item__a a {
  display: inline-block;
  color: var(--cl-g);
  font-weight: var(--fw-b);
  text-decoration: underline
}

@media only screen and (min-width:768px) {
  .secFaq .faqlist {
    margin: 0 auto;
    margin-top: 2.4rem;
    max-width: 76rem
  }
  .faqlist__item__q:active, .faqlist__item__q:hover {
    background-color: #f5f5f5
  }
}

@media only screen and (max-width:767.98px) {
  .secFaq .faqlist {
    width: 100%;
    padding: 0 2.4rem;
    margin-top: 2.4rem
  }
  .faqlist__item__a::before, .faqlist__item__q::before {
    content: "";
    position: absolute;
    left: 1.2rem;
    top: 1.4rem
  }
  .faqlist__item__q::after {
    right: 1.2rem
  }
  .faqlist__item__q {
    cursor: pointer;
    position: relative;
    padding: 1.4rem 6.4rem 1.4rem 3.8rem
  }
  .faqlist__item__a {
    padding: 1.4rem 1.2rem 1.4rem 3.8rem;
    margin-bottom: 1.2rem
  }
}

.topics .hdr__title__wrapper, .topics-article .hdr__title__wrapper {
  background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-topics-02_sp.jpg)
}

.topics .wrapper {
  padding-top: 6rem
}

.secTab {
  position: relative;
  margin: 0 auto;
  max-width: 80rem;
  height: 4rem
}

.tablist {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap
}

.tablist::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--cl-gy-xl)
}

.tablist .tablist__btn {
  position: relative;
  margin-right: 6rem;
  height: 100%;
  font-size: var(--fs-pc-hdr-nav);
  font-weight: var(--fw-m);
  color: var(--cl-f-gy-l);
  cursor: pointer;
  transition: all .4s
}

.tablist .tablist__btn--active {
  color: var(--cl-g)
}

.tablist .tablist__btn:active, .tablist .tablist__btn:hover {
  opacity: .7
}

.tablist .tablist__btn--active:active, .tablist .tablist__btn--active:hover {
  cursor: default;
  opacity: 1
}

.tablist .tablist__btn--active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--cl-g)
}

.secTab .filterItem {
  position: absolute;
  top: 0;
  right: 0
}

.filterItem select {
  cursor: pointer;
  padding-right: 1.8rem;
  color: var(--cl-g);
  font-size: var(--fs-pc-hdr-nav);
  font-weight: var(--fw-m);
  background-image: url(../img/ico-chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1.2rem 1.4rem;
  transition: opacity .4s
}

.filterItem select:active, .filterItem select:hover {
  opacity: .7
}

.tp-hide {
  display: none
}

.tp-y-hide {
  display: none
}

@media only screen and (min-width:768px) {
  .topics .hdr__title__wrapper, .topics-article .hdr__title__wrapper {
    background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-topics-02.jpg)
  }
  .secTab {
    margin: 0 auto;
    max-width: 76rem
  }
  .topics .secTp {
    margin: 0 auto;
    padding-bottom: 6rem;
    max-width: 80rem
  }
  .topics .tplist {
    justify-content: flex-start
  }
}

@media only screen and (max-width:767.98px) {
  .secTab {
    padding: 0 2.4rem;
    width: 100%
  }
  .secTab .filterItem {
    top: -.2rem;
    right: 2.4rem
  }
  .tablist .tablist__btn {
    margin-right: 3.2rem
  }
  .tablist li {
    margin-right: 4rem
  }
  .filterItem select {
    font-size: 16px;
    transform: scale(.875)
  }
  .topics .secTp {
    padding: 0 2.4rem;
    padding-bottom: 4rem;
    width: 100%
  }
}

.btnBack a {
  position: relative;
  color: var(--cl-g);
  font-size: var(--fs-pc-hdr-nav);
  font-weight: var(--fw-m);
  height: 4.8rem;
  line-height: 4.8rem;
  text-indent: 5.2rem;
  white-space: nowrap
}

.btnBack--w a {
  color: var(--cl-f-w)
}

.btnBack a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4.8rem;
  height: 4.8rem;
  background-size: 100%;
  background-repeat: no-repeat;
  transform: scale(-1, 1)
}

.btnBack--w a::before {
  background-image: url(../img/ico-arrow-w.svg)
}

.btnBack--g a::before {
  background-image: url(../img/ico-arrow-g.svg)
}

@media only screen and (max-width:767.98px) {
  .btnBack a {
    font-size: var(--fs-sp-menu-s);
    height: 3.6rem;
    line-height: 3.6rem;
    text-indent: 4rem
  }
  .btnBack a::before {
    width: 3.6rem;
    height: 3.6rem
  }
}

.pg-article .hdr__title__wrapper {
  display: block;
  padding-top: 2.4rem;
  padding-bottom: 0
}

.article__btnBack, .hdr__title__btnBack {
  margin: 0 auto
}

.article__btnBack {
  padding-bottom: 6rem
}

.pg-article .wrapper {
  display: block;
  background: 0 0
}

.secArticle {
  margin: 0 auto;
  margin-top: -6.8rem;
  padding: 4.6rem 6rem 4rem 6rem;
  max-width: var(--content-w-pc);
  background-color: #fff
}

.secArticle__header .tplist__item__lbl {
  font-size: var(--fs-pc-body);
  line-height: 2.2rem;
  text-indent: 6.7rem
}

.secArticle__header .tplist__item__lbl::before {
  width: 5.9rem;
  height: 2.2rem
}

.secArticle__title {
  margin-top: 2.4rem;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-title2);
  font-weight: var(--fw-m)
}

.secArticle__img {
  margin-top: 3.2rem
}

.topics-article .secArticle__img img {
  width: 100%;
  max-height: 50rem;
  object-fit: contain
}

.secArticle__txt {
  margin-top: 4rem
}

.secArticle__txt a {
  color: var(--cl-g);
  font-weight: var(--fw-m);
  text-decoration: underline
}

@media only screen and (min-width:768px) {
  .article__btnBack, .hdr__title__btnBack {
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
  _:-ms-lang(x)::-ms-backdrop, .topics-article .secArticle__img {
    text-align: center
  }
  _:-ms-lang(x)::-ms-backdrop, .topics-article .secArticle__img img {
    width: auto;
    height: auto;
    max-width: 100%
  }
}

@media only screen and (max-width:767.98px) {
  .pg-article .hdr__title__wrapper {
    padding-top: 2rem
  }
  .article__btnBack, .hdr__title__btnBack {
    margin: 0 2.4rem
  }
  .article__btnBack {
    padding-bottom: 4rem
  }
  .secArticle {
    margin: 0 2.4rem;
    margin-top: -5.2rem;
    padding: 3.2rem 1.6rem 3.2rem 1.6rem
  }
  .secArticle__header .tplist__item__lbl {
    font-size: var(--fs-sp-body);
    line-height: 2.1rem;
    text-indent: 6.4rem
  }
  .secArticle__header .tplist__item__lbl::before {
    width: 5.6rem;
    height: 2.1rem
  }
  .secArticle__title {
    margin-top: 1.6rem;
    font-size: var(--fs-sp-title2)
  }
  .secArticle__img img {
    max-height: 32rem
  }
}

.uv .hdr__title__wrapper, .uv-article .hdr__title__wrapper {
  background-image: url(../img/img-kv-usersvoice.jpg);
  background-position: center 0
}

.uvlist__logo {
  margin-top: 6rem;
  margin-left: 2rem;
  width: 25.4rem;
  height: 7rem;
  background-image: url(../img/img-logo-fns.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0 0;
  overflow: hidden;
  text-indent: -9999px
}

.uvlist__appname {
  margin-left: 2rem;
  margin-top: 1.6rem;
  color: var(--cl-f-b-l);
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.uvlist__wrapper {
  margin-top: 1.2rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap
}

.uvlist__item {
  width: 36rem;
  margin: 2rem
}

.uvlist__item a {
  background-color: #fff;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .1);
  border-radius: 1.4rem;
  overflow: hidden
}

.uvlist__item__img {
  width: 36rem;
  height: 24rem;
  overflow: hidden;
  position: relative
}

.uvlist__item__img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/overlays/b.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: .2
}

.uvlist__item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.uvlist__item__article {
  margin: 1.6rem 2rem;
  min-height: 18rem
}

.uvlist__item__article .article__appname {
  color: var(--cl-g);
  font-size: var(--fs-pc-caption2);
  font-weight: var(--fw-b)
}

.uvlist__item__article .article__title {
  margin-top: .4rem;
  color: var(--cl-f-b);
  font-size: var(--fs-pc-card-title);
  font-weight: var(--fw-b)
}

.uvlist__item__article .article__txt {
  margin-top: 1.2rem;
  color: var(--cl-f-b-l);
  font-size: var(--fs-pc-card-txt)
}

@media only screen and (min-width:768px) {
  .secUvList {
    margin: 0 auto;
    max-width: 80rem
  }
}

@media only screen and (max-width:767.98px) {
  .uv .hdr__title__wrapper, .uv-article .hdr__title__wrapper {
    background-position: 0 0
  }
  .uvlist__logo {
    margin-top: 4rem;
    margin-left: 2.4rem;
    width: 18.2rem;
    height: 5rem
  }
  .uvlist__appname {
    margin-left: 2.4rem;
    margin-top: 1.6rem;
    font-size: var(--fs-sp-title3)
  }
  .uvlist__item {
    margin: 1.6rem 2.4rem
  }
  .uvlist__item__img {
    width: calc(100vw - 4.8rem);
    height: 24rem;
    overflow: hidden
  }
  .uvlist__item__article .article__appname {
    font-size: var(--fs-sp-caption2)
  }
  .uvlist__item__article .article__title {
    font-size: var(--fs-sp-card-title)
  }
  .uvlist__item__article .article__txt {
    font-size: var(--fs-sp-card-txt)
  }
  .uvlist__wrapper {
    justify-content: center
  }
}

.uv .secDl {
  margin-top: 4rem
}

@media only screen and (max-width:767.98px) {
  .uv .secDl {
    margin-top: 2rem
  }
}

.uv-article .secArticle {
  padding: 4.6rem 2.8rem 6rem 6rem
}

.uv-article .secArticle__header {
  color: var(--cl-g);
  font-weight: var(--fw-m);
  font-size: var(--fs-pc-caption1)
}

.uv-article .secArticle__img {
  position: relative
}

.uv-article .secArticle__img__img {
  position: relative;
  z-index: 1
}

.uv-article .secArticle__img__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative
}

_:-ms-lang(x)::-ms-backdrop, .uv-article .secArticle__img__img img {
  margin-left: 0!important
}

.overlayImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  background-image: url(../img/overlays/b.png);
  background-repeat: repeat;
  background-position: 0 0;
  opacity: .2
}

.secArticle__img__userinfo {
  position: absolute;
  background-color: var(--cl-g);
  color: var(--cl-f-w);
  z-index: 2
}

.userinfo__name {
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.userinfo__attr {
  margin-top: .8rem;
  font-weight: var(--fw-m)
}

.userinfo__hist {
  margin-top: .8rem;
  font-weight: var(--fw-b);
  color: #a6dca1
}

@media only screen and (min-width:768px) {
  .article__btnBack, .hdr__title__btnBack {
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
  .uv-article .secArticle__img::before {
    content: "";
    position: absolute;
    right: 3.2rem;
    top: 3.2rem;
    width: calc(100% - 3.2rem);
    height: calc(100% - 6.4rem);
    background-color: #e4f2e0;
    z-index: 0
  }
  .uv-article .secArticle__img__img img {
    max-width: calc(100% - 6.4rem);
    max-height: 52.8rem;
    object-position: 0 0
  }
  .secArticle__img__userinfo {
    right: 0;
    bottom: -3.2rem;
    width: 58rem;
    padding: 2rem 3.2rem
  }
}

@media only screen and (max-width:767.98px) {
  .uv-article .secArticle {
    padding: 3.2rem 1.6rem
  }
  .uv-article .secArticle__header {
    font-size: var(--fs-sp-caption1)
  }
  .uv-article .secArticle__img__img {
    padding-bottom: 12rem
  }
  .uv-article .secArticle__img__img img {
    max-width: 100%;
    max-height: 32rem
  }
  .uv-article #overlayImg {
    left: 50%;
    transform: translateX(-50%)
  }
  .secArticle__img__userinfo {
    left: -1.6rem;
    bottom: 0;
    width: calc(100% + 3.2rem);
    padding: 1.6rem 2.4rem;
    min-height: 14rem
  }
  .userinfo__name {
    font-size: var(--fs-sp-title3)
  }
}

.interview__title {
  color: var(--cl-f-b);
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-b)
}

.interview__txt {
  margin-top: 2.4rem;
  color: var(--cl-f-b-l);
  font-weight: var(--fw-r);
  word-break: break-all
}

.interview__img img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.interview__img {
  position: relative;
  width: 24rem;
  height: 24rem;
  overflow: hidden
}

.interview__img .overlayImg {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

@media only screen and (min-width:768px) {
  .secArticle__interview {
    margin-top: 9.2rem
  }
  .secArticle__interview .interview {
    margin-top: 6rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between
  }
  .secArticle__interview .interview:first-of-type {
    margin-top: 0
  }
  .interview__img {
    flex: 0 0 auto;
    margin-left: 4rem
  }
}

@media only screen and (max-width:767.98px) {
  .secArticle__interview .interview {
    margin-top: 4rem
  }
  .interview__title {
    font-size: var(--fs-sp-title3)
  }
  .interview__img {
    margin: 0 auto;
    margin-top: 2.4rem
  }
}

.company .wrapper {
  padding: 6rem 0
}

.secCompany dt {
  font-weight: var(--fw-m);
  color: var(--cl-f-gy)
}

.secCompany dl {
  display: flex;
  flex-wrap: wrap
}

.secCompany dd, .secCompany dt {
  box-sizing: border-box;
  border-bottom: 1px solid var(--cl-gy-xl)
}

a.linkMap {
  display: block;
  position: relative;
  margin-top: 1.5em;
  color: var(--cl-g);
  font-weight: var(--fw-m);
  text-indent: 2rem;
  text-decoration: underline
}

a.linkMap::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.8rem;
  background-image: url(../img/ico-map.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center
}

@media only screen and (min-width:768px) {
  .company .wrapper {
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
  .secCompany dl {
    flex-direction: row
  }
  .secCompany dt {
    width: 30%
  }
  .secCompany dd {
    width: 70%
  }
  .secCompany dd, .secCompany dt {
    padding: 3.2rem 0
  }
  .secCompany dd:first-of-type, .secCompany dt:first-of-type {
    padding-top: 0
  }
}

@media only screen and (max-width:767.98px) {
  .company .wrapper {
    padding: 4rem 2.4rem
  }
  .secCompany dl {
    flex-direction: column
  }
  .secCompany dt {
    padding: 2.4rem 0 0 0
  }
  .secCompany dd {
    padding: 1.6rem 0 2.4rem 0
  }
  .secCompany dt:first-of-type {
    padding-top: 0
  }
  .secCompany dt {
    border-bottom: none
  }
  a.linkMap::before {
    width: 1.2rem;
    height: 1.6rem
  }
}

.contactExplain {
  padding-top: 6rem
}

.kome {
  color: var(--cl-o);
  font-weight: var(--fw-m)
}

.contactNote {
  padding-bottom: 6rem;
  margin-top: 6rem;
  color: var(--cl-f-gy-l);
  font-weight: var(--fw-m);
  font-size: var(--fs-pc-caption1)
}

@media only screen and (min-width:768px) {
  .contact .wrapper {
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
}

@media only screen and (max-width:767.98px) {
  .contact .wrapper {
    padding: 0 2.4rem
  }
  .contactExplain {
    padding-top: 4rem
  }
  .contactNote {
    font-size: var(--fs-sp-caption1)
  }
}

.secContact, .secContactSent {
  margin-top: 4rem
}

.formlist dt {
  margin-bottom: 1.2rem;
  color: var(--cl-f-b-l);
  font-weight: var(--fw-m)
}

.formlist dd.errmsg {
  margin-top: 1.2rem;
  min-height: 1.5em;
  color: var(--cl-o);
  font-weight: var(--fw-m);
  font-size: var(--fs-pc-caption2)
}

.formlist input, .formlist select, .formlist textarea {
  margin: 0;
  padding: 0;
  border: none;
  outline: 0;
  background: 0 0
}

.formlist input[type=email], .formlist input[type=search], .formlist input[type=tel], .formlist input[type=text], .formlist select, .formlist textarea {
  width: 100%;
  height: 5.6rem;
  border: 1px solid var(--cl-gy-xl);
  border-radius: .4rem;
  background: #fff;
  padding: 1.4rem 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-size: var(--fs-pc-input)
}

.formlist input[type=email]:focus, .formlist input[type=search]:focus, .formlist input[type=tel]:focus, .formlist input[type=text]:focus, .formlist select:focus, .formlist textarea:focus {
  border-color: var(--cl-g)
}

.formlist select {
  cursor: pointer;
  padding-right: 4.8rem;
  background-image: url(../img/ico-chevron-down.svg);
  background-repeat: no-repeat;
  background-position: right 2.4rem center;
  background-size: 1.2rem 1.4rem
}

.formlist textarea {
  height: 16.3rem
}

.btnSubmit {
  position: relative;
  width: 100%;
  text-align: center
}

.btnSubmit .iconSpinner {
  display: none
}

.btnSubmit.sending .iconSpinner {
  display: block;
  position: absolute;
  top: calc(50% - 2rem);
  left: calc(50% - 2rem);
  width: 4rem;
  height: 4rem;
  background-image: url(../img/ico-spinner.svg);
  background-position: center;
  background-size: 100%;
  animation: spin 1s linear infinite
}

@keyframes spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

.btnSubmit.sending input {
  color: var(--cl-g)
}

.btnSubmit input {
  height: 4.8rem;
  line-height: 4.8rem;
  padding: 0 9.6rem;
  color: var(--cl-f-w);
  font-weight: var(--fw-b);
  font-size: 1.4rem;
  background-color: var(--cl-g);
  border-radius: 2.4rem;
  box-shadow: 0 2px 2rem rgba(0, 0, 0, .2);
  transition: opacity .4s
}

.btnSubmit:not(.sending) input:hover {
  opacity: .8
}

.btnSubmit input:disabled {
  transition: none
}

.formlist .hide-category1.hide {
  display: none
}

@media only screen and (min-width:768px) {
  .formlist {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    margin-left: -1.6rem
  }
  .formlist li {
    flex: 0 1 50%;
    padding-left: 1.6rem;
    padding-bottom: 2.4rem
  }
  _:-ms-lang(x)::-ms-backdrop, .formlist li {
    flex: none;
    width: 50%
  }
  .formlist li.formlist__half {
    margin-right: 50%
  }
  .formlist li.formlist__full {
    flex-basis: 100%
  }
}

@media only screen and (max-width:767.98px) {
  .secContact, .secContactSent {
    margin-top: 3.2rem
  }
  .formlist li {
    padding-bottom: 2.4rem
  }
  .formlist dt {
    margin-bottom: .8rem
  }
  .formlist dd.errmsg {
    margin-top: .8rem;
    font-size: var(--fs-sp-caption2)
  }
  .formlist input[type=email], .formlist input[type=search], .formlist input[type=tel], .formlist input[type=text], .formlist select, .formlist textarea {
    padding: 1.4rem 1.6rem;
    font-size: var(--fs-sp-input)
  }
  .formlist textarea {
    height: 14.8rem
  }
  .formlist select {
    padding-right: 3.2rem;
    background-image: url(../img/ico-chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right 1.6rem center;
    background-size: 1.2rem 1.4rem
  }
}

@media only screen and (max-width:374.98px) {
  .formlist select {
    font-size: 90%
  }
}

.secContactSent {
  /* display: none; */
  padding-bottom: 4rem
}

.secContactSent__title {
  font-size: var(--fs-pc-title3);
  font-weight: var(--fw-m)
}

.secContactSent__txt {
  margin-top: 4rem
}

@media only screen and (max-width:767.98px) {
  .secContactSent__title {
    font-size: var(--fs-sp-title3)
  }
  .secContactSent__txt {
    margin-top: 3.2rem
  }
}

.faq .secTab {
  width: 100%;
  height: auto;
  max-width: 100%
}

.faq .tablist {
  height: 5rem
}

.faq .secTab .tablist__btn {
  padding-top: 1em;
  transition: none
}

.faq .secTab .tablist__btn:last-of-type {
  margin-right: 0
}

.tablist__btn--logo {
  padding-top: 0;
  height: 100%;
  text-indent: -9999px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top left
}

#tabFns {
  width: 12.4rem;
  background-image: url(../img/img-logo-fns-gy.svg)
}

#tabFns.tablist__btn--active {
  background-image: url(../img/img-logo-fns.svg)
}

.pathlist {
  color: var(--cl-g);
  font-weight: var(--fw-b)
}

.pathlist__link {
  cursor: pointer;
  text-decoration: underline;
  transition: opacity .4s
}

.pathlist__link::after {
  content: ">";
  display: inline-block;
  text-decoration: none;
  margin: 0 .5em
}

.pathlist__link:active, .pathlist__link:hover {
  opacity: .7
}

.faq-wrapper {
  margin-top: 4rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between
}

.faq-wrapper .secFaq {
  padding: 0;
  flex: 1 1 auto;
  display: none
}

.faqtitle {
  padding: .8rem 2rem;
  min-height: 4.8rem;
  color: var(--cl-f-gy-d);
  font-weight: var(--fw-b);
  font-size: var(--fs-pc-pg-subtitle);
  border-left: 2px solid var(--cl-g)
}

.faq-wrapper .faqlist {
  margin-top: 3.2rem
}

.faqResult {
  display: none;
  margin-top: 3.2rem
}

.faqResult.failed, .faqResult.succeeded {
  display: block
}

.faqResult__notefailed, .faqResult__txt--failed, .faqResult__txt--succeeded {
  display: none
}

.succeeded .faqResult__txt--succeeded {
  display: block
}

.failed .faqResult__notefailed, .failed .faqResult__txt--failed {
  display: block
}

.faqResult__txt--failed, .faqResult__txt--succeeded {
  font-weight: var(--fw-m)
}

.faqResult a {
  display: inline-block;
  color: var(--cl-g);
  font-weight: var(--fw-m);
  text-decoration: underline
}

.faqResult__notefailed {
  margin-top: 3.2rem
}

.faq li {
  position: relative;
  padding: 0
}

.faq .formlist input[type=search] {
  height: 100%;
  font-size: 1.4rem;
  padding-right: 4.8rem
}

.faq .formlist .btnSearch {
  position: absolute;
  top: 0;
  right: 0;
  width: 4.8rem;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url(../img/ico-search.svg);
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
  background-size: 2.2rem 2.2rem;
  transition: opacity .4s
}

.faq .formlist .btnSearch:active, .faq .formlist .btnSearch:hover {
  opacity: .7
}

.areaSearch--sp {
  display: none
}

.category__list li {
  cursor: pointer;
  transition: opacity .4s
}

.category__list li:active, .category__list li:hover {
  opacity: .7
}

@media only screen and (min-width:768px) {
  .faq .wrapper {
    padding: 6rem 0;
    margin: 0 auto;
    max-width: var(--content-w-pc)
  }
  .secSearch--sp {
    display: none
  }
  .secSearch--pc {
    flex: 0 0 25rem;
    margin-left: 4rem
  }
  .secSearch--pc .formlist {
    margin-left: 0;
    height: 4.8rem
  }
  .secSearch--pc .formlist li {
    width: 100%;
    flex: none
  }
  .secSearch--pc__category {
    margin-top: 8rem;
    padding: 1.2rem 1.6rem 1.6rem 1.6rem;
    background-color: #fafafa
  }
  .category__title {
    color: var(--cl-f-b-l);
    font-size: var(--fs-pc-card-title);
    font-weight: var(--fw-b)
  }
  .category__list {
    margin-top: 1.6rem
  }
  .category__list li {
    width: 100%;
    margin-top: 1.2rem;
    padding-left: 1.6rem;
    line-height: 2.8rem;
    border-left: 2px solid var(--cl-g);
    color: var(--cl-f-b-l);
    font-size: var(--fs-pc-hdr-nav);
    font-weight: var(--fw-m);
    background-image: url(../img/ico-arrow-small.svg);
    background-size: 2.8rem 2.8rem;
    background-position: right center;
    background-repeat: no-repeat
  }
  .category__list li:first-of-type {
    margin-top: 0
  }
}

@media only screen and (max-width:767.98px) {
  .faq .wrapper {
    padding: 4rem 0
  }
  .faq .secTab .tablist__btn {
    padding-top: .2em
  }
  .faq-wrapper {
    margin-top: 2.4rem
  }
  .secSearch--pc {
    display: none
  }
  .faq .tablist {
    height: 4rem
  }
  #tabFns {
    width: 8.8rem
  }
  .faq-wrapper {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 2.4rem
  }
  .faq-wrapper .secFaq {
    order: 2;
    margin-top: 2.4rem;
    width: 100%
  }
  .faqtitle {
    min-height: auto;
    font-size: var(--fs-sp-pg-subtitle)
  }
  .faq-wrapper .faqlist {
    margin-top: 1.6rem
  }
  .secSearch--sp {
    order: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%
  }
  .secSearch--sp .formlist {
    flex: 1 1 auto
  }
  .secSearch--sp .formlist li {
    padding: 0
  }
  .secSearch--sp .formlist select {
    font-size: 100%;
    color: var(--cl-f-b-l);
    font-weight: var(--fw-r);
    height: 4.8rem;
    width: 100%
  }
  .secSearch--sp .btnSearchModal {
    cursor: pointer;
    flex: 0 0 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url(../img/ico-search.svg);
    background-size: 2.2rem 2.2rem;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: .4rem;
    border: 1px solid var(--cl-gy-xl)
  }
  .faq-wrapper .faqlist {
    margin-top: 2.4rem
  }
  .faqResult {
    margin-top: 2.4rem
  }
  .faqResult__notefailed {
    margin-top: 2.4rem
  }
  .faq-wrapper .faqlist {
    padding: 0
  }
  .areaSearch--sp {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
    transition: all .4s;
    width: 100%;
    height: 100vh
  }
  .areaSearch--sp.opened {
    opacity: 1;
    z-index: 1000;
    background: rgba(0, 0, 0, .8);
    display: flex;
    justify-content: center;
    align-items: flex-start
  }
  .areaSearch--sp .btnCloseModal {
    position: absolute;
    top: 1.2rem;
    right: 1.6rem;
    z-index: 2;
    cursor: pointer;
    width: 3.6rem;
    height: 3.6rem
  }
  .areaSearch--sp .btnCloseModal span {
    display: inline-block;
    position: absolute;
    left: 9px;
    height: 2px;
    background-color: #fff;
    width: 45%
  }
  .areaSearch--sp .btnCloseModal span:nth-of-type(1) {
    top: 12px;
    left: 10px;
    transform: translateY(6px) rotate(-135deg)
  }
  .areaSearch--sp .btnCloseModal span:nth-of-type(2) {
    top: 24px;
    left: 10px;
    transform: translateY(-6px) rotate(135deg)
  }
  .areaSearch--sp form {
    margin-top: 30%;
    width: 100%;
    padding: 0 2.4rem
  }
  .areaSearch--sp .formlist input[type=search] {
    font-size: var(--fs-sp-input)
  }
}

.paginationjs-pages {
  margin-top: 3.2rem
}

.paginationjs-pages ul {
  display: flex;
  align-items: flex-start;
  justify-content: center
}

.paginationjs-pages ul li a {
  width: 4.8rem;
  height: 4.8rem;
  line-height: 4.8rem;
  text-align: center;
  border-radius: 50%;
  overflow: hidden
}

.paginationjs-next a, .paginationjs-prev a {
  text-indent: -9999px;
  background-image: url(../img/ico-arrow-small.svg);
  background-size: 2.8rem 2.8rem;
  background-position: center;
  background-repeat: no-repeat
}

.paginationjs-prev {
  transform: rotate(180deg)
}

.paginationjs-page a {
  color: var(--cl-g);
  font-weight: var(--fw-m);
  font-size: var(--fs-pc-hdr-nav)
}

.paginationjs-page.active a {
  color: var(--cl-f-b-l);
  background-color: var(--cl-g-xl)
}

@media only screen and (min-width:768px) {
  .pagination--sp {
    display: none
  }
}

@media only screen and (max-width:767.98px) {
  .pagination--pc {
    display: none
  }
  .pagination--sp {
    margin-top: 2.4rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center
  }
  .btnPgNext.hide, .btnPgPrev.hide {
    visibility: hidden
  }
  .btnPgNext, .btnPgPrev {
    cursor: pointer;
    width: 4.8rem;
    height: 4.8rem;
    line-height: 4.8rem;
    text-align: center;
    overflow: hidden;
    text-indent: -9999px;
    background-image: url(../img/ico-arrow-small.svg);
    background-size: 3.2rem 3.2rem;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .02)
  }
  .btnPgPrev {
    transform: rotate(180deg)
  }
  .pglist {
    margin: 0 1.6rem
  }
  .pglist select {
    cursor: pointer;
    padding-right: 1.8rem;
    height: 100%;
    color: var(--cl-f-b-l);
    font-size: var(--fs-sp-input);
    font-weight: var(--fw-r);
    background-image: url(../img/ico-chevron-down.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 1.2rem 1.4rem
  }
  .secSearch--sp .formlist select {
    padding: 1rem 1.8rem 1rem 1.2rem;
    font-size: var(--fs-sp-input)
  }
}

.shukkin .hdr__title__wrapper {
  background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-shukkin-01.jpg)
}

.shukkin .hdr__title__j .title {
  color: var(--cl-f-w);
  font-size: 2.5rem;
  font-weight: var(--fw-b);
  text-align: center
}

.shukkin .title01 {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  padding-top: 2.4rem
}

.shukkin .title01 .inner {
  display: inline-block;
  font-size: 2.7rem;
  font-weight: var(--fw-b);
  line-height: 1.15;
  text-align: center;
  position: relative;
  z-index: 1
}

.shukkin .title01.-what::before {
  display: block;
  content: "";
  width: 248px;
  height: 32px;
  background: url(../img/shukkin/img-shukkin-ttl-01.svg) no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%)
}

.shukkin .title01.-features::before {
  display: block;
  content: "";
  width: 193px;
  height: 31px;
  background: url(../img/shukkin/img-shukkin-ttl-02.svg) no-repeat;
  background-size: contain;
  position: absolute;
  left: 54%;
  top: 0;
  transform: translateX(-50%)
}

.shukkin .title02 {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 3.6rem;
  position: relative
}

.shukkin .title02 .inner {
  font-size: 2rem;
  font-weight: var(--fw-b);
  text-align: center;
  position: relative
}

.shukkin .title02.-border::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: #3da423;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%)
}

.shukkin .title02.-balloon>.inner {
  padding: 0 30px
}

.shukkin .title02.-balloon>.inner::after, .shukkin .title02.-balloon>.inner::before {
  content: "";
  display: block;
  width: 13px;
  height: 19px;
  position: absolute;
  background: url(../img/shukkin/img-shukkin-ico-01.svg) no-repeat;
  background-size: contain;
  top: 50%
}

.shukkin .title02.-balloon>.inner::before {
  left: 0;
  transform: scaleX(-1) translateY(-50%)
}

.shukkin .title02.-balloon>.inner::after {
  right: 0;
  transform: translateY(-50%)
}

.shukkin .title02.-num {
  padding-bottom: 0
}

.shukkin .title02.-num>.inner .icon {
  position: absolute;
  top: -55px;
  left: 50%;
  transform: translate(-50%, -50%)
}

.shukkin .title03 {
  color: #fff;
  background: #3da423;
  text-align: center;
  border-radius: 10px;
  font-size: 1.6rem;
  margin-top: 35px;
  padding: 12px 8px 14px
}

.shukkin .title04 {
  font-size: 1.6rem;
  text-align: center
}

.shukkin .text-block01 {
  font-size: 1.6rem;
  margin-top: 2rem
}

.shukkin .text-block02 {
  font-size: 1.6rem;
  margin-top: 3rem
}

.shukkin .text-block02 .txt {
  font-size: 1.4rem
}

.shukkin .text-block03 {
  font-size: 1.2rem;
  margin-top: 20px
}

.shukkin .dl-box01 {
  border-radius: 12px;
  border: 1px solid #3da423;
  overflow: hidden
}

.shukkin .dl-box01 .dt {
  padding: 5px 0 6px;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  font-weight: var(--fw-b);
  background: #3da423
}

.shukkin .dl-box01 .dd {
  display: flex;
  justify-content: center;
  padding: 20px 20px 19px
}

.shukkin .flow-box01>.box {
  position: relative
}

.shukkin .flow-box01>.box>.img {
  display: flex;
  justify-content: center;
  align-items: center
}

.shukkin .features-box {
  margin-top: 48px;
  background: #fff;
  border-radius: 20px
}

.shukkin .features-box>.inner {
  padding: 55px 24px 30px;
  position: relative
}

.shukkin .features-box>.inner .title02.-num .mark {
  display: block;
  position: absolute;
  width: 70px;
  height: 70px;
  top: -90px;
  left: 50%
}

.shukkin .content-block01 img, .shukkin .content-block01 picture {
  max-width: 100%;
  height: auto
}

.shukkin .border-top {
  border-top: 1px solid #e6e6e6
}

.shukkin .recom-box01>.box {
  background: #e6f6e0;
  border-radius: 12px
}

.shukkin .col-box>.dl .dt {
  text-align: center
}

.shukkin .col-box>.dl .img01 {
  width: 204px;
  height: auto
}

.shukkin .col-box>.dl .img02 {
  width: 194px;
  height: auto;
  margin-top: 30px
}

.shukkin .linkText {
  display: inline;
  color: #3da423
}

.shukkin .list-circle01>.item {
  padding-left: 1em;
  position: relative
}

.shukkin .list-circle01>.item::before {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: #181a18;
  border-radius: 50%;
  position: relative;
  left: -.8em;
  top: calc(1em - 3px)
}

.shukkin .list-notice01>.item {
  padding-left: 2em;
  position: relative
}

.shukkin .list-notice01>.item>.mark {
  top: 0;
  left: 0;
  position: absolute
}

.shukkin .img-box01>.img {
  text-align: center
}

.shukkin em.text-mark01 {
  font-style: normal;
  font-size: 2rem;
  font-weight: 700
}

.shukkin .about-box {
  max-width: 720px;
  margin: 36px auto 0;
  border: 1px solid #3da423;
  border-radius: 12px
}

.shukkin .title05 {
  background: #3da422;
  color: #fff;
  text-align: center;
  font-weight: 700;
  border-radius: 10px 10px 0 0;
  position: relative
}

.shukkin .title05>.icon {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -120px;
  transform: translateY(-50%)
}

.shukkin .table-block {
  margin-top: 40px
}

.shukkin .table-block>.ttl {
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700
}

.shukkin .table-block .table-scroll01 {
  margin-top: 14px;
  padding-top: 120px
}

.shukkin .table-block .table-type01 {
  width: 720px;
  border: 1px solid #eee;
  border-collapse: collapse;
  font-size: 1.6rem
}

.shukkin .table-block .table-type01 td, .shukkin .table-block .table-type01 th {
  border: 1px solid #eee;
  text-align: center;
  padding: 6px
}

.shukkin .table-block .table-type01 .header.icon01::before {
  display: block;
  width: 91px;
  height: 20px;
  padding-top: 90px;
  content: "夫";
  font-size: 1.2rem;
  background: url(../img/shukkin/img-shukkin-illust-15.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%)
}

.shukkin .table-block .table-type01 .header.icon02::before {
  display: block;
  width: 91px;
  height: 20px;
  padding-top: 90px;
  content: "娘";
  font-size: 1.2rem;
  background: url(../img/shukkin/img-shukkin-illust-16.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%)
}

.shukkin .table-block .table-type01 .header.icon03::before {
  display: block;
  width: 91px;
  height: 20px;
  padding-top: 90px;
  content: "孫";
  font-size: 1.2rem;
  background: url(../img/shukkin/img-shukkin-illust-17.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%)
}

.shukkin .table-block .table-type01 .header {
  font-weight: 700;
  position: relative
}

.shukkin .table-block .table-type01 .header.green01 {
  color: #fff;
  background: #87b577
}

.shukkin .table-block .table-type01 .header.gray01 {
  color: #fff;
  background: #9d9d9d
}

.shukkin .table-block .table-type01 .header.blue01 {
  background: #cde4ff
}

.shukkin .table-block .table-type01 .header.pink01 {
  background: #ffd4f2
}

.shukkin .table-block .table-type01 .header.green02 {
  background: #b5e9d3
}

.shukkin .table-block .table-type01 .data.gray01 {
  background: #f9f9f9
}

.shukkin .btn-block {
  margin-top: 44px
}

.shukkin .btn-block>.btn {
  max-width: 220px;
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid #3da423;
  color: #3da423;
  margin: 0 auto;
  transition-delay: .4s
}

.shukkin .btn-block>.btn>.inner::after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  background: url(../img/shukkin/img-shukkin-arrow02.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%)
}

.shukkin .btn-block>.btn:hover {
  color: #fff;
  background: #3da423;
  opacity: 1
}

.content-block01 {
  margin: 0 auto;
  padding: 40px 24px 60px
}

.content-block02 {
  margin: 0 auto;
  padding-top: 30px
}

.content-block03 {
  margin: 30px auto 0;
  padding-top: 40px
}

.text-mark01 {
  background: linear-gradient(transparent 60%, #d0e6c3 60%)
}

@media screen and (min-width:768px) {
  .shukkin .hdr__title__wrapper {
    height: 34.1rem;
    padding-top: 8.9rem;
    background-image: url(../img/img-bg-ttl-01.png), url(../img/img-kv-shukkin-01.jpg)
  }
  .shukkin .hdr__title__j .title {
    font-size: 5rem
  }
  .shukkin .title01 {
    padding-top: 4rem
  }
  .shukkin .title01.-what::before {
    width: 389px;
    height: 51px;
    left: 48%
  }
  .shukkin .title01.-features::before {
    width: 266px;
    height: 50px;
    left: 50%
  }
  .shukkin .title01 .inner {
    font-size: 3.5rem
  }
  .shukkin .title02 .inner {
    font-size: 2.6rem
  }
  .shukkin .title02.-balloon>.inner {
    padding: 0 40px
  }
  .shukkin .title02.-balloon>.inner::after, .shukkin .title02.-balloon>.inner::before {
    width: 30px;
    height: 42px
  }
  .shukkin .title02.-num>.inner .icon {
    top: -40px
  }
  .shukkin .title03 {
    font-size: 1.9rem;
    margin-top: 50px;
    padding: 8px 0 9px
  }
  .shukkin .title04 {
    font-size: 1.9rem
  }
  .shukkin .text-block01 {
    font-size: 1.9rem;
    margin-top: 3.4rem
  }
  .shukkin .text-block02 {
    font-size: 1.9rem;
    margin-top: 3.4rem
  }
  .shukkin .text-block02 .txt {
    font-size: 1.6rem
  }
  .shukkin .text-block03 {
    font-size: 1.3rem;
    margin-top: 16px
  }
  .shukkin .dl-box01 .dd {
    padding: 22px 0 29px
  }
  .shukkin .list-num01>.item {
    display: flex;
    align-items: center;
    font-size: 1.9rem
  }
  .shukkin .list-num01>.item>.mark {
    margin-right: 12px;
    position: relative;
    top: 2px
  }
  .shukkin .flow-box01 {
    display: flex;
    justify-content: space-between;
    max-width: 906px;
    margin: 0 auto
  }
  .shukkin .flow-box01>.box {
    max-width: 30%
  }
  .shukkin .flow-box01>.box:not(:first-child)::before {
    content: "";
    display: block;
    width: 34px;
    height: 58px;
    background: url(../img/shukkin/img-shukkin-arrow01.svg) no-repeat;
    background-size: contain;
    position: absolute;
    left: -15%;
    top: calc(238px / 2);
    transform: translateY(-50%)
  }
  .shukkin .flow-box01>.box:nth-of-type(2)::before {
    left: -20%
  }
  .shukkin .flow-box01>.box>.img {
    min-height: 260px
  }
  .shukkin .flow-box01>.box .img01 {
    width: 176px;
    max-width: 60%;
    height: auto
  }
  .shukkin .flow-box01>.box .img02 {
    width: 250px;
    max-width: 96%;
    height: auto
  }
  .shukkin .flow-box01>.box .img03 {
    width: 236px;
    max-width: 91%;
    height: auto
  }
  .shukkin .flow-box01>.box [class^=text] {
    max-width: 260px;
    margin: 9px auto 0;
    font-size: 1.6rem;
    line-height: 1.5
  }
  .shukkin .recom-box01 {
    display: flex;
    justify-content: space-between
  }
  .shukkin .recom-box01>.box {
    width: calc(50% - 26px);
    padding: 30px 40px
  }
  .shukkin .recom-box01>.box .img {
    margin: 18px auto 0
  }
  .shukkin .recom-box01>.box .img.-img01 {
    max-width: 301px;
    height: auto;
    margin-top: 0;
    position: relative;
    left: 20px
  }
  .shukkin .recom-box01>.box .img.-img02 {
    max-width: 316px;
    height: auto
  }
  .shukkin .recom-box01>.box .img.-img02+.text {
    margin-top: 6px
  }
  .shukkin .recom-box01>.box .text {
    margin-top: 12px;
    font-size: 1.6rem
  }
  .shukkin .features-box {
    margin-top: 80px
  }
  .shukkin .features-box>.inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 46px 0 60px
  }
  .shukkin .features-box>.inner .title02.-num .mark {
    width: 123px;
    height: 123px;
    top: -76px;
    left: 110px
  }
  .shukkin .col-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10px
  }
  .shukkin .col-box>.dl {
    width: calc(50% - 15px)
  }
  .shukkin .col-box>.dl .img01 {
    width: 340px;
    height: auto
  }
  .shukkin .col-box>.dl .img02 {
    width: 245px;
    height: auto;
    margin-top: 30px
  }
  .shukkin .col-box>.dl .dd {
    margin-top: 24px;
    font-size: 1.6rem
  }
  .shukkin .list-box {
    display: flex;
    justify-content: center;
    font-size: 1.9rem
  }
  .shukkin .list-box .txt {
    font-size: 1.6rem
  }
  .shukkin .img-box01 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 36px
  }
  .shukkin .img-box01+.img-box01 {
    margin-top: 28px
  }
  .shukkin .img-box01.-reverse {
    flex-flow: row-reverse nowrap
  }
  .shukkin .img-box01>.text {
    max-width: 360px
  }
  .shukkin .img-box01>.text .dl .dd {
    margin-top: 20px;
    font-size: 1.6rem;
    line-height: 1.625
  }
  .shukkin .img-box01>.text .dl+._notice01 {
    margin-top: 20px;
    font-size: 1.3rem
  }
  .shukkin .img-box01>.img {
    text-align: center;
    flex: 1
  }
  .shukkin .img-box01>.img .img01 {
    max-width: 214px;
    height: auto
  }
  .shukkin .img-box01>.img .img02 {
    max-width: 267px;
    height: auto
  }
  .shukkin .img-box01>.img .img03 {
    max-width: 221px;
    height: auto
  }
  .shukkin .img-box01+.list-notice01 {
    margin-top: 30px;
    font-size: 1.2rem
  }
  .shukkin em.text-mark01 {
    font-size: 2.4rem
  }
  .shukkin .about-box {
    margin: 30px auto 0
  }
  .shukkin .title05 {
    padding: 6px 0 4px 80px;
    font-size: 2.1rem
  }
  .shukkin .img-box02 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 52px 24px 29px
  }
  .shukkin .img-box02>.img {
    width: 152px;
    height: auto
  }
  .shukkin .img-box02>.box {
    width: 468px
  }
  .content-block01 {
    max-width: 1048px;
    padding: 90px 24px 100px
  }
  .content-block02 {
    max-width: 72rem;
    padding-top: 40px
  }
  .content-block03 {
    margin-top: 60px;
    padding-top: 60px
  }
}

@media screen and (max-width:767.98px) {
  .shukkin .list-num01>.item {
    position: relative;
    padding: 3px 0 3px calc(22px + 4px)
  }
  .shukkin .list-num01>.item>.mark {
    position: absolute;
    left: 0;
    top: -2px
  }
  .shukkin .list-num01>.item>.mark img {
    width: 22px
  }
  .shukkin .flow-box01>.box:not(:last-child) {
    padding-bottom: 52px
  }
  .shukkin .flow-box01>.box:not(:last-child)::before {
    content: "";
    display: block;
    width: 20px;
    height: 31px;
    background: url(../img/shukkin/img-shukkin-arrow01.svg) no-repeat;
    background-size: contain;
    position: absolute;
    margin-left: -5px;
    left: 50%;
    bottom: 0;
    transform: rotate(90deg) translateX(-50%)
  }
  .shukkin .flow-box01>.box [class^=text] {
    margin-top: 8px;
    font-size: 1.4rem
  }
  .shukkin .flow-box01>.box .img01 {
    width: 140px;
    max-width: 100%;
    height: auto
  }
  .shukkin .flow-box01>.box .img02 {
    width: 329px;
    max-width: 100%;
    height: auto
  }
  .shukkin .flow-box01>.box .img03 {
    width: 329px;
    max-width: 100%;
    height: auto
  }
  .shukkin .recom-box01>.box {
    padding: 30px 24px
  }
  .shukkin .recom-box01>.box:not(:first-child) {
    margin-top: 20px
  }
  .shukkin .recom-box01>.box .img.-img01 {
    max-width: 225px;
    height: auto;
    margin: 14px auto 0
  }
  .shukkin .recom-box01>.box .img.-img02 {
    max-width: 223px;
    height: auto;
    margin: 20px auto 0
  }
  .shukkin .recom-box01>.box .text {
    margin-top: 10px;
    font-size: 1.4rem
  }
  .shukkin .title02.-num>.inner {
    font-size: 2.2rem
  }
  .shukkin .features-box>.inner .title02.-num .mark {
    margin-left: -120px
  }
  .shukkin .title02.-num>.inner .icon img {
    width: auto;
    height: 39px
  }
  .shukkin .img-box01 {
    margin-top: 21px
  }
  .shukkin .img-box01+.img-box01 {
    margin-top: 30px
  }
  .shukkin .img-box01>.img .img01 {
    max-width: 132px;
    height: auto
  }
  .shukkin .img-box01>.img .img02 {
    max-width: 184px;
    height: auto
  }
  .shukkin .img-box01>.img .img03 {
    max-width: 150px;
    height: auto
  }
  .shukkin .img-box01>.text {
    margin-top: 15px
  }
  .shukkin .img-box01>.text .dl .dd {
    margin-top: 10px
  }
  .shukkin .img-box01>.text .dl+._notice01 {
    margin-top: 10px;
    font-size: 1.2rem
  }
  .shukkin .img-box01+.list-notice01 {
    margin-top: 15px
  }
  .shukkin .list-box {
    margin-top: 30px;
    font-size: 1.6rem
  }
  .shukkin .list-box .txt {
    font-size: 1.4rem
  }
  .shukkin .title05 {
    padding: 6px 0 4px 58px;
    font-size: 2rem
  }
  .shukkin .title05 .icon {
    width: 58px;
    height: auto;
    margin-left: -100px
  }
  .shukkin .img-box02 {
    padding: 0 14px 30px
  }
  .shukkin .img-box02>.box>[class^=img] {
    margin: 30px auto 0;
    text-align: center
  }
  .shukkin .img-box02>.box>[class^=img] img {
    max-width: 231px;
    height: auto
  }
  .shukkin .img-box02>.box>div:not(:first-child) {
    border-top: 1px solid #eee;
    padding-top: 30px
  }
  .shukkin .secFaq .faqlist {
    padding: 0
  }
  .shukkin .table-block .table-scroll01 {
    overflow-y: auto
  }
  .shukkin .table-block .table-type01 {
    min-width: 600px;
    width: 100%;
    font-size: 1.4rem
  }
  .shukkin .btn-block {
    margin-top: 30px;
    padding: 0 24px
  }
  .shukkin .btn-block>.btn {
    max-width: 100%
  }
}

@media screen and (max-width:374.98px) {
  .shukkin .title01 .inner {
    font-size: 7.2vw
  }
  .shukkin .text-block01 {
    font-size: 4.27vw
  }
  .shukkin .title03 {
    font-size: 4vw
  }
}

a.linkText {
  text-decoration: underline
}

a.linkText:hover {
  text-decoration: none
}

._d-flex {
  display: flex
}

._d-inline {
  display: inline
}

._t-orange01 {
  color: var(--cl-o)
}

._t-green01 {
  color: var(--cl-g)
}

._t-green02 {
  color: var(--cl-g-l)
}

._t-center {
  text-align: center
}

._t-bold {
  font-weight: var(--fw-b)
}

._t-midium {
  font-weight: var(--fw-m)
}

._t-normal {
  font-weight: var(--fw-r)
}

._bg-green01 {
  background: #e6f6e0
}

._fs-small01 {
  font-size: var(--fs-pc-caption1)
}

._fs-small02 {
  font-size: var(--fs-pc-caption2)
}

._ml16 {
  margin-left: 16px
}

._notice01 {
  padding-left: 1.2em;
  position: relative
}

._notice01>.item {
  position: absolute;
  left: 0
}

._pc-content {
  display: none!important
}

._sp-content {
  display: none!important
}

._w24p {
  width: 24%!important
}

._w19p {
  width: 19%!important
}

._w20p {
  width: 20%!important
}

@media screen and (min-width:768px) {
  ._pc-content {
    display: block!important
  }
  ._pc-mt40 {
    margin-top: 40px
  }
  ._pc-mt80 {
    margin-top: 80px
  }
}

@media screen and (max-width:767px) {
  ._sp-content {
    display: block!important
  }
  ._sp-t-left {
    text-align: left!important
  }
  ._sp-t-right {
    text-align: right!important
  }
  ._sp-t-center {
    text-align: center!important
  }
}

.hide-novoice, .show-noservice, .show-novoice {
  display: none
}

.tokkyo .tokkyo_icon {
  position: relative
}

.tokkyo .tokkyo_icon {
  position: absolute;
  width: 70px;
  top: -35px;
  right: -35px
}

.tokkyo .tokkyo_icon img {
  box-shadow: none;
  width: 7rem;
  height: auto
}