@charset "utf-8";
/* ==========================================================

title : おしゃれなキッチングッズ16選！プレゼントにも最適な人気グッズを紹介
scope : /products/kitchen/guide-tips/product/

last modify : 2020/03/26 TCV_ヴィ/ Doan Thi Tuong Vi 新規作成

========================================================== */

/* =================================
  parts
==================================== */

/* #title  SP用 
------------------------------------------------------ */
@media screen and (max-width: 600px){
  .title p {
    font-size: 4.2vw !important;
  }
}

/* ttl_section_inner 
------------------------------------------------------ */
@media screen and (max-width: 970px) {
  .meiryo .ttl_lead {
    letter-spacing: 0;
  }
  
  .meiryo .ttl_section {
    letter-spacing: 0;
  }
}

/* ttl_section_inner 
------------------------------------------------------ */
.ttl_section_inner01 {
  margin-left: 1%;
  margin-top: 4.3%;
}

.ttl_section_inner01 > * {
  color: #1a186d;
  font-size: 19px;
  font-weight: 600;
}

@media screen and (max-width: 970px) and (min-width: 601px) {
  .ttl_section_inner01 > * {
    letter-spacing: -.08em;
  }
  
  @supports (-ms-ime-align:auto) {
    .ttl_section_inner01 > * {
      letter-spacing: -.1em;
    }
  }
}

@media screen and (max-width: 970px) {
  .meiryo .hide_meiryo {
    display: none;
  }
}

@media screen and (-ms-high-contrast:none) and (max-width: 970px) and (min-width: 601px) {
  .ttl_section_inner01 > * {
    letter-spacing: -.1em;
  }
}

@media screen and (max-width: 600px) {
  .ttl_section_inner01 {
    margin-left: 0;
  }

  .ttl_section_inner01 > * {
    font-size: 5.2vw;
    letter-spacing: -.04em;
  }
}

.ttl_section_inner02 {
  color: #1a186d;
  font-size: 19px;
  font-weight: 600;
  padding-left: 2.32em;
  position: relative;
}

.ttl_section_inner02::before {
  background: url("../image/ico-check.png") center center no-repeat;
  background-size: 100%;
  content: "";
  height: 1.79em;
  position: absolute;
  left: 0;
  top: 0;
  width: 1.9em;
}

.ttl_section_inner02 span {
  border-bottom: 1px solid #d3a37b;
  display: block;
  letter-spacing: .05em;
  padding-left: .48em;
  padding-top: .25em;
}

@media screen and (max-width: 970px) {
  .ttl_section_inner02 span {
    letter-spacing: 0;
  }

  .meiryo .ttl_section_inner02 span {
    letter-spacing: -.06em;
  }
}

@media screen and (max-width: 600px) {
  .ttl_section_inner02 {
    font-size: 5.5vw;
  }

  .ttl_section_inner02 span {
    letter-spacing: -.03em !important;
  }
}

.ttl_section_inner03 > * {
  background: #d3a37b;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: .96% 1%;
  text-align: center;
}

.meiryo .ttl_section_inner03 > * {
  padding: 1.36% 1% .56%;
}

@media all and (-ms-high-contrast:none) {
  .ttl_section_inner03 > * {
    padding: 1.36% 1% .56%;
  }
}

@media screen and (max-width: 600px) {
  .ttl_section_inner03 > * {
    font-size: 5vw;
  }
}

/* ttl_banner 
------------------------------------------------------ */
.ttl_banner {
  color: #b62d1b;
  font-size: 26px;
  font-weight: 600;
}

@media screen and (max-width: 600px) {
  .ttl_banner {
    font-size: 5.5vw;
    margin: 0 auto;
    max-width: 90%;
  }
}

/* =================================
  common
==================================== */
.content .block {
  margin: 2.3% auto 0;
}

@media screen and (max-width: 600px) {
  .content .block:nth-child(n+4) {
    margin-top: 10% !important;
  }
}

.content .list_section {
  margin: 2.9% auto 0;
}

.list_section li {
  box-sizing: border-box;
  width: calc(360 / 744 * 100%);
}

.list_section li:nth-child(n+3),
.list_section li.display_full:nth-child(n+2) {
  margin-top: 4.8%;
}

.list_section li > .text_block {
  letter-spacing: .064em;
  margin-left: 1%;
  margin-top: 3.3%;
}

.meiryo .list_section li > .text_block {
  letter-spacing: .02em !important;
}

.list_section li.display_full > .text_block {
  margin-left: .5%;
  margin-top: .5%;
}

.list_section li.display_full .ttl_section_inner01 {
  margin-left: 0;
  margin-top: 2.2%;
}

.list_section li.display_full > .text_block {
  margin-top: 1.5%;
}

@media screen and (max-width: 600px) {
  .list_section {
    width: 95%;
  }

  .list_section li {
    width: 100%;
  }

  .list_section li > .text_block,
  .list_section li.display_full > .text_block {
    margin-left: 0;
    margin-top: 1%;
  }

  .list_section li:nth-child(n+2),
  .list_section li.display_full:nth-child(n+2) {
    margin-top: 10%;
  }
}

.list_block {
  margin: 2.5% auto 0;
  width: calc(744 / 864 * 100%);
}

.list_block li {
  background: #fff8e0;
  box-sizing: border-box;
  width: calc(366 / 744 * 100%);
}

.list_block li:nth-child(n+3) {
  margin-top: 1.6%;
}

.list_block li .flex {
  padding: 3.8% 5.25% 5.4%;
}

.list_block li .text_block {
  letter-spacing: .01em;
  line-height: 1.6;
  width: calc(140 / 327 * 100%);
}

@media all and (-ms-high-contrast:none) {
  .list_block li .text_block {
    letter-spacing: 0;
  }
  
  .meiryo .list_block li .text_block {
    letter-spacing: .07em;
  }
}

@supports (-moz-appearance:none) {
  .meiryo .list_block li .text_block {
    letter-spacing: .07em;
  }
}

@supports (-ms-ime-align:auto) {
  .list_block li .text_block {
    letter-spacing: 0;
  }
}

.list_block li .text_block p {
  font-size: 16px;
  letter-spacing: .05em;
}

.meiryo .list_block li .text_block p {
  letter-spacing: -.05em;
}

@media screen and (max-width: 970px) {
  .list_block li .flex {
    padding: 3.5% 3.5% 5%;
  }
}

.list_block li .image_block {
  margin-top: 1.8%;
  width: calc(172 / 327 * 100%);
}

.list_block_link {
  background: #ff9e5d;
  border-radius: 15px;
  box-shadow: 0 2px 1px 0 rgba(185, 146, 77, .6);
  display: block;
  margin-top: 12.1%;
  padding: 1.33% 0 2.25%;
  text-align: center;
}

.meiryo .list_block_link {
  padding: 2.33% 0 1.25%;
}

.list_block_link span {
  color: #fff;
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 0 11% 0 1%;
  position: relative;
}

.list_block_link span::after {
  background: url("../image/ico-arrow-down.png") center no-repeat;
  background-size: contain;
  content: "";
  height: 1.077em;
  position: absolute;
  right: 0;
  top: 50%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 1.077em;
}

@media screen and (max-width: 970px) {  
  .list_block_link span {
    font-size: 1.5vw;
  }
}

@media screen and (max-width: 600px) {
  .list_block {
    width: 95%;
  }
  
  .list_block li {
    width: 100%;
  }
  
  .list_block li:nth-child(n+2) {
    margin-top: 5%;
  }
  
  .list_block li .text_block {
    line-height: 1.5;
  }
  
  .list_block_link span {
    font-size: 3.2vw;
  }
}

.block_lead {
  margin: 2.8% auto 0;
  max-width: 744px;
  width: 95%;
}

.note_block p {
  font-size: 14px;
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.btn_block {
  margin-top: 5.1%;
}

.display_full .btn_block {
  margin-top: 2.3%;
}

@media screen and (max-width: 970px) {
  .meiryo .btn_block.yellow a {
    letter-spacing: -.02em;
  }
}

@media screen and (max-width: 600px) {
  .display_full .btn_block {
    margin-top: 4.5%;
  }
}

.content .banner_section {
  background: url("../../image-cmn/bg-banner.jpg") left top repeat;
  box-sizing: border-box;
  margin: 3.1% auto 0;
  padding: 1.6% 0 1.1%;
}

.banner_section_content {
  background: #fff;
  box-sizing: border-box;
  margin: 2% auto 0;
  padding: 3% 0;
  width: calc(724 / 744 * 100%);
}

.banner_section .flex {
  border-bottom: 1px solid #1a186d;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 1% 2.2%;
  width: calc(684 / 724 * 100%);
}

.banner_section .text_block {
  width: calc(363 / 669 * 100%);
}

.banner_section .image_block {
  margin-top: .7%;
  width: calc(285 / 669 * 100%);
}

.banner_section .note_block {
  margin: 1.8% auto 0;
  letter-spacing: .035em;
  width: calc(650 / 744 * 100%);
}

@media all and (-ms-high-contrast:none) {
  .banner_section .note_block {
    letter-spacing: .03em;
  }
}

@supports (-ms-ime-align:auto) {
  .banner_section .note_block {
    letter-spacing: .03em;
  }
}

@media screen and (max-width: 600px) {
  .banner_section {
    width: 95%;
  }

  .banner_section .text_block {
    width: 100%;
  }

  .banner_section .image_block {
    margin-top: 1.5%;
    width: 100%;
  }
}

/* =================================
  #types_kitchen_goods
==================================== */
#types_kitchen_goods {
  margin-top: 5.85%;
}
@media screen and (max-width: 600px) {
  .meiryo #types_kitchen_goods .list_block li .text_block {
    letter-spacing: -.06em;
  }
}

/* =================================
  #stylish_kitchen_goods
==================================== */
#stylish_kitchen_goods {
  margin-top: 5.85%;
}

#stylish_kitchen_goods .block:nth-child(3) {
  margin-top: 3%;
}

#stylish_kitchen_goods .block:nth-child(4) {
  margin-top: 3.3%;
}

#stylish_kitchen_goods .block:nth-child(n+5) {
  margin-top: 4.9%;
}

.meiryo #stylish_kitchen_goods .block02 li:first-child .ttl_section_inner01 > * {
  letter-spacing: -.05em;
}

@media all and (-ms-high-contrast:none) {
  #stylish_kitchen_goods .block02 li:last-child .ttl_section_inner01 > *,
  #stylish_kitchen_goods .block05 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: 0;
  }
  
  .meiryo #stylish_kitchen_goods .block02 li:last-child .ttl_section_inner01 > *,
  .meiryo #stylish_kitchen_goods .block05 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: -.08em;
  }
}

@supports (-ms-ime-align:auto) {
  #stylish_kitchen_goods .block05 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: 0;
  }
  
  .meiryo #stylish_kitchen_goods .block05 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: -.05em;
  }
}

@supports (-moz-appearance:none) {
  .meiryo #stylish_kitchen_goods .block04 li:nth-child(2) .text_block {
    letter-spacing: -.05em;
  }
}

#stylish_kitchen_goods .block03 .bg_spacing {
  background: url(../image/img-spacing01.jpg) left 61% top 46.8% no-repeat;
  background-size: 68%;
}

#stylish_kitchen_goods .block04 .bg_spacing {
  background: url(../image/img-spacing02.jpg) left 57% top 46% no-repeat;
  background-size: 65%;
}

#stylish_kitchen_goods .block05 .list_section li:nth-child(3) > .text_block {
  letter-spacing: .034em;
}

.meiryo #stylish_kitchen_goods .block07 li:last-child > .text_block {
  letter-spacing: -.05em !important;
}

@media screen and (max-width: 970px) and (min-width: 601px) {
  .meiryo #stylish_kitchen_goods .block02 li:last-child .ttl_section_inner01 > * {
    letter-spacing: -.12em;
  }
  
  .meiryo #stylish_kitchen_goods .block04 li:last-child .ttl_section_inner01 > * {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 970px) {
  #stylish_kitchen_goods .block02 li:last-child .text_block {
    letter-spacing: .04em;
  }
  
  #stylish_kitchen_goods .block03 li:nth-child(2) .text_block {
    letter-spacing: 0;
  }
  
  #stylish_kitchen_goods .block05 li:first-child .text_block {
    letter-spacing: .07em !important;
  }
  
  #stylish_kitchen_goods .block07 li > .text_block {
    letter-spacing: .01em !important;
  }
}

@media screen and (max-width: 600px) {
  .meiryo #stylish_kitchen_goods .block03 li:first-child .ttl_section_inner01 > *,
  #stylish_kitchen_goods .block06 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: -.08em;
  }
  
  .meiryo #stylish_kitchen_goods .block06 li:nth-child(2) .ttl_section_inner01 > * {
    letter-spacing: -.12em;
  }
}

/* =================================
  #choosing_point
==================================== */
#choosing_point {
  margin-top: 5.5%;
}

#choosing_point .block:nth-child(n+4) {
  margin-top: 4.35%;
}

#choosing_point .block04 {
  margin-top: 4.9% !important;
}

#choosing_point .block01 .ttl_section_inner {
  margin-top: 2.6%;
}

#choosing_point .list_section {
  margin-top: 2.8%;
}

#choosing_point .list_section li:not(:first-child) {
  margin-top: 4.25%;
}

#choosing_point .list_section li .flex {
  margin-top: 1.6%;
}

#choosing_point .list_section li .image_block {
  width: calc(220 / 744 * 100%);
}

#choosing_point .list_section li .text_block {
  letter-spacing: .05em;
  margin-top: .45%;
  width: calc(500 / 744 * 100%);
}

.meiryo #choosing_point .list_section li .text_block {
  letter-spacing: .07em;
}

@media all and (-ms-high-contrast:none) {
  .meiryo #choosing_point .list_section li .text_block {
    letter-spacing: .09em;
  }
}

@media screen and (max-width: 970px) {
  #choosing_point .list_section li .text_block {
    letter-spacing: 0;
  }
}

@media screen and (max-width: 600px) {
  #choosing_point .list_section li .image_block {
    width: 100%;
  }
  
  #choosing_point .list_section li .text_block {
    margin-top: 2%;
    width: 100%;
  }
  
  #choosing_point .list_section li:not(:first-child) {
    margin-top: 5%;
  }
}

/* =================================
  #making_tips
==================================== */
#making_tips {
  margin-top: 5.25%;
}

.points {
  margin: 3% auto 0;
  padding: 2.8% calc(26 / 744 * 100%) 3.1%;
  width: calc(744 / 864 * 100%);
}

#making_tips .btn_block.yellow {
  margin-top: 4%;
}

@media screen and (min-width: 601px) {
  #making_tips .head_yel > * > span:first-child {
    padding-right: 0;
  }

  #making_tips .head_yel > * > span:last-child {
    padding-left: 0;
  }
}

#making_tips .block02 {
  margin-top: 7%;
}

#making_tips .block02 .customize {
  padding-bottom: 4.5%;
}

@media screen and (min-width: 921px) {
  #making_tips .head_blu_yel span:first-child {
    padding-right: 0;
  }

  #making_tips .head_blu_yel span:last-child {
    padding-left: 0;
  }
}

@media screen and (max-width: 970px) {  
  .points .point .content_text .text {
    letter-spacing: 0;
  }
}
