@charset "utf-8";

/* TOP CSS */

/* --------------------------------------

Base settings

---------------------------------------*/

body.front
{
	background:url(../img/bg-main-sp.jpg) no-repeat bottom center;
	background-size:cover;
}


/*-------- font --------*/




/*-------- bg --------*/

/*-------- box --------*/

.wrapper
{
	width:100%;
	padding:0 2%;
	flex: none;
    width: 100%;
    display: block;
}

.iframe
{
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.iframe iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.bottom40
{
	margin-bottom:20px;
}

.bottom30
{
	margin-bottom:10px;
}


/*-------- col --------*/

.col2.flexbox
{
	flex:none;
	width:100%;
	display:block;
}

.col2.flexbox .item
{
	width:100%;
}

.col3.flexbox .item {
    width: 33%;
}

/*-------- btn --------*/

/* --------------------------------------

header

---------------------------------------*/

body.front header
{
	height:100%;
	padding:46px 0;
}


@media (max-width:1000px)
{ 
	body.front header #logo
	{
		position:absolute;
		top: 60px;
		left:4%;
		right:0;
		margin:0 auto;
		z-index:-1;
	}
}

@media (max-width:480px)
{ 
	body.front header #logo
	{
		position:absolute;
		top: 42%;
		left:0;
		right:0;
		-webkit-transform: translateY(-42%); /* Safari用 */
		transform: translateY(-42%);
		margin:0 auto;
		text-align:center;
		z-index:-1;
	}
}


body header #gnav
{
	display:none;
}

header #gnav .flexbox
{
	-webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
}

header #gnav .flexbox li
{
	width:50%;
	text-align:center;
	padding:1px;
}

/*header #gnav .flexbox li:nth-child(7){
    width: 100%!important;
}*/


header #gnav .flexbox li a
{
	line-height:50px;
	background-color: rgba(0,0,0,0.8);
	display:block;
	margin:0;
	 font-size: 16px;
}

header #gnav ul li:last-child a
{
	margin:0;

}



header #toggle
{
    position:absolute;
    width:20px!important;
    top:0px;
    right:4%;
    display:block;
    height: 30px;
}

.menu-trigger,
.menu-trigger span {
    display: block;
    transition: all .4s;
    box-sizing: border-box;
}
.menu-trigger {
    position: relative;
    width: 100%;
    height: 100%;
}
.menu-trigger span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #fff;
    border-radius: 2px;
}
.menu-trigger span:nth-of-type(1) {
    top: 16px;
}
.menu-trigger span:nth-of-type(2) {
    top: 22px;
}
.menu-trigger span:nth-of-type(3) {
    top: 28px;
}

/* custom */

.menu-trigger::after {
    position: absolute;
    left: 0;
    bottom: -22px;
    /*content: 'MENU';*/
    display: block;
    width: 100%;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    text-align: center;
    transition: all .4s;
}
.menu-trigger.active::after {
    /*content: 'CLOSE';*/
    bottom: -22px;
}
.menu-trigger.active span:nth-of-type(1) {
    -webkit-transform: translateY(6px) rotate(-45deg);
    transform: translateY(6px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
    opacity: 0;
}
.menu-trigger.active span:nth-of-type(3) {
    -webkit-transform: translateY(-6px) rotate(45deg);
    transform: translateY(-6px) rotate(45deg);
}


/* -------------- sub  ---------------*/

.sub header
{
	padding:10px 0;
}

.sub header #logo
{
	height:30px;
}

.sub header #logo img
{
	height:100%;
	width:auto;
}

.sub .menu-trigger span{    background-color: #282828;}
.menu-trigger::after { color:#282828;}


.sub header #gnav
{
	padding-top:10px;}

.sub header #gnav ul li a
{
	color:#c2c2c4;
}

/* --------------------------------------

mainvisual

---------------------------------------*/

.sub .mainvisual
{
    max-width: none;
    padding: 50px 2% 0;
}

.sub .mainvisual h1 {
    padding: 16px 0;
    font-size: 20px;
    position: relative;
    text-align: center;
}

/* --------------------------------------

main

---------------------------------------*/


/* ----------- main-potter ------------*/

.sub #main .col3.tab
{
	padding:10px 0;
}

.sub #main .col3.tab li .kana
{
	font-size:11px;
}

.sub #main .col3.tab li a
{
	font-size:18px;
}

.sub #main .potter .box
{
	width:100%;
	background:none;
	padding: 40px 00px 00px 0;
}

.sub #main .potter .box h2
{
	font-size:30px;
	width:46%;
	padding-bottom:10px;
}

.sub #main .potter .box h3
{
	font-size:20px;}

.sub #main .potter .box table th,
.sub #main .potter .box table td
{
	background-color: rgba(255,255,255,0.6);
}



/* ----------- main-access ------------*/

.sub #main .flexbox.col2 .item:first-of-type
{
	border:none;
}

.sub #main .flexbox.col2 .item .btn
{
	margin-bottom:20px;
	font-size:16px;
	padding:10px 0;
	
}

/* ----------- main-scenery ------------*/


/* ----------- main-gallery ------------*/

.sub #main .col4.flexbox.gallery .item
{
	width:49%;
}

.sub #main .col4.flexbox.gallery .item img
{
	width:100%;
	height:auto;
}

.sub #main .col4.flexbox.gallery .item:hover
{
	position: relative;
}

.sub #main .col4.flexbox.gallery .item:hover a:active
{
	top: 50%;
	left:0;
	right:0;
	-webkit-transform: translateY(-50%); /* Safari用 */
	transform: translateY(-50%);
	display:block;
}

.sub #main .col4.flexbox.gallery .item:hover a:after
{
	display:none;
}

.sub a.btn.white
{
	padding:0;
	font-size:20px;
	line-height:50px;
	margin-bottom:20px;
}

/* ----------- main-contact ------------*/

.sub #main .contact h2
{
	font-size:16px;
	padding:10px 0;
	margin-bottom:10px;
}

.sub #main .contact h2 br
{
	display:block;
}

.sub #main .contact input[type="text"],
.sub #main .contact input[type="tel"],
.sub #main .contact input[type="email"],
.sub #main .contact textarea
{
	width:100%!important;
}

.sub #main .contact textarea
{
	height:50vh!important;
}

.sub #main .contact button
{
	width:90%;
	line-height:50px;
}

.sub #main .contact .border-b
{
	padding-bottom:20px;
	margin-bottom:20px;
}

.sub #main .contact .text-center
{
	padding-bottom:20px;
}


.sub #main .contact .dark
{
	padding:10px 4%;
	font-size:14px;
}


/* --------------------------------------

footer

---------------------------------------*/

body.front small
{
	color:#b0b0b0;
}



/* -------------- sub ---------------*/

.sub footer small
{
	line-height:40px;}