@charset "utf-8";


/* メイン---------------- */
main{

	background: #E4F4FD;
}
.wrapper {
	width:100%;
	max-width:1024px;
	margin: 0 auto;
	padding: 0 50px;
	position:relative;
}


@media only screen and (max-width:860px){
	main{
	}
	.wrapper {
		width:100%;
		padding: 0px 20px 0;
	}
}

#skip {
	position: absolute;
	left: -9999em;
}

/* ページトップに戻る---------------- */
#return_top{
	z-index:8888;
	position:fixed;
	right:0px;
	bottom:-50px;
}
#return_top a{
	display:block;
	width: 50px;
	height: 50px;
	background: url(../images/page_top.svg) left center / contain no-repeat;
	transition:0.3s ease opacity;
	opacity:0.6;
}
#return_top a:hover{
	opacity:1;
}
#return_top p{
	visibility: hidden;
}

@media only screen and (max-width:860px){
	#return_top{
		z-index:8888;
		position:fixed;
		right:0px;
		bottom:-38px;
	}
	#return_top a{
		display:block;
		width: 38px;
		height: 38px;
	}
}

/* ヘッダー---------------- */

header{
	background: #E4F4FD;
	padding: 20px 0 25px;
}

#header-content{
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 5px;
}
#header-content > *{
	flex: 1;
}
#header-logo-okadai{
	margin-bottom: 5px;
}
#header-logo-okadai img{
	width: 138px;
}
#header-logo-x_program{
	text-align: center;
	margin-bottom: 5px;
}
#header-logo-x_program img{
	width: 205px;
}

#header-contact{
}

#nav-logo{
	display: none;
}
.main-nav{
	padding: 15px 50px;
	border-top: 3px double #231815;
	border-bottom: 3px double #231815;
}


.main-nav{
	display: flex;
	gap: 15px 50px;
}

.main-nav li{
	font-size: 0.8125em;
	line-height: 1.15;
	color: #231815;
}
.main-nav a{
	color: #231815;
}

#header-nav2{
	display: flex;
	flex-direction: column;
	align-items: end;
}
#header-search{
	margin-bottom: 5px;
	position:relative;
	font-size: 0.8125em;
	line-height: 1.15;
	border-radius: 3px;
	overflow: hidden;
}
#header-search input[type="text"]{
	border: 2px solid #040000;
	background #ffffff;
	padding: 0 20px 0 5px;
	color: #231815;
}
#header-search input[type="submit"]{
	position:absolute;
	right: 0;
	top:0;
	width: 25px;
	height: 100%;
	background:url(../images/icon-search.svg) center / 10px no-repeat;
	background-color: #040000;
	border: 2px solid #040000;
}
#header-nav2 ul{
	display: flex;
	gap: 15px 25px;
}
#header-nav2 ul li{
	font-size: 0.8125em;
	line-height: 1.15;
	color: #231815;
	white-space: nowrap;
}
#header-nav2 ul li a{
	color: #231815;
}

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


	header{
		background: #E4F4FD;
		padding: 20px 0 30px;
	}

	#header-content{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 0;
	}
	#header-content > *{
		flex: 1;
	}
	#header-logo-okadai{
		text-align: center;
		margin-bottom: 20px;
		width: 28.9%;
		min-width: 82px;
	}
	#header-logo-okadai img{
		width: 100%;
	}
	#header-logo-x_program{
		text-align: center;
		margin-bottom: 0;
		width: 59%;
		min-width: 166px;
	}
	#header-logo-x_program img{
		width: 100%;
	}
	#header-nav2{
		display: none;
	}


	#header-nav{
		display: none;
		position:fixed;
		top: 0;
		left: 0;
		z-index:888;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		scrollbar-width: none;
		background: rgba(22,14,12,0.8);
	}
	#header-nav .wrapper{
		padding: 0;
	}

	#nav-logo{
		display: block;
		margin:70px auto 40px;
		width: 166px;
	}
	#header-nav .main-nav{
		flex-direction: column;
		gap: 0;
		border: none;
		padding: 0 20px;
	}
	#header-nav .main-nav > li{
		text-align: center;
		font-size: 1em;
		line-height: 2.125;
		font-weight: 500;
		color: #F7D5D8;
	}
	#header-nav .main-nav > li a{
		display: block;
		color: #F7D5D8;
	}
	
}

/* フッター---------------- */

footer{
}

#footer-nav{
	background: #ffffff;
	color: #231815;
	padding: 30px 0;
}
#footer-nav ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	gap: 15px 40px;
}
#footer-nav li{
}
#footer-nav li a{
	color: #231815;
}

#footer-copy{
	background: #007DC6;
	padding: 25px 0 25px;
}
#footer-copy p{
	text-align: center;
	font-size: 0.75em;
	line-height:1.4;
	color: #ffffff;
}

@media only screen and (max-width:860px){
	#footer-nav{
		padding: 20px 0;
	}
	
	#footer-nav ul{
		display: flex;
		flex-direction: column;
		align-items:center;
		gap: 10px 40px;
	}
	#footer-copy{
		padding: 15px 0;
	}
}


/* バナー---------------- */
#banner{
	background:url(../images/border-oblique.png) top center / 100% 5px repeat-x;
	background-color: #F5F7FC;
}
#banner-bg{
	padding: 50px 0;
	background:url(../images/bg-banner.png) left 50% top 20px / 87% auto no-repeat;
}
#banner .wrapper{
}
#banner ul{
	display: flex;
	flex-wrap: wrap;
	align-items:center;
	justify-content: center;
	gap: 20px 80px;
}

#banner ul li{
	width: 250px;
}
#banner ul li img{
	width: 100%;
}
#banner ul li a{
	display: block;
}

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

	#banner{
		padding: 20px 0;
		background:url(../images/border-oblique.png) top center / 100% 2px repeat-x,
		url(../images/border-oblique.png) bottom center / 100% 2px repeat-x;
		background-color: #F5F7FC;
	}
	
	#banner-bg{
		padding: 0 0;
		background:none;
	}
	#banner ul{
		display: flex;
		align-items:center;
		flex-direction: column;
		gap: 20px 80px;
	}
}

/* スマホボタン---------------- */

#header-button{
	display:none;
}
@media only screen and (max-width:860px){
	#header-button{
		display:block;
		position: fixed;
		top: 20px;
		right: 20px;
		cursor:pointer;
		border-radius:50px;
		
		z-index:9999;
		display:block;
		cursor:pointer;
		width: 50px;
		height: 50px;
		background: #ffffff;
		box-shadow: 3.5px 3.5px 4.3px rgba(0,0,0,0.6);
	}
	.hnbgmenu {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.menu-line {
		top: 50%;
		top: calc(50% - 2px);
	}
	.menu-inner::after,
	.menu-inner::before {
		content: "";
	}
	.menu-line,
	.menu-inner::after,
	.menu-inner::before {
		position: absolute;
		display: block;
		width: 66%;
		left: 17%;
		height: 4px;
		transition: .15s ease-out;
		background-color: #5C3723;
		border-radius: 4px;
	}
	.menu-inner::before {
		top: 30%;
		top: calc(30% - 2px);
	}
	.menu-inner::after {
		top: 70%;
		top: calc(70% - 2px);
	}
	.hnbgmenu.active .menu-line {
		width: 0;
		opacity: 0;
		transform: translateX(20px) rotate(90deg);
	}
	.hnbgmenu.active .menu-inner::before {
		transform: translateY(10px) translateX(0px) rotate(-135deg);
	}
	.hnbgmenu.active .menu-inner::after {
		transform: translateY(-10px) translateX(0px) rotate(135deg);
	}
}