@charset "UTF-8";
@charset:"shift_jis";
/*///////////////////////////////////////////////////////////////////////////////////

  エクスショップ 総合トップ

///////////////////////////////////////////////////////////////////////////////////*/

/* ====================================================
  メインビジュアル
====================================================*/
.sttop-mv {
  margin: 14px 0 20px;
}
/* ====================================================
  キャンペーンバナー
====================================================*/
.sttop-camp-bnr {
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.sttop-camp-bnr_hd {
  margin-bottom: 10px;
}
.sttop-camp-bnr {
  position: relative;
  margin-bottom: 30px;
}
.sttop-camp-bnr_list-wrap {
  width: 585px;
  overflow: hidden;
}
.sttop-camp-bnr_list-wrap.-is-init {
  height: 94px;
}
.sttop-camp-bnr_list {
  width: calc(585px + 15px);
  margin-bottom: 5px;
}
.sttop-camp-bnr_list img {
  width: 185px;
  height: auto;
  vertical-align: bottom;
}
.sttop-camp-bnr_show {
  text-align: right;
}
.sttop-camp-bnr_show a {
  display: inline-block;
  padding-left: 12px;
  color: #0034ca;
  font-size: 12px;
  background: url(/public/img/global/icon_cam_link.png) left center no-repeat;
}
/* slick
--------------------------------*/
.sttop-camp-bnr_list li {
  display: none;
}
.sttop-camp-bnr_list.slick-initialized li {
  display: block;
}
.sttop-camp-bnr .slick-slide {
  width: 185px;
}
.sttop-camp-bnr .sttop-camp-prev,
.sttop-camp-bnr .sttop-camp-next {
  --nav-size: 23px;
  display: none;
  position: absolute;
  top: 30px;
  width: var(--nav-size);
  height: var(--nav-size);
  border: none;
  border-radius: 50%;
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  opacity: 90;
  z-index: 52;
  transition: transform 0.25s ease-in-out;
  cursor: pointer;
}
.sttop-camp-bnr .sttop-camp-prev {
  left:-30px;
  background: url(/public/img/item/estimate/item_image/icon_prev.svg) center center no-repeat rgba(51, 51, 51, 0.7);
  background-size: 30%;
}
.sttop-camp-bnr .sttop-camp-next {
  right: -30px;
  background: url(/public/img/item/estimate/item_image/icon_next.svg) center center no-repeat rgba(51, 51, 51, 0.7);
  background-size: 30%;
}
.sttop-camp-bnr .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 7px;
  width: 10%;
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
.sttop-camp-bnr .slick-dots button {
  display: block;
  text-indent: -9999px;
  width: 8px;
  height: 8px;
  border-radius: 1000px;
  border: none;
  background: #dcdcdc;
  cursor: pointer;
}
.sttop-camp-bnr .sttop-camp-prev:hover {
  transform: rotate(180deg);
  transform: scale(1.5);
}
.sttop-camp-bnr .sttop-camp-next:hover {
  transform: scale(1.5);
}
.sttop-camp-bnr .slick-dots button:hover,
.sttop-camp-bnr .slick-dots .slick-active button,
.sttop-camp-bnr .slick-dots button:focus {
  background: #c40000;
}
/* ====================================================
  緊急のお知らせ #575
====================================================*/
.emergency_info {
  margin: 11px 0 0 0;
  padding: 15px 0 15px;
  text-align: center;
  font-size: 12px;
  color: #555;
  background-color: #fffbc3;
}
.emergency_info .emergency_heading {
  margin: 0 0 3px 0;
  font-size: 16px;
  font-weight: bold;
  color: #f00;
}
.emergency_info .emergency_contact {
  margin: 5px 0 12px;
}
.emergency_info .emergency_time {
  line-height: 1;
  color: #333;
}
/* ====================================================
  #10315: 台風被害向けに、お問合せフォームを改修
====================================================*/
.lead-tyn-cope {
  margin: 13px 0 16px;
  font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.lead-tyn-cope a {
  display: block;
  height: 33px;
  border: 1px solid #9bb2da;
  line-height: 33px;
  text-decoration: none;
  text-align: center;
}
.lead-tyn-cope_txt {
  color: #333;
  font-size: 14px;
}
.lead-tyn-cope_txt::before {
  content: "";
  display: inline-block;
  margin-right: 7px;
  border: 4px solid transparent;
  border-left: 7px solid #555;
  border-right: none;
  vertical-align: baseline;
}
/*----------------------------------------------------------------
  サイトトップ赤帯
----------------------------------------------------------------*/
p.MAIN_ITEM_PRICE{/* サイトトップ赤帯見出し「最安値商品がめじろ押し！工事費込みでこの価格」 */
  background:url(/public/img/recommend_on_top/item_price.jpg) no-repeat;
  width:585px;
  height:48px;
  text-indent:-9999px;
  margin-bottom:12px;
}
p.h_bnr_item {
  background: url("/public/img/recommend_on_top/h_bnr_item.png?20171113") left top no-repeat;
  width: 585px;
  height: 52px;
  text-indent: -9999px;
  margin-bottom: 8px;
}
p.h_variety_item {
  background:url("/public/img/recommend_on_top/h_variety_item.png") no-repeat;
  width: 585px;
  height: 52px;
  text-indent:-9999px;
  margin: 27px 0 7px;
}
.catch01 {/*　サイトトップ　他社お見積りとじっくり比較して下さい！バナー　*/
  width: 585px;
  height: 142px;
  display: block;
  text-indent: -9999px;
  background: url(/public/img/img_top/catchcp_01.png?2023082900) no-repeat;
}
div#recommend_on_top #bnr_inplus .icon_lastsale {
  display: none !important;
}
/* //////////////////////////////////////////////////////////////////////////////////

  main_visual.css トップページ　メインビジュアル・スライド2013

//////////////////////////////////////////////////////////////////////////////////*/

#MAIN #CONTENTS #CONTLEFT #exs_main_visual {/* 大枠 */
  overflow: hidden;
  width: 585px;
  height: 360px;
  margin: 8px auto 20px;
}

/* ===========================================================
  上部ビジュアル
===========================================================*/
#MAIN #CONTENTS #CONTLEFT #exs_main_visual ul#exs_visual_wrapper {
  position: relative;
  overflow: hidden;
  width: 585px !important;
  height: 250px !important;
  padding: 14px 0 0;/* JSロード前のサムネイルの位置を調整（動かないように） */
}
#MAIN #CONTENTS #CONTLEFT #exs_main_visual ul#exs_visual_wrapper li {
  margin: 0 auto;
  padding-bottom: 8px;
  text-align: center;
}
#MAIN #CONTENTS #CONTLEFT #exs_main_visual ul#exs_visual_wrapper li a img {
  vertical-align: bottom;
  -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
}

/* ===========================================================
  下部サムネイル
===========================================================*/
#exs_thumbnail_view {/* box */
  position: relative;
  overflow: hidden !important;
  width: 585px;
  height: 75px;
  margin-top: 10px;
}
#exs_thumbnail_view #exs_thumbnail_container {
  position: relative;
  left: -22px;
  width: 607px;/*628px;*/
  height: 75px;
  margin: 0 0 20px;
  background: url("/public/img/top/bg_mv_thumb.png") 46px top no-repeat;/* サムネイル背景 */
}
#exs_thumbnail_view #exs_thumbnail_container .caroufredsel_wrapper {
  overflow: hidden !important;
  width: 607px !important;
  height: 75px !important;
}
#exs_thumbnail_view #exs_thumbnail_container #exs_thumbnail_wrapper {/* JSスライド要素 */
  width: 900px !important;
  height: 75px !important;
  margin: 0;
  padding: 0;
}
#exs_thumbnail_view #exs_thumbnail_container #exs_thumbnail_wrapper img {/* サムネイル画像 */
  float: left;
  display: block;
  cursor: pointer;
  width: 106px;
  height: 42.4px;
  margin: 17px 7px 0 7px;
}

/* CSS3アニメーション
---------------------------------------------------------------------------------------------------------------------------------------*/
#exs_thumbnail_view #exs_thumbnail_container #exs_thumbnail_wrapper img.selected {/* 真ん中のサムネイル画像 */
  width: 132px;
  height: 53px;
  margin: 11px 7px 0;
}



/* アニメーション時に大バナーキャッチ画像が2px動くバグ対策（chrome）
------------------------------------------------------------------------*/
div#recommend_on_top div.item p.comment img {
  -webkit-backface-visibility: hidden;
}

/* Firefoxで縮小した画像の右や下が1pxほど切れる対策
------------------------------------------------------------------------*/
@-moz-document url-prefix() {
  #exs_thumbnail_view #exs_thumbnail_container #exs_thumbnail_wrapper img {
    position: relative;
    left: -3px;
    width: 108px;
    height: 43px;
  }
}
div#recommend_on_top #exs_main_visual a:hover img,
div#recommend_on_top #exs_thumbnail_container a:hover img {/* recommend.cssの内容をキャンセル */
    opacity: 1;
    filter: alpha(opacity=100);
}

/* ===========================================================
  ナビゲーションボタン
===========================================================*/
/* 共通設定
---------------------------------------------------------------------*/
#exs_main_visual a.exs_thumbnail_nav {
  position: absolute;
  top: 0;
  display: block;
  width: 24px;
  height: 75px;
  outline: none;
}
#exs_main_visual a.exs_thumbnail_nav:hover {
  opacity: 0.95;
  filter: alpha(opacity=95);
}

#exs_main_visual a#exs_thumbnail_prev {/* ← */
  left: 0;
  box-shadow: 2px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
#exs_main_visual a#exs_thumbnail_next {/* → */
  right: 0;
  box-shadow: -2px 0px 2px 0px rgba(0, 0, 0, 0.1);
}
/* 表示中サムネイル赤枠
---------------------------------------------------------------------*/
#exs_thumbnail_mark {
  position: absolute;
  top: 11px;
  left: 225px;
  z-index: 20;
  diaplay: block;
  width: 127px;
  height: 49px;
  background: none;
  border: 3px solid #cb0000;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.18);
}
/* ====================================================
  金利0円アイコン
  #6608: YKKAP＿ローン金利手数料０円キャンペーン
====================================================*/
div#recommend_on_top .bnr_item p.figure {
  z-index: 1;
}
#recommend_on_top .bnr_item .icon_ykkap_fee0yen {
  position: absolute;
  top: 80px;
  left: 7px;
}
/* ====================================================
  エクスショップおすすめ商品ピックアップ
====================================================*/
#centerColumn .recommendTable_hd {
  background: url(/public/img/recommend_on_top/h_recommend_item.png) no-repeat;
  width: 585px;
  height: 52px;
  text-indent: -9999px;
  margin: 27px 0 7px;
}
#centerColumn ul.recommendTable {
  border-right: #bbb 1px solid;
  overflow: hidden;
}
#centerColumn ul.recommendTable li {
  float: left;
}
#centerColumn ul.recommendTable li a {
  float: left;
  overflow: hidden;
  display: block;
  width: 146px;
  height: 211px;
  background: url("/public/img/img_top/recommend/sprite_recommend_item.webp?20260701") no-repeat 0 0;
  text-indent: 100%;
  white-space: nowrap;
  *text-indent: -9999px;/* IE7 */
}

#centerColumn ul.recommendTable li.rcm01 a { background-position: 0px 0px;}
#centerColumn ul.recommendTable li.rcm02 a { background-position: -146px 0px;}
#centerColumn ul.recommendTable li.rcm03 a { background-position: -292px 0px;}
#centerColumn ul.recommendTable li.rcm04 a { background-position: -438px 0px;}
#centerColumn ul.recommendTable li.rcm05 a { background-position: 0px -211px;}
#centerColumn ul.recommendTable li.rcm06 a { background-position: -146px -211px;}
#centerColumn ul.recommendTable li.rcm07 a { background-position: -292px -211px;}
#centerColumn ul.recommendTable li.rcm08 a { background-position: -438px -211px;}
#centerColumn ul.recommendTable li.rcm09 a { background-position: 0px -421px;}
#centerColumn ul.recommendTable li.rcm10 a { background-position: -146px -421px;}
#centerColumn ul.recommendTable li.rcm11 a { background-position: -290px -421px;}
#centerColumn ul.recommendTable li.rcm12 a { background-position: -438px -421px;}
#centerColumn ul.recommendTable li.rcm13 a { background-position: 0px -631px;}
#centerColumn ul.recommendTable li.rcm14 a { background-position: -146px -631px;}
#centerColumn ul.recommendTable li.rcm15 a { background-position: -290px -631px;}
#centerColumn ul.recommendTable li.rcm16 a { background-position: -438px -631px;}

/* ====================================================
  中項
====================================================*/
#centerColumn ul.banner_w290 {
  width: 590px;
  margin-bottom: 16px;
}
#centerColumn ul.banner_w290 li {
  float: left;
  margin: 5px 5px 0px 0px;
}
#centerColumn ul.banner_w290 li a{
  overflow: hidden;
  display: block;
  width: 290px;
  height: 132px;
  background: url("/public/img/img_top/banner/sprite_bnr_w290.webp?20260701") no-repeat 0 0;
  text-indent: 100%;
  white-space: nowrap;
  *text-indent: -9999px;/* IE7 */
}

#centerColumn ul.banner_w290 li.bnr01 a {  background-position: 0px 0px;}
#centerColumn ul.banner_w290 li.bnr02 a {  background-position: -290px 0px;}
#centerColumn ul.banner_w290 li.bnr03 a {  background-position: 0px -132px;}
#centerColumn ul.banner_w290 li.bnr04 a {  background-position: -290px -132px;}
#centerColumn ul.banner_w290 li.bnr05 a {  background-position: 0px -264px;}
#centerColumn ul.banner_w290 li.bnr06 a {  background-position: -290px -264px;}
#centerColumn ul.banner_w290 li.bnr07 a {  background-position: 0px -396px;}
#centerColumn ul.banner_w290 li.bnr08 a {  background-position: -290px -396px;}
#centerColumn ul.banner_w290 li.bnr09 a {  background-position: 0px -528px;}
#centerColumn ul.banner_w290 li.bnr10 a {  background-position: -290px -528px;}


/* ホバー効果
-------------------------------------- */
#centerColumn ul.banner_w290 li a,
#centerColumn ul.recommendTable li a,
#centerColumn .special_item a {
  transition: all 0.2s ease-in 0s;
}
#centerColumn ul.banner_w290 li a:hover,
#centerColumn ul.recommendTable li a:hover,
#centerColumn .special_item a:hover {
  filter: alpha(opacity=70);
  opacity: 0.7;
  transition: all 0.2s ease-out 0s;
}
/* ====================================================
  #14461: [和]非対面現調LP・フォーム改修依頼
====================================================*/
.lead-noncontact {
  margin: 14px 0 20px;
}
.lead-noncontact a {
  display: block;
  height: 40px;
  color: #0068b7;
  background-color: #eee;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}
/* ====================================================
  #18373: [和]EXHP＞台風にまつわるお知らせフォーム
====================================================*/
.lead-tyn-notice {
  margin: 14px 0 20px;
}
.lead-tyn-notice a {
  display: block;
  height: 40px;
  color: #0068b7;
  background-color: #eee;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}
/* ====================================================
  #28999: [横]EXHP＞YKKAP&LIXIL販売価格据え置きキャンペーンページ作成依頼
====================================================*/
.lead-pricechange {
  margin: 14px 0 20px;
}
.lead-pricechange a {
  display: block;
  color: #f00;
  background-color: #eee;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  text-decoration: underline;
  padding: 10px;
}

div#recommend_on_top #bnr_YKCP110163 { background: url("/public/img/item/common/menu/recommend/cp/sprite_YKCP110163.png?20260602") 0px 0px no-repeat;}
div#recommend_on_top #bnr_YKCP240167 { background: url("/public/img/item/common/menu/recommend/cp/sprite_YKCP240167.webp?20260602") 0px 0px no-repeat;}

/* ====================================================
  #30577: [横]EXHP＞Instagram投稿表示依頼
====================================================*/
.instagram-post {
  margin: 45px 0 60px;
  font-family: 'Helvetica neue', Helvetica, Arial, Meiryo, sans-serif;
}
.instagram-post-head {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.instagram-post_ttl {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding-left: 44px;
  background: url(/public/img/api/instagram/icon_instagram_gradient.svg) left center no-repeat;
  background-size: 34px;
  font-size: 19px;
  font-weight: bold;
}
.instagram-post_catch {
  margin-left: auto;
  font-size: 14px;
}
.instagram-post-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-right: -1px;
}
.instagram-post-list li {
  background-color: #efefef;
}
.instagram-post-list img {
  width: 190px;
  height: 240px;
  object-fit: contain;
  vertical-align: middle;
}
.instagram-post-modal {
  padding: 0 !important;
}
.instagram-post-modal * {
  box-sizing: border-box;
}
.instagram-post-modal-inner {
  display: flex;
  height: 100%;
  font-family: 'Helvetica neue', Helvetica, Arial, Meiryo, sans-serif;
}
.instagram-post-glightbox .gslide-inline {
  border-radius: 4px;
}
.instagram-post-modal_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 640px;
}
.instagram-post-modal_img img {
  width: 100%;
  height: auto;
}
.instagram-post-modal-detail {
  position: relative;
  width: 400px;
  padding: 16px;
  overflow-y: auto;
}
.instagram-post-modal_close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
}
.instagram-post-modal_close img {
  width: 14px;
  height: auto;
}
.instagram-post-modal_txt a {
  font-weight: bold;
}
.instagram-post-modal-usr {
  display: flex;
  align-items: center;
  gap: 0 14px;
  margin-bottom: 10px;
}
.instagram-post-modal_profile-img img {
  width: 32px;
  height: 32px;
  border: 1px solid #bbb;
  border-radius: 50%;
}
.instagram-post-modal_username {
  font-weight: bold;
}
.instagram-post-glightbox .gbtn.disabled {
  cursor: auto;
}
.instagram-post_more {
  margin-top: 18px;
  text-align: center;
}
.instagram-post_more a {
  display: inline-grid;
  place-items: center;
  height: 34px;
  padding: 0 58px;
  border: 1px solid #205fc0;
  border-radius: 5px;
  background-color: #fff;
  color: #205fc0;
  font-size: 14px;
  text-decoration: none;
}