@charset "utf-8";

.cm-h {
  position: absolute;
  top: min(calc(30em/16), calc(30/1400*100vw));
  left: min(calc(30em/16), calc(30/1400*100vw));
  right: min(calc(30em/16), calc(30/1400*100vw));
  /* z-index: 4;
  background-color: #fff;
  border-radius: 100vmax; */
  @media screen and (max-width: 880px) {
    top: calc(30em/16);
    left: 0;
    right: 0;
    /* background-color: transparent; */
  }
  @media screen and (max-width: 540px) and (max-height: calc(650/400*100vw)) {
    top: calc(30/650*90svh);
  }
}
.cm-h__body {
  position: relative;
  z-index: 4;
  background-color: #fff;
  border-radius: 100vmax;
  @media screen and (max-width: 880px) {
    background-color: transparent;
  }
}
.cm-h__body-inner {
  margin-inline: auto;
  display: flex;
  justify-content: center;
  /* justify-content: space-between; */
  align-items: center;
  width: calc(1240/1340*100%);
  height: calc(110em/16);
  font-size: min(1em, calc(16/1400*100vw));
  @media screen and (max-width: 880px) {
    justify-content: center;
    height: auto;
    font-size: 1em;
  }
}
.cm-h__bodyLogo {
  position: absolute;
  z-index: 4;
  left: calc(50em/16);
  width: calc(163em/16);
  @media screen and (max-width: 880px) {
    display: none;
    position: static;
    width: calc(147em/16);
    body[data-page="top"] & {
      display: block;
    }
  }
}
.cm-h__bodyLogoTarget {
  display: block;
}
@media (any-hover: hover) {
  .cm-h__bodyLogoTarget {
    transition: opacity var(--transition);
    &:is(:hover, :focus-visible) {
      opacity: .6;
    }
  }
}
.cm-h__bodyNav {
  position: relative;
  z-index: 4;
  margin-left: calc(64/1240*100%);
  @media screen and (max-width: 880px) {
    display: none;
  }
}
.cm-h__bodyNavList {
  display: flex;
  gap: calc(50em/16);
  & .item__target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(10em/16);
  }
  & .item__targetTxt {
    font-size: calc(20em/16);
    letter-spacing: 0.1em;
  }
  & .item__targetLabel {
    position: relative;
    padding: calc(6em/14) calc(12em/14);
    font-size: calc(14em/16);
    letter-spacing: 0.1em;
    background-color: var(--yellow-color);
    border-radius: calc(5em/14);
    box-shadow: calc(3em/14) calc(3em/14) 0 0 var(--yellow-shadow-color);
    overflow: hidden;
  }
}
@media (any-hover: hover) {
  .cm-h__bodyNavList {
    & .item__targetTxt {
      transition: opacity var(--transition);
      .cm-h__bodyNavList .item__target:is(:hover, :focus-visible) & {
        opacity: .6;
      }
    }
    & .item__targetLabel {
      transition: color var(--transition), background-color var(--transition), box-shadow var(--transition), transform var(--transition);
      .cm-h__bodyNavList .item__target:is(:hover, :focus-visible) & {
        color: #fff;
        background-color: var(--main-color);
        box-shadow: calc(0em/14) calc(0em/14) 0 0 var(--yellow-shadow-color);
        transform: translate3d(calc(3em/14), calc(3em/14), 0);
      }
    }
  }
}

.cm-menu {
  position: fixed;
  top: calc(43em/16);
  right: calc(50em/16);
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(84em/16);
  height: calc(84em/16);
  color: #fff;
  /* background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02)); */
  border: calc(2em/16) solid var(--main-color);
  border-radius: 100vmax;
  overflow: hidden;
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 100vmax;
    overflow: hidden;
    pointer-events: none;
  }
  &::before {
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  }
  &::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: calc(5em/16) solid;
    /* border: calc(2em/16) solid var(--main-color); */
  }
  @media screen and (max-height: calc(640/1400*100vw)) and (min-width: 1025px) {
    top: calc(43em/16);
    right: calc(50em/16);
  }
  @media screen and (max-width: 880px) {
    top: calc(23em/16);
    right: calc(18em/16);
    width: calc(64em/16);
    height: calc(64em/16);
    border-radius: calc(20em/16);
    &::before,
    &::after {
      border-radius: calc(18em/16);
    }
    &::after {
      border: calc(3em/16) solid;
    }
  }
  @media screen and (max-width: 540px) and (max-height: calc(650/400*100vw)) {
    top: calc(23/650*90svh);
  }
}
.cm-menu__body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(26em/16);
  height: calc(20em/16);
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: calc(4em/16);
    background-color: currentColor;
    transition: rotate var(--transition);
  }
  &::before {
    top: 0;
  }
  &::after {
    bottom: 0;
  }
  html.is-menuopen & {
    &::before {
      top: auto;
      rotate: 45deg;
    }
    &::after {
      bottom: auto;
      rotate: -45deg;
    }
  }
  @media screen and (max-width: 880px) {
    width: calc(20em/16);
    height: calc(15em/16);
    &::before,
    &::after {
      height: calc(3em/16);
    }
  }
}
.cm-menu__bodyLine {
  width: 100%;
  height: calc(4em/16);
  background-color: currentColor;
  transition: opacity var(--transition);
  html.is-menuopen & {
    opacity: 0;
  }
  @media screen and (max-width: 880px) {
    height: calc(3em/16);
  }
}
@media (any-hover: hover) {
  .cm-menu {
    transition: border-color var(--transition), width var(--transition), height var(--transition);
    &::after {
      transition: opacity var(--transition);
    }
    &:is(:hover, :focus-visible) {
      border-color: transparent;
      &::before {
        width: calc(100% + 4em/16);
        height: calc(100% + 4em/16);
      }
      &::after {
        opacity: 0;
      }
      @media screen and (max-width: 880px) {
        &::before {
          width: calc(100% + 3em/16);
          height: calc(100% + 3em/16);
        }
      }
    }
  }
}

.cm-nav {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  @media screen and (max-width: 1024px) {
    font-size: 1.1em;
  }
  @media screen and (max-width: 880px) {
    font-size: 1em;
    height: 100%;
  }
}
.cm-nav-inner {
  position: relative;
  height: 100%;
  padding: min(calc(30em/16), calc(30/875*100vh));
  background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
  overflow: hidden;
  @media screen and (max-height: calc(600/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px) {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  @media screen and (max-width: 880px) {
    padding: calc(10em/16);
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
.cm-nav__body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: relative;
  @media screen and (max-height: calc(680/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px) {
    justify-content: flex-start;
  }
  @media screen and (max-height: calc(600/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px) {
    display: block;
    height: auto;
  }
  @media screen and (max-width: 880px) {
    display: block;
    height: auto;
  }
}
.cm-nav__bodyBg {
  background-color: #fff;
  border-radius: calc(55em/16);
  overflow: hidden;
  position: absolute;
  inset: 0;
  z-index: 0;
  @media screen and (max-width: 880px) {
    border-radius: calc(20em/16);
  }
}
.cm-nav__body-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: min(calc(118em/16), calc(118/875*100vh)) calc(15em/16) min(calc(88em/16), calc(88/875*100vh));
  height: 100%;
  @media screen and (max-height: calc(780/1400*100vw)) and (min-width: 1025px) {
    padding: min(calc(118em/16*.5), calc(118/875*50vh)) calc(15em/16) min(calc(88em/16*.5), calc(88/875*50vh));
  }
  @media screen and (max-height: calc(640/1400*100vw)) and (min-width: 1025px) {
    padding: min(calc(118em/16*.25), calc(118/875*25vh)) calc(15em/16) min(calc(88em/16*.25), calc(88/875*25vh));
  }
  @media screen and (max-height: calc(600/1400*100vw)) and (min-width: 1025px) {
    display: block;
    padding: min(calc(118em/16), calc(118/875*100vh)) calc(15em/16) min(calc(88em/16), calc(88/875*100vh));
    height: auto;
  }
  @media screen and (max-width: 880px) {
    padding: calc(150em/16) calc(30em/16) calc(118em/16);
    /* padding: calc(105em/16) calc(30em/16) calc(118em/16); */
    height: auto;
  }
  @media screen and (max-height: calc(800/400*100vw)) and (max-width: 880px) {
    padding: calc(150/800*75vh) calc(30em/16) calc(118em/16);
    /* padding: calc(105/800*75vh) calc(30em/16) calc(118em/16); */
  }
}
.cm-nav__bodyList {
  display: grid;
  grid-template-columns: repeat(4, auto);
  @media screen and (max-width: 880px) {
    display: flex;
    flex-direction: column;
  }
}
.cm-nav__bodyListRow {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 2;
  align-content: start;
  padding: min(calc(10em/16), calc(10/875*100vh)) calc(10em/16) min(calc(24em/16), calc(24/1400*100vw)) calc(24em/16);
  opacity: 0;
  @media (scripting: none) {
    opacity: 1;
  }
  &:where(:nth-child(n+3)) {
    border-left: 1px solid #eaeaea;
  }
  &.u-pcNone {
    display: none;
  }
  @media screen and (max-width: 880px) {
    display: block;
    padding: 0;
    border-left: none;
    border-bottom: 1px solid#eaeaea;
    &.u-pcNone {
      display: block;
    }
  }
  & .title-inner {
    display: grid;
    grid-template:
    "label label" auto
    "txt icon" 1fr/
    auto 1fr;
    column-gap: calc(16em/16);
    @media screen and (max-width: 880px) {
      grid-template:
      "label label" auto
      "txt icon" 1fr/
      1fr auto;
      padding: calc(20em/16) 0 calc(32em/16);
      .cm-nav__bodyListRow:first-of-type & {
        padding-top: 0;
      }
    }
    @media screen and (max-height: calc(800/400*100vw)) and (max-width: 400px) {
      padding: calc(20/800*75vh) 0 calc(32/800*75vh);
    }
  }
  & .title__label {
    grid-area: label;
    justify-self: start;
    margin-bottom: min(calc(19em/14), calc(19/875*100vh));
    padding: calc(6em/14) calc(12em/14);
    font-size: calc(14em/16);
    letter-spacing: 0.1em;
    background-color: var(--yellow-color);
    border-radius: calc(5em/14);
    filter: drop-shadow(calc(3em/14) calc(3em/14) 0 #ccc);
    @media screen and (max-width: 880px) {
      margin-bottom: calc(15em/10);
      padding: calc(5em/10) calc(8em/10);
      font-size: calc(10em/16);
      border-radius: calc(5em/10);
      filter: drop-shadow(calc(3em/10) calc(3em/10) 0 #ccc);
    }
  }
  & .title__txt {
    --w: 1;
    grid-area: txt;
    width: min(calc(var(--w) * 1em/16), calc(var(--w)/1400*100vw));
    &.is-firststep {
      --w: 220;
    }
    &.is-casestudy {
      --w: 182;
    }
    &.is-trademethod {
      --w: 181;
    }
    &.is-stepup {
      --w: 157;
    }
    @media screen and (max-width: 880px) {
      width: calc(var(--w) * .75em/16);
      &.is-toppage {
        --w: 164;
      }
      &.is-casestudy {
        --w: 341;
      }
    }
  }
  & .title__icon {
    grid-area: icon;
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: calc(-7em/16);
    width: calc(40em/16);
    height: calc(40em/16);
    background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
    border-radius: 100vmax;
    overflow: hidden;
    font-size: min(1em, calc(16/1400*100vw));
    pointer-events: none;
    @media screen and (max-width: 880px) {
      display: none;
      &.is-both {
        display: flex;
        font-size: 1em;
      }
    }
  }
  & .title__iconBoth {
    width: calc(17em/16);
    filter: drop-shadow(calc(1.5em/16) calc(1.5em/16) 0 #a13600);
    @media screen and (max-width: 880px) {
      filter: drop-shadow(calc(2em/36) calc(2em/36) 0 #a13600);
    }
  }
  & .title__iconBody {
    width: calc(17em/16);
    filter: drop-shadow(calc(1.5em/16) calc(1.5em/16) 0 #a13600);
    @media screen and (max-width: 880px) {
      display: none;
    }
  }
  & .title__spicon-wrapper {
    display: none;
    @media screen and (max-width: 880px) {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      display: block;
      padding: calc(38em/16) 0 calc(28em/16) calc(20em/16);
    }
  }
  & .title__spicon {
    @media screen and (max-width: 880px) {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(40em/16);
      height: calc(40em/16);
      background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
      border-radius: 100vmax;
      overflow: hidden;
    }
  }
  & .title__spiconBody {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.15em;
    width: calc(32em/36);
    font-size: calc(36em/16);
    text-shadow:
    2px 2px 0 var(--main-color), -2px -2px 0 var(--main-color),
    -2px 2px 0 var(--main-color), 2px -2px 0 var(--main-color),
    0px 2px 0 var(--main-color),  0 -2px 0 var(--main-color),
    -2px 0 0 var(--main-color), 2px 0 0 var(--main-color);
    color: #fff;
    filter: drop-shadow(calc(2em/36) calc(2em/36) 0 #a13600);
    @media screen and (max-width: 540px) {
      text-shadow:
        1px 1px 0 var(--main-color), -1px -1px 0 var(--main-color),
        -1px 1px 0 var(--main-color), 1px -1px 0 var(--main-color),
        0px 1px 0 var(--main-color),  0 -1px 0 var(--main-color),
        -1px 0 0 var(--main-color), 1px 0 0 var(--main-color);
    }
  }
  & .title__spiconBodyOpen {
    position: relative;
    z-index: 2;
    transition: scale var(--transition);
    .cm-nav__bodyListRow.is-open & {
      scale: 0;
    }
  }
  & .title__spiconBodyClose {
    position: absolute;
    z-index: 1;
    scale: 0;
    transition: scale var(--transition);
    .cm-nav__bodyListRow.is-open & {
      scale: 1;
      z-index: 2;
    }
  }
  & .body {
    @media screen and (max-width: 880px) {
      height: 0;
      overflow: hidden;
      @media (scripting: none) {
        height: auto;
      }
    }
  }
  & .body-inner {
    padding: min(calc(40em/16), calc(40/875*100vh)) 0 0;
    @media screen and (max-width: 880px) {
      padding: 0 0 calc(30em/16);
    }
  }
  & .body__list {
    display: flex;
    flex-direction: column;
    gap: min(calc(40em/16), calc(40/875*100vh));
    @media screen and (max-width: 880px) {
      gap: calc(30em/16);
    }
  }
  & .body__listItemTarget {
    display: flex;
    align-items: center;
    gap: min(calc(12em/16), calc(12/1400*100vw));
    @media screen and (max-width: 880px) {
      gap: calc(17em/16);
    }
  }
  & .body__listItemTargetArrow {
    flex-shrink: 0;
    width: calc(24em/16);
    filter: drop-shadow(calc(1em/16) calc(1em/16) 0 #9b9b9b);
    @media screen and (max-width: 880px) {
      width: calc(18em/16);
    }
  }
  & .body__listItemTargetTxt {
    font-size: calc(20em/16);
    letter-spacing: 0.06em;
    @media screen and (max-width: 880px) {
      font-size: calc(17em/16);
    }
  }
}
.cm-nav__bodyBtn {
  display: flex;
  justify-content: center;
  gap: min(calc(36em/16), calc(36/1150*100vw));
  margin-top: min(calc(68em/16), calc(68/875*100vh));
  @media screen and (max-height: calc(700/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px) {
    margin-top: min(calc(68em/16*.5), calc(68/875*50vh));
  }
  @media screen and (max-width: 880px) {
    flex-direction: column;
    align-items: center;
  }
  @media screen and (max-height: calc(800/400*100vw)) and (max-width: 400px) {
    margin-top: calc(68/800*75vh);
  }
}
.cm-nav__bodyBtnItem {
  flex-shrink: 0;
  opacity: 0;
  @media (scripting: none) {
    opacity: 1;
  }
  @media screen and (max-width: 880px) {
    width: 100%;
  }
  & .target {
    --btn-w: 300;
    --btn-h: 74;
    --btn-shadow-color: rgb(0 0 0/.3);
    --btn-outer-border-w: 2;
    --btn-fs-max: 22;
    --btn-fs-min: 19;
    position: relative;
    width: min(calc(var(--btn-w) * 1em/16), calc(var(--btn-w)/1150*100vw));
    &::before,
    &::after {
      content: '';
      position: absolute;
      inset: 0;
    }
    &.is-newopen {
      &::before {
        background: linear-gradient(to bottom, var(--grad-color02-01), var(--grad-color02-02));
      }
    }
    &.is-login {
      &::before {
        background: linear-gradient(to bottom, #19e6b9, #0e9792);
      }
    }
    @media screen and (max-width: 880px) {
      width: 100%;
    }
  }
  & .target__body {
    position: relative;
    z-index: 1;
    &::before {
      background: transparent;
    }
  }
}
.cm-nav__img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
  font-size: min(1em, calc(16/875*100vh));
  @media screen and (max-height: calc(700/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px){
    font-size: .8em;
  }
  @media screen and (max-height: calc(600/1400*100vw)) and (min-width: 1025px) and (max-width: 1720px) {
    position: fixed;
    z-index: 1;
  }
  @media screen and (max-width: 880px) {
    position: relative;
    top: auto;
    bottom: auto;
    margin: calc(-176em/16) calc(50% - var(--vw) * 50) calc(-120em/16);
    font-size: 1em;
    overflow: hidden;
  }
}
.cm-nav__imgRight,
.cm-nav__imgLeft {
  position: relative;
  display: flex;
}
.cm-nav__imgRightBody,
.cm-nav__imgLeftBody {
  --w: 1;
  position: absolute;
  bottom: calc(var(--bottom) * 1em/16);
  width: calc(var(--w) * 1em/16);
  opacity: 0;
  @media (scripting: none) {
    opacity: 1;
  }
}
.cm-nav__imgRightBody {
  --right: 0;
  right: calc(var(--right) * 1em/16);
  &.is-kokky {
    --right: 5;
    --bottom: -38;
    --w: 256;
    position: relative;
    z-index: 2;
    @media screen and (max-width: 880px) {
      --right: -15;
      --bottom: -66;
      --w: 153;
    }
  }
  &.is-fun {
    --right: 148;
    --bottom: -102;
    --w: 224;
    z-index: 1;
    @media screen and (max-width: 880px) {
      --right: 58;
      --bottom: -63;
      --w: 113;
    }
  }
}
.cm-nav__imgLeftBody {
  --left: 0;
  left: calc(var(--left) * 1em/16);
  &.is-hope {
    --bottom: -53;
    --left: -37;
    --w: 158;
    position: relative;
    z-index: 1;
    @media screen and (max-width: 880px) {
      --bottom: -32;
      --left: 4;
      --w: 70;
    }
  }
  &.is-worry {
    --bottom: -70;
    --left: 25;
    --w: 102;
    z-index: 2;
    @media screen and (max-width: 880px) {
      --bottom: -42;
      --left: 54;
      --w: 52;
    }
  }
  &.is-hajime {
    --bottom: -52;
    --left: 88;
    --w: 132;
    z-index: 3;
    @media screen and (max-width: 880px) {
      --bottom: -33;
      --left: 86;
      --w: 66;
    }
  }
  &.is-happy {
    --bottom: -75;
    --left: 180;
    --w: 115;
    z-index: 2;
    @media screen and (max-width: 880px) {
      --bottom: -44;
      --left: 131;
      --w: 58;
    }
  }
  &.is-sad {
    --bottom: -74;
    --left: 266;
    --w: 91;
    z-index: 1;
    @media screen and (max-width: 880px) {
      --bottom: -43;
      --left: 173;
      --w: 46;
    }
  }
}

@media (any-hover: hover) {
  .cm-nav__bodyListRow {
    & .title__iconBody {
      .cm-nav__bodyListRow .title__txt:is(:hover, :focus-visible) ~ .title__icon & {
        animation-name: arrow_move_hr;
        animation-duration: .6s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-timing-function: linear;
        @media screen and (max-width: 880px) {
          animation: none;
        }
      }
    }
  }
  .cm-nav__bodyBtnItem {
    & .target {
      &::after {
        opacity: 0;
        transition: opacity var(--transition);
      }
      &.is-newopen {
        &::after {
          background: linear-gradient(to bottom, var(--grad-color01-01), var(--grad-color01-02));
        }
      }
      &.is-login {
        &::after {
          background: linear-gradient(to bottom, #19bde6, #0e3b97)
        }
      }
      &:is(:hover, :focus-visible) {
        &::after {
          opacity: 1;
        }
      }
    }
  }
}
@keyframes arrow_move_hr {
  0% {
    translate: calc(0em/16) 0;
  }
  33% {
    translate: calc(0em/16) 0;
  }
  33.1% {
    translate: calc(1em/16) 0;
  }
  66% {
    translate: calc(1em/16) 0;
  }
  66.1% {
    translate: calc(2em/16) 0;
  }
  100% {
    translate: calc(2em/16) 0;
  }
}