/* CSS Document */
.cause{
    counter-reset: number;
}
.cause_contents h2{
    text-align: center;
    margin-bottom: 60px;
}
.cause_content_box{
    text-align: left;
}
.cause_content_box h3{
    text-align: left;
}
.cause_content_box h3::before{
    counter-increment: number;
    content: counter(number, decimal-leading-zero);
    font-family: 'Didot Regular';
    font-size: 50px;
    margin-right: 15px;
}
.cause_content_box h3 span.gothic{
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    letter-spacing: 1px;
    white-space: pre-wrap;
    display: block;
    text-align: left
}
.cause_caption p:not(:last-of-type){
    margin-bottom: 1em;
}
.cause_img{
}
.cause_img img{
    width: 100%;
}
.cause_img_list{
    display: flex;
    flex-wrap: wrap;
}
.cause_img_item{
    width: calc(100%/7);
}
.cause_img_item img{
    vertical-align: bottom;
}
.cause_contents .staff_comment{
    text-align: left;
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
    letter-spacing: 1px;
}
.cause_contents .staff_comment {
    width: 250px;
}
.cause_contents .staff_comment .staff_img {
    text-align: center;
}
.cause_contents .staff_comment .staff_img img{
    max-height: 200px;
}
.cause_contents .staff_comment .staff_name{
    text-align: left;
}
.cause_contents .staff_comment .staff_name span{
    margin-left: .5em;
}

.cause_content_box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:1.5em;
    margin-bottom: 10em;
}
.cause_content_box .cause_head{
    grid-column: 1/5;
}
.cause_content_box .cause_img{
    grid-column: 1/5;
}
.cause_content_box .cause_caption{
    grid-column: 1/4;
}
.cause_content_box .w100{
    grid-column: 1/5;
}
.cause_contents {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    column-gap: 2em;
}
.cause_contents h2{grid-column: 1/7;}
.cause_contents .cause_content_box:nth-of-type(1){grid-column: 1/7;}
.cause_contents .cause_content_box:nth-of-type(2){grid-column: 1/7;}
.cause_contents .cause_content_box:nth-of-type(3){grid-column: 1/4;}
.cause_contents .cause_content_box:nth-of-type(4){grid-column: 4/7;}
.cause_contents .cause_content_box:nth-of-type(5){grid-column: 1/7;}

@media screen and (max-width:800px){
.cause_contents .cause_content_box:nth-of-type(3){grid-column: 1/7;}
.cause_contents .cause_content_box:nth-of-type(4){grid-column: 1/7;}
.cause_img_item{
    width: calc(100%/4);
}
}
@media screen and (max-width:480px){
    .cause_content_box .cause_caption{
        grid-column: 1/5;
    }
    .cause_contents .staff_comment {
        width: auto;
        grid-column: 1/5;
    }
    .staff_comment_inner{
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap:10px;
    }
    .staff_img{grid-column: 1/2;grid-row: 1/6;}
    .staff_salon,
    .staff_name,
    .staff_from{grid-column: 2/3;}
    .staff_comment_txt{grid-column: 2/3;grid-row: 5/6;}
    .cause_contents .staff_comment .staff_name span{
        margin-left: 0;
        display: block;
    }
}