@import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Redressed&display=swap'); */


.header{
/*
	position: fixed;
	top: 0; left: 0;
*/
	position: relative;
	width: 100%;
	height: 80px;
	color:#000;
	text-align:center;
	line-height: 50px;
	font-size: 25px;
	font-weight: bold;
	background: #fff;
	z-index: 999;
	font-family: 'Redressed', cursive;
	}
	.header a img{
		height: 50px;
		margin: 15px;
		}

	input,.menu-btn { display: none; }

.footer{
	float: left;
	width: 100%;
	height: 100px;
	margin: 50px 0 0 0;
	text-align:center;
	line-height: 100px;
	background: #fff;
	}
	.footer .pic{
		width: 220px;
		height: 60px;
		margin: 15px auto 15px;
		/* background: rgb(150, 150, 150); */
		}
		.footer .pic a{
			width: 100%;
			height: 60px;
			/* background: rgb(150, 150, 150); */
			}
			.footer .pic a img{
				float: left;
				height: 60px;
				margin: 0 25px 0;
				}


.firstView{
	float: left;
	width:100%;
	height:400px;
	margin: 0;
	background: #ddd;
	}
	.firstView .col_25{
		float: left;
		width: 25%;
		height:100%;
		background: #cfcfcf;
		}
		.firstView .col_25 ._40{
			float: left;
			width: 100%;
			height:160px;
			background: #7e7e7e;
			overflow: hidden;


							display:table-cell;
							text-align:center;
							line-height: 160px;


			}
		.firstView .col_25 ._60{
			float: left;
			width: 100%;
			height:240px;
			background: #bbbbbb;
			overflow: hidden;


							display:table-cell;
							text-align:center;
							line-height: 240px;


			}
			.firstView .col_25 ._40 img,
			.firstView .col_25 ._60 img{
				width: 110%;
				vertical-align:middle;
				}

	.firstView .col_50{
		float: left;
		width: 50%;
		height:400px;
		background: #ddd;
		overflow: hidden;


							display:table-cell;
							text-align:center;
							line-height: 400px;


		}
		.firstView .col_50 img{
			width: 110%;
			vertical-align:middle;
			}


.items{
	float: left;
	width: 70%;
	margin: 50px 15% 50px;
	/* background: #7a7a7a; */
	}
	.items .col{
		float: left;
		width: 23%;
		margin: 1% 1%;
		background: #FFF;
		border-top : solid 3px #595c66;
		}
		.items .col:hover{ background: #727683; }

		.items .col a{
			color: #000000;
			text-decoration: none;
			}
			.items .col a:hover{ color: #ffffff; }

			.items .col a .txt{
				float: left;
				width: 96%;
				height: 50px;
				font-size: 18px;
				line-height: 1.2em;
				padding: 10px 2% 0;
				overflow: hidden;
				/* text-overflow: ellipsis;
				white-space: nowrap; */
				}
				.items .col a .txt span{ display: block; }

			.items .col .pic{
				float: left;
				width: 100%;
height: 160px;
				overflow: hidden;
				}
				.items .col a .pic img{
					width: 100%;
					text-align: center;
					}

			.items .col a .cap{
				float: left;
				width: 96%;
				height: 50px;
				font-size: 12px;
				line-height: 1.2em;
				padding: 0 2% 0;
				}


.wrapper{
	width:1500px;
	margin: 50px auto 0;
	/* background: yellow; */
	}

	.wrapper .menu{
		float: left;
		width:260px;
		/* height:100%; */
		margin:0;
		padding: 20px;
		background: #fff;
		border-radius: 10px;
		/*display:none;*/
		}

		.wrapper .menu .i{
			float: left;
			width: 100%;
			font-size: 16px;
			font-weight: bold;
			margin:10px 0 10px;
			/*display:none;*/
			}

			.wrapper .menu .txt{
				float: left;
				width: 100%;
				font-size: 18px;
				margin:0 0 20px;
				background: #ffffff;
				border-bottom: solid 1px #e7e7e7;
				/*display:none;*/
				}
				.wrapper .menu .txt span{display: block;}

	.wrapper .contents{
		float: left;
		width: 860px;
		height:100%;

margin:0 20px 50px;

		background: #fff;
		border-radius: 10px;
		}

		.wrapper .contents .yt{
			float: left;
			width: 90%;
			margin:0 5% 0;
			}
			.wrapper .contents .yt iframe{
				width: 100%;
				/* height:440px; *//* js指定 */
				}

		.wrapper .contents .name{
			float: left;
			width:90%;
			margin:50px 5% 30px;
			font-size: 28px;
			text-align: center;
			}

		.wrapper .contents .pic{
			float: left;
			width: 90%;
			margin:0px 5% 0px;
			}
			.wrapper .contents .pic img{
				width:100%;
				}

		.wrapper .contents .subpic{
		    float: left;
		    width: 80%;
		    margin:50px 10% 0px;
		    /* margin:10px 0 5px; */
		    }
		    .wrapper .contents .subpic img{
		        width:100%;
		        }

		.wrapper .contents .point{
		    float: left;
		    width: 86%;
		    margin:0 5% 0;
		    padding: 2%;
			color: rgb(0, 0, 0);
		    background: #bad8ff;
		    /* border-radius: 10px; */
		    }
		    .wrapper .contents .point .cap{
		        float: left;
		        width: 100%;
		        margin: 5px 0;
		        }
		        .wrapper .contents .point .cap .L{
		            float: left;
		            width: 5%;
		            margin:0 0;
		            font-size:15px;
		            /* background: #d6ffec; */
		            }
		        .wrapper .contents .point .cap .R{
		            float: left;
		            width: 95%;
		            margin:0 0;
		            font-size:15px;
		            /* background: #fdffd6; */
		            }

            .wrapper .contents .txt,
            .wrapper .contents .txt1,
            .wrapper .contents .txt2{
                float: left;
                width:80%;
                font-size: 15px;
                text-align: justify;
                line-height: 2em;
                /* margin:20px 5% 100px 5%; */
                margin:0px 10% 0px;
                }

	.wrapper .products{
		float: left;
		width:300px;
		height:100%;
		margin:0;
		background: #fac42f;
		border-radius: 10px;
		}
		.wrapper .products a{display: block;}

		.wrapper .products a .pic{
			width: 98%;
			padding: 1% 1% 0 1%;
			}
			.wrapper .products a .pic img{
				width: 100%;
				border-radius: 8px 8px 0 0;
				}
		.wrapper .products a .txt{
			float: left;
			width: 96%;
			padding: 0 2% 2% 2%;
			color:#000;
			font-size: 16px;
			text-align: center;
			text-decoration: none;
			}


	.swiper {
		float: left;
		width: 100%;
		height: 350px;
		background: #fff;
		}
		.swiper .title{
			width: 96%;
			float: left;
			text-align: center;
			font-size: 20px;
			font-weight: bold;
			margin: 20px 0 15px 0;
			padding: 0 2%;
			}
			.swiper-slide {
				float: left;
				/* text-align: center; */
				font-size: 18px;
				background: #bad8ff;
				/* Center slide text vertically */
				/* display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center; */
				}
				.swiper-slide {
					width: 80%;
					}
					.swiper-slide img {
						display: block;
						width: 100%;
						height: 100%;
						object-fit: cover;
						}


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


.items{
	float: left;
	width: 80%;
	margin: 50px 10% 50px;
	/* background: #7a7a7a; */
	}
	.items .col{
		float: left;
		width: 30%;
		margin: 1.5% 1.5%;
		/* background: #dd2020; */
		}

.wrapper{
	display: flex;
	width: 100%;
	margin: 50px auto 0;
	}

	.wrapper .menu{
		width:260px;
		height:100%;
		margin:0;
		padding: 20px;
		background: #fff;
		border-radius: 10px;
		/*display:none;*/
		}

	.wrapper .contents{
		flex: 1;
		width: 100%;
		height:100%;

margin:0 20px 50px;

		background: #fff;
		border-radius: 10px;
		}

		.wrapper .contents .name{
			float: left;
			width:90%;
			margin:50px 5% 30px;

			font-size: 28px;
			text-align: center;
			}

		.wrapper .contents .pic{
			float: left;
			width: 90%;
			margin:0px 5% 0px;
			}
			.wrapper .contents .pic img{
				width:100%;
				}

	.wrapper .products{
		width:300px;
		height:100%;
		margin:0;
		background: #fac42f;
		border-radius: 10px;
		}
}

/*520px以下で文字色青色になる*/
@media screen and (max-width: 1100px) {

	/* body{ overflow: hidden } */
	.header{ height:60px; }
	.header a img{
		height: 30px;
		margin: 20px;
		}
	.menu-btn {
		position: absolute;
		top: 10px;
		left: 0px;
		display: flex;
		height: 50px;
		width: 50px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		/* background-color: #000000; */
	}
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #000;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
	}
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	#menu-btn-check {
		display: none;
	}

	.firstView{ display: none; }

	.items{
		float: left;
		width: 100%;
		margin: 0% 0 50px;
		/* background: #7a7a7a; */
		}
		.items .col{
			float: left;
			width: 100%;
			margin: 0 0% 0;
			}
			.items .col .pic{
				float: left;
				width: 100%;
				height: 200px;
				}
				.items .col .pic img{ width: 100%; }

	.wrapper{
		/* display: flex; */
		width: 100%;
		margin: 1px auto 0;
		flex-wrap: wrap; /* 折返し指定 */
		border-radius: 0px;
		}

		.wrapper .menu{
			float: left;
			position: fixed;
			top:0; left:0;
			width:46%;
			height:100%;
			margin:0;
			padding:50px 2%;
			background: #fff;
			border-radius: 0px;
			box-shadow: 1px 1px 10px #5e5e5e;
			/* overflow: auto; */
			display:none;
			}
			.wrapper .menu .txt{ font-size: 16px };

		.wrapper .contents{
			/* flex: 1; */
			height:100%;

			/* margin:0; */

			background: #fff;
			border-radius: 0px;
			}
			.wrapper .contents.clear{margin:0;}

			.wrapper .contents .name{
				float: left;
				width:90%;
				margin:30px 5% 30px;
				font-size: 28px;
				text-align: center;
				}

				.wrapper .contents .name span{display: block;}

			.wrapper .contents .yt{
				float: left;
				width: 100%;
				margin:0;
				}
				.wrapper .contents .yt iframe{
					width: 100%;
					/* height:210px; *//* js指定 */
					}

			.wrapper .contents .pic{
				float: left;
				width: 100%;
				margin:0;
				}
				.wrapper .contents .pic img{
					width:100%;
					}

            .wrapper .contents .subpic{
                float: left;
                width:94%;
                margin:10px 3% 0px;
                /* margin:10px 0 5px; */
                }
                .wrapper .contents .subpic img{
                    width:100%;
                    }

            .wrapper .contents .point{
                float: left;
                width: 90%;
                margin:20px 3% 15px 3%;
                padding: 2%;
                background: #d2eaff;
                /* border-radius: 10px; */
                }
                .wrapper .contents .point .cap{
                    float: left;
                    width: 100%;
                    margin: 5px 0;
                    }
                    .wrapper .contents .point .cap .L{
                        float: left;
                        width: 8%;
                        margin:0 0;
                        font-size:16px;
                        /* background: #d6ffec; */
                        }
                    .wrapper .contents .point .cap .R{
                        float: left;
                        width: 92%;
                        margin:0 0;
                        font-size:16px;
                        /* background: #fdffd6; */
                        }

            .wrapper .contents .txt,
            .wrapper .contents .txt1,
            .wrapper .contents .txt2{
                float: left;
                width:94%;
                margin:10px 3% 0px;
                line-height: 1.5em;
                }

		.wrapper .products{
			/* position: fixed;
			bottom:50px;  */
			width:80%;
			height:50px;
			margin:10px 10%;
			text-align: center;
			line-height: 50px;
			background: #fac42f;
			border-radius: 10px;
			}

			.wrapper .products .pic{ display: none;}

			.wrapper .products a{
				color: #000;
				text-decoration: none;
				display: block;
				}

		/* .wrapper .swiper {
			float: left;
			width: 100%;
			height: 250px;
			} */
}





.mt50{margin-top: 50px !important;}
.mt100{margin-top: 100px !important;}
.mb50{margin-bottom: 50px !important;}
.mb100{margin-bottom: 100px !important;}



/* blockquote.tiktok-embed{ */
	/* float: left; */
/* max-width: 605px; */
/* min-width: 325px; */
	/* width: 100%; */
	/* height: 50%; */
	/* margin: 0; */
	/* padding: 0; */
	/* } */
	/* blockquote.tiktok-embed section a{ */
		/* display: none; */
		/* } */