@charset "utf-8";

/* ============================
top
=============================== */
.page-hero {
    padding-top: 155px;
    margin: 0 auto ;
    max-width: 325px;
    position: relative;
}

.back-img {
    margin-top: 40px;
    background-image: url(../img/backimg-company.svg);
    background-repeat: no-repeat;
    background-size: 202px 234px;
    background-position: top right;
}

.back-img img {
    width: 305px;
    height: 125px; 
}

.back-img {
    margin-top: 35px;
}

.page-hero-intro {
    margin-top: 35px;
}

.lead {
    font-weight: 500;
}

.title-en {
    margin-top: 50px;
   color: #2B958A;
    font-family: Poppins;
    font-size: 4.8rem;
    font-weight: 900;
    line-height: 1.2;
}

.title-ja {
    margin-top: 9px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
}
 .title-menu {
    margin-top: 40px;
 }

.title-menu li{
    margin-top: 30px;
    font-weight: 500;
    line-height: 1;
}

.title-menu img {
    width: 16px;
    height: 16px;
    margin-right: 18px;
}

/* ============================
トップ＋Figure
=============================== */
.bg {
    width: 100%;
    margin-top: 22px;
    background-image: url(../img/threeminutes-bg.svg);
    background-repeat: no-repeat;
    background-position: top right;
    width: 100%;
    height: 4039px;
    background-color: #FFF;
}
.top {
    max-width: 325px;
    width: 100%;
    padding-top: 190px;
    margin:  0 auto;
}
.top p:first-child{
    color: #2B958A;
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1.8;
}

.top p:nth-child(2) {
    margin-top: 39px;
    line-height: 1.8;
}

.subtitle-en-big {
    color: #2B958A;
    text-align: center;
    font-family: Poppins;
    font-size: 64px;
    font-weight: 900;
    line-height: 1;
}

.figure {
    margin: 50px auto 0;
    max-width: 325px;
    width: 100%;
}

.figure-img img{
    margin-top: 60px;
}

.figure h2 {
    color: #2B958A;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
}

.figure p:nth-child(2) {
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
}

.figure img {
    width: 325px;
    height: 320px; 
}

/* ============================
history
=============================== */
.all-line {
    padding-left: 25px;
    margin: 60px 0 0 auto;
    max-width: 350px;
    width: 100%;
    display: flex;
    height: 1498px;
}

.history-all {
    padding-left: 3px;
    max-width: 350px;
    width: 100%;
    margin-left: 0;
}
.history-group {
    margin: 121px auto 0;
    max-width: 325px;
    width: 100%;
}

.history-group h2 {
    color: #2B958A;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
}

.history-group p:nth-child(2) {
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
}

.history-group p:nth-child(3) {
    margin-top: 40px;
    font-weight: 500;
    line-height: 1.8;
}

.history-desc > p:first-child {
    color: #2B958A;
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
}

.history-exp {
    margin-top: 10px;
    display: flex;
    align-items: flex-start;
    align-items: center;
}

.history-exp p {
    max-width: 156px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6;
    flex: 1;
    min-width: 0;
}

.history-exp img {
    max-width: 142px;
    height: 140px;
    object-fit: cover;
    border-radius: 20px 0 0 20px;
    margin-left: auto;
    padding-left: 10px;
}

.history-desc:nth-child(2) {
    margin-top: 48px;
}

.history-desc:nth-child(3) {
    margin-top: 50px;
}
.history-desc:nth-child(4) {
    margin-top: 49px;
}
.history-desc:nth-child(5) {
    margin-top: 37px;
}
.history-desc:nth-child(6) {
    margin-top: 35px;
}

/* ============================
today
=============================== */
.today {
    max-width: 325px;
    width: 100%;
    margin: 78px auto 0; 
}
.today h2 {
    color: #2B958A;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
}

.today p:first-child{
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
}

.today p:nth-child(3) {
    margin-top: 40px;
    font-weight: 500;
    line-height: 1.8;
}

.today img {
    width: 325px;
    height: 325px;
    margin-top: 25px;
}

.today-img {
    margin-top: 40px;
}

/* ============================
What we Deliver
=============================== */
.what {
    max-width: 325px;
    width: 100%;
    margin: 78px auto 0; 
}

.what h2 {
    color: #2B958A;
    font-size: 6.4rem;
    font-weight: 900;
    line-height: 1;
}

.what > p:first-child{
    margin-top: 20px;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1;
}

.what p:nth-child(3) {
    margin-top: 40px;
    font-weight: 500;
    line-height: 1.8;
}

 .section-title {
    margin-top: 45px;
    width: 100%;
    height: 50px;
    color: #FFF;
    font-weight: 700;
    line-height: 1;
    border-radius: 10px;
    background: var(--a, linear-gradient(90deg, #2B958A 0%, #9BBCB9 100%));
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.whattop-img {
    margin-top: 20px;
    width: 100%;
    height: 200px;
    border-radius: 10px;
    background: var(--a, linear-gradient(90deg, #2B958A 0%, #9BBCB9 100%)); 
}

.what p:nth-child(6) {
    margin-top: 30px;
    font-weight: 400;
    line-height: 1.8;
}

.what-img {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.what-img img {
    margin-top: 9px;
    max-width: 158px;
    width: 100%;
    height: 158px;
    object-fit: cover;
    object-position: center;
    border-radius: 10px;
}

.hidden-photos {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.what-kamome {
    margin-top: 100px;
}
/* ============================
View Moreボタン
=============================== */
.view-more-btn {
    margin: 30px auto 0;
    display: flex;
    width: 201px;
    height: 55px;
    border-radius: 60px;
    border: 1px solid #2B958A;
    justify-content: center;
    align-items: center;
}

.view-more-btn p{
    color: #2B958A;
    font-weight: 500;
    line-height: 1; 
    letter-spacing: 0.48px;
    margin-right: 14px;
}

.view-more-btn img {
    width: 20px;
    height: 20px;
}

.jump {
    margin: 100px auto 0;
    max-width: 325px;
    width: 100%;
    background: #FFF;
}
.jump img{
    margin-top: 30px;
    height: 177px;
    border-radius: 20px;
}

/* ============================
スクロールで現れるアニメーション
  ※ 初期状態(.three-reveal)は three.js が付与する。
     JSが動かない環境では何も隠れないので、内容が読めなくなることはない。
=============================== */
.three-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.three-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .three-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}