@charset "UTF-8";
@font-face {
  font-family: "tsunagi";
  src: url("../font/TsunagiGothic.woff") format("woff"); }
/*****************************************/
body {
  background: url("../images/common/mv_bg1.svg") left top no-repeat;
  background-size: 548px 527px;
  padding: 150px 0 0 0; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  body {
    background: url("../images/common/mv_bg1.svg") left top no-repeat;
    background-size: 377px 363px;
    padding: 150px 0 0 0; } }
/*max-width:1024px*/
/*max-width:768px*/
@media (max-width: 480px) {
  body {
    background: url("../images/common/mv_bg1.svg") left top no-repeat;
    background-size: 231px 222px;
    padding: 150px 0 0 0; } }
/*max-width:480px*/
/*****************************************/
.features {
  padding: 150px 0 230px; }
  .features h2 {
    width: calc(100% - 200px);
    max-width: 1000px;
    color: #79503A;
    font: 4rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.06em;
    margin: 0 auto 70px;
    position: relative; }
    .features h2 small {
      font: 1.5rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      position: absolute;
      top: -30px;
      left: 8px; }
    .features h2 span {
      margin: 0;
      position: relative;
      width: fit-content;
      display: block; }
      .features h2 span:before {
        position: absolute;
        content: "";
        display: block;
        background: url("../images/common/dot.svg") center center no-repeat;
        background-size: contain;
        aspect-ratio: 85/10;
        width: 100%;
        max-width: 85px;
        height: auto;
        top: 55%;
        left: auto;
        right: -120px;
        -webkit-transform: translate(0%, -50%);
        /* Safari用 */
        transform: translate(0%, -50%); }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .features {
    width: calc(100% - 80px);
    margin: 0 auto; }
    .features h2 {
      width: 100%; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .features h2 {
    margin: 0 auto 65px;
    font: 3.5rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.06em; }
    .features h2 span:before {
      max-width: 70px;
      top: 55%;
      right: -95px; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .features {
    width: calc(100% - 40px);
    padding: 150px 0 150px; }
    .features h2 {
      font: 3rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      letter-spacing: 0.06em;
      margin: 0 auto 55px; }
      .features h2 small {
        font: 1.4rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 700;
        top: -30px;
        left: 2px; }
      .features h2 span:before {
        max-width: 65px;
        top: 55%;
        right: -85px; } }
/*max-width:480px*/
/*****************************************/
/*****************************************/
.features_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  margin: 0 auto;
  width: calc(100% - 200px);
  max-width: 1140px; }
  .features_list li {
    width: calc((100% - 40px)/3);
    max-width: 320px;
    aspect-ratio: 320/238;
    height: auto;
    margin: 0 0 90px 0;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    transition: .3s;
    position: relative;
    /*span{
      font: 5rem/1.0em Futura, "Century Gothic";
      font-weight: 700;
      display: block;
      margin: 0 0 5px;
    }
    p{
      font: 2.2rem/1.3em $tsunagi;
      font-weight: 900;
      letter-spacing: 0.03em;
      padding: 0 0 65px;
      display: block;
      position: relative;
      &:before{
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        aspect-ratio:1/1;
        max-width: 43px;
        height: auto;
        background: url("../images/features/arrow.svg") center bottom no-repeat;
        background-size: contain;
        bottom: 0;
        left: 50%;
        -webkit-transform: translate(-50%, 0%); 
        transform: translate(-50%, 0%);
      }
     }//p*/ }
    .features_list li span {
      font: 5rem/1.0em Futura, "Century Gothic";
      font-weight: 700;
      display: block; }
    .features_list li p {
      font: 2.2rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 900;
      letter-spacing: 0.03em;
      padding: 0 0 5px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      margin: 15px 0; }
    .features_list li img {
      display: block;
      width: 42px;
      margin: 0 auto; }
    .features_list li:last-of-type {
      /* img{
         display: block;
         height:calc(100% - 40px);
         max-height:200px;
         width: auto;
         margin: 0 auto;
       }*/ }
      .features_list li:last-of-type .features_yumeji {
        display: block;
        height: calc(100% - 40px);
        max-height: 200px;
        width: auto;
        margin: 0 auto; }
    .features_list li.switch01 {
      background-image: url("../images/features/features01.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch02 {
      background-image: url("../images/features/features02.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch03 {
      background-image: url("../images/features/features03.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch04 {
      background-image: url("../images/features/features04.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch05 {
      background-image: url("../images/features/features05.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch06 {
      background-image: url("../images/features/features06.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch07 {
      background-image: url("../images/features/features07.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li.switch08 {
      background-image: url("../images/features/features08.svg");
      background-size: 100% auto;
      background-repeat: no-repeat;
      background-position: center center; }
    .features_list li:last-of-type {
      /*    img{
            display: block;
            margin: 0 auto;
          }*/ }

@media (max-width: 1280px) {
  .features_list li {
    width: calc((100% - 80px)/3);
    margin: 0 0 40px;
    /* */ }
    .features_list li p {
      font: 2vw/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 900;
      letter-spacing: 0.03em;
      margin: 5% 0; } }
/*max-width:1280px*/
@media (max-width: 1024px) {
  .features_list {
    width: 100%;
    max-width: 640px;
    justify-content: space-between;
    margin: 0 auto; }
    .features_list li {
      width: calc((100% - 50px)/2);
      max-width: 400px;
      aspect-ratio: 320/238;
      height: auto;
      margin: 0 0 40px 0; }
      .features_list li:last-of-type {
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        height: 100%;
        margin: 0 auto !important;
        /*img{
          display: block;
          margin: 0 auto;
          height: 160px;
        }*/ }
        .features_list li:last-of-type .features_yumeji {
          height: 160px; }
      .features_list li span {
        font: 4.5rem/1.0em Futura, "Century Gothic";
        font-weight: 700;
        display: block; }
      .features_list li p {
        font: 2.2rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 900; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .features_list {
    width: 100%;
    display: block;
    margin: 0 auto; }
    .features_list li {
      margin: 0 auto 40px !important;
      width: 100%;
      max-width: 320px;
      height: auto; }
      .features_list li:last-of-type {
        display: none; }
      .features_list li p {
        font: 2.2rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
        font-weight: 900; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .features_list li {
    max-width: 300px;
    margin: 0 auto 30px !important; } }
/*max-width:480px*/
@media (hover: hover) {
  .features_list li:hover {
    opacity: 0.8;
    cursor: pointer;
    background-size: 95% auto; }
    .features_list li:hover:last-of-type {
      opacity: 1;
      cursor: auto;
      background-size: 100% auto; } }
/*****************************************/
main.active {
  z-index: 999999; }

.features [class*="box"] {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transition: .3s; }
  .features [class*="box"].active {
    opacity: 1;
    z-index: 999999; }
.features .features_content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  /* Safari用 */
  transform: translate(-50%, -50%);
  z-index: 101;
  background: #fff;
  padding: 110px 80px 50px;
  width: 90%;
  height: 90%;
  max-width: 1000px;
  border-radius: 10px;
  overflow-y: scroll; }
  .features .features_content .close {
    transition: .3s;
    font: 2rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #79503A;
    position: relative;
    padding: 0 25px 0 0;
    display: block;
    width: fit-content;
    margin: 0 auto; }
    .features .features_content .close:before {
      transition: .3s;
      position: absolute;
      content: "×";
      right: 0;
      font: 2.5rem/1em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 700;
      top: -4px; }
  .features .features_content h2 {
    font: 2.4rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.06em;
    width: 100%;
    margin: 0 0 40px; }
    .features .features_content h2 span:before {
      width: 68px;
      right: -80px; }
  .features .features_content h3 {
    font: 4.6rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    letter-spacing: 0.06em;
    width: 100%;
    margin: 0 0 40px;
    color: #79503A; }
    .features .features_content h3 br {
      display: none; }
  .features .features_content .pic {
    position: relative;
    margin: 0 auto 40px; }
    .features .features_content .pic img {
      border-radius: 10px;
      position: relative;
      z-index: 5; }
    .features .features_content .pic:before {
      z-index: 1;
      position: absolute;
      content: "";
      display: block;
      background: url("../images/mv_chara.svg") center center no-repeat;
      background-size: contain;
      aspect-ratio: 110/140;
      width: 100%;
      max-width: 140px;
      height: auto;
      bottom: 0;
      right: -70px; }
  .features .features_content p {
    font: 1.5rem/2.4em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #79503A;
    margin: 0 auto 50px;
    text-align: justify;
    text-justify: inter-ideograph; }
    .features .features_content p.mb00 {
      margin-bottom: 0; }
  .features .features_content dl {
    font: 1.5rem/2.4em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-weight: 400;
    letter-spacing: 0.06em;
    color: #79503A;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    max-width: 620px;
    width: calc(100% - 20px);
    margin: 15px auto 40px; }
    .features .features_content dl dt {
      width: 130px;
      padding: 10px;
      border-bottom: 1px solid #79503A; }
    .features .features_content dl dd {
      border-bottom: 1px solid #79503A;
      padding: 10px 0;
      width: calc(100% - 130px); }
  .features .features_content .pic_flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: flex-start;
    margin: 0 0 75px; }
    .features .features_content .pic_flex img {
      max-width: calc((100% - 50px) / 2);
      width: auto;
      height: auto; }
.features .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0.8; }
.features .features_content::-webkit-scrollbar {
  width: 8px;
  border-radius: 0 5px 5px 0;
  background-color: #fff; }
.features .features_content::-webkit-scrollbar-thumb {
  width: 6px;
  border-radius: 5px; }

.box01 .features_content::-webkit-scrollbar-thumb {
  background: #F4AD3C; }
.box01 .bg {
  background-color: #F4AD3C; }
.box01 .close:hover {
  cursor: pointer;
  color: #F4AD3C; }
.box01 .features_content:before {
  position: absolute;
  content: "1";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #F4AD3C; }

.box02 .features_content::-webkit-scrollbar-thumb {
  background: #69977F; }
.box02 .bg {
  background-color: #69977F; }
.box02 .close:hover {
  cursor: pointer;
  color: #69977F; }
.box02 .features_content:before {
  position: absolute;
  content: "2";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #69977F; }

.box03 .features_content::-webkit-scrollbar-thumb {
  background: #51B5C3; }
.box03 .bg {
  background-color: #51B5C3; }
.box03 .close:hover {
  cursor: pointer;
  color: #51B5C3; }
.box03 .features_content:before {
  position: absolute;
  content: "3";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #51B5C3; }

.box04 .features_content::-webkit-scrollbar-thumb {
  background: #A04848; }
.box04 .bg {
  background-color: #A04848; }
.box04 .close:hover {
  cursor: pointer;
  color: #A04848; }
.box04 .features_content:before {
  position: absolute;
  content: "4";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #A04848; }

.box05 .features_content::-webkit-scrollbar-thumb {
  background: #858DBC; }
.box05 .bg {
  background-color: #858DBC; }
.box05 .close:hover {
  cursor: pointer;
  color: #858DBC; }
.box05 .features_content:before {
  position: absolute;
  content: "5";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #858DBC; }

.box06 .features_content::-webkit-scrollbar-thumb {
  background: #88BA6B; }
.box06 .bg {
  background-color: #88BA6B; }
.box06 .close:hover {
  cursor: pointer;
  color: #88BA6B; }
.box06 .features_content:before {
  position: absolute;
  content: "6";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #88BA6B; }

.box07 .features_content::-webkit-scrollbar-thumb {
  background: #D5C052; }
.box07 .bg {
  background-color: #D5C052; }
.box07 .close:hover {
  cursor: pointer;
  color: #D5C052; }
.box07 .features_content:before {
  position: absolute;
  content: "7";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #D5C052; }

.box08 .features_content::-webkit-scrollbar-thumb {
  background: #CA77B1; }
.box08 .bg {
  background-color: #CA77B1; }
.box08 .close:hover {
  cursor: pointer;
  color: #CA77B1; }
.box08 .features_content:before {
  position: absolute;
  content: "8";
  right: 80px;
  top: 30px;
  font: 15rem/1.0em  Futura, "Century Gothic";
  color: #CA77B1; }

/*max-width:1280px*/
@media (max-width: 1024px) {
  .features .features_content .pic_flex img {
    max-width: calc((100% - 20px) / 2); }
  .features .features_content h3 br {
    display: block; }
  .features .features_content .pic:before {
    aspect-ratio: 110/140;
    width: 100%;
    max-width: 100px; } }
/*max-width:1024px*/
@media (max-width: 768px) {
  .features .features_content {
    padding: 80px 40px 45px; }
    .features .features_content h2 {
      font: 2rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      letter-spacing: 0.06em;
      width: 100%;
      margin: 0 0 30px; }
      .features .features_content h2 span:before {
        width: 58px;
        right: -70px; }
    .features .features_content h3 {
      font: 3.4rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      letter-spacing: 0.06em;
      width: 100%;
      margin: 0 0 40px; }
      .features .features_content h3 br {
        display: block; }
    .features .features_content .pic:before {
      width: 100%;
      max-width: 80px;
      height: auto;
      bottom: -20px;
      right: -40px;
      z-index: 10; }
    .features .features_content .pic_flex img {
      max-width: calc((100% - 20px) / 2);
      width: auto;
      height: auto; }

  .box01 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box02 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box03 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box04 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box05 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box06 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box07 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; }

  .box08 .features_content:before {
    right: 25px;
    top: 9px;
    font: 10rem/1.0em  Futura, "Century Gothic"; } }
/*max-width:768px*/
@media (max-width: 480px) {
  .features .features_content {
    padding: 50px 20px; }
    .features .features_content h2 {
      font: 1.8rem/1em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      letter-spacing: 0.06em;
      margin: 0 0 25px; }
      .features .features_content h2 span:before {
        width: 48px;
        right: -60px; }
    .features .features_content h3 {
      font: 2.6rem/1.3em "tsunagi", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      letter-spacing: 0.06em;
      width: 100%;
      margin: 0 0 25px; }
    .features .features_content .pic {
      margin: 0 auto 30px; }
      .features .features_content .pic:before {
        max-width: 50px;
        bottom: -18px;
        right: -16px; }
    .features .features_content dl {
      margin: 30px auto 40px;
      font: 1.5rem/2em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 400;
      border-bottom: 1px solid #79503A;
      border-top: 1px solid #79503A; }
      .features .features_content dl dt {
        width: 100%;
        border-bottom: none;
        background-color: antiquewhite;
        padding: 5px 15px; }
      .features .features_content dl dd {
        padding: 10px 15px 25px;
        width: 100%;
        border-bottom: none; }
    .features .features_content p {
      font: 1.5rem/2.2em "Zen Kaku Gothic New", "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
      font-weight: 400;
      margin: 0 auto 30px;
      padding: 0 15px; }
    .features .features_content .pic_flex {
      margin-bottom: 30px; }
      .features .features_content .pic_flex img {
        max-width: 100%;
        width: auto;
        height: auto;
        margin: 0 auto 20px; }

  .box01 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box02 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box03 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box04 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box05 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box06 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box07 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; }

  .box08 .features_content:before {
    right: 20px;
    top: 9px;
    font: 8rem/1.0em  Futura, "Century Gothic"; } }
/*max-width:480px*/