@charset "utf-8";

/* ===============================
COMPANY
=============================== */

.company-page .company{
  padding:120px 0;
}

/* タイトル */
.company-page .company__head{
  text-align:center;
  margin-bottom:40px;
  margin-top:150px;
}

.company-page .company__title-en{
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:62px;
  line-height:100%;
  letter-spacing:0;
  color:#0186ED;
}

.company-page .company__title-ja{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:100%;
  letter-spacing:0.05em;
  color:#0186ED;
}

/* リード */
.company-page .company__lead{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:200%;
  letter-spacing:0.07em;
  color:#484848;
  text-align:center;
  margin-bottom:80px;
}

/* ===============================
2カラム
=============================== */

.company-page .company__flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:60px;
  margin-bottom:80px;
}

.company-page .company__left{
  width:55%;
}

.company-page .company__right{
  width:40%;
}

.company-page .company__right img{
  width:100%;
}

/* 左タイトル */
.company-page .company__catch{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:36px;
  line-height:160%;
  letter-spacing:0.05em;
  color:#0186ED;
  margin-bottom:40px;
}

/* 左文章 */
.company-page .company__text{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:200%;
  letter-spacing:0.07em;
  color:#484848;
}

/* ===============================
テーブル
=============================== */

.company-page .company__table{
  width:100%;
  border-collapse:collapse;
}

.company-page .company__table tr{
  border-bottom:1px dashed #EFEFEF;
}

.company-page .company__table th{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:160%;
  letter-spacing:0.07em;
  color:#ADADAD;
  padding:20px 8px;
  text-align:left;
  width:25%;
}

.company-page .company__table td{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:160%;
  letter-spacing:0.07em;
  color:#484848;
  padding:20px 8px;
}

/* ===============================
MESSAGE
=============================== */

.company-page .message{
  position:relative;
  margin: 120px 0 160px;
  background:url('../../img/message_bg.svg') no-repeat center/contain;
}

.company-page .message__head{
  text-align:right;
  margin-bottom:40px;
  position:relative;
}

.company-page .message__deco {
    position: absolute;
    right: -30px;
    bottom: 22px;
    width: 32px;
}

/* MESSAGE 英語 */
.company-page .message__en{
  font-family:"Karla", sans-serif;
  font-weight:700;
  font-size:62px;
  line-height:100%;
  letter-spacing:0.05em;
  color:#16AD9B;
}

/* 日本語 */
.company-page .message__ja{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:18px;
  line-height:100%;
  letter-spacing:0.05em;
  color:#484848;
}

/* 本文 */
.company-page .message__text{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:200%;
  letter-spacing:0.07em;
  color:#16AD9B;
  margin-bottom:20px;
}

.company-page .message__content{
  max-width:700px;
}

/* タイトル */
.company-page .message__title{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:36px;
  line-height:160%;
  letter-spacing:0.05em;
  color:#16AD9B;
  margin-bottom:20px;
}

/* 名前 */
.company-page .message__name{
  font-family:"Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:600;
  font-size:24px;
  line-height:100%;
  letter-spacing:0.05em;
  color:#16AD9B;
}

/* ===============================
SP
=============================== */

@media(max-width:768px){
    
.company-page .message{
  position:relative;
  margin: 60px 0 60px;
  background:url('../../img/message_bg.svg') no-repeat center/contain;
  background-size:120%;
}    
    
  .company-page .message__title {
    font-size: 24px;
    letter-spacing: 3%;
    color: #16AD9B;
    margin-bottom: 20px;
    line-height: 140%;
  }    

  .company-page .company{
    padding:80px 0;
  }

  .company-page .company__title-en{
    font-size:36px;
  }

  .company-page .company__title-ja{
    font-size:12px;
    letter-spacing:0;
  }

  .company-page .company__lead{
    line-height:180%;
    letter-spacing:0.05em;
  }

  .company-page .company__flex{
    flex-direction:column;
    gap:40px;
  }

  .company-page .company__left,
  .company-page .company__right{
    width:100%;
  }

  .company-page .company__catch{
    font-size:24px;
    line-height:140%;
    letter-spacing:0.03em;
    text-align: center;
  }

  .company-page .company__text{
    font-size:16px;
    line-height:180%;
    letter-spacing:0.05em;
    text-align: center;
  }

  .company-page .company__head {
    text-align: center;
    margin-bottom: 40px;
    margin-top: 60px;
  }
    
  .company-page .message__en{
    font-size:36px;
  }

  .company-page .message__ja{
    font-size:12px;
    color:#16AD9B;      
  }

  .company-page .message__text{
    line-height:180%;
    letter-spacing:0.05em;
  }

  .company-page .message__name{
    font-size:20px;
    line-height:130%;
    letter-spacing:0.03em;
    text-align: right;
  }

  .company-page .company__flex{
    flex-direction:column;
  }

  .company-page .company__right{
    order:-1;
  }

  .company-page .company__right img {
    width: 30%;
    margin:0 auto;
  }    
    

  .company-page .company__table,
  .company-page .company__table tbody,
  .company-page .company__table tr{
    display:block;
    width:100%;
  }

  .company-page .company__table tr{
    border-bottom:1px dashed #EFEFEF;
    padding:20px 0;
  }

  .company-page .company__table th,
  .company-page .company__table td{
    display:block;
    width:100%;
    padding:0;
    font-size:16px;
    letter-spacing:0.05em;      
  }

  .company-page .company__table th{
    font-size:16px;
    margin-bottom:8px;
    color:#ADADAD;
  }

  .company-page .company__table td{
    font-size:16px;
    color:#484848;
  }

    .company-page .message__deco {
        width: 17px;
        right: -15px;
        bottom: 39px;
    } 
 
   .company-page .message__head {
    text-align: right;
    margin-bottom: 40px;
    position: relative;
    margin-right: 5%;
   }    
    
}