@charset "utf-8";

body {
    font-family: "YuMincho", "Yu Mincho", serif;
    background-color: #FFE4B5;
    background: -webkit-gradient(linear, left top, right bottom, from(#FFE4B5), to(#FFF));
    background: linear-gradient(to right bottom, #FFE4B5, #FFF);
}

/* ==================================header */
header {
    border-top: 10px solid #511717;
}
header h1 {
    margin: 30px 0 30px;
    text-align: center;
}
#gnav ul {
    padding-left: 0; /* Originally, every list elements have padding-left. So it's reseted by this propaty. Everytime set this propaty below when using list elements. */
    width: 940px;
    margin: 0 auto 30px;
    list-style-type: none;
}
#gnav ul li {
    width: 155px;
    margin-right: 2px;
    float: left; /* When use 'float' propaty, it have to set with 'width' propaty. */
    text-align: center;
}
#gnav ul li:last-child {
    margin-right: 0;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
} /* Clearfix technic is always set these propaties above to parent element that has floated child element. */
#gnav ul li a {
    text-decoration: none;
    background-color: #511717;
    color: #FFF;
    padding: 10px 0;
    display: block;
}
#gnav ul li.current a {
    background-color: #000;
}
/* Keep the order of pseudo-class below for applying all of them. 1.:link 2.:visited 3.:hover 4.:active */
#gnav ul li a:link {}
#gnav ul li a:visited {}
#gnav ul li a:hover {
    color: #000;
    background-color: #FFF;
}
#gnav ul li a:active {}
/* /header */

/* ==================================footer */
footer {
    background-color: #511717;
    color: #FFF;
    padding: 30px 0;
    text-align: center;
}
#subnav ul {
    padding: 0;
    margin-bottom: 30px;
    list-style-type: none;
}
#subnav ul li {
    display: inline;
    margin: 0 1px;
}
#subnav ul li a {
    color: #FFF;
    text-decoration: none;
}
#subnav ul li a:link {}
#subnav ul li a:visited {
    color: #AAA;
}
#subnav ul li a:hover {
    color: #FFF;
}
#subnav ul li a:active {
    text-decoration: underline;
}
/* /footer */

/* ==================================mutal main */
main {
    width: 940px;
    margin: 0 auto;
}
#topic_path {
    padding-left: 0;
    list-style-type: none;
}
#topic_path li {
    display: inline;
    font-size: 0.8rem;
}
#topic_path li:after {
    content: " \003E";
}
#topic_path li:last-child:after {
    content: none;
}
#topic_path li a:link,
#topic_path li a:visited {
    color: #511717
}
main h2 {
    border-left: 10px solid #511717;
    border-bottom: 1px solid #511717;
    padding: 5px 10px;
    margin-bottom: 30px;
    font-size: 1.8rem;
}
main h3 {
    font-size: 1.5rem;
    text-align: center;
    position: relative;
    margin-bottom: 50px;
}
main h3:before,
main h3:after {
    content: "";
    border-top: 1px dotted #511717;
    width: 30%;
    position: absolute;
    top: 50%;
}
main h3:before {
    left: 0;
}
main h3:after {
    right: 0;
}
.page_top {
    text-align: center;
    margin-top: 100px;
}
.page_top a {
    padding-top: 4px;
    border-top: 4px solid #511717;
    color: #511717;
    text-decoration: none;
}
.page_top a:before {
    content: "↑";
}
.page_top a:hover {
    color: #FFF;
}
#lead {
    line-height: 1.8rem;
    margin-bottom: 3rem;
    font-size: 1.1rem;
}
/* /mutal main */

/* ==================================home main */
#main_visual {
    margin-bottom: 30px;
}
#main_content {
    width: 60%;
    float: left;
}
#banner {
    width: 40%;
    float: right;
    text-align: right;
}
main p.clear {
    clear: both;
}
#news dl,
#info dl {
    margin-left: 20px;
    margin-bottom: 30px;
}
#news dl dt,
#news dl dd,
#info dl dt,
#info dl dd {
    line-height: 1.5;
}
#news dl dt,
#info dl dt {
    width: 8rem;
    float: left;
}
#news dl dd,
#info dl dd {
    margin-left: 8rem;
}
#banner ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
#banner ul li {
    margin-bottom: 20px;
}
#banner ul li a img {
    width: 300px; /* This selector and propaty for banner images is necessary to fit within the main element width. */
}
/* /home main */

/* ==================================about main */
#inside .box {
    width: 30%;
    float: left;
    margin-right: 5%; 
}
#inside .box:last-child {
    margin-right: 0;
}
#inside .box p img {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: 5px solid #FFF;
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.22);
}
#inside .box .photo {
    margin-bottom: 30px;
}
#inside .box h4 {
    text-align: center;
}
#inside .box p {
    font-size: 0.9rem;
    line-height: 1.8rem;
}
#inside {
    margin-bottom: 30px;
}
#shop_info table {
    width: 70%;
    border-collapse: collapse;
    margin: 0 auto 30px;
    border: 1px solid #813737;
}
#shop_info table th,
#shop_info table td {
    padding: 10px 20px;
}
#shop_info table th {
    width: 40%;
    border-right: 1px solid #813737;
}
#shop_info table tr:nth-child(odd) {
    background-color: #E1CFBA;
}
#shop_info table tr:nth-child(even) {
    background-color: #FFF;
}
/* /about main */

/* ==================================menu main */
#menu .menu p{
    width: 50%;
    float: left;
}
#menu .menu img {
    width: 400px;
}
#menu .menu table {
    width: 50%;
    float: right;
    border-collapse: collapse;
    margin: 15px auto 30px;
    border: 1px solid #813737;
}
#menu .menu table tr th {
    width: 60%;
    border-right: 1px solid #813737;
    padding: 10px;
    text-align: center;
}
#menu .menu table tr td {
    width: 40%;
    padding: 10px;
}
#menu .menu table tr:nth-child(odd) {
    background-color: #E1CFBA;
}
#menu .menu table tr:nth-child(even) {
    background-color: #FFF;
}
/* /menu main */

/* ==================================coupon main */
#coupon {
    width: 500px;
    margin: 0 auto;
    border: 3px dashed #813737;
    padding: 0 5rem;
    text-align: center;
    background-color: #FFF;
    font-family: sans-serif;
}
#coupon h4 {
    font-size: 2rem;
    line-height: 2.5rem;
    margin: 1rem auto;
}
#coupon_feature{
    background-color: #CCC;
    font-size: 1.2rem;
    padding: 1rem
}
#coupon_feature em {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: bold;
    color: #F00;
}
#coupon_description {
    text-align: left;
    line-height: 1.5rem;
}
#coupon_code {
    background-color: #F00;
    margin: 2rem 0;
    padding: 5px;
}
#coupon_code p {
    margin: 5px;
    border: 1px dashed #FFF;
    color: #FFF;
    font-size: 0.8rem;
    text-shadow: 0 0 3px #000;
    line-height: 3rem;
}
#coupon_frame p em {
    font-size: 1.9rem;
    font-style: normal;
    font-weight: bold;
}
/* /coupon main */

/* ==================================access main */
#address {
    text-align: center;
}
/* /access main */

/* ==================================contact main */
#contact {
    width: 80%;
    margin: 0 auto;
}
#contact dl dt,
#contact dl dd {
    line-height: 2rem;
    margin-left: 0;
    padding: 10px;
}
#contact dl dt {
    width: 250px;
    float: left;
    text-align: right;
}
#contact dl dd {
    width: 450px;
    float: left;
}
#contact dl dd input[type="text"],
#contact dl dd input[type="email"],
#contact dl dd textarea {
    padding: 5px;
    width: 95%;
}
#contact dl dd textarea {
    height: 10rem;
}
#contact p.button {
    text-align: center;
}
#contact p.button input {
    margin: 5px;
    border: 2px solid #FFF;
    padding: 1rem;
    color: #FFF;
    background-color: #511717;
    cursor: pointer;
}
#contact p.button input:hover {
    border: 2px solid #511717;
    color: #511717;
    background-color: #FFF;
}
/* /contact main */

/* ==================================lay-out to width <= 768px */
@media screen and (max-width: 768px){
    img {
        max-width: 100%;
    }
    header,
    main,
    #main_content,
    #banner,
    #inside .box,
    #shop_info table,
    #coupon,
    #gnav ul {
        width: 100%;
    }
    #gnav ul li {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        width: 50%;
        border: 1px solid #FFF;
    }
    main {
        padding: 0 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    main h2 {
        font-size: 1.5rem;
    }
    footer {
        padding-top: 20px;
    }
    #subnav {
        display: none;
    }
/* ==================================responsive design to each pages */
    #banner {
        float: none;
        text-align: center;
    }
    #inside .box {
        float: none;
        margin-right: 5%;
    }
    #inside .box .photo img {
        width: 300px;
    }
    #inside .box .photo {
        text-align: center;
    }
    #menu .menu p{
        width: 100%;
        float: none;
        text-align: center;
    }
    #menu .menu img {
        width: 300px;
    }
    #menu .menu table {
        width: 100%;
        float: none;
    }
    #coupon {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 10px;
    }
    #contact dl dt,
    #contact dl dd {
        width: 100%;
        float: left;
        text-align: left;
    }
}