@charset "UTF-8";
* {
  box-sizing: border-box;
}
:root {
  --main-txt-color: #685e59;
  --main-bg-color: #FFF;
  --container-size:1080px;
}
@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: normal;
    src: local("Noto Sans CJK JP Regular"),
    url('./font/NotoSansJP-Regular.woff2') format('woff2'),
    url('./font/NotoSansJP-Regular.woff') format('woff'),
    url('./font/NotoSansJP-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: bold;
    src: local("Noto Sans CJK JP Bold"),
    url('./font/NotoSansJP-Bold.woff2') format('woff2'),
    url('./font/NotoSansJP-Bold.woff') format('woff'),
    url('./font/NotoSansJP-Bold.otf') format('opentype');
}
@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: normal;
    src: url("./font/YakuHanJPs-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "YakuHanJP";
    font-style: normal;
    font-weight: bold;
    src: url("./font/YakuHanJPs-Regular.woff2") format("woff2");
}

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  overflow-y: scroll;
  scroll-behavior: smooth;
    background: var(--main-bg-color);

}
html, body {
  height: 100%;
}
body {
  position: relative;
  margin: 0;
  font-family:YakuHanJP,"Noto Sans JP","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Noto Sans JP", "Meiryo UI", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight: normal;
  font-size: 1.6rem;
  color: var(--main-txt-color);
  line-height: 1.8;
}
#wrap {
  position: relative;
  margin: 0 auto;
  z-index: 1;
    overflow: hidden;
}
main {
  position: relative;
}
figure, figure img {
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
}
img {
  vertical-align: bottom;
}
a {
  text-decoration: none;
  transition: 0.3s all ease;
}
a:hover {
  color: #E1BE23;
  transition: 0.3s all ease;
}
h1, h2, h3, h4, h5 {
  font-weight: normal;
}
p {
  margin: 0 auto 1em;
}

section{
    padding:6em 0;
}
.container{
    max-width:1080px;
    margin: 0 auto;
}

.pagetop{
    display: block!important;
}

/* 非表示 */
.grobal_nav{
    display: none;
}

/*----------------------------------------------

  AOS 移動距離

----------------------------------------------*/
.aos_item[data-aos="fade-up"] {
  transform: translateY(50px);
  transition-property: transform, opacity;
  opacity: 0;
}
.aos_item[data-aos="fade-up"].aos-animate {
  transform: translateY(0px);
  opacity: 1;
}
.aos_item[data-aos="fade-down"] {
  transform: translateY(-50px);
  transition-property: transform, opacity;
  opacity: 0;
}
.aos_item[data-aos="fade-down"].aos-animate {
  transform: translateY(0px);
  opacity: 1;
}
.aos_item[data-aos="fade-left"] {
  transform: translateX(100px);
  transition-property: transform, opacity;
  opacity: 0;
}
.aos_item[data-aos="fade-left"].aos-animate {
  transform: translateX(0px);
  opacity: 1;
}
.aos_item[data-aos="fade-right"] {
  transform: translateX(-100px);
  transition-property: transform, opacity;
  opacity: 0;
}
.aos_item[data-aos="fade-right"].aos-animate {
  transform: translateX(0px);
  opacity: 1;
}

/*----------------------------------------------

  header

----------------------------------------------*/
.site_header_wrap{
    max-width:1140px;
    margin: 0 auto;
    padding: 1em;
}
.site_header_logo img{
    max-width: 100%;
    width: auto;
}

.site_header_utsugi{
    background: #000;
    & > div{
        max-width:1140px;
        margin: auto;
        padding: 1em;
        a{
            font-size:1.6rem;
            color:var(--main-bg-color);
            text-decoration: none;
        }
    }
}

/*----------------------------------------------

  aside_link

----------------------------------------------*/
.cta_link{
    padding: 3em 0;
    ul{
        display: flex;
        justify-content: center;
        gap:2rem;
        margin: 0 auto;
        li{
            display: block;
            p{
                margin-bottom: 0;
            }
            i{
                margin-right: 1em;
            }
        }
    }
}
/*----------------------------------------------

  footer

----------------------------------------------*/

.site_footer_address{
    padding-top: 2em;
      address{
        text-align:center;
        font-style: normal;
    }   
}
.copyright{
    text-align:center;
    padding: 1em;
}

section{
    padding:4em 0;
}


.btn{
    a{
        position: relative;
        display: block;
        padding: .8em 4em .8em 3em;
        text-align: center;
        text-decoration: none;
        border-radius: 2em;
        margin: 0 auto;
        transition: .3s all ease;
        font-weight: 800;
        &:link, &:visited {
            color: #fff;
            background: #b11e24;
        }
        &::after{
            display: block;
            content:"";
            position: absolute;
            top:calc(50% - 6px);
            right:2rem;
            width:10px;
            height: 10px;
            border: solid 2px #FFF;
            border-width: 0 1px 1px 0;
            transform: rotate(-45deg);
        }
    }
}

.btn.btn_inline{
    display: flex;
    justify-content:center;
}

.pagetop {
  display:none;
  position:fixed;
  z-index:9999;
  margin:0;
  bottom:0;
  right:0;
    a {
        display:block;
        color:$main-color;
        background:$main-bg-color;
        text-align:center;
        font-size:1.8rem;
        text-decoration:none;
        width:50px;
        height:50px;
        filter:alpha(opacity=100);
        -moz-opacity:1;
        opacity:1;
        line-height:2.75;
        @include transition;
        &:hover {
            color:$main-txt-color;
            background:$accents-color;
            text-align:center;
            text-decoration:none;
            filter:alpha(opacity=100);
            -moz-opacity:1;
            opacity:1;
            @include transition;
        }
        i {
            margin-right:0;
            padding-top:.7em;
        }
    }
}

/*----------------------------------------------

  トップページ

----------------------------------------------*/
.mv img{
    width: 100%;
    height: auto;
    
}

.top_cta{
    padding: 3em 0;
    ul{
        display: flex;
        justify-content: center;
        gap:2rem;
        margin: 0 auto;
        li{
            display: block;
            p{
                margin-bottom: 0;
            }
            i{
                margin-right: 1em;
            }
        }
    }
}

/* .intro */

.intro_merit_title{
    text-align: center;
    font-weight: 800;
    font-size:3.8rem;
    line-height: 1.6;
    margin-bottom: 12rem;
    & > span{
        display: block;
    }
    strong{
        display: block;
        font-size:6rem;
        span{
            color:#deaf32;
        }
    }
}

.intro_merit{
    display: flex;
    gap:1em;
    justify-content: center;
    margin: 0 auto 8rem;
    padding: 0;
    max-width: 800px;
    li{
        margin: 0;
        padding: 0;
        text-align: center;
        figure{
            margin-bottom: 1em;
        }
        p{
            position: relative;
            font-size:2.2rem;
            font-weight: bold;
            span{
                position: relative;
                z-index: 1;
            }
            &::after{
                content:"";
                display: block;
                position: absolute;
                bottom: 0;
                left: 5%;
                width: 90%;
                height: .75em;
                background: rgb(249 255 0 /.7);
                z-index: -1;
                transform: skewX(-45deg);
            }
        }
    }
}

.intro_merit_sub_title{
    text-align: center;
    font-weight: 800;
    font-size:3.4rem;
    line-height: 1.6;
    margin-bottom: 2em;
    & > span{
        display: block;
    }
    strong{
        font-size:4rem;
        br{
            display: none;
        }
    }
}

.intro_yc100{
    h4{
        font-size:3.6rem;
        font-weight: 800;
        line-height: 1.2;
        strong{
            color: #dd960f;
            span{
                font-size:8rem;
            }
        }
    }
    p{
        font-size:1.8rem;
    }
}

/* .showroom */
.showroom_mv{
    margin-bottom: 2em;
}

.showroom_title{
    text-align: center;
    font-weight: 800;
    font-size:3rem;
    line-height: 1.6;
    margin-bottom: 1em;
    & > span{
        display: block;
    }
    strong{
        font-size:4rem;
        font-style: italic;
        font-weight: 800;
    }
}

.showroom_copy{
    text-align: center;
    font-weight: 800;
    font-size:2.4rem;
    margin-bottom: 2em;
    span{
        display: inline-block;
        background: linear-gradient(transparent 60%, #FFFF00 60%);   
    }
}

.showroom_about{
    display: flex;
    justify-content: center;
    img{
        width: auto;
        max-width: 100%;
    }
    margin-bottom: 3em;
}


/* .assignment */
.assignment_title{
    position: relative;
    display: flex;
    justify-content: center;
    font-weight: 800;
    font-size:3.4rem;
    line-height: 1.6;
    margin-bottom: 2em;
    br{
        display: none;
    }
    div{
        position: relative;
        &::before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 7vw;
            height: 0;
            border-bottom: solid 2px #666;
            transform-origin: 1vw 4vw;
            transform: rotate(-45deg);
        }
        &::after{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 4vw;
            height: 0;
            border-bottom: solid 2px #888;
            transform-origin: 1vw 3vw;
            transform: rotate(-76deg);
        }
    }
}





.assignment_intro{
    margin-bottom: 4em;
    max-width: 800px;
}

.assignment_main{
    margin-bottom: 2em;
    .assignment_main_doc{
        h3{
            font-weight: 800;
            font-size:3.4rem;
            margin-bottom: 2rem;
            line-height: 1.8;
            & > span:nth-child(1){
                color:#dc9550;
            }
            & > span:nth-child(2){
                color:#6a975f;
            }
        }
        p{
          font-size:1.8rem;  
        }
        p.assignment_main_doc_more{
            font-size:1.4rem;
            
        }
    }
}

.assignment_list{
    display: flex;
    gap:0 6rem;
    justify-content: center;
    li{
        position: relative;
        margin: 0;
        padding: 0;
        
    }
    dl{
        position: absolute;
        top: 8%;
        left: 0;
        width: 100%;
        text-align: center;
        font-weight: 800;
        dt{
            font-size:3rem;
        }
        dd{
            margin: 0;
        }
    }
}

/* flow */
.flow_title{
    text-align: center;
    font-weight: 800;
    font-size:3.4rem;
    line-height: 1.6;
    margin-bottom: 2em;
    strong{
        display: inline-block;
        background: linear-gradient(transparent 70%, #FFFF00 70%);        
    }
}
.flow_fig{
    margin-bottom: 2em;
}
.flow_detail{
    padding:2em;
    background: #EEE;
    max-width: 800px;
    margin: 0 auto 3em;
    border-radius: 1em;
    margin-bottom: 4em;;
}

.about_nouveau{}
.about_nouveau_list{
    margin: 0 auto;
    padding: 0;
    max-width: 900px;
    dt{
        display: flex;
        gap:0 1em;
        align-items: center;
        margin-bottom: 1.5em;
        font-size:2.6rem;
        font-weight: 800;
        &::before{
            content: "Q";
            display: block;
            text-align: center;
            font-size:3rem;
            width: 5rem;
            height: 5rem;
            line-height: 5rem;
            background: #769f32;
            color: #FFF;
            border-radius: 50%;
        }
    }
    dd{
        display: flex;
        gap:0 1em;
        margin-left: 3em;
        &::before{
            content: "A";
            display: block;
            text-align: center;
            font-size:2rem;
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
            background: #995b1a;
            color: #FFF;
            border-radius: 50%;
            font-weight: 800;
        }
        div{
            flex:1;
            h4{
                font-size:2rem;
                font-weight: 800;
                margin-bottom: .5em;
            }
            p{
                strong{
                    font-size:110%;
                }
            }
        }
    }
}

/* .cycle */

.cycle_title{
    font-weight: 800;
    font-size:3.4rem;
    line-height: 2;
    margin-bottom: 1em;
    .cycle_title_cycle{
        color: #7ba5c5;
    }
    .cycle_title_csr{
        color: #deaf32;
    }
}

.cycle_about{
    font-size:1.8rem;
}

.cycle_merit{
    h4{
        color:var(--main-bg-color);
        font-weight: 800;
        font-size:4rem;
    }
    p{
        margin: 0;
    }
}

.cycle_merit_01{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: 436px;
    aspect-ratio:436 /432;
    padding-left: 1em;
    margin-left: -6em;
    mix-blend-mode:darken;        
    &::after{
        display: block;
        content: "";
        position:absolute;
        top:0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background:url("./images/merit_biz_bg.webp") no-repeat scroll;
        background-size:cover;
    }
}
.cycle_merit_02{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: auto;
    max-width: 474px;
    padding-left: 3em;
    margin-top: -6em;
    aspect-ratio:474 /378;
    mix-blend-mode:darken;        
    &::after{
        display: block;
        content: "";
        position:absolute;
        top:0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        background:url("./images/merit_eco_bg.webp") no-repeat scroll;
        background-size:cover;
    }    
}

/* .yc100 */

.yc100_title{
    position: relative;
    display: flex;
    justify-content: center;
    font-weight: 800;
    font-size:3.4rem;
    line-height: 1.6;
    margin-bottom: 2em;
    div{
        position: relative;
        &::before{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 7vw;
            height: 0;
            border-bottom: solid 2px #666;
            transform-origin: 1vw 4vw;
            transform: rotate(-45deg);
        }
        &::after{
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 4vw;
            height: 0;
            border-bottom: solid 2px #888;
            transform-origin: 1vw 3vw;
            transform: rotate(-76deg);
        }
    }
}



/* .policy */

.policy_wrap{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    max-width: 980px;
    .policy_logo{
        display: flex;
        justify-content: center;
        max-width: 400px;
        
    }
    img{
        max-width: 260px;
        width: auto;
    }
    .policy_doc{
        flex: 1;
        border-left: solid 2px #888;
        padding:0 4em;
        
    }
}

.policy_title{
    font-weight: 800;
    font-size:3.4rem;
    line-height: 1.6;
    margin-bottom: .5em;
    .policy_title_shoku{
        color: #d88771;
    }
    .policy_title_tsukuru{
        color: #8dc09a;
    }
}

/*--------------------------------------------------------------------------------------------

  スマホ用

--------------------------------------------------------------------------------------------*/
@media (max-width: 960px) {
    
    /* grid_sp */
    @media (min-width: 767px) {
      .row {
        display: flex;
        justify-content: space-between; }

      .column {
        margin-left: 4%; }

      .column:first-child {
        margin-left: 0; }

      .one.column {
        width: 4.66666666667%; }

      .two.column {
        width: 13.3333333333%; }

      .three.column {
        width: 22%; }

      .four.column {
        width: 30.6666666667%; }

      .five.column {
        width: 39.3333333333%; }

      .six.column {
        width: 48%; }

      .seven.column {
        width: 56.6666666667%; }

      .eight.column {
        width: 65.3333333333%; }

      .nine.column {
        width: 74.0%; }

      .ten.column {
        width: 82.6666666667%; }

      .eleven.column {
        width: 91.3333333333%; }

      .twelve.column {
        width: 100%; }
    }
    @media (max-width: 766px) {
      .row .column + .column {
        margin-top: 2em; }
    }
    
    .sp_none{
        display: none;
    }


    body {
      font-size: 1.6rem; }

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


    section{
        padding:3em 0;
    }
    
    
    /*----------------------------------------------

      header

    ----------------------------------------------*/
    .site_header_utsugi{
        & > div{
            a{
                font-size:1.4rem;
            }
        }
    }

    /*----------------------------------------------

      aside_link

    ----------------------------------------------*/
    /*モバイルサイズ*/
    @media (max-width: 766px) {
        .cta_link{
            ul{
                flex-direction: column;
            }
        }
    }

    /*----------------------------------------------

      footer

    ----------------------------------------------*/
    /*----------------------------------------------

      container

    ----------------------------------------------*/
    .container {
        margin: 0 4%;
    }

/*モバイルサイズ*/
@media (max-width: 766px) {
    .top_cta{
        ul{
            flex-direction: column;
        }
    }
}

/* .intro */

.intro_merit_title{
    font-size:clamp(2rem,5vw,5rem);
    margin-bottom: 8rem;
    strong{
        font-size:clamp(2.4rem,11vw,7rem);
    }
}
.intro_merit{
    margin: 0 auto 8rem;
    li{
        figure{
            margin-bottom: 1em;
        }
        p{
            font-size:1.8rem;
        }
    }
}

.intro_merit_sub_title{
    text-align: center;
    font-weight: 800;
    font-size:clamp(1.4rem,4vw,3rem);
    line-height: 1.6;
    margin-bottom: 1em;
    & > span{
        display: block;
    }
    strong{
        font-size:clamp(1.5rem,6vw,3rem);
    }
}    
.intro_yc100{
    h4{
        font-size:3rem;
        font-weight: 800;
        line-height: 1.2;
        strong{
            color: #dd960f;
            span{
                font-size:8rem;
            }
        }
    }
    p{
        font-size:1.6rem;
    }
}        

/*モバイルサイズ*/
@media (max-width: 766px) {
    .intro_merit_title{
        margin-bottom: 4rem;
    }        
    
    .intro_merit{
        flex-direction: column;
        align-items: center;
        li{
            display: flex;
            align-items: center;
            gap:0 1.5em;
            figure{
                max-width: 140px;
                margin-bottom: 0;
            }
            p{
                text-align: left;
                margin: 0;
            }
        }
    }        
    .intro_merit_sub_title{
        strong{
            br{
                display: block;
            }
        }
    }

}    
    .intro_yc100{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

/* .showroom */
.showroom_mv{
}

.showroom_title{
    font-size:clamp(1.5rem,4vw,3rem);
    strong{
        font-size:clamp(1.4rem,6vw,3rem);
    }
}

.showroom_copy{
    font-size:1.4rem;
    margin-bottom: 2em;
    span{
        background:none;
    }
}

.showroom_about{
    margin-bottom: 2em;
}


/* .assignment */
.assignment_title{
    font-size:2.8rem;
    br{
        display: block;
    }
}

.assignment_main{
    .assignment_main_doc{
        h3{
            font-size:3rem;
            margin-bottom: 2rem;
        }

    }
}

.assignment_list{
    gap:0 3rem;
    dl{
        dt{
            font-size:2.6rem;
        }
        dd{
            font-size:1.4rem;
        }
    }
}
/*モバイルサイズ*/
    @media (max-width: 766px) {
        .assignment_list{
            flex-direction: column;
            gap:2rem 0;
            justify-content: center;
            align-items: center;
            li{
                max-width: 260px;

            }
            dl{
                dt{
                    font-size:3rem;
                }
                dd{
                }
            }
        }
    }
    
/* flow */
.flow_title{
    font-size:clamp(1.5rem,5vw,3rem);
}
    
.about_nouveau_list{
    dt{
        font-size:2rem;
        margin-bottom: 1em;
        &::before{
            font-size:2rem;
            width: 4rem;
            height: 4rem;
            line-height: 4rem;
        }
    }
    dd{
        margin-left: .6em;
        &::before{
            font-size:1.8rem;
            width: 3rem;
            height: 3rem;
            line-height: 3rem;
            margin-bottom: .5em;
        }
        div{
            h4{
                font-size:1.6rem;
            }
            p{
                strong{
                }
                font-size: 1.4rem;
            }
        }        
    }
}


/* .cycle */

.cylce_sec .row .two{
        display:none;
    }    
.cylce_sec .row .four{
    margin-top: 0;
    }    
.cycle_title{
    font-size:clamp(1.5rem,6vw,3rem);
}



.cycle_merit{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h4{
        font-size:3rem;
    }
    p{
        font-size:1.6rem;
    }
}

.cycle_merit_01{
    padding-left: 1em;
    margin-left: 0;
}
.cycle_merit_02{
    padding-left: 2em;
    margin-top: -4em;
}
    
/* .yc100 */
.yc100_title{
    font-size:2rem;
    br{
        display: block;
    }
}


/* .policy */
.policy_wrap{
    display: flex;
    flex-direction: column;
    gap:2em 0;
    margin: 0 auto;
    .policy_logo img{
        max-width: 220px;
        width: auto;
    }
    .policy_doc{
        border-left:none;
        padding:0;
        font-size:1.5rem;
        
    }
}

.policy_title{
    font-size:3.4rem;
}   
    
}

/*--------------------------------------------------------------------------------------------

  PC用

--------------------------------------------------------------------------------------------*/

@media (min-width: 961px) {
    /* grid_pc */
    .row {
      display: flex; }

    .column {
      margin-left: 4%; }

    .column:first-child {
      margin-left: 0; }

    .one.column {
      width: 4.66666666667%; }

    .two.column {
      width: 13.3333333333%; }

    .three.column {
      width: 22%; }

    .four.column {
      width: 30.6666666667%; }

    .five.column {
      width: 39.3333333333%; }

    .six.column {
      width: 48%; }

    .seven.column {
      width: 56.6666666667%; }

    .eight.column {
      width: 65.3333333333%; }

    .nine.column {
      width: 74.0%; }

    .ten.column {
      width: 82.6666666667%; }

    .eleven.column {
      width: 91.3333333333%; }

    .twelve.column {
      width: 100%; }

    .row.row_reverse {
      flex-direction: row-reverse; }
      .row.row_reverse .column:last-child {
        margin-left: 0; }
      .row.row_reverse .column:first-child {
        margin-left: 4%; }

    :target {
      scroll-margin-top: 96px; }

    /* 非表示 */
    .call_nav {
      display: none;
    }
    #drawer{
      display: none;
    }
    .pc_none{
        display: none;
    }

    /*----------------------------------------------

      header

    ----------------------------------------------*/

    /*----------------------------------------------

      container

    ----------------------------------------------*/
    .container {
      max-width: 940px;
      margin: 0 auto; }
      @media (min-width: 1199px) {
        .container {
          max-width: 1170px; }
          .container.lg {
            max-width: 90%; } }
      .container.xs {
        max-width: 640px; }
      .container.sm {
        max-width: 800px; }
      .container.md {
        max-width: 880px; }
      .container.wide {
        width: 100%;
        max-width: 90%; }

    /*----------------------------------------------

      article

    ----------------------------------------------*/
    /*----------------------------------------------

      asset

    ----------------------------------------------*/

    /*----------------------------------------------

      index

    ----------------------------------------------*/

    @media (max-width: 1199px) {
    /* .cycle */
        .cylce_sec .row .two{
            display:none;
        }

        .cylce_sec .row .four{
            width:39.3333333333%;
                margin-left: 0;
        }


    }    
}    
    
}

/*----------------------------------------------

  print.css

----------------------------------------------*/
@media print {
  .pagetop {
    display: none !important;
  }
  .aos_item {
    opacity: 1 !important;
  }
}