@charset"utf-8";

div#luxy {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("../images/hand.jpg");
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: 2fr 3fr 1fr;
    grid-template-areas:
    "hero hero hero"
    "footer footer footer";
}

/* ここから */
div#mainContent{
    grid-area: hero;
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
}

#header {
    padding: 20px 0 20px 70%;
}

h1 {
    color: #555;
    letter-spacing: 5px;
    font-size: 2em;
    padding: 80px 80px 80px 80px;
    text-align: center;
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho","Noto Serif JP",serif;
}

#article {
    font-family: "游明朝体","Yu Mincho",YuMincho,"ヒラギノ明朝 Pro","Hiragino Mincho Pro","MS P明朝","MS PMincho","Noto Serif JP",serif;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 80px;
}

.txtHanding p{
    text-align: center;
    line-height: 5;
    padding: 0 5%;
    font-size: 16px;
}

.imgHanding {
    grid-column: 1;
    grid-row: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* ここから */

/* 800px以下に適用されるCSS（タブレット用） */
@media (max-height: 800px)
{
    #mainContent {
        height: auto !important;
    }
}

/* 1200px以下に適用されるCSS（タブレット用） */
@media (max-width: 1200px)
{
    #header {
        margin: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    #mainContent {
        height: auto !important;
    }

    div.navToggle {
        float: right;
    }
}

/* 800px以下に適用されるCSS（タブレット用） */
@media (max-width: 850px)
{
    #header {
        margin: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    #mainContent {
        height: auto !important;
    }

    div.navToggle {
        float: right;
    }

    .txtHanding p{
        text-align: left;
        line-height: 2;
        padding: 0 5%;
        font-size: 14px;
    }
}

/* 480px以下に適用されるCSS（スマホ用） */
@media screen and (max-width: 480px) {

    /* ここから */

    #header {
        margin: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }

    #mainContent {
        height: auto !important;
    }

    div.navToggle {
        float: right;
    }

    article {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .txtHanding p{
        text-align: left;
        line-height: 2;
        padding: 0 5%;
    }

    /* ここまでヘッダー */
}

/* ここまでレスポンシブ */