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

/*全体*/

html{
	scroll-behavior: smooth;
	background:#f6f6f4;
}

main{
	max-width: 100%;
	padding-top: 0;
	line-height: 1.7;
}

/*max-widthを1000pxにする*/
.mw-1000{
	max-width: 1000px;
	margin: 0 auto;
}

section{
	margin: 0 auto 5rem;
}

p{
	line-height: 1.7;
}


.wrap{
	margin: 0;
	padding: 0 0.5rem;
}


.topButton{
	background: #174388;
}

h2{
	
}

h2 br{
	display: none;
}

h2 span{
}



h4{
}

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

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


/*ヘッダー=============================================*/
header{
	width: 100%;
}

/*ヒーロー画像エリア*/
.hero-area{
	position: relative;
	min-height: 94vh;    /* フォールバック*/
	background-image: url("img/hero-pc.jpg");
	background-position: center center;
	background-size: cover;
	width: 100%;
	background-repeat: no-repeat;
}

/*.hero-area .hero{
	height: 94vh;
	width: 100%;
}*/

.hero-area .logo{
	position: absolute;
	top: 3%;
	left: 2%;
	width: 10%;
	min-width: 120px;
}


/*
h1{
	position: absolute;
	text-align: center;
	bottom: 20%;
	width: 100%;
	height: 131px;
	background-image: url("img/title-back_1.webp");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: #fff;
	padding-bottom: 10px;
	font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}
*/

h1{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-width: 530px;
}

/*スクロール*/
/* スクロールダウンの位置 */
.scroll {
    position: absolute;
    right: 50%;
    bottom: 22%;
	font-size: 1.1rem;
	color: #fff;
	font-weight: bold;
	font-family: "Noto Serif JP", serif;
  writing-mode: vertical-rl;
}
/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: #fff;
  bottom: -110px;
  content: "";
  height: 95px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
}



/*メニュー部分===============*/
nav{
	margin-bottom: 50px;
	background: #b09761;
}

nav ul{
	display: flex;
	flex-grow: 1;
	color: #fff;
	justify-content: center;
	max-width: 1000px;
	margin: 0 auto;
}

nav li{
	display: flex;
	text-align: center;
	width: calc((100% - 5px)/3);
	justify-content: center;
	font-family: "Playball", cursive;
    font-weight: 400;
    font-style: normal;
	align-items: center;
	font-size: 1.5rem;
}

nav li:after{
	content: "";
	height: 20px;
	width: 1px;
	background: #fff;
	vertical-align: middle;
}

nav li:last-child:after{
	display: none;
}

nav a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 15px 3px;
}

nav a:hover{
	background: #e3ded0;
	opacity: 1;
}


/*=======================================
　　最初の文章
=========================================*/

.p-first-wrap{
	border: 1px solid #b09761;
	padding: 5px;
	max-width: 1000px;
	margin: 0 auto 50px;
}

.p-first {
	padding: 20px;
	background: #e3ded0;
	width: 100%;
	max-width: 1000px;
	line-height: 1.8;	
}

.p-first strong{
	color: #7a5c3e;
	font-size: 1.2rem;
	font-family: "Noto Serif JP", serif;
}



/*=======================================
4号館へ飛ぶボタン
=========================================*/
.cate-to-4{
	max-width: 1000px;
	margin: 0 auto;
}


.cate-to-4 ul{
	gap:15px 10px;
	flex-wrap: wrap;
	margin-bottom: 50px;
}

.cate-to-4 ul:after{
	content: "";
    display: block;
    width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.cate-to-4 li{
	color: #fff;
	font-size: 1.2rem;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	text-align: center;
	width: 32%;
	background: #174388;
	padding: 5px;
}

.cate-to-4 li a{
	display: block;
	padding: 12px 0 19px;
	border: 1px solid #e3e6eb;
}

.cate-to-4 li span{
	position: relative;
}


.cate-to-4 li span:after{
	content: "";
	display: block;
	height: 3px;
	width: 40px;
	background: #fff;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	margin-top: 4px;
}



/*=========================================　
　動画
====================================*/
.movie{
	background: #b09761;
	max-width: 1000px;
	text-align: center;
	
}


.movie h2{
	text-align: center;
	font-size: 1.6rem;
	color: #555555;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	padding-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:8px;
}

.movie h2:before{
	content: "";
	height: 2px;
	width: 30%;
	background: #555555;
}

.movie h2:after{
	content: "";
	height: 2px;
	width: 30%;
	background: #555555;
}



.movie video{
	padding: 10px;
	border: 1px solid #fff;
	max-width: 90%;
	margin: 20px auto 40px;
    height: auto;	
}

/*線*/
.border-1{
	border-top: 3px solid #174388;
	border-bottom: 1px solid #174388;
	padding: 5px 0 0 0;
	margin-bottom: 80px;
}



/*==============================================
「category」 
================================================*/
.category-block{
	background: #fff;
	padding: 30px 0.5rem;
}

.category-inner{
	max-width: 1000px;
	margin: 0 auto;
}

.h2{
	text-align: center;
	font-size: 1.6rem;
	color: #555555;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	padding: 10px;
	margin-bottom: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10px;
	
}

.h2:before{
	content: "";
	height: 2px;
	width:30%;
	background: #555555;
}

.h2:after{
	content: "";
	height: 2px;
	width: 30%;
	background: #555555;
}

.category .flex-between{
	gap:20px 15px;
	flex-wrap: wrap;
	margin-bottom: 30px;
}

.category .flex-between:after{
	content: "";
    display: block;
    width: 31%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.category .flex-between li{
	width: 31%;
}

.category .flex-between li img{
	display: block;
}

.category .flex-between li span{
	display: block;
	text-align: center;
	color: #fff;
	font-size: 1.1rem;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	background: #174388;
	padding: 7px 0;
	position: relative;
}

.category .flex-between li span:before{
	content: "";
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	top:4px;
	left: 0;
}

.category .flex-between li span:after{
	content: "";
	width: 100%;
	height: 1px;
	background: #fff;
	position: absolute;
	bottom:4px;
	left: 0;
}

/*お問い合わせはこちら*/
.btn-contact{
	text-align: center;
	max-width: 1000px;
	margin: 40px auto 0;
	}

.btn-contact a{
	color: #174388;
	font-size: 2rem;
	font-weight: 700;
	font-family: "Noto Serif JP", serif;
	background: #fff;
	border: 2px solid #174388;
	padding: 7px 5px;
    border-radius: 0;
    -webkit-box-shadow: 6px 6px 0 #174388;
    box-shadow: 6px 6px 0 #174388;
	transition: .2s;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 10px;
}


.btn-contact a:hover{
	-webkit-box-shadow: -6px -6px 0 #174388;
  box-shadow: -6px -6px 0 #174388;
}


/*ウェブアイコン：メール*/
.icon-mail4{
	margin-left: 15px;
	font-size: 2.2rem;
}

/*線*/
.border-2{
	border-top: 1px solid #174388;
	border-bottom: 3px solid #174388;
	padding: 5px 0 0 0;
	margin-bottom: 80px;
}

/*========================================
 戻るボタン
=======================================*/

.modoru a{
	font-family: "Noto Serif JP", serif;
	background: #b09761;
	border: 2px solid #b09761;
}


.modoru a:hover{
	color: #b09761;
}

/*vcsの説明部分*/
.about_vcs{
	max-width: 1000px;
	margin: 0 auto;
}


/*=============================================
「footer」
===============================================*/

footer{
	background: #174388;
}


/*==============================================
カテゴリー別ページ
===============================================*/
.cate-block{
	background: #fff;
}

.cate-block h2{
	padding-bottom: 40px;
}

.cate-block h3{
	text-align: center;
	font-size: 1.3rem;
	color: #555555;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	padding: 0 1rem;
	margin-bottom: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap:10px;
	
}

.cate-block h3:before{
	content: "";
	height: 2px;
	width: 10%;
	background: #555555;
}

.cate-block h3:after{
	content: "";
	height: 2px;
	width: 10%;
	background: #555555;
}

.series-exp{
	padding: 0 1.5rem;
	margin-bottom: 20px;
}

.products-block{
	padding: 0 1.5rem 40px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap:30px 10px;
}

.products-content p{
	padding: 0.5rem 0.5rem;
	font-size: 0.9rem;
}

.products-content{
	display: flex;
	flex-direction: column;
	border: 1px solid #174388;
}

.cate-block figcaption{
	color: #fff;
	font-family: "Noto Serif JP", serif;
	font-weight: bold;
	text-align: center;
	background: #174388;
	padding: 5px 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.3;
	height: 4rem;
}

.cate-block .border-1{
	margin-bottom: 20px;
}

.cate-block .border-2{
	margin-bottom: 50px;
}

/*flexの後ろ余白設定*/
.flex-after-1:after{
	content: "";
    display: block;
    width: 24%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

.flex-after-2:after{
	content: "";
    display: block;
    width: 49%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}


/*4号館へとぶボタン*/
.btn-to-4{
	text-align: center;
	max-width: 1000px;
	margin: 40px auto 0;
	padding-bottom: 50px;
	}

.btn-to-4 a br{
	display: none;
}

.btn-to-4 a{
	color: #fff;
	font-size: 1.7rem;
	font-weight: 700;
	font-family: "Noto Serif JP", serif;
	background: #1A4E9C;
	border: 6px ridge #174388;
	padding: 7px 5px;
    border-radius: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 15px;
	gap: 10px;
	position: relative;
	transition: color 0.5s ease;
}

.btn-to-4 a::after {
  border-right: 3px solid #fff;
  border-top: 3px solid #fff;
  content: "";
  height: 12px;
  width: 12px;
  transform: rotate(45deg);
}

.btn-to-4 a:hover{
    color: #174388;
	opacity: 1;
}

.btn-to-4 a:hover::after{
  border-right: 3px solid #174388;
  border-top: 3px solid #174388;
}

.btn-to-4 a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
.btn-to-4 a::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: all 0.5s ease;
  transition-property: transform;
}
.text {
  position: relative;
}



/*ナイフページの最初の文章=============*/

#knife .p-first-wrap{
	margin: 0 10px 50px!important;
}

#knife .p-first strong{
	display: block;
	text-align: center;
}


@media screen and (max-width: 840px){
	/*カテゴリーページ*/
	
	/*先頭の説明文賞*/
	.series-exp{
			padding: 0 10px;
		}
	
	.products-block{
		padding: 0 10px 40px;
		grid-template-columns: 1fr 1fr 1fr;
		gap:30px 10px;
	}
	
	
	/*flexの最後余白設定*/
	
	.flex-after-0:after{
		content: "";
        display: block;
        width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
	}
	
	.flex-after-1:after{
		width: 32%;
	}
	
	.flex-after-3:after{
		content: "";
        display: block;
        width: 32%;  /* .boxに指定したwidthと同じ幅を指定する */
        height: 0;
	}
	
	/*ヒーロー画像エリア*/
   .hero-area{
	position: relative;
	min-height: 94vh;    /* フォールバック*/
	background-image: url("img/hero-tb.jpg");
	background-position: center center;
	background-size: cover;
	width: 100%;
	background-repeat: no-repeat;
    }
    }


@media screen and (max-width: 814px){
	nav ul{
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
}
	
	
	nav li{
	width: calc(100%/3);
	align-items: center;
}
	nav li:nth-child(1), nav li:nth-child(2),nav li:nth-child(3){
		border-bottom: 1px solid #fff;
	}
	
	nav li:nth-child(4){
		border-left: 0;
	}
	
	
	nav a{
	height: 3.5rem;
}
	
	/*h2*/
	
	h2 br{
		display: block;
	}
	
	.h2br{
	line-height: 1.2;
}

}


@media screen and (max-width: 768px){
	
	/*4号館へのボタン*/
	.btn-to-4 a{
		font-size: 1.3rem;
	}
	
}

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

	
	
	h2{
	    font-size: 1.3rem;
	}
	
	h3 {
		font-size: 1.2rem;
	}
	
	
	/*======================================
	商品仕様
	===========================================*/
	.shiyo .flex-around{
		flex-wrap: wrap;
	}
	
	.shiyo .flex-around li{
		width: 47%;
	}
	
	
	.shiyo-block-2 h3{
		font-size: 1.2rem;
	}
	
	.shiyo-block-bottom h3{
		font-size: 1.2rem;
	}

}
	@media screen and (max-width: 555px){
		
		/*ヒーロー画像エリア*/
   .hero-area{
	    position: relative;
	    min-height: 94vh;    /* フォールバック*/
	    background-image: url("img/hero-sp-2.webp");
	    background-position: center center;
	    background-size: cover;
	    width: 100%;
	    background-repeat: no-repeat;
    }
		
		h1{
			min-width: 360px;
		}
		
		
		h2{
			font-size: 1.2rem;
		}
		
		/*最初の説明文*/
		
		.p-first-wrap{
			margin: 0 10px 50px;
		}
		
		.p-first{
			padding: 1rem;
		}
		
	/*=========================================
	「4号館へ飛ぶカテゴリー」
	========================================*/
		.cate-to-4 li{
			width: 48%;
		}
		
		
		/*====================================
		
		全ページの「category」
		===========================================*/
		
		.category-block{
			padding: 30px 10px;
		}
		
		.category .flex-between{
			gap: 20px 10px;
		}
		
		
		
	/*========================================
	「Category」
	====================================*/
		
		.cate-block h3{
			font-size: 1.1rem;
			padding: 0;
			margin-bottom: 10px;
		}
		
	.category .flex-between li{
		width: 48%;
	}
	
		.cate-block h3:before, .cate-block h3:after{
			width: 7%;
		}
	
		
    /*=====================================
		カテゴリーごとのページ
	===========================================*/
		
		.products-block{
		grid-template-columns: 1fr 1fr;
	}
		
		.products-content{
			
			
		}
		
	/*ナイフページの最初の文章=============*/
		
		#knife .p-first-wrap{
	        margin: 0 10px 50px;
        }

        #knife .p-first strong{
	        font-size: 1.1rem;
			line-height: 1.5;
        }

	
		
		/*お問い合わせはこちらボタン*/
		.btn-contact{
			width: auto;
			margin: 40px 10px 0;
		}
		
	   .btn-contact a{
	       font-size: 1rem;
		   padding: 12px 2px;
		}
		
		.btn-contact .icon-mail4{
			font-size: 1.8rem;
			margin-left: 10px;
		}
		
		/*4号館へのボタン*/
		.btn-to-4 a{
			font-size: 1rem;
			gap: 3px;
			padding: 12px 5px;
		}
		
		.btn-to-4 a:after{
			border-right: 2px solid #fff;
            border-top: 2px solid #fff;
			height: 10px;
			width: 10px;
		}
		
	
	}

@media screen and (max-width: 440px){
	/*4号館へのボタン*/
		.btn-to-4 a{
			gap: 10px;
		}
		
		.btn-to-4 a:after{
			border-right: 2px solid #fff;
            border-top: 2px solid #fff;
		}
	
	.btn-to-4 a br{
	        display: block;
        }
}

@media screen and (max-width: 360px){
	
	h1{
		min-width: 330px;
	}
	
	/*======================================
	カテゴリーページ
	===========================================*/
	.products-content{
		width: 48%;
	}
}