@charset "UTF-8";

/* HEAD
------------------------------------------------- */
section#head {
    background: url("../img/campaign/2021autumn/mv_icho.png") no-repeat left bottom 10% / 13% auto,
                url("../img/campaign/2021autumn/mv_momiji.png") no-repeat right bottom 10% / 13% auto,
                url("../img/campaign/2021autumn/mv_trees.png") no-repeat center bottom / 50% auto,
                url("../img/campaign/2021autumn/bg.png") no-repeat center top / cover;
    padding: 7% 0 3%;
}
section#head::after {
    content: none;
}
section#head h1 img {
    width: 80%;
}

/* ENTRY
------------------------------------------------- */
section#entry {
    background: url("../img/campaign/2021autumn/entry_bg.png") no-repeat center / cover;
    text-align: center;
    color: #fff;
    padding: 5em 0 4em;
}
section#entry h2 {
    margin-bottom: 1.5em;
}
section#entry h2 img {
    width: 65%;
}
section#entry ul.btn__wrap {
    list-style: none;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3em;
}
section#entry ul.btn__wrap li {
    flex-basis: 49%;
}
section#entry p {
    margin-bottom: 2em;
}
section#entry p img {
    width: 80%;
}
section#entry ul.note {
    text-align: left;
}
section#entry p.note {
    margin-top: 4em;
}

/* MORE
------------------------------------------------- */
section#more {
    background: url("../img/campaign/2021autumn/more_bg.jpg") no-repeat center / cover;
    text-align: center;
    padding-bottom: 6em;
}
section#more h3 img {
    width: 50%;
}
section#more div.btn {
    margin: 1.5em auto 0;
}

/* APP
------------------------------------------------- */
section#app {
    padding-bottom: 6em;
}
section#app div.app__wrap {
    display: flex;
    justify-content: space-between;
}
section#app div.app__wrap dl {
    flex-basis: 64%;
}
section#app div.app__wrap dl dt {
    margin-bottom: 2em;
}
section#app div.app__wrap dl dt img {
    width: 95%;
}
section#app div.app__wrap dl dd ul.appbtn {
    list-style: none;
    display: flex;
    justify-content: space-between;
}
section#app div.app__wrap dl dd ul.appbtn li {
    flex-basis: 48%;
}
section#app div.app__wrap figure {
    flex-basis: 28%;
}



/* ==============================================================
 Less than TABLET
================================================================= */
@media screen and (max-width: 1112px) {
    section#head { padding-top:15%; }
    section#head h1 img { width:85%; }
}

/* ==============================================================
 Less than WIDESP-LANDSCAPE : iPhone XS Max/XR/11/11 Pro Max
================================================================= */
@media screen and (max-width: 896px) {
    section#head { background-size:15% auto, 15% auto, 60% auto, cover; }
    section#head h1 img { width:95%; }
    section#entry { padding:4em 0 3em; }
}

/* ==============================================================
 Less than SP-LANDSCAPE
================================================================= */
@media screen and (max-width:568px) {
    section#head { overflow-x:hidden; padding:28% 0 6%; background-size:15% auto, 25% auto, 90% auto, cover; background-position:left bottom 18%, right -14% top -2%, center bottom, center top; }
    section#head h1 img { width:auto; transform:scale(1.05); }
    section#entry { padding:3em 0 2em; }
    section#entry h2 { margin-bottom:1em; }
    section#entry h2 img { width:85%; }
    section#entry ul.btn__wrap { margin-bottom:1em; }
    section#entry p img { width:auto; }
    section#entry p.note { text-align:left; margin-top:2em; }
    section#more { padding-bottom:4em; }
    section#more h3 img { width:80%; }
    section#app { padding-top:3em; }
    section#app div.app__wrap dl dt { margin-bottom:1em; }
    section#app div.app__wrap dl dd ul.appbtn { display:block; }
    section#app div.app__wrap dl dd ul.appbtn li { margin-bottom:0.75em; }
}

/* ==============================================================
 Less than SP-PORTRAIT : iPhone 8/7/6s/6
================================================================= */
@media screen and (max-width:375px) {
}