@charset "utf-8";
/* CSS Document */

/*-----------register original style---------------*/
.va {
  display: flex;
  align-items: center;
}
/* ----------register original style--------ここまで*/




/*----ここから------------kanban original style----------------*/
#sectioncontainer {
  margin-top: 20px;
}

/* Keep from sticking to sides */
.cards-container {
  max-width: 95%;
}

.board-item {
  margin: 5px 0;
  will-change: transform;
}

.board-item-content {
  word-break: break-all;
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  font-size: 17px;
  text-align: center;
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
  box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
  margin: 5px;
}

.delete {
  pointer-events: auto;
}

footer {
  margin-top: 2rem;
}
/*-----ここまで-------------kanban original style----------------*/


/*----ここから------------tab style----------------*/
.tabs {
margin-bottom: -1px !important;
position: relative;
}
.tab-content {
padding: 60px;
top: 197px;
color: #000;
background-color: white;
}
.tab-pane {
display: none;
}
.tab-pane.is-active {
display: block;
width: 50%;
position: relative;
left: 50%;
transform: translateX(-50%);
}
.is-active {
display: initial;
}

.cent{
display: block;
margin: 10px auto;
padding: 5px;
border: 1px solid #ccc}

.video
{display: block;
margin: 0 auto;}

/* CSS from http://embedresponsively.com */
.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*----ここまで------------tab style----------------*/

.sp-image {width:120px;}
.swiper-slide .slide-content .caption {
  position: absolute;
  top: 6px;
  left: -6px;
  color: #FFF;
  font-size: 0.9rem;
  background-color: rgba(40,167,122,0.90);
  padding: 3px 8px;
}

.cat div {border:solid 1px #ccc; min-height:80px;
background:#ccc url(../img/bn_mokume_300.jpg) no-repeat center center /cover;}

.cat div a:hover {font-size:104%;}

.cat div span {font-weight:900; font-size:140%; display:inline-block; margin-top:24px; margin-left:0.4rem;}

.pe-header {font-weight:900; margin-bottom:2rem;}

.content table td, .content table th {padding:inherit;}

.bn-bgimg-01 {background-image:url(../img/bn_gaiheki_300.jpg) !important;}
.bn-bgimg-02 {background-image:url(../img/bn_naiso_300.jpg) !important;}
.bn-bgimg-03 {background-image:url(../img/bn_yane_300.jpg) !important;}
.bn-bgimg-04 {background-image:url(../img/bn_habaki_300.jpg) !important;}
.bn-bgimg-05 {background-image:url(../img/bn_mokume_300.jpg);}
.bn-bgimg-06 {background-image:url(../img/bn_bosui_300.jpg) !important;}
.bn-bgimg-07 {background-image:url(../img/bn_bianco_300.jpg) !important;}
.bn-bgimg-08 {background-image:url(../img/bn_other_300.jpg) !important;}

.tx-shadow{
  color       : #ffffff;
  text-shadow:  2px  2px 8px #333,
               -2px  2px 8px #333,
                2px -2px 8px #333,
               -2px -2px 8px #333;
}

.txx-shadow{
margin:auto;
padding-top:0.5rem !important;
 font-weight:900;
 text-shadow:  2px  2px 8px #159683,
               -2px  2px 8px #159683,
                2px -2px 8px #159683,
               -2px -2px 8px #159683;

  width: 24.5rem;
  animation: typing 3s steps(25), blink .5s step-end infinite alternate;
  white-space: nowrap;
  overflow: hidden;
  border-right: 3px solid;
  /*font-family: monospace;*/
  font-size: 1rem;
}
@keyframes typing {
  from {
    width: 0
  }
}

@keyframes blink {
  50% {
    border-color: transparent
  }
}

.navbar-item img {max-height:52px;}
.navbar-item figure {margin-right:0.5rem;}

/*---------------カテゴリーリスト---------------*/
.all_page a, .cat_list a, .nallow a {display:inline-block; text-decoration: none !important;}
.all_page a {padding:8px;}
.nallow figure {display:inline-block;}
.is-36x36 img {width:36px;}
.content figure {margin-left:0.4rem; margin-right:0.4rem;}
.cat_list dd {margin-left:0.4rem; background-color:#fafafa;}
.cat_list dd a {display:block; padding:6px 4px 0px 0px; border:solid 1px #bbb; margin:1px 0px;}
.cat_list dd a:hover {border:solid 1px #000;}
.wall {padding:2rem;}
.sb-h2 {font-weight:500 !important; padding:8px 8px 8px 20px;}

.hero {background:url('../img/paint_1408.webp') no-repeat 100% /cover !important;}
.hero-head {background-color:rgba(0,0,0,0.4)}
.tabs li a:hover, .navbar-item a:hover {background-color:#00d1b2 !important;}

.sb-pd {padding:4px !important;}
.icon {color:white; margin-right:0.4rem;}
.fa-rotate-45 {
	transform: rotate(45deg);
}
#datepicker a {text-decoration:none; text-align:center;}

/*adds font awesome stars*/
footer li::before {
  content: '\f576';
  font-family: "Font Awesome 5 Free";
  float: left;
  /*margin-left: -1.5em;*/
  font-weight:900;
  margin-right:0.3rem;
  color: #147efb;
}

.navbar-burger {color:white;height: 4.25rem; width:4.25rem;}
.navbar-burger:hover {background-color:#00b89c;}

.login {background-color:rgba(255,255,255,1)}

.sb-register {color:#333 !important; font-size:0.9rem !important; text-align:left !important;}

#page-top{position:fixed;height:60px;bottom:0;right:0;font-size:77%;z-index:100;box-shadow:4px 4px 2px rgba(255,255,255,0.5);margin:0;}
#page-top a{background:rgba(0,0,0,0.6);text-decoration:none;color:#fff;width:60px;padding:14px 0;text-align:center;display:block;border-radius:5px;z-index:100;box-shadow:4px 4px 10px rgba(0,0,0,0.4);}
#page-top a:hover{text-decoration:none;background:#999;}

.sb-margin {margin-top:5rem;}
.sb-bpadding {padding-bottom:5rem !important;}


/* ---toggle CSS～accordion style start--- */
.toggleable__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .8s cubic-bezier(0,1,0,1)
}

.toggleable__control:checked ~ .toggleable__content {
  transition-timing-function: ease-in-out;
  max-height: 800px;
}

.top_qa {margin-left:0.5rem;}
.top_qa details {padding:0.5rem;}
.top_qa .answer {margin:0.5rem; border:dotted 1px #ccc; padding:1rem; background:#ddd;}

.top_qa sammary {
  padding:0.5rem;
  cursor: pointer;
  transition: 0.2s; /* 変化を滑らかに */
}
/* ホバー時のスタイル */
.top_qa sammary:hover {
  cursor: pointer; /* カーソルを指マークに */
  background-color: #EFEFEF;
}


/* Hiding elements in an accessible way */
.hidden--visually {
    border: 0;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/* Theming CSS */

/*body {
  max-width: 600px;
  padding: 3rem 1rem;
  font-size: 1.25rem;
  line-height: 1.333;
  font-family: sans-serif;
  margin: 0 auto;
}*/

.toggleable {
  border-bottom: 2px solid lightgray;
}

.toggleable__label {
  display: block;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem 0;
  cursor: pointer;
}

.toggleable__content {
  margin-top: 1rem;
  padding: 0 2rem;
}

.toggleable__control:checked ~ .toggleable__content {
  margin-bottom: 1rem;
}


.toggleable__label::after {
  content: "▼";
    font-size: 0.8rem;
}

.toggleable__control:checked ~ .toggleable__label::after {
  content: "▲";
}

/*toggle CSSここまで*/

/*メガメニューテンプレート　修正スタイル*/
/*.navbar-link {display:flex; align-self:stretch; color: rgba(255, 255, 255, 1) !important;}*/
.navbar-item {display:inline-flex;}
.navbar-item .has-dropdown .is-hoverable {display:block; padding-bottom:2rem; border-bottom:solid 1px #fff !important;}
.subheader {color:#fff;}

/*1024px以上の時にデフォルトスタイルを修正する*/
@media screen and (min-width: 1024px){

.navbar-link:not(.is-arrowless)::after {
    border-color: #fff;}

.navbar-item {color:#555 !important;}
.wht {color:#fff !important; background-color:rgba(100,100,100,0.75) !important;}
.wht:anylink {color:#555;}

.is-mega-menu-title {color:#555 !important;}

.navbar-dropdown { /*L6265*/
left: 50%; /* will position it at 50% of its relative parent (the .navbar)*/
transform: translateX(-50%); /* will translate it 50% of its own width to the left*/
}

#blogDropdown .column {max-width:280px; overflow:hidden;}
.subheader {color:hsl(204, 86%, 53%); font-weight:900; border-left:solid 0.5rem hsl(204, 86%, 53%); padding-left:0.2rem;}


}/*1024px特例は、ここまで*/

/*.navbar-dropdown a, .navbar-item {background:#999;}*/

/*.navbar-item.has-dropdown {
     align-items: center !important;
     }

@media screen and (min-width: 1024px){
.navbar-start {
   justify-content: flex-end !important;
   }
}*/
@media screen and (max-width: 768px){
.card {padding-top:2rem;}
}

.bnr {text-align:center;}
.bnr img {width:100%; max-width:608px !important;}

.level div {margin-right:1rem; display:block; flex-basis:0; flex-grow:3; flex-shrink:1;}
.nallow {width: 100%;
  background-color: #fff;
  padding: 8px 0px;
  font-size:0.9rem;
  font-feature-settings: "palt" 1;
  letter-spacing: -0.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  }

.nallow figure {display:flex; flex-direction: row; align-items:center; margin-bottom:0.5rem;}
.nallow figcaption {display:inline-flex; align-items:center; vertical-align: middle; /*margin-top:-1rem;*/ margin-left:0.5rem; font-style:normal !important;}

.catindex .card {padding:1rem;}
.catindex .card h4 a {display:block; background:#00D1B2; color:white; padding:0.2rem 1rem;}
.catindex .card-image{width:25%;}
.catindex .media-content p {font-size:0.9rem !important; font-weight:500;}

/* ------------------中身css------------------- */

.nakami {display:flex; flex-wrap:wrap; flex-direction:row; justify-content: flex-start; font-size:0.8rem; padding:0.5rem 1rem; background:#eee;}
.nakami div {flex:auto; padding:4px;}
.list_title {display:inline-flex; color:white; background:rgba(108,196,167,1.00); justify-content:space-between; align-items: center; min-height:30px;}
.list_name a {align-items:center; min-width:280px; font-size:1.1rem; font-weight:500; color:white;  flex-grow: 1; flex-shrink: 0; flex-basis: 50%; padding:1rem;}
.list_mk {display:inline-flex; padding:0 !important; align-self:fllex-end !important; flex-grow: 0; flex-shrink: 0; flex-basis: 50%;}
.list_tm, .list_mkname {align-self:center;}
.list_tm {width:40px; display:none;}
.list_tm img {width:36px;}
/*
.list_mkname p::before {content: "【"; color: white; display:inline-block;}
.list_mkname p::after {content: "】"; color: white; display:inline-block;}
*/

.list_det {display:flex; margin:10px; /*align-items:center;*/}
.list_image {max-width:100px; align-self:center;}
.list_image img {max-width:92px;}


.list_content {align-self:flex-start; margin-left:2rem;}

.h3_list_mk {padding-top:1rem;}
.h3_list_mk img {max-width:36px; margin:0 0.5rem;}
/*.list_mk {display:none;}*/
.list_text p {margin-bottom:1.5rem;}

/* ------------------商品css------------------- */
.prdct {display:flex; flex-wrap:wrap; flex-direction:row; justify-content: flex-start; font-size:0.8rem; padding:0.5rem 1rem; background:white;}
.prdct div {flex:auto; /*padding:0 !important;*/}
.prdct_image {width:100%; max-width:300px;}
.list_title {display:inline-flex; color:white; background:rgba(108,196,167,1.00); justify-content:space-between; align-items: center; min-height:30px;}

#entry h3.det_or {color:white; background:#00d1b2;}
.field {display:inline-flex; flex-wrap:nowrap; justify-content: flex-start; margin:0; padding:0; /*width:300px; border:solid 1px red;*/}
.label, .input {font-size:0.8rem !important; width:80px;}
.input {text-align:center; width:100%; min-width:300px;}
.select, .select select option {font-size:0.8rem !important; width:200px !important;}
/*.cart_item {width:320px; border:solid 1px blue;}*/
.cart_item div {padding:0;}
.is-grouped-center {margin:0 auto; justify-content: center;}



/*タブ切り替え全体のスタイル*/
.c-tabs {
  margin-top: 50px;
  padding-top:30px;
  padding-bottom: 40px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 100%;
  margin: 0 auto;

  display: flex;
  flex-wrap:wrap;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/*タブのスタイル*/
.c-tab_item {
  /*width: calc(100%/6);*/
  min-width: 40px;
  padding:0 1rem;
  height: 50px;
  border-bottom: 3px solid #5ab4bd;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 1rem;
  color: #565656;

  text-align: center;
  font-weight: 600;
  transition: all 0.2s ease;
}
.c-tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="c-tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.c-tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
  width:100%;/*200219追加　不具合でるかも*/
}


/*選択されているタブのコンテンツのみを表示*/
#siyou:checked ~ #siyou_content,
#sekou:checked ~ #sekou_content,
#color:checked ~ #color_content,
#tokucho:checked ~ #tokucho_content,
#youto:checked ~ #youto_content,
#caution:checked ~ #caution_content,
#kanren:checked ~ #kanren_content
{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.c-tabs input:checked + .c-tab_item {
  background-color: #5ab4bd;
  color: #fff;
}

.c-txtsp {width:100%;}
.c-h3 {border-left:1rem solid #5ab4bd; padding-left:0.5rem;}
.det_or {width:80%;}
.d2_table_th {color:white;}


/*商品ページのサムネ切替*/

#items img {
  max-width: 300px;
  vertical-align: top;
}

#items .gallery {/*親*/
  display: flex;
  margin: 10px auto;
  max-width: 200px;
  position: relative;
  padding-top: 66.6666666667%;
}

#items .gallery__img {/*表示される大きな画像。エフェクト付き*/
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#items .gallery__thumb {/*サムネイル*/
  padding-top: 6px;
  margin: 6px;
  display: block;
}
#items .gallery__selector {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
#items .gallery__selector:checked + #items .gallery__img {/*大きな画像は全て透明にしておき、チェックが入ったら表示させる*/
  opacity: 1;
}
#items .gallery__selector:checked ~ #items .gallery__thumb > img {/*サムネは選択されたら枠が表示されるように*/
  box-shadow: 0 0 0 3px #0be2f6;
}


/*javascript画像切替*/
#pimg {
  width:100%; min-width:200px; min-height:200px;
}

#pimg-main {text-align:center; margin:0 auto;}
#pimg-main-img {min-width:150px; max-width:200px; max-height:200px; overflow: hidden;}

#pimg ul {
  list-style:none;
  padding:0;
  margin:0;
  text-align:center;
}
#pimg ul li {
  display:inline-block;
  width:60px;
  height:60px;
  overflow: hidden;
  border:1px solid #d8d8d8;
}

#pimg ul li:not(.fct):hover {border:solid 2px #2366d1;}

#pimg ul li.fct {display:block !important; background:#999; color:white; width:100% !important; height:1.5rem;}
#pimg ul li .detail {height:600px;}
#pimg ul li .detail span {height:24px;}


#pimg ul li div {display:block; height:600px !important; width:100%; overflow:auto;}

/* 成功したらボタンを消そう*/
input[name="cartitem"] {
  display: none;
}

.selectable__content {
/*
  display:none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .8s cubic-bezier(0,1,0,1)
*/
}

#sel12:checked ~ #select12 .selectable__control,
#sel13:checked ~ #select13 .selectable__control
{
  display:block !important;
  transition-timing-function: ease-in-out;
  max-height: 800px;
  border-top:2px #ccc solid; padding-top:20px !important; border-bottom:2px solid #ccc; padding-bottom:20px !important; padding-left:8px; max-width:500px;
}