@charset "UTF-8";

.text-en {
    display: block;
}

#benefit-process01 {
    padding: 20px;
    background-color: #21a9ac;
    text-align: center;
}

    #benefit-process01-chart01 {
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        margin-top: 10px;
    }

        #benefit-process01-chart01 li {
            position: relative;
            box-sizing: border-box;
            width: 32.5%;
            padding: 30px;
            background-color: #167375;
            color: #fff;
            font-size: 139%;
            font-weight: bold;
            text-align: left;
        }


        #benefit-process01-chart01 li:before,
        #benefit-process01-chart01 li:after {
            position: absolute;
            top: 0;
            content: "";
            width: 25%;
            height: 100%;
        }

        #benefit-process01-chart01 li:before {
            right: -12%;
            background:linear-gradient(45deg, transparent 49%, #21A9AC 49%),
                       linear-gradient(135deg, transparent 49%, #21A9AC 49%);
        }

        #benefit-process01-chart01 li:after {
            right: -16%;
            background:linear-gradient(45deg, transparent 49%, #167375 49%),
                       linear-gradient(135deg, transparent 49%, #167375 49%);
        }


        #benefit-process01-chart01 li:last-child:before,
        #benefit-process01-chart01 li:last-child:after {
            display: none;
        }

        #benefit-process01-chart01 li:nth-child(1) {width: 32.5%;}
        #benefit-process01-chart01 li:nth-child(2) {width: 35.5%;}
        #benefit-process01-chart01 li:nth-child(3) {width: 28%;}

#benefit-process02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    margin-top: 10px;
}

    #benefit-process02 dl {
        width: 25%;
        text-align: center;
    }

        #benefit-process02 dl dt {
            color: #7c7c7c;
            font-weight: 600;
            font-size: 124%;
        
        }

        #benefit-process02 dl dd {
            position: relative;
            margin-top: 0.5rem;
            padding: 10px 20px;
            font-weight: 600;
            font-size: 139%;
            background-color: #d9e0e2;
        }

        #benefit-process02 dl dd:after {
            position: absolute;
            top: 0;
            right: -12.5%;
            content: "";
            width: 25%;
            height: 100%;
            background: linear-gradient(45deg, transparent 49%, #fff 49%),
                        linear-gradient(135deg, #D9E0E2 49%, #fff 49%);
        }

        #benefit-process02 dl:last-child dd:after {display: none;}


.ul-item-list01 {
    overflow: hidden;
}

    .ul-item-list01 li {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 185px;
        height: 185px;
        background-color: #eee;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: contain;
    }

    .ul-item-list01 li a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 185px;
        height: 185px;
        color: #fff;
        text-decoration: none;
        
    }

    .ul-item-list01 li a .circle {
        opacity: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 90px;
        height: 90px;
        border-radius: 45px;
        background-color: rgba(0,0,0,0.5);
        transition: all 0.3s linear;
    }

        .ul-item-list01 li a .circle span {
            display: inline-block;
            overflow: hidden;
            width: 80%;
            white-space: nowrap;
            text-align: center;
            text-overflow: ellipsis;
        }
        .ul-item-list01 li a .circle .name-jp {}
        .ul-item-list01 li a .circle .name-en {
            margin: 0.2em 0 0 0;
            padding: 0.2em 0.25em 0 0.25em;
            border-top: 2px solid #fff;
        }

    .ul-item-list01 li a:hover .circle {
        opacity: 1.0;
    }

    .ul-item-list01.item-fl-left li {
        float: left;
        margin: 0 18px 18px 0;
    }

    .ul-item-list01.item-fl-left li:nth-child(5),
    .ul-item-list01.item-fl-left li:nth-child(9) {
        margin-right: 0;
    }

    .ul-item-list01.item-fl-right li {
        float: right;
        margin: 0 0 18px 18px;
    }

    .ul-item-list01.item-fl-right li:nth-child(5),
    .ul-item-list01.item-fl-right li:nth-child(9) {
        margin-left: 0;
    }

    .ul-item-list01 li.large,
    .ul-item-list01 li.large a {
        width: 388px;
        height: 388px;
    }

    .ul-item-list01 li.large a .circle {
        width: 180px;
        height: 180px;
        border-radius: 90px;
        font-size: 180%;
    }

    .ul-item-list01 li.item01 {background-image: url(/items/01/s.jpg);}

    .ul-item-list01 li.item02 {background-image: url(/items/07/s.jpg);}

    .ul-item-list01 li.item03 {background-image: url(/items/11/s.jpg);}
    .ul-item-list01 li.item04 {background-image: url(/items/02/s.jpg);}
    .ul-item-list01 li.item05 {background-image: url(/items/20/s.jpg);}
    .ul-item-list01 li.item06 {background-image: url(/items/23/s.jpg);}
    .ul-item-list01 li.item07 {background-image: url(/items/09/s.jpg);}

    .ul-item-list01 li.item08 {background-image: url(/items/08/s.jpg);}

    .ul-item-list01 li.item09 {background-image: url(/items/04/s.jpg);}


    .ul-item-list01 li.item10 {background-image: url(/items/03/s.jpg);}
    .ul-item-list01 li.item11 {background-image: url(/items/05/s.jpg);}
    .ul-item-list01 li.item12 {background-image: url(/items/10/s.jpg);}
    .ul-item-list01 li.item13 {background-image: url(/items/12/s.jpg);}
    .ul-item-list01 li.item14 {background-image: url(/items/14/s.jpg);}
    .ul-item-list01 li.item15 {background-image: url(/items/19/s.jpg);}
    .ul-item-list01 li.item16 {background-image: url(/items/22/s.jpg);}
    .ul-item-list01 li.item17 {background-image: url(/items/25/s.jpg);}
    .ul-item-list01 li.item18 {background-image: url(/items/26/s.jpg);}


#popup_contents {display: none;}

.popup_inner {text-align: center;}
.popup_inner .title {
    font-size: 124%;
    font-weight: 600;
    margin-bottom: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid #21a9ac;
}
.popup_inner .sub-title {
    font-weight: 600;
    margin-bottom: 1em;
}
.popup_inner .content {
    text-align: left;
}

.popup_inner .content table {
    width: 100%;
    margin-top: 2em;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

.popup_inner .content table:first-child {margin-top: 0;}

.popup_inner .content table caption {
    text-align: left;
    margin-bottom: 0.5em;
}

.popup_inner .content table th,
.popup_inner .content table td {
    padding: 10px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.popup_inner .content table th {
    font-weight: 600;
    background-color: #eee;
}
.popup_inner .content table td {}


.popup_inner .content table.trisection th {width: 33%;}

.before-after {}

.before-after li {
    position: relative;
}

.before-after li img {}

.before:before,
.after:before {
    position: absolute;
    left: 0;
    bottom: 16px;
    z-index: 20;
    width: 100%;
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,.75);
    line-height: 1;
    text-align: center;
}

.before:before {
    content: "before";
}

.after:before {
    content: "after";
}


.before:after {
    position: absolute;
    top: 50%;
    right: -0.65em;
    z-index: 20;
    font-size: 32px;
    font-family: Fontawesome;
    content: "\f064";
    color: #ff8f00;
    text-shadow: 1px 1px 1px rgba(0,0,0,.75);
    line-height: 1;
}