.cmnRecomActionBnr {
  margin-top: 120px !important;
  font-family: YakuHanJPs, 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr {
    margin-top: 80px !important;
  }
}

.cmnRecomActionBnr__tt {
  margin-bottom: 35px !important;
  color: #333;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__tt {
    margin-bottom: 25px !important;
    font-size: 20px;
  }
}

@media (max-width: 374px) {
  .cmnRecomActionBnr__tt {
    font-size: 5.33333vw;
  }
}

@media (min-width: 768px) {
  .cmnRecomActionBnr__tt > br {
    display: none;
  }
}

.cmnRecomActionBnr__bd__in {
  overflow: hidden;
}

.cmnRecomActionBnr__bd__c {
  float: left;
  width: 50%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__bd__c {
    float: none;
    width: auto;
  }
}

.cmnRecomActionBnr__bd__c:nth-child(1) {
  padding-right: 1px;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__bd__c:nth-child(1) {
    padding-right: 0;
  }
}

.cmnRecomActionBnr__bd__c:nth-child(2) {
  padding-left: 1px;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__bd__c:nth-child(2) {
    margin-top: 40px;
    padding-left: 0;
  }
}

.cmnRecomActionBnr__u__pw {
  position: relative;
}

.cmnRecomActionBnr__u__p {
  position: relative;
  padding-top: 47.65396% !important;
  overflow: hidden;
}

.cmnRecomActionBnr__u__p > div {
  transition: transform 250ms cubic-bezier(.215, .61, .355, 1);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.cmnRecomActionBnr__u__p > div > span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.cmnRecomActionBnr__u__cp {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 200px;
  padding: 15px 0 !important;
  background: rgba(255, 255, 255, .8);
  color: #333;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transform: translate(-50%, -50%);
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__u__cp {
    width: 180px;
    font-size: 15px;
  }
}

.cmnRecomActionBnr__u__wn {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 1;
  width: 8px;
  height: 8px;
  background: #fff;
}

.cmnRecomActionBnr__u__wn::before,
.cmnRecomActionBnr__u__wn::after {
  content: '';
  display: block;
  position: absolute;
  background: #fff;
}

.cmnRecomActionBnr__u__wn::before {
  left: -2px;
  top: 1px;
  width: 1px;
  height: 9px;
}

.cmnRecomActionBnr__u__wn::after {
  left: -2px;
  top: 9px;
  width: 9px;
  height: 1px;
}

.cmnRecomActionBnr__u__bt {
  max-width: 440px;
  margin: 20px auto 0 !important;
  padding: 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__u__bt {
    max-width: none;
  }
}

.cmnRecomActionBnr__u__bt__in {
  transition: background-color 250ms cubic-bezier(.215, .61, .355, 1), color 250ms cubic-bezier(.215, .61, .355, 1);
  position: relative;
  padding: 16px 0 !important;
  border: 1px solid #156082 !important;
  overflow: hidden;
  color: #156082;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomActionBnr__u__bt__in {
    max-width: 335px;
    margin: 0 auto !important;
    padding: 13px 0 !important;
    font-size: 15px;
  }
}

@media (max-width: 374px) {
  .cmnRecomActionBnr__u__bt__in {
    font-size: 4vw;
  }
}

.cmnRecomActionBnr__u__bt__in::before,
.cmnRecomActionBnr__u__bt__in::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 50%;
  width: 15px;
  height: 15px;
  background: #156082;
          mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  -webkit-mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  transition: transform 250ms cubic-bezier(.215, .61, .355, 1), background-color 250ms cubic-bezier(.215, .61, .355, 1);
}

.cmnRecomActionBnr__u__bt__in::before {
  left: 19px;
  transform: translate(-40px, 50%);
}

.cmnRecomActionBnr__u__bt__in::after {
  right: 19px;
  transform: translate(0, 50%);
}

.cmnRecomActionBnr__u > a {
  display: block;
  color: inherit;
  text-decoration: none !important;
}

@media (min-width: 768px) {
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__p > div,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__p > div {
    transform: scale(1.1);
  }
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__bt__in,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__bt__in {
    background: #156082;
    color: #fff;
  }
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__bt__in::before,
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__bt__in::after,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__bt__in::before,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__bt__in::after {
    background: #fff;
  }
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__bt__in::before,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__bt__in::before {
    transform: translate(0, 50%);
  }
  .cmnRecomActionBnr__u > a:hover .cmnRecomActionBnr__u__bt__in::after,
  .cmnRecomActionBnr__u > a:active .cmnRecomActionBnr__u__bt__in::after {
    transform: translate(40px, 50%);
  }
}

.cmnRecomActionBnr__u.is-exhibit .cmnRecomActionBnr__u__p > div > span:nth-child(1) {
  background-image: url(/common/images/pic_recom_action_bnr01_01.webp);
}

.cmnRecomActionBnr__u.is-exhibit .cmnRecomActionBnr__u__p > div > span:nth-child(2) {
  background-image: url(/common/images/pic_recom_action_bnr01_02.jpg);
}

.cmnRecomActionBnr__u.is-exhibit .cmnRecomActionBnr__u__p > div > span:nth-child(3) {
  background-image: url(/common/images/pic_recom_action_bnr01_03.jpg);
}

.cmnRecomActionBnr__u.is-estate .cmnRecomActionBnr__u__p > div > span:nth-child(1) {
  background-image: url(/common/images/pic_recom_action_bnr02_01.webp);
}

.cmnRecomActionBnr__u.is-estate .cmnRecomActionBnr__u__p > div > span:nth-child(2) {
  background-image: url(/common/images/pic_recom_action_bnr02_02.jpg);
}

.cmnRecomActionBnr__u.is-estate .cmnRecomActionBnr__u__p > div > span:nth-child(3) {
  background-image: url(/common/images/pic_recom_action_bnr02_03.jpg);
}

.cmnRecomActionBnr__u.is-factory .cmnRecomActionBnr__u__p > div > span:nth-child(1) {
  background-image: url(/common/images/pic_recom_action_bnr03_01.jpg);
}

.cmnRecomActionBnr__u.is-factory .cmnRecomActionBnr__u__p > div > span:nth-child(2) {
  background-image: url(/common/images/pic_recom_action_bnr03_02.jpg);
}

.cmnRecomActionBnr__u.is-factory .cmnRecomActionBnr__u__p > div > span:nth-child(3) {
  background-image: url(/common/images/pic_recom_action_bnr03_03.jpg);
}

.cmnRecomActionBnr__u.is-event .cmnRecomActionBnr__u__p > div > span:nth-child(1) {
  background-image: url(/common/images/pic_recom_action_bnr04_01.jpg);
}

.cmnRecomActionBnr__u.is-event .cmnRecomActionBnr__u__p > div > span:nth-child(2) {
  background-image: url(/common/images/pic_recom_action_bnr04_02.jpg);
}

.cmnRecomActionBnr__u.is-event .cmnRecomActionBnr__u__p > div > span:nth-child(3) {
  background-image: url(/common/images/pic_recom_action_bnr04_03.jpg);
}

.cmnRecomActionBnr__u.is-insta .cmnRecomActionBnr__u__p > div > span:nth-child(1) {
  background-image: url(/common/images/pic_recom_action_bnr05_01.jpg);
}

.cmnRecomActionBnr__u.is-insta .cmnRecomActionBnr__u__p > div > span:nth-child(2) {
  background-image: url(/common/images/pic_recom_action_bnr05_02.jpg);
}

.cmnRecomActionBnr__u.is-insta .cmnRecomActionBnr__u__p > div > span:nth-child(3) {
  background-image: url(/common/images/pic_recom_action_bnr05_03.jpg);
}

.cmnRecomActionBnr__u.is-insta .cmnRecomActionBnr__u__cp::before {
  content: '';
  display: block;
  width: 45.5px;
  height: 45.5px;
  margin: 0 auto 7px;
  background: url(/common/images/icon_recom_action_bnr01.png) no-repeat;
  background-size: contain;
}

.cmnRecomActionBnr[data-id='smart/index'] {
  margin-top: 0 !important;
}

.cmnRecomActionBnr[data-id='smart/green_model/index'] {
  margin-top: 0 !important;
}

.cmnRecomBox {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 3000;
  width: 375px;
  background: #fff;
  visibility: hidden;
  opacity: 0;
  transform: translate(0, 75px);
  transition: visibility 0ms 1000ms, opacity 1000ms, transform 1000ms;
  font-family: YakuHanJPs, 'Zen Kaku Gothic New', sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  .cmnRecomBox {
    max-width: 250px;
  }
}

.cmnRecomBox__cl {
  border-bottom: 1px solid #444;
}

.cmnRecomBox__cl > a {
  transition: opacity 250ms cubic-bezier(.215, .61, .355, 1);
  display: block;
  padding: 7px 0;
  background: #222;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.1;
  text-align: center;
}

.cmnRecomBox__cl > a > span {
  display: inline-block;
  position: relative;
  padding-left: 25px;
}

.cmnRecomBox__cl > a > span::before,
.cmnRecomBox__cl > a > span::after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  background: #fff;
  transform: rotate(45deg);
}

.cmnRecomBox__cl > a > span::before {
  left: 0;
  width: 19px;
  height: 1px;
  margin-top: -.5px;
}

.cmnRecomBox__cl > a > span::after {
  left: 9px;
  width: 1px;
  height: 19px;
  margin-top: -9.5px;
}

.cmnRecomBox__cl > a:hover,
.cmnRecomBox__cl > a:active {
  color: #fff !important;
  opacity: .85;
}

.cmnRecomBox__u[data-recombox-ratio] {
  display: none;
}

.cmnRecomBox__u[data-recombox-ratio].is-shown {
  display: block;
}

.cmnRecomBox__u__p {
  padding-top: 79.46667%;
  background-repeat: no-repeat;
  background-size: contain;
}

.cmnRecomBox__u > a {
  transition: opacity 250ms cubic-bezier(.215, .61, .355, 1);
  display: block;
}

.cmnRecomBox__u > a:hover,
.cmnRecomBox__u > a:active {
  opacity: .7;
}

.cmnRecomBox__u > a img {
  display: block;
  width: 100%;
  height: auto;
}

.cmnRecomBox__u.is-lineup .cmnRecomBox__u__p {
  background-image: url(/common/images/pic_recom_box01.jpg);
}

.cmnRecomBox.is-shown {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
  transition: visibility 0ms, opacity 1000ms, transform 1000ms;
}

.cmnRecomCatalogBnr {
  font-family: YakuHanJPs, 'Zen Kaku Gothic New', sans-serif;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cmnRecomCatalogBnr__tt {
  margin-bottom: 35px !important;
  color: #333;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__tt {
    margin-bottom: 0 !important;
    font-size: 20px;
  }
}

@media (max-width: 374px) {
  .cmnRecomCatalogBnr__tt {
    font-size: 5.33333vw;
  }
}

@media (min-width: 768px) {
  .cmnRecomCatalogBnr__tt > br {
    display: none;
  }
}

.cmnRecomCatalogBnr__spp {
  display: none;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__spp {
    display: block;
    max-width: 375px;
    margin: 0 auto !important;
  }
  .cmnRecomCatalogBnr__spp > img {
    width: 100%;
    vertical-align: top;
  }
}

.cmnRecomCatalogBnr__bd {
  max-width: 945px;
  margin: 0 auto !important;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bd {
    max-width: none;
  }
}

.cmnRecomCatalogBnr__bd__in {
  display: flex;
  justify-content: center;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bd__in {
    display: block;
  }
}

.cmnRecomCatalogBnr__bd__c {
  width: 33.33333%;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bd__c {
    width: auto;
    margin-top: 10px !important;
  }
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bd__c:first-child {
    margin-top: 0 !important;
  }
}

.cmnRecomCatalogBnr__u__p {
  margin-bottom: 10px;
  padding: 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__u__p {
    display: none;
  }
}

.cmnRecomCatalogBnr__u__p > img {
  width: 100%;
  vertical-align: top;
}

.cmnRecomCatalogBnr__u__tt {
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__u__tt {
    font-size: 16px;
  }
}

.cmnRecomCatalogBnr__u__t {
  margin-top: 2px !important;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
}

.cmnRecomCatalogBnr__bt {
  width: 400px;
  margin: 35px auto 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bt {
    width: auto;
    margin-top: 25px !important;
    padding: 0 20px !important;
  }
}

.cmnRecomCatalogBnr__bt__in {
  background: #fff;
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bt__in {
    max-width: 335px;
    margin: 0 auto !important;
  }
}

.cmnRecomCatalogBnr__bt__in > a {
  display: block;
  position: relative;
  padding: 15px 0 !important;
  border: 1px solid #156082;
  box-sizing: border-box;
  overflow: hidden;
  background: #156082;
  color: #fff !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 250ms cubic-bezier(.215, .61, .355, 1), color 250ms cubic-bezier(.215, .61, .355, 1);
}

.cmnRecomCatalogBnr__bt__in > a::before,
.cmnRecomCatalogBnr__bt__in > a::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 50%;
  width: 15px;
  height: 15px;
  background: #fff;
          mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  -webkit-mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  transition: transform 250ms cubic-bezier(.215, .61, .355, 1), background-color 250ms cubic-bezier(.215, .61, .355, 1);
}

.cmnRecomCatalogBnr__bt__in > a::before {
  left: 19px;
  transform: translate(-40px, 50%);
}

.cmnRecomCatalogBnr__bt__in > a::after {
  right: 19px;
  transform: translate(0, 50%);
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bt__in > a {
    padding: 13px 0 !important;
    font-size: 15px;
  }
}

.cmnRecomCatalogBnr__bt__in > a:visited {
  color: #fff !important;
}

@media (min-width: 768px) {
  .cmnRecomCatalogBnr__bt__in > a:hover,
  .cmnRecomCatalogBnr__bt__in > a:active {
    background: #fff;
    color: #156082 !important;
  }
  .cmnRecomCatalogBnr__bt__in > a:hover::before,
  .cmnRecomCatalogBnr__bt__in > a:hover::after,
  .cmnRecomCatalogBnr__bt__in > a:active::before,
  .cmnRecomCatalogBnr__bt__in > a:active::after {
    background: #156082;
  }
  .cmnRecomCatalogBnr__bt__in > a:hover::before,
  .cmnRecomCatalogBnr__bt__in > a:active::before {
    transform: translate(0, 50%);
  }
  .cmnRecomCatalogBnr__bt__in > a:hover::after,
  .cmnRecomCatalogBnr__bt__in > a:active::after {
    transform: translate(40px, 50%);
  }
}

@media (max-width: 767px) {
  .cmnRecomCatalogBnr__bt__in > a.is-pc {
    display: none;
  }
}

@media (min-width: 768px) {
  .cmnRecomCatalogBnr__bt__in > a.is-sp {
    display: none;
  }
}

.cmnRecomMadoriAdv {
  margin: 120px 0 0;
  font-family: YakuHanJPs, 'Zen Kaku Gothic New', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv {
    min-width: 1140px;
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv {
    margin: 80px 0 0;
  }
}

.cmnRecomMadoriAdv > a {
  display: flex;
  flex-direction: row-reverse;
  height: 338px;
  background: url('/common/images/bg_recom_madori_advice01.webp') 50% 50%/120px 120px;
  opacity: 1 !important;
  text-decoration: none;
  letter-spacing: 0;
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv > a .cmnRecomMadoriAdv__p__bg::before,
  .cmnRecomMadoriAdv > a .cmnRecomMadoriAdv__p__bg::after {
    transition: transform 250ms cubic-bezier(.215, .61, .355, 1);
  }
  .cmnRecomMadoriAdv > a .cmnRecomMadoriAdv__i__bt {
    transition: background 250ms cubic-bezier(.215, .61, .355, 1);
  }
  .cmnRecomMadoriAdv > a .cmnRecomMadoriAdv__i__bt > span {
    transition: color 250ms cubic-bezier(.215, .61, .355, 1);
  }
  .cmnRecomMadoriAdv > a:hover .cmnRecomMadoriAdv__p__bg::before,
  .cmnRecomMadoriAdv > a:hover .cmnRecomMadoriAdv__p__bg::after {
    transform: scale(1.1);
  }
  .cmnRecomMadoriAdv > a:hover .cmnRecomMadoriAdv__i__bt {
    background: #fff;
  }
  .cmnRecomMadoriAdv > a:hover .cmnRecomMadoriAdv__i__bt::after {
    background: #156082;
  }
  .cmnRecomMadoriAdv > a:hover .cmnRecomMadoriAdv__i__bt > span {
    color: #156082;
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv > a {
    flex-direction: column;
    height: auto;
  }
}

.cmnRecomMadoriAdv__p {
  flex: 1 1 auto;
  position: relative;
  z-index: 2;
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv__p__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
  }
  .cmnRecomMadoriAdv__p__bg::before,
  .cmnRecomMadoriAdv__p__bg::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .cmnRecomMadoriAdv__p__bg::before {
    background: url('/common/images/bg_recom_madori_advice01.webp') 50% 50%/120px 120px;
    z-index: 1;
  }
  .cmnRecomMadoriAdv__p__bg::after {
    position: absolute;
    max-width: calc(945px / 1366 * 1920);
    background: url('/common/images/pic_recom_madori_advice01.webp') 50% 50%/auto 100% no-repeat;
    z-index: 2;
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__p__bg {
    padding-top: 61.33333%;
    background: url('/common/images/pic_recom_madori_advice01_sp.webp') 50% 50%/cover;
  }
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv__p__cv {
    position: absolute;
    bottom: 0;
    left: -60px;
    width: 385px;
    height: 232px;
    background: url('/common/images/pic_recom_madori_advice02.webp') 50% 50%/contain no-repeat;
    z-index: 1;
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__p__cv {
    display: none;
  }
}

.cmnRecomMadoriAdv__p__pn {
  position: absolute;
  background: 50% 50% / contain no-repeat;
  z-index: 2;
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv__p__pn {
    bottom: 0;
    left: clamp(0px, 50% + 204px, 945px / 2 / 1366 * 1920 + 204px);
    width: 233px;
    height: 158px;
    background-image: url('/common/images/pic_recom_madori_advice03.webp');
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__p__pn {
    bottom: 0;
    right: 0;
    width: 42.93333%;
    aspect-ratio: 483 / 441;
    background-image: url('/common/images/pic_recom_madori_advice03_sp.webp');
    transform: translateY(calc(198 / 441 * 100%));
  }
}

.cmnRecomMadoriAdv__i {
  position: relative;
  background: #156082;
  z-index: 1;
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv__i {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: clamp(421 / 1366 * 100%, 50% - 262px, 50% - 262px);
  }
}

@media (min-width: 768px) {
  .cmnRecomMadoriAdv__i__in {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: calc(421px / 1366 * 1920);
    padding: 0 0 12px;
  }
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__i__in {
    padding: clamp(15px, 15 / 375 * 100vw, 15px * 2) 0 clamp(16px, 16 / 375 * 100vw, 16px * 2);
  }
}

.cmnRecomMadoriAdv__i__bb {
  width: 160px;
  margin: 0 0 -1px;
  transform: translate(-10px, 0);
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__i__bb {
    margin: 0 auto -1px;
  }
}

.cmnRecomMadoriAdv__i__tt {
  margin: 0 0 22px;
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  line-height: calc(47 / 32);
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__i__tt {
    margin: 0 0 13px;
    font-size: clamp(24px / 375 * 320, 24 / 375 * 100vw, 24px);
    line-height: calc(35 / 24);
    text-align: center;
    white-space: nowrap;
  }
  .cmnRecomMadoriAdv__i__tt br {
    display: none;
  }
}

.cmnRecomMadoriAdv__i__bt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 145px;
  height: 48px;
  padding: 0 20px 0 0;
  border: 1px solid #fff;
  box-sizing: border-box;
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__i__bt {
    width: calc(100% - 40px);
    max-width: 337px;
    height: 51px;
    margin: 0 auto;
    padding: 0;
  }
}

.cmnRecomMadoriAdv__i__bt::after {
  content: '';
  display: block;
  position: absolute;
  right: 18px;
  width: 14px;
  height: 14px;
  background: #fff;
          mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  -webkit-mask: url('/common/images/icon_arrow01.svg') 50% 50%/contain no-repeat;
  transition: background-color 250ms cubic-bezier(.215, .61, .355, 1);
}

.cmnRecomMadoriAdv__i__bt > span {
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

@media (max-width: 767px) {
  .cmnRecomMadoriAdv__i__bt > span {
    font-size: 15px;
  }
}

.cmnRecomMadoriBnr {
  margin-top: 120px !important;
  font-family: YakuHanJPs, 'Zen Kaku Gothic New', sans-serif;
  font-weight: 300;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr {
    margin-top: 80px !important;
  }
}

.cmnRecomMadoriBnr__in {
  position: relative;
  height: 338px;
  background: url(/common/images/bg_recom_madori_bnr01.png) no-repeat 50%;
  background-size: cover;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__in {
    height: 394px;
    background-image: url(/common/images/bg_recom_madori_bnr01_sp.png);
  }
}

.cmnRecomMadoriBnr__ch {
  position: absolute;
  left: 50%;
  top: 39px;
  width: 178px;
  height: 277px;
  margin-left: -480px;
  background: url(/common/images/pic_recom_madori_bnr01.png) no-repeat;
  background-size: contain;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__ch {
    top: 240px;
    width: 89px;
    height: 138.5px;
    margin-left: -44.5px;
  }
}

.cmnRecomMadoriBnr__s {
  position: absolute;
  left: 0;
  top: 65px;
  width: 100%;
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__s {
    top: 35px;
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  .cmnRecomMadoriBnr__s > br {
    display: none;
  }
}

.cmnRecomMadoriBnr__tt {
  position: absolute;
  left: 0;
  top: 110px;
  width: 100%;
  color: #fff;
  font-size: 29px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__tt {
    top: 90px;
    font-size: 21px;
  }
}

.cmnRecomMadoriBnr__tt > span {
  margin: 0 -5px;
  font-size: 25px;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__tt > span {
    font-size: 17px;
  }
}

.cmnRecomMadoriBnr__bt {
  position: absolute;
  left: 50%;
  top: 225px;
  width: 400px;
  margin-left: -200px;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__bt {
    left: 0;
    top: 170px;
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    padding: 0 20px;
  }
}

.cmnRecomMadoriBnr__bt__in {
  background: #fff;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__bt__in {
    max-width: 335px;
    margin: 0 auto;
  }
}

.cmnRecomMadoriBnr__bt__in > a {
  transition: opacity 250ms cubic-bezier(.215, .61, .355, 1);
  display: block;
  position: relative;
  padding: 16px 0;
  background: #ffa800;
  color: #fff !important;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none !important;
}

@media (max-width: 767px) {
  .cmnRecomMadoriBnr__bt__in > a {
    padding: 13px 0;
    font-size: 15px;
  }
}

.cmnRecomMadoriBnr__bt__in > a::before {
  content: '';
  display: block;
  position: absolute;
  right: 20px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  box-sizing: border-box;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
}

.cmnRecomMadoriBnr__bt__in > a:hover,
.cmnRecomMadoriBnr__bt__in > a:active {
  opacity: .7;
}

.cmnRecomWrap {
  position: relative;
  z-index: 2;
  padding: 120px 0 !important;
  background: #fff;
}

@media (max-width: 767px) {
  .cmnRecomWrap {
    padding: 80px 0 !important;
  }
}

.cmnRecomWrap[data-id='feature'] {
  padding: 0 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='feature'] {
    padding: 0 0 10px !important;
  }
}

.cmnRecomWrap[data-id='support'] {
  padding: 120px 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='support'] {
    padding: 80px 0 10px !important;
  }
}

.cmnRecomWrap[data-id='nisetai'] {
  padding: 120px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='nisetai'] {
    padding: 50px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='smartheim/index'] {
  padding: 120px 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='smartheim/index'] {
    padding: 80px 0 20px !important;
  }
}

.cmnRecomWrap[data-id='smartheim/merit'] {
  padding: 25px 0 120px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='smartheim/merit'] {
    padding: 30px 0 80px !important;
  }
}

.cmnRecomWrap[data-id='madori/index'] {
  padding: 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori/index'] {
    padding: 0 !important;
  }
}

.cmnRecomWrap[data-id='madori/style'] {
  padding: 120px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori/style'] {
    padding: 30px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='madori/imagehint/index'] {
  padding: 120px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori/imagehint/index'] {
    padding: 80px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='madori/imagehint/main'] {
  padding: 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori/imagehint/main'] {
    padding: 30px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='madori/imagehint/sub'] {
  padding: 120px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori/imagehint/sub'] {
    padding: 80px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='madori'] {
  padding: 0 !important;
}

.cmnRecomWrap[data-id='madori'] .cmnRecomActionBnr {
  margin-top: 0 !important;
}

.cmnRecomWrap[data-id='madori'] .cmnRecomCatalogBnr + .cmnRecomActionBnr {
  margin-top: 120px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='madori'] .cmnRecomCatalogBnr + .cmnRecomActionBnr {
    margin-top: 80px !important;
  }
}

.cmnRecomWrap[data-id^='hiraya/'] {
  padding: 200px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id^='hiraya/'] {
    padding: 80px 0 0 !important;
  }
}

.cmnRecomWrap[data-id^='gtu/'] {
  padding: 0 !important;
}

.cmnRecomWrap[data-id='lineup/index'] {
  padding: 200px 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='lineup/index'] {
    padding: 80px 0 10px !important;
  }
}

.cmnRecomWrap[data-id='lineup/detail'] {
  padding: 120px 0 0 !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='lineup/detail'] {
    padding: 80px 0 0 !important;
  }
}

.cmnRecomWrap[data-id='commercial/index'] {
  padding: 0 0 20px !important;
}

@media (max-width: 767px) {
  .cmnRecomWrap[data-id='commercial/index'] {
    padding: 0 0 10px !important;
  }
}