@charset "UTF-8";


/* 初期設定 */
*,
*::before,
*::after {
	box-sizing: border-box;
}
body,
h1, h2, h3, h4, h5, h6,
p,
ul, ol,
figure {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
}
html {
	scroll-behavior: smooth;
}



/* pcとspの表示切り替え */
.pc-only {
	display: block;
}
.sp-only {
	display: none;
}
@media screen and (max-width: 850px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
}










/* 固定ヘッダー */
/* .header_fix {
	display: flex;
	overflow: hidden;
	justify-content: space-between;
	width: 100%;
} */
/* 固定ヘッダー左側 */
/* .header_fix_left {
	display: flex;
	align-items: center;
}
.header_fix_left img{
	width: 100%;
}
.header_fix_left_shopname {
	width: 40%;
}
.header_fix_left_menu {
	display: flex;
	margin-left: 30px;
	width: 20%;
} */
/* 固定ヘッダー右側 */
/* .header_fix_right {
	display: flex;
	align-items: center;
	max-width: 100%;
	margin-left: auto; 
}
.header_fix_right img{
	width: 100%;
}
.header_fix_right_set {
	width: 60%;
}
.header_fix_right_dl {
	display: flex;
	width: 10%;
} */


/* PC固定ヘッダー */
.header_pc {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	overflow: visible;
	padding: 20px 0 20px 20px;
	position: fixed;
	background-color: #fff;
	border-bottom: 4px solid #F9BE00;
	z-index: 999;
}
/* 左側 */
.header_fix_left {
	display: flex;
	align-items: end;
	gap: 30px;
}
.header_fix_left_shopname img{
	height: 70px;
}
.header_fix_left_menu img {
	height: 40px;
}
/* 右側 */
.header_fix_right {
	display: flex;
	align-items: center;
	margin-left: auto;
	flex-shrink: 0;
	gap: 20px;
	padding-top: 35px;
}
.header_fix_right img{
	height: 45px;
}
.header_pc img {
	display: block;
	width: auto;
}
.header_fix_left_menu,
.header_fix_right_dl {
	display: flex;
	align-items: center;
}
.header_fix_left_shopname,
.header_fix_left_menu,
.header_fix_right_set,
.header_fix_right_dl {
	width: auto;
}
@media screen and (max-width: 1400px) {
	.header_fix_left_shopname img{
		height: 50px;
	}
	.header_fix_left_menu img {
		height: 30px;
	}
	.header_fix_right img{
		height: 35px;
	}
}
@media screen and (max-width: 1100px) {
	.header_fix_left_shopname img{
		height: 45px;
	}
	.header_fix_left_menu img {
		height: 25px;
	}
	.header_fix_right img{
		height: 30px;
	}
}
@media screen and (max-width: 950px) {
	.header_fix_right img{
		height: 25px;
	}
}



/* @media (max-width: 1200px){
	.header_pc img { height: 25px; }
}
@media (max-width: 1024px){
	.header_pc img{ height: 20px; }
} */









































/* spハンバーガーメニュー */
nav.navmenu {
	position: fixed;
	z-index: 12;
	top: 0;
	left: 0;
	background: #404040;
	text-align: center;
	width: 100%;
	height: 100%;
	display: none;
}
nav.navmenu ul {
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
}
nav.navmenu ul li {
	list-style-type: none;
	padding-bottom: 0px;
}
nav.navmenu ul li:last-child {
	padding-bottom: 0;
}
nav.navmenu ul li a {
	display: block;
	color: #fff;
	padding-top: 30px;
	font-weight: bold;
}
.toggle {
	position: fixed;
	right: 20px;
	top: 40px;
	width: 45px;
	height: 45px;
	cursor: pointer;
	z-index: 999;
	display: block;
}
.toggle span {
	display: block;
	position: absolute;
	width: 30px;
	border-bottom: solid 3px #F9BE00;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
	left: 6px;
}
.toggle span:nth-child(1) {
	top: 9px;
}
.toggle span:nth-child(2) {
	top: 20px;
}
.toggle span:nth-child(3) {
	top: 31px;
}
.toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
	border-bottom: solid 3px #F9BE00;
}
.toggle.active span:nth-child(2),
.toggle.active span:nth-child(3) {
	top: 18px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
	border-bottom: solid 3px #F9BE00;
}
.header-sp {
	position: fixed;
	background-color: #fff;
	border-bottom: 4px solid #F9BE00;
	z-index: 999;
	width: 100%;
	padding: 55px;
}
.header_sp_shopname {
	position: fixed;
	left: 20px;
	top: 21px;
    width: 35%;
}
.header_sp_shopname img {
	width: 80%;
}
.sp_shopname {
	display: block;
	color: #fff;
	font-weight: bold;
	font-size: 40px;
}
.sp_gaiyou, .sp_access {
	font-size: 35px;
}
.sp_access {
	margin-top: -20px;
}
.sp_tel_fax a img {
	height: 170px;
}
.sp_button {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}
.sp_button li a img {
	height: 55px;
}
@media screen and (max-width: 700px) {
	.header_sp_shopname img {
		width: 100%;
	}
}
@media screen and (max-width: 540px) {
	.header-sp {
		padding: 45px;
	}
	.toggle {
		top: 20px;
	}
}
@media screen and (max-width: 425px) {
	.header-sp {
		padding: 40px;
	}
}


































/* テストハンバーガーメニュー */
.thumb {
	width: 100%;
	cursor: pointer;
}
.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: #404040;
	justify-content: center;
	align-items: center;
}
.lightbox img {
	width: 100%;
}
.lightbox:target {
	display: flex;
}


















/* メインビジュアル */
.mv {
	padding-top: 100px;
}
.mv img {
	width: 100%;
}
@media screen and (max-width: 830px) {
	.mv {
		padding-top: 80px;
	}
}



.sp_red_text {
	width: 80%;
	margin: 30px auto;
}





/* インナー共通 */
.inner {
	padding: 100px 200px;
}
h2 {
	margin-bottom: 50px;
}
h2 img {
	width: 100%;
}
@media screen and (max-width: 850px) {
	.inner {
		padding: 60px 25px;
	}
}





/* 取扱商品 */
#item {
	background-image: url(../img/item/item_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
}
.item_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, 100px);
	gap: 20px;
	justify-content: center;
}
.item_card {
	position: relative;
}
.item_card img {
	height: 120px;
}
.item_card p {
	position: absolute;
    font-size: 12px;
	line-height: 1.2;
	text-align: center;
}
.vs {
	top: 78%;
    left: 38%;
}
.s {
	top: 78%;
    left: 35%;
}
.m {
	top: 78%;
    left: 21%;
}
.l {
	top: 78%;
    left: 16%;
}
.vl {
	top: 69%;
	left: 5%;
}
.item_hosoku {
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
}
@media screen and (max-width: 850px) {
	.item_box {
		grid-template-columns: repeat(auto-fit, 90px);
	}
	.item_card img {
		height: 110px;
	}
}





/* 取扱ブランド */
#brand {
	background-image: url(../img/brand/brand_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 4px solid #F9BE00;
	scroll-margin-top: 80px;
}
.brand_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, 90px);
	gap: 20px;
	justify-content: center;
}
.brand_card {
	position: relative;
}
.brand_card img {
	height: 95px;
}
.brand_card p {
	position: absolute;
	line-height: 1.2;
	text-align: center;
}
.b_vs {
    font-size: 10px;
    top: 78%;
    left: 42%;
}
.b_s {
	font-size: 10px;
    top: 78%;
    left: 37%;
}
.b_ms {
	font-size: 10px;
    top: 78%;
    left: 32%;
}
.b_m {
	font-size: 10px;
    top: 78%;
    left: 26%;
}
.b_ml {
    font-size: 10px;
    top: 78%;
    left: 22%;
}
.b_l {
    font-size: 10px;
    top: 78%;
    left: 17%;
}
.b_af {
	font-size: 9px;
	top: 78%;
    left: 9%;
}
.b_ep {
	font-size: 9px;
	top: 78%;
    left: 11%;
}
.b_bb {
	font-size: 9px;
	top: 78%;
    left: 14%;
}
.brand_hosoku {
	font-size: 14px;
	text-align: center;
	margin-top: 20px;
	color: #fff;
}
/* ===== SPだけ 6個目以降を隠す（初期） ===== */
@media (max-width: 850px){
  /* 折りたたみ状態（bodyにclass付ける方式じゃなく sectionに付ける） */
	#brand.is-collapsed .brand_box > *:nth-child(n+7) {
		display: none;
	}

  /* もっと表示ボタン（sp-onlyの中にある想定） */
	#brand .items__more{
    margin: 18px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: #fff; /* 背景が暗いなら。黒文字なら消してOK */
	}

	#brand .items__moreIcon{
    width: 22px;
    height: 22px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
	}

  /* 開いた状態は矢印を上向き */
	#brand.is-open .items__moreIcon{
    transform: rotate(-135deg);
	}
}





































/* 当店の強み */
.feature_card {
	margin-top: 50px;
}
.feature_card img {
	width: 100%;
}
@media screen and (max-width: 850px) {
	.feature_box.sp-only {
		margin-top: -100px;
	}
}





/* 手袋自動販売機 */
.promotion img {
	width: 100%;
}
@media screen and (max-width: 850px) {
	.promotion img {
		margin-top: 60px;
	}
}





/* 会社概要・沿革 */
#overview {
	scroll-margin-top: 100px;
}
#history {
	margin-top: -100px;
}
.info_box {
	border-bottom: 1px solid #CCCCCC;
}
.info_card {
    border-top: 1px solid #CCCCCC;
    display: flex;
	padding: 0;
}
.title {
	width: 30%;
    font-size: 14px;
	color: #F9BE00;
    position: relative;
    line-height: 2em;
    text-align: left;
    background-color: #505050;
    padding: 20px;
}
.text {
	width: 70%;
    padding: 20px;
    text-align: left;
    line-height: 2em;
    font-size: 14px;
}
.address_left {
	display: flex;
	flex-direction: column;
}
.address_flex {
	display: flex;
	align-items: center;
}
.map_btn {
	width: 17%;
	margin-left: 15px;
}
.map_btn img {
	width: 100%;
}
.client {
	column-count: 3;
}
.ec_site_btn {
	width: 70%;
    padding: 20px;
}
.ec_site_btn img {
	width: 100%;
}
.ec_site_btn01 {
	max-width: 25%;
	margin-top: 10px;
}
.ec_site_btn02 {
	max-width: 23%;
	margin-top: 10px;
}
@media (max-width: 1200px) {
	.map_btn { 
		width: 40%; 
	}
	.ec_site_btn01 {
		max-width: 45%;
	}
	.ec_site_btn02 {
		max-width: 43%;
	}
}
@media screen and (max-width: 850px) {
	#overview {
		scroll-margin-top: 50px;
	}
	#history {
		margin-top: -0px;
	}
	.title {
		font-size: 13px;
	}
	.text {
		font-size: 13px;
	}
	.address_flex {
		flex-direction: column;
		align-items: baseline;
	}
	.map_btn {
		width: 50%;
		margin: 10px 0;
	}
	.client {
		column-count: 1;
	}
	.ec_site_btn01 {
		max-width: 75%;
	}
	.ec_site_btn02 {
		max-width: 70%;
	}
}






/* アクセス */
#access {
	margin-top: -100px;
}
.map {
	margin-top: -100px;
}
@media screen and (max-width: 850px) {
	#access {
		margin-top: -60px;
		scroll-margin-top: 50px;
	}
	.map {
		margin-top: -60px;
	}
}








/* フッター */
footer {
	background-image: url(../img/footer/footer_bg.png);
	background-repeat: no-repeat;
	background-size: cover;
	border-bottom: 4px solid #F9BE00;
}
.footer_shopname {
	color: #fff;
	text-align: center;
	font-size: 20px;
}
.footer_shopinfo {
	color: #fff;
	text-align: center;
	font-size: 16px;
	width: 500px;
	margin: 0 auto;
}
.footer_time_margin_right {
	margin-right: 70px;
}
.footer_time_margin_left {
	margin-left: 105px;
}
.footer_flex {
	display: flex;
	justify-content: center;
	margin-top: 70px;
	gap: 50px;
}
.footer_flex img {
	height: 70px;
}
.footer_set {
	max-width: 100%;
}
.footer_button {
	display: flex;
}
.footer_button_mitsumori {
	margin-left: 25px;
}
@media screen and (max-width: 1000px) {
	.footer_shopname {
		font-size: 18px;
	}
	.footer_shopinfo {
		font-size: 14px;
		width: 330px;
	}
	.footer_time_margin_right {
		margin-right: 60px;
	}
	.footer_time_margin_left {
		margin-left: 93px;
	}
	.footer_flex {
		justify-content: center;
		margin-top: 40px;
	}
	.footer_flex img {
		height: 40px;
	}
}