/*---------------------
    header
----------------------*/

.menu_icon {
    position: absolute;
    left: 10px;
    top: 9px;
    padding: 0;
}

.sns {
    margin: 0 0 0 30px;
}

/*---------------------
    title
----------------------*/

.title {
    background-image: url(../img/top/top_su-ra-.jpg);
    background-size: 100%;
    width: 100vw;
    height: 125vw;
    background-position: 40vw 75px;
    background-repeat: no-repeat;
    position: relative;
}

.title .sp {
    position: absolute;
    width: 70%;
    top: 50%;
    left: 10px;
    /* -webkit-transform: translateY(-50%); */
    transform: translateY(-50%);
    display: block;
}

.title .pc {
    display: none;
}

.spiceimg {
    padding: 20px 0 20px 0;
}

/*-----------------------
         spice
-----------------------*/

section.spice {
    margin-bottom: 40px;
}

.spice .img-list-pc {
    display: none;
}

.spice-wrap {
    margin: 20px;
}

.spice dt {
    color: #a71f24;
    margin-bottom: 10px;
    line-height: 1;
    letter-spacing: 0.2rem;
    font-size: 1.6rem;
}

.spice .inner-1 span {
    font-size: 1.4rem;
    color: #2c2321;
}

.spice .inner-2 dt span {
    font-size: 1rem;
    color: #2c2321;
    letter-spacing: 0;
}

.spice dd {
    font-size: 1rem;
    line-height: 1.7rem;
    margin-bottom: 15px;
    font-size: 1.4rem;
}

.spice .inner-1 {
    margin-bottom: 20px;
    /* -webkit-box-align: center; */
    /* -ms-flex-align: center; */
    align-items: center;
}

.spice .inner-1, .spice .inner-2 .item {
    /* display: -webkit-box-; */
    /* display: -ms-flexbox; */
    display: flex;
    /* -webkit-box-pack: justify; */
    /* -ms-flex-pack: justify; */
    justify-content: space-between;
}

.spice .inner-1 dl, .spice .inner-2 .item dl, .spice .inner-2 .item p {
    width: 48%;
}

.spice .inner2 .item dl:first-of-type {
    margin-right: 5px;
}

.spice .inner-1 p, .spice .inner-2 .item p {
    margin-left: 5px;
}

/*-----------------------
         info
-----------------------*/

.info {
    width: 90%;
    margin: 10px auto;
}

.info h2 {
    text-align: left;
    color: #fff;
    background-color: #A00003;
    margin-bottom: 25px;
    padding-left: 5px;
    letter-spacing: 0.3rem;
}

.info .img-wrap {
    /* display: -webkit-box; */
    /* display: -ms-flexbox; */
    display: flex;
}

.info .inner {
    margin-right: 10px;
}

.info .description ul:first-of-type {
    margin-right: 10px;
}

.info li:first-of-type {
    font-size: 2rem;
}

.info li {
    font-size: 2.4rem;
}

.info p {
    font-size: 1.2rem;
}

.info p span {
    font-size: 1rem;
}

.info .wrap p {
    padding-bottom: 10px;
}

.info .note {
    text-align: right;
    margin-top: 10px;
}

.info .img-wrap .item {
    margin-right: 10px;
}

.info .img-wrap .item-detail1 {
    padding-bottom: 6px;
}

.info .img-wrap .item-detail2 {
    padding-top: 6px;
}

/*-----------------------
         map
-----------------------*/

.map {
    position: relative;
    padding-bottom: 65%;
    height: 0;
    overflow: hidden;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*-----------------------
         pc
-----------------------*/

@media screen and (min-width:768px) {
    body {
        max-width: 960px;
        margin: 0 auto;
    }
    header .gnav .gnav-logo {
        max-width: 960px;
        margin: 0 auto;
    }
    main {
        font-size: 1.8rem;
        margin: 0 auto;
    }
    .title {
        background-image: url(../img/top/top_su-ra-.jpg);
        max-width: 960px;
        margin: 0 auto;
        background-size: 700px;
        width: 100vw;
        height: 55vw;
        background-position: 50vw -85px;
        background-repeat: no-repeat;
        position: relative;
    }
    .title .pc {
        display: block;
        position: absolute;
        width: 450px;
        top: 50%;
        left: 20px;
        /* -webkit-transform: translateY(-50%); */
        transform: translateY(-50%);
    }
    .title .sp {
        display: none;
    }
    .text {
        font-size: 1.8rem;
        margin: 60px 150px;
    }
    /*---------------------
       gnav-
   ----------------------*/
    header.fixed {
        position: fixed;
        width: 100%;
        height: auto;
        top: 0;
        left: 50%;
        z-index: 999;
        /* -webkit-transform: translateX(-50%); */
        transform: translateX(-50%);
        background-color: #fff;
        /* -ms-flex-pack: distribute; */
        justify-content: space-around;
        /* -webkit-transition: none; */
        transition: none;
    }
    header {
        display: none;
        position: static;
        border-top: none;
    }
    .gnav {
        top: 456px;
    }
    .gnav-list {
        visibility: visible;
        position: static;
    }
    .top-img {
        position: relative;
    }
    .top-img::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 25px;
        background-color: #a00003;
    }
    .sns {
        margin: 0;
        width: 20%;
    }
    /*---------------------
           spice
    ----------------------*/
    .spice {
        padding-top: 100px;
    }
    .spice .img-list-sp {
        display: none;
    }
    .spice .spice-wrap {
        margin: 60px 70px;
    }
    .spice .img-list-pc {
        display: block;
        width: 100%;
    }
    .spice .spice-wrap .inner-1 dl {
        width: 80%;
    }
    .spice .inner-1 {
        /* -webkit-box-align: center; */
        /* -ms-flex-align: center; */
        align-items: center;
    }
    .spice dt {
        font-size: 3rem;
        line-height: 2;
        letter-spacing: 0.4rem;
    }
    .spice dd {
        margin-bottom: 30px;
    }
    .spice dd, .spice span {
        font-size: 2rem;
        line-height: 1.7;
        color: #2c2321;
    }
    .spice .inner-1 span {
        font-size: 1.8rem;
        color: #2c2321;
    }
    section .spice .spice-wrap {
        margin: 150px 120px;
    }
    .spice .spice-wrap .inner-2 .item .br-sp {
        display: none;
    }
    .spice .spice-wrap .inner-2 .item .br-pc {
        display: block;
        font-size: 1.8rem;
        color: #2c2321;
    }
    .spice .spice-wrap .inner-2 dt span {
        font-size: 1.8rem;
        color: #2c2321;
    }
    .spice .inner-1 p img {
        text-align: right;
    }
    .spice .inner-2 .item p {
        position: relative;
        width: auto;
    }
    .spice .inner-1 dl {
        margin-right: 10px;
    }
    /*---------------------
            info
    ----------------------*/
    section.info {
        font-size: 1vw;
    }
    .info h2 {
        font-size: 2.4rem;
        letter-spacing: 0.6rem;
        padding-left: 10px;
    }
    .info .wrap {
        margin: 60px 40px;
    }
    .info .inner {
        margin-right: 0;
    }
    .info li {
        font-size: 4.5rem;
        line-height: 1;
    }
    .info .description li:first-of-type {
        font-size: 3.5rem;
        line-height: 1;
    }
    .info .inner2 li:first-of-type {
        font-size: 3rem;
    }
    .info .inner2 li:last-of-type {
        font-size: 4.2rem;
        /* line-height: 1; */
        margin-top: 5px;
    }
    .info .inner {
        /* display: -webkit-box; */
        /* display: -ms-flexbox; */
        display: flex;
    }
    .info .wrap .inner2 li {
        font-family:
        /* -apple-system, */
        blinkMacSystemFont,
        "Helvetica Neue",
        "Segoe UI",
        "游ゴシック体",
        YuGothic,
        "游ゴシック Medium",
        "Yu Gothic Medium",
        sans-serif;
    }
    .info p {
        font-size: 1.5rem;
    }
    .info .description dl:first-of-type {
        margin-right: 10px;
    }
    .info .description {
        margin-right: 60px;
    }
    .info .wrap .inner2 {
        vertical-align: top;
    }
    .info .wrap .inner2 p {
        margin-top: 10px;
    }
    .info .wrap p {
        padding-bottom: 0;
        margin-top: 3px;
    }
    .info .img-wrap {
        position: relative;
        /* -webkit-box-pack: center; */
        /* -ms-flex-pack: center; */
        justify-content: center;
        margin-top: 20px;
    }
    .info .item img {
        margin: 0 0 10px 0;
    }
    .info .item-detail1, .info .item-detail2 {
        margin: 0 10px 0 20px;
    }
    .info .item-detail1 {
        margin-bottom: 20px;
    }
    .info .note {
        margin: 20px 17px 100px 160px;
        text-align: right;
        font-size: 1.5rem;
    }
    /*---------------------
            map
    ----------------------*/
    .map {
        padding-bottom: 45%;
    }
}

@media screen and (min-width:768px) and (max-width:960px) {
    .info li {
        font-size: 3.5rem;
    }
    .info .description li:first-of-type {
        font-size: 3.5rem;
        line-height: 1;
    }
    .info .inner2 li:first-of-type {
        font-size: 2.8rem;
    }
    .info .inner2 li:last-of-type {
        font-size: 3.8rem;
        line-height: 1;
    }
    .info p {
        font-size: 1.4rem;
    }
}

/*---------------------
            map
    ----------------------*/

@media all and (-ms-high-contrast:none) {
    .info h2 {
        padding-top: 6px;
    }
    .info li {
        font-size: 4rem;
    }
    .info .wrap .inner2 p {
        margin-top: 5px;
    }
}

@media screen and (min-width:960px) {
    .title {
        background-position: 495px center;
        height: 455px;
    }
    section.info {
        font-size: 62.5%;
    }
}