/**
 * Theme Name: Maruyochaya
 * Theme URI: none
 * Description: LOKAL Japan
 * Version: 0.0.0
 * Author: LOKAL JAPAN
 * Author URI: http://lokal.co.jp/
 *
 */

@charset "utf-8";

/**
 * ========================================
 * // common
 * ========================================
 */

body {
  font-family: "Noto Sans JP", "Yu Gothic", "メイリオ", Meiryo,
    "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  font-weight    : 400;
  line-height    : 1.5;
  text-decoration: none;
  word-break     : break-all;
  color          : #2e2624;
}

#wrap {
  width     : 100%;
  position  : relative;
  height    : auto !important;
  /*IE6対策*/
  height    : 00%;
  /*IE6対策*/
  min-height: 100%;
}

.pc {
  display: block;
}

.sp {
  display: none;
}

/* -- >>> styles for wide layout ----- */
@media screen and (max-width: 600px) {
  .pc {
    display: none;
  }

  .sp {
    display: block;
  }
}

ul {
  list-style: none;
}

/**
 * ========================================
 * // table
 * ========================================
 */
table {
  border-collapse: collapse;
  width          : 100%;
  margin-bottom  : 30px;
}

table tr {
  border-bottom: dashed 1px #d3c4b0;
  text-align   : left;
}

table tr:first-child {
  border-top: dashed 1px #d3c4b0;
}

table th,
td {
  padding: 15px 10px;
}

table th {
  color: #996c4d;
  width: 30%;
}

table td {
  color: #000;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  table {
    border: none;
    width : 100%;
  }

  table thead {
    display: none;
  }

  table tr {
    display: block;
    padding: 7px 0;
  }

  table th,
  table td {
    width    : 100%;
    font-size: 0.8rem;
  }

  table th {
    padding: 5px 0 5px 0;
  }

  table td {
    display: block;
    padding: 0;
  }
}

/* -- >>> styles for narrow layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  table th,
  td {
    font-size: 0.9rem;
  }

  table th {
    color: #996c4d;
    width: 40%;
  }
}


/**
 * ========================================
 * // Link
 * ========================================
 */
a {
  text-decoration: none;
  color          : #000;
}

a:link {}

a:hover {
  opacity: 0.5;
}

a:visited {}

a:active {}


/**
 * ========================================
 * // header
 * ========================================
 */
header {
  /*min-width: 1000px;*/
  width : 100%;
  margin: 0 auto;
}

header .inner {
  position: relative;
}

.logo {
  width : 40%;
  margin: 7px 0 5px 0;
}

.contact {
  width     : 40%;
  margin-top: 30px;
}

.top-img {
  height         : 730px;
  background-size: cover;
}

.top-img .bn {
  margin-top: 220px;
  width     : 200px;
}

.top-img .lead {
  text-align: right;
}

.lead {
  padding: 90px 5% 0 5%;
}

.lead img {
  /* width: 100px;  */
}

@media screen and (max-width: 599px) {
  .logo {
    margin: 4px 0 0 0;
    float : left;
    width : 60px;
  }

  .contact {
    float     : right;
    width     : 240px;
    margin-top: 10px;
  }

  .top-img {
    background-size: cover;
    height         : 550px;
  }

  .top-img .lead {
    text-align: left;
  }

  .lead {
    padding: 30px 7% 0 7%;
  }

  .lead img {
    width: 80px;
  }

  .lead img.twocol {
    width: 60px;
  }

  .bn {
    margin: 10px;
  }
}


/**
 * ========================================
 * // content common
 * ========================================
 */

#content {
  width         : 100%;
  margin        : 0 auto;
  padding-bottom: 50px;
}

h2 {
  font-size     : 19px;
  font-weight   : 600;
  letter-spacing: 2px;
  margin-bottom : 15px;
  color         : #7FCC99;
}

h3 {
  background    : #7FCC99;
  color         : #fff;
  font-size     : 17px;
  letter-spacing: 2px;
  padding       : 7px 0 7px 20px;
  margin-bottom : 20px;
}

h4 {
  color    : #7FCC99;
  margin   : 20px 0;
  font-size: 16px;
}

section {
  padding: 30px 0;
}

section p {
  font-size: 1.0rem;
}

section img {
  text-align: center;
}

.mg50 {
  margin-top: -50px;
}

.mg100 {
  margin-top: -100px;
}

.mg200 {
  margin-top: -200px;
}

.ep_box {
  width     : 48%;
  background: rgba(255, 255, 255, 0.8);
  padding   : 30px;
  margin    : 20px 0;
}

#main .col2_5 {
  width        : 20%;
  border-top   : solid 1px #000;
  border-bottom: solid 1px #000;
  border-left  : solid 1px #000;
  text-align   : center;
  padding      : 30px 10px 230px 10px;
}

#main .col2_5 p {
  font-size: 0.9rem;
}

#main .col2_5:nth-child(1) {
  background: url("../img/shincha/p_yukari.png?2") no-repeat right bottom;
}

#main .col2_5:nth-child(2) {
  background: url("../img/shincha/p_ai.png?2") no-repeat right bottom;
}

#main .col2_5:nth-child(3) {
  background: url("../img/shincha/p_sora.png?2") no-repeat right bottom;
}

#main .col2_5:nth-child(4) {
  background: url("../img/shincha/p_akane.png?2") no-repeat right bottom;
}

#main .col2_5:nth-child(5) {
  background: url("../img/shincha/p_ran.png?2") no-repeat right bottom;
}

#main .col2_5.last {
  border-right: solid 1px #000;
}

#main .col2_5 .h200 {
  min-height: 200px;
}

#main .level {
  min-height: 130px;
}

#main .level dl {
  font-size : 0.7rem;
  text-align: left;
}

#main .level dd {
  margin : -1.5em 0 4px 0;
  padding: 0 0 4px 60px;
}

#main .level dd.lv1 {
  background: url("../img/shincha/lv_1.png") no-repeat left 60px center;
  height    : 20px;
}

#main .level dd.lv2 {
  background: url("../img/shincha/lv_2.png") no-repeat left 60px center;
  height    : 20px;
}

#main .level dd.lv3 {
  background: url("../img/shincha/lv_3.png") no-repeat left 60px center;
  height    : 20px;
}

#main .level dd.lv4 {
  background: url("../img/shincha/lv_4.png") no-repeat left 60px center;
  height    : 20px;
}

#main .level dd.lv5 {
  background: url("../img/shincha/lv_5.png") no-repeat left 60px center;
  height    : 20px;
}

/* -- >>> styles for small layout ----- */
@media screen and (max-width: 599px) {
  #content {
    padding-bottom: 0;
  }

  h3 {
    margin: 30px 0 20px 0;
  }

  h2 {
    font-size     : 16px;
    letter-spacing: 1px;
    margin-bottom : 30px;
  }

  section {
    padding: 20px 0;
  }

  section p {
    font-size  : 0.9rem;
    line-height: 1.5em;
  }

  .ep_box {
    width     : 98%;
    padding   : 30px;
    text-align: left;
  }

  #main .col2_5 {
    display      : block;
    width        : 100%;
    border-top   : solid 1px #000;
    border-bottom: none;
    border-right : solid 1px #000;
    border-left  : solid 1px #000;
    text-align   : center;
    padding      : 20px 10px;
  }

  #main .col2_5 .product .p_txt {
    width         : 100%;
    text-align    : left;
    vertical-align: bottom;
  }

  #main .col2_5 p {
    font-size: 0.9rem;
  }

  #main .col2_5:nth-child(5) {
    border-bottom: solid 1px #000;
  }

  #main .col2_5 .h200 {
    min-height: 10px;
  }

  #main .level {
    min-height: 10px;
  }

  #main .level dl {
    font-size: 0.9rem;
  }

  #main .level dd {
    padding: 0 0 4px 80px;
  }

  #main .level dd.lv1 {
    background: url("../img/shincha/lv_1.png") no-repeat left 80px center;
    height    : 20px;
  }

  #main .level dd.lv2 {
    background: url("../img/shincha/lv_2.png") no-repeat left 80px center;
    height    : 20px;
  }

  #main .level dd.lv3 {
    background: url("../img/shincha/lv_3.png") no-repeat left 80px center;
    height    : 20px;
  }

  #main .level dd.lv4 {
    background: url("../img/shincha/lv_4.png") no-repeat left 80px center;
    height    : 20px;
  }

  #main .level dd.lv5 {
    background: url("../img/shincha/lv_5.png") no-repeat left 80px center;
    height    : 20px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  section {
    padding: 20px 0;
    margin : 0 auto:;
  }

  section p {
    font-size  : 1rem;
    line-height: 1.5em;
  }

  .ep_box {
    width     : 98%;
    padding   : 30px;
    text-align: left;
  }

  #main .col2_5 .h200 {
    min-height: 280px;
  }

  #main .col2_5 .product li {
    width     : 48%;
    margin    : 5px 0 5px 10px;
    padding   : 20px 15px 10px 0;
    text-align: center;
  }

  #main .col2_5 .product li:nth-child(odd) {
    margin-left: 0;
  }

  #main .col2_5 .product .p_img {
    width: 46%;
  }

  #main .col2_5 .product .p_txt {
    width         : 100%;
    text-align    : left;
    min-height    : 230px;
    vertical-align: bottom;
  }

  #main .col2_5 .product .p_txt li {
    width     : 100%;
    margin    : 0 0 12px 0;
    padding   : 0;
    text-align: left;
  }

  #main .col2_5 .product .p_txt .name {
    font-size: 16px;
  }

  #main .col2_5 .product .p_txt .order_btn a {
    padding  : 10px 6px;
    font-size: 12px;
  }

}



/**
 * ========================================
 * // product
 * ========================================
 */
.product {
  text-align: center;
}

.product li {
  display       : inline-block;
  vertical-align: top;
  width         : 32%;
  margin        : 10px 0 0 1.5%;
  padding       : 20px;
  background    : #fff;
  font-size     : 14px;
}

.col2_5 .product li {
  background: none;
}

.product li:nth-child(1),
.product li:nth-child(4) {
  margin-left: 0;
}

.product .p_txt {}

.product .p_txt li {
  width  : 100%;
  padding: 0;
  margin : 0 0 3px 0;
}

.product .p_txt .option {
  margin: 10px 0 4px 0;
}

.product .p_txt .option li {
  margin: 0 0 6px 0;
}

.col2_5 .product .p_txt .option li {
  margin: 0 0 12px 0;
}

.product .p_txt .option .obi {
  padding  : 3px 22px 3px 15px;
  color    : #fff;
  font-size: 14px;
}

.product .p_txt .option .obi {
  background     : url("../img/bg_obi.png") no-repeat center center;
  background-size: contain;
}

.product .p_txt .option .date {
  background: linear-gradient(transparent 50%, #fffac6 0%);
  font-size : 16px;
  padding   : 3px 15px;
}

.product .p_txt .option .date {
  color: #6a3906;
}

.product .p_txt .name {
  font-size  : 16px;
  font-weight: 600;
}

.product .p_txt .price {
  margin-left: 10px;
  font-size  : 19px;
  color      : #EA6061;
  font-weight: 600;
}

.product .p_txt .tax {
  font-size: 10px;
  color    : #EA6061;
}

.product .p_txt .order_btn a {
  display       : block;
  background    : #7FCC99;
  margin-top    : 8px;
  padding       : 10px;
  border-radius : 10px;
  text-align    : center;
  color         : #fff;
  font-size     : 16px;
  letter-spacing: 2px;
  font-weight   : 600;
}


/* -- >>> styles for small layout ----- */
@media screen and (max-width: 599px) {

  .product li {
    display   : block;
    width     : 100%;
    margin    : 15px 0;
    padding   : 15px 7px 7px 7px;
    font-size : 13px;
    text-align: left;
  }

  .product .p_img {
    float: left;
    width: 48%;
  }

  .product .p_txt {
    float: right;
    width: 50%;
  }

  .product .p_txt .option {
    margin: 0 0 10px 0;
  }

  .product .p_txt .option li {
    margin: 0 0 10px 0;
  }

  .product .p_txt .option .obi {
    font-size: 11px;
    padding  : 3px 10px 3px 8px;
  }

  .product .p_txt .option .date {
    font-size: 12px;
    padding  : 3px 5px;
  }

  .product .p_txt .name {
    padding  : 0;
    font-size: 14px;
  }

  .product .p_txt .price {
    font-size: 14px;
  }

  .product .p_txt .order_btn a {
    font-size: 13px;
    padding  : 7px 10px;
  }

}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  .product li {
    width  : 100%;
    margin : 10px 0;
    padding: 25px;
  }

  .product .p_img {
    float: left;
    width: 50%;
  }

  .product .p_txt {
    float     : right;
    width     : 45%;
    text-align: left;
  }

  .product .p_txt .option .date {
    font-size: 17px;
    padding  : 3px 12px;
  }

  .product .p_txt .price {
    font-size: 17px;
  }

  .product .p_txt .order_btn a {
    font-size: 15px;
    padding  : 10px 50px;
  }

}


/**
 * ========================================
 * // main
 * ========================================
 */
#main {
  background: url("../img/kakigori/bg_ice.png") repeat center center;
}

#main .topic_txt {
  text-align    : center;
  margin-bottom : 20px;
  font-size     : 16px;
  line-height   : 1.8em;
  letter-spacing: 1px;
}

#main .bg_main02,
#main .bg_main03 {
  background-size: cover;
  height         : 480px;
}

#main .bg {
  background: url("../img/bg.jpg") repeat center center;
}

#main .recipe .imgL {
  width        : 54%;
  margin-bottom: 20px;
}

#main .recipe .imgR {
  width        : 44%;
  margin-bottom: 20px;
}

#main .recipe_copy {
  color         : #7FCC99;
  margin-bottom : 12px;
  letter-spacing: 0.05em;
}

#main .recipe_name {
  color         : #563330;
  font-size     : 24px;
  letter-spacing: 0.05em;
  margin-bottom : 20px;
  font-weight   : bold;
}

#main .recipe .topic_txt {
  text-align: left;
}

#main .recipe_ttl {
  color         : #563330;
  text-align    : left;
  border-bottom : dashed 1px #563330;
  padding-bottom: 4px;
  margin-bottom : 4px;
}

#main #attention p {
  line-height: 1.8rem;
}

#main .flow {
  padding   : 20px 0 0 0;
  text-align: center;
}

#main .flow li {
  display    : inline-block;
  width      : 28%;
  margin-left: 3%;
  padding    : 0 25px 25px 25px;
  position   : relative;
}

#main .flow li:nth-child(1) {
  margin-left: 0;
}

#main .flow li:before {
  content        : '';
  display        : inline-block;
  width          : 21px;
  height         : 72px;
  background     : url("../img/flow_yajirushi_pc.png") no-repeat center center;
  background-size: contain;
  position       : absolute;
  top            : 130px;
  left           : -30px;
}

#main .flow li:nth-child(1):before {
  display: none;
}

#main .flow .flow_top {
  background    : rgba(134, 98, 57, 0.3);
  font-size     : 18px;
  font-weight   : 600;
  letter-spacing: 2px;
  padding       : 10px;
  margin-bottom : 10px;
}

#main .flow .flow_bottom {
  border : solid 2px rgba(134, 98, 57, 0.3);
  padding: 10px;
}

#main .flow .flow_bottom img {
  padding      : 20px 0;
  margin-bottom: 10px;
}

#main .flow .flow_bottom p {
  border-top: dashed 2px rgba(134, 98, 57, 0.3);
  padding   : 15px 0 0 20px;
  text-align: left;
  font-size : 15px;
}

.txt_box {
  padding      : 0 20px;
  margin-bottom: 30px;
}

.txt_box p {
  font-size: 15px;
}

#main .toiawase {
  margin-bottom: 10px;
}

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

  #main br,
  #sub br {
    display: none;
  }

  #main .bg_main01 {
    height: 360px;
  }

  #main .bg_main02,
  #main .bg_main03 {
    background-size: cover;
    height         : 275px;
  }

  #main .topic_txt {
    text-align : left;
    font-size  : 15px;
    line-height: 1.7em;
  }

  #main .present img {
    margin-bottom: 15px;
  }

  #main .recipe .imgL {
    width: 100%;
  }

  #main .recipe .imgR {
    width: 100%;
  }

  #main .recipe_copy {
    padding-bottom: 10px;
    margin        : 12px 0 12px 0;
  }

  #main .recipe_name {
    padding-bottom: 10px;
    margin        : 12px 0 12px 0;
  }

  #main .recipe_txt {
    padding-bottom: 10px;
    margin        : 12px 0 12px 0;
  }

  #main .flow li {
    display: block;
    width  : 100%;
    margin : 20px 0 30px 0;
    padding: 0 25px;
  }

  #main .flow .flow_top {
    margin-bottom: 0;
    font-size    : 16px;
    padding      : 7px;
  }

  #main .flow .flow_bottom {
    background: #fff;
    padding   : 10px 5px 10px 5px;
  }

  #main .flow .flow_bottom img {
    padding      : 0;
    margin-bottom: 0;
  }

  #main .flow .flow_bottom p {
    border-left: dotted rgba(134, 98, 57, 1.0) 1px;
    border-top : none;
    padding    : 0 0 0 10px;
    text-align : left;
    font-size  : 12px;
  }

  #main .flow .flow_bottom .btm_left {
    float: left;
    width: 40%;
  }

  #main .flow .flow_bottom .btm_right {
    float: right;
    width: 55%;
  }

  #main .flow li:before {
    content        : '';
    display        : inline-block;
    width          : 50px;
    background     : url("../img/flow_yajirushi_sp.png") no-repeat center center;
    background-size: contain;
    position       : absolute;
    top            : -50px;
    /*矢印画像の高さと配置を考慮して設定*/
    left           : 46.5%;
  }

  #main .txt_box p {
    font-size: 14px;
  }

  #main .toiawase {
    float        : left;
    width        : 100%;
    margin-bottom: 7px;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  #main .bg_main01,
  #main .bg_main02,
  #main .bg_main03 {
    height: 480px;
  }

  #main .flow li {
    display: block;
    width  : 100%;
    margin : 20px 0 30px 0;
    padding: 0 25px;
  }

  #main .flow .flow_top {
    margin-bottom: 0;
  }

  #main .flow .flow_bottom {
    background: #fff;
    padding   : 20px 10px 10px 10px;
  }

  #main .flow .flow_bottom img {
    padding      : 0;
    margin-bottom: 0;
  }

  #main .flow .flow_bottom p {
    border-left: dotted rgba(134, 98, 57, 1.0) 1px;
    border-top : none;
    padding    : 0 0 0 50px;
    text-align : left;
  }

  #main .flow .flow_bottom .btm_left {
    float: left;
    width: 50%;
  }

  #main .flow .flow_bottom .btm_right {
    float: right;
    width: 50%;
  }

  #main .flow li:before {
    content        : '';
    display        : inline-block;
    width          : 50px;
    background     : url("../img/flow_yajirushi_sp.png") no-repeat center center;
    background-size: contain;
    position       : absolute;
    top            : -50px;
    /*矢印画像の高さと配置を考慮して設定*/
    left           : 46.5%;
  }

  #main .toiawase {
    float: left;
    width: 46.5%;
  }
}


/**
 * ========================================
 * // sub
 * ========================================
 */
#sub {
  margin-bottom: 50px;
}

#sub h2 {
  text-align: center;
}

#sub .topic_txt {
  text-align    : center;
  margin-bottom : 10px;
  font-size     : 16px;
  line-height   : 1.8em;
  letter-spacing: 0.05em;
}

.sub_01 .bg_top,
.sub_02 .bg_top,
.sub_03 .bg_top {
  background-size: cover;
  height         : 300px;
}

#sub .lead {
  padding: 110px 7% 0 7%;
}

#sub .lead img {
  width: 230px;
}

#sub .bg {
  background: url("../img/bg.jpg") repeat center center;
}

#sub section {
  padding: 20px;
}

.new {
  position      : absolute;
  width         : 85px;
  height        : 85px;
  background    : #f2a3b0;
  color         : white;
  border-radius : 50%;
  font-size     : 1.5rem;
  letter-spacing: 1px;
  text-align    : center !important;
  line-height   : 17px;
  padding       : 34px 0px;
  font-weight   : bold;
  font-family   : "游ゴシック";
  transform     : scale(0.8);
  margin        : 0px;
  padding-left  : 0px !important;
  z-index       : 1000;
  margin-top    : -25px;
  display       : block;
  margin-left   : -15px;
}

/* -- >>> styles for small layout ----- */
@media screen and (max-width: 599px) {

  #sub {
    margin-bottom: 20px;
  }

  #sub section {
    padding: 30px 10px;
  }

  #sub h2 {
    margin-bottom: 25px;
  }

  #sub .topic_txt {
    font-size    : 14px;
    line-height  : 1.8em;
    margin-bottom: 20px;
  }

  .sub_01 .bg_top {
    height: 200px;
  }

  .sub_02 .bg_top {
    height: 200px;
  }

  .sub_03 .bg_top {
    height: 200px;
  }

  #sub .lead {
    text-align: center;
    padding   : 50px 0 0 0;
  }

}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {}



/**
 * ========================================
 * // inner
 * ========================================
 */

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  .inner {
    width : 94%;
    margin: 0 auto;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  .inner {
    width : 94%;
    margin: 0 auto;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  .inner {
    width : 960px;
    margin: 0 auto;
  }

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

/**
 * ========================================
 * // ecbtn
 * ========================================
 */
#ecbtn {
  position: fixed;
  bottom  : 400px;
  right   : 10px;
  z-index : 999;
}

#ecbtn a {
  text-decoration: none;
  text-align     : center;
  display        : block;
}

#ecbtn a img {
  display: block;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #ecbtn {
    display: none;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #ecbtn {
    display: none;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {}

/**
 * ========================================
 * // pagetop
 * ========================================
 */
#pagetop {
  position: fixed;
  bottom  : 10px;
  right   : 10px;
  z-index : 999;
}

#pagetop a {
  text-decoration: none;
  text-align     : center;
  display        : block;
}


.side_bn {
  position: fixed;
  bottom  : 200px;
  right   : 10px;
  z-index : 999;
}

/* -- >>> styles for narrow layout ----- */
@media screen and (max-width: 599px) {
  #pagetop a img {
    width  : 40px;
    display: block;
  }

  .side_bn {
    display: none;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  #pagetop {}

  #pagetop a img {
    width  : 50px;
    display: block;
  }

  .side_bn {
    display: none;
  }
}

/* -- >>> styles for wide layout ----- */
@media screen and (min-width: 960px) {
  #pagetop {}

  #pagetop a img {
    width  : 55px;
    display: block;
  }
}


/**
 * ========================================
 * // footer
 * ========================================
 */
footer {
  background: url("../img/line.png") repeat-x center top;
}

footer .inner {
  margin : 0 auto;
  padding: 50px 0;
}

footer .inner ul li {
  padding-bottom: 5px;
  font-size     : 0.7rem;
}

footer .sns_icon li {
  display: inline-block;
}

footer .inner ul li a:link {
  color: #000;
}

footer .inner ul li a:visited {
  color: #000;
}

footer .inner ul li a:hover {
  color: #00953a;
}

.copyright {
  padding  : 10px 0 0 10px;
  font-size: 0.6rem;
}


/* -- >>> styles for small layout ----- */
@media screen and (max-width: 599px) {
  footer .inner {
    padding   : 20px 0;
    text-align: center;
  }

  footer .inner {
    padding   : 20px 0;
    text-align: center;
  }

}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {
  footer .inner {
    padding   : 20px 0;
    text-align: center;
  }

  footer .inner {
    padding   : 20px 0;
    text-align: center;
  }
}

/**
 * ========================================
 * // col list
 * ========================================
 */

#main .col3_list li {
  display: inline-block;
  width  : 19%;
  margin : 0 0 30px 30px;
}

#main .col3_list li:nth-child(1),
#main .col3_list li:nth-child(5),
#main .col3_list li:nth-child(9) {
  margin: 0 0 30px 0;
}

#main .col4_list li {
  display: inline-block;
  width  : 30%;
  margin : 0 0 30px 30px;
}

#main .col4_list li:nth-child(1),
#main .col4_list li:nth-child(4),
#main .col4_list li:nth-child(7) {
  margin: 0 0 30px 0;
}

#main .col6_list li {
  display: inline-block;
  width  : 46%;
  margin : 0 0 30px 30px;
}

#main .col6_list li:nth-child(odd) {
  margin: 0 0 30px 0;
}

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

  #main .col3_list li,
  #main .col4_list li,
  #main .col6_list li,
  #main .col3_list li:nth-child(1),
  #main .col3_list li:nth-child(5),
  #main .col3_list li:nth-child(9),
  #main .col4_list li:nth-child(1),
  #main .col4_list li:nth-child(4),
  #main .col4_list li:nth-child(7),
  #main .col6_list li:nth-child(odd) {
    margin: 0 0 10px 0;
  }

  #main .col3_list li {
    width: 48%;
  }

  #main .col4_list li,
  #main .col6_list li {
    width: 100%;
  }
}

/* -- >>> styles for medium layout ----- */
@media screen and (min-width: 600px) and (max-width: 959px) {

  #main .col3_list li,
  #main .col4_list li {
    width: 28%;
  }

  #main .col6_list li {
    width: 46%;
  }

  #main .col3_list li p,
  #main .col4_list li p,
  #main .col6_list li p {
    font-size: 0.8rem;
  }
}