/***********************************
 base
***********************************/
@media screen and (max-width: 640px) {
	body{
		min-width: 100%;
		background: #f3f3f3;
	}
}

/***********************************
 header, footer
***********************************/
@media screen and (max-width: 640px) {
	header{
		background: #ffffff;
		padding: 15px 0;
		width: 100%;
		height: auto;
	}

	header h1{
		position: relative;
		top: 0;
		left: 10px;
		width: 265px;
		height: 36px;
	}
	header h1 a{
		width: 100%;
		height: 100%;
		background-size: contain;
	}
	
	header .site-nav,
	header .fnt-size{
		display: none;
	}
}

@media screen and (max-width: 640px) {
	footer{
		height: auto;
	}
	footer #page-bottom{
		position: relative;
		padding: 60px 0 30px;
		width: 100%;
		height: auto;
	}
	footer #page-bottom a.gotop{
		position: absolute;
		right: 10px;
		top: 20px;
		width: 128px;
		height: 20px;
		background-size: contain;
	}

	footer #copyright{
		position: relative;
		top: 0;
		font-size: 0.85em;
	}
}

/***********************************
 nav
***********************************/
.dwCheck,
.dwBtn,
.drawer-menu{
	display: none;
}

@media screen and (max-width: 640px) {
	header > nav{
		display: none;
	}
	
	nav.drawer-menu > ul{
		position: relative;
		top: 0;
		width: 100%;
		height: auto;
	}
	nav.drawer-menu > ul > li{
		float: none;
		width: 100%;
		height: auto;
	}
	nav.drawer-menu > ul > li > a{
		float: none;
		width: 100%;
		text-indent: 0;
		text-decoration: none;
	}

	.dwBtn,
	.drawer-menu{
		display: block;
	}
	/* dwWrap */
	#dwWrap{
		display: table;
		width: 100%;
		height: 100vh;
		box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
		-webkit-transition-duration: .5s;
		transition-duration: .5s;
	}
	#dwWrap__inner{
		display: table-cell;
	}
	/* drawer menu */
	.drawer-menu{
		box-sizing: border-box;
		position: fixed;
		top: 0;
		right: 0;
		width: 300px;
		height: 100%;
		padding: 60px 0;
		background: #0a0354;
		background: linear-gradient(to bottom, #2b278a, #0a0354 40%);
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .5s;
		transition-duration: .5s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		-webkit-transform-origin: right center;
		-ms-transform-origin: right center;
		transform-origin: right center;
		-webkit-transform: perspective(500px) rotateY(-90deg);
		transform: perspective(500px) rotateY(-90deg);
		opacity: 0;
	}
	.drawer-menu li{
		position: relative;
		margin: 0 0 1px;
		text-align: center;
	}
	.drawer-menu li::after{
		position: absolute;
		bottom: -1px;
		left: 20%;
		right: 20%;
		display: block;
		border-bottom: solid 1px #4b499d;
		content: "";
	}
	.drawer-menu li:last-child:after{
		display: none;
	}
	.drawer-menu li a{
		display: block;
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #fff;
		-webkit-transition: all .8s;
		transition: all .8s;
	}
	.drawer-menu li a:hover{
		color: #ffffff;
		background: #09053e;
		opacity: 1;
	}

	/* site-nav */
	.drawer-menu ul.site-nav{
		margin-top: 3em;
		width: 240px;
	}
	.drawer-menu ul.site-nav li::after{
		display: none;
	}
	.drawer-menu ul.site-nav li a{
		padding: 0 0 0 85px;
		width: auto;
		height: 50px;
		line-height: 50px;
		text-align: left;
	}
	.drawer-menu ul.site-nav li a.contact{
		background: url("/etc/fubokyo/images/icon_contact.png") no-repeat left 50px center;
	}
	.drawer-menu ul.site-nav li a.privacy{
		background: url("/etc/fubokyo/images/icon_privacy.png") no-repeat left 52px center;
	}
	.drawer-menu ul.site-nav li a:hover{
		background-color: #09053e;
	}
	
	/* checkbox */
	.dwCheck{
		display: none;
	}
	
	/* menu button - label tag */
	.menu-btn{
		position: fixed;
		display: block;
		top: 12px;
		right: 8px;
		display: block;
		width: 40px;
		height: 40px;
		font-size: 10px;
		text-align: center;
		cursor: pointer;
		z-index: 3;
	}
	.bar{
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 40px;
		height: 3px;
		background: #999999;
		-webkit-transition: all .5s;
		transition: all .5s;
		-webkit-transform-origin: left top;
		-ms-transform-origin: left top;
		transform-origin: left top;
	}
	.bar.middle{
		top: 13px;
		opacity: 1;
	}
	.bar.bottom{
		top: 26px;
		-webkit-transform-origin: left bottom;
		-ms-transform-origin: left bottom;
		transform-origin: left bottom;
	}
	.menu-btn__text{
		position: absolute;
		bottom: -13px;
		left: 0;
		right: 0;
		margin: auto;
		color: #666666;
		-webkit-transition: all .5s;
		transition: all .5s;
		display: block;
		visibility: visible;
		opacity: 1;
	}
	.menu-btn:hover .bar{
		background: #cccccc;
	}
	.menu-btn:hover .menu-btn__text{
		color: #cccccc;
	}
	.close-menu{
		position: fixed;
		top: 0;
		right: 300px;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0);
		-webkit-transition-property: all;
		transition-property: all;
		-webkit-transition-duration: .3s;
		transition-duration: .3s;
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		visibility: hidden;
		opacity: 0;
	}
	
	/* checked */
	.dwCheck:checked ~ .drawer-menu{
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
		-webkit-transform: none;
		-ms-transform: none;
		transform: none;
		opacity: 1;
		z-index: 2;
	}
	.dwCheck:checked ~ #dwWrap{
		-webkit-transition-delay: 0s;
		transition-delay: 0s;
		-webkit-transform: translateX(-300px);
		-ms-transform: translateX(-300px);
		transform: translateX(-300px);
	}
	.dwCheck:checked ~ .menu-btn .menu-btn__text{
		visibility: hidden;
		opacity: 0;
	}
	.dwCheck:checked ~ .menu-btn .bar.top{
		width: 56px;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.dwCheck:checked ~ .menu-btn .bar.middle{
		opacity: 0;
	}
	.dwCheck:checked ~ .menu-btn .bar.bottom{
		width: 56px;
		top: 40px;
		-webkit-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.dwCheck:checked ~ .close-menu{
		-webkit-transition-duration: 1s;
		transition-duration: 1s;
		-webkit-transition-delay: .3s;
		transition-delay: .3s;
		background: rgba(0,0,0,.5);
		visibility: visible;
		opacity: 1;
		z-index: 3;
	}
}

/***********************************
 .container
***********************************/
@media screen and (max-width: 640px) {
	#pnlist{
		padding: 0.3em 0;
		height: auto;
	}
	#pnlist p{
		width: auto;
		height: auto;
		line-height: 1.3em;
		font-size: 0.8em;
	}
	#pnlist p a{
		display: inline-block;
		padding: 0.3em 0.5em 0;
		vertical-align: bottom;
	}

	.contents{
		width: calc(100% - 20px);
	}

	.row{
		width: 100%;
	}
	.row .column2,
	.row .column2.wide,
	.row .column2.narrow{
		width: 100%;
	}
}

/**********************************************************************
 
 page
 
**********************************************************************/
.spBr{
	display: none;
}
@media screen and (max-width: 640px) {
	.spBr{
		display: block;
	}
	.spNone{
		display: none;
	}
}

/***********************************
 .about.fee
***********************************/
@media screen and (max-width: 640px) {
	.about #mainimage:has(h2#free){
		height: auto;
	}
	.about h2#free{
		padding: 1.5em 100px 1.5em 1em;
		background-position: left -110px center;
		width: auto;
		height: auto;
		line-height: 1.3em;
		text-align: left;
		font-size: 1.15em;
	}

	.about.fee .wrap{
		padding: 10px 15px 30px;
		width: calc(100% - 30px);
	}

	.about.fee .info{
		padding: 20px 15px;
		width: calc(100% - 50px);
		line-height: 1.6em;
		text-align: left;
		font-size: 1em;
	}
	.about.fee .info h3{
		margin: -45px 0 10px;
	}
	.about.fee .info h3::after{
		width: 11em;
	}

	.about.fee .row{
		gap: 0;
		width: 100%;
	}
	.about.fee .row img{
		margin: auto;
		width: 80%;
		max-width: 320px;
	}

	.about.fee .choiceBox{
		width: 100%;
	}
	.about.fee .choiceBox table{
		margin: 20px auto 30px;
	}
	.about.fee .choiceBox table th,
	.about.fee .choiceBox table td{
		display: block;
	}
	.about.fee .choiceBox table th{
		padding: 10px 15px 0 0;
	}
	.about.fee .choiceBox table td{
		display: block;
		padding: 10px 0 0 15px;
	}
	.about.fee .choiceBox.tight table{
		margin: 0 auto;
	}
	.about.fee .choiceBox.tight table tr:first-child th{
		padding-top: 0;
	}

	.about.fee .choiceBox span{
		margin: 30px 10px 0;
	}
	.about.fee .choiceBox p{
		margin: 15px 10px 0;
	}
}