@charset "UTF-8";
/* ==============================================
スタイルブック 共通css
/* ============================================= */

/*全体*/
@font-face{font-family: 'Kosugi'; src: url(/fonts/WSB_Kosugi-Regular.ttf); font-weight: 500; font-display: swap;}
@font-face{font-family: 'Noto Sans'; src: url(/fonts/WSB_NotoSansJP-Regular.otf); font-weight: 400; font-display: swap;}
body{font-family: 'Kosugi', 'Noto Sans';}

/*目次*/
#table_contents a{font-weight: bold;display: block; padding-left:5%;background-color:white; color:#5a4f53; text-decoration: none; line-height: 30px; font-size: 12px;}
#table_contents li{font-weight: bold;display: block;width: 155px; height: 30px; background-color: white; color:#5a4f53; text-decoration: none;  line-height: 30px; font-size: 12px;    padding: 3px 0;}
.table_contents_list{text-align: center;}
#table_contents a:hover{cursor: pointer;color:#c0c6bd;}
#topbutton{display: none; opacity: 0.9;}
#wrap{background: #f2f2f2;overflow: hidden;}
div#container{background: #f2f2f2;width:1200px;padding:0;}
#table_contents{position: fixed;bottom: 70px;right: 0px;z-index: 2;}
.sidebar_inner span{font-size: 16px;}
.breadcrumbs{padding: 84px 0 0 0;}
.breadcrumbs span{color: #666;padding-left: 2px;line-height: 160%;font-size: 11px;font-weight: bold;}

/*共通ヘッダー*/
.ws_header{background:#f2f2f2; padding-top: 10px;width: 100%; position: fixed; z-index: 99; transition: all .6s; min-width: 1200px; margin: 0 auto 14px;top:0; left:0; right:0;}
.ws_header.ws_header_change{ color: #fff;}
.ws_header a{text-decoration: none;}
.ws_headerbox{position: relative; width: 1200px; margin: 0px auto; padding:0 0 9px 0;}
.ws_headerbox_l{float: left; margin-top: 13px;}
.ws_logo_b{height: 35px;width: auto;}
.ws_headerbox_r{float: right; width: 432px; padding-top: 1px;}
.ws_header_tel{float: left; width: 154px; line-height: 0; padding: 0 15px; vertical-align: middle;}
.ws_header_nav{margin: 0; padding: 0; right: 0; line-height: 0; width:370px;}
.ws_header_nav li{float: left; text-align: center;}
.ws_header_nav_text{display: block; font-size: 10px; padding-top: 38px;}
.header02_menubox {width: 100%;display: flex;justify-content: space-between;}

.header02box_l{float: left; width: 160px; padding-top: 1px;}
.header02box_r{display: flex;width: auto;position: relative; float: right; padding-top: 1px;}
img.header02_tel_b{width: 154px;height: auto;}
.header02_tel{float: left; width: 154px; line-height: 0; padding: 6px 15px; vertical-align: middle;}
.header02_nav{position: initial;margin: 0; padding: 0; right: 0px; line-height: 0; width: 320px;}
.header02_nav li{float: left; text-align: center; font-weight: bold;}
.header02_nav ul,.header02_nav02 ul {display: flex;}
.header02_nav02 {margin: 0 30px 0 0;padding: 0;line-height: 0;}
.header02_nav02 li{font-weight: bold;}
.header02_nav02 li a {display: flex;padding: 30px 20px;font-size: 14px;align-items: flex-start;}
.header02_nav_text{display: block; font-size: 10px; padding-top: 38px;font-weight: bold;}
.header02_login_w img{padding-left: 3px}
.header02_contact {width: 78px; height: 53px;  background: url(/products/images/common/contact.png) no-repeat 0 0;
    background-size: 39% 44%;
    background-position: 23px 7px ;line-height: 100%; overflow: hidden;}
.header02_login_w {width: 86px; height: 53px;
    background: url(/user_data/packages/default/img/contents/work-style/header/login.png) no-repeat 0 0;
    background-size: 30% 55%;
    background-position: 28px 5px; line-height: 100%; overflow: hidden;}
.header02_login_r {width: 86px; height: 53px;
    background: url(/user_data/packages/default/img/contents/work-style/header/login02.png) no-repeat 0 0;
    background-size: 44% 48%;
    background-position: 23px 5px; line-height: 100%; overflow: hidden;}
.header02_store {width: 78px; height: 53px;
    background: url(/user_data/packages/default/img/contents/work-style/header/store.png) no-repeat 0 0;
    background-size: 41% 51%;
    background-position: 21px 4px;
    line-height: 100%;
    overflow: hidden;}
.header02_cart {line-height: 150%;}
.header02_cart .header_cartnav{background-size: 39%;background-position: 22px 3px;}
.header02_cart .header_cartnav > a{font-size:10px;padding-top: 35px;font-weight: bold;}
.header02_cart .header_cartnav a.occart:hover{opacity: 1.0;background-color: unset;}
.header02_nav a:hover{color: #c0c6bd;}
.header02_contact a:hover{color: #c0c6bd;}
.header02_login_w a:hover{color: #c0c6bd;}
.header02_cart a:hover{color: #c0c6bd;}
.header02_store a:hover{color: #c0c6bd;}
.header02_login_r a:hover{color: #c0c6bd;}

/*ページャースタイル*/
.ws_list_sortbox{text-align: center; margin-top: 10px; margin-bottom: 20px;}
.ws_list_sortbox ul{display: inline-block; vertical-align: middle;}
.pageactive{padding: 8px 12px;}
.list_pager li{font-size: 14px;border-radius: 18px;}
.list_pager li a{padding: 8px 12px!important;}
.list_pager li.pageactive{background: #27996a;}

/*トップ＆カテゴリー*/
.ws_wrapper{width: 1200px; line-height: 1.5;}
.ws_wrapper a, .ws_list a{text-decoration: none;}
.ws_databox{vertical-align: middle; display: block;}
.ws_status{display: block; float: left; margin-right: 15px;}
.ws_status:after{display: block; clear: both; height: 0px; line-height: 0px; visibility: hidden; content: ".";}
.ws_status li{margin: 0px 13px 6px 0px; padding-bottom: 6px; float: left; font-size: 11px; line-height: 1; color: #333; border-bottom: 1px #ccc dashed;}
.ws_status li:before{content: "＃"; color: #c5b198; font-weight: bold;}
.ws_status li.ws_status_cate a{color: #fff; text-decoration: none;}

/*TOP_スタイリング一覧*/
.ws_updatebox{font-size: 12px; color: #555; line-height: 1.2; padding:2px 0 2px 16px; background: url(/user_data/packages/default/img/contents/work-style/time.gif) 0 45% no-repeat;float: left;margin-right: 10px;}
.ws_list_s>ul{display: flex;flex-flow: wrap;flex-direction: row;gap: 33px;}
.ws_list_s a:hover{color: gray;opacity: 0.9;}
.ws_list_s li.ws_list{width: calc((100% - 33px * 3) / 4); margin-bottom: 30px;}
.ws_list_s li:nth-child(3n).ws_list{margin-right: 0px;}
.ws_list_img_s{position: relative; overflow: hidden;}
.ws_list_img_s img{width: 100%;height: auto; transition-duration: 0.3s;}
.ws_list_img_s img:hover{transform: scale(1.06);transition-duration: 0.5s;}
.ws_list_ttl_s{font-weight: bold; font-size: 17px; margin: 8px 0 5px; line-height: 1.4;}
.ws_list_text_s{font-size: 12px; padding-bottom: 12px;}
.ws_list_img_l.new:before, .ws_list_img_s.new:before{position: absolute; z-index: 2; top: -15px; bottom: 0; left: 0; display: block; width: 100%; margin: auto; content: ""; background: url(/user_data/packages/default/img/contents/work-style/new.gif) no-repeat;}


/*TOP_共通見出し*/
.ws_list_h{position: relative; margin: 4em auto 3.9em; width: 300px; font-size: 23px; font-weight: bold; line-height: 1; text-align: center; letter-spacing: 0.05em;}
.ws_list_h:before{content: ''; position: absolute; bottom: -12px; display: inline-block; width: 250px; height: 1px; left: 50%; letter-spacing: 0.1em; background-image: linear-gradient(to right, #333, #333 3px, transparent 3px, transparent 8px); background-size: 6px 6px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
span.ws_list_h_s{content: ''; position: absolute; width: 300px; bottom: -34px; left: 0%; display: block; font-size: 11px; letter-spacing: 0.2em;}

/*TOP_共通*/
.ws_ex_about_text{font-size: 15.5px;letter-spacing: 0.05em;line-height: 1.9;}
.ws_ex_about{margin-top: 100px}

/*TOP_メイン*/
.ws_coord_top_text{position: relative; width: 1450px;  margin: 0px auto;}
.stb_ttl1{display: inline;padding: 0.8em;line-height: 1.3;color: #5a4f53; position: absolute;z-index: 1;top: -166px;left: 662px; font-weight: bold; font-family:"Yu Mincho", "YuMincho", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", serif;}
.stb_ttl1_color{color: #27996a;}
.stb_ttl1_size{font-size: 62px;}
.stb_ttl1_mini_{font-size: 40px; background-color: transparent; display: inline-block;}
.stb_ttl1_mini{background-color: #ffffffe0;padding: 9px 14px;font-size: 40px; display: inline-block;}
.stb_ttl1 .top_ttl_1 {background-color: #ffffffe0;position: absolute;left: -60px;top: -42px;padding: 12px 12px 0 12px;}

/*TOP_カテゴリタイトル*/
.ws_ex_about_h{position: relative;text-align: center;font-size: 30px;font-weight: bold;padding-bottom: 30px;}
.ws_ex_about_h::after{content: "";position: absolute;width: 14%;border-bottom: 4px dashed rgb(222 222 222);bottom: 12px;left: 50%;transform: translateX(-50%);}

/*TOP_カテゴリ*/
.ws_ex01 ,.ws_ex02 ,.ws_ex03 ,.ws_ex04{padding-top: 100px;}
.ws_ex04{padding-bottom: 100px;}
.ws_ex_contents_img{margin-top: -100px;padding-top: 100px;}
.ws_ex_contents_img img{height: auto;width: 100%;}
.ws_ex_contents{display: flex;justify-content: space-between;padding-top:80px;align-items: flex-start;}
.ws_ex_contents_tit{font-size: 23px;font-weight: 500;margin-bottom: 0.5em;}
.ws_ex_contents_text{font-size: 15px;margin-bottom: 1.5em;letter-spacing: 0.05em;line-height: 1.9;}
.ws_ex_contents_box{width: 565px;}
.ws_ex_contents_box a{text-decoration: none;font-size: 14px;}
.ws_ex_contents_box a:hover{color: gray;opacity: 0.6;}

/*TOP_小規模でも叶う、おしゃれなオフィスデザイン・空間レイアウト*/
.ws_ex_suggest>li{display: flex;padding-top: 48px; justify-content: space-between;text-align: center;}
.ws_ex_suggest>li a{text-decoration: none;}
.ws_ex_suggest>li a:hover{color: #565656;opacity: 0.9;}
.ws_ex_suggest>li p{font-size: 17px;padding: 11px 0 0 15px;position: relative;display: inline-block;}
.ws_ex_suggest>li p::before{content: "";position: absolute;left: -22px;top:15px;display: inline-block;width: 8px;height: 8px;margin: 0 10px;border-top: 2px solid #27996a;border-right: 2px solid #27996a;transform: rotate(45deg);}
.ws_ex_suggest>li p::after{content: "";display: inline-block;width: 8px;height: 8px;margin: 0 10px;border-top: 2px solid #27996a;border-right: 2px solid #27996a;transform: rotate(45deg);position: absolute;top: 15px;left: -13px;}
.ws_ex_suggest_img{overflow: hidden;transition-duration: 0.3s;height: 210px;}
.ws_ex_suggest_img img{transition-duration: 0.3s;width: 290px;height: 100%; object-fit: cover;}
.ws_ex_suggest_img img:hover{transform: scale(1.06);transition-duration: 0.5s;}
	
/*TOP_おすすめの事例集*/
.ws_ex_suggest_topic_item{display: grid;grid-template-columns: auto 1fr; gap:8px;width: 100%;background-color: #ffffff;overflow: hidden;}
.ws_ex_suggest_topic_left{padding: 0.6em 0 0 1em;position: relative;}
.ws_ex_suggest_topic_ex{position: relative; padding: 0.4em 0.4em 0.8em 1.6em;}
.ws_ex_suggest_topic_ex::before{content:"";display: inline-block;width: 8px;height: 8px;margin: 0 10px;border-top: 2px solid #27996a; border-right: 2px solid #27996a; transform: rotate(45deg); position:absolute; top:9px; left:-4px;}
.ws_ex_suggest_topic_ex::after{content:"";display: inline-block;width: 8px;height: 8px;margin: 0 10px;border-top: 2px solid #27996a; border-right: 2px solid #27996a; transform: rotate(45deg); position:absolute; top:9px; left:-12px;}
.topic_title{line-height: 1.7em;padding-bottom: 0.1em; background:linear-gradient(transparent 60%, #f4f4e7 60%); display: inline;font-size: 1.1em;}
.ws_ex_suggest_topic_left>.ws_status{padding-top: 10px;position: absolute;bottom: 4%;}
.ws_ex_suggest_topic_left>.ws_status{float: none;}
.topic_img{background-color: #ffffff; width: 264px; height: auto;}
.ws_ex_contents_box .ws_ex_suggest_topic a:hover{color: gray;opacity: 0.8;}

/*TOP_アンカーリンク*/
.anchorlink{display: flex; justify-content: space-between; max-width: 600px;margin: auto;padding-bottom: 20px;}
.anchorlink>li{padding: 30px 10px;position: relative;text-align: center;}
.anchorlink>li a{display: inline-block;font-size:16px;text-decoration: none;border-radius: 100vh; width: 130px;height: 130px;background-color: rgb(39 153 106);margin: 0 auto;text-align: center;line-height: 120px;color: white;position: relative;border: 2px solid white;}
.anchorlink>li a:hover{color: rgb(39 153 106);background-color: white;border: 2px solid rgb(39 153 106);}
.anchorlink>li a::after{content: "";display: inline-block;vertical-align: middle;color: #333;line-height: 1;width: 12px;height: 12px;border: 0.1em solid white;border-left: 0;border-bottom: 0;box-sizing: border-box;transform: translateY(-25%) rotate(135deg);position: absolute;bottom: 24px;left: 0;right: 0;margin: auto;transition: .3s;}
.anchorlink>li a:hover::after{border: 0.1em solid rgb(39 153 106 / 80%);border-left: 0;border-bottom: 0;bottom: 20px;}
.anchorlink>li .circle150{width: 150px;height: 150px;line-height: 142px;}
.icon,.icon150{display: inline-block;width: 100%;height: auto;position: relative;padding: 0 1em;}
.icon::before,.icon::after,.icon150::before,.icon150::after{display: block;content: "";position: absolute;top: 50%;left: 0;right: 0;margin: 0 auto; width: 16px;height: 2px;background: rgb(39 153 106);}
.icon::before,.icon150::before{transform: rotate(-45deg);}
.icon::after,.icon150::after{transform: rotate(45deg);}

/*リストページ*/
.main_comment3 h1 {font-size: 23px;}
.main_comment3 h2 {font-size: 11px;}
.main_comment3 .ws_list_h {line-height: 3;}
.main_comment3 .ws_list_h:before{bottom: 28px;}
.main_comment3 .ws_list_h {margin: 3em auto 2.9em;}

/*コーディネートページ_h1*/
.ws_coord_list_ttl_l.h1_top,.ws_coord_list_ttl_l.h1_bottom {position: absolute;display: inline-block;padding: 8px 8px 8px 12px;background-color: rgba(0, 0, 0, .6);color: #dedede;font-weight: normal;}
.ws_coord_list_ttl_l.h1_top{top: 35px;}
.ws_coord_list_ttl_l.h1_bottom{bottom: 20px;}

/*コーディネートページ_モーダル*/
#scrollModal{justify-content: center; align-items: center;}
.scroll-modal-overlay{position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .85); z-index: 1000; display: none;}
.scroll-modal-overlay.active{display: flex;}
.scroll-modal-content{position: relative; background-color: #fff; border-radius: 8px; max-height: 90vh;/*width: 80%;*/ display: flex; flex-direction: column;margin-inline: 80px;}
.scroll-modal-close {position: absolute;top: -6px;right: -50px;z-index: 1010;cursor: pointer;width: 45px;height: 45px;color: #fff;display: flex;align-items: center;justify-content: center;font-size: 40px;font-weight: bold;line-height: 1;}
.modal-image-wrapper{display: block;padding: 30px;overflow-y: auto;}
.modal-image-wrapper > div {margin-bottom: 40px;}
.modal-image-wrapper > div:last-child {margin-bottom: 0;}
.modal-image-container {background: #000;margin: 0 auto;max-width: 1300px;}
.modal-image-container img {width: 100%;height:auto;max-width: 1300px;object-fit: contain;aspect-ratio:16/9;}
.modal-video-container {width: 100%;height: auto;max-width: 1300px;aspect-ratio: 16 / 9;background-color: #000;margin: 0 auto;}
.modal-video-container video,
.modal-video-container iframe {width: 100%;height: 100%;border: none;display: block;}

/*コーディネートページ_モーダル_スクロールバー*/
.modal-image-wrapper::-webkit-scrollbar{width: 10px;}
.modal-image-wrapper::-webkit-scrollbar-track{background: #f1f1f1; border-radius: 8px;}
.modal-image-wrapper::-webkit-scrollbar-thumb{background: #888; border-radius: 8px;}
.modal-image-wrapper::-webkit-scrollbar-thumb:hover{background: #555;}

/*コーディネートページ_slider_メイン*/
.slider-for,.slider-nav {margin: 0;padding: 0;list-style: none;}
.slider-for{margin: 0 auto 16px;}
.slider-for .slick-slide img{width: 1200px;height: 600px;object-fit: cover; }
.slider-for .slick-slide iframe{width: auto; height: 600px; aspect-ratio: 16 / 9;}
.youtube-container.slick-slide.slick-current.slick-active{text-align: center;}

/*コーディネートページ_slider_ナビ*/
.slider-nav{max-width: 1200px; margin: 0 auto;}
.slider-nav .slick-slide{cursor: pointer; padding: 0 8px;}
.slider-nav .slick-slide img {width: 100%; aspect-ratio: 16 / 9; object-fit: cover;}
.slider-nav .slick-slide:not(.slick-center) {filter: opacity(40%); transition: 0.2s linear;}

/*コーディネートページ_slider_矢印*/
.slick-prev, .slick-next{background-image: none; opacity: 1!important; width: 55px; height: 55px; background: rgba(0, 0, 0, .6); border-radius: 50%; position: absolute; z-index: 1;}
.slick-prev{left: -30px;}
.slick-next{right: -30px;}
.slick-next:before,.slick-prev:before{content: ""; display: inline-block; width: 15px; height: 15px; border-top: solid 3px #fff; border-right: solid 3px #fff; position: absolute; z-index: 2;}
.slick-next:before{transform: rotate(45deg);top: 33%;left: 29%;}
.slick-prev:before{transform: rotate(225deg);top: 33%;left: 42%;}

/*コーディネートページ_slider_Youtube*/
.youtube-thumbnail {position: relative;}
.youtube-thumbnail::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; background-color: rgba(0, 0, 0, .8); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M9 6v12l9-6z'/%3E%3C/svg%3E"); background-size: 65px; background-position: center; background-repeat: no-repeat;}

/*コーディネートページ_slider_mp4*/
video.slick-video {height: 600px;width: 100%;max-width: 1400px;}

/*コーディネートページ_slider_アイコン*/
.modal-icon-link { position: absolute; bottom: 28%; right: 2%; z-index: 10; width: 58px; height: 58px; background-color: rgba(0, 0, 0, .6); border-radius: 50%; background-image: url(/user_data/packages/default/img/contents/work-style/parts/modal_icon.png); background-repeat: no-repeat; background-position: center; background-size: 52%; transition: background-color .2s;cursor: pointer;}
.modal-icon-link:hover { background-color: rgba(0, 0, 0, .8);background-size: 60%;}

/*コーディネートページ_メインイメージ＋ミニ画像*/
.ws_coord_pin{position: absolute;}
.ws_coord_wrapper{width: 1200px; line-height: 1.5;position:relative;}
.ws_coord_wrapper a{text-decoration: none;}
.ws_coord_wrapper a:hover img{opacity:1; filter:alpha(opacity=80); outline:none;}
.ws_coord_mainstyle{position: relative; width: 1200px;}
.ws_coord_mainstyle img{display: block;max-width: 1200px;}
.ws_coord_st_item{z-index:1000; opacity:0; position:absolute; background:#FFF; width:210px; margin: 0 0 -200px -60px; padding: 15px; bottom: 100%; cursor: pointer; -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); pointer-events: none; transition:0.4s all;}
.ws_coord_st_item img{width:100%; margin-bottom:4px;}
.ws_coord_st_item h4{margin-bottom: 4px;}
.ws_coord_st_item .item_link{display: block; margin-top: 10px; padding: 8px 16px 7px; font-size: 14px; line-height: 1; text-align: center; letter-spacing: 0.05em; color: #fff; background: #cc0917; transition: all .5s;}
.ws_coord_st_item .item_link:hover{opacity:0.60; filter:alpha(opacity=60); outline:none;}
.ws_coord_st_item a{display: block;}
.ws_coord_st_item a:hover{color: #333;}
.ws_coord_pin img{position:relative;}
.ws_coord_pin:hover img{opacity:1 !important;}
.ws_coord_pin:hover .ws_coord_st_item{display:block; z-index: 100; opacity:1; pointer-events: auto; transform: translateY(34px);}
.ws_coord_pointer{display: inline-block; padding: 0 10px; font-weight: 700; cursor: pointer; width:40px;height: auto;}
.ws_mini_img{display: flex;justify-content: space-between; flex-wrap: wrap;}
.ws_mini_img a {margin-bottom: 25px;}

/*コーディネートページ_メインテキスト*/
.ws_coord_list_l{width: 1200px; margin-bottom: 24px; padding-top: 25px;}
.ws_coord_list_ttl_l{font-weight: bold; font-size: 27px; letter-spacing: 0.05em; padding: 0; margin: -5px 0 10px;line-height: 150%;}
.ws_coord_list_text_l{font-size: 14.5px; margin-bottom:1.5em; letter-spacing: 0.05em; line-height: 1.9;}
.ws_coord_textbold{font-weight: bold;}
.ws_coord_textbold a{display: inline!important;}
.ws_coord_features_h{font-size: 30px; font-weight: normal;}
.ws_coord_features_h .number{font-size: 35px;}

/*コーディネートページ_使用アイテム一覧*/
.ws_itemlist{width: 1200px; margin: -18px 0 100px;}
.ws_itemlist a{text-decoration: none;}
.ws_itemlist_ttl span{display: block; color: #cc0917; font-size:16px; margin-top: 4px;}
.ws_itemlist ul{display: block; font-size: 0;}
.ws_itemlist ul:after{display: block; clear: both; height: 0px; line-height: 0px; visibility: hidden; content: ".";}
.ws_item li{width: 190px; display: inline-block; margin-right: 11px; margin-bottom: 30px; vertical-align: top;}
.ws_item li:nth-child(6n){margin-right: 0px;}
.ws_item a{display: block;}
.ws_item img{padding: 6px; width: 100%; box-sizing: border-box; margin-bottom: 5px; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);}
.ws_item p{color: #cc0917; font-size: 14px; font-weight: bold;}
.ws_item h3{font-weight: normal; font-size: 16px; margin-bottom: 4px; height: 45px; line-height: 150%; letter-spacing: 0.4px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}
.ws_item_price{font-size: 12px;}
.ws_item_price span{color: #cc0917; font-weight: bold; font-size: 15px; line-height: 1.3;}
.ws_item_price2{font-size: 11px;}
.ws_item_price2 span{color: #333; font-weight: bold; font-size: 12px; line-height: 1.3;}
.yotpo-display-wrapper{height: 20px;}

/*コーディネートページ_メインステータス周辺*/
.ws_coord_databox{vertical-align: middle; display: block; margin-bottom: 110px;}
.ws_coord_status{display: block; float: left; margin-right: 15px;}
.ws_coord_databox:after, .ws_coord_status:after{display: block; clear: both; height: 0px; line-height: 0px; visibility: hidden; content: ".";}
.ws_coord_status li{margin: 0px 15px 6px 0px; padding: 6px 2px 8px 0; float: left; font-size: 12px; line-height: 1; color: #333; border-bottom: 1px #ccc dashed;}
.ws_coord_status li:before{content: "＃"; color: #c5b198; font-weight: bold; padding-right: 1px;}
.ws_coord_status li.ws_coord_status_cate a{color: #333; text-decoration: none;}
.ws_coord_status li.ws_coord_status_cate a:hover{opacity: 0.5;}
.ws_coord_updatebox{float: left; font-size: 13px; line-height: 2; padding-left: 1rem; background: url(/user_data/packages/default/img/contents/work-style/time.gif) 0 45% no-repeat; opacity: 0.9;margin-right: 10px;}

/*コーディネートページ_各ポイント*/
.ws_coord_point ul{margin-bottom: 110px;}
.ws_coord_point li{display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -js-display: flex; margin-bottom: 100px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.ws_coord_point li:nth-of-type(even){-webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
.ws_coord_point li > div:last-child{width: 565px;}
.ws_coord_point li > div a{position: relative; display: block; color:#39614f;}
.ws_coord_point li > div a.ws_coord_inline{display: inline;}
.ws_coord_point li > div a img{opacity: 1; -webkit-transition: .3s; transition: .3s;}
.ws_coord_point li > div a:hover img{opacity: 0.8;}
.ws_coord_point li > div a div{display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-flow: row wrap; flex-flow: row wrap; -js-display: flex; -ms-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 5px;}
.ws_coord_point li > div a div h5{font-size: 20px; margin-right: 5px;}
.ws_coord_point img{display: block; width: 580px; height: auto;}
.ws_coord_point ul li div p{font-size: 16px; line-height: 2.2;}
.ws_coord_point-tit{display: block; margin: 0.4rem 0 1.2rem 0; font-size: 20px; font-weight: bold; line-height: 1.5;}
#point1,#point2,#point3,#point4,#point5,#point6,#matome,#itemlist{margin-top:-100px; padding-top:100px;align-self: center;}

/*コーディネートページ_カテゴリリンク*/
a.btn_23 {font-size: 17px; float: right; display: block; text-align: center; vertical-align: middle; text-decoration: none; width: 320px; margin-bottom: 50px; padding: 1rem 3rem; font-weight: bold; border: 2px solid #5a4f53; color: #5a4f53; cursor: pointer; position: relative; overflow: hidden; z-index: 1;}
a.btn_23::before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #5a4f53; transform: translateX(-100%); transition: all .3s; z-index: -1;}
a.btn_23:hover::before {transform: translateX(0);}
a.btn_23:hover {color: #fff;}

/*コーディネートページ_カートインダイアログ*/
.ws_itemlist ul {display: grid;font-size: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px;}
.list_cart input {font-size: 13px;}
.list_cart input {margin-top: 2px !important;}
.listcart_btn{background: #ffffff; color: #e60000; border: 1px solid #e60000;}
.listcart_btn,.listcart_btn:hover {line-height:100%;padding: 12px 12px 12px 32px;box-sizing: border-box;background: url(/user_data/packages/default/img/contents/work-style/parts/tabcart_red.png) no-repeat;background-repeat: no-repeat !important;background-position: 34px 9px !important; background-size: 21px auto !important;}
.listcart_btn:hover {background: #e60000 url(/user_data/packages/default/img/hns/tabcart.png) no-repeat;}
ul.ws_item {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 15px;}
.ws_item li {width: auto;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);padding :15px 15px 0;background: #fff;margin: 0;}
.ws_item li:nth-child(6n) {margin-right: 0;}
.ws_item img{box-shadow: 0 0 0 #fff;padding: 0px;}
.ws_item h3 {font-weight: normal;font-size: 14px;margin-bottom: 4px;letter-spacing: 0.1px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;}
.ws_item_price2 {display:none;}
.ws_item_price span{font-size: 17px;}
.ws_item_price {font-size: 14px;margin:3px 0 4px;}
.cartattenbox{width: 100%;padding: 12px 0 12px;border: 1px solid #ccc;color: #fff;background: #ccc;box-sizing: border-box;font-weight: bold;border-radius: 3px;text-align: center;font-size: 13px;margin-top: 15px;line-height: 100%;}

/*フッター*/
.subnav li a{color:#5a4f53;}
.subnav li a:hover{ color:gray;text-decoration: none;}
#ws_footer_1{background:#dbdfd9; color:#5a4f53; font-size: 11px; line-height: 170%; letter-spacing: 0;}
#ws_footer_2{background:#c0c6bd; color:#5a4f53;font-weight: bold;}
.ws_footerbox{width: 1200px; margin: 0px auto; padding: 25px 0 30px;    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif;}
.ws_footer_flex{display: flex; list-style: none;}
.ws_footer_flex_parts{width: 24%; margin-right: 4%; padding: 60px 0; text-align: center;}
.ws_footer_flex_parts:last-child{margin-right: 0;}
.ws_footer_flex_parts img{height: 32px;width: auto;}
.ws_footer_flex_parts a{color: #5a4f53 !important; text-decoration: none;font-weight: bold;}
.ws_footer_flex_parts a:hover{color: gray !important;}
.ws_footer_flex_h{width: 174px; margin: 1.4em auto 0.6em; padding: 0 0 0.7em; border-bottom: 1px #888 dashed; font-size: 16px; font-weight: bold; line-height: 1; text-align: center; letter-spacing: 0.05em; font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,sans-serif;}

/*ランキング機能20241031add*/
.ws_rank_b_box{width: 1200px;margin: 0 auto;}
.ws_rank_b_box>ul{display: flex;flex-wrap: wrap;}
.ws_rank_b_box>ul>li{width: 220px!important;background-color: #fff;margin: 0 8px;padding-bottom: 30px!important;margin-bottom: 20px;position: relative;}
.ws_rank_b_bg{padding-bottom: 80px;}
.ws_rank_b_bg a{text-decoration: none;}
.ws_rank_b_title{position: relative;text-align: center;font-size: 30px;font-weight: bold;padding-bottom: 30px;margin:100px 0 28px;line-height: 150%;}
.ws_rank_b_title::after {content: "";position: absolute;width: 14%;border-bottom: 4px dashed rgb(222 222 222);bottom: 12px;left: 50%;transform: translateX(-50%);}
.ws_rank_libox{margin: 0px;}
.gia_col_time_s{color: #777;}
.ws_tag_list{margin: 0 12px;padding-bottom: 6px;float: left;font-size: 11px;line-height: 1;color: #333;border-bottom: 1px #ccc dashed;position: absolute;bottom: 12px;}
.ws_tag_list a:before{content: "＃";color: #c5b198;font-weight: bold;}
.slick-prev{left: -24px;top: 50%;opacity: 0.6;}
.slick-next {right: -24px;top: 50%;opacity: 0.6;}
a.ws_rank_link2{position: relative;}
.ws_rankbox2{position: absolute;top: 0;left: 0;padding: 6px 9px;background: #555;color: #fff;font-size: 1.2em;line-height: 1;font-weight: bold;z-index: 1;background: #797979;}
span.ws_rankbox2.ws_rank01,span.ws_rankbox2.ws_rank02,span.ws_rankbox2.ws_rank03{background: #27996a;}
.ws_rank_tt{padding: 4% 6% 3%;}
.ws_rank_tt2{font-size: 0.8rem;font-weight: bold;padding: 3% 0;line-height: 1.3em;}
.ws_rank_b_img img{width: 100%;height: auto;}
.ws_rank_b_img{overflow: hidden;}

/*pageid追加20250203add*/
.ws_coord_pageid{float: left;font-size: 12px;color: #555;line-height: 1.2;padding-top: 2px;}
.gia_col_time_update{margin-right: 10px;}
.gia_col_time_s .ws_coord_pageid{font-size: 12px;color: #777;padding-top: 0px;line-height: 1.5;}
.gia_col_time_s{display: flex;}

/*並べ替え機能追加20260413add*/
.ws_sort_tabs { margin: 12px 0 20px; }
.ws_sort_tabs ul { list-style: none; padding: 0; margin: 0; }
.ws_sort_tabs li { display: inline-block; margin-right: 4px; margin-bottom: 6px; }
a.ws_sort_tab { display: inline-block; padding: 8px 20px; border: 1px solid #27996a; text-decoration: none; color: #27996a; font-size: 13px; border-radius: 50px; }
a.ws_sort_tab.is-active { background: #27996a; color: #fff; }
a.ws_sort_tab.is-disabled { display: inline-block; padding: 4px 12px; border: 1px solid #999; color: #999; cursor: default; }
.ws_sort_tabs a:hover {background: #e6f2ed; color: #27996a;}
.ws_sort_tabs a.ws_sort_tab.is-active:hover {background: #27996a; color: #fff;}