@charset "utf-8";

/* ===== SP横向きだけ適用 ===== */
@media screen and (max-width: 768px) and (orientation: landscape) {

  body.modal-open {
    overflow: hidden;
    height: 100%;
  }

  .modalArea {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
  }

  .modalBg {
    position: fixed;
    inset: 0;
    background-color: rgba(30,30,30,0.9);
    z-index: 1;
  }

  .modalWrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    width: 95vw;
    max-width: 800px;

    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border-radius: 8px;

    /* iOS/Android対応の実高さを利用 */
    max-height: calc(var(--vh, 1vh) * 90);
  }
  @supports (height: 1dvh) {
    .modalWrapper { max-height: 90dvh; }
  }

  .modalContents{
    background-color: #fff;
    color:#404040;
    padding: 20px 20px 24px;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    min-height: 0;
    max-height: inherit;
    border-radius: 8px;
  }

  .closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
  }

  .modalContents .modal_img img{
    width: 40vw;
    height: auto;
    max-width: 280px;
  }
}

/* ===== SP縦向き（横向きと同じ動きにする） ===== */
@media screen and (max-width: 768px) and (orientation: portrait) {

  body.modal-open {
    overflow: hidden;
    height: 100%;
  }

  .modalArea {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
  }

  .modalBg {
    position: fixed;
    inset: 0;
    background-color: rgba(30,30,30,0.9);
    z-index: 1;
  }

  .modalWrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

    width: 95vw;
    max-width: 800px;

    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border-radius: 8px;

    /* 実際のビューポート高さを使う */
    max-height: calc(var(--vh, 1vh) * 90);
  }
  @supports (height: 1dvh) {
    .modalWrapper { max-height: 90dvh; }
  }

  .modalContents{
    background-color: #fff;
    color:#404040;
    padding: 20px 20px 24px;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;

    min-height: 0;
    max-height: inherit;
    border-radius: 8px;
  }

  .closeModal {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
  }

  .modalContents .modal_img img{
    width: 60vw;
    height: auto;
    max-width: 300px;
  }
}

/* ===== その他の既存SP共通スタイル ===== */
@media print,
screen and (max-width: 768px) {

    .container {
        width: 90vw;
    }

    .pc { display: none; }
    .sp { display: block; }

    .mv { background-size: 55%; }
    .mv_main { display: block; }

    .mv_main li:nth-child(1),
    .mv_main li:nth-child(2) {
        width: 100%;
        text-align: center;
    }

    .mv_main li:nth-child(1) {
        margin-bottom: 30px;
    }

    .mv_main li:nth-child(1) img {
        width: 200px;
        height: auto;
    }

    .mv h3 {
        margin: 0 0 40px;
    }

    .mv h3 img {
        width: 196px;
    }

    .mv p {
        text-align: left;
        line-height: 2;
    }

    .greeting_prof {
        width: 130px;
        height: auto;
        margin: 15px 0 0;
    }

    .history {
        padding: 50px 0 30px;
    }

    .history h3 img {
        width: 130px;
    }

    .history ul { display: block; }

    .history ul li:nth-child(1) {
        margin-bottom: 20px;
    }

    .history ul li img {
        width: 100%;
        height: auto;
    }

    .about_logo {
        padding: 50px 0;
    }

    .about_logo_img {
        width: 200px;
        height: auto;
        margin: 0 auto 40px;
    }

    .about_logo h3 {
        margin: 0 0 20px;
        font-size: 1.3rem;
        letter-spacing: 6px;
    }

    .about_logo p {
        font-size: 1.1rem;
        line-height: 1.8;
        text-align: left;
    }

    .message {
        padding: 40px 0 50px;
    }

    .message h3 img {
        width: 160px;
    }

    .message ul { display: block; }

    .message ul li {
        margin-bottom: 20px;
    }

    .thoughts p {
        text-align: left;
        line-height: 1.8;
    }

    .thoughts h3 {
        font-size: 1.6rem;
        text-align: left;
    }

    .thoughts_btn {
        margin: 40px 0 0;
    }

    .thoughts_btn img {
        width: 180px;
    }

    .modalWrapper {
        max-width: calc(100% - 40px);
        width: calc(100% - 40px);
        padding: 0 30px 0 10px;
    }

    .greeting_prof_wrap {
        max-width: 100%;
    }

    .greeting_prof .name {
        font-size: 1rem;
    }
}