header {
	height: 100px;
	margin-bottom: 0px;
	.inner {
		position: fixed;
		width: 100%;
		max-width: 1100px;
		min-width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		padding: 0 1rem;
		z-index: 100;
		background-color: #001959;
		box-shadow: 0px 5px 5px -5px #777777;
		height: 100px;

			.logo {
					margin: 0 auto;
					flex: none;
					& a {
							display: block;
							& img {
									height: 70px;
									width: auto;
							}
					}
			}
			.action-list{
				display: flex;
				gap:.5rem;
				& a{
					width: 150px;
				}
				@media screen and (max-width: 768px){
					display: none;
				}
			}
		}
		@media screen  and (max-width: 768px){
			height: 50px;
			.inner{
				height: 50px;
				.logo{
					& a {
						& img {
							height: 40px;
						}
					}
				}
			}
			&.hide{
				transform: translateY(-100%);
				opacity: 0;
			}			
		}
}
.menu-wrapper {
		margin-right: 4.8rem;

		.gnav {
			flex: none;
			display: block;
			position: fixed;
			top: 0;
			left: -310px;
			bottom: 0;
			width: 310px;
			padding: 1rem;
			background: #fff;
			overflow-x: hidden;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			transition: all .5s;
			z-index: 3;
			opacity: 0;

			.menu-container {
					width: 100%;
					.menu {

								display: flex;
								flex-wrap: wrap;
								align-items: center;
								gap:1rem;
								& li {
									width: 100%;
									border-bottom: #000 1px solid;
										& a {
											transition: all .3s;
											position: relative;
											display: block;
											font-size: 1rem;
											font-weight: bold;
											color: #000;
											padding: 1rem;
											line-height: 1;
											text-decoration: none;
											&::after{
												content: url(../img/icon-arrow.svg);
												position: absolute;
												right: 0;
												top: 50%;
												transform:translateY(-50%);
											}
										}
								}

					}
			}
		}

		.toggle-btn {
				display: flex;
				position: fixed;
				top: 0;
				left: 0;
				width: 50px;
				height: 50px;
				justify-content: center;
				align-items: center;
				cursor: pointer;
				z-index: 3;

				& span,
				& span::before,
				& span::after {
					content: '';
					display: block;
					height: 2px;
					width: 35px;
					border-radius: 3px;
					background-color: #fff;
					position: absolute;
					transition: all .5s;
				}

				& span::before {
					bottom: 8px;
				}

				& span::after {
					top: 8px;
				}
		}

		&.menu-open {
				.gnav {
						left: 0;
						opacity: 1;
				}

				.toggle-btn {
						top: 0;
						margin-top: 0;
                        span {
                            background-color: transparent;

                            &::before {
                                transform: rotate(315deg);
								background-color: #000;
                                top: 0;
                            }

                            &::after {
                                transform: rotate(-315deg);
								background-color: #000;
                                top: 0;
                            }
                        }

				}

				#mask {
						display: block;
						position: fixed;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
						background: #000;
						opacity: .3;
						z-index: 2;
						cursor: pointer;
				}
		}

		#mask {
				display: none;
				transition: all .3s;
		}
}
.container{
	width: 100%;
	/* background-image: url(../img/backgound-image.gif); */
	background-image: linear-gradient(to bottom, #A9DDFB 0%, #39B8F0 9%, #2BACED 47%, #006EB1 53%,#00A8ED 85%,#72C8F3 100%);
}

.container.top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.top-bar{
		width: 100%;
		border-top: solid 10px #BD3731;
		background-color: #DB7D3C;
		height: 30px;
	}
	.btn-menu{
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 1rem;
		gap: 2rem;
	}
	.news{
		background-color: #fff;
		width: 90%;
		max-width: 1000px;
		margin-top: 2rem;
		.news-header{
			font-size: 1.5rem;
			padding-top: 1.5rem;
			text-align: center;
		}
		.news-items{
			padding-inline-start: 0px;
			.news-item{
				margin: 0 .3rem;
				border-bottom: #ddd 1px solid;
				& a{
					display: flex;
					justify-content: flex-start;
					text-decoration: none;
					font-size: 1em;
					padding: .5rem;
					.news-date{
						padding-right: 1rem;
					}
				}

			}
		}
	}
	.product{
		background-color: transparent;
		width: 90%;
		max-width: 1000px;
		.woocommerce ul.products li.product{
			width: 100%;
			margin-bottom: 1rem;
			text-align: center;
			.product-wrapper{
				border-radius: 16px;
				border: 3px solid #fff;;
				overflow: hidden;
				background-color: #E7F8FF;
				margin-bottom: 60px;
				.product-text{
					background-color: #fff;
					margin-top: 1rem;
					padding: 1rem;
					.product-title{
						color: #fff;
						background-color: #001C72;
						font-size: 1.5rem;
						border-radius: 100px;
					}
					.product-detail-text{
						font-size:1.2rem;
						color:#0170b3;
					}
				}
			}
			
			.woocommerce-loop-product__title{
				font-size: 3.2rem;
				background-image: linear-gradient(to bottom, #A9DDFB 0%, #39B8F0 9%, #2BACED 47%, #006EB1 53%,#00A8ED 85%,#72C8F3 100%);
				text-shadow: 0 4px 4px rgba(0,0,0,0.6);
				color: #FFD000; 
				font-weight: bold;
				margin-bottom: 1rem;
			}
			.price{
				padding: 3rem 0;
				.woocommerce-Price-amount.amount{
				font-size: 3.2rem;
				font-weight: bold;

				}

			}
			.woocommerce-Price-currencySymbol{
				font-size: 2rem;
			}

			.view-product{
				width: 80%;
				max-width: 700px;
				margin: 0 auto;
				.view-product-button{
					text-align: center;
					width: 100%;
					/* background-image: url(../img/add-to-cart.svg); */
				}
			}
		}
		.unavailable-message{
			text-align:center;
			padding:2rem;
			font-size:2rem;
			font-weight:bold;
		}
		.product-note{
			width: 80%;
			max-width: 700px;
			margin: 0 auto;
			& h3{
				padding-left: 30px;
				line-height: 1.1em;
				background: url(../img/icon-package.svg) no-repeat left center;
			}
		}
		.quiz-note{
			margin-top: 2rem;
			& h3{
				padding-left: 30px;
				line-height: 1.1em;
				background: url(../img/icon-package.svg) no-repeat left center;
			}
		}
	}
}
.container.rule{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding:1rem;
	.rule-banner{
		width: 90%;
		max-width: 760px;
		text-align: center;
		& img{
			display: block;
			margin: 0 auto;
			}
		}
	.rule-text{
		width: 90%;
		max-width: 760px;
		background-color: #fff;
		padding: 2rem;
	}
}
.container.fun{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding:1rem;
	.fun-banner{
		width: 90%;
		max-width: 760px;
		text-align: center;
		& img{
			display: block;
			margin: 0 auto;
			}
		}
	.fun-content{
		width: 90%;
		max-width: 760px;
		background-color: #fff;
		padding: 2rem;
		& h2{
			border-top: 1px solid #777777;
			border-bottom: 1px solid #777777;
			padding: .5rem 0;
			margin: 2rem 0 1rem 0;
		}
		& h3{
			margin: .5rem 0;
		}
		.step-box{
			margin-bottom: .5rem;
			& p:nth-child(2){
				padding-left: 1em;
			}
		}
	}
}
.container.privacy{
	padding:1rem;
	text-align: center;
	& p{
		margin:1rem 0;
		padding: 1rem;
		background-color: #fff;
		text-align: left;
	}
}
.container.company{
	padding:1rem;
	text-align: center;
	& p{
		margin:1rem 0;
		padding: 1rem;
		background-color: #fff;
		text-align: left;
	}
}
.container.contact{
	padding:1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.contact-content{
		width: 90%;
		max-width: 1000px;
		background-color: #fff;
		padding: 1rem;
		.wpforms-submit.contact-submit{
			background-color: #000;
		}
	}
	
}
.container.archive{
	padding:1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.archive-content{
		width: 90%;
		max-width: 1000px;
		background-color: #fff;
		padding: 1rem;

		.news-items{
			padding-inline-start: 0px;
			.news-item{
				margin: 0 .3rem;
				border-bottom: #ddd 1px solid;
				& a{
					display: flex;
					justify-content: flex-start;
					text-decoration: none;
					font-size: 1em;
					padding: .5rem;
					.news-date{
						padding-right: 1rem;
					}
				}

			}
		}
	}
	
}
.container.single{
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.single-content{
		width: 90%;
		max-width: 1000px;
		background-color: #fff;
		padding: 1rem;
		margin-bottom: 1rem;
		.date{
			font-size: 1.2rem;
			text-align: right;
		}
		.article{
			margin-top: 1rem;
			padding: 1rem;
			border-top: solid 1px #777777;
		}
	}
	.btn-back{
		background-color: #000;
		border-radius: 5px;
		color: #fff;
		padding: .5rem;
		& a{
			text-decoration: none;
		}
	}
	
}

footer {
	.footer-inner{
		display: flex;
		justify-content: center; 
		align-items: center;
		flex-direction: column;
		padding: 1rem;
		background-color: #F5F5F5;
		width: 100%; 
		.logo {
			& a {
				width: 100%; 
				display: flex; 
				justify-content: center; 
				  & img {
					width: auto; 
					max-width: 60%; 
					height: auto; 
					@media screen and (max-width: 768px){
						max-width: 80%;
					}
				}
			}
	
		}
		.sns-icon{
			display: flex;
			align-items: center;
			margin: 1rem 0;
			gap: 4rem;
			font-size: 1.2rem;
			& img {
				width: 40px;
			}
		}
		.footer-nav{
			width: 90%;
			max-width: 1000px;
			@media screen and (max-width: 768px){
				width: 60%;
			}
			& ul{
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 100%;
				gap: 1.5rem;
				padding-inline-start: 0px;
				& li{
					display: flex;
					justify-content: space-between;
					& a{
						width: 100%;
						display: flex;
						position: relative;
						text-decoration: none;	
					}
					@media screen and (max-width: 768px){
						width: 100%;
					}
				}
			}
		}
		}

	.copyright{
		width: 100%;
		background-color: #000;
		color: #fff;
		padding: .5rem;
		text-align: center;
	}
}