@charset "UTF-8";
/* CSS Document */

body#page-body {
    background: url("../img/bg.jpg") no-repeat;
    background-size: contain;
}

.kodawari-content figure img{
    width: 100%;
    height: 400px;
    object-fit: cover;
}
.kodawari-content h3 {
    text-align: center;
    /*color: #D6551B;*/
    color: #00376e;
    font-size: 180%;
    margin: 1em 0.5em;
    line-height: 1.4em;
}
.kodawari-content p {
    margin: 2em;
    line-height: 1.8em;
    font-weight: 600;
    font-size: 120%;
}

.kodawari-detail {
    background: url("../img/bg_kodawari01.png") repeat;
    padding: 3em 0 200px;
    margin-bottom: -5em;
}

.kodawari-detail ul {
    display: flex;
    padding: 5%;
    align-items: center;
    justify-content: space-around;
}
.kodawari-detail .sp-img {
      display: none;
}
.kodawari-detail .imgL {
    /*padding: 4em 0 2em 2em;*/
}
.kodawari-detail .imgR {
    /*padding: 4em 2em 2em 0;*/
}
.kodawari-detail #rice {
    background: url("../img/bg_kodawari02.png") no-repeat center right 5%;
    background-size: auto 100%;
}
.kodawari-detail #guzai {
    background: url("../img/bg_kodawari02.png") no-repeat center left 5%;
    background-size: auto 100%;
}

.kodawari-detail .textR {
    /*background: url("../img/bg_kodawari02.png") no-repeat;
    background-position: top -30px right -30px;
    background-size: 105% auto;*/
    /*padding: 3em 3em 4em 5em;*/
    padding: 1.5em;
    width: 55%;
}
.kodawari-detail .textL {
    /*background: url("../img/bg_kodawari02.png") no-repeat;
    background-position: top -30px left -30px;
    background-size: 105% auto;*/
    /*padding: 5em;*/
    padding: 1.5em;
    width: 55%;
}
.kodawari-detail p {
    font-weight: 600;
    line-height: 2em;
    margin-top: 1em;
    letter-spacing: 0.1em;
    font-size: 120%;
}
.kodawari-detail h4 {
    /*color: #D6551B;*/
    color: #00376e;
    font-size: 200%;
    background: url("../img/bg_h4.png") no-repeat bottom;
    padding-bottom: 1em;
    line-height: 1.4em;
    letter-spacing: 0.05em;
}

@media screen and (min-width: 1400px) {
    .kodawari-detail .textR {
        width: 50%;
    }
    .kodawari-detail .textL {
        width: 50%;
        padding: 5%;
    }
}

@media screen and (max-width: 1150px) {
    .kodawari-detail .textR,
    .kodawari-detail .textL {
        width: 70%;
    }
    .kodawari-detail p {
        line-height: 1.75em;
    }
    .kodawari-detail h4 {
        font-size: 175%;
    }
}

@media screen and (max-width: 950px) {
     /*.kodawari-detail {
         padding-bottom: 100px;
     }*/
     
     .kodawari-detail #rice,
     .kodawari-detail #guzai{
         background-position: center bottom;
         background-size: 95% auto;
         padding-bottom: 100px;
     }
     
    .kodawari-detail ul {
        display: block;
    }
     .kodawari-detail .imgR {
          display: none;
     }
    .kodawari-detail .imgL {
        width: 100%;
        text-align: center;
        padding: 2em 3em 0;
    }
     .kodawari-detail .sp-img {
        display: block;
        text-align: center;
        padding:  2em 3em 0;
     }
    
    .kodawari-detail .textR,
    .kodawari-detail .textL {
        width: 100%;
        padding: 1em 2em;
    }
    .kodawari-detail h4 {
        font-size: 150%;
        background-position: left bottom;
    }
}

@media screen and (max-width: 780px) {
    .kodawari-content figure img{
        height: 230px;
    }
}

@media screen and (max-width: 580px) {
    .kodawari-detail #rice,
    .kodawari-detail #guzai{
        background: none;
        padding-bottom: 0;
    }
    
    .kodawari-detail .textR,
    .kodawari-detail .textL {
        padding: 1em 0.5em;
    }
}

/*.detail-textR {
    background: url("../img/bg_kodawari02.png") no-repeat;
    background-size: auto 100%;
    background-position: top 0 right -30px;
    width: 65%;
    float: right;
    padding: 50px 50px 50px 100px;
    box-sizing: border-box;
    position: relative;
}
.detail-textR:before {
    content: "";
    background: url("../img/img_kodawari01.png") no-repeat center;
    background-size: contain;
    display: inline-block;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
}*/