@charset "utf-8";

/* ---- 工場見学トップ ---- */
img[src*="ic_sakura_three.svg"]{
    margin: 0 auto 80px;
    display: block;
}

.factory-tags{
    display: flex;
}

.factory-tags li{
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: var(--fs-12);
    background: var(--clr-bk);
    color: var(--clr-wh);
}

.factory-tags li + li{
    margin-left: 10px;
}

.bt_reserve{
    font-size: var(--fs-26);
    font-weight: bold;
    display: block;
    padding: 20px;
    text-align: center;
    background: url(../images/icon/ic_arrow_rt_gy.svg) no-repeat center right 30px / 14px;
    background-color: var(--clr-wh);
    border: 2px solid;
    border-radius: 100px;
    transition: .3s;
}

.bt_reserve:hover{
    transform: translateX(10px);
    transition: .3s;
}

.bt_resrve_fix{
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.bt_resrve_fix a{
    font-size: var(--fs-18);
    font-weight: bold;
    letter-spacing: 4px;
    color: var(--clr-main);
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: flex;
    padding: 30px 20px;
    background: var(--clr-wh);
    border: 3px solid var(--clr-main);
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: .3s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.bt_resrve_fix a:hover{
    color: var(--clr-wh);
    background: var(--clr-main);
    transition: .3s;
}

.bt_resrve_fix a::after{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    margin: 7px 5px 0;
    border-radius: 50%;
    background: url(../images/icon/ic_arrow_rt_rd.svg) no-repeat center / 30%;
    background-color: var(--clr-wh);
    border: 1px solid var(--clr-main);
    transition: .3s;
}

.factory-fv{
    height: 640px;
    background: url('../images/factory/fv-bg.png') no-repeat center / cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.factory-nav{
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-top: 40px;
    font-size: var(--fs-26);
    font-weight: bold;
}

.factory-nav p{
    margin-bottom: 20px;
    color: var(--clr-wh);
}

.factory-nav a{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 140px;
    text-align: center;
    color: var(--clr-wh) !important;
    border-radius: 20px;
    border: 3px solid var(--clr-wh);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: .3s;
}

.factory-nav a span{
    font-size: var(--fs-16);
}

.factory-nav a:hover{
    transform: translateY(10px);
    transition: .3s;
}

.factory-about{
    background: url(../images/factory/about_bg_01.svg) , url(../images/factory/about_bg_02.svg) , url(../images/factory/about_bg_03.svg);
    background-position: right -850px top -520px, left -900px top -80px, right -750px bottom;
    background-size: 1280px auto, 1280px auto, 1080px auto;
    background-repeat: no-repeat, no-repeat, no-repeat;
}

.factory-about .heading_lg,
.factory-about .heading_lg + .txt{
    text-align: center;
    font-size: var(--fs-30);
    font-weight: bold;
    line-height: 2;
    margin-bottom: ;
}

.factory-about .balloon{
    display: block;
    max-width: 500px;
    /* width: 340px; */
    text-align: center;
    font-size: var(--fs-18);
    color: var(--clr-wh);
    background: var(--clr-main);
    position: relative;
    border-radius: 100px;
    margin: 0 auto 25px;
    padding: 15px 0;
}

.factory-about .balloon::after{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: var(--clr-main);
    z-index: -1;
}

.factory-about h3{
    text-align: center;
    margin-bottom: 20px;
}

.factory-about .flex2 > *{
    width: calc(50% - 40px/2);
}

.factory-about .flex2 > *:nth-child(odd){
    margin-right: 40px;
}

.factory-about .txt-wrap .heading{
    font-size: var(--fs-20);
    margin-top: 20px;
    font-weight: bold;
}

.factory-desc_heading{
    background: var(--clr-main);
    text-align: center;
    color: var(--clr-wh);
    padding-bottom: 60px;
}

.factory-desc_heading .balloon{
    display: block;
    /* width: 410px; */
    text-align: center;
    font-size: var(--fs-18);
    color: var(--clr-bk);
    background: var(--clr-wh);
    border: 3px solid var(--clr-main);
    border-radius: 100px;
    margin: 0 auto 25px;
    padding: 15px 0;
    position: relative;
    top: -40px;
    margin-bottom: 0;
}

.factory-desc_heading .balloon::after{
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    background: var(--clr-wh);
}

.factory-desc_heading br{
    display: none;
}

.factory-desc_heading p{
    text-align: center;
}

.factory-desc_heading p:first-of-type{
    font-size: var(--fs-30);
    font-weight: bold;
    margin-top: 20px;
    display: inline-block;
}

.factory-desc_heading p:first-of-type::after{
    content: "";
    display: block;
    margin-top: 10px;
    height: 5   px;
    width: 100%;
    background: url(../images/factory/ic_dot_wh.svg) repeat-x left center / contain;
}

.factory-desc_heading h2{
    font-size: var(--fs-44);
    font-weight: bold;
}

.factory-desc_heading p:last-of-type{
    font-size: var(--fs-20);
    margin-top: 10px;
}

.factory-desc .factory-nav{
    margin: 80px 0;
}

.factory-desc .factory-nav a{
    height: 270px;
    overflow: hidden;
} 

.factory-desc .factory-nav li:nth-of-type(1) a{border-color: var(--clr-main);}
.factory-desc .factory-nav li:nth-of-type(2) a{border-color: var(--clr-or);}
.factory-desc .factory-nav li:nth-of-type(3) a{border-color: var(--clr-gr);}

.factory-desc .factory-nav p{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0;
}

.factory-desc .factory-nav figure{
    margin-bottom: 0;
    height: 160px;
}

.factory-cource{
    margin-bottom: 80px;
}

.factory-cource:last-of-type{
    margin-bottom: 0;
}

.factory-cource > p{
    text-align: center;
    font-size: var(--fs-26);
    font-weight: bold;
    margin-bottom: 20px;
}

.factory-cource .wrap{
    padding: 60px;
    border-radius: 20px;
    border: 3px solid var(--clr-bk);
}

.factory-cource h3.heading{
    font-size: var(--fs-50);
    font-weight: bold;
    margin-bottom: 20px;
}

.factory-cource h3.heading small{
    font-size: var(--fs-26);
}

.factory-cource p.heading{
    font-size: var(--fs-20);
    display: flex;
    margin-bottom: 30px;
}

.factory-cource p.heading img{
    margin-right: 10px;
}

.factory-cource p.txt{
    margin-bottom: 20px;
}

.factory-cource .flex2 > *{
    width: calc(50% - 40px/2);
}

.factory-cource .flex2 > *:nth-child(odd){
    margin-right: 40px;
}


.factory-cource dl{
    display: flex;
    padding: 15px 0;
    background: var(--clr-wh);
    border-top: 1px solid;
    font-size: var(--fs-14);
}

.factory-cource dl:last-of-type{
    border-bottom: 1px solid;
}

.factory-cource dt{
    width: 40%;
    padding-left: 20px;
    font-weight: bold;
}

.factory-cource dd{
    width: 60%;
    padding-left: 20px
}

.factory-cource .bt_box{
    font-size: var(--fs-12);
    margin-top: 10px;
    width: 90%;
}

/* cource01 */

.factory-cource#cource01 > p,
.factory-cource#cource01 h3.heading,
.factory-cource#cource01 p.heading,
.factory-cource#cource01 dt,
.factory-cource#cource01 dd,
.factory-cource#cource01 .bt_reserve{
    color: var(--clr-main);
}

.factory-cource#cource01 .tags li{
    background: var(--clr-main);
}

.factory-cource#cource01 .inner:first-of-type::after{
    content: "";
    display: block;
    margin-top: 30px;
    height: 5px;
    width: 100%;
    background: url(../images/factory/ic_dot_rd.svg) repeat-x left center / contain;
}

.factory-cource#cource01 .wrap{
    border-color: var(--clr-main);
    background: var(--clr-sub);
}

.factory-cource#cource01 .bt_reserve{
    border-color: var(--clr-main);
}

.factory-cource#cource01 dl{
    border-color: var(--clr-main);
}

/* cource02 */

.factory-cource#cource02 > p,
.factory-cource#cource02 h3.heading,
.factory-cource#cource02 p.heading,
.factory-cource#cource02 dt,
.factory-cource#cource02 dd,
.factory-cource#cource02 .bt_reserve{
    color: var(--clr-or);
}

.factory-cource#cource02 .tags li{
    background: var(--clr-or);
}

.factory-cource#cource02 .inner:first-of-type::after{
    content: "";
    display: block;
    margin-top: 30px;
    height: 5px;
    width: 100%;
    background: url(../images/factory/ic_dot_or.svg) repeat-x left center / contain;
}

.factory-cource#cource02 .wrap{
    border-color: var(--clr-or);
    background: var(--clr-lor);
}

.factory-cource#cource02 .bt_reserve{
    border-color: var(--clr-or);
}

.factory-cource#cource02 dl{
    border-color: var(--clr-or);
}

/* cource03 */

.factory-cource#cource03 > p,
.factory-cource#cource03 h3.heading,
.factory-cource#cource03 p.heading,
.factory-cource#cource03 dt,
.factory-cource#cource03 dd,
.factory-cource#cource03 .bt_reserve{
    color: var(--clr-gr);
}

.factory-cource#cource03 .tags li{
    background: var(--clr-gr);
}

.factory-cource#cource03 .inner:first-of-type::after{
    content: "";
    display: block;
    margin-top: 30px;
    height: 5px;
    width: 100%;
    background: url(../images/factory/ic_dot_gr.svg) repeat-x left center / contain;
}

.factory-cource#cource03 .wrap{
    border-color: var(--clr-gr);
    background: var(--clr-lgr);
}

.factory-cource#cource03 .bt_reserve{
    border-color: var(--clr-gr);
}

.factory-cource#cource03 dl{
    border-color: var(--clr-gr);
}

.factory-notice{
    padding-top: 0;
}

.factory-notice .heading{
    text-align: center;
    font-weight: bold;
}

.factory-notice h2.heading{
    font-size: var(--fs-44);
    margin-bottom: 60px;
}

.factory-notice h3.heading{
    font-size: var(--fs-30);
    margin-bottom: 40px;
}

.factory-notice .block{
    margin: 0;
    padding-bottom: 60px;
}

.factory-notice .block:last-of-type{
    padding-bottom: 0;
}

.factory-notice .block::before{
    content: "";
    display: block;
    height: 5px;
    width: 100%;
    background: url(../images/factory/ic_dot_bk.svg) repeat-x left center / contain;
    margin-bottom: 60px;
}

.factory-reserve{
    background: var(--clr-main);
    color: var(--clr-wh);
    text-align: center;
}

.factory-reserve h2.heading{
    font-size: var(--fs-30);
    font-weight: bold;
    letter-spacing: 3px;
    margin-bottom: 30px;
}

.factory-reserve h3{
    margin-bottom: 10px;
}



.factory-reserve .bt_reserve{
    color: var(--clr-main);
    border-color: var(--clr-main);
    max-width: 550px;
    margin: 0 auto 40px;
}

.factory-reserve .flex{
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.factory-reserve .flex p{
    margin: 0;
}

.factory-reserve .flex p:first-of-type{
    font-size: var(--fs-26);
    font-weight: bold;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid var(--clr-wh);
}

.factory-reserve .flex span{
    display: block;
    font-size: var(--fs-20);
    text-align: center;
}

.factory-reserve .flex span small{
    font-size: 14px;
    display: block;
}

.factory-reserve .flex .tel{
    font-size: var(--fs-50);
    font-weight: bold;
    font-family: var(--fnt-Arial);
    color: var(--clr-wh) !important;
}

.factory-detail h1.heading{
    font-size: var(--fs-50);
    font-weight: bold;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.factory-detail h3.heading{
    font-size: var(--fs-26);
    font-weight: bold;
    margin-bottom: 40px;
    letter-spacing: 3px;
}

.factory-detail h3.heading img{
    margin-right: 10px;
}

.factory-detail .factory-tags{
    margin-bottom: 40px;
}

.factory-detail dl{
    display: flex;
    margin-bottom: 30px;
}

.factory-detail dt{
    font-weight: bold;
    width: 130px;
}

.factory-detail dd{
    width: calc(100% - 150px);
}

.factory-detail hr{
    height: 1px;
    background: var(--clr-gy);
    margin-bottom: 30px;
}

.factory-detail .heading_lg{
    text-align: center;
    font-size: var(--fs-44);
    color: var(--clr-main);
}

@media (max-width:768px){
    img[src*="ic_sakura_three.svg"]{
        margin-bottom: 40px;
    }

    .factory-tags{
        flex-wrap: wrap;
    }

    .factory-tags li{
        display: inline-block;
        font-size: var(--fs-14);
        margin: 0 10px 10px 0 !important;
    }

    .bt_reserve{
        background-size: 10px;
        background-position: center right 10px;
        font-size: var(--fs-16);
        padding: 10px;
    }

    .bt_resrve_fix{
        right: initial;
        top: initial;
        bottom: 0;
        transform: initial;     
        background: var(--clr-main);
        width: 100%;
        padding: 10px;
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
        display: none;
    }

    .bt_resrve_fix a{
        -ms-writing-mode: initial;
        writing-mode: initial;
        border-right: 3px solid var(--clr-main);
        border-radius: 10px;
        width: 50%;
        min-width: 240px;
        padding: 10px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
    }

    .bt_resrve_fix a::after{
        margin-top: 0;
    }

    .factory-fv{
        height: auto;
    }

    .factory-nav a{
        height: 100px;
        width: 90%;
        margin: auto;
    }

    .factory-about{
        background: url(../images/factory/about_bg_01.svg) , url(../images/factory/about_bg_02.svg) , url(../images/factory/about_bg_03.svg);
        background-position: right -400px top -270px, left -500px top 160px, right -390px bottom 190px;
        background-size: 640px auto, 640px auto, 540px auto;
        background-repeat: no-repeat, no-repeat, no-repeat;
    }

    .factory-about .img-wrap,
    .factory-about .txt-wrap{
        width: 100%;
    }

    .factory-about .txt-wrap .heading{
        margin-top: 0;
    }

    .factory-about .balloon{
        width: 90%;
    }

    .factory-desc_heading p:first-of-type{
        width: 100%;
    }

    .factory-desc_heading br{
        display: block;
    }

    .factory-desc_heading .balloon{
        width: 90%;
    }

    .factory-desc .factory-nav{
        margin: 40px 0;
    }

    .factory-desc .factory-nav li{
        width: 70%;
        min-width: 300px;
        margin: 0 auto;
    }

    .factory-desc .factory-nav li + li{
        margin-top: 20px;
    }

    .factory-desc .factory-nav a{
        flex-direction: row;
        height: auto;
        width: 100%;
    }

    .factory-desc .factory-nav figure{
        height: 100px;
    }

    .factory-desc .factory-nav figure img{
        max-width: 140px;
        object-fit: cover;
    }

    .factory-cource{
        margin-bottom: 60px;
    }

    .factory-cource .flex2 > *{
        width: 100%;
    }

    .factory-cource .wrap{
        padding: 40px 20px;
    }

    .factory-cource dl{
        flex-direction: column;
    }

    .factory-notice h2.heading{
        margin-bottom: 40px;
    }

    .factory-notice .block{
        padding-bottom: 40px;
    }

    .factory-notice .block::before{
        margin-bottom: 40px;
    }

    .factory-reserve .flex{
        flex-direction: column;
    }

    .factory-reserve .heading{
        font-size: var(--fs-20);
    }

    .factory-reserve .flex p:first-of-type{
        padding: 0 0 20px 0;
        margin: 0 0 20px 0;
        border-right: none;
        border-bottom: 1px solid var(--clr-wh);
    }

    .factory-detail dl{
        flex-direction: column;
        margin-bottom: 20px;
    }

    .factory-detail dt{
        margin-bottom: 10px;
        font-size: var(--fs-18);
    }

    .factory-detail dt,
    .factory-detail dd{
        width: 100%;
    }

    .factory-detail .bt_box{
        margin-top: 10px;
    }
}