@charset "UTF-8";
/*============================================
responsive
============================================*/
/*============================================
#main
============================================*/
#view {
  max-width: 1600px;
  margin: 0 auto;
  z-index: 10;
  position: relative; }
  #view .txt {
    position: absolute;
    bottom: 27%;
    left: 7%; }
    @media screen and (max-width: 897px) {
      #view .txt {
        bottom: 23%;
        left: 3%; } }
    #view .txt p {
      margin: 30px 0 0 0; }
      @media screen and (max-width: 897px) {
        #view .txt p {
          margin: 10px 0 0 0; } }
    #view .txt .en {
      padding: 0 5px;
      color: #fff;
      font-size: 2.5rem;
      font-family: source-han-sans-japanese, sans-serif;
      font-weight: 900;
      font-style: normal;
      text-align: left;
      color: #fff;
      background: #CF2E2E;
      display: inline; }
      @media screen and (max-width: 897px) {
        #view .txt .en {
          font-size: 1.4rem; } }
    #view .txt h1 {
      color: #fff;
      font-size: 4.2rem;
      font-family: source-han-sans-japanese, sans-serif;
      font-weight: 900;
      font-style: normal;
      text-align: left;
      color: #fff;
      background: #CF2E2E;
      margin: 15px 0 0 0;
      padding: 0 5px; }
      @media screen and (max-width: 897px) {
        #view .txt h1 {
          margin: 8px 0 0 0;
          font-size: 1.8rem; } }
    #view .txt .jp {
      color: #fff;
      padding: 0 5px;
      font-size: 2.8rem;
      font-family: source-han-sans-japanese, sans-serif;
      font-weight: 900;
      font-style: normal;
      text-align: left;
      color: #fff;
      background: #222;
      display: inline; }
      @media screen and (max-width: 897px) {
        #view .txt .jp {
          font-size: 1.6rem; } }
  #view .bnr {
    position: absolute;
    right: 3%;
    bottom: -10%; }
    @media screen and (max-width: 897px) {
      #view .bnr {
        left: 1%;
        bottom: -10%;
        max-width: 220px; } }

/*============================================
#headline
============================================*/
#headline {
  max-width: 960px;
  margin: 0 auto;
  padding: 60px 0 90px 0; }
  #headline P {
    text-align: center;
    font-size: 1.7rem;
    line-height: 1.9; }
    @media screen and (max-width: 897px) {
      #headline P {
        text-align: left;
        font-size: 1.6rem; } }
    #headline P span {
      color: #CF2E2E;
      border-bottom: 1px dotted #cf2e2e;
      font-weight: bold; }
  @media screen and (max-width: 897px) {
    #headline {
      margin: 0 20px;
      padding: 40px 0; } }

/*==================================================
スライダーのためのcss
===================================*/
.slider img {
  width: 100%;
  /*スライダー内の画像を横幅100%に*/
  height: auto; }

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/
.slider .slick-slide {
  margin: 0;
  /*スライド左右の余白調整*/ }

/*============================================
.diet_LP202207
============================================*/
#enqete {
  padding: 90px 0; }
  #enqete .learn__headline {
    text-align: center; }
    #enqete .learn__headline .ttl {
      font-family: source-han-sans-japanese, sans-serif;
      font-style: normal;
      font-weight: 900; }
      #enqete .learn__headline .ttl.ttl_main {
        font-size: 4.5rem;
        font-family: source-han-sans-japanese, sans-serif;
        font-weight: 900;
        font-style: normal; }
        @media screen and (max-width: 897px) {
          #enqete .learn__headline .ttl.ttl_main {
            font-size: 5vw; } }
        #enqete .learn__headline .ttl.ttl_main span {
          color: #CF2E2E;
          font-size: 1.8rem;
          display: block; }
          @media screen and (max-width: 897px) {
            #enqete .learn__headline .ttl.ttl_main span {
              font-size: 4vw; } }
  #enqete .enquete_list {
    max-width: 1140px;
    margin: 0 auto; }
    #enqete .enquete_list ul {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap; }
      #enqete .enquete_list ul li {
        width: 25%;
        padding: 2.5%;
        margin: 60px 0 0 0;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; }
        @media screen and (max-width: 897px) {
          #enqete .enquete_list ul li {
            width: 40%;
            margin: 30px 0 0 0; } }
      #enqete .enquete_list ul:after {
        content: "";
        width: 25%;
        margin: 60px 0 0 0;
        display: block;
        padding: 2.5%; }
        @media screen and (max-width: 897px) {
          #enqete .enquete_list ul:after {
            width: 40%;
            margin: 30px 0 0 0; } }

.modal__box {
  display: flex;
  justify-content: space-between;
  align-items: center; }
  .modal__box .modal__box__txt {
    width: 90%;
    padding: 5%;
    margin-left: auto;
    margin-right: auto; }
  .modal__box .close {
    position: absolute;
    right: 1%;
    top: 2%;
    cursor: pointer; }
  .modal__box a .round_btn {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    border: 2px solid #333;
    /* 枠の調整 */
    border-radius: 50%;
    /* 丸みの度合い */
    background: #fff;
    /* ボタンの背景色 */ }
    @media screen and (max-width: 897px) {
      .modal__box a .round_btn {
        width: 30px;
        height: 30px; } }
  .modal__box a .round_btn::before, .modal__box .round_btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3px;
    /* 棒の幅（太さ） */
    height: 22px;
    /* 棒の高さ */
    background: #333;
    /* バツ印の色 */ }
  .modal__box a .round_btn::before {
    transform: translate(-50%, -50%) rotate(45deg); }
  .modal__box a .round_btn::after {
    transform: translate(-50%, -50%) rotate(-45deg); }
  .modal__box .enq_sheeet h4 {
    font-weight: 800;
    font-size: 2.2em;
    text-align: center;
    padding: 30px;
    background-color: #CF2E2E;
    color: #fff;
    font-weight: bold;
    margin: 30px 0;
    border-radius: 5px; }
    @media screen and (max-width: 897px) {
      .modal__box .enq_sheeet h4 {
        font-size: 1.8rem;
        padding: 10px; } }
  .modal__box .enq_sheeet dt {
    font-weight: 500;
    font-size: small;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: #535252 1px dashed;
    display: flex;
    font-size: 1.7rem;
    font-weight: bold; }
    @media screen and (max-width: 897px) {
      .modal__box .enq_sheeet dt {
        font-size: 1.4rem;
        margin-bottom: 10px;
        padding-bottom: 5px; } }
    .modal__box .enq_sheeet dt span.hl {
      width: 30px;
      height: 30px;
      display: inline-block;
      line-height: 30px;
      margin-right: 10px;
      text-align: center;
      color: #fff;
      font-weight: bold;
      background-color: #222;
      border-radius: 30px; }
    .modal__box .enq_sheeet dt p {
      width: 90%;
      padding-top: 4px; }
      @media screen and (max-width: 897px) {
        .modal__box .enq_sheeet dt p {
          padding-top: 0; } }
  .modal__box .enq_sheeet dd {
    font-size: 1.4rem;
    font-weight: 300;
    margin-bottom: 30px;
    margin-left: 40px; }
    @media screen and (max-width: 897px) {
      .modal__box .enq_sheeet dd {
        margin-bottom: 40px;
        margin-left: 0; } }
  .modal__box .enq_sheeet dd.select {
    color: #684141;
    margin-bottom: 20px;
    margin-left: 40px; }
    @media screen and (max-width: 897px) {
      .modal__box .enq_sheeet dd.select {
        margin-bottom: 10px;
        margin-left: 0; } }
  .modal__box .enq_prof {
    display: block;
    padding-bottom: 20px;
    border-bottom: #5B5A5A 2px solid; }
    .modal__box .enq_prof .seibetu {
      display: inline-block;
      margin-right: 10%;
      font-size: 2.2rem;
      font-weight: 800; }
      @media screen and (max-width: 897px) {
        .modal__box .enq_prof .seibetu {
          font-size: 1.8rem;
          font-weight: 800; } }
      .modal__box .enq_prof .seibetu span {
        background-color: #222;
        border-radius: 5px;
        color: #FFFFFF;
        font-weight: bold;
        padding: 5px;
        font-size: 1.8rem;
        margin-right: 10px; }
        @media screen and (max-width: 897px) {
          .modal__box .enq_prof .seibetu span {
            font-size: 1.4rem; } }
    .modal__box .enq_prof .age {
      display: inline-block;
      text-align: right;
      font-size: 2.2rem;
      font-weight: 800; }
      @media screen and (max-width: 897px) {
        .modal__box .enq_prof .age {
          font-size: 1.8rem;
          font-weight: 800; } }
      .modal__box .enq_prof .age span {
        background-color: #222;
        border-radius: 5px;
        color: #FFFFFF;
        font-weight: bold;
        padding: 5px;
        font-size: 1.8rem;
        margin-right: 10px; }
        @media screen and (max-width: 897px) {
          .modal__box .enq_prof .age span {
            font-size: 1.4rem; } }
    .modal__box .enq_prof .date {
      text-align: right;
      font-size: smaller;
      color: #8C8C8C; }