@charset "UTF-8";

html {
  font-size: 10px;
}

/* トップ画面 */


/* ロゴ */
.logo_inner {
  max-width: 1280px;
  /* width: 100%; */
}

 .logo{
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  /* left: 33%; */

}

.logo h1{
  width: 47.33%;
}

.logo h2 {
  font-size: 4rem;
  padding-top: 6.34%;
}

/* nav */
.nav_maxwidth {
  width: 100%;
  max-width: 1280px;
  justify-content: space-between;
}

.padding_nav {
  padding: 3.5% 0;
}

.nav_wrapper {
  width: 66.67%;
  justify-content: flex-start;
  align-items: unset;
}

.nav_category {
  width: 36.87%;
  margin-right: 1.88%;
  padding: 0;
}

.category_arr {
  width: 25%;
}
.search_length {
  width: 60.37%;
}

.search_input {
  font-size: 1.8rem;
  padding-left: 6.11%;
}

/* 虫眼鏡アイコン */
.search_icon {
  content: "";
  width: 4.58%;
  display: inline-block;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  top: 50%;
  right: 6.11%;
}

.nav_icons {
  width: 29.06%;
}

.loggin_id {
  margin-right: 10.75%;
  font-size: 1.5rem;
}

.icons {
  display: flex;
  justify-content: space-between;
  width: 19.35%;
  display: flex;
  justify-content: space-between;
}
.heart_icon{
  opacity: .8;
  text-align: start;
}
.user_icon{
  opacity: .8;
  text-align: end;
}
.logout {
  opacity: .8;
  margin-left: 10.75%;
}

/* アニメーション */
.heart_icon:hover{
  opacity: 1;
  transition: .5s;
}
.user_icon:hover{
  opacity: 1;
  transition: .5s;
}
.logout:hover{
  opacity: 1;
  transition: .5s;
}
/* アニメーションここまで */

.category_text {
  margin-left: 10%;
  font-size: 1.8rem;
}

/* recomend_item */
.recomend_item {
  width: 20.83%;
  margin-top: 1.58%;
  /* margin-right: 20px;
  margin-left: 20px; */
}
.top_material_name{
  font-size: 2rem;
}
/* アニメーション */
.recomend_img_wrapper{
  overflow: hidden;
  max-width: 100%;
}
.reccomend_img {
  transform: scale(1);
}
.recomend_arrow {
  transform:translateX(0);
  transition:.5s;
  width: 16%;
}
/* recomend_itemクラスをホバーした際に動かす */
.recomend_item:hover .reccomend_img{
    transform: scale(1.2);
  transition: .5s;
} 
.recomend_item:hover .recomend_arrow{
   transform:translateX(9px);
}
/* アニメーションここまで */
.recomend_item_text {
  width: 68.25%;
  justify-content: center;
  align-items: start;
  flex-direction: column;
  line-height: 2;
  padding: 7% 0 7.25% 0;
}
.favorite_material_name{
  font-size: 2rem;
}
.recomend_item_inner{
  padding:0 3.75% 0 8% ;
}
.product_number{
  font-size: 1.6rem;
}
.MORE_text{
  font-size: 2.4rem;
}
.btn_more {
  width: 20.83%;
  margin-top: 4.17%;
}

.more_wrapper{
 padding: 8% 3.5% 8% 8%;
}
/* アニメーション */
.more_animation:hover{
  transform:translateX(20px);
  transition:.5s;
}
/* アニメーションここまで */

/* category */
.category_wrapper{
  margin-top: 4.17%;
}
.category_block {
  width: 66.67%;
  padding: 5.21% 0 5.73% 0;
}
.categories_text{
  font-size: 2rem;
  padding:3.5%  0;
  margin-left: 3.75%;
}
.categories_arrow{
  width: 12%;
}
.categories_wrapper {
  width: 65.63%;
}
.categories{
    flex-wrap: wrap;
    justify-content: space-between;
}
.categories_inner{
  width: 47.62%;
}
.categories_inner:nth-child(n+3){
  padding-top: 0.715%;
}

/* information */
.information {
  width: 41.82%;
  margin-top: 6.25%;
}
.info_wrapper{
  margin-top: 5.98%;
}
.ft_size_info{
  font-size: 1.8rem;
}
.information .flex {
  justify-content: start;
}
.info_title{
  margin-left:3.75%;
}
.info_arrow {
  margin-left: auto;
  width: 5.98%;
}
.info_inner {
  padding: 3.61% 0 2.99% 0;
}

.information:last-child {
  border-bottom: #000 solid 1px;
}

/* footer */
.footer_margin{
  margin-top: 8.33%;
}
.footer_wrap {
  width: 66.67%;
  padding: 2.08% 0 2.19% 0;
}
.footer_text_left{
  width: 16.02%;
}
.footer_text_size{
  font-size: 1.5rem;
}
.site_policy {
  margin-right: 15.61%;
}
.copywriter{
  font-size: 1.4rem;
  opacity: 0.8;
}

/*========================================================================
login.html
=======================================================================*/
.login_wrapper{
  max-width: 1280px;
}
.login_form_wrapper{
  margin-bottom: 12.5%;
}
.login_container{
  margin-top: 7.81%;
  width: 50%;
}
.login_heading{
  width: 63.13%;
}
.login_logo{
  width: 59.32%;
}
.login_SDC{
  opacity: .9;
  font-size: 3.2rem;
  margin-top: 7.92%;
}
.login_input{
  background: #000;
  padding-bottom: 5.782%;
  font-size: 2.4rem;
  border: none;
  border-bottom: 1px solid white;
}
.login_button{
  font-size: 2.4rem;
  border: none;
  opacity: .8;
  padding:5% 0;
  transition:.5s;
}
/* アニメーション */
.login_button:hover{
  opacity: 1;
}
/* アニメーションここまで */
.login_forgot{
  margin-top: 6.25%;
  font-size: 1.8rem;
}
/* 最後のフォームにはマージンボトムを設定しない */
.login_form:not(:last-child){ 
  margin-bottom: 6.25%;
}
.login_inner{
  margin-top: 11.25%;
}
.login_input::placeholder{
  opacity: .4;
  padding:0;
  font-size: 2.4rem;
}
.login_form_title{
  font-size: 2.4rem;
  padding-bottom: 2.5%;
}


/*========================================================================
item_detail.html
=======================================================================*/


/* ハンバーガーメニュー */
.hamburger-menu{
  display: none;
  width: 14.04%;
}
/* .menu-btn {
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  background-color: #3584bb;
} */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
  content: '';
  display: block;
  height: 2px;
  width: 32px;
  background-color: #ffffff;
  position: absolute;
}
.menu-btn span:before {
  bottom: 9px;
}
.menu-btn span:after {
  top: 9px;
}
/* ハンバーガーメニューここまで */




.detail_main_wrapper{
  max-width: 1280px;
  margin-top: 4.17%;
  align-items: flex-start;
}
.detail_main{
  width: 45%;
}
.detail_item_img{
  width: 50%;
}
.detail_productnum_wrapper{
  margin-top: 1.39%;
}
.detail_material_name{
  font-size: 3.2rem;
}
.detail_product_num{
  margin-right: 0.69%;
}
.detail_content_fontsize{
  font-size: 1.6rem;
}
.detail_head{
  font-size: 2rem;
  margin-top: 4.17%;
  margin-bottom: 2.78%;
}
.detail_FLAT{
  font-size: 1.6rem;
  margin-top: 10%;
}
.detail_button_width{
  width: 30.56%;
}
.detail_HALF{
  font-size: 1.5rem;
  margin-top: 12.5%;
  letter-spacing: -.04em;
}
.detail_button{
  width: 45.45%;
  padding:0;
  background: none;
}
.color_chip:not(:last-child){
  margin-right: 4.35%;
}
.detail_margin{
  margin-top: 8.33%;
}
.detail_button_layout{
  width: 47.92%;
  padding: 3.99% 0;
  transition:.3s;
}
.detail_button_inner{
  width: 79%;
}
.detail_button_ic{
  width: 9.09%;
}
.detail_button_text{
  width: 90.91%;
  font-size: 1.6rem;
  transition:.3s;
}
.detal_DL{
  padding: 0;
}
/* アニメーション */
.detail_button_layout:hover{
  border: #1432AA 1px solid;
}
.detail_button_layout:hover .detail_button_text{
  color: #1432AA;
}
/* アニメーションここまで */

.detail_tag_wrapper{
  flex-wrap: wrap;
  width: 88.72%;
}
.detail_tag{
  margin-right: 1.6em;
  margin-bottom: 1.6em;
  line-height: 1;
  font-size: 1.4rem;
}

.sharp{
  margin-right: .286em;
  font-size: 1.7rem;
}
/*  Return to previous page */
.return_wrapper{
  margin:4.17% 0  7.14% 0;
}
.return{
  max-width: 282px;
  width: 14.69%;
  border-bottom: 1px solid rgba(0,0,0,.8);
}
.return_inner{
  padding-bottom: 2.84%;
}
.return_arr{
  width: 11.35%;
}
.return_text{
  font-size: 2rem;
}
.recommend_wrapper{
  padding-bottom: 4.17%;
}
.recommend{
 font-size: 3.2rem;
 padding: 2.08% 0;
}
.detail_recommend{
  margin-top: 0;
}
/*========================================================================
wishlist.html
=======================================================================*/
.content_heading{
  background-color: #F2F3F6;
  padding: 4.17% 0;
}
.favorite_item_wrapper{
  flex-wrap: wrap;
  max-width: 1280px;
  align-items: start;
  margin-top: 4.17%;
}
.favorite_item{
  width: 22.66%;
  overflow: hidden;
}
.favorite_item:nth-child(n+5){
  margin-top:  3.13%;
}
.trash_btn{
  width: 20.69%;
  padding-top: 20.69%;
  background-color: #fff;
}
.trash_ic{
  position:absolute;
  top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
  transition: .5s;
}
.trash_hover{
  opacity: 0;
}
.comment_edit_btn{
  width: 100%;
  font-size: 1.6rem;
  color: #1432AA;
  border: 1px solid  #1432AA;
  background: none;
  padding: 6.21% 0;
}
.comment_edit_wrapper{
  margin-bottom: 9.31%;
}
.comment_edit_wrapper::before{
  z-index: -1;
  transition:.2s;
  content:"";
  position:absolute;
  top: 50%;
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 0%;
  height:100%;
  background-color: #1432AA;
}
/* アニメーション */
.trash_btn:hover .trash_hover{
  opacity: 1;
}
.comment_edit_wrapper:hover::before{
  left: 50%;
  width: 100%;
  transition:.4s;
}
.comment_edit_wrapper:hover .comment_edit_btn{
  color: #ffffff;
  transition:.4s;
}
/* アニメーションここまで */

.favorite_inner_wrapeer{
  align-items: start;
  margin: 8.28% 0 6.55%;
}
.favorite_item_text{
  align-items: start;
  flex-direction: column;
}
.favorite_product_num_wrapper{
  margin-top: 6.35%;
    margin-bottom: 8.73%;
}
.favorite_product_num{
  opacity: .5;
  font-size: 1.5rem;
}
.favorite_item_code{
  font-size: 1.6rem;
}
.Registered_Date{
  opacity: .5;
  font-size: 1.5rem;
}
.time_data{
  opacity: .7;
  font-size: 1.5rem;
}
.time_margin{
  margin-right: 1em;
}
.comment_wrapper{
  background-color:rgba(0,0,0,0.05);
  /* margin-bottom: 13.79%; */
} 
.comment_text{
  font-size: 1.4rem;
  overflow-wrap: break-word;
  padding: 8.28%;
}
.page_num{
  font-size: 2.4rem;
  width: 26.53%;
  display: flex;
  justify-content: space-between;
}
.page_num_wrapper{
  width: 20.42%;
  margin-top: 2.66%;
  margin-bottom: 8.33%;
}
.page_arr{
  width: 16.33%;
}
.flip_horizontal{
  transform: scaleX(-1);
}
/*========================================================================
item_list$image.html
=======================================================================*/
.item_list_wrapper{
  max-width: 1280px;
  align-items: start;
}
.item_list_aside_wrapper{
  width: 25%;
  max-width: 320px;
}
.item_list_aside{
  max-width: 272px;
  padding: 7.5% 0;
}
.item_list_CATEGORY{
  font-size: 2.4rem;
}
.selecting_category{
  background-color: #1432AA;
  padding:.6rem .8rem;
  font-size: 1.4rem;
}
.item_list_nav{
  background-color: #F2F3F6;
}
.item_list_nav_head{
  font-size: 1.6rem;
  padding-bottom: 5%;
  border-bottom: 1px solid rgba(0,0,0,.2);
}
.item_list_form{
  flex-direction: column;
  align-items: start;
  font-size: 1.4rem;
  margin-top: 8.09%;
}
.item_list_content_wrapper{
  width: 68.75%;
}
.item_list_aside_head{
  margin-bottom: 10%;
}
.item_list_clear_wrapper{
  width: 20.94%;
}
.item_list_CLEAR{
  font-size: 1.4rem;
}
.selecting_category:not(:nth-child(3)){
  margin-right: 2.5%;
}
.selecting_category:nth-child(n+4){
  margin-top: 2.5%;
}
.selecting_category_wrapper{
  margin-bottom: 10%;
}
.item_listCLEAR_btn{
  padding-bottom: .8rem;
}
.item_list_genre:not(:nth-child(1)){
  margin-top: 14.71%;
}
.item_list_checkbox_wrapper:not(:nth-child(1)){
  margin-top: 2.94%;
}
.item_list_label{
  margin-left: .8rem;
}
.item_list_checkbox{
  accent-color: #000;
}
.item_list_count{
  font-size: 3.2rem;
}
.item_list_count_wrapper{
  font-size: 2.4rem;
  margin-bottom: 4.17%
}
.item_list_page_num{
  font-size: 1.8rem;
}
.item_list_page_num:not(:last-child){
  margin-right: 1.6rem;
}
.item_list_count_width{
  width: 21.82%;
}
.item_list_sort_arr{
  transform: rotate(90deg);
}
.item_list_SORT{
  font-size: 1.6rem;
}
.item_list_sort_wrapper{
  width: 18.41%;
  align-items: center;
  padding:0;
}
.item_list_sort_btn{
  width: 70.37%;
  margin:7.41% 9.88% 7.41% 19.75%;
  align-items: center;
}
.view_details_wrapper{
  overflow: hidden;
}
.view_details_btn{
  width: 100%;
  font-size: 1.4rem;
  color: #000000;
  border: 1px solid  #000000;
  background: none;
  padding:7.14% 6.61% 7.14% 7.32%;
  /* padding:7.14% 0;
  padding-left: 7.32%;
  padding-right: 6.61%; */
}

/* 
.view_details_wrapper{
  margin-bottom: 9.31%;
} */
.view_details::before{
  z-index: -1;
  transition:.2s;
  content:"";
  position:absolute;
  top: 50%;
	left: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 0%;
  height:100%;
  background-color: #000000;
}


.grain_item{
  width: 31.82%;
}
.item_list_material_name{
  font-size: 1.8rem;
}
.item_list_product_num_wrapper{
  display: flex;
}
.item_list_product_num{
  font-size: 1.6rem;
}
.item_list_product_code{
  font-size: 1.6rem;

}
.item_list_text_wrapeer{
  align-items: start;
  margin: 5.71% 0 8.57%;
}
.item_list_main_wrapper {
  flex-wrap: wrap;
  max-width: 880px;
  align-items: start;
  margin-top: 4.55%;
}
.itemm_list_view_arrow{
  width: 13.28%;
}
.list_view_white_arr{
  display: none;
}
.list_view_arr{
  position: absolute;
  left: 0;
}
/* アニメーション */

.view_details:hover::before{
  left: 50%;
  width: 100%;
  transition:.4s;
}
.view_details:hover .view_details_btn{
  color: #ffffff;
  transition:.4s;
}
.view_details:hover .list_view_white_arr{
  display: block;
}
.view_details:hover .list_view_black_arr{
  transition:0.1s;
  opacity:0;
}
/* アニメーションここまで */



/*========================================================================
以下は標準テンプレ
=======================================================================*/
/* sass */
/* 
.l-head {
  transition: background-color .2s;
  overflow: hidden;
  height: 96px;
}

.top .l-head {
  height: auto;
}

.l-head a {
  text-decoration: none;
}

.nav-active .l-head .l-inner {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 40px;
}

.nav-active .l-head {
  background-color: #304567;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 9999;
  top: 0;
  left: 0;
}

.logo-wrap {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 20px 0 10px;
  margin: auto;
  z-index: 10;
}

.nav-active .logo-wrap {
  background-color: #304567;
}

.l-head .logo {
  text-align: center;
}

.l-head .logo>.head,
.l-head .logo>.main {
  display: block;
}

.l-head .logo>.head {
  font-size: 0;
  line-height: 0;
  width: 95px;
  height: 36px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  margin: -11px auto 0;
  background: url(../images/logo_b.svg) no-repeat center/contain;
}

.top .l-head .logo>.head,
.nav-active .l-head .logo>.head {
  background: url(/shared/image/logo_w.svg) no-repeat center/contain;
}

.l-head .logo>.main {
  color: #000000;
  font-size: 1.9rem;
  font-weight: 700;
  margin: 10px 0 0 0;
}

.top .l-head .logo>.main,
.nav-active .l-head .logo>.main {
  color: #ffffff;
}

.nav-wrap {
  display: flex;
  flex-direction: column-reverse;
  padding: 0 20px;
}

.nav-sp-btn {
  display: block;
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: absolute;
  left: 20px;
  top: 20px;
  z-index: 10;
}

.nav-sp-btn>span {
  display: block;
  height: 2px;
  background-color: #000000;
  position: relative;
  transition: all .3s;
}

.nav-sp-btn>span::before,
.nav-sp-btn>span::after {
  transition: all .3s;
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  background: #000000;
  position: absolute;
}

.nav-sp-btn>span::before {
  top: -8px;
}

.nav-sp-btn>span::after {
  bottom: -8px;
}

.top .nav-sp-btn>span {
  background-color: #ffffff;
}

.top .nav-sp-btn>span::before,
.top .nav-sp-btn>span::after {
  background: #ffffff;
}

.nav-active .nav-sp-btn>span {
  background: transparent;
}

.nav-active .nav-sp-btn>span::before,
.nav-active .nav-sp-btn>span::after {
  background: #ffffff;
}

.nav-active .nav-sp-btn>span::before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nav-active .nav-sp-btn>span::after {
  bottom: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.nav-active.top .nav-sp-btn>span {
  background: transparent;
}

.nav-sub {
  transition: opacity .2s;
  opacity: 0;
  display: none;
  flex-wrap: wrap;
  text-align: center;
}

.nav-sub>li {
  width: 50%;
  margin-top: 30px;
  position: relative;
}

.nav-sub>li:nth-child(even)::before {
  content: '';
  width: 1px;
  height: 60%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #ffffff;
}

.nav-sub>li>a {
  font-size: 1.4rem;
  color: #ffffff;
}

.nav-sub>li.works {
  order: 2;
}

.nav-sub>li.sustainability {
  order: 3;
}

.nav-sub>li.showroom {
  order: 4;
}

.nav-sub>li.qa {
  order: 5;
}

.nav-sub>li.inq {
  order: 6;
}

.nav-sub .btn {
  order: 1;
  width: 100%;
  margin-top: 0;
}

.nav-sub .btn>a {
  text-align: center;
  display: block;
  color: #304567;
  background-color: #ffffff;
  padding: 18px 20px;
  margin-top: 10px;
  font-weight: 700;
  font-size: 1.6rem;
}

.nav-active .nav-sub {
  display: flex;
  opacity: 1;
}

.nav-gbl {
  transition: opacity .2s;
  opacity: 0;
  padding: 116px 0 0;
  display: none;
}

.nav-gbl>li a {
  display: block;
  padding: 20px 0;
  color: #ffffff;
  font-weight: 700;
  font-size: 1.8rem;
}

.nav-gbl>li a>span {
  font-weight: 400;
  font-size: 1.2rem;
  margin-left: 10px;
}

.nav-gbl>li a>span.br-sp {
  display: block;
  margin-left: 0;
  margin-top: 8px;
}

.nav-active .nav-gbl {
  display: block;
  opacity: 1;
  overflow: auto;
}

body {
  overflow-x: hidden;
}

.l-body {
  overflow-y: hidden;
}

.bg-square-fix .l-body::before,
.bg-square-fix .l-body::after {
  content: '';
  display: block;
  position: absolute;
}

.bg-square-fix .l-body::after {
  width: 263px;
  height: 616px;
  background: url(/shared/image/bg_sq_left.svg) no-repeat center/263px auto;
  top: 874px;
  left: 0;
  z-index: -1;
}

.l-body-main {
  position: relative;
  padding: 0 20px;
  margin-bottom: 100px;
}

.top .l-body-main {
  margin-bottom: 0;
}

.l-body-main * {
  line-height: 1.5;
}

.bread-crumb {
  margin: 10px 0 0;
  padding: 0 20px;
  color: #7185A7;
  font-size: 1.2rem;
  line-height: 2;
}

.bread-crumb>ol {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  overflow-scrolling: touch;
  overflow: auto;
}

.bread-crumb>ol li {
  white-space: nowrap;
}

.bread-crumb>ol li:not(:first-child)::before {
  margin: 0 .5em;
  content: '/';
}

.bread-crumb a {
  color: #7185A7;
  text-decoration: none;
}

.l-foot {
  background-color: #4B4B4B;
  position: relative;
  z-index: 1;
}

.l-foot .l-inner {
  padding: 72px 36px 78px;
}

.foot-cnt-wrap a {
  text-decoration: none;
  color: #ffffff;
}

.foot-hdg {
  font-weight: 700;
  font-size: 2rem;
  margin-left: -16px;
}

.foot-hdg a {
  text-decoration: none;
  color: #ffffff;
}

.foot-nav {
  margin-top: 40px;
}

.foot-nav ul {
  display: flex;
  flex-wrap: wrap;
  margin-left: -1em;
}

.foot-nav ul>li {
  width: calc(50% - 1em);
  margin-left: 1em;
}

.foot-nav ul>li>a {
  display: block;
  line-height: 1.5;
}

.foot-nav ul>li>a[target="_blank"] {
  padding-right: 22px;
  display: inline-block;
  position: relative;
}

.foot-nav ul>li>a[target="_blank"]::after {
  content: '';
  background: url(/shared/image/icn_blank_w.svg) no-repeat right center/16px auto;
  width: 16px;
  height: 12px;
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  right: 0;
  top: .8em;
}

.foot-nav .fst>li.has-child {
  width: calc(100% - 1em);
}

.foot-nav .fst>li>a {
  font-weight: 700;
  padding: 12px 0;
  font-size: 1.6rem;
}

.foot-nav .snd>li>a {
  font-weight: 400;
  padding: 6px 0;
  font-size: 1.4rem;
  color: #CCCCCC;
}

.foot-btn {
  margin-top: 40px;
}

.foot-btn>li {
  text-align: center;
  margin-top: 20px;
}

.foot-btn>li a {
  display: block;
  border: 1px solid #ffffff;
  line-height: 1.5;
  padding: 13px;
  color: #CCCCCC;
  font-size: 1.4rem;
}

.foot-btn>li a>span {
  display: inline-block;
  position: relative;
}

.foot-btn>li.inq a>span {
  padding-left: 22px;
}

.foot-btn>li.inq a>span::before {
  position: absolute;
  left: 0;
  top: .2em;
  content: '';
  background: url(/shared/image/icn_inq_w.svg) no-repeat center/18px auto;
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
}

.foot-btn>li.doc a>span {
  display: inline-block;
  padding-left: 24px;
}

.foot-btn>li.doc a>span::before {
  position: absolute;
  left: 0;
  top: .35em;
  content: '';
  background: url(/shared/image/icn_doc_w.svg) no-repeat center/17px auto;
  width: 17px;
  height: 13px;
  display: inline-block;
  vertical-align: middle;
}



.foot-btm-wrap a,
.foot-btm-wrap small {
  color: #CCCCCC;
  text-decoration: none;
}

.foot-sub-nav {
  display: flex;
  justify-content: center;
}

.foot-sub-nav>li a {
  line-height: 1.5;
  font-weight: 300;
  font-size: 1.2rem;
}

.foot-sub-nav>li:not(:first-child) {
  margin-left: 20px;
  padding-left: 20px;
  position: relative;
}

.foot-sub-nav>li:not(:first-child)::before {
  content: '';
  width: 1px;
  height: 60%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background-color: #CCCCCC;
}

.copy {
  text-align: center;
  margin-top: 20px;
}

.copy>small {
  line-height: 1.5;
  font-size: 1.2rem;
  font-weight: 300;
}

.page-top-wrap {
  position: relative;
  height: 0px;
  display: flex;
  justify-content: flex-end;
}

.page-top {
  position: fixed;
  bottom: 0;
  margin-bottom: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity linear 0.3s;
  z-index: 99;
}

.poswatchBottomUp .page-top {
  position: absolute;
}

.scrollwatchScrolled .page-top {
  opacity: 1;
  pointer-events: auto;
}

.page-top>a {
  text-decoration: none;
  display: block;
  width: 42px;
  height: 42px;
  background-color: rgba(48, 69, 103, 0.5);
  position: relative;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.page-top>a::after {
  left: 0;
  right: 0;
  top: 17px;
  margin: auto;
  position: absolute;
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  -webkit-transform: translateX(0) translateY(0);
  transform: translateX(0) translateY(0);
  transition: -webkit-transform .2s;
  transition: transform .2s;
  transition: transform .2s, -webkit-transform .2s;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
} */


/* メディアクエリ追加 */


@media screen and (max-width: 768px) {
  /* スマホ画面で非表示にする */
  .SP_none{
    display: none;
  }
  /* スマホ画面で表示する */
  .SP_display{
    display: block;
  }
  /*========================================================================
ログイン画面
=======================================================================*/
  .login_wrapper {
    max-width: 428px;
}
.login_container {
  margin-top: 14.72%;
  width: 88.79%;
}
  .login_heading {
    width: 58.88%;
}
.login_logo {
  width: 62.89%;
}
.login_SDC {
  font-size: 2rem;
  margin-top: 8.49%;
}
.login_inner {
  margin-top: 11.21%;
}
.login_form_title {
  font-size: 1.6rem;
  padding-bottom: 4.21%;
}
.login_input{
  padding-bottom: 7.37%;
  font-size: 1.6rem;
}
.login_input::placeholder{
  font-size: 1.6rem;
}
.login_form:not(:last-child) {
  margin-bottom: 10.53%;
}
.login_form_wrapper {
  margin-bottom: 10.53%;
}
.login_button {
  font-size: 1.8rem;
  padding: 6.32% 0;
}
.login_forgot {
  margin-top: 6.25%;
  font-size: 1.8rem;
}
.login_forgot {
  margin-top: 10.53%;
  font-size: 1.4rem;
}
/*========================================================================
item_detail.html
=======================================================================*/

/* ヘッダー */

.SP_header_width{
  max-width: 428px;
}
.common_header {
  width: 88.55%;
  padding: 5.54% 0 6.86% 0;
}
.common_header_logo{
  width: 39.84%;
}
.common_DNP{
  width: 51.66%;
}
.common_SDC {
  font-size: 1.2rem;
  margin-top: 5.3%;
}
.common_icons_inner{
  margin-right: 10.088%;
  width: 28.07%;
}
.hamburger-menu{
  display: block;
}
.common_header_ic:first-child {
  order:1;
}
/* メインコンテンツ */
.SP_width{
  max-width: 428px;
}
.detail_main_wrapper{
  max-width: 88.55%;
  flex-direction: column;
  align-items: center;
}
.detail_item_img{
  width: 100%;
}
.detail_main {
  width: 100%;
  margin-top: 4.21%;
}
.detail_material_name{
  font-size: 2.4rem;
}
.detail_content_fontsize{
  font-size: 1.6rem;
}
.detail_productnum_wrapper {
  margin-top: 2.11%;
}
.TYPE_wrapper{
  margin-top: 4.21%;
}
.color_wrapper{
  margin-top: 5.53%;
}

.detail_head{
  font-size: 1.6rem;
  margin-top: 0;
  margin-bottom: 2.11%;
}
.detail_button_width{
  width: 33.68%;
}
.detail_button{
  width: 43.75%;
}
.detail_FLAT , .detail_HALF{
  font-size: 1rem;
  margin-top: 14.29%;
}
.color_chip{
  width: 14.74%;
}
.color_chip:not(:last-child) {
  margin-right: 4.21%;
}
.detail_margin {
  margin-top: 8.42%;
}
.detail_button_wrapper{
  justify-content: center;
}
.detail_button_layout {
  width: 47.89%;
  padding: 5.26% 0;
}
.detail_button_text{
  font-size: 1.4rem;
}
.detail_button_inner {
  width: 82.42%;
}
.detail_button_ic {
  width: 10.67%;
}
.detail_tag_wrapper {
    width: 91.58%;
}
.detail_tag {
  margin-bottom: 0.8em;
  line-height: 1;
  font-size: 1.4rem;
}
.sharp {
  margin-right: 0.246em;
  font-size: 1.2rem;
}

.return_wrapper {
  max-width: 420px;
  margin: 0 auto;
}
.return{
  width: 68.16%;
}
.return_margin{
  margin: 21.05% 0;
}
.recommend {
  font-size: 2.4rem;
  padding: 5.61% 0 1.87% 0;
}
.dot_wrapper{
  padding-bottom: 3.74%;
}
.dot_inner{
  display:flex;
  justify-content: space-between;
  max-width: 428px;
  width: 31.78%;
  margin: 0 auto;
}
.dot{
  padding-top: 1px;
  width: 17.65%;
  background: white;
  opacity: .6;
}
.dot:first-child{
  opacity:1;
}
.recomend_item{
    width: 100%;
    margin: 0 auto;
}
.recommend_wrapper{
  padding-bottom: 0;
}
.recommend_item_wrapeer{
  max-width: 428px;
  padding: 0 5.61%;
  margin: 0 auto;
}
.recomend_item_inner{
  padding: 0;
}
.reccomend_item_text{
  padding: 6.32% 0 12.63% 0;
}
.product_number {
  font-size: 1.5rem;
}
.footer_wrap{
  display: block;
  max-width: 428px;
  padding: 5.61% 5.61%;
  width: 100%;
}
.copywriter{
  font-size: 1.2rem;
  margin-top: 1.5rem;
}
.footer_text_left {
  width: 100%;
  justify-content: flex-start;
}
.site_policy {
  margin-right: 1.6rem;
}
  /*========================================================================
whishlist.html
=======================================================================*/
.content_heading{
  font-size: 2.4rem;
  padding: 9.35% 0;
}
.favorite_item_wrapper{
  flex-direction: column;
  margin-top: 5.61%;
}
.favorite_item {
  max-width: 380px;
  width: 100%;
  margin: 0 auto 7.48%;
}
.favorite_item:nth-child(4){
  margin-bottom: 0;
}
.favorite_img{
  width: 46.84%;
}
.favorite_content{
  display: flex;
  justify-content: space-between;
}
.favorite_text_wrapper{
  width: 46.84%;
}
.favorite_inner_wrapeer{
  margin: 0;
}
.favorite_material_name{
  font-size: 1.6rem;
}
.favorite_item_code{
  font-size: 1.4rem;
}
.time_data{
  font-size: 1.2rem;
}
.comment_edit_wrapper{
  margin-bottom: 0;
  margin-top: 8.99%;
}
.comment_edit_btn{
  font-size: 1.2rem;
  padding-top: 8.99%;
  padding-bottom: 9.55%;
}
.trash_btn{
  width: 17.98%;
}
.favorite_product_num_wrapper{
  margin: 8% 0;
}
.comment_wrapper{
  margin-bottom: 0;
  margin-top: 4.74%;
}
.comment_text{
  padding: 6.32%;
}
.comment_edit_wrapper:hover::before{
  display: none;
}
.comment_edit_wrapper:hover .comment_edit_btn {
  color: #1432AA;
}
.page_num_width{
  max-width: 428px;
  margin: 0 auto;
}
.page_num_wrapper{
width: 62.62%;
margin: 14.95%;
}
.page_num{
  width: 34.33%;
  font-size: 2rem;
}
.page_arr{
  width: 17.91%;
}
/* 追加ここまで */




@media print,
all and (min-width: 768px) {
  .fixed-head .l-head+* {
    margin-top: 120px;
  }

  .l-head {
    height: 120px;
    top: -120px;
    transition: top .5s;
  }

  .top .l-head {
    height: 120px;
  }

  .l-head .l-inner {
    padding: 0 0 23px 0;
    position: relative;
  }

  .nav-active .l-head .l-inner {
    height: auto;
    overflow-y: visible;
    padding-bottom: 23px;
  }

  .top.nav-active .l-head,
  .nav-active .l-head {
    background-color: #ffffff;
    height: auto;
    position: static;
  }

  .nav-active.top .l-head {
    background-color: transparent;
  }

  .top.fixed-head .l-head,
  .fixed-head .l-head {
    height: 77px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: 99;
  }

  .top.fixed-head .l-head .l-inner,
  .fixed-head .l-head .l-inner {
    width: 1160px;
    margin: 0 auto;
  }

  .logo-wrap {
    position: absolute;
    padding: 0;
    padding-left: 60px;
    left: 0;
    right: auto;
    top: 10px;
    z-index: 99;
  }

  .nav-active .logo-wrap {
    background-color: transparent;
  }

  .fixed-head .logo-wrap {
    top: -12px;
    padding: 0;
    padding-left: 0;
  }

  .l-head .logo {
    text-align: left;
    display: flex;
    align-items: center;
  }

  .l-head .logo a {
    transition: opacity .2s;
  }

  .l-head .logo a:hover {
    opacity: .6;
  }

  .l-head .logo>.head {
    width: 110px;
    height: 41px;
    margin: 0;
    background: url(../images/logo_b.svg) no-repeat center/contain;
  }

  .nav-active .l-head .logo>.head {
    background: url(../images/logo_b.svg) no-repeat center/contain;
  }

  .l-head .logo>.main {
    margin: 15px 0 0 8px;
    color: #000000;
  }

  .nav-active .l-head .logo>.main {
    color: #000000;
  }

  .top .l-head .logo>.head,
  .nav-active.top .l-head .logo>.head {
    background: url(/shared/image/logo_w.svg) no-repeat center/contain;
  }

  .top .l-head .logo>.main,
  .nav-active.top .l-head .logo>.main {
    color: #ffffff;
  }

  .fixed-head.top .l-head .logo>.head {
    background: url(../images/logo_b.svg) no-repeat center/contain;
  }

  .fixed-head.top .l-head .logo>.main {
    color: #000000;
  }

  .nav-wrap {
    display: block;
    padding: 0;
  }

  .nav-sp-btn {
    display: none;
  }

  .nav-sub {
    opacity: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
    position: relative;
    text-align: left;
    z-index: 1;
  }

  .nav-sub>li {
    width: auto;
    margin-top: 0;
    margin-left: 40px;
  }

  .nav-sub>li>a {
    color: #000000;
    transition: opacity .2s;
  }

  .nav-sub>li>a:hover {
    opacity: .6;
  }

  .nav-sub>li.works {
    order: 1;
  }

  .nav-sub>li.sustainability {
    order: 2;
  }

  .nav-sub>li.showroom {
    order: 3;
  }

  .nav-sub>li.qa {
    order: 4;
  }

  .nav-sub>li.inq {
    order: 5;
  }

  .nav-sub>li:nth-child(even)::before {
    content: none;
  }

  .nav-sub .btn {
    width: auto;
    order: 6;
  }

  .nav-sub .btn>a {
    margin-top: 0;
    font-size: 1.4rem;
    display: inline-block;
    color: #ffffff;
    background-color: #304567;
    padding: 14px 20px;
    border: 2px solid #304567;
    transition: background-color .2s;
  }

  .nav-sub .btn>a:hover {
    background-color: #ffffff;
    color: #304567;
  }

  .top .nav-sub li>a {
    color: #ffffff;
  }

  .nav-active .nav-sub {
    display: flex;
  }

  .fixed-head .nav-sub {
    display: none;
  }

  .nav-gbl {
    position: relative;
    z-index: 10;
    padding: 0;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 1;
  }

  .nav-gbl>li {
    margin-top: 0;
    margin-right: 60px;
  }

  .nav-gbl>li a {
    color: #000000;
    display: inline-block;
    padding: 0;
    font-size: 1.6rem;
    transition: opacity .2s;
  }

  .nav-gbl>li a>span {
    text-align: center;
    display: block;
    margin-left: 0;
    margin-top: 10px;
  }

  .nav-gbl>li a:hover {
    opacity: .7;
  }

  .nav-active .nav-gbl {
    display: flex;
    height: auto;
    overflow: visible;
  }

  .top .nav-gbl>li a {
    color: #ffffff;
  }

  .fixed-head .nav-gbl {
    margin-top: 22px;
  }

  .fixed-head .nav-gbl>li a>span {
    margin-top: 5px;
    font-size: 1rem;
  }

  .fixed-head .nav-gbl>li:last-child {
    margin-right: 0;
  }

  .fixed-head.top .nav-gbl>li a {
    color: #000000;
  }

  body {
    overflow-x: hidden;
  }

  .l-all {
    min-width: 1280px;
  }

  .l-body {
    overflow-x: hidden;
  }

  .bg-square-fix .l-body::after {
    width: 524px;
    height: 1223px;
    background: url(/shared/image/bg_sq_left.svg) no-repeat center/524px auto;
    top: 516px;
  }

  .l-body-main {
    width: 1280px;
    padding: 0 60px;
    margin: 0 auto 240px;
  }

  .bread-crumb {
    width: 1280px;
    padding: 0 60px;
    margin: 18px auto 0;
  }

  .bread-crumb a:hover {
    text-decoration: underline;
  }

  .l-foot .l-inner {
    padding: 20px 60px 20px;
  }

  .foot-cnt-wrap {
    display: flex;
    justify-content: space-between;
  }

  .foot-hdg {
    margin-left: 0;
    width: 300px;
  }

  .foot-hdg a {
    transition: opacity .2s;
  }

  .foot-hdg a:hover {
    opacity: .6;
  }

  .foot-nav {
    margin-top: 0;
    width: 680px;
  }

  .foot-nav a {
    transition: opacity .2s;
  }

  .foot-nav a:hover {
    opacity: .6;
  }

  .foot-nav ul {
    margin-left: -30px;
  }

  .foot-nav ul>li {
    width: calc(25% - 30px);
    margin-left: 30px;
  }

  .foot-nav ul>li>a[target="_blank"]::after {
    top: .3em;
  }

  .foot-nav .fst {
    margin-top: -20px;
  }

  .foot-nav .fst>li {
    margin-top: 20px;
  }

  .foot-nav .fst>li.has-child {
    width: calc(100% - 30px);
    display: flex;
  }

  .foot-nav .fst>li.has-child>a {
    white-space: nowrap;
  }

  .foot-nav .fst>li>a {
    padding: 0;
  }

  .foot-nav .snd {
    margin-left: 10px;
    margin-bottom: 30px;
    margin-top: -14px;
  }

  .foot-nav .snd>li {
    margin-top: 18px;
  }

  .foot-nav .snd>li>a {
    padding: 0;
  }

  .foot-btn {
    width: 180px;
    margin-top: -18px;
  }

  .foot-btn>li {
    margin-top: 18px;
  }

  .foot-btn>li a {
    display: block;
    border: 1px solid #ffffff;
    line-height: 1.5;
    padding: 13px;
    color: #CCCCCC;
    font-size: 1.4rem;
    transition: background-color .2s;
  }

  .foot-btn>li a>span {
    display: inline-block;
    position: relative;
  }

  .foot-btn>li.inq a>span {
    padding-left: 22px;
  }

  .foot-btn>li.inq a>span::before {
    position: absolute;
    left: 0;
    top: .18em;
    content: '';
    background: url(/shared/image/icn_inq_w.svg) no-repeat center/18px auto;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
  }

  .foot-btn>li.inq a:hover {
    background-color: #ffffff;
    color: #4B4B4B;
  }

  .foot-btn>li.inq a:hover>span::before {
    background: url(/shared/image/icn_inq_g.svg) no-repeat center/17px auto;
  }

  .foot-btn>li.doc a>span {
    padding-left: 24px;
  }

  .foot-btn>li.doc a>span::before {
    position: absolute;
    left: 0;
    top: .34em;
    content: '';
    background: url(/shared/image/icn_doc_w.svg) no-repeat center/17px auto;
    width: 17px;
    height: 13px;
    display: inline-block;
    vertical-align: middle;
  }

  .foot-btn>li.doc a:hover {
    background-color: #ffffff;
    color: #4B4B4B;
  }

  .foot-btn>li.doc a:hover>span::before {
    background: url(/shared/image/icn_doc_g.svg) no-repeat center/17px auto;
  }

  .foot-btm-wrap {
    /*margin-top: 110px;*/
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  .foot-btm-wrap a {
    transition: opacity .2s;
  }

  .foot-btm-wrap a:hover {
    opacity: .6;
  }

  .foot-sub-nav {
    display: flex;
    justify-content: flex-start;
  }

  .foot-sub-nav>li a {
    transition: opacity .2s;
  }

  .foot-sub-nav>li a:hover {
    opacity: .6;
  }

  .copy {
    text-align: left;
    margin-top: 0;
  }

  .page-top-wrap {
    width: 1160px;
    margin: 0 auto;
  }
}

@media print,
all and (max-width: 1279px) and (min-width: 768px) {
  body {
    overflow-x: visible;
  }
}

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

  body,
  .l-all,
  .l-body-main,
  .top.fixed-head .l-head .l-inner,
  .fixed-head .l-head .l-inner {
    width: 100%;
  }

  .l-body-main {
    margin: 0 auto 40px;
  }

  .l-body {
    overflow: visible;
  }

  .bread-crumb>ol {
    overflow: visible;
  }

  .bread-crumb>ol {
    display: flex;
    flex-wrap: wrap;
  }

  .bread-crumb>ol li {
    white-space: normal;
  }

  .bread-crumb>ol li:first-of-type,
  .bread-crumb>ol li:nth-of-type(2) {
    white-space: nowrap;
  }

  .bread-crumb>ol li:not(:first-child)::before {
    margin: 0;
    content: none;
  }

  .bread-crumb>ol li:not(:last-child)::after {
    margin: 0 .5em;
    content: '/';
  }


  .l-foot .l-inner {
    padding: 72px 2% 78px;
  }

  .foot-sub-nav {
    display: flex;
    flex-wrap: wrap;
  }

  .foot-sub-nav>li {
    position: relative;
    padding-left: 0;
    margin: 0 0 20px 0;
  }

  .foot-sub-nav>li:last-child {
    margin: 0;
  }

  .foot-sub-nav>li:not(:first-child)::before {
    content: '';
    width: 1px;
    height: 60%;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-color: #CCCCCC;
  }

  .foot-sub-nav>li:last-child::before {
    content: none;
  }

}
}