@charset "utf-8";
/* CSS Document */
.header .head_menu .logo,
.header .logo2 {
  display: none;
}
.header.scrolled .logo {
  display: block !important; 
}
.title-style2{
	justify-content: space-between;
}
.more-tb{
	display: none;
}
.fv{
	position: relative;
	width: 100%;
  	height: clamp(180px, 60vw, 1000px);
    overflow: hidden;
}
.fv .bg_img_wrap2{
	position: relative;
	overflow: hidden;
}
.fv .logo {
    position: absolute;
    top: 40px;
    left: 40px;
    z-index: 5;
}
.fv .logo img {
    width: clamp(120px, 18vw, 260px);
    height: auto;
}
.fv .titlebox {
    position: absolute;
    left: 10%;
    bottom: 25%;
    z-index: 5;
}
.fv .titlebox h1{
	letter-spacing: 0.2em;
	font-weight: 400;
	text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.8);
	margin-top: auto;
}

.fv .rightbox {
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
}

.fv .rightbox p {
	font-size: 40px;
    display: inline-block;
    background-color: #C9BB11;
    padding: 15px 2px;
    text-align: center;
    letter-spacing: 0.2em;
}

.fv .rightbox p.vr-top {
    transform: translateY(-100px);
}

.fv .rightbox p.vr-bottom {
    transform: translateY(100px);
    margin-right: 20px;
}
/* ---------- cate1 ---------- */
.cate1 {
	position: relative;
    justify-content: space-between;
    background-image: url("https://kanoshoten.com/system_panel/uploads/images/top-bg.png"); 
    background-repeat: no-repeat;
    background-position: center bottom; 
    background-size: 100%;
}
.cate1 .topbox{
	gap:80px;
}
.cate1 .topbox .leftbox{
	width: calc(60% - 40px);
}
.cate1 .topbox .rightbox{
	width: calc(40% - 40px);
	margin-bottom: auto;
}
.cate1 .topbox .leftbox .txtbox{
	width: 90%;
	margin-bottom: 80px;
}
.cate1 .topbox .leftbox .txtbox p{
	letter-spacing: 0.25em;
	line-height: 3;
}
.cate1 .topbox .leftbox img{
	max-width: 380px;
	margin-left: auto;
	margin-right: 50px;
}
.cate1 .bottombox{
	gap: 50px;
	width: 100%;
}
.cate1 .bottombox .leftbox{
	flex: 1 1 0;       
    min-width: 0;
}
.cate1 .bottombox .rightbox{
	flex: 1 1 0;        
    min-width: 0;
	margin-bottom: auto;
}
.cate1 .bottombox .rightbox .more a{
	margin-right: auto;
}
.cate1 .bottombox .itembox{
	flex: 0 0 150px;    
    margin-left: auto;
	align-self: flex-end;
}
.cate1 .bottombox .leftbox .txtbox{
	width: 90%;
	margin-top: 100px;
	margin-bottom: 80px;
}
.cate1 .bottombox .leftbox .txtbox p{
	letter-spacing: 0.25em;
	line-height: 3;
}

.bgimg-item{
	position: relative;
	width: 100%;
  	height: clamp(180px, 50vw, 560px);
    display: flex;
 	justify-content: center;
  	align-items: center;
}
/* ---------- cate2 ---------- */
.cate2 .topbox{
	gap:50px;
	flex-direction: row-reverse;
}
.cate2 .topbox .leftbox{
	width: calc(60% - 25px);
}
.cate2 .topbox .rightbox{
	width: calc(40% - 25px);
	margin-bottom: auto;
}
.cate2 .topbox .leftbox .txtbox{
	width: 90%;
	margin-top: 100px;
	margin-bottom: 80px;
}
.cate2 .topbox .leftbox .txtbox p{
	letter-spacing: 0.25em;
	line-height: 3;
}
.cate2 .bottombox{
	gap: 50px;
	justify-content: flex-end;
	padding-bottom: 150px;
}
.cate2 {
	position: relative;
    justify-content: space-between;
    background-image: url("https://kanoshoten.com/system_panel/uploads/images/top-bg2.png"); 
    background-repeat: no-repeat;
    background-position: right bottom; 
    background-size: 90%;
}
.cate2 .bottombox .imgbox{
    position: relative;           
    display: inline-block;         
}

.cate2 .bottombox .imgbox::before{
    content: "";
    position: absolute;
    top: -5%;                    
    left: 10%;
    width: 65px;                   
    height: 107px;
    background-image: url("https://kanoshoten.com/system_panel/uploads/images/top-item2.png"); 
    background-repeat: no-repeat;
    background-size: contain;     
    z-index: 2;
    pointer-events: none;     
}
/* ---------- cate3 ---------- */
.cate3 .box_wrap,
.cate4 .box_wrap{
	display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-webkit-flexbox;
    display:-moz-flexbox;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
    justify-content: center;
    align-items: flex-start;
	flex-direction: row;
	gap: 20px;
}

.cate3 .box_wrap .boxitem,
.cate4 .box_wrap .boxitem{
	width: calc(100% / 4 - 60px / 4);
}
/* ---------- cate4 ---------- */
.cate4 {
    position: relative;
    background-image: 
        linear-gradient(
            to bottom,
            rgba(23, 68, 103, 0) 0%,    
            rgba(23, 68, 103, 1) 25%,     
            rgba(23, 68, 103, 1) 100%   
        ),
        url("https://kanoshoten.com/system_panel/uploads/images/top-bg3.jpg");     
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
}
.cate4 .topbox{
	padding-bottom: 80px;
	margin-bottom: 80px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.cate4 .bottombox{
	gap: 60px;
}
.cate4 .bottombox .txtbox{
	width: calc(60% - 30px);
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}
.cate4 .bottombox .imgbox{
	width: calc(40% - 30px);
}
/* ---------- cate5 ---------- */
.cate5 .topbox{
	gap: 80px;
	flex-direction: row-reverse;
}
.cate5 .topbox .leftbox{
	flex: 0 0 calc(60% - 40px);
	padding-bottom: 150px;
}
.cate5 .topbox .rightbox{
	flex: 0 0 calc(40% - 40px);
	margin-bottom: auto;
}
.cate5 .topbox .leftbox .txtbox{
	width: 90%;
}
.cate5 .topbox .leftbox .txtbox p{
	letter-spacing: 0.25em;
	line-height: 3;
}
.cate5 {
	position: relative;
    justify-content: space-between;
    background-image: url("https://kanoshoten.com/system_panel/uploads/images/top-bg2.png"); 
    background-repeat: no-repeat;
    background-position: left bottom; 
    background-size: 90%;
}

/* ---------- news_wrap ---------- */
.news_wrap .contents{
	width: 100%;
}
.news_wrap .webgene-blog .webgene-item{
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #ADAAAA;
}
.news_wrap .webgene-blog .webgene-item a > .flex{
	gap: 20px;
	padding: 20px 0;
}
.news_wrap .webgene-blog .webgene-item a .date{
	width: 100px;
	color: #666666;
}

.news_wrap .webgene-blog .webgene-item a .catelabel{
	border: #363636 solid 1px;
}
.news_wrap .webgene-blog .webgene-item a .cate_txt{
	width: 100px;
	text-align: center;
	padding: 3px 3px;
	box-sizing: border-box;
}
.news_wrap .webgene-blog .webgene-item a h3{
	width: calc(100% - 240px);
}
/* ---------- IEのみ ---------- */
@media all and (-ms-high-contrast: none) {
}
/* ---------- 1280px ~ ---------- */
@media screen and (max-width: 1280px){
	.fv .rightbox p{
		font-size: 30px;
	}
	.cate1 .bottombox{
		flex-direction: column;
	}
	.cate1 .bottombox {
		gap: 10px;
		width: 100%;
	}
	.cate1 .bottombox .itembox{
		width: 120px;
	}
	.cate1 .bottombox .leftbox {
		width: 100%;
	}
	.cate2 .topbox {
		gap: 80px;
		flex-direction: column-reverse;
		justify-content: flex-start;
	}
	.cate2 .topbox .rightbox {
		width: 40%;
		margin-left: auto;
	}
	.cate2 .topbox .leftbox {
		width: 100%;
		flex-direction: column;
	}
	.cate4 {
		position: relative;
		background-image: 
			linear-gradient(
				to bottom,
				rgba(23, 68, 103, 0) 0%,    
				rgba(23, 68, 103, 1) 15%,     
				rgba(23, 68, 103, 1) 100%   
			),
			url("https://kanoshoten.com/system_panel/uploads/images/top-bg3.jpg");     
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}
	.cate5 .topbox{
		flex-direction: column;
	}
	.cate5 .topbox .leftbox{
		width: 70%;
		padding-bottom: 100px;
		margin-right: auto;
	}
	.cate5 .topbox .rightbox{
		width: 60%;
		margin-left: auto;
	}

}
/* ---------- 1080px ~ ---------- */
@media screen and (max-width: 1080px){
	.fv .rightbox p{
		font-size: 26px;
	}
	.fv .rightbox p.vr-top {
		transform: translateY(-50px); 
	}
	.fv .rightbox p.vr-bottom {
		transform: translateY(50px);
		margin-right: 15px;
	}
	.fv .titlebox {
		left: 8%;
		bottom: 15%;
	}
	.fv .rightbox {
		right: 8%;
	}
	.cate1 {
		background-size: cover; 
	}
	.cate1 .topbox {
		gap: 80px;
		flex-direction: column-reverse;
	}
	.cate1 .topbox .rightbox {
		width: 60%;
		margin-left: auto;
	}
	.cate1 .topbox .leftbox {
		width: 100%;
		flex-direction: column;
	}
	.cate1 .topbox .leftbox .txtbox {
		width: 100%;
		margin-bottom: 50px;
		justify-content: flex-end;
	}
	.cate1 .bottombox .rightbox .more a{
		margin: 0 auto;
	}
	.cate2 .bottombox {
		flex-direction: column-reverse;
		gap: 0px;
	}
	.cate2 .topbox .leftbox .txtbox {
		margin-top: 0px;
		margin-bottom: 50px;
	}
	.cate2 .bottombox {
		padding-bottom: 100px;
	}
	.cate2 {
		position: relative;
		justify-content: space-between;
		background-image: url("https://kanoshoten.com/system_panel/uploads/images/top-bg2.png"); 
		background-repeat: no-repeat;
		background-position: right bottom; 
		background-size: 90%;
	}
	.cate3 .box_wrap,
	.cate4 .box_wrap{
		gap: 20px;
	}
	.cate3 .box_wrap .boxitem,
	.cate4 .box_wrap .boxitem{
		width: calc(100% / 3 - 40px / 3);
	}
	.cate4 .bottombox {
		flex-direction: column-reverse;
	}
	
	.cate4 .bottombox .imgbox {
		width: 70%;
	}
	.cate4 .bottombox .txtbox {
		width: 100%;
	}
	.cate4 {
		position: relative;
		background-image: 
			linear-gradient(
				to bottom,
				rgba(23, 68, 103, 0) 0%,    
				rgba(23, 68, 103, 1) 10%,     
				rgba(23, 68, 103, 1) 100%   
			),
			url("https://kanoshoten.com/system_panel/uploads/images/top-bg3.jpg");     
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}
	.cate5 .topbox .leftbox{
		padding-bottom: 80px;
	} 

}
/* ---------- 768px ~ ---------- */
@media screen and (max-width: 768px){
	.fv{
		height: clamp(180px, 70vw, 1000px);
	}
	.fv .rightbox p{
		font-size: 22px;
	}
	.fv .logo img {
		width: clamp(80px, 10vw, 100px);
	}
	.fv .logo {
		top: 20px;
		left: 20px;
	}
    .cate1 .topbox .leftbox .txtbox {
        margin-bottom: 30px;
    }
    .cate1 .topbox .leftbox .txtbox h2{
        margin-bottom: 50px;
    }
	.cate1 .bottombox .leftbox .txtbox {
		margin-top: 80px;
		margin-bottom: 50px;
	}
	.cate1 .bottombox .rightbox img{
		width: 70%;
	}
	.cate1 .bottombox .leftbox .txtbox p{
		margin: 0;
	}
	.cate2 .bottombox {
		padding-bottom: 80px;
	}
	.cate4 .bottombox .imgbox {
		width: 100%;
	}
	.cate4 .bottombox .txtbox {
		gap: 30px;
	}
	.cate4 .bottombox {
		gap: 30px;
	}
	.cate4 {
		position: relative;
		background-image: 
			linear-gradient(
				to bottom,
				rgba(23, 68, 103, 0) 0%,    
				rgba(23, 68, 103, 1) 7%,     
				rgba(23, 68, 103, 1) 100%   
			),
			url("https://kanoshoten.com/system_panel/uploads/images/top-bg3.jpg");     
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}
	.more-tb {
		display: flex;
	}
	.more-tb a {
		--line: #433213;
		--stroke: 1px;
		--inset: 8px;
		--tick: 42px;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 12px 30px;
		min-width: 230px;
		color: #FDF7E7;
		text-decoration: none;
		background:
			linear-gradient(var(--line), var(--line)) top center / calc(100% - 2*var(--inset)) var(--stroke) no-repeat,
			linear-gradient(var(--line), var(--line)) bottom center / calc(100% - 2*var(--inset)) var(--stroke) no-repeat,
			linear-gradient(var(--line), var(--line)) left  center / var(--stroke) var(--tick) no-repeat,
			linear-gradient(var(--line), var(--line)) right center / var(--stroke) var(--tick) no-repeat;
		border: none; 
		overflow: hidden;
		transition: background-size .35s ease, opacity .2s ease;
	}

	.more-tb a:hover {
		background-size:
			calc(100% - 2 * (var(--inset) + 8px)) var(--stroke),
			calc(100% - 2 * (var(--inset) + 8px)) var(--stroke),
			var(--stroke) calc(var(--tick) - 14px),
			var(--stroke) calc(var(--tick) - 14px);
	}
}
/* ---------- 576px ~ ---------- */
@media screen and (max-width: 576px){
	.fv{
		height: clamp(180px, 100vw, 1000px);
	}
	.fv .titlebox h1 {
		font-size: 18px;
	}
	.fv .rightbox p {
        font-size: 14px;
    }
	.fv .rightbox p.vr-top {
		transform: translateY(-20px); 
	}
	.fv .rightbox p.vr-bottom {
		transform: translateY(20px);
		margin-right: 10px;
	}
	.fv .rightbox p span {
		padding: 8px 2px;
	}
	.cate2 .topbox {
        gap: 30px;
    }
	.cate1 .topbox .leftbox .txtbox p{
		line-height: 2;
	}
    .cate1 .topbox .leftbox .txtbox {
		margin: 30px auto;
    }
	.cate1 .bottombox .leftbox .txtbox p{
		line-height: 2;
		margin: 0 auto;
		justify-content: center;
	}
	.cate1 .topbox .rightbox {
        width: 80%;
		margin: 0 auto;
    }
    .cate1 .topbox {
        gap: 30px;
    }
	.cate1 .bottombox .leftbox .txtbox {
		margin-top: 50px;
		margin-bottom: 30px;
	}
	.cate1 .bottombox .rightbox img{
		width: 100%;
	}
    .cate1 .bottombox .itembox {
        width: 80px;
    }
	
	.cate2 .topbox .rightbox {
		width: 80%;
		margin: 0 auto;
	}
	.cate2 .topbox .leftbox .txtbox {
		flex-direction: column;
		gap: 30px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	.cate2 .topbox .leftbox .txtbox h2{
		margin: 0 auto;
	}
	.cate2 .topbox .leftbox .txtbox p{
		line-height: 2;
		margin: 0 auto;
	}
	.cate2 .bottombox {
		padding-bottom: 50px;
	}
	.cate2 .bottombox .imgbox::before{
		top: -5%;                    
		left: 10%;
		width: 60px;                   
		height: 100px;   
	}
	.cate3 .box_wrap,
	.cate4 .box_wrap{
		gap: 30px;
	}
	.cate3 .box_wrap .boxitem,
	.cate4 .box_wrap .boxitem{
		width: 100%;
	}
	.cate4 .topbox{
		padding-bottom: 50px;
		margin-bottom: 50px;
	}
	.cate4 .bottombox .more{
		margin: 0 auto;
	}
	.cate4 {
		position: relative;
		background-image: 
			linear-gradient(
				to bottom,
				rgba(23, 68, 103, 0) 0%,    
				rgba(23, 68, 103, 1) 3%,     
				rgba(23, 68, 103, 1) 100%   
			),
			url("https://kanoshoten.com/system_panel/uploads/images/top-bg3.jpg");     
		background-repeat: no-repeat;
		background-position: center top;
		background-size: contain;
	}
	.cate5 .topbox .leftbox{
		width: 100%;
		padding-bottom: 50px;
		margin: 0 auto;
	} 
	.cate5 .topbox .rightbox{
		width: 90%;
		margin: 0 auto;
	}
	.cate5 {
		background-size: cover;
	}
	.cate5 .topbox .leftbox .txtbox p{
		line-height: 2;
	}
	.news_wrap .webgene-blog .webgene-item a .item{
		flex-direction: column;
	}
	.news_wrap .webgene-blog .webgene-item a .item .label,
	.news_wrap .webgene-blog .webgene-item a .item h3{
		width: 100%;
		justify-content: flex-start;
	}
	.news_wrap .webgene-blog .webgene-item a .item .catelabel{
		font-size: 12px;
	}
	.news_wrap .webgene-blog .webgene-item a .cate_txt {
		width: 80px;
		padding: 2px 5px;
	}
	.news_wrap .webgene-blog .webgene-item a > .flex {
		gap: 10px;
	}
	
	.news_wrap .webgene-blog .webgene-item {
		padding-bottom: 0px;
		margin-bottom: 10px;
	}
	.news_wrap .webgene-blog .webgene-item a .date{
		width: 85px;
	}
}
/* ---------- 350px ~ ---------- */
@media screen and (max-width: 350px){
}