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

#contentWrap {
    color: #333;
}

html {
}


/*    ▼トップ　大窓
====================================*/
.main {
    width: 100%;
    background: url(/img/top/mainarea_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center top;
    position: relative;
    padding: 110px 0 140px;
    overflow:hidden;
}
.main-img {
    position: relative;
    width: 100%;
    z-index: 5;
    padding: 0;
}

.main .maku {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
.main .chara {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0px auto;
    width: 550px;
    max-width: 90%;
    z-index: 1;
}
.maru {
    width: 35px;
    margin: 5px 15px 0 10px;
}


.contents_area {
    width: 100%;
    padding: 50px 0 100px;
    background: #fff7d3;
    position: relative;
}
.contents_area .maku {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
}

.news_area {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto 80px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.news_area .news ,
.news_area .sns {
    width: 48%;
    background: #fff;
    border-radius: 20px;
    padding: 30px 0 ;
}
.news_area h2.box_ttl {
    width: 90%;
    margin: 0 auto;
    color: #e60012;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding: 0px 0 20px;
    background: url(/img/common/loop_lamen.jpg) repeat-x;
    background-size: 22px;
    background-position: center bottom;
    position: relative;
}
.news_area h2.box_ttl .ic_tw {
    position: absolute;
    width: 30px;
    right: 90px;
    top: -3px;
    transition: 0.3s;
}
.news_area h2.box_ttl .ic_fc {
    position: absolute;
    width: 30px;
    right: 44px;
    top: -3px;
    transition: 0.3s;
}
.news_area h2.box_ttl .ic_line {
    position: absolute;
    width: 30px;
    right: 0;
    top: -3px;
    transition: 0.3s;
}
.news_area h2.box_ttl .ic_tw:hover ,
.news_area h2.box_ttl .ic_fc:hover ,
.news_area h2.box_ttl .ic_line:hover { opacity: 0.7;}
.news_area .news_wrap {
    width: 90%;
    height: 300px;
    margin: 20px auto 0;
    overflow-y: scroll;
}
.news_area .news_wrap article {
    width: 100%;
    margin-bottom: 20px;
}
.news_area .news_wrap article a ,
.news_area .news_wrap article {
    width: 100%;
    max-height: 100px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-start;
}
.news_area .news_wrap article img {
    max-width: 100px;
    max-height: inherit;
    margin: auto;
    /*width: 20%;*/
}
.news_area .news_wrap article div {
    width: 75%;
}
.news_area .news_wrap article div .date {
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 5px;
}
.news_area .news_wrap article div .date span {
     color: #fff;
    padding: 3px 20px 4px;
    font-size: 12px;
    margin-left: 10px;
}
.news_area .news_wrap article div .date .company { background: #7cc8d3;}
.news_area .news_wrap article div .date .campaign { background: #ff659b;}
.news_area .news_wrap article div .date .ir { background: #58ce81;}
.news_area .news_wrap article div .date .products { background: #e88512;}

.news_area .news_wrap article a div .text {
    color: #e60012;
    text-decoration: underline;
    line-height: 1.5;
    transition: 0.3s;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.news_area .news_wrap article a:hover div .text {
    text-decoration: none;
}
.news_area .news_wrap article a img {
    transition: 0.3s;
}
.news_area .news_wrap article a:hover img {
    opacity: 0.7;
}
.news_area .news_wrap article div .text {
    color: #e60012;
    line-height: 1.5;
}

.news_area .sns_wrap {
    width: 90%;
    margin: 20px auto 0;
    height: 300px;
    overflow-y: scroll;
}

.good_marutai {
    width: 1200px;
    max-width: 90%;
    margin: 0 auto;
    padding: 0px 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.good_marutai {
    width: 1200px;
    max-width: 90%;
    background-size: contain;
    margin: 0 auto;
    background-size: contain;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: center top, center bottom, center top;
  background-image:
    url(/img/top/good_marutai_bg_top.png),
    url(/img/top/good_marutai_bg_bottom.png),
    url(/img/top/good_marutai_bg_naka.png);
}
.inner_Box {
    width: 90%;
    margin: 70px auto;
}


.good_marutai .ttl {
    width: 511px;
    max-width: 100%;
    margin: 0 auto;
    padding: 30px 0 50px;
}
.good_marutai ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 96%;
    margin: 0 auto;
}
.good_marutai ul li {
    position: relative;
    margin-bottom: 40px;
    box-shadow: 6px  6px 0 #e8a72b;
    border-radius: 10px;
    display: block;
    cursor: pointer;
    transition: 0.3s;
}
.good_marutai ul li:hover {
    box-shadow: 3px  3px 0 #e8a72b;
    transform: translate(3px,3px);
}
.good_marutai ul li.online_shop:hover {
    transform: translate(0px,0px);
}
.good_marutai ul li.flex1-1 {
    width: 100%;
}
.good_marutai ul li.flex3-1 {
    width: 31%;
}
.good_marutai ul li.flex2-1 {
    width: 48%;
    background: #fff;
    text-align: center;
    padding: 30px 0;
}
.good_marutai ul li.flex2-1 img {
    width: 170px;
    text-align: center;
    margin: 0 auto;
}
.good_marutai ul li .lamen {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 50px;
    transition: 0.3s;
}
.good_marutai ul li .ico-svg #hashi {
    transition: 0.3s;
    transform: translateY(0px);
}
.good_marutai ul li:hover .ico-svg #hashi {
    transition: 0.3s;
    transform: translateY(-90px);
}
.good_marutai ul li.online_shop {
    width: 100%;
    background: #fff;
    padding: 30px 30px;
    display: flex;
    justify-content: space-between;
    flex-wrap:wrap;
    align-items: center;
    cursor: auto;
}
.good_marutai ul li.online_shop .ttl {
    width: 402px;
    max-width: 100%;
    margin-left: 0;
    padding: 0;
}
.good_marutai ul li.online_shop .btns {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.good_marutai ul li.online_shop .btns a {
    background: #d7212f;
    display: block;
    padding: 15px 30px;
    border-radius: 30px;
    margin-left: 20px;
    color: #fff;
}
.good_marutai ul li.online_shop .btns a:hover {
    background: #eb6808;
}


@media only screen and (max-width : 980px) {

    .main {
        padding: 100px 0 20%;
        background-position: left top;
    }

    .contents_area {
        padding: 30px 0 50px;
    }

    .news_area {
    }
    .news_area p {
        width: 100%;
    }
    .news_area p:first-child {
        margin-bottom: 30px;
    }

    .news_area .news {
        margin-bottom: 30px;
    }
    .news_area .news_wrap ,
    .news_area .sns_wrap {
        height: 200px;
    }
    .news_area .news, .news_area .sns {
        width: 100%;
    }
    .news_area .news_wrap article a div .text ,
    .news_area .news_wrap article div .text {
        font-size: 13px;
    }
    .news_area h2.box_ttl {
        text-align: left;
        font-size: 20px;
    }
    .news_area h2.box_ttl .ic_tw {
        width: 25px;
        right: 65px;
    }
    .news_area h2.box_ttl .ic_fc {
        width: 25px;
        right: 33px;
    }
    .news_area h2.box_ttl .ic_line {
        width: 25px;
    }




.good_marutai {
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: center top, center bottom, center top;
  background-image:
    url(/img/top/good_marutai_bg_top_sp.png),
    url(/img/top/good_marutai_bg_bottom_sp.png),
    url(/img/top/good_marutai_bg_naka_sp.png);
    background-size: contain;
}
.inner_Box {
    width: 90%;
    margin: 30px auto 50px;
}
    .good_marutai .ttl {
        padding: 0px 0 20px;
        max-width: 60%;
    }
    .good_marutai ul {
        width: 100%;
    }
    .good_marutai ul li.flex1-1 {
        width: 100%;
        margin-bottom: 20px;
    }
    .good_marutai ul li.flex3-1 {
        width: 48%;
        margin-bottom: 20px;
    }
    .good_marutai ul li .lamen {
        width: 20px;
        right: 5px;
        bottom: 5px;
    }
    .good_marutai ul li.flex2-1 {
        width: 100%;
        padding: 15px 0;
        margin-bottom: 15px;
    }
    .good_marutai ul li.flex2-1 img {
        width: 100px;
    }

    .good_marutai ul li.online_shop {
        padding: 20px 0;
        margin-bottom: 20px;
    }
    .good_marutai ul li.online_shop .ttl {
        max-width: 70%;
        width: 200px;
        margin: 0 auto 15px;
    }
    .good_marutai ul li.online_shop .btns {
        margin: 0 auto;
        line-height: 1.5;
        width: 93%;
        justify-content: space-between;
    }
    .good_marutai ul li.online_shop .btns a {
        width: 48%;
        text-align: center;
        padding: 5px 0px;
        margin: 0 auto;
        font-size: 12px;
    }
    .good_marutai ul li.online_shop .btns a:last-child {
        margin-bottom: 0;
    }

    .good_marutai::before {
        background-size: 40px;
    background-position: left top , right top;
    background-repeat: no-repeat;
        height: 750px;
    }


}




/*        タブレット縦のみ
=========================================*/
@media screen and (min-width: 641px) and (max-width: 1024px) {


}





@media only screen and (max-width : 640px) {
　/*  ↓↓ 追加↓↓  */
    .news_area .news_wrap article a ,
    .news_area .news_wrap article {
        max-height: initial;
    }
    .news_area .news_wrap article img {
        max-width: 100px;
        width: 20%;
    }
　/*  ↑↑ 追加↑↑  */
}