@charset "utf-8";

/* ===============
common
================= */
:root {
    --primary-background-blue: #F3F9FB;
    --primary-navy-blue: #384E7A;
    --primary-white: #F4FAFF;
    --primary-background-navy-blue: #EBF3F6;
    --primary-line-blue: #2D8BBA;
    --primary-green: #F4FFFA;
    --primary-black: #333333;
}

html {
    font-size: 62.5%;
}

body {
    font-family:
        Zen Old Mincho,
        serif,
        arial;
    background-color: var(--primary-background-blue);
    line-height: 1.5;
    letter-spacing: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

/* ボタン */

.custom--btn {
    width: 256px;
    height: 54px;
    padding: 10px 60px;
    border: 2px solid #333;
    font-family: Zen Old Mincho;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 2.6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
  }
  
  .button a::after {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: url(../images/btn_pc.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    right: 50px;
    top: 57%;
    transform: translateY(-50%);
  }
  
  
  .btn {
    background: #384E7A;
    color: #fff;
    padding: 0;
    border: none;
    text-align: center;
    display: block;
    margin: 0 auto;
  }
  
  .button {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   padding: 14px 0;
  }
  
  .btn:before,
  .btn:after {
   position: absolute;
   content: "";
   height: 0%;
   width: 2px;
   background: #384E7A;
  }
  .btn:before {
   right: 0;
   top: 0;
   transition: all 500ms ease;
  }
  .btn:after {
   left: 0;
   bottom: 0;
   transition: all 500ms ease;
  }
  .btn:hover{
   color: #384E7A;
   background: transparent;
  }
  .btn:hover:before {
   transition: all 500ms ease;
   height: 100%;
  }
  .btn:hover:after {
   transition: all 500ms ease;
   height: 100%;
  }
  .button:before,
  .button:after {
   position: absolute;
   content: "";
   background: #384E7A;
  }
  .button:before {
   left: 0;
   top: 0;
   width: 0%;
   height: 2px;
   transition: all 500ms ease;
  }
  .button:after {
   right: 0;
   bottom: 0;
   width: 0%;
   height: 2px;
   transition: all 500ms ease;
  }
  .button:hover:before {
   width: 100%;
  }
  .button:hover:after {
   width: 100%;
  }

/* ボタン終わり */

.mainvisual__tab,
.mainvisual__pc {
    display: none;
}
/* フェードイン */

.fadeIn {
    opacity: 0;
    transform: translate(0, 30%);
    transition: 1.5s;
  }
.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
  }

/* common tab */

@media screen and (min-width: 767px) {
    .img_tab {
        display: block;  
    }

    .img_sp {
        display: none;
    }

    .button a::after {
        right: 50px;
        top: 57%;
        transform: translateY(-50%);
      }

    .mainvisual__tab {
        display: block;
}

    .mainvisual__sp {
        display: none;
    }


}


/* common PC */

@media screen and (min-width: 959px) {

    .btn {
        font-size: 2.2rem;
        width: 285px;
        height: 56px;
    }

    .button {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding: 12px 0;
    }

    .btn::after {
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
    }

    .mainvisual__tab {
        display: none;
    }

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

    .nav__Item {
            display: inline-block;
            text-align: center;
            text-decoration: none;
            outline: none;
            color: #333;
            border-bottom: 2px;
        }
          
    .nav__Item:hover {
            color: #1B7BC5;
        }
    
    .nav__Item {
            position: relative;
        }
          
    .nav__Item::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%;
        height: 2px;
        background: #1B7BC5;
        bottom: -10px;
        transform: scale(0, 1);
        transform-origin: right top;
        transition: transform 0.5s;
    }
          
    .nav__Item:hover::after {
        transform: scale(1, 1);
        transform-origin: left top;
    }
          
          
}

/* ===============
main visual
================ */

.mainVisual {
    position: relative;
}

.mainimage__tab,
.mainimage__pc {
    display: none;
}


.mainVisual__titleEN {
    font-family: "Josefin Sans";
    font-size: 5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1px;
    color: transparent; /* テキストのデフォルトカラーを透明にする */
    background: linear-gradient(90deg, #003B79 12.25%, #005CBD 48.68%, #1B7BC5 63.86%, #48AED2 89.58%);
    background-clip: text; /* 背景のグラデーションをテキストに適用 */
    -webkit-background-clip: text; /* クロスブラウザ対応 */
    -webkit-text-fill-color: transparent; /* テキストの色を透明にする */ 
    position: absolute;
    z-index: 1;
    right: 0%; /* 右端からの距離 */
    top: 49%; /* 上端からの距離（50%で中央に配置） */
    transform: translateY(-50%); /* 垂直中央揃え */
    padding: 2%;

}

.mainVisual__titliJP {
    color: #384E7A;
    font-family: "Hiragino Kaku Gothic Pro";
    font-size: 1.8rem;
    font-weight: 600;
    letter-spacing: 0.36px;
    position: absolute;
    z-index: 1;
    right: 0%; /* 右端からの距離 */
    top: 59%; /* 上端からの距離（50%で中央に配置） */
    transform: translateY(-50%); /* 垂直中央揃え */
    padding: 2%;
}

/* main tab 767px */

@media screen and (min-width: 767px) {

    .mainimage__sp {
        display: none;
    }

    .mainimage__tab {
        display: block;
    }
    
    .mainVisual__titleEN {
        font-size: 6.4rem;
        line-height: 1;
        letter-spacing: 0.96px;
        right: 2%;
        top: 50%;
        padding: 5%;
    }
    
    .mainVisual__titliJP {
        font-size: 2rem;
        letter-spacing: 0.4px;
        right: 0%;
        top: 57%;
        padding: 5%;
    }

}

/* main PC 1025px */

@media screen and (min-width: 1025px) {

    .mainimage__tab {
        display: none;
    }

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

    .mainVisual__titleEN {
        font-size: 11rem;
        letter-spacing: 1.65px;
        right: 0%;
    }

    .mainVisual__titliJP {
        font-size: 3.4rem;
        top: 60%;
    }

}

/* ========================= 
header
===========================*/

.header {
    background: rgba(255, 255, 255, 0.35);
    color: var(--primary-black);
    width: 100%;
    font-size: 1.8rem;
    font-weight: 900;
    padding: 17px 6.6%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    position: fixed;
    z-index: 99;
}

.header__topic {
    letter-spacing: 1px;
}

.hamburger {
    width: 25px;
    height: 20px;
    position: relative;
}

.hamburger_bar {
    display: block;
    width: 100%;
    height: 2px;
    position: absolute;
    left: 0;
    background: #333;
    border-radius: 5px;
    
}

.hamburger_bar:nth-child(1) {
    top: 0;
}

.hamburger_bar:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}

.hamburger_bar:nth-child(3) {
    top: 100%;
    transform: translateY(-100%);
}

/* close btn */

.close_btn {
    display: block;
    position: relative;
    width: 25px;
    height: 25px;
}

.close_btn::before, .close_btn::after { 
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px; /* 棒の幅（太さ） */
    height: 25px; /* 棒の高さ */
    background: #333;
}

.close_btn::before {
    transform: translate(-50%,-50%) rotate(45deg);
}

.close_btn::after {
    transform: translate(-50%,-50%) rotate(-45deg);
}


/* nav初期表示 */

.nav {
    background: rgba(243, 249, 251, 0.95);
    opacity: 0.97;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.4s;
}

.nav__header {
    padding: 20px 6.6%;
    display: flex;
    justify-content: space-between;
}

.nav__topic {
    color: #000;
    font-size: 1.8rem;
    letter-spacing: 0.27px;
}

/* nav active表示 */
.nav.active {
    transform: translateX(0);
}

.header__btn {
    width: 64px;
    height: 64px;
}

.nav__list {
    margin: 43px 0 0 9.6%;
    
}

.nav__item {
    color: #333;
    font-size: 1.6rem;
    font-weight: 900;
    letter-spacing: 0.24px;
    margin-top: 30px;
}

.instagram--header {
    width: 7%;
}

/* header tab */

@media screen and (min-width: 767px) {
    .header {
        padding: 20px 5.5%;
    }

    .header__topic,
    .nav__topic {
        color: var(--primary-black);
        font-size: 2.2rem;
        letter-spacing: 2px;
    }

    .hamburger {
        transform: translate(0px, 6px);
    }

    .instagram--header {
        width: 4%;
    }


} 

/* header 959px pc */
@media screen and (min-width:959px) {

    .headre {
        max-width: 1480px;
        padding: 47px 5.6%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav__header {
        display: none;
    }

    .nav {
        background-color: transparent;
        width: auto;
        height: auto;
        position: static;
        padding: 0;
        transform: translateX(0);
    }
    
    .nav__list {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 30px;

    }

    .nav__topic {
        color: #000;
        font-size: 3rem;
        font-weight: 400;
        letter-spacing: 0.45px;
    }

    .nav__item {
        color: #333;
        font-size: 1.5rem;
        font-weight: 900;
        letter-spacing: 0.24px;
        margin-top: 0;
    }

    .hamburger {
        display: none;
    }
}

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

.img--footerSp {
    display: block;
    margin: 71px auto 0;
    width: 100%;
    transform: translateY(1px);
}

.footer_contents {
    background-color: var(--primary-background-navy-blue);
    padding: 33px 4%;
}

.footerTitle {
    color: #333;
    font-size: 2rem;
    letter-spacing: 0.4px;
    line-height: 1.5;
}

.footer__titleItem {
    display: flex;
    justify-content: space-between;
    padding: 0 0 7px 0;
    border-bottom: 1px solid #333;
}


.address {
    margin-top: 14px;
    color: var(--primary-black);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.32px;
}

.footerNav {
    margin-top: 34px;
}

.footerNav__item {
    color: var(--primary-black);
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.32px;
}

.copy {
    font-size: 1.2rem;
    text-align: center;
}

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

.img--footerTab,
.img--footerPc {
    display: none;
}

/* footer 767px tab */
@media screen and (min-width: 767px) {

    .img--footerSp {
        display: none;
    }

    .img--footerTab {
        display: block;
        margin: 94px auto 0;
        width: 100%;
        transform: translateY(1px);
    }
    
    .footerTitle {
        font-size: 2.4rem;
    }

    .footer_contents {
        padding: 48px 7.6%;
    }

    .address {
        font-size: 1.6rem;
    }

    .footerNav__item {
        font-size: 1.8rem;
    }

    .copy {
        font-size: 1.4rem;
        text-align: right;
    }
    
}

/* footer 960px pc */

@media screen and (min-width: 959px) {
    .img--footerTab {
        display: none;
    }

    .img--footerPc {
        display: block;
        width: 100%;
        margin: 110px auto 0;
        transform: translateY(1px);
    }

    .instagram__pc {
        display: block;
        width: 85%;
    }

    .footer__itemlist {
        display: flex;
        flex-direction: row;
        gap: 30px;

    }

    .footerNav {
        margin-top: 0;
    }

    .footer__item {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .copy {
        text-align: left;
        margin-top: 80px;
    }

}