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

/*全体*/

html{
	scroll-behavior: smooth;
}

body{
	max-width: 1200px;
	margin: 0 auto;
}

main{
	padding-top: 0;
	line-height: 1.7;
	margin: 0;
}

section{
	margin-bottom: 5rem;
}

p{
	line-height: 1.7;
}

a{
	
}

.splide__track {
	padding: 0 40px;
}



img{
	max-width: 100%;
	width: auto;
}

.flex{
	display: flex;
	gap:15px;
}


/*=============================================
ヘッダー
===============================================*/

.header-top-nav{
	display: flex;
	justify-content: space-between;
	margin: 20px 20px 7px 10px;
	font-size: 0.9rem;
}

.vcs{
	font-weight: bold;
}

.header-top-nav ul{
	display: flex;
	gap:30px;
}


/* ヒーロー画像をハンバーガーボタンの配置基準にする */
.hero {
	position: relative;
	margin-bottom: 20px;
}

.hero img {
	display: block;
	width: 100%;
}

/* PCでは非表示 */
.hamburger,
.menu-close,
.menu-overlay {
	display: none;
}

/* 画面サイズ変更中はメニューをアニメーションさせない */
body.is-resizing #product-menu,
body.is-resizing .menu-overlay {
	transition: none !important;
}


h1{
	margin-bottom: 20px;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	position: relative;
	background:#009844;
	border: 2px solid #218e5a;
}

h1 span{
	border: 10px solid #cfe6d5;
	padding: 12px 7px 7px;
	display: block;
}


header p{
	margin-bottom: 30px;
}


/*=======================================
　　container部分
=========================================*/

.container{
	display: flex;
	justify-content: space-between;
	gap:20px;
}


/*=====================================
aside　左メニュー
======================================*/
aside{
	width: 19%;
}

aside h2{
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	padding: 6px 3px 4px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: bold;
	background: #fff000;
}

aside ul{
	display: flex;
	flex-direction: column;
	gap:20px;
}

aside ul li{
	text-align: center;
}



/*========================================
　　main
========================================*/

main{
	width: 79%;
}

main h2{
	font-size: 1.5rem;
	font-weight: bold;
	color: #009844;
	background: #e4f4e8;
	padding:5px 10px 5px 10px;
	gap: 10px;
	margin-bottom: 20px;
	border: 1px solid #009844;
	display: flex;
	
}

main h2:before{
	content: "";
	display: inline-block;
	width: 10px;
	height: 1.8em;
	background: #009844;
}

/*h2下の左に商品画像、右に文字*/
.pro-exp{
	display: flex;
	justify-content: space-between;
	gap:15px;
	margin-bottom: 30px;
}

.pro-exp :is(div,p){
	width: 49%;
}

/*================
カラーバリエーション
=============-===*/

h3{
	border-top: 4px double #009844;
	border-bottom: 4px double #009844;
	margin-bottom: 30px;
	color: #009844;
	font-size: 1.3rem;
	font-weight: bold;
	padding: 4px;
}

h3 span{
	display: block;
	background: #f4faf6;
	padding: 2px 5px;
}

.color-ul{
	display: grid;
	grid-template-columns: repeat(6,1fr);
	gap: 15px;
	margin-bottom: 30px;
}

.color-ul img{
	margin-bottom: 10px;
}


.color-ul figcaption{
	font-size: 1.2rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 5px;
	background: #e8e8e8;
}

/*「●●関連くわしくはこちら」ボタン*/

.category-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 30px;
  padding: 0;
  list-style: none;
}

.category-card {
  display: flex;
  min-height: 120px;
  padding: 12px 8px 8px;
  flex-direction: column;
  justify-content: space-between;
  color: #211919;
  background: #fff;
  border: 3px solid #00a651;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.category-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.category-card__title strong {
  font-size: 1.4em;
}

.category-card__button {
  display: block;
  padding: 8px 12px;
  color: #fff000;
  background: #18bd68;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.3;
}

/* マウス操作 */
.category-card:hover {
  background: #f3fff8;
  box-shadow: 0 5px 12px rgb(0 80 40 / 18%);
  transform: translateY(-2px);
}

/* キーボード操作 */
.category-card:focus-visible {
  outline: 4px solid #ffbf00;
  outline-offset: 3px;
}

.category-card:hover .category-card__button,
.category-card:focus-visible .category-card__button {
  background: #079f52;
}

/*「ビブス総合リンクはこちら」*/
.bibs-link{
	text-align: center;
	margin-top: 50px;
}

.bibs-link a{
	font-size: 1.6rem;
	font-weight: bold;
	padding: 7px;
	
}

.btn,
a.btn,
button.btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  
}

a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 4rem 1.5rem;
  background: #fff000;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 3px solid #000;
  
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
}

a.btn-border-shadow::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.4em;
  border-top: 0.35em solid transparent;
  border-bottom: 0.35em solid transparent;
  border-left: 0.55em solid #000;
  transition: transform 0.3s ease;
}



/*==============================================
反射ビブス
===============================================*/

.zekken-h3{
	background: #009844;
	color: #fff;
	border: none;
	padding: 3px 3px 3px 7px;
}

/*反射ビブスのカラーバリエーション*/

.hansha-ul{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	justify-content: space-between;
	gap:15px;
	margin-bottom: 30px;
}

.hansha-ul img{
	margin-bottom: 10px;
}

.hansha-ul figcaption{
	font-size: 1.1rem;
	font-weight: bold;
	text-align: center;
	letter-spacing: 1px;
	background: #e8e8e8;
}




/*トップページへ戻るボタン*/
.modoru{
	margin: 60px 0;
}

#footer{
	width: 100vw;
	margin-left: calc(50% - 50vw);
	box-sizing: border-box;
}


@media screen and (max-width: 865px){
	
	/*==================================
	main
	======================================*/
	
	main h2{
		font-size: 1.3rem;
	}
}


@media screen and (max-width: 825px){
	
	/*=========================================
	
	立て看板
	
	==========================================*/
	
	/*=========================================
	防犯立て看板について
	==========================================*/
	/*  印刷面の素材＜ターポリン＞について */
	
	.print-sozai {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
	
}
}

@media screen and (max-width: 814px){
	.header-top-nav nav ul{
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
	
	
	.header-top-nav nav li{
	width: calc(100%/3);
	align-items: center;
}
	
	
	/*h2*/
	
	h2 br{
		display: block;
	}
	
	.h2br{
	line-height: 1.2;
}
}

	@media screen and (max-width: 780px){
		
	/*====================================
	立て看オプション
	====================================*/
	
	.h3-yg span:last-child{
		font-size: 1.3rem;
	}
		
		.h3-yg span:first-child{
			font-size: 1rem;
		}

    }


@media screen and (max-width: 768px){
	
	/*===============================
	headerとaside。サイドメニューをハンバーガーに
	===============================*/
	
	.hero {
		display: block;
		position: relative;
		padding: 0;
	}

	.hero img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* ハンバーガーボタン */
	.hamburger {
		position: absolute;
		top: 12px;
		right: 12px;
		z-index: 100;
		display: flex;
		width: 50px;
		height: 50px;
		padding: 11px 9px;
		flex-direction: column;
		justify-content: space-between;
		background: rgb(255 255 255 / 90%);
		border: 2px solid #009844;
		border-radius: 6px;
		box-shadow: 0 3px 10px rgb(0 0 0 / 25%);
		cursor: pointer;
	}

	.hamburger span {
		display: block;
		width: 100%;
		height: 4px;
		background: #009844;
		border-radius: 4px;
		transition:
			transform 0.3s ease,
			opacity 0.3s ease;
	}

	/* 開いているときは「×」にする */
	.hamburger.is-open span:nth-child(1) {
		transform: translateY(11px) rotate(45deg);
	}

	.hamburger.is-open span:nth-child(2) {
		opacity: 0;
	}

	.hamburger.is-open span:nth-child(3) {
		transform: translateY(-11px) rotate(-45deg);
	}

	/* メインを先、asideを後に表示 */
	.container {
		display: block;
	}

	main {
		width: 100%;
	}

	aside {
		width: 100%;
	}

	/* 画面右側から表示される商品メニュー */
	aside #product-menu {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 1001;
		display: block;
		width: min(85%, 360px);
		height: 100dvh;
		padding: 70px 20px 30px;
		overflow-y: auto;
		background: #fff;
		box-shadow: -4px 0 15px rgb(0 0 0 / 25%);
		transform: translateX(105%);
		visibility: hidden;
		transition:
			transform 0.3s ease,
			visibility 0.3s ease;
	}

	aside #product-menu.is-open {
		transform: translateX(0);
		visibility: visible;
	}

	aside #product-menu h2 {
		margin-bottom: 20px;
	}

	aside #product-menu ul {
		display: flex;
		margin: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 15px;
	}

	aside #product-menu li {
		width: 100%;
	}

	aside #product-menu img {
		display: block;
		width: 100%;
	}

	/* メニュー内の閉じるボタン */
	.menu-close {
		position: absolute;
		top: 15px;
		right: 15px;
		display: block;
		width: 42px;
		height: 42px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}

	.menu-close span {
		position: absolute;
		top: 19px;
		left: 6px;
		display: block;
		width: 30px;
		height: 3px;
		background: #009844;
	}

	.menu-close span:first-child {
		transform: rotate(45deg);
	}

	.menu-close span:last-child {
		transform: rotate(-45deg);
	}

	/* メニュー表示中の暗い背景 */
	.menu-overlay {
		position: fixed;
		inset: 0;
		z-index: 1000;
		display: block;
		background: rgb(0 0 0 / 50%);
		opacity: 0;
		visibility: hidden;
		transition:
			opacity 0.3s ease,
			visibility 0.3s ease;
	}

	.menu-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	body.menu-open {
		overflow: hidden;
	}
	
	/* headerのh2  */
	
	h1{
		font-size: 1.7rem;
	}
	

/*========================================
　　main
========================================*/

	main h2{
		font-size: 1.3rem;
	}
	
	
}

@media screen and (max-width: 700px){
	
}


@media screen and (max-width: 665px){
	
	
	
	/*==================================
	ヘッダー
	====================================*/
	
	.category-list{
		grid-template-columns: repeat(2,1fr);
		grid-template-rows: repeat(3,1fr);
	}
	
	.category-card{
		min-height: 118px;
	}
	
	.category-card__title strong{
		font-size: 1.3rem;
	}
	
	.category-card__title{
		font-size: 1.1rem;
	}
	
	}

@media screen and (max-width: 619px){
	
	
	
	h2{
	    font-size: 1.3rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
}
	@media screen and (max-width: 600px){
		/*===========================
		ヘッダー
		=================================*/
		
		.header-top-nav{
			flex-direction: column-reverse;
			margin: 10px 20px 7px 10px;
			
		}
		
		
		.header-top-nav ul{
			justify-content: flex-end;
			gap:20px;
			margin-bottom: 10px;
		}
		
		
   /*=========================================
	
	画像と商品説明左右に並んでいる部分
	
	==========================================*/
		
		
		.pro-exp{
			flex-direction: column;
		}
		
		.pro-exp :is(div,p){
			width: 100%;
		}
		
		.pro-exp div{
			text-align: center;
		}
	
	/*=========================================
	カラーバリエーション
	==========================================*/
		
		.color-ul{
			grid-template-columns:repeat(3,1fr);
		}
		
		
		.color-ul li{
			text-align: center;
		}
		
		
		/*お問い合わせとかのボタン*/
		
		.bibs-link a{
			font-size: 1.3rem;
		}
		
		.btn, a.btn, button.btn{
			display: block;
		}
		
		.btn, a.btn, button.btn{
			padding:calc(1.5rem - 12px) 1rem 1.5rem;
		}
		
		
		/*反射ビブスのカラーバリエーション*/

.hansha-ul{
	display: grid;
	grid-template-columns: repeat(2,1fr);
	justify-content: space-between;
	gap:15px;
	margin-bottom: 30px;
}
		
		.hansha-ul li{
			text-align: center;
		}
}
	@media screen and (max-width: 555px){


		/*=================================
		container
		===================================*/
		
		.container {
			flex-direction: column-reverse;
		}
		
		/*=================================
		
		aside
		==============================*/
		
		aside{
			width: 100%;
		}
		
		aside ul{
			flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: 60px;
			justify-content: space-between;
		}
		
		aside li{
			width: 46%;
		}
		
		
		/*=============================
		main
		===========================*/
		
		main{
			width: 100%;
		}

}
	

@media screen and (max-width: 425px){
	
	/*お問い合わせとかのボタン*/
		
		.bibs-link a{
			font-size: 1.1rem;
		}
}

	@media screen and (max-width: 380px){
	
	/*●●関連詳しくはこちら*/
		.category-card__button{
			font-size: 0.9rem;
		}
		
	
	}

@media screen and (max-width: 360px){
	
	/*反射ビブスのカラーバリエーション*/
	
	.hansha-ul figcaption{
		font-size: 1rem;
	}
	
	
	/*お問い合わせとかのボタン*/
		
		.bibs-link a{
			font-size: 1rem;
		}
	
}