@charset "utf-8";

.heading{
    background: url("../img/common/subpage_bg.jpg") no-repeat center center var(--color-green01);
    background-size: cover;
    height: 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.heading h1{
    font-weight: 700;
    text-align: center;
}

.heading h1 span{
    font-family: "Roboto Condensed", sans-serif;    
    font-size: 6rem;
    font-weight: 700;
}

.pankuzu{
    background: var(--color-gray06);
}

.pankuzu ol{
    font-size: 0.875rem;
    max-width: 1280px;
    padding: 0 40px;
    height: 45px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: var(--color-bg);
}

.pankuzu ol li + li:before{
    content: ">";
    padding: 0 10px;
}

.pankuzu ol li a:hover{
    text-decoration: underline;
}

#contents{
    padding-bottom: 120px;
    background: var(--color-bg);
}

.w1120{
    max-width: 1200px;
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
}

.w1200{
    max-width: 1280px;
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
}

h2{
    position: relative;
    margin-bottom: 50px;
    color: var(--color-text);
    padding-left: 30px;
    font-weight: 700;
}

h2.color-black {
    color: var(--color-bg);
}

h2:before{
    content: "　";
    position: absolute;
    left: 0;
    width: 9px;
    height: 100%;
    background:  var(--color-green01);
    display: block;
}

h2:after{
    content: "　";
    position: absolute;
    top: 0;
    left: 0;
    width: 9px;
    height: 29px;
    background:  var(--color-green02);
    display: block;
}

h2 span{
    font-family: "Roboto Condensed", sans-serif;  
    font-size: 3.75rem;
    font-weight: 900;
    display: inline-block;
    margin-top: 5px;
}

h2 span:first-letter {
    color: var(--color-green02);
}

h3{
    position: relative;
    margin-bottom: 20px;
    color: var(--color-bg);
}

h3:before{
    content: "　";
    position: absolute;
    left: 0;
    width: 9px;
    height: calc(100% + 5px);
    background:  var(--color-green01);
    display: block;
}

h3:after{
    content: "　";
    position: absolute;
    top: -3px;
    left: 0;
    width: 9px;
    height: 11px;
    background:  var(--color-green02);
    display: block;
}

h3 span{
    font-size: 1.5rem;
    font-weight:700;
    padding-left: 23px;
}

@media screen and (max-width: 767px) {   
    
    #contents{
        padding-bottom:calc(120vw / 7.5);
    }

    .w1120{
        max-width: 1120px;
        padding: 0 calc(40vw / 7.5);
    }
    
    .w1200{
        max-width: 1280px;
        padding: 0 calc(40vw / 7.5);
    }
    
    
    .heading{
    background: url("../img/common/subpage_bg_sp.jpg") no-repeat center center var(--color-green01);
    background-size: cover;
        font-size: calc(28vw / 7.5);
        height: calc(250vw / 7.5);
    }

    .heading h1 span{
        font-size:calc(90vw / 7.5);
    }
    
    h2{
        font-size:  calc(24vw / 7.5);
        margin-bottom: calc(50vw / 7.5);
        padding-left:calc(28vw / 7.5);
    }

    h2:before{
        width: calc(12vw / 7.5);
    }

    h2:after{
        width: calc(12vw / 7.5);
        height:calc(29vw / 7.5);
    }

    h2 span{
        font-size: calc(66.5vw / 7.5);
        margin-top: calc(15vw / 7.5);
    }

    h3{
        position: relative;
        margin-bottom: 20px;
        color: var(--color-bg);
    }    
    
    h3{
        margin-bottom:  calc(30vw / 7.5);
    }

    h3:before{
        width: calc(12vw / 7.5);
        height: calc(100% + 5px);
    }

    h3:after{
        width: calc(12vw / 7.5);
        height: calc(15vw / 7.5);
    }

    h3 span{
        font-size:calc(30vw / 7.5);
        padding-left: calc(30vw / 7.5);
    }

    
    
    
}