/**Common**/

body{ font-family: "Roboto", sans-serif; font-optical-sizing:auto; font-style:normal; }
h1, h2, h3, h4, .max-font{ font-family: "Anton", sans-serif; font-weight: 400; font-style: normal; }
#return-to-top{ width:40px; height:40px; }
#language-switcher{ width: 40px; height:40px; }

.dropdown-menu.bg-dark > li > a:hover { background-image:none; background-color:#000; color:#FFF}

.text-orange{ color:#FF6600!important; }
.text-red{ color:#CC0000!important; }
.text-light{ color:#D1D1D1!important; }
.text-light-emphasis{ color:#F2F2F2!important; }
.text-dark{ color:#464646!important; }
.text-dark-emphasis{ color:#8C8C8C!important; }
.text-danger{ color:#CC0000!important; }

.text-shadow-b-sm{text-shadow:0 0 3px #000}
.text-shadow-b-md{text-shadow:0 0 5px #000}

.text-multiline-ellipsis { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis}

.font-roboto { font-family: "Roboto", sans-serif}
.font-roboto-condensed { font-family: "Roboto Condensed", sans-serif}

.border-left-danger-15{ border-left:15px solid #CC0000; }
.border-right-danger-15{ border-right:15px solid #CC0000; }

.bg-red{ background-color:#CC0000!important; }
.bg-light{ background-color:#F6F7F7!important; }
.bg-light-emphasis{ background-color:#F2F2F2!important; }
.bg-lightgray{ background-color:#D1D1D1!important; }
.bg-gray{ background-color:#ECEDED!important; }
.bg-darkgray{ background-color:#8C8C8C!important; }
.bg-white-70 { background-color:rgba(255,255,255,0.7)!important; }
.bg-white-50 { background-color:rgba(255,255,255,0.5)!important; }

.border-red { border-color: #CC0000 !important; }

.mix-blend-multiply{ mix-blend-mode:multiply; }

.px-05 { padding-right: .125rem !important; padding-left: .125rem !important; }

.mx-n1{ margin-left:-0.75rem; margin-right:-0.75rem; }

.mw-25{ max-width:25%; }
.mw-33{ max-width:33.333%; }
.mw-50{ max-width:50%; }
.mw-75{ max-width:75%; }
.mw-360{ max-width: 360px; }
.mw-800{ max-width: 800px; }

.mh-100vh{ max-height:100vh; width: auto; margin: 0 auto; display: block }

@media (min-width: 992px) {
  .mw-lg-75 {
    max-width: 75% !important;
  }
}

.ls-1{ letter-spacing: 1px;}
.ls-2{ letter-spacing: 2px;}
.ls-3{ letter-spacing: 3px;}
.ls-4{ letter-spacing: 4px;}
.ls-5{ letter-spacing: 5px;}

.fs-0clamp { font-size: clamp(3rem, 5vmax, 5rem) }
.fs-1clamp { font-size: clamp(2rem, 4vmax, 4rem) }
.fs-2clamp { font-size: clamp(1.5rem, 3vmax, 3rem) }
.fs-3clamp { font-size: clamp(1.25rem, 3vmax, 2rem) }
.fs-4clamp { font-size: clamp(1rem, 2vmax, 1.5rem) }
.fs-5clamp { font-size: clamp(1rem, 1.7vmax, 1.3rem) }
.fs-6clamp { font-size: clamp(1rem, 1.5vmax, 1rem) }

.fs-7{font-size: 0.9rem !important;}
.fs-8{font-size: 0.8rem !important;}
.fs-9{font-size: 0.7rem !important;}

.aspect-ratio-169 { position: relative; width: 100%; padding-top: 56.25%; overflow: hidden; }
.aspect-ratio-169 img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio-9x16 { --bs-aspect-ratio: 177.78%; }

.object-position-70{ object-position: 70% }

.btn-transparent{ border:1px solid #8C8C8C; padding:10px; text-align:center; background-color:transparent; color:#8C8C8C; width:100%; display:block; text-decoration:none; }
.btn-transparent:hover{ background-color:#8C8C8C; color:#FFF; }
.btn-red{ border:1px solid #CC0000; padding:10px; text-align:center; background-color:#CC0000; color:#FFFFFF; width:100%; display:block; text-decoration:none; }
.btn-red:hover{ background-color:#CC0000; }
.btn-danger{ background-color:#CC0000; border:1px solid #CC0000; }
.btn-danger:hover{ background-color:#FF0000; border:1px solid #FF0000 }

.background-cover{ background-size: cover; }
.background-position-left-center{ background-position: left center; }
.background-position-center{ background-position: center; }

.navbar-brand-wrapper{ height: 50px; }
.navbar-brand{ z-index: 1001;}

.navbar-toggler[aria-expanded="false"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff' stroke-linecap='round' stroke-width='3' d='M7 7L23 23M7 23L23 7'/%3e%3c/svg%3e");
}
.navbar-toggler-icon { transition: all 0.3s ease }
.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { transform: rotate(90deg) scale(1.1) }

#navbar a:hover{ background:#C00 }

.invert-image { filter: invert(1) }

.slick-list{ padding-top:30px!important; padding-bottom:30px!important; }
#product-top .slick-list{ padding-top:0px!important }
.slick-track{ display: flex !important; }
.slick-slide{ height: inherit !important; }
.slick-next, .slick-prev{ width:23px!important; height:41px!important; z-index:1!important; }
.slick-prev { left: 10px!important; background-image: url(../images/icons/icon-arrow-l.webp)!important }
.slick-next { right: 10px!important; background-image: url(../images/icons/icon-arrow-r.webp)!important }
.slick-next:before, .slick-prev:before  { display:none }

.slider-for,
.image-features{
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.slider-initialized,
.slick-initialized  {
  visibility: visible!important;
  opacity: 1;
}

.thumbnail_container { width: 100%; padding-top: 100%; position: relative; overflow: hidden; }
.thumbnail_container img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 100%; max-height: 100%; transform: translate(-50%, -50%); transition: opacity 0.5s ease-in-out;}
.thumbnail_container .hover-image { opacity: 0 }
.thumbnail_container:hover .default-image { opacity: 0 }
.thumbnail_container:hover .hover-image { opacity: 1 }

.image-zoom img{ transition:all 0.2s ease-in-out; }
.image-zoom img:hover{ transform:scale(1.1,1.1); transition:all 0.5s ease-in-out; }

#imgbox { position: relative !important; width: 100% !important; padding-bottom: 100% !important; border:1px solid #d6d6d6; }
.zoomWrapper{ position:absolute; width:100% !important; height:100% !important; }
.zoomWrapper img{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-height:100%; width: auto !important; max-width:100%; border:none!important; }

#searchform input::placeholder { color: #FFF; opacity: 1 }

.product-thumbnails{
    transition:all 0.5s ease-in-out;
}
.product-thumbnails:hover{
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15) !important;
}

ul.checked li:before, .image-feature-title:before {
    content: "\f111";
    font-family: FontAwesome;
    display: inline-block;
    margin-left: -1.8em;
    width: 1.8em;
    font-size: 10px;
    vertical-align: 2px;
    color: #BB261A;
}
span.new::before {content:'NEW'; display:inline-block; color:#FFF; background-color:#C00; padding:0 5px; margin-bottom:5px; margin-left:5px; font-size:0.5em; vertical-align:middle;}

.right-arrow-red{ width:24px; height:24px; fill:#BB261A }
.caution-yellow{ width:24px; height:24px; fill:#FFFF00 }
.btn-outline-danger:hover .right-arrow-red{ fill:#FFF }
.check-white,
.right-arrow-white,
.right-download-white{ width:24px; height:24px; fill:#FFFFFF }

.accordion-button::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-width='2'%3E%3Cpath d='M2 8h12'/%3E%3Cpath d='M8 2v12'/%3E%3C/svg%3E"); transition: transform 0.2s }
.accordion-button:not(.collapsed) { color: #FFF; background-color: #BB261A }
.accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E") }
.accordion-item{ background-color: transparent!important }

.black-gradient-bg::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: #000000; background: linear-gradient(90deg,rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%); z-index:1 }
.black-gradient-bg-vertical::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: #000000; background: linear-gradient(rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%); z-index:1 }
.black-gradient-bg-vertical-transparent::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: #000000; background: linear-gradient(rgba(0, 0, 0, 1) 5%, rgba(0, 0, 0, 0.9) 20%, rgba(0, 0, 0, 0.9) 100%); z-index:1 }
.black-gradient-to-red-bg-vertical::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background: #000000; background: linear-gradient(rgba(0, 0, 0, 0.7) 70%, rgba(204, 0, 0, 0.7) 100%); z-index:1 }
.black-gradient-to-red-bg-horizontal::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to right,rgba(0,0,0,0.7) 70%,rgba(204,0,0,0.7) 100%);z-index:1;}
.white-transparent::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(255,255,255,0.95); z-index:1 }

@media screen and (max-width: 767px){
  .zoomLens, .zoomWindowContainer{display:none !important;}
}

/** Large devices (desktops, 992px and up) **/
@media (min-width: 992px) { 
    .w-lg-33{ width:33.33333%!important }
}

/** X-Large devices (large desktops, 1200px and up) **/
@media (min-width: 1200px) { 
    .top-our-vision{ margin-left:-30px; width:100%; }
    .support-border{border-right:1px solid #FFF}
}

/** `lg` applies to large devices (desktops, less than 1200px) **/
@media (max-width: 991.98px) { 
    .media-icon-contents h2{ border:none!important; }
    .breadcrumb-wrapper{ border-bottom:1px solid gray; }
}

/** mylist **/
#s {padding-right:2em}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;      /* 既定のアイコンを消す */
  width: 1em;
  height: 1em;
  background:
    linear-gradient(45deg, transparent 40%, white 40%, white 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, white 40%, white 60%, transparent 60%);
  background-color: #000;
  border-radius: 50%;            /* 背景を丸く */
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  cursor: pointer;
  opacity: 1;
}
#mylist p{margin:0; border-left:1px solid rgba(255,255,255,0.5); border-right:1px solid rgba(255,255,255,0.5); background:rgba(0,0,0,0.8); font-weight:normal}
#mylist p:first-child a{border-top:1px solid rgba(255,255,255,0.5)}
#mylist p a {display:block; padding:0.25em 0.5em; border-bottom:1px solid rgba(255,255,255,0.5); color:#FFF; text-decoration:none}
#mylist p a:hover{text-decoration:none; background:rgba(255,255,255,1); color:#000}

/**where to buy**/
.mile{white-space: nowrap}
.map-list-right-box{vertical-align: bottom!important;text-align:right!important}
.where-to-buy-products .thumbnail{transition: all 0.2s}
.where-to-buy-products .btn{background-color:#CC0000;color:#FFF;padding:5px 10px}
.where-to-buy-products:hover{text-decoration:none}
.where-to-buy-products:hover .btn{background-color:#990000}
.where-to-buy-products:hover .thumbnail{transform: scale(1.1)}
.where-to-buy-companis .thumb{transition: all 0.2s;z-index:1}
.where-to-buy-companis:hover{text-decoration:none; cursor:pointer}
.where-to-buy-companis-state{background-color:#000000;z-index:2}
.where-to-buy-companis:hover .where-to-buy-companis-state{background-color:#CC0000}
.where-to-buy-companis:hover .thumb{transform: scale(1.1);}
.where-to-buy-product-title .btn{background-color:#CC0000;color:#FFF;padding:5px 10px}
.where-to-buy-product-title .btn:hover{background-color:#990000}
#wheretobuy{height:90dvh;overflow:hidden}
#map-lists{position:relative;height:100%;display: flex;flex-wrap: wrap;flex-flow: column; z-index:2}
#map-area{position:relative}
#map-area #map{position:relative;height:100%;width:100%;overflow:hidden;}
div.wheretobuy-scroll{height:100%!important}
.w100{width:100px;}
@media screen and ( max-width : 991px ){
  #wheretobuy{height:auto}
  #map-area{position:relative}
  #map-lists{position:relative;display:block;height:auto}
  #map-area #map{position:relative;height:75vh;width:100%;z-index:1;}

}

/** RB **/
.rebar-tying-tools-archive-top-video{height:100dvh; max-height:800px;}
.twintier-bg {background-color: rgba(255,255,255,0.66)}
.rebar-tying-tools-archive-section1-red{background-color: rgba(255,51,51, 0.7)}
.rebar-tying-tools-archive-section2-black{background-color: rgba(0,0,0, 0.9)}
.rebar-tying-tools-archive-section3-white{background-color: rgba(255,255,255, 0.5)}

/** Nailer **/
.nailer-top-video{height:100dvh; max-height:810px;}
.nailer-top-section1-black{background-color: rgba(0,0,0, 0.8)}
.nailer-top-categories{ position:relative; transition:all 0.3s ease}
.nailer-top-categories-text{ opacity:0; transition:opacity 0.3s ease; z-index:3; position:relative }
.nailer-top-categories::before{ position:absolute; content:''; width:100%; height:100%; background-color:rgba(0,0,0, 0.3); z-index:1; transition:background-color 0.3s ease }
.nailer-top-categories:hover::before{ position:absolute; content:''; width:100%; height:100%; background-color:rgba(0,0,0, 0.8); z-index:2 }
.nailer-top-categories img{ transition: filter 0.3s ease; }
.nailer-top-categories:hover img{ filter: grayscale(100%) }
.nailer-top-categories:hover .nailer-top-categories-text{ opacity:1 }
/* Nailer Fasteners */
#buildings,
#houses { background-size: cover }
#buildings { background-image: url("../images/nailer/fasteners-buildings.webp") }
#houses { background-image: url("../images/nailer/fasteners-houses.webp") }
#illustlations-wrapper { overflow-x: scroll }
#illustlations { display: flex; flex-wrap: wrap; justify-content: space-around; width: 100%; gap: 40px }
#illustlation_l,
#illustlation_r { width: 40% }
#illustlations svg { width: 100% }
.points:hover { cursor:pointer }
.dots { opacity: 0.7; fill: #BB261A; stroke: white; stroke-width: 0.3; cursor: pointer }
.points:hover .dots { opacity:1 }
.points:focus { outline: none }
.popover { max-width: 500px }
.popover-body a { color: #000; text-decoration: none }
.popover-body a::after {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23BB261A' d='M0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zm368 0c0 6.7-2.8 13-7.7 17.6l-112 104c-7 6.5-17.2 8.2-25.9 4.4s-14.4-12.5-14.4-22l0-208c0-9.5 5.7-18.2 14.4-22s18.9-2.1 25.9 4.4l112 104c4.9 4.5 7.7 10.9 7.7 17.6z'/%3E%3C/svg%3E");
  display: inline-block; width: 1.2em; height: 1.2em; margin-left: 0.4em; vertical-align: middle;
}
.powerlite-description .overlay { background-color: rgba(0, 0, 0, 0.1);transition: background-color 0.3s ease }
.powerlite-description:hover .overlay { background: linear-gradient(rgba(0, 0, 0, 0.8) 70%, rgba(125, 0, 0, 0.5) 100%);}
.powerlite-description-wrapper { opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
.powerlite-description:hover .powerlite-description-wrapper { opacity: 1; visibility: visible}
@media screen and (max-width: 767px) {
  #illustlation_l,
  #illustlation_r { width: 100% }
}
/* Pro Grade */
.nailer-solution-card { aspect-ratio: 9 / 16 }
.nailer-solution-card .nailer-overlay { background: rgba(0, 0, 0, 0.1); transition: background 0.3s ease; z-index: 1 }
.nailer-solution-card .nailer-label { z-index: 2; bottom: 20px; pointer-events: none }
.nailer-solution-card .nailer-title { font-size: 0.9rem; margin-bottom: 0 }
.nailer-solution-card .nailer-explore { opacity: 0; transition: opacity 0.3s ease; font-size: 0.8rem }
.nailer-solution-card:hover .nailer-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.5) 70%, rgba(204, 0, 0, 0.5) 100%) }
.nailer-solution-card:hover .nailer-explore { opacity: 1 }

/** Rebar Tier Safe Guide **/
.rb-safeguide-top-video{height:100dvh;max-height:810px}
.rb-safeguide-top-video::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0) 75%,rgba(0,0,0,1) 100%)}
.rb-safeguide-big-issues .container{padding:10% 0}
.rb-safeguide-big-issues::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,1) 0%,rgba(0,0,0,.7) 10%,rgba(0,0,0,.7) 90%,rgba(0,0,0,1) 100%);z-index:0}
.rb-safeguide-introducing-twintier{margin-top:-10%}
.rb-safeguide-result-link{position:relative;text-decoration:none;color:inherit}
.rb-result-caret{position:absolute;left:50%;bottom:8px;width:60px;height:60px;transform:translate(-50%,0);transition:transform .28s ease;fill:currentColor;opacity:.95}
.rb-safeguide-result-link:hover .rb-result-caret,.rb-safeguide-result-link:focus-visible .rb-result-caret{transform:translate(-50%,10px)}
@media (min-width:768px){
  .rb-result-caret{width:48px;height:48px;bottom:10px}
  .rb-safeguide-result-link{padding-bottom:56px}
  .rb-safeguide-result-detail-1-img{margin-top:-100px;}
}
@media (prefers-reduced-motion:reduce){ .rb-result-caret{transition:none} }
.rb-safeguide-result-detail-1{ background-color: rgba(200,200,200,0.2) }
.rebar-tying-safeguide-section-5-result-1-graph-sp{ width:100%; background-image:url(../images/rebar-tying/rebar-tying-safeguide-section-5-result-1-graph-sp.webp); background-size:100% }
/* tooltip style */
.tooltip.rb-tip .tooltip-inner{background:rgba(0,0,0,.8);padding:6px 10px;font-size:14px;font-weight:700;border-radius:8px}
.bs-tooltip-auto[data-popper-placement^=bottom].rb-tip .tooltip-arrow::before{border-bottom-color:rgba(0,0,0,.8)}
.modal{z-index:2000}
@media (min-width:576px){ .tooltip.rb-tip{display:none!important} }