@charset "utf-8";

/* 共通パーツ */
.single .mv{
    padding: 165px 0 100px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#news .mv{
    background-image: url(../img/single/news-mv.jpg);
}
#journal .mv{
    background-image: url(../img/single/journal-mv.jpg);
}
@media only screen and (max-width: 768px) {
    #news .mv{
        background-image: url(../img/single/news-mv_sp.jpg);
    }
    #journal .mv{
        background-image: url(../img/single/journal-mv_sp.jpg);
    }
}


.single .mv .mv-inner{
    display: block;
    max-width: 1470px;
    width: 100%;
    padding: 0 10px;
    margin: 0 auto;
}
.single .mv h1{
    font-size: 60px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 25px;
    color: #fff;
}
.single .mv .flex{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.single .mv .flex p{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1;
    color: #fff;
}
.single .mv .flex #bcn .breadcrumbs{
    display: flex;
    align-items: center;
    gap: 10px;
    color: #Fff;
}
.single .mv .flex #bcn .breadcrumbs a,
.single .mv .flex #bcn .breadcrumbs p,
.single .mv .flex #bcn .breadcrumbs span{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
}
.single .mv .flex #bcn .breadcrumbs a{
    position: relative;
    text-decoration: underline;
}
@media only screen and (max-width: 1600px) {
    .single .mv .mv-inner{
        padding: 0 40px;
    }
}
@media only screen and (max-width: 768px) {
    .single .mv{
        padding: 21.333333333333336vw 0 16vw;
        max-height: none;
    }
    .single .mv .mv-inner{
        max-width: none;
        padding: 0 5.3333333333333334vw;
    }
    .single .mv h1{
        font-size: 9.333333333333334vw;
        margin: 0 0 4vw;
    }
    .single .mv .flex{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .single .mv .flex p{
        font-size: 3.7333333333333334vw;
        line-height: 1.34;
    }
    .single .mv .flex #bcn .breadcrumbs{
        display: none;
    }
}


/* PRODUCT 製品紹介 詳細ページ
--------------------------------------*/
#items{
    background-color: #F7F7F7;
}
#items .main_area{
    padding: 145px 0 130px;
    border-bottom: 1px dashed #222222;
}
#items .main_area .inner{
    max-width: 1260px;
}
#items .main_area .ctt-flex{
    display: flex;
    justify-content: space-between;
    gap: 30px;
}
#items .main_area .ctt-flex .image_area{
    display: block;
    max-width: 600px;
    width: 100%;
}
#items .main_area .ctt-flex .image_area .main-image{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 600px;
    width: 600px;
    overflow: hidden;
    margin: 0 0 25px;
    background-color: #fff;
}
#items .main_area .ctt-flex .image_area .main-image .main-image-button{
    display: block;
    width: 100%;
    height: auto;
    padding: 0;
    border: none;
    overflow: hidden;
    background-color: #fff;
    vertical-align: middle;
    cursor: pointer;
}
#items .main_area .ctt-flex .image_area .main-image img{
    display: block;
    width: 100%;
    height: auto;
}
#items .main_area .ctt-flex .image_area .main-image .image-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #fff;
    background-color: rgb(0 0 0 / 50%);
}
.fbx-caption-title{
    font-family: 'Noto Sans JP';
    font-weight: 500;
}
#items .main_area .ctt-flex .image_area .sub_images{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
}
#items .main_area .ctt-flex .image_area .sub_images .img{
    position: relative;
    width: 135px;
    height: 101px;
    overflow: hidden;
}
#items .main_area .ctt-flex .image_area .sub_images .img img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    height: 100%;
    cursor: pointer;
}
#items .main_area .ctt-flex .image_area .sub_images .img:has(img.is-active){
    border: 1px solid #333;
}
#items .main_area .ctt-flex .txt{
    display: block;
    max-width: 560px;
    width: 100%;
}
#items .main_area .ctt-flex .txt .top-info{
    margin: 0 0 35px;
}
#items .main_area .ctt-flex .txt .top-info .taxo-link{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.67;
    margin: 0 0 25px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .top-info .taxo-link a{
    text-decoration: underline;
    transition: all .3s;
}
#items .main_area .ctt-flex .txt .top-info .taxo-link a:hover{
    opacity: 0.7;
}
#items .main_area .ctt-flex .txt .top-info .taxo-link span{
    font-size: 18px;
    font-weight: 500;
    line-height: 1.67;
    padding: 0 10px;
}
#items .main_area .ctt-flex .txt .top-info .cat{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.63;
    margin: 0 0 15px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .top-info h2{
    display: block;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.47;
    margin: 0 0 15px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .top-info .model-number{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.63;
    margin: 0 0 40px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .top-info .text-area{
    margin: 0 0 30px;
}
#items .main_area .ctt-flex .txt .top-info .text-area .catch-txt{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.6;
    margin: 0 0 20px;
    color: #222222;
}
#items .main_area .ctt-flex .txt .top-info .text-area .expla{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.63;
    color: #000000;
}
#items .main_area .ctt-flex .txt .top-info .feature-labels{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}
#items .main_area .ctt-flex .txt .top-info .feature-labels .feature-label{
    position: relative;
    width: 60px;
    height: 60px;
    overflow: hidden;
}
#items .main_area .ctt-flex .txt .top-info .feature-labels .feature-label img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
}
#items .main_area .ctt-flex .txt .add-info .specification{
    padding: 22px 40px 27px;
    margin: 0 0 18px;
    border: 1px solid #EDEDED;
    border-radius: 5px;
    background-color: #fff;
}
#items .main_area .ctt-flex .txt .add-info .specification .spe-p{
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.63;
    margin: 0 0 18px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .add-info .specification .list{
    margin: 0 0 20px;
}
#items .main_area .ctt-flex .txt .add-info .specification .list dl{
    display: flex;
    padding: 15px 0;
    border-top: 1px solid #EDEDED;
}
#items .main_area .ctt-flex .txt .add-info .specification .list dl:last-of-type{
    border-bottom: 1px solid #EDEDED;
}
#items .main_area .ctt-flex .txt .add-info .specification .list dl dt,
#items .main_area .ctt-flex .txt .add-info .specification .list dl dd{
    display: block;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.86;
}
#items .main_area .ctt-flex .txt .add-info .specification .list dl dt{
    flex-shrink: 0;
    max-width: 110px;
    width: 100%;
}
#items .main_area .ctt-flex .txt .add-info .specification .list dl dd{
    flex: 1;
}
#items .main_area .ctt-flex .txt .add-info .specification .add-note{
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.67;
    margin: 0 0 15px;
    color: #000000;
}
#items .main_area .ctt-flex .txt .add-info .specification .note{
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.67;
    color: #000000;
}
#items .main_area .ctt-flex .txt .add-info .link-area{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#items .main_area .ctt-flex .txt .add-info .link-area .btn{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 275px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.63;
    padding: 17px 0;
    border-radius: 5px;
    color: #fff;
}
#items .main_area .ctt-flex .txt .add-info .link-area .blue{
    background-color: #2D4A80;
}
#items .main_area .ctt-flex .txt .add-info .link-area .blue::before{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    content: "";
    width: 17px;
    height: 14px;
    background-image: url(../img/common/mail-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#items .main_area .ctt-flex .txt .add-info .link-area .black{
    background-color: #222222;
}
#items .main_area .ctt-flex .txt .add-info .link-area .black::before{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    content: "";
    width: 12px;
    height: 15px;
    background-image: url(../img/single/download-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
@media only screen and (max-width: 768px) {
    #items .main_area{
        padding: 12vw 0 16vw;
    }
    #items .main_area .ctt-flex{
        display: block;
    }
    #items .main_area .ctt-flex .image_area{
        max-width: none;
        margin: 0 0 8vw;
    }
    #items .main_area .ctt-flex .image_area .main-image{
        max-width: 89.33333333333333vw;
        width: 89.33333333333333vw;
        margin: 0 0 5.3333333333333334vw;
        padding: 2.66666666666666667vw;
    }
    #items .main_area .ctt-flex .image_area .main-image .main-image-button{
        padding: 0;
        max-height: 100%;
    }
    #items .main_area .ctt-flex .image_area .main-image img{
        width: auto;
        height: 100%;
        max-height: 52.800000000000004vw;
        margin: 0 auto;
    }
    #items .main_area .ctt-flex .image_area .main-image .image-caption {
        padding: 1.666666666668vw;
        font-size: 3.4666666666666663vw;
    }
    #items .main_area .ctt-flex .image_area .sub_images{
        gap: 1.86666666666668vw;
    }
    #items .main_area .ctt-flex .image_area .sub_images .img{
        width: 16vw;
        height: 12vw;
    }
    #items .main_area .ctt-flex .txt{
        max-width: none;
    }
    #items .main_area .ctt-flex .txt .top-info{
        margin: 0 0 8vw;
    }
    #items .main_area .ctt-flex .txt .top-info .taxo-link{
        font-size: 3.2vw;
        margin: 0 0 5.333333333333333334vw;
    }
    #items .main_area .ctt-flex .txt .top-info .taxo-link span{
        font-size: 3.733333333333334vw;
        padding: 0 2.4vw;
    }
    #items .main_area .ctt-flex .txt .top-info .cat{
        font-size: 4vw;
        margin: 0 0 4vw;   
    }
    #items .main_area .ctt-flex .txt .top-info h2{
        font-size: 6.666666666666667vw;
        margin: 0 0 4vw;
    }
    #items .main_area .ctt-flex .txt .top-info .model-number{
        font-size: 3.4666666666666666663vw;
        margin: 0 0 8vw;
    }
    #items .main_area .ctt-flex .txt .top-info .text-area{
        margin: 0 0 8vw;
    }
    #items .main_area .ctt-flex .txt .top-info .text-area .catch-txt{
        font-size: 4.53333333333333333vw;
        line-height: 1.67;
        margin: 0 0 4vw;
    }
    #items .main_area .ctt-flex .txt .top-info .text-area .expla{
        font-size: 4vw;
    }
    #items .main_area .ctt-flex .txt .top-info .feature-labels{
        gap: 2.6666666666666666667vw;
    }
    #items .main_area .ctt-flex .txt .top-info .feature-labels .feature-label{
        width: 13.33333333333333335vw;
        height: 13.33333333333333335vw;
    }
    #items .main_area .ctt-flex .txt .top-info .feature-labels .feature-label img{
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: auto;
    }
    #items .main_area .ctt-flex .txt .add-info .specification{
        padding: 4vw 4vw 5.333333333333334vw;
        margin: 0 0 4vw;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .spe-p{
        font-size: 4.26666666666666667vw;
        margin: 0 0 4vw;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .list{
        margin: 0 0 5.3333333333333333334vw;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .list dl{
        display: block;
        padding: 3.73333333333333333334vw 0;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .list dl dt{
        font-size: 3.73333333333334vw;
        font-weight: 600;
        max-width: none;
        width: 100%;
        margin: 0 0 1.333333335vw;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .list dl dd{
        font-size: 3.4666666666666663vw;
        line-height: 1.47;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .add-note{
        font-size: 3.2vw;
        margin: 0 0 2.6666666666667vw;
    }
    #items .main_area .ctt-flex .txt .add-info .specification .note{
        font-size: 2.93333333333333vw;
    }
    #items .main_area .ctt-flex .txt .add-info .link-area{
        gap: 2.666666666666667vw;
    }
    #items .main_area .ctt-flex .txt .add-info .link-area .btn{
        max-width: 43.46666666666666vw;
        font-size: 4vw;
        padding: 3.73333333333333334vw 0;
    }
    #items .main_area .ctt-flex .txt .add-info .link-area .blue::before{
        right: 4vw;
        width: 4.5333333333333333vw;
        height: 3.73333333333334vw;
    }
    #items .main_area .ctt-flex .txt .add-info .link-area .black::before{
        right: 4vw;
        width: 3.2vw;
        height: 4vw;
    }    
}

#items .point{
    padding: 85px 0 95px;
}
#items .point .inner{
    max-width: 920px;
}
#items .point .ttl{
    display: flex;
    align-items: center;
    gap: 65px;
    margin: 0 0 30px;
}
#items .point .ttl h3{
    position: relative;
    font-size: 45px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    color: #222222;
}
#items .point .ttl h3::before{
    content: "";
    width: 1px;
    height: 43px;
    position: absolute;
    top: 50%;
    right: -32px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(to bottom, #000 0, #000 2px, transparent 2px, transparent 4px);
}
#items .point .ttl p{
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.44;
}
#items .point .youtube-thumb{
    padding: 0 0 65px;
    margin: 0 0 45px;
    border-bottom: 1px dashed #222222;
}
#items .point .editor-content>p{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.87;
    color: #000000;
    margin: 20px 0;
}
#items .point .editor-content iframe{
    display: block;
    width: 100%;
    height: 420px;
    margin: 0 0 50px;
}
#items .point .editor-content>p:last-of-type,
#items .point .editor-content>p:last-of-type iframe{
    margin: 0;
}
#items .point .jsv-holder{
    margin: 0 auto 40px;
    max-width: 500px;
    width: 100%;
}
.editor-content [data-main-image-url] {
    position: relative;
    z-index: 2;
}
.editor-content [data-main-image-url] img,
.editor-content [data-main-image-url] canvas {
    pointer-events: auto;
}
.editor-content [data-main-image-url]::before,
.editor-content [data-main-image-url]::after {
    pointer-events: none;
}
#items .point .jsv-show{
    display: none !important;
}
#items .point .single-nav{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#items .point .single-nav p{
    opacity: 0;
    width: 1px;
    height: 1px;
}
#items .point .single-nav .single-arrow-a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
    transition: all .3s;
}
#items .point .single-nav .single-arrow-a .arrow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #222222;
    transition: all .3s;
}
#items .point .single-nav .single-arrow-a .arrow::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transition: all .3s;
}
#items .point .single-nav .single-nav__prev .arrow::before{
    transform: translate(-40%,-50%) rotate(135deg);
}
#items .point .single-nav .single-nav__next .arrow::before{
    transform: translate(-60%,-50%) rotate(-45deg);
}
#items .point .single-nav .single-arrow-a:hover{
    opacity: 1;
}
#items .point .single-nav .single-arrow-a:hover .arrow{
    opacity: 1;
    background-color: #222;
}
#items .point .single-nav .single-arrow-a:hover .arrow::before{
    opacity: 1;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

#items .point .single-nav .single-nav__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E8E8E8;
}
#items .point .single-nav .single-nav__list img{
    display: block;
    max-width: 14px;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    #items .point{
        padding: 13.33333333335vw 0 16vw;
    }
    #items .point .inner{
        max-width: none;
    }
    #items .point .ttl{
        gap: 12vw;
        margin: 0 0 8vw;
    }
    #items .point .ttl h3{
        font-size: 9.3333333333334vw;
    }
    #items .point .ttl h3::before{
        height: 9.3333333333333334vw;
        right: -5.8666666666666666vw;
    }
    #items .point .ttl p{
        font-size: 3.733333333333333334vw;
    }
    #items .point .jsv-holder{
        margin: 0 auto 10.666666666666668vw;
        max-width: none;
    }
    #items .point .editor-content>p{
        font-size: 4vw;
        line-height: 1.67;
        margin: 4.266666666666667vw 0;
    }
    #items .point .editor-content iframe{
        height: 53.333333333333333334vw;
        margin: 0 0 10.66666666666666668vw;
    }
    #items .point .appeal-text{
        font-size: 3.73333333333333334vw;
        line-height: 1.67;
        margin: 0 0 12vw;
    }
    #items .point .youtube-thumb{
        padding: 0 0 12vw;
        margin: 0 0 8vw;
    }
    #items .point .youtube-thumb a .play-btn{
        max-width: 13.3333333333333335vw;
    }
    #items .point .single-nav .single-arrow-a{
        gap: 2.66666666666666667vw;
        font-size: 3.7333333333333334vw;
    }
    #items .point .single-nav .single-arrow-a .arrow{
        width: 10.66666666666666666668vw;
        height: 10.66666666666666666668vw;
    }
    #items .point .single-nav .single-arrow-a .arrow::before{
        width: 1.66666666666666667vw;
        height: 1.66666666666666667vw;
    }
    #items .point .single-nav .single-nav__list{
        width: 12vw;
        height: 12vw;
    }
    #items .point .single-nav .single-nav__list img{
        max-width: 3.2vw;
    }
}


/* RESULTS 納入実績 詳細ページ
--------------------------------------*/
#results .article-ctt{
    padding: 120px 0 115px;
    background-color: #F7F7F7;
}
#results .article-ctt .inner{
    max-width: 1020px;
}
#results .article-ctt .ttl_area{
    margin: 0 0 50px;
}
#results .article-ctt .ttl_area .cat-area{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 20px;
}
#results .article-ctt .ttl_area .cat-area .cat{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    line-height: 2;
    padding: 5px 25px 3px;
    color: #fff;
    background-color: #446898;
    border-radius: 100vw;
}
#results .article-ctt .ttl_area h2{
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.41;
    margin: 0 0 20px;
    color: #222222;
}
#results .article-ctt .ttl_area .tag-area{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin: 0 0 30px;
}
#results .article-ctt .ttl_area .tag-area a{
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #A3A3A3;
}
#results .article-ctt .ttl_area .tag-area a:hover{
    color: #DF5B4C;
    opacity: 1;
}
#results .article-ctt .ttl_area .result-info{
    padding: 30px 50px 30px;
    border-top: 1px dashed #222222;
    background-color: #F0F0F0;
}
#results .article-ctt .ttl_area .result-info .item{
    display: flex;
    align-items: center;
    gap: 70px;
    margin: 0 0 20px;
}
#results .article-ctt .ttl_area .result-info .item:last-of-type{
    margin: 0;
}
#results .article-ctt .ttl_area .result-info .item .result-info__item{
    display: flex;
    align-items: center;
    gap: 15px;
}
#results .article-ctt .ttl_area .result-info .item .result-info__item dt{
    display: block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    color: #222222;
    flex-shrink: 0;
}
#results .article-ctt .ttl_area .result-info .item .result-info__item dd{
    display: block;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222222;
    flex-shrink: 0;
}
@media only screen and (max-width: 768px) {
    #results .article-ctt{
        padding: 21.33333333333336vw 0 18.66666666666668vw;
    }
    #results .article-ctt .ttl_area{
        margin: 0 0 10.66666666666666668vw;
    }
    #results .article-ctt .ttl_area .cat-area{
        gap: 1.66666666666668vw;
        margin: 0 0 2.6666666667vw;
    }
    #results .article-ctt .ttl_area .cat-area .cat{
        font-size: 2.6666666666666667vw;
        line-height: 1.37;
        padding: 1.6666666666667vw 3.2vw 1.33333333333333335vw;
    }
    #results .article-ctt .ttl_area h2{
        font-size: 4.2666666666666667vw;
        line-height: 1.63;
        margin: 0 0 4vw;
    }
    #results .article-ctt .ttl_area .tag-area{
        gap: 2.6666666666666666667vw;
        margin: 0 0 5.33333333334vw;
    }
    #results .article-ctt .ttl_area .tag-area a{
        font-size: 2.6666666666667vw;
    }
    #results .article-ctt .ttl_area .result-info{
        padding: 5.333333333333334vw;
    }
    #results .article-ctt .ttl_area .result-info .item{
        display: block;
        margin: 0;
    }
    #results .article-ctt .ttl_area .result-info .item:last-of-type{
        margin: 0;
    }
    #results .article-ctt .ttl_area .result-info .item .result-info__item{
        max-width: none;
        gap: 5.3333333333334vw;
        margin: 0 0 2.66666666667vw;
    }
    #results .article-ctt .ttl_area .result-info .item .result-info__item:last-of-type{
        margin: 0;
    }
    #results .article-ctt .ttl_area .result-info .item .result-info__item--construction{
        margin: 0;
    }
    #results .article-ctt .ttl_area .result-info .item .result-info__item dt,
    #results .article-ctt .ttl_area .result-info .item .result-info__item dd{
        font-size: 3.2vw;
    }
}

#results .article-ctt .content{
    padding: 0 0 100px;
    margin: 0 0 40px;
    border-bottom: 1px dashed #222222;
}
#results .article-ctt .content .setumei{
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.14;
    color: #222222;
    margin: 0 0 30px;
}
#results .article-ctt .content .setumei a{
    font-weight: 500;
    color: #CB528B;
    text-decoration: underline;
}
#results .article-ctt .results_slide{
    margin: 0 auto 75px;
}
#results .article-ctt .results_slide .main_slide{
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 30px;
}
#results .article-ctt .results_slide .main_slide .swiper-slide{
    position: relative;
    display: block;
    width: 1000px;
    height: 640px;
    overflow: hidden;
    border-radius: 5px;
}
#results .article-ctt .results_slide .main_slide .swiper-slide img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-radius: 5px;
}
#results .article-ctt .results_slide .main_slide .swiper-arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    z-index: 1;
}
#results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-prev,
#results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-next{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 45px;
    background-color: #fff;
    margin: 0;
}
#results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-prev::after,
#results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-next::after{
    font-size: 17px;
    font-weight: 600;
    color: #222222;
}
#results .article-ctt .results_slide .sub_images_area{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 14px;
}
#results .article-ctt .results_slide .sub_images_area button{
    position: relative;
    display: block;
    width: 142px;
    height: 100px;
    overflow: hidden;
    border: none;
    padding: 0;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s;
}
#results .article-ctt .results_slide .sub_images_area button.is-active{
    border: 1px solid #222;
}
#results .article-ctt .results_slide .sub_images_area button:hover{
    opacity: 0.7;
}
#results .article-ctt .results_slide .sub_images_area button img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-radius: 3px;
}
@media only screen and (max-width: 768px) {
    #results .article-ctt .content{
        padding: 0 0 13.33333333333335vw;
        margin: 0 0 10.666666666666668vw;
    }
    #results .article-ctt .content .setumei{
        font-size: 3.46666666666663vw;
        letter-spacing: 2px;
        line-height: 1.81;
        margin: 0 0 5.33333333333334vw;
    }
    #results .article-ctt .results_slide{
        margin: 0 auto 8.533333333333333vw;
    }
    #results .article-ctt .results_slide .main_slide{
        margin: 0 0 5.33333333333333334vw;
    }
    #results .article-ctt .results_slide .main_slide .swiper-slide{
        width: 89.33333333333333vw;
        height: 60vw;
    }
    #results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-prev,
    #results .article-ctt .results_slide .main_slide .swiper-arrow .swiper-button-next,
    #results .swiper-pagination{
        display: none;
    }
    #results .article-ctt .results_slide .sub_images_area{
        gap: 1.66666666666668vw;
    }
    #results .article-ctt .results_slide .sub_images_area button{
        width: 16vw;
        height: 11.200000000000001vw;
    }
}

#results .article-ctt .top_editor{
    margin: 0 0 70px;
}
#results .article-ctt .editor blockquote{
    padding: 20px;
    border-radius: 10px;
    background-color: #E8E8E8;
}
#results .article-ctt .editor blockquote span{
    display: block;
    font-size: 16px !important;
    font-weight: 500;
    letter-spacing: 0;
    text-align: right;
}
#results .article-ctt .editor p{
    display: block;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 2.14;
    color: #222222;
}
#results .article-ctt .editor p a{
    color: #3858E9;
}
#results .article-ctt .editor h2{
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1;
    padding: 5px 0 5px 20px;
    margin: 0 0 35px;
    border-left: 5px solid #DF5B4C;
    color: #222222;
}
#results .article-ctt .editor ul{
    padding: 30px 50px;
    background-color: #fff;
}
#results .article-ctt .editor ul li{
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.67;
    color: #222222;
}
@media only screen and (max-width: 768px) {
    #results .article-ctt .top_editor{
        margin: 0 0 13.3333333333333335vw;
    }
    #results .article-ctt .editor blockquote{
        padding: 4vw;
        border-radius: 5px;
    }
    #results .article-ctt .editor blockquote span{
        font-size: 3.466666666663vw !important;
    }
    #results .article-ctt .editor p{
        font-size: 3.46666666666663vw;
        letter-spacing: 2px;
        line-height: 1.81;
    }
    #results .article-ctt .editor h2{
        font-size: 4.26666666666666667vw;
        letter-spacing: 0;
        line-height: 1.67;
        padding: 0 0 0 2.666666666666667vw;
        margin: 0 0 6.4vw;
        border-left: 0.8333333333333vw solid #DF5B4C;
    }
    #results .article-ctt .editor ul{
        padding: 2.6666666666667vw;
    }
    #results .article-ctt .editor ul li{
        font-size: 4vw;
    }
}

#results .article-ctt .template-area{
    margin: 0 0 60px;
}
#results .article-ctt .template-area .item{
    padding: 40px;
    margin: 0 0 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);;
}
#results .article-ctt .template-area .item:last-of-type{
    margin: 0;
}
#results .article-ctt .template-area .item .top-ctt{
    display: flex;
    align-items: flex-start;
    gap: 50px;
}
#results .article-ctt .template-area .item .top-ctt .img{
    position: relative;
    display: block;
    width: 380px;
    height: 285px;
    overflow: hidden;
    border-radius: 5px;
    flex-shrink: 0;
}
#results .article-ctt .template-area .item .top-ctt .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-radius: 5px;
}
#results .article-ctt .template-area .item .top-ctt .txt{
    flex: 1;
}
#results .article-ctt .template-area .item .top-ctt .txt .ttl{
    display: block;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.36;
    padding: 0 0 20px;
    margin: 0 0 25px;
    color: #222;
    border-bottom: 1px dashed #222;
}
#results .article-ctt .template-area .item .top-ctt .txt .note,
#results .article-ctt .template-area .item .top-ctt .txt .link{
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.87;
    margin: 0;
    color: #222222;
}
#results .article-ctt .template-area .item .top-ctt .txt .link{
    display: block;
    margin: 20px 0 0;
    text-decoration: underline;
    color: #DF5B4C;
}
#results .article-ctt .template-area .item .under-ctt{
    display: flex;
    align-items: stretch;
    gap: 15px;
    margin: 42px 0 0;
}
#results .article-ctt .template-area .item .under-ctt .media-item{
    position: relative;
    width: 285px;
    height: 195px;
    border-radius: 5px;
    overflow: hidden;
}
#results .article-ctt .template-area .item .under-ctt .media-item img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-radius: 5px;
}
#results .article-ctt .template-area .item .under-ctt .media-item video{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: 100%;
}
#results .article-ctt .template-area .item .under-ctt .media-item iframe{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
@media only screen and (max-width: 768px) {
    #results .article-ctt .template-area{
        margin: 0 0 13.3333333333335vw;
    }
    #results .article-ctt .template-area .item{
        padding: 5.33333333333334vw;
        margin: 0 0 5.33333333333333334vw;
        border-radius: 5px;
    }
    #results .article-ctt .template-area .item .top-ctt{
        display: block;
    }
    #results .article-ctt .template-area .item .top-ctt .img{
        width: 78.66666666666666vw;
        height: 53.333333333333336vw;
        margin: 0 0 8vw;
    }
    #results .article-ctt .template-area .item .top-ctt .txt{
        display: block;
        width: 100%;
    }
    #results .article-ctt .template-area .item .top-ctt .txt .ttl{
        font-size: 3.733333333333334vw;
        line-height: 1.29;
        padding: 0 0 5.3333333333334vw;
        margin: 0 0 5.333333333333334vw;
    }
    #results .article-ctt .template-area .item .top-ctt .txt .note,
    #results .article-ctt .template-area .item .top-ctt .txt .link{
        font-size: 3.4666666666666663vw;
        line-height: 1.77;
    }
    #results .article-ctt .template-area .item .top-ctt .txt .link{
        margin: 5.3333333333333333334vw 0 0;
    }
    #results .article-ctt .template-area .item .under-ctt{
        display: block;
        margin: 8vw 0 0;
    }
    #results .article-ctt .template-area .item .under-ctt .media-item{
        width: 78.66666666666666vw;
        height: 53.333333333333336vw;
        margin: 0 0 2.666666666667vw;
    }
    #results .article-ctt .template-area .item .under-ctt .media-item:last-of-type{
        margin: 0;
    } 
}

#results .article-ctt .facility{
    padding: 0 0 65px;
    margin: 0 0 70px;
    border-bottom: 1px dashed #222222;
}
#results .article-ctt .facility .sec_ttl{
    font-size: 30px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.5;
    margin: 0 auto 40px;
    color: #222222;
}
#results .article-ctt .facility .list{
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 25px;
}
#results .article-ctt .facility .list .item{
    display: block;
    max-width: 315px;
    width: 100%;
}
#results .article-ctt .facility .list .item .img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 315px;
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
    padding: 28px 12px;
    margin: 0 0 20px;
    background-color: #Fff;
}
#results .article-ctt .facility .list .item .img img{
    display: block;
    width: 100%;
    height: auto;
    transition: all .3s;
}
#results .article-ctt .facility .list .item .ttl{
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 1px;
    line-height: 1.56;
    color: #2D2D2D;
}
#results .article-ctt .facility .list .item:hover{
    opacity: 1;
}
#results .article-ctt .facility .list .item:hover .img img{
    transform: scale(1.1);
}
#results .article-ctt .facility .list .item:hover .ttl{
    text-decoration: underline;
}
@media only screen and (max-width: 768px) {
    #results .article-ctt .facility{
        padding: 0 0 9.333333333334vw;
        margin: 0 0 10.66666666666666668vw;
    }
    #results .article-ctt .facility .sec_ttl{
        font-size: 4.2666666666666667vw;
        letter-spacing: 2px;
        line-height: 1.26;
        margin: 0 auto 6.6666666666667vw;
    }
    #results .article-ctt .facility .list{
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 2.66666666667vw;
    }
    #results .article-ctt .facility .list .item{
        max-width: 54.666666666666664vw;
        margin: 0;
    }
    #results .article-ctt .facility .list .item .img{
        width: 54.666666666666664vw;
        height: 40.53333333333333vw;
        padding: 4.8vw 2vw;
        margin: 0 0 3.466666666666663vw;
    }
    #results .article-ctt .facility .list .item .ttl{
        font-size: 3.2vw;
        text-align: center;
        line-height: 1.3;
    }
}

#results .point .single-nav{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#results .point .single-nav p{
    opacity: 0;
    width: 1px;
    height: 1px;
}
#results .point .single-nav .single-arrow-a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#results .point .single-nav .single-arrow-a .arrow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #222222;
    transition: all .3s;
}
#results .point .single-nav .single-arrow-a .arrow::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transition: all .3s;
}
#results .point .single-nav .single-nav__prev .arrow::before{
    transform: translate(-40%,-50%) rotate(135deg);
}
#results .point .single-nav .single-nav__next .arrow::before{
    transform: translate(-60%,-50%) rotate(-45deg);
}
#results .point .single-nav .single-arrow-a:hover{
    opacity: 1;
}
#results .point .single-nav .single-arrow-a:hover .arrow{
    opacity: 1;
    background-color: #222;
}
#results .point .single-nav .single-arrow-a:hover .arrow::before{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
#results .point .single-nav .single-nav__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E8E8E8;
}
#results .point .single-nav .single-nav__list img{
    display: block;
    max-width: 14px;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    #results .point{
        padding: 0;
    }
    #results .point .inner{
        max-width: none;
    }
    #results .point .ttl{
        gap: 12vw;
        margin: 0 0 8vw;
    }
    #results .point .ttl h3{
        font-size: 9.3333333333334vw;
    }
    #results .point .ttl h3::before{
        height: 9.3333333333333334vw;
        right: -5.8666666666666666vw;
    }
    #results .point .ttl p{
        font-size: 3.733333333333333334vw;
    }
    #results .point .appeal-text{
        font-size: 3.73333333333333334vw;
        line-height: 1.67;
        margin: 0 0 12vw;
    }
    #results .point .youtube-thumb{
        padding: 0 0 12vw;
        margin: 0 0 8vw;
    }
    #results .point .youtube-thumb a .play-btn{
        max-width: 13.3333333333333335vw;
    }
    #results .point .single-nav .single-arrow-a{
        gap: 2.66666666666666667vw;
        font-size: 3.7333333333333334vw;
    }
    #results .point .single-nav .single-arrow-a .arrow{
        width: 10.66666666666666666668vw;
        height: 10.66666666666666666668vw;
    }
    #results .point .single-nav .single-arrow-a .arrow::before{
        width: 1.66666666666666667vw;
        height: 1.66666666666666667vw;
    }
    #results .point .single-nav .single-nav__list{
        width: 12vw;
        height: 12vw;
    }
    #results .point .single-nav .single-nav__list img{
        max-width: 3.2vw;
    }
}

#results .other-work{
    padding: 100px 0;
    background-color: #F0F0F0;
    border-top: 1px dashed #222222;
}
#results .other-work .ttl_area{
    display: block;
    margin: 0 auto 75px;
    color: #222222;
}
#results .other-work .ttl_area h2{
    display: block;
    font-size: 50px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 20px;
}
#results .other-work .ttl_area p{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1;
}
#results .other-work .ctt{
    display: flex;
    align-items: stretch;
    gap: 25px;
    margin: 0 auto 70px;
}
#results .other-work .ctt .item{
    display: block;
    max-width: 415px;
    width: 100%;
    padding: 25px 25px 40px;
    background-color: #fff;
    border-radius: 10px;
    transition: all .3s;
}
#results .other-work .ctt .item:hover{
    opacity: 1;
}
#results .other-work .ctt .item .img{
    position: relative;
    width: 365px;
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
    margin: 0 0 20px;
}
#results .other-work .ctt .item .img img{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    transition: all .3s;
}
#results .other-work .ctt .item:hover .img img{
    transform: scale(1.1);
}
#results .other-work .ctt .item .txt .label{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px;
}
#results .other-work .ctt .item .txt .label .cat{
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0;
    line-height: 1.85;
    padding: 3px 18px 2px;
    color: #222222;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 100vw;
}
#results .other-work .ctt .item .txt .label .date{
    font-size: 14px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.5;
    color: #222222;
}
#results .other-work .ctt .item .txt .ttl{
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.67;
    min-height: 90px;
    padding: 0 0 30px;
    margin: 0 0 20px;
    border-bottom: 1px dashed #222222;
    transition: all .3s;
    color: #222222;
}
#results .other-work .ctt .item .txt .info-area{
    display: flex;
    justify-content: space-between;
    gap: 40px;
}
#results .other-work .ctt .item .txt .info-area .tags{
    display: flex;
    align-items: stretch;
    gap: 15px;
}
#results .other-work .ctt .item .txt .info-area .tags .tag{
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
}
#results .other-work .ctt .item .txt .info-area .tags .tag span{
    color: #EC6859;
}
#results .other-work .ctt .item .txt .info-area .prefecture{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222222;
    flex-shrink: 0;
}
#results .other-work .ctt .item .txt .info-area .prefecture::before{
    content: "";
    width: 16px;
    height: 20px;
    background-image: url(../img/common/map-icon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#results .other-work .btn a{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 400px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 1px;
    padding: 26px 0;
    margin: 0 auto;
    color: #222222;
    background-color: #FFFFFF;
    border: 1px solid #171717;
    border-radius: 100vw;
    transition: all .3s;
}
#results .other-work .btn a::before{
    content: "";
    width: 30px;
    height: 30px;
    background-image: url(../img/top/btn_in-black_arrow.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    transition: all .3s;
}
#results .other-work .btn a:hover{
    opacity: 1;
    color: #fff;
    background-color: #DF5B4C;
}
#results .other-work .btn a:hover::before{
    background-image: url(../img/top/btn_red_arrow.png);
}
@media only screen and (max-width: 768px) {
    #results .other-work{
        padding: 16vw 0;
    }
    #results .other-work .ttl_area{
        margin: 0 auto 12vw;
    }
    #results .other-work .ttl_area h2{
        font-size: 8vw;
        margin: 0 auto 4.8vw;
    }
    #results .other-work .ttl_area p{
        font-size: 4.2666666667vw;
    }
    #results .other-work .ctt{
        margin: 0 auto 12vw;
    }
    #results .other-work .ctt .item{
        max-width: 80vw;
        padding: 4vw 4vw 5.33333333333334vw;
        border-radius: 5px;
    }
    #results .other-work .ctt .item .img{
        width: 69.33333333333333334vw;
        height: 52vw;
        margin: 0 0 4vw;
    }
    #results .other-work .ctt .item .txt .label{
        margin: 0 0 4vw;
    }
    #results .other-work .ctt .item .txt .label .cat{
        font-size: 2.93333333333333333333vw;
        line-height: 1.5;
        padding: 0.533333333333333333vw 2.66666666666666667vw;
    }
    #results .other-work .ctt .item .txt .label .date{
        font-size: 2.66666666666666666667vw;
    }
    #results .other-work .ctt .item .txt .ttl{
        font-size: 4vw;
        line-height: 1.6;
        min-height: 17.333333333333336vw;
        padding: 0 0 4.8vw;
        margin: 0 0 4vw;
    }
    #results .other-work .ctt .item .info-area{
        gap: 2.666666666667vw;
    }
    #results .other-work .ctt .item .info-area .tag{
        font-size: 2.666666666666667vw;
    }
    #results .other-work .ctt .item .info-area .prefecture{
        gap: 1.66666666666667vw;
        font-size: 2.666666666666667vw;
    }
    #results .other-work .ctt .item .info-area .prefecture::before{
        width: 2.933333333333333vw;
        height: 3.733333333333334vw;
    }
    #results .other-work .btn a{
        max-width: 69.33333333333334vw;
        font-size: 3.733333333333334vw;
        padding: 4.2666666666666667vw 0;
        margin: 0 auto;
    }
    #results .other-work .btn a::before{
        width: 5.866666666666666666vw;
        height: 5.866666666666666666vw;
    }

}


/* NEWS お知らせ 詳細ページ
--------------------------------------*/
#news .main_area{
    padding: 120px 0 100px;
    background-color: #F7F7F7;
}
#news .main_area .ttl_area{
    padding: 0 0 40px;
    margin: 0 0 60px;
    border-bottom: 1px dashed #222222;
}
#news .main_area .ttl_area .label{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 30px;
}
#news .main_area .ttl_area .label .date{
    display: block;
    font-size: 18px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    color: #222222;
}
#news .main_area .ttl_area .label .cat{
    display: flex;
    align-items: stretch;
    gap: 10px;
}
#news .main_area .ttl_area .label .cat a{
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0;
    padding: 2px 12px 3px;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 15px;
}
#news .main_area .ttl_area h3{
    display: block;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.5;
    color: #222;
}
#news .main_area .article-ctt{
    padding: 0 0 100px;
    margin: 0 0 50px;
    border-bottom: 1px dashed #222222;
}
#news .main_area .article-ctt p{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.67;
}
#news .main_area .article-ctt img{
    width: auto;
    max-width: 100%;
    margin: 40px 0;
}
#news .main_area .article-ctt table{
    padding: 0 10px;
    margin: 0 auto;
    max-width: 95%;
    width: 100%;
    border: unset;
}
#news .main_area .article-ctt table th,
#news .main_area .article-ctt table td{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.67;
    border: 1px solid;
    padding: 5px;
}


@media only screen and (max-width: 768px) {
    #news .main_area{
        padding: 13.33333333335vw 0 18.666666666666668vw;
    }
    #news .main_area .ttl_area{
        padding: 0 0 8vw;
        margin: 0 0 9.333333333333334vw;
    }
    #news .main_area .ttl_area .label{
        gap: 5.3333333333334vw;
        margin: 0 0 5.33333333333333334vw;
    }
    #news .main_area .ttl_area .label .date{
        font-size: 4.8vw;
    }
    #news .main_area .ttl_area .label .cat{
        gap: 2.6666666666667vw;
    }
    #news .main_area .ttl_area .label .cat a{
        font-size: 3.2vw;
        padding: 0.5333333333333333vw 3.2vw 0.666666666667;
    }
    #news .main_area .ttl_area h3{
        font-size: 4.8vw;
        letter-spacing: 1px;
        line-height: 1.56;
    }
    #news .main_area .article-ctt{
        padding: 0 0 16vw;
        margin: 0 0 16vw;
    }
    #news .main_area .article-ctt p{
        font-size: 4vw;
        line-height: 1.67;
    }
    #news .main_area .article-ctt img{
        margin: 8vw 0;
    }
}

#news .point .single-nav{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#news .point .single-nav p{
    opacity: 0;
    width: 1px;
    height: 1px;
}
#news .point .single-nav .single-arrow-a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
    transition: all .3s;
}
#news .point .single-nav .single-arrow-a .arrow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #222222;
    transition: all .3s;
}
#news .point .single-nav .single-arrow-a .arrow::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transition: all .3s;
}
#news .point .single-nav .single-nav__prev .arrow::before{
    transform: translate(-40%,-50%) rotate(135deg);
}
#news .point .single-nav .single-nav__next .arrow::before{
    transform: translate(-60%,-50%) rotate(-45deg);
}
#news .point .single-nav .single-arrow-a:hover{
    opacity: 1;
}
#news .point .single-nav .single-arrow-a:hover .arrow{
    opacity: 1;
    background-color: #222;
}
#news .point .single-nav .single-arrow-a:hover .arrow::before{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}
#news .point .single-nav .single-nav__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E8E8E8;
}
#news .point .single-nav .single-nav__list img{
    display: block;
    max-width: 14px;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    #news .point .single-nav .single-arrow-a{
        gap: 2.66666666666666667vw;
        font-size: 3.7333333333333334vw;
    }
    #news .point .single-nav .single-arrow-a .arrow{
        width: 10.66666666666666666668vw;
        height: 10.66666666666666666668vw;
    }
    #news .point .single-nav .single-arrow-a .arrow::before{
        width: 1.66666666666666667vw;
        height: 1.66666666666666667vw;
    }
    #news .point .single-nav .single-nav__list{
        width: 12vw;
        height: 12vw;
    }
    #news .point .single-nav .single-nav__list img{
        max-width: 3.2vw;
    }
}

/* JOURNAL ドッグラボのモノ語り 詳細ページ
--------------------------------------*/
#journal .main_area{
    padding: 130px 0 110px;
    background-color: #F7F7F7;
}
#journal .main_area .inner{
    max-width: 920px;
}
#journal .main_area .ttl_area{
    margin: 0 auto 60px;
}
#journal .main_area .ttl_area .label{
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0 0 30px;
}
#journal .main_area .ttl_area .label .date{
    font-size: 19px;
    font-family: "Albert Sans", sans-serif;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1;
    color: #222222;
}
#journal .main_area .ttl_area .label .cat{
    display: flex;
    align-items: stretch;
    gap: 15px;
}
#journal .main_area .ttl_area .label .cat a{
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.83;
    padding: 3px 13px;
    color: #fff;
    background-color: #529370;
    border-radius: 100vw;
}
#journal .main_area .ttl_area h2{
    position: relative;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 2px;
    line-height: 1.5;
    padding: 0 0 40px;
    margin: 0 0 50px;
    color: #222222;
}
#journal .main_area .ttl_area h2::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(to right, #222222 0px, #222222 1px, transparent 1px, transparent 5px);
}
#journal .main_area .ttl_area .thumbnail img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 110px;
}
@media only screen and (max-width: 768px) {
    #journal .main_area{
        padding: 12vw 0 18.66666666666666668vw;
    }
    #journal .main_area .inner{
        max-width: none;
    }
    #journal .main_area .ttl_area{
        margin: 0 auto 16vw;
    }
    #journal .main_area .ttl_area .label{
        gap: 5.33333333333333333334vw;
        margin: 0 0 5.333333333333333334vw;
    }
    #journal .main_area .ttl_area .label .date{
        font-size: 4.266666666666666667vw;
    }
    #journal .main_area .ttl_area .label .cat{
        gap: 1.666666666666666668vw;
    }
    #journal .main_area .ttl_area .label .cat a{
        font-size: 2.9333333333333333333333vw;
        line-height: 1.83;
        padding: 0.53333333333333333333vw 2.666666666666666667vw;
    }
    #journal .main_area .ttl_area h2{
        font-size: 4.8vw;
        padding: 0 0 6.4vw;
        margin: 0 0 10.666666666666666668vw;
    }
    #journal .main_area .ttl_area .thumbnail img{
        margin: 0 0 8vw;
    }
}

#journal .main_area .table-contents{
    position: relative;
    margin: 0 0 80px;
}
#journal .main_area .table-contents #ez-toc-container{
    position: relative;
    width: 100%;
    height: auto;
    padding: 50px 40px;
    margin: 0;
    background-color: #fff;
    border: 1px solid #222222;
    border-radius: 10px;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-box-title{
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    letter-spacing: 2px;
    line-height: 1.5;
    border-left: 1px solid #222222;
    border-right: 1px solid #222222;
    padding: 0 25px;
    margin: 0;
    color: #222222;
    background: linear-gradient(
    to bottom,
    #F7F7F7 0%,
    #F7F7F7 50%,
    #fff 50%,
    #fff 100%
    );
}
#journal .main_area .table-contents #ez-toc-container ul,
#journal .main_area .table-contents #ez-toc-container li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-list-level-1 {
    counter-reset: toc-h2;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2 {
    position: relative;
    counter-increment: toc-h2;
    padding: 0 0 30px;
    margin: 0 0 30px;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(to right, #222222 0px, #222222 1px, transparent 1px, transparent 5px);
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2:last-child{
    padding: 0;
    margin: 0;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2:last-child::before{
    display: none;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2 > .ez-toc-link {
    position: relative;
    display: block;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.67;
    padding-left: 30px;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2 > .ez-toc-link::before {
    content: counter(toc-h2);
    position: absolute;
    top: 0;
    left: 0;
    font-weight: 600;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-list-level-3 {
    margin-top: 15px;
    padding-left: 20px;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-3 > .ez-toc-link {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 2;
    color: #222222;
}
#journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-3 > .ez-toc-link::before{
    content: "・";
    font-size: 18px;
    margin: 0;
}
@media only screen and (max-width: 768px) {
    #journal .main_area .table-contents{
        padding: 0;
        margin: 0 0 16vw;
    }
    #journal .main_area .table-contents #ez-toc-container{
        padding: 10.6666666666666666668vw 5.33333333333333333334vw;
        border-radius: 5px;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-box-title{
        white-space: nowrap;
        top: -4vw;
        font-size: 4.533333333333333vw;
        line-height: 1.76;
        padding: 0 6.66666666666666667vw;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2 {
        padding: 0 0 5.33333333334vw;
        margin: 0 0 5.33333333334vw;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-2 > .ez-toc-link {
        font-size: 4.2666666666666666667vw;
        padding-left: 6.666666666666666666667vw;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-list-level-3 {
        margin-top: 4vw;
        padding-left: 5.33333333333333334vw;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-3 > .ez-toc-link {
        align-items: flex-start;
        gap: 2.6666666666666666667vw;
        font-size: 3.73333333333333333334vw;
    }
    #journal .main_area .table-contents #ez-toc-container .ez-toc-heading-level-3 > .ez-toc-link::before{
        font-size: 3.73333333333333333334vw;
    }
}

#journal .main_area .article-ctt{
    position: relative;
    padding: 0 0 100px;
    margin: 0 0 50px;
    color: #222222;
}
#journal .main_area .article-ctt::before{
    content: "";
    width: 100%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: repeating-linear-gradient(to right, #222222 0px, #222222 1px, transparent 1px, transparent 5px);
}
#journal .main_area .article-ctt h2{
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.73;
    padding: 40px 0 0;
    margin: 120px 0 45px;
    border-top: 1px solid #222222;
}
#journal .main_area .article-ctt h3{
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1.73;
    margin: 0 0 45px;
}
#journal .main_area .article-ctt p{
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.87;
    margin: 0 0 60px;
}
#journal .main_area .article-ctt ol,
#journal .main_area .article-ctt ul{
    padding: 25px 30px 25px 50px;
    border-radius: 5px;
    background: #eee;
    list-style: unset;
    margin: 0 0 60px;
}
#journal .main_area .article-ctt ol li,
#journal .main_area .article-ctt ul li{
    list-style: unset;
    font-size: 16px;   
    font-weight: 400;
    letter-spacing: 2px;
    line-height: 1.87;
}
#journal .main_area .article-ctt img{
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 40px;
}
#journal .main_area .article-ctt > :last-child {
    margin-bottom: 0;
}
@media only screen and (max-width: 768px) {
    #journal .main_area .article-ctt{
        padding: 0 0 16vw;
        margin: 0 0 16vw;
    }
    #journal .main_area .article-ctt h2{
        font-size: 4.8vw;
        line-height: 1.56;
        padding: 8vw 0 0;
        margin: 0 0 8vw;
    }
    #journal .main_area .article-ctt h3{
        font-size: 4.2666666666666667vw;
        line-height: 1.73;
        margin: 0 0 8vw;
    }
    #journal .main_area .article-ctt p{
        font-size: 3.73333333333333334vw;
        line-height: 2.14;
        margin: 0 0 13.3333333333333333335vw;
    }
    #journal .main_area .article-ctt ol,
    #journal .main_area .article-ctt ul{
        padding: 5.333333333334vw 5.333333333333334vw 5.33333333333334vw 8vw;
        margin: 0 0 13.3333333333333335vw;
    }
    #journal .main_area .article-ctt ol li,
    #journal .main_area .article-ctt ul li{
        font-size: 3.73333333333333334vw;
    }
    #journal .main_area .article-ctt img{
        margin: 0 0 8vw;
    }
}

#journal .point .single-nav{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
#journal .point .single-nav p{
    opacity: 0;
    width: 1px;
    height: 1px;
}
#journal .point .single-nav .single-arrow-a{
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #222222;
    transition: all .3s;
}
#journal .point .single-nav .single-arrow-a .arrow{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #222222;
    transition: all .3s;
}
#journal .point .single-nav .single-arrow-a .arrow::before{
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-right: 2px solid #222222;
    border-bottom: 2px solid #222222;
    transition: all .3s;
}
#journal .point .single-nav .single-nav__prev .arrow::before{
    transform: translate(-40%,-50%) rotate(135deg);
}
#journal .point .single-nav .single-nav__next .arrow::before{
    transform: translate(-60%,-50%) rotate(-45deg);
}
#journal .point .single-nav .single-arrow-a:hover{
    opacity: 1;
}
#journal .point .single-nav .single-arrow-a:hover .arrow{
    opacity: 1;
    background-color: #222;
}
#journal .point .single-nav .single-arrow-a:hover .arrow::before{
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}


#journal .point .single-nav .single-nav__list{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #E8E8E8;
}
#journal .point .single-nav .single-nav__list img{
    display: block;
    max-width: 14px;
    width: 100%;
}
@media only screen and (max-width: 768px) {
    #journal .point .inner{
        max-width: none;
    }
    #journal .point .ttl{
        gap: 12vw;
        margin: 0 0 8vw;
    }
    #journal .point .ttl h3{
        font-size: 9.3333333333334vw;
    }
    #journal .point .ttl h3::before{
        height: 9.3333333333333334vw;
        right: -5.8666666666666666vw;
    }
    #journal .point .ttl p{
        font-size: 3.733333333333333334vw;
    }
    #journal .point .appeal-text{
        font-size: 3.73333333333333334vw;
        line-height: 1.67;
        margin: 0 0 12vw;
    }
    #journal .point .youtube-thumb{
        padding: 0 0 12vw;
        margin: 0 0 8vw;
    }
    #journal .point .youtube-thumb a .play-btn{
        max-width: 13.3333333333333335vw;
    }
    #journal .point .single-nav .single-arrow-a{
        gap: 2.66666666666666667vw;
        font-size: 3.7333333333333334vw;
    }
    #journal .point .single-nav .single-arrow-a .arrow{
        width: 10.66666666666666666668vw;
        height: 10.66666666666666666668vw;
    }
    #journal .point .single-nav .single-arrow-a .arrow::before{
        width: 1.66666666666666667vw;
        height: 1.66666666666666667vw;
    }
    #journal .point .single-nav .single-nav__list{
        width: 12vw;
        height: 12vw;
    }
    #journal .point .single-nav .single-nav__list img{
        max-width: 3.2vw;
    }
}