@charset "UTF-8"; /*****contents*****/
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
プロモ
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
#mv{
	position:absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	overflow:hidden;
}
#mv #gradientCanvas {
    position: absolute;
	top:0;
	left:0;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
	background: #E7400C;
	background: linear-gradient(90deg, rgba(231, 64, 12, 1) 0%, rgba(241, 141, 1, 1) 40%, rgba(4, 117, 154, 1) 75%, rgba(0, 20, 31, 1) 100%);
    filter: blur(100px);
    transform: scale(1.15);
}


/*この指定はメイン部分上に載せてあるダミー画像用なので削除で大丈夫です*/
#mv .dammy{
	position: relative;
	top:0;
	left:0;
    width: 100%;
	z-index:2;
	padding: 3vw 8.46vw;
}


.promo_frame {
    /*background: url(../../images/home/promo.jpg) no-repeat center / cover;*/
    color: #fff;
    min-height: 120rem;
    position: relative;
    overflow: hidden;
    padding: 25rem 0 0;
}

.promo_wrap {
    position: relative;
    z-index: 2;
    color: #fff;
}

.promo_wrap p.lead {
    font-size: 3rem;
    letter-spacing: .06em;
    margin-bottom: 1rem;
}

.promo_wrap p.evolving-into {
    font-size: 5rem;
    grid-template-columns; letter-spacing: .03em;
    font-weight: 500;
    font-family: "Cormorant Garamond", serif;
}

.promo_wrap p.life-tech {
    font-size: 12rem;
    font-weight: 500;
    font-family: "Cormorant Garamond", serif;
    line-height: 1;
    margin-bottom: 2.5rem;
}

.promo_wrap p.life-tech img {
    width: 63.4rem;
}

.promo_wrap p.promo_txt {
    font-size: 1.8rem;
    letter-spacing: .03em;
    line-height: 2.55556;
    margin-bottom: 3rem;
}

.promo_wrap p.big_txt {
    font-size: 3.6rem;
    letter-spacing: .06em;
}

.promo_wrap p.cmn_btn.btn {
}

.promo_wrap p.cmn_btn.btn a {
    color: #fff;
    margin-top: -4rem;
}

.promo_wrap p.cmn_btn.btn a::after {
    background: #fff;
}

#granim-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.diagram-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#granim-canvas {
    filter: blur(40px) contrast(1.2);
    /* ぼかしを強くし、コントラストを上げて色のメリハリを出す */
    transform: scale(1.2);
    /* ぼかした端の白いモヤを隠すために一回り大きく */
}

/*============================
#home_other
============================*/
#home_other {
    padding: 20rem 0;
    position: relative;
}

#home_other::after {
    position: absolute;
    content: "";
    top: 9rem;
    left: -14rem;
    right: 0;
    margin: 0 auto;
    background: url("../../images/home/evolving-into-LIFE-TECH.png") no-repeat 50% / contain;
    width: 165.4rem;
    height: 18.2rem;
    z-index: -1;
}

#home_other .base_width {
}

#home_other .inner {
}

#home_other .inner .box {
    background: no-repeat 50% / cover;
    min-height: 30rem;
    align-content: center;
    justify-content: center;
    height: 100%;
    display: grid;
    position: relative;
    transition: .2s ease-in;
}

#home_other .inner .box:not(:last-child)::before, #home_other .inner .box:not(:last-child)::after {
    position: absolute;
    content: "";
    width: 10rem;
    height: 1px;
    background: #fff;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}

#home_other .inner .box:not(:last-child)::before {
    transform: rotate(45deg);
}

#home_other .inner .box:not(:last-child)::after {
    transform: rotate(-45deg);
}

#home_other .inner .box h3.ttl {
    transition: .2s ease-in;
}

#home_other .inner .box h3.ttl span {
    display: table;
}

#home_other .inner .box h3.ttl span.ja {
    font-size: 4rem;
    letter-spacing: .1em;
    color: #fff;
    font-weight: 400;
}

#home_other .inner .box h3.ttl span.en {
    font-size: 1.8rem;
    font-family: "Cormorant Garamond", serif;
    letter-spacing: .03em;
    font-weight: 500;
    color: #fff;
}

#home_other .inner .box.emotion {
    background-image: url("../../images/home/other_img01.jpg");
}

#home_other .inner .box.innovation {
    background-image: url("../../images/home/other_img02.jpg");
}

#home_other .inner .box.creation {
    background-image: url("../../images/home/other_img03.jpg");
}

#home_other .inner .box .bg::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.7);
    top: 0;
    left: 0;
    opacity: 0;
    transition: .2s ease-in;
    z-index: 2;
}

#home_other div.hover_contents {
    opacity: 0;
    transition: .2s ease-in;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
    z-index: 2;
    transition: .2s ease-in;
    z-index: 55;
}

#home_other div.hover_contents p.en {
    color: #fff;
    text-align: center;
}

#home_other div.hover_contents p.en span.en_txt {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .03em;
    font-family: "Cormorant Garamond", serif;
    margin-right: 1rem;
}

#home_other div.hover_contents p.en span.num {
    font-weight: 500;
    letter-spacing: .03em;
}

#home_other div.hover_contents h3.hv_ttl {
    font-size: 2.6rem;
    color: #fff;
    font-weight: 400;
    position: relative;
    z-index: 4;
}

@media (min-width: 769px) {
    #home_other .inner .box.emotion:hover {
        background-image: url("../../images/home/other_img01_hv.jpg");
    }

    #home_other .inner .box.innovation:hover {
        background-image: url("../../images/home/other_img02_hv.jpg");
    }

    #home_other .inner .box.creation:hover {
        background-image: url("../../images/home/other_img03_hv.jpg");
    }

    #home_other .inner .box:hover h3.ttl {
        opacity: 0;
    }

    #home_other .inner .box:hover .bg::after {
        opacity: 1;
    }

    #home_other .box:hover div.hover_contents {
        opacity: 1;
    }

    #home_other .box:hover div.hover_contents p.en {
    }

    #home_other .box:hover div.hover_contents p.en span.en_txt {
    }

    #home_other .box:hover div.hover_contents p.en span.num {
    }

    #home_other .box:hover div.hover_contents h3.hv_ttl {
    }
}


/*============================
#home_news
============================*/
#home_news {
    background: rgba(181,181,181,.1);
    padding: 7.5rem 0;
}

#home_news h2.main_ttl {
    font-family: "Cormorant Garamond", serif;
    font-size: 4rem;
    font-weight: bold;
    letter-spacing: .03em;
    text-align: center;
    margin-bottom: 1rem;
}

#home_news p.btn {
    margin-top: 3.5rem;
}

#home_news p.btn a {
}

#home_news p.btn a::after {
}

/*============================
#home_mind
============================*/
#home_mind {
    padding: 20rem 0;
}

#home_mind .relative {
    position: relative;
}

#home_mind .contents {
    max-width: 59rem;
    display: flex;
    flex-direction: column;
    min-height: 40rem;
}

#home_mind h2.main_ttl {
    font-family: "Cormorant Garamond", serif;
    font-weight: 600;
    font-size: 4rem;
    margin-bottom: -0.5rem;
    letter-spacing: .03em;
}

#home_mind p.lead {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .03em;
    margin-bottom: 1.2rem;
}

#home_mind p.main_txt {
    font-size: 1.6rem;
    line-height: 1.875;
    letter-spacing: .03em;
}

#home_mind p.main_img {
    position: absolute;
    top: 0;
    right: calc(50% - 69rem);
    width: 60rem;
}

#home_mind p.cmn_btn {
    margin-top: auto;
    margin-bottom: -1rem;
}

#home_mind p.cmn_btn a {
}

/*============================
#home_biz
============================*/
#home_biz {
    padding-bottom: 20rem;
}

#home_biz .base_width {
    position: relative;
}

#home_biz .ttl_wrap {
    margin-bottom: 1.5rem;
}

#home_biz .ttl_wrap h2.main_ttl {
    font-size: 4rem;
    letter-spacing: .03em;
    font-weight: 600;
    font-family: "Cormorant Garamond", serif;
}

#home_biz .ttl_wrap p.main_lead {
    font-size: 1.8rem;
    letter-spacing: .03em;
    font-weight: 500;
}

#home_biz p.main_txt {
    font-size: 1.6rem;
    letter-spacing: .03em;
    margin-bottom: 4.2rem;
}

/* grid から flex に変更します */
#home_biz ol.items {
    display: flex;
    gap: 1.9rem;
}

#home_biz ol.items li {
    flex: 1; /* 通常は全員同じ幅（比率1） */
    transition: flex 0.4s ease; /* 幅が変わるアニメーションをなめらかに */
    
    /* 既存のスタイル */
    min-height: 50rem;
    background: no-repeat 50% / cover;
    position: relative;
    padding: 3rem 3rem;
}

#home_biz ol.items li::after {
    position: absolute;
    content: "";
    background: url("../../images/common/plus.svg") no-repeat 50% / 1.4rem;
    width: 3rem;
    height: 3rem;
    bottom: 1.5rem;
    right: 1.5rem;
    border: 1px solid #fff;
    transition: .2s ease-in;
}

#home_biz h3.ttl {
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    font-family: "Cormorant Garamond", serif;
    letter-spacing: .03em;
    margin-bottom: -.5rem;
    position: relative;
    display: table;
}

#home_biz ol h3.ttl {
    padding-right: 3rem;
    margin-bottom: .5rem;
}

#home_biz ol h3.ttl a {
    color: #fff;
}

#home_biz ol h3.ttl::before {
    position: absolute;
    content: "";
    width: 1px;
    height: 1.8rem;
    background: #fff;
    bottom: 0.5rem;
    right: 2rem;
}

#home_biz ol h3.ttl::after {
    content: counter(ol_cnt);
    font-family: "Shippori Mincho";
    position: absolute;
    right: 0;
    bottom: 0.2rem;
    font-size: 1.8rem;
}


#home_biz .box h3.ttl {
    font-size: 2.8rem;
}

#home_biz ol.items li h3.ttl {
}

#home_biz ol.items li.core01 {
    background-image: url("../../images/home/biz_img01.jpg");
}

#home_biz ol.items li.core01 h3.ttl {
}

#home_biz ol.items li.core02 {
    background-image: url("../../images/home/biz_img02.jpg");
}

#home_biz ol.items li.core02 h3.ttl {
}

#home_biz ol.items li.core03 {
    background-image: url("../../images/home/biz_img03.jpg");
}

#home_biz ol.items li.core03 h3.ttl {
}

#home_biz ol h4.hover_ttl {
    font-size: 2.2rem;
    letter-spacing: .06em;
    color: #fff;
    line-height: 1.54545454;
    font-weight: 400;
    opacity: 0;
    transition: .2s ease-in;
}

#home_biz .box {
    position: relative;
    background: url("../../images/home/biz_img04.jpg") no-repeat 50% /contain;
    min-height: 40rem;
    margin-top: 2rem;
    padding: 2.5rem 3rem;
}

#home_biz .box::after {
    position: absolute;
    content: "";
    background: url("../../images/common/arrow02.svg") no-repeat 50% /1.6rem .7rem;
    width: 3rem;
    height: 3rem;
    bottom: 1.5rem;
    right: 1.5rem;
    border: 1px solid #fff;
    transition: .2s ease-in;
}

#home_biz .box h3.ttl {
}

#home_biz .box p.lead {
    color: #fff;
    font-size: 1.6rem;
    opacity: 0;
    transition: .2s ease-in;
}
#home_biz .box p.lead a {
    color: #fff;
}

#home_biz p.btn {
    position: absolute;
    top: 1.5rem;
    right: 0;
}

#home_biz p.btn a {
    
}

@media (min-width:769px){
  
#home_biz ol.items li:hover {
    flex: 2; 
}
    
    #home_biz ol li:hover h4.hover_ttl {
        opacity: 1;
    }
    
    #home_biz ol.items li:hover::after {
        background-image: url("../../images/common/arrow02.svg");
        border-color: #FD7E00;
        background-color: #FD7E00;
    }
    
    #home_biz .box:hover p.lead {
        opacity: 1;
    }    
    #home_biz .box:hover::after {
        border-color: #FD7E00;
        background-color: #FD7E00;
    }
    
    #home_biz p.btn a {
        font-size: 2.2rem;
        letter-spacing: .03em;
        font-family: "Cormorant Garamond", serif;
        font-weight: 600;
        display: grid;
        margin: 0 auto;
        width: 24rem;
        min-height: 5rem;
        align-items: center;
        justify-content: center;
        padding: .5rem 2rem;
        border-radius: 4.5rem;
        border: 1px solid;
    }
    
    #home_biz p.btn a:hover {
        background: #FD7E00;
        color: #fff;
    }

    
    #home_biz p.btn a::after {
        content: none;
    }

  
} 
/*============================
#home_vision
============================*/
#home_vision .bg{
    background: url("../../images/home/vision_img01.jpg") no-repeat 50% / cover;
}

#home_vision .contents {
    color: #fff;
    display: grid;
    min-height: 60rem;
    align-content: center;
    padding-bottom: 3rem;
}

#home_vision .contents p.lead {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: .06em;
    padding-left: 3.5rem;
}

#home_vision .contents h2.main_ttl {
    font-family: "Cormorant Garamond", serif;
    font-size: 8rem;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1;
    margin-top: .5rem;
}

#home_vision .contents p.btn {
    margin-top: 1rem;
    padding-left: 7rem;
}

#home_vision .contents p.btn a {
    color: #fff;
    margin: 0;
    font-size: 2rem;
}

#home_vision .contents p.btn a::after {
    background: #fff;
}

/*============================
#home_about
============================*/
#home_about {
    padding: 19.5rem 0;
    position: relative;
}

#home_about .base_width {
    position: relative;
}

#home_about .ttl_wrap {
    margin-bottom: 3rem;
}

#home_about .ttl_wrap h2.main_ttl {
    font-family: "Cormorant Garamond", serif;
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: .03em;
}

#home_about .ttl_wrap p.main_lead {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .03em;
}

#home_about .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 横2列 */
    grid-template-rows: auto auto;
    /* 縦2行 */
    gap: 3rem;
    /* アイテム間の余白（必要に応じて調整してください） */
    min-height: 73rem;
}

#home_about .inner .item {
    border-radius: 1.2rem;
    background: no-repeat 50% / cover;
    position: relative;
}

#home_about .inner .item::after {
    position: absolute;
    content: "";
    background: url("../../images/common/arrow02.svg") no-repeat 50% /1.6rem .7rem;
    width: 3rem;
    height: 3rem;
    bottom: 1.5rem;
    right: 1.5rem;
    border: 1px solid #fff;
    transition: .2s ease-in;
    pointer-events: none;
}
@media (min-width:769px){
    #home_about .inner .item:hover::after {
        background-color: #FD7E00;
        border-color: #FD7E00;
    }  
} 

#home_about .inner .item .contents {
    height: 100%;
    display: grid;
    align-content: flex-end;
    padding: 1.5rem 3.5rem;
}

#home_about .inner .item h3.ttl {
    
}

#home_about .inner .item h3.ttl a {
    color: #fff;
}

#home_about .inner .item h3.ttl span {
    display: block;
}

#home_about .inner .item h3.ttl span.en {
    font-size: 2.8rem;
    font-family: "Cormorant Garamond", serif;
    font-weight: 500;
    letter-spacing: .03em;
}

#home_about .inner .item h3.ttl span.ja {
    font-size: 1.6rem;
}

#home_about .inner .area_a.item {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    background-image: url("../../images/home/about_img01.jpg");
}

#home_about .inner .area_a.item .contents {
}

#home_about .inner .area_a.item .contents h3.ttl {
}

#home_about .inner .area_a.item .contents h3.ttl span.en {
}

#home_about .inner .area_a.item .contents h3.ttl span.ja {
}

#home_about .inner .area_b.item {
    background-image: url("../../images/home/about_img02.jpg");
    grid-column: 2 / 3;
    grid-row: 1 / 2;
}

#home_about .inner .area_b.item h3.ttl {
}

#home_about .inner .area_b.item h3.ttl span.en {
}

#home_about .inner .area_b.item h3.ttl span.ja {
}

#home_about .inner .area_c.item {
    background-image: url("../../images/home/about_img03.jpg");
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

#home_about .inner .area_c.item h3.ttl {
}

#home_about .inner .area_c.item h3.ttl span.en {
}

#home_about .inner .area_c.item h3.ttl span.ja {
}

#home_about p.btn {
    position: absolute;
    top: 1.5rem;
    right: 0;
}

/*============================
#home_recruit
============================*/
#home_recruit {
}

#home_recruit .bg {
    background: url("../../images/home/recruit_img.jpg") no-repeat 50% / cover;
}

#home_recruit .ttl_wrap {
    margin-bottom: 3rem;
}

#home_recruit .ttl_wrap h2.main_ttl {
    font-family: "Cormorant Garamond", serif;
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: .03em;
}

#home_recruit .ttl_wrap p.main_lead {
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .03em;
}

#home_recruit div.base_width {
}

#home_recruit div.base_width div.contens {
    min-height: 60rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#home_recruit div.base_width div.contens h2.main_ttl {
    font-size: 3.4rem;
    font-weight: 500;
    letter-spacing: .03em;
    color: #fff;
    margin-bottom: 2rem;
}

#home_recruit div.base_width div.contens p.btn {
}

#home_recruit div.base_width div.contens p.btn a {
    color: #fff;
    position: relative;
    font-family: "Cormorant Garamond", serif;
    padding-right: 4rem;
}

#home_recruit div.base_width div.contens p.btn a::after {
    position: absolute;
    content: "";
    mask: url("../../images/common/blank.svg") no-repeat 50% / contain;
    width: 2.1rem;
    height: 2.1rem;
    top: 0;
    bottom: 0;
    margin: auto 0;
    right: 0;
    background: #fff;
    transition: .2s ease-in;
}

@media (min-width:769px){
    #home_recruit div.base_width div.contens p.btn a:hover::after {
        right: -1rem;
    }
}