:root{
    --font-en:bryant,sans-serif;
    --font-ja:fot-tsukuardgothic-std, sans-serif;
    --colorwh:#fff;
    --colorblack:#333;
    --colorglay:#666;
}
body{
    background-color: #000;
}
.top-section{
    padding-top: 80px;
    margin: 0 auto;
    background-color: #fff;
}
.top-section h1{
    font-weight: 200;
    font-family: var(--font-en);
    font-size: 2.4rem;
}
.main-title {
    width: 327px;
    margin: 0 auto;
    position: relative;
}
.subtitle{
    font-size: 1.6rem;
    margin-top: 20px;
    font-weight: 200;
    font-family: var(--font-ja);
}
.triangle1{
    position: absolute;
    left: 35%;
    top: -20%;
    display: inline-block;
    border-top: 3px solid #888;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-left: 3px solid #888;
}
.triangle2{
    position: absolute;
    right: 35%;
    display: block;
    border-top: 3px solid transparent;
    border-right: 3px solid #888;
    border-bottom: 3px solid #888;
    border-left: 3px solid transparent;
}
@media (min-width:960px) {
    .top-section{
        margin-bottom: -1px;
        padding-bottom: 100px;
    }
    .top-section h1{
        margin-top:75px;
        font-size: 5.0rem;
    }
    .subtitle{
        font-size: 2.4rem;
        margin-top: 60px;
        margin-bottom: 30px;
        top: -5%;
    }
    .triangle1{
        position: absolute;
        left: 15%;
        top: -70%;
        border-top: 6px solid #888;
        border-right: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid #888;
    }
    .triangle2{
        position: absolute;
        right: 15%;
        border-top: 6px solid transparent;
        border-right: 6px solid #888;
        border-bottom: 6px solid #888;
        border-left: 6px solid transparent;
    }
}
.photo-navigation{
    margin-top: -1px;
    margin-bottom: 0px;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
}
.photo-navigation nav{
    font-size: 1.6rem;
}
.photo-navigation ul li {
    font-family:var(--font-ja);
    font-weight: 200;
    padding: 10px;
}
.photo-navigation a {
    text-decoration: none;
    color: #666;
    font-family:var(--font-ja);
    font-weight: 200;
}
@media (min-width:960px) {
    .photo-navigation{
        margin-top: -1px;
        margin-bottom: 0px;
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .photo-navigation ul  {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 87%;
        max-width: 1100px;
        margin: 0 auto;
    }
    .photo-navigation ul li {
        font-size: 2.2rem;
        font-weight: 300;
        font-feature-settings: "palt";
    }
}
.gallery-zone{
    /* background-color: #000; */
    padding-bottom: 100px;
}
.gallery-zone h3{
    display: inline-block;
    margin-top: 80px;
    margin-bottom: 40px;
    padding: 10px;
    border: 0.01px solid #fff;
    color: var(--colorwh);
    font-weight: 200;
    font-family: var(--font-ja);
    font-size: 1.6rem;
}
.photo-zone-maedori,.photo-zone-wedding,.photo-zone-family,.photo-zone-omiyamairi,.photo-zone-shichigosan,.photo-zone-seijinshiki{
    width: 84%;
    max-width: 353px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 42%,42%;
    grid-template-rows:repeat(10,auto);
    grid-column-gap: 13px;
    grid-row-gap: 13px;
}
@media (min-width:600px) {
    .photo-zone-maedori,.photo-zone-wedding,.photo-zone-family,.photo-zone-omiyamairi,.photo-zone-shichigosan,.photo-zone-seijinshiki{
        max-width: 645px;
        display: grid;
        grid-column-gap: 23px;
        grid-row-gap: 23px;
    }
}
@media (min-width:960px) {
    .photo-zone-maedori,.photo-zone-wedding,.photo-zone-family,.photo-zone-omiyamairi,.photo-zone-shichigosan,.photo-zone-seijinshiki{
        width: 70%;
        max-width: 800px;
        display: grid;
        grid-column-gap: 34px;
        grid-row-gap: 34px;
        padding-top: 100px;
    }
    .gallery-zone h3{
        margin-top: 120px;
        font-size: 3.0rem;
        margin-bottom: 20px;
    }
}
.photo1{
    grid-column: 1/2;
    grid-row: 1/3;
}
.photo1 img,.photo2 img,.photo3 img,.photo4 img,.photo5 img,.photo6 img,.photo7 img
,.photo8 img,.photo9 img,.photo10 img,.photo11 img,.photo12 img,.photo13 img,.photo14 img,.photo15 img,.photo16 img,.photo17 img,
.photo18 img,.photo19 img,.photo20 img,.photo21 img,.photo22 img,.photo23 img{
    width: 100%;
    height: 100%;
}
.photo2{
    grid-column: 2/3;
    grid-row: 1/2;
}
.photo3{
    grid-column: 2/3;
    grid-row: 2/3;
}
.photo4{
    grid-column: 1/3;
    grid-row: 3/4;
}
.photo5{
    grid-column: 1/2;
    grid-row: 4/5;
}
.photo6{
    grid-column: 1/2;
    grid-row: 5/6;
}
.photo7{
    grid-column: 2/3;
    grid-row: 4/6;
}
.photo8{
    grid-column: 1/3;
    grid-row: 6/7;
}
.photo9{
    grid-column: 1/2;
    grid-row: 7/9;
}
.photo10{
    grid-column: 2/3;
    grid-row: 7/8;
}
.photo11{
    grid-column: 2/3;
    grid-row: 8/9;
}
.photo12{
    grid-column: 1/3;
    grid-row: 9/10;
}
.photo13{
    grid-column: 1/2;
    grid-row: 10/11;
}
.photo14{
    grid-column: 1/2;
    grid-row: 11/12;
}
.photo-zone-family .photo14,.photo-zone-omiyamairi .photo14,.photo-zone-shichigosan .photo14,.photo-zone-seijinshiki .photo14{
    grid-column: 2/3;
    grid-row: 10/11;
}
.photo15{
    grid-column: 2/3;
    grid-row: 10/12;
}
.photo16{
    grid-column: 1/3;
    grid-row: 12/13;
}
.photo17{
    grid-column: 1/2;
    grid-row: 13/15;
}
.photo18{
    grid-column: 2/3;
    grid-row: 13/14;
}
.photo19{
    grid-column: 2/3;
    grid-row: 14/15;
}
.photo20{
    grid-column: 1/3;
    grid-row: 15/16;
}
.photo21{
    grid-column: 1/2;
    grid-row: 16/17;
}.photo22{
    grid-column: 1/2;
    grid-row: 17/18;
}.photo23{
    grid-column: 2/3;
    grid-row: 16/18;
}
.photo1_1{
    grid-column: 1/2;
    grid-row: 1/2;
}
.photo1_1 img,.photo2_1 img,.photo3_1 img,.photo4_1 img,.photo5_1 img,.photo6_1 img,.photo7_1 img
,.photo8_1 img,.photo9_1 img,.photo10_1 img,.photo11_1 img,.photo12_1 img,.photo13_1 img,.photo14_1 img{
    width: 100%;
    height: 100%;
}
.photo2_1{
    grid-column: 1/2;
    grid-row: 2/3;
}
.photo3_1{
    grid-column: 2/3;
    grid-row: 1/3;
}
.photo4_1{
    grid-column: 1/3;
    grid-row: 3/4;
}
.photo5_1{
    grid-column: 1/2;
    grid-row: 4/6;
}
.photo6_1{
    grid-column: 2/3;
    grid-row: 4/5;
}
.photo7_1{
    grid-column: 2/3;
    grid-row: 5/6;
}
.photo8_1{
    grid-column: 1/3;
    grid-row: 6/7;
}
.photo9_1{
    grid-column: 1/2;
    grid-row: 7/8;
}
.photo10_1{
    grid-column: 1/2;
    grid-row: 8/9;
}
.photo11_1{
    grid-column: 2/3;
    grid-row: 7/9;
}
.photo12_1{
    grid-column: 1/3;
    grid-row: 9/10;
}
.photo13_1{
    grid-column: 1/2;
    grid-row: 10/11;
}
.photo14_1{
    grid-column: 2/3;
    grid-row: 10/11;
}
