@charset "UTF-8";

/*** common setting ***/

body,a {
    color: #515151;
}
header {
    background-image: url(../images/mainBg.jpg);
    height: 320px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
header .item {
    background-image: url(../images/itemBg.jpg);
    height: 280px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}
h1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", 
                 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    color: #FFF;
    font-size: 3rem;
    letter-spacing: 0;
    text-shadow: 3px 3px 2px rgba(101,56,23,1.0), -2px -2px 5px rgba(255,255,0,1.0);
    margin-top: 6rem;
}
h2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
                 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 1.5rem;
    letter-spacing: 0rem;
}
a:hover {
    opacity: 0.6;
    color: #800000;
text-decoration: underline;
}
.contentWrapper {
    width: 92%;
    margin: 0 auto;
    text-align: center;
    padding: 1rem 0 0 0;
}

/*** individual setting ***/

/** header **/

header a {
    color: #FFF;
    font-weight: bold;
    text-shadow: 0 0 16px rgba(101,56,23,1);
}
header ul {
    display: flex;
    margin: 0;
    padding: 0 0.5rem;
}
header li {
    padding: 0 15px;
}
header nav {
    position: absolute;
    right: 0;
}

header .contentWrapper {
    padding-top: 40px;
}

header h1 {
    color: #FFF;
    text-shadow: 0px 0px 3px rgba(255,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1)
}
header h2 {
    color: #FFF;
    text-shadow: 0px 0px 3px rgba(255,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1), 0px 0px 10px rgba(0,0,0,1)
}

/** about us **/

#aboutus p {
    padding: 0 1rem;
    font-size: 1.2rem;
    line-height: 2.6rem;
}

/** topics **/

#topics {
    background-image: url(../images/tpBk.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}
#topics figcaption {
    font-size: 1.2rem;
    padding-top: 0.8rem;
}
#topics .flexcontent {
    flex-basis: 30%; 
    flex-grow: 1;
}
#topics .flexcontent p {
    width: 80%;
    margin: 0 auto;
    text-align: left;
    font-size: 0.95rem;
    line-height: 160%;
}
#topics figure img {
    width: 100%; 
}

/** news **/

#news dl {
    width: 90%;
    margin: 0 auto;
}
#news dt,#news dd {
    float: left;
    text-align: left;
    padding: 10px 0;
    line-height: 160%;
}
#news dt {
    width: 10%;
}
#news dd {
    width: 80%;
}
#news img {
    width: 70%;
    margin: 0 auto;
}
/** gallery **/

#gallery {
    background-image: url(../images/glBg.png);
    background-size: cover;
    background-repeat: no-repeat;
}
#gallery p {
    font-size: 1.2rem;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3",
                 "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#gallery img {
    width: 100%;
}

/** shopguide **/
#shopguide .contentWrapper {
    width: 92%;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0 0 0;
}
#shopguide .flexcontent p {
    padding: 1rem;
    text-align: left;
    font-size: 0.95rem;
    line-height: 160%;
}

/** footer **/

#upperFooter {
    margin-top: 0;
    background-color: #dfdfdf;
}
#bottomFooter {
    background-color: #343434;
    text-align: center;
}
#upperFooter li {
    flex-grow: 1;
    flex-basis: auto;
}
footer nav {
    width: 70%;
    margin: 0 auto;
}
footer p,footer h2 {
    margin: 0;
}
small {
    color: #FFF;
    font-weight: bold;
    padding: 20px;
    display: block;
}

/*** adjust parts ***/

.flex {
    display: flex;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

/* ここから上がPC向けCSS */

@media (min-width : 481px) and (max-width:1000px){

    /* この中がタブレット向けCSS */
    h1 {
        font-size: 2.5rem;
        margin-top: 4rem;
    }
    .contentWrapper img {
        width: 90%;
    }
/** topics **/
#topics .contentWrapper {
    width: 100%;
}
/** news **/
#news img {
    width: 90%;
    margin: 0 auto;
}
/** shopguide **/
#shopguide .contentWrapper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 3rem 0 0 0;
}
#shopguide h2 {
    font-size: 1.5rem;
}
#shopguide .flexcontent {
    width: 100%;
    margin: 0 auto;
}
#shopguide figure {
  margin: 1em 0 0 0;
}
#shopguide .flexcontent h2 {
    font-size: 1.2rem;
}
#shopguide img {
    width: 100%;
    margin: 0 auto;
}
}

@media screen and (max-width: 480px) {
    
    /* この中がスマホ向けCSS */

    /*** common setting ***/
    img {
        border: 0;
        max-width: 100%;
        height: auto;
    }
    .contentWrapper {
        width: 100%;
    }
    .contentWrapper img {
        width: 90%;
    }
    h1 {
        font-size: 2.5rem;
        margin-top: 0rem;
    }
    h2 {
        font-size: 1.3rem;
    }
    /*** individual setting ***/
    /** header **/
    header {
        height: 320px;
    }
    header .contentWrapper {
        width: 100%;
        padding-top: 8rem;
    }
    header li {
        padding: 0 1px;
    }
    /** about us **/

    #aboutus p {
        font-size: 1rem;
        line-height: 1.5rem;
    }

    /** topics **/
    #topics .flex {
        display: block;
    }
    #topics .flexcontent p {
        margin: 0 auto 3rem auto;
    }
    #topics figcaption {
        font-size: 1.5rem;
    }
    #topics figure img {
        width: 80%; 
    }

    /** news **/

    #news dl {
        width: 90%;
        margin: 0 auto;
    }
    #news dt {
        width: 90%;
        padding: 10px 0;
    }
    #news dd {
        width: 90%;
        padding-left: 0;
        margin-left: 0;
    }
    #news img {
        width: 100%;
        margin: 0 auto;
    }

    /** gallery **/

   #gallery p {
        font-size: 1rem;
    }

    /** footer **/
    
    #upperFooter .contentWrapper,footer nav {
        width: 100%;
    }
    #upperFooter li {
        flex-grow: 1;
        flex-basis: auto;
        border-bottom: 1px solid #c0c0c0;
        padding: 1rem 0;
    }
    #upperFooter li: first-child {
        border-top: 1px solid #c0c0c0;
    }
    /*** adjust parts ***/
    .flex {
        display: block;
    }

}