.content-header {
    margin: 0 auto;
    padding: 30px 0 180px;
    width: 1100px;
    font-family: 游明朝, "Yu Mincho", YuMincho, "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
    text-align: center;
}

.content-header p {
    padding: 30px 0 15px;
    line-height: 1.6;
    font-size: 16px;
}

.content-header p + small {
    display: block;
    line-height: 1;
    font-size: 10px;
}

[data-section] img[src*="photo"] {
    position: relative;
    width: 460px;
    height: 460px;
    z-index: 1;
}

.section-background {
    overflow: hidden;
    background: #f5b7ba;
}

.section-text-background {
    display: block;
    position: absolute;
    width: 460px;
    height: 460px;
    background: #f5b7ba;
    transition: right .1s, left .1s;
}

[data-section="1"] .section-text-background,
[data-section="3"] .section-text-background,
[data-section="5"] .section-text-background,
[data-section="7"] .section-text-background {
    top: 0;
    right: 0;
}

[data-section="1"] a:hover .section-text-background,
[data-section="3"] a:hover .section-text-background,
[data-section="5"] a:hover .section-text-background,
[data-section="7"] a:hover .section-text-background {
    right: 460px;
}

[data-section="2"] img[src*="photo"],
[data-section="4"] img[src*="photo"],
[data-section="6"] img[src*="photo"],
[data-section="8"] img[src*="photo"] {
    right: 0;
    float: right;
}

[data-section="2"] .section-text-background,
[data-section="4"] .section-text-background,
[data-section="6"] .section-text-background,
[data-section="8"] .section-text-background {
    top: 0;
    left: 0;
}

[data-section="2"] a:hover .section-text-background,
[data-section="4"] a:hover .section-text-background,
[data-section="6"] a:hover .section-text-background,
[data-section="8"] a:hover .section-text-background {
    left: 460px;
}

.section-inner {
    display: block;
    position: relative;
    margin: 0 auto;
    width: 920px;
    height: 460px;
    background: #fff;
}

[data-section] {
    position: relative;
}

[data-section] + [data-section] {
    margin-top: 150px;
}

[data-section]::before {
    position: absolute;
    top: -70px;
    left: 50%;
    margin-left: -68px;
    width: 135px;
    height: 123px;
    z-index: 2;
    content: "";
    background-repeat: no-repeat;

    pointer-events: none;
}

[data-section="1"]::before {
    background-image: url(../img/number1.png);
}

[data-section="2"]::before {
    background-image: url(../img/number2.png);
}

[data-section="3"]::before {
    background-image: url(../img/number3.png);
}

[data-section="4"]::before {
    background-image: url(../img/number4.png);
}

[data-section="5"]::before {
    background-image: url(../img/number5.png);
}

[data-section="6"]::before {
    background-image: url(../img/number6.png);
}

[data-section="7"]::before {
    background-image: url(../img/number7.png);
}

[data-section="8"]::before {
    background-image: url(../img/number8.png);
}

.content-header h1,
[data-section] h2 {
    display: none;
}

[data-section] .section-name {
    position: absolute;
    z-index: 2;
    font-size: 0;
}

[data-section] .section-sign {
    position: absolute;
    z-index: 2;
}

[data-section="1"] .section-name {
    top: 55px;
    right: 190px;
    content: url(../img/name1.png);
}

[data-section="1"] .section-sign {
    right: 90px;
    bottom: 40px;
    content: url(../img/sign1-white.png);
}


[data-section="2"] .section-name {
    top: 65px;
    left: 190px;
    content: url(../img/name2.png);
}

[data-section="2"] .section-sign {
    bottom: 60px;
    left: 90px;
    content: url(../img/sign2-white.png);
}

[data-section="3"] .section-name {
    top: 60px;
    right: 165px;
    content: url(../img/name3.png);
}

[data-section="3"] .section-sign {
    right: 78px;
    bottom: 35px;
    content: url(../img/sign3-white.png);
}

[data-section="4"] .section-name {
    top: 55px;
    left: 193px;
    content: url(../img/name4.png);
}

[data-section="4"] .section-sign {
    bottom: 40px;
    left: 90px;
    content: url(../img/sign4-white.png);
}


[data-section="5"] .section-name {
    top: 58px;
    right: 170px;
    content: url(../img/name5.png);
}

[data-section="5"] .section-sign {
    right: 63px;
    bottom: 35px;
    content: url(../img/sign5-white.png);
}

[data-section="6"] .section-name {
    top: 60px;
    left: 195px;
    content: url(../img/name6.png);
}

[data-section="6"] .section-sign {
    bottom: 30px;
    left: 50px;
    content: url(../img/sign6-white.png);
}

[data-section="7"] .section-name {
    right: 170px;
    top: 55px;
    content: url(../img/name7.png);
}

[data-section="7"] .section-sign {
    right: 75px;
    bottom: 30px;
    content: url(../img/sign7-white.png);
}

[data-section="8"] .section-name {
    top: 65px;
    left: 193px;
    content: url(../img/name8.png);
}

[data-section="8"] .section-sign {
    bottom: 30px;
    left: 78px;
    content: url(../img/sign8-white.png);
}

[data-section] img[src*="title"] {
    display: block;
    margin: 0 auto;
    padding: 30px 0;

    transition: opacity .1s;
}

br[data-view="sp"] {
    display: none;
}

@media screen and (min-width: 768px) {
    [data-section] a:hover img[src*="photo"] {
        opacity: .75;
    }

    [data-section="1"] a:hover .section-sign {
        content: url(../img/sign1-pink.png);
    }
    [data-section="2"] a:hover .section-sign {
        content: url(../img/sign2-pink.png);
    }

    [data-section="3"] a:hover .section-sign {
        content: url(../img/sign3-pink.png);
    }

    [data-section="4"] a:hover .section-sign {
        content: url(../img/sign4-pink.png);
    }
    [data-section="5"] a:hover .section-sign {
        content: url(../img/sign5-pink.png);
    }

    [data-section="6"] a:hover .section-sign {
        content: url(../img/sign6-pink.png);
    }
    [data-section="7"] a:hover .section-sign {
        content: url(../img/sign7-pink.png);
    }

    [data-section="8"] a:hover .section-sign {
        content: url(../img/sign8-pink.png);
    }

    [data-section] a:hover img[src*="title"] {
        opacity: .8;
    }
}

@media screen and (max-width: 767px) {
    br[data-view="sp"] {
        display: block;
    }

    .content img {
        max-width: 100%;
    }

    .content-header {
        padding: 30px 0 80px;
        width: 100%;
    }

    .content-header > img {
        width: 90%;
    }

    .content-header > p {
        margin: 0 auto;
        width: 85%;
        font-size: 11px;
    }

    .content-header > p + small {
        margin: 0 auto;
        width: 85%;
        line-height: 1.6;
    }

    [data-section] {
        margin: 0 auto;
        width: 85%;
    }

    .section-inner {
        width: 100%;
        height: auto;
    }

    [data-section] img[src*="photo"] {
        vertical-align: top;
        margin-top: 270px;
        width: 100%;
        height: auto;
    }

    .section-text {
        position: absolute;
        top: 0;
        width: 100%;
        height: 270px;
        z-index: 1;
        background: #f5b7ba;
    }

    .section-text-background {
        display: none;
    }

    [data-section]::before {
        top: -40px;
        margin-left: -45px;
        width: 90px;
        height: 80px;
        background-size: 90px 80px;
    }

    [data-section] .section-name {
        top: 40px;
        right: 5%;
        bottom: auto;
        left: auto;
    }

    [data-section] .section-sign {
        bottom: auto;
    }

    [data-section="1"] .section-sign {
        top: 80px;
        left: 30px;
    }

    [data-section="2"] .section-sign {
        top: 90px;
        left: 40px;
    }

    [data-section="3"] .section-sign {
        top: 85px;
        left: 20px;
    }

    [data-section="4"] .section-sign {
        top: 115px;
        left: 25px;
    }

    [data-section="5"] .section-sign {
        top: 47px;
        left: 30px;
    }

    [data-section="6"] .section-sign {
        top: 95px;
        left: 32px;
    }

    [data-section="7"] .section-sign {
        top: 85px;
        left: 32px;
    }

    [data-section="8"] .section-sign {
        top: 90px;
        left: 27px;
    }

    [data-section] .section-title {
        border-bottom: 1px solid #000;
    }

    [data-section] img[src*="title"] {
        width: 65%;
    }
}

@media screen and (max-width: 490px) {
    [data-section] + [data-section] {
        margin-top: 75px;
    }

    [data-section]::before {
        top: -30px;
        margin-left: -34px;
        width: 68px;
        height: 60px;
        background-size: 68px 60px;
    }

    .section-text {
        height: 200px;
    }

    [data-section] img[src*="photo"] {
        margin-top: 200px;
    }

    [data-section] .section-name {
        transform-origin: top right;
        transform: scale(.65, .65);
    }

    [data-section] .section-sign {
        transform-origin: top left;
        transform: scale(.65, .65);
    }

    [data-section="1"] .section-sign {
        top: 60px;
        left: 30px;
    }

    [data-section="2"] .section-sign {
        top: 70px;
        left: 40px;
    }

    [data-section="3"] .section-sign {
        top: 65px;
        left: 20px;
    }

    [data-section="4"] .section-sign {
        top: 90px;
        left: 25px;
    }

    [data-section="5"] .section-sign {
        top: 35px;
        left: 30px;
    }

    [data-section="6"] .section-sign {
        top: 73px;
        left: 32px;
    }

    [data-section="7"] .section-sign {
        top: 66px;
        left: 32px;
    }

    [data-section="8"] .section-sign {
        top: 66px;
        left: 27px;
    }
}