@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Klee+One:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Water+Brush&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');



* {
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: break-word;
}

* {
    /* outline: 2px solid blue; */
}

html{
    font-size: 22px;
}

@media screen and (max-width:768px) {
    html{
        font-size: 20px;
    }
}
@media screen and (max-width:480px) {
    html{
        font-size: 16px;
    }
}
    
body{
    font-family: "Overpass", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", sans-serif;
    -webkit-font-smoothing: antialiased;
    background: #fff;
    color: #333;
    line-height: 1.6;
}

a {
    text-decoration: none;
}


img {
    object-fit: cover;
}

li {
    list-style: none;
}

/*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
    transition: 0.8s ease-in-out;
    transform: translateY(30px);
    opacity: 0;
}
.scroll_up.on {
    transform: translateY(0);
    opacity: 1.0;
}


/* ==========================
ヘッダー
============================= */
/* PC769px以上/SP768px以下ナビゲーション切り替え */
.menu { display:none;}
@media only screen and (max-width : 768px){
    .menu{ display:block; }
}

/* .nav-text-jp { align-self: stretch; }
.nav-text-en { align-self: stretch; border-top: 1px solid #2bb8ad; } */

header {
    height: 150px;
    width: 100%;
    padding: 25px 40px;
    background: #EDFCFB;
    display: flex;
    justify-content: space-between; 
    position: fixed;
    top: 0;
    z-index: 5;
}

@media screen and (max-width:768px) {
    header {
        height: 100px;
        padding:  1rem;
        display: flex;
        justify-content: space-between; 
    }
}

.logo { 
    object-position: center;
    height: 100%;
}

nav{
    margin: auto 0;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}

.nav-item a{
    font-size: 0.727rem;
    font-weight: bold;
    color: #2bb8ad;
    text-align: center;
    transition: all .3s ease 0s;
    display: inline-block;
}

@media (any-hover:hover) {
    .nav-item a:hover {
        transform: scale(1.2);
        opacity: .7;
    }  
}

.nav-text-jp {
     align-self: stretch; 
}
.nav-text-en {
     align-self: stretch;
      border-top: 1px solid #2bb8ad; 
}


/* ==========================
ハンバーガーメニュー
============================= */

@media only screen and (max-width : 768px){
    nav {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 3;
        background: #fff;
        font-size: 30px;
        max-height: 100vh;
        width: 100%;
        padding: 100px 0 100px;
        transform: translateX(100%);
        transition: .3s;
        overflow: auto;
    }
    nav ul {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    .nav-item a{
        font-size: 1.2rem;
    }

}

nav.active{
    opacity: 1;
    visibility: visible;
    transform: none;
}

.menuButton {
    display: block;
    height: 40px;
    width: 40px;
    position: fixed;
    /* background: pink; */
    margin: auto 0;
    top: 30px;
    right: 20px;
    transition: .3s;
    z-index: 6;
}

.menuButton div {
    height: 1px;
    width: 80%;
    background: #2bb8ad;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: .3s;
}

.menuButton div:nth-of-type(1){
    transform: translate(-50%,-15px);
}

.menuButton div:nth-of-type(3){
    transform: translate(-50%,15px);
}

.menuButton.active div:nth-of-type(1){
    transform: rotate(45deg) translate(-50%,0px);
    width: 70%;
    transform-origin: 0% 50%;
}

.menuButton.active div:nth-of-type(2){
    opacity: 0;
}

.menuButton.active div:nth-of-type(3){
    transform: rotate(-45deg) translate(-50%,0px);
    width: 70%;
    transform-origin: 0% 50%;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.mask.active{
    opacity: 0.7;
    visibility: visible;
}


/* ==========================
main共通部分 タイトル メイン幅
============================= */
 .content-wrapper { 
    width: 100%; 
    padding: 10rem 0; 
    overflow: hidden;
}

.content-container { 
    /* gap: 20px;  */
    /* display: flex; */
    max-width: 1100px;
    margin: 0 auto;
}

.company-column { 
    width: 75%; 
    margin: 0 auto;
}
@media (max-width: 768px) { 
    .company-column { 
        width: 90%;
    } 
}

.company-inner { 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    gap: 6rem;
    text-align: center; 
    color: #333; 
    font: 1rem Klee One, sans-serif; 
    line-height: 2;
    position: relative;
}
    
@media (max-width: 768px) { 
    .company-inner { 
        gap: 8rem;
    } 
}

.company-title { 
    display: flex; 
    width: 317px; 
    flex-direction: column; 
    align-items: center; 
    white-space: nowrap; 
}
@media (max-width: 768px) { 
    .company-title { 
        white-space: initial; 
        margin: 0 auto;
    } 
}


.title-jp { 
    color: #333; 
    font: 2.272rem Zen Kaku Gothic New, sans-serif; 
    font-weight: 500;
    z-index: 2;
}
@media (max-width: 768px) { 
    .title-jp { 
        /* font-size: 40px;  */
    } 
}

.title-en { 
    color: #2bb8ad;
    opacity: .7; 
    font: 4.09rem Water Brush, sans-serif; 
    margin: -3rem;
}
@media (max-width: 768px) { 
    .title-en { 
        /* font-size: 40px;  */
    } 
}

/* ==========================
オリジナル部分
============================= */
.company-list {
    font: 1rem Zen Kaku Gothic New, sans-serif; 
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    gap: 100px;
}

@media (max-width: 768px) { 
    .company-list {
        flex-direction: column;
        gap: 0.8rem;
    }
}

.company-list dt{
    font-weight: 600;
    padding-bottom: 5px;
}
.company-list dd{
    padding-bottom: 0.8rem;
}

.left-dl {
   
}
.right-dl dd:nth-of-type(-n+2){
    padding-bottom: 0.1rem;
}
.right-dl dd:nth-of-type(3){
    padding-bottom: 1.5rem;
}


/* ==========================
fuwafuwa
============================= */


.right-sun {
    display: inline-block;
    width: clamp(100px, 300px,50%);
    position: absolute;
    top: 0;
    right: -20%;
    z-index: -1;
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    transition: 1.5s ease-in-out;
    opacity: 0.6;
  }
.left-sun {
    display: inline-block;
    width: clamp(100px, 350px,50%);
    position: absolute;
    bottom: -20%;
    left: -25%;
    z-index: -1;
    animation: fuwafuwa 3s ease-in-out infinite alternate;
    transition: 1.5s ease-in-out;
    opacity: .8;
  }

  @media (max-width: 768px) { 
    .right-sun {
        top: 12%;
        right: -5%;
        width: 150px;
    
    }
    .left-sun {
        bottom: -20%;
        left: 0;
        width: 150px;        
      }
}

   
  @keyframes fuwafuwa {
    0% {
      transform:translate(0, 0) rotate(-20deg);
    }
    50% {
      transform:translate(0, -20px) rotate(0deg);
    }
    100% {
      transform:translate(0, 0) rotate(20deg);
    }
  }
    

/* ==========================
共通 footer
========================== */
.footer { 
    background-color: #fff; 
    border-top: 2px dashed #2bb8ad; 
    width: 100%; 
    overflow: hidden; 
    color: #2bb8ad; 
    padding: 2rem; 
    font-size: 0.7rem;
    color: #2bb8ad; 
    text-align: end;

}

@media (max-width: 768px) { 
    .footer { 
        /* max-width: 100%;  */
        padding: 20px; 
    } 
}