@charset "utf-8";
/* CSS Document */
/*各末端2021冬
スマートフォン：320px〜540px
タブレット：600px〜1024px
PC：1,280px〜*/
/**/
/*パソコン対応（基準）*/
body {
        background-color: #d1d2d4;
        margin: 0;
        padding: 0;
}
main a {
        color: #0F85C3; /*青*/
}
main img:hover {
        opacity: 0.5;
        transition: .3s; /*ゆっくり透明に*/
}
#top-logo-flex {
        background-color: white;
        display: flex;
        width: 100%;
        margin: 0 auto;
        padding-top: 150px;
}
.header-logo {
        width: 450px; /*530*/
        margin-right: 100px;
        margin-left: 90px;
        margin-top: 23px;
        margin-bottom: 100px;
}
h1 {
        background-color: white;
        font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
        font-size: 20px;
        letter-spacing: 0.05em;
        margin-top: 23px;
        line-height: 160%; /*行間の値（正確には、フォントサイズと上下の余白合計値）*/
}
#mainvidual {
        width: 100%;
}
.line-solid {
        background-color: #d1d2d4;
        width: 88%;
        border-top: solid 2px;
        margin: 75px auto;
}
.line-solid-footer {
        background-color: #d1d2d4;
        width: 88%;
        border-top: solid 2px;
        margin: 10px auto;
}
.top-gazo-flex {
        background-color: /*white*/ #d1d2d4;
        display: flex;
        width: 86%;
        margin: 0 auto;
        font-size: 16px;
        line-height: 200%; /*行間の値（正確には、フォントサイズと上下の余白合計値）*/
}
h2 {
        font-size: 28px;
        margin-top: 0;
        line-height: 200%; /*行間の値（正確には、フォントサイズと上下の余白合計値）*/
}
#top-gazo-01-2021 {
        background-color: #d1d2d4;
        line-height: 200%;
    margin-bottom: 75px;
}
#top-gazo-01-2021-linenap {
        background-color: #d1d2d4;
        width: 100%;
        margin: 0 auto;
}
.view-more {
        background-color: #d1d2d4;
        text-align: center;
        margin-bottom: 100px;
}
#top-gazo-01-2021-linenap-more {
        background-color: #d1d2d4;
        margin: 0 auto;
}
#gazo-02 {
        padding-top: 90px;
}
#top-gazo-02-2021 {
        background-color: #d1d2d4;
        line-height: 200%;
    margin-bottom: 75px;
}
#top-gazo-02-2021-linenap {
        background-color: #d1d2d4;
        margin: 0 auto;
}
.top-gazo-flex-size-title {
        width: 430px;
        height: 430px;
        object-fit: cover; /* この一行を追加するだけ！ */
        margin: 0;
        padding: 0;
}
.top-gazo-flex-size { /*リストの中の画像*/
        width: 90%; /*430px;*/
        height: auto;
        margin: 50px auto 0;
}
.top-gazo-linenap-digest {
        width: 100%;
        font-size: 28px;
        text-decoration: underline;
        margin: 0 auto;
        margin-top: 50px;
        margin-bottom: 0;
        text-align: center;
}
.top-gazo-linenap-digest-sub {
    text-align: center;
        margin-bottom: 0;
}
.top-gazo-gray {
        color: #4D4B4C;
}
/*移動＋フェードイン表示*/
ul {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        list-style-type: none;
        overflow: hidden;
        padding: 0;
        padding-inline-start: 0;
}
ul li {
        margin: 0 auto;
    
        transition: .8s;
}
.list-inview {
        opacity: 0; /*0*/
        transform: translate(0, 60px);
        -webkit-transform: translate(0, 60px);
}
.inview {
        opacity: 1.0;
        transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
}
.fake-box {
        width: 30%;
        height: auto;
}
/*レスポンシブウェブデザイン は、閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。
加えて、1つのウェブサイトで多様なデバイスを同様にサポートすることもレスポンシブウェブデザインのタスクに含まれている点を理解しておくことが重要である。*/
/*スマホ・タブレット対応*/
@media screen and (max-width: 1024px) {
        /*コーディング時は320pxで表示崩れ（横スクロールなど）が無いか確認しながら行うのが確実です。*/
        #top-logo-flex {
                background-color: white;
                display: block;
                width: 100%;
                margin: 0 auto;
                padding-top: 80px;
        }
        .header-logo {
                width: 90%;
                margin: 0 auto;
                margin-top: 0;
                margin-bottom: 0;
        }
        h1 {
                background-color: white;
                font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
                font-size: 20px;
                /*letter-spacing: 0.05em;*/
                width: 90%;
                margin: 0 auto;
                padding-top: 20px;
                padding-bottom: 20px;
                line-height: 160%; /*行間の値（正確には、フォントサイズと上下の余白合計値）*/
        }
        #mainvidual {
                width: 100%;
                margin: 0;
        }
        .line-solid {
                background-color: #d1d2d4;
                width: 88%;
                border-top: solid 2px;
                margin: 30px auto;
        }
        .line-solid-footer {
                background-color: #d1d2d4;
                width: 88%;
                border-top: solid 2px;
                margin: 10px auto;
        }
        /*.top-gazo-flex {
        background-color:  #d1d2d4;
        display: block;
        width: 100%;
        margin: 0 auto;
        font-size: 16px;
        line-height: 200%; 行間の値（正確には、フォントサイズと上下の余白合計値）
}*/
        h2 {
                font-size: 20px;
                margin-top: 0;
                line-height: 200%; /*行間の値（正確には、フォントサイズと上下の余白合計値）*/
        }
        #top-gazo-01-2021 {
                background-color: #d1d2d4;
                line-height: 200%;
                margin: 0 auto;
                margin-top: 30px;
                width: 90%;
            margin-bottom: 50px;
        }
        #top-gazo-01-2021-linenap {
                background-color: #d1d2d4;
                width: 100%;
                margin: 0 auto;
                margin-top: 30px;
        }
        .view-more {
                background-color: #d1d2d4;
                text-align: center;
                margin-bottom: 34px;
        }
        #top-gazo-01-2021-linenap-more {
                background-color: #d1d2d4;
                margin: 0 auto;
        }
        #gazo-02 {
                padding-top: 90px;
        }
        #top-gazo-02-2021 {
                background-color: #d1d2d4;
                line-height: 200%;
                margin: 0 auto;
                margin-top: 30px;
                width: 90%;
            margin-bottom: 50px;
        }
        #top-gazo-02-2021-linenap {
                background-color: #d1d2d4;
                margin: 0 auto;
                margin-top: 30px;
        }
        .top-gazo-flex-size-title {
                width: 90%;
                height: auto;
                object-fit: cover; /* この一行を追加するだけ！ */
                margin: 0 auto;
                padding: 0;
        }
        .top-gazo-flex-size { /*リストの中の画像*/
                width: 90%;
                height: auto;
                margin-top: 20px;
        }
        .top-gazo-linenap-digest {
                width: 100%;
                font-size: 20px;
                text-decoration: underline;
                margin: 0 auto;
                text-align: center;
                margin-top: 30px;
                margin-bottom: 0;
        }
    .top-gazo-linenap-digest-sub {
        margin-bottom: 0;
        text-align: center;
}
        .top-gazo-gray {
                color: #4D4B4C;
        }
        /*移動＋フェードイン表示*/
        ul {
                width: 90%;
                display: block;
                flex-direction: row;
                justify-content: center;
                margin: 0 auto;
                list-style-type: none;
                overflow: hidden;
                padding: 0;
                padding-inline-start: 0;
        }
        ul li {
                margin: 0 auto;
                transition: .8s;
        }
        .list-inview {
                opacity: 0; /*0*/
                transform: translate(0, 60px);
                -webkit-transform: translate(0, 60px);
        }
        .inview {
                opacity: 1.0;
                transform: translate(0, 0);
                -webkit-transform: translate(0, 0);
        }
        .fake-box {
                width: 0;
                height: 0;
        }
}