@charset "UTF-8";
@import url("smoothness/jquery-ui-1.8.4.custom.css"); 
@import url("common.css");

/* =======================================================================
CSSの名前：top.css 
最終更新日時：2019/9/17
======================================================================= */
main > .inner{margin-bottom:40px;}
h1{font-weight: bold; color: #4CA223; font-size: 26px;}

/* information */
.topics-list{margin: 30px auto; background: #FFF; min-width: 920px;}
.topics-list h2{font-size: 26px; color: #3C1A04; font-weight: bold;}
.topics-list dl:first-of-type{margin-top: 25px;}
.topics-list dl+dl{margin-top: 20px;}

/* IE */
@media all and (-ms-high-contrast: none) {
  *::-ms-backdrop, .topics-list .info-link a {
    padding: 3px 0 3px 20px;
  }
  *::-ms-backdrop, .topics-list .info-link a:before {
    top: 15px;
  }
}

/* category */
.top_category{padding-top: 51px;border-top: solid 1px #D0D0D0;}
.top_category h2{font-size: 26px; color: #3C1A04; font-weight: bold; padding-bottom: 25px;}

/* recommend */
.recommend{padding-top: 51px;}
.recommend h2{font-size: 26px; color: #3C1A04; font-weight: bold;}
.recommend ul{display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 38px;}
.recommend .box{width: 218px;}
.recommend .icon-area{margin-bottom: 7px;}
.recommend .img_box{position: relative; width: 218px; height: 218px; border: solid 1px #707070;}
.recommend .img_box a{display: block; width: 100%; height: 100%;}
.recommend .img_box img{width: 100%;}
.recommend h3{height: 56px;}
.recommend_price{font-size: 20px;}


/* カレンダー */
.calendar{margin-top: 51px;}
.calendar .calendar-area{ width:600px; padding: 10px; border: solid 1px #000; margin: 20px auto 0 auto;}
.calendar h2{font-size: 26px; color: #3C1A04; font-weight: bold;}
.calendar .attention{color: #C00; font-size: 15px; margin: 20px auto 0 auto; width: 420px;}

/* バナーエリア */
.banner-area{margin-top: 40px;}
.banner-area ul{font-size: 0; text-align: left;}
.banner-area li{display: inline-block; width: 262px; hanging-punctuation: 280px; vertical-align: top;}
.banner-area li + li{margin-left: 67px;}
.banner-area li:nth-child(n+4){margin-top: 30px;}
.banner-area li:nth-child(3n+1){margin-left: 0;}
.banner-area img{width: 260px; height: 205px; border: 1px solid #cfcfcf; margin-bottom: 6px;}
.banner-area span{ display: inline-block; font-weight: bold; margin-bottom: 4px;}
.banner-area .new{ font-size: 13px; color: red;}
.banner-area .date{ font-size: 13px; color: #333; padding-left:10px;}
.banner-area .tag{ color: #fff; text-align: center; width: 80px; background-color: #4CA223; letter-spacing: 0.8px; margin-right: 5px; font-size: 12px;}
.banner-area .orange{ background-color: #FD8D10;}
.banner-area .txt{ font-size: 15px;}

/* トップページ共通パーツ */
.link-button{margin-top: 30px; text-align: right;}
.link-button a{position: relative; padding: 0 0 0 20px; width: 220px; font-size: 18px; text-align: center;}
.link-button a:hover{text-decoration: none;}
.link-button a:before{content: ""; position: absolute; top: 16px; left: 28px; box-sizing: border-box; width: 8px; height: 8px; border: 4px solid transparent; border-left: 7px solid #FFF;}

/**
　パーツパターン
  h2、ボタン: #4CA223
*/