@charset "UTF-8";

.article {
  width: 100%;
  max-width: 100vw; /* 画面幅以上には絶対にならない設定 */
  overflow-x: hidden; /* それでもはみ出るなら中身をカット */
}

/* 念のため画像もはみ出し防止 */
.article img {
  max-width: 100%;
  height: auto;
}

/*==========================
問い合わせボタン
==========================*/

.contact__PC {
    display: none;
}

@media screen and (min-width: 1023px) {
    .contact__PC {
      display: flex;
      width: 80px;
      height: 200px;
      justify-content: center;
      align-items: center;
      border-top: 1px solid var(--main-color__wht);
      border-left: 1px solid var(--main-color__wht);
      border-bottom: 1px solid var(--main-color__wht);
      border-radius: 20px 0 0 20px;
      background: var(--main-color__blk);
      color: var(--main-color__wht);
      writing-mode: vertical-rl;
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: 4.5px;
      position: fixed;
      top: 20%;
      right: 0;
      z-index: 999;
      transition: 0.3s ease-in-out;
    }
    
    .contact__PC:hover {
      background: rgb(90, 176, 126);
      color: var(--main-color__blk);
      border: none;
    }
}





/*==========================
About - 代表　Message
==========================*/

.message__pic__PC, .logo__img__PC {
    display: none;
}

.Message {
    display: flex;
    padding-bottom:50px;
    flex-direction: column;
    align-items: center;
    background: var(--main-color__blk);
}

.Message__header {
    width: 100%;
}

.Message__header .subject__ttl__en {
    margin-top: 0;
    color: var(--sub-color__blk);
    font-size: 4rem;
}

.Message__header .subject__ttl__ja {
    color: var(--main-color__wht);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 30px;
}

.MVV__header .subject__ttl__en {
    margin-top: 0;
    color: var(--sub-color__grn);
    font-size: 3.5rem;
}
.MVV__header .subject__ttl__ja {
    color: var(--main-color__grn);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 30px; /* 214.286% */    
}

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

.cont {
    display: flex;
    padding: 0 8%;
    margin-bottom: 30px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    align-self: stretch;
    opacity: 0;
}

.cont.animated {
  opacity: 1;
  animation: fadeInUp;
  animation-duration: 0.5s;
}

.name__wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 30px;
}

.name__box {
    display: flex;
    flex-direction: column;
}

.message__name {
    color: var(--main-color__wht);
    font-size: 1.6rem;
    font-weight: 600;
    text-align: left;
}

.name1 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.message__text__cont {
    color: var(--main-color__wht);
    font-size: 1.6rem;
    line-height: 25px;
    height: auto;
    overflow: visible;
}

.message__text__cont span {
    font-size: 2rem;
    font-weight: 600;
}

/* ----message のレスポンシブ対応 */

@media screen and (min-width: 769px) {
    
    .Message__header .subject__ttl__en {
        font-size: 6rem;
        margin-left: 0;
        height: auto;
    }

    .Message__header .subject__ttl__ja {
        font-size: 2.6rem;
        margin-left: 0;
        height: auto;
    }
    
    .Message__header{
        display: flex;
        padding: 40px 8%;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .message__text__cont {
        font-size: 1.8rem;
        line-height: 40px;
        letter-spacing: 0.4px;
    }

    .message__text__cont span {
        font-size: 2.4rem;
        font-weight: 800;
        letter-spacing: 2.5px;
    }
 
    .message__name {
        font-size: 2rem;
    }

    .name1 {
        font-size: 1.6rem;
    }

    .name__wrapper {
        margin-top: 50px;
    }

}

/* messageを横ならびに */
@media screen and (min-width: 1023px) {
    .Message .cont{
        flex-direction: row;
        gap: 5%
    }

    .message__pic__sp {
        display: none;
    }

    .message__pic__PC {
        display: block;
        width: 100%;
    }

    .cont__text {
        max-width: 55%;
    }

    .message__name {
        font-size: 2rem;
    }

    .name1 {
        font-size: 1.6rem;
    }
 
}


/*==========================
Philosophy より下層部分の共通
==========================*/

.Philosophy__header h2 {
    font-size: 4.8rem;
}

.Philosophy .cont, .mission .cont, 
.vision .cont, .logo .cont {
    margin: 0 auto;
    /* align-items: center; */
    gap: 10px;
}

.value .cont {
    align-items: cneter;
    gap: 5px;
    margin-bottom: 0;
}

.MVV__title {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 25px; /* 187.5% */
    letter-spacing: 0.4px;
    text-align: left;    
}

.Philosophy__text__content, .MVV__text {
    font-size: 1.6rem;
    line-height: 30px;
    letter-spacing: 0.3px;
    margin-bottom: 20px;
}

.Philosophy__text__content {
    max-width: 100%;

}

.MVV__text {
    width: 100%;
    display: flex;
    /* max-width: 80%; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}


.MVV__text .p__1 {
    width: 100%;
    color: var(--main-color__grn);
    font-weight: 500;
    font-size: 1.6rem;
    margin-bottom: 30px;
}

.mvv-wrapper {
    position: relative;
    /* overflow: hidden; はみ出し防止 */
}

/* スマホでは非表示 */
.mvv-decoration-text {
    display: block;
    position: absolute;
    top: 270px;  
    right: -60px;     
    font-family: 'Orbitron', sans-serif;
    font-size: 20rem;  /* ★文字サイズ */
    font-weight: 700;
    color: var(--main-color__grn); 
    writing-mode: vertical-rl; /* 縦書き（右から左へ） */
    text-orientation: mixed;   /* アルファベットを横に倒す */
    letter-spacing: 0.2em;
    z-index: -100;      /* コンテンツの背面に */
    opacity: 0.05;      /* 濃さ */
    pointer-events: none; /* 選択不可 */
    margin-right: 2%;
}


/* Philosophyのレスポンシブ */
@media screen and (min-width: 769px) {
    .Philosophy .cont {
        align-items: baseline;
    }


    .Philosophy__header {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .Philosophy__header h2 {
        font-size: 8rem;
    }
    
    .Philosophy__text__title {
        font-size: 2.2rem;
        font-weight: 700;
        line-height: 30px; /* 150% */
        letter-spacing: 0.5px;
    }

    .Philosophy__text__content {
        font-size: 1.8rem;
        line-height: 40px; /* 187.5% */
        letter-spacing: 0.4px;
        max-width: 90%;
    }    
}

/* MVVのレスポンシブ */
@media screen and (min-width: 769px) {
    .mission, .vision, .value {
        margin-top: 30px;
    }


    .MVV__header .subject__ttl__en{
        font-size: 6rem;
        font-weight: 700;
        line-height: 35px; /* 37.5% */
        letter-spacing: -1.6px;
    }

    .MVV__header .subject__ttl__ja{
        font-size: 2.4rem;
        font-weight: 700;
        line-height: 35px; /* 115.385% */
        letter-spacing: 0.65px;

    }

    .MVV__title {
        font-size: 2.6rem;
        font-weight: 700;
        line-height: 50px; /* 150% */
        letter-spacing: 0.5px;
    }

    .MVV__text .p__1 {
        font-size: 2.2rem;
        letter-spacing: 2.0px;
        margin: 20px 0 50px 0;
    }

    .MVV__text .p__2 {
        font-size: 1.8rem;
        line-height: 40px;
        letter-spacing: 0.4px;
        max-width: 90%;
    }

    .MVV__text {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    .mvv-decoration-text {
        display: block;
        position: absolute;
        top: 0;  
        right: -90px;     
        font-family: 'Orbitron', sans-serif;
        font-size: 40rem;  /* ★文字サイズ */
        font-weight: 700;
        color: var(--main-color__grn); 
        writing-mode: vertical-rl; /* 縦書き（右から左へ） */
        text-orientation: mixed;   /* アルファベットを横に倒す */
        z-index: -100;      /* コンテンツの背面に */
        opacity: 0.05;      /* 濃さ */
        pointer-events: none; /* 選択不可 */
        margin-right: 2%;
    }

    /* コンテンツが装飾文字と重ならないように右側に余白を作る */
    .mvv-wrapper .cont {
        padding-right: 180px; /* 文字幅分＋α空ける */
        width: auto;          /* 幅指定があればリセット */
    }
    
    /* ヘッダー（タイトル）も右余白を考慮 */
    .mvv-wrapper .MVV__header {
        padding-right: 180px; 
    }
}



/*==========================
ロゴ
==========================*/

.logo .cont {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: 1.6rem;
    line-height: 30px;
}

.logo__pic {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
}

.logo__p span {
    font-weight: 600;
}

.logo__txt--grn {
    font-size: 1.3rem;
    color: var(--main-color__grn);
}

.logo__txt__ttl {
    display: inline-block;
    border-bottom: 2px solid #36684B;
    font-weight: 600;
    margin-top: 20px;
}

.logo__txt__ttl__inner {
    padding: 20px 24px;
}

.logo__txt__cont {
    font-size: 1.6rem;
    align-items: center;
    letter-spacing: 0.6px;
}

.logo__txt__cont span{
    font-size: 1.6rem;
    font-weight: 600;
}

.logo__txt__cont__2 span{
    font-size: 1.6rem;
    font-weight: 600;
}

.logo__txt__cont__2 {
    margin-top: 20px;
}

/* ロゴに関しては630pxあたりでflexにする */

@media screen and (min-width: 629px) {
    .cont__cont-logo {
        display: flex;
        justify-content: flex-start;
        margin: 0 30px 30px 8%;
        gap: 80px
    }

    .cont__cont-logo .cont {
        margin: 0;
        padding: 0;
    }

    .logo .cont {
        justify-content: flex-start;
    }

    .logo__pic {
        margin: 0;
    }

    .logo__pic img {
        width: 250px;
    }
}

/* ロゴのレスポンシブ */

@media screen and (min-width: 769px) {
    .logo {
        margin-top: 30px;
    }


    .logo .cont {
        font-size: 2rem;
    }
    
    .logo__txt__cont{
        font-size: 1.8rem;
        letter-spacing: 2.5px;
        line-height: 40px;
    }
    
    .logo__txt__ttl {
        font-size: 2.2rem;
        letter-spacing: 1.5px;
    }
    
    .logo__txt__cont span, .logo__txt__cont__2 span{
        font-size: 2.2rem;
        font-weight: 600;
    }
    
    .cont__cont-logo {
        margin-bottom: 90px;
        gap: 20%;
    }

    .logo__txt__cont__2 {
        font-size: 2rem;
    }
}


/*==========================
footer
==========================*/

@media screen and (min-width: 769px) {
    .topBtn {
       display: none;
    }
}