@charset "UTF-8";

/* ****************************************
Commnon
***************************************** */
:root {
    color: #333333;
}

body {
    width: 100%;
    padding-top: 80px;
}

.wrapper {
    margin: 0 auto;
}

.wrapper.base {
    max-width: 1140px;
    padding: 0 20px;
}

/* ****************************************
Anchor
***************************************** */
a {
    font-size: 1.6rem;
    color: #333;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

a.leading {
    font-size: 1.6rem;
    color: #333;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }

    &::after {
        content: " ≫";
    }
}

/* ****************************************
構造
***************************************** */
.cover {
    min-width: 350px;
    display: grid;
    grid-template-columns: auto 1100px auto;
    background-color: #f2f2f2;
    border-bottom: 1px solid #333;

    .cover_inner_1 {
        background-image: url(../images/dot.png);
        background-position: top 59px left 0;
        background-repeat: repeat-x;
    }

    .cover_inner_2 {
        display: grid;
        grid-template-columns: auto 340px;
        background-image: url(../images/dot.png);
        background-position: top 0 right 340px;
        background-repeat: repeat-y;
        border-right: 1px solid #333;
    }
}

@media (max-width: 1160px) {
    .cover {
        display: block;
        background-image: url(../images/dot.png);
        background-position: top 59px left 0;
        background-repeat: repeat-x;


        .cover_inner_1 {
                display: none;
        }

        .cover_inner_2 {
            display: grid;
            grid-template-columns: auto 340px;
            margin-left: 20px;
            border-right: none;
            background-position: top 0 right 340px;
        }
    
        .cover_inner_3 {
            display: none;
        }
    }
}

@media (max-width: 900px) {
    .cover {
        .cover_inner_2 {
            display: block;
            margin-left: 0px;
            border-right: none;
            background-image: none;
        }

    }
}

@media (max-width: 600px) {
    body {
        padding-top: 130.5px;
    }
}


/* ****************************************
title
***************************************** */
h2 {
    height: 60px;
    line-height: 60px;
    background-image: url(../images/dot.png);
    background-position: top 59px left 0;
    background-repeat: repeat-x;
    font-size: 2rem;
}

aside {
    h3 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #333;
        padding: 0 20px;
        font-size: 2rem;
    }
}

@media (max-width: 900px) {

    h2 {
        padding: 0 20px;
    }


    aside {
        h3 {

            padding: 0 20px;

        }
    } 
}

/* ****************************************
note
***************************************** */
.note {
    margin: 20px 20px 0 0;
    padding: 20px;
    background-color: #fff;
    font-size: 1.6rem;
}

@media (max-width: 900px) {
    .note {
        margin: 20px 20px 0 20px;
    }  
}