@charset "UTF-8";
@media screen and (max-width: 1000px) {
	#page-gallery .gallery{ width: 95%;}
	#page-gallery .gallery-item{ width: 23%; margin-right: 2%; margin-bottom:2%; overflow: hidden; }

#page-gallery .gallery-item {
    position: relative;
    width: 23%;
    height: auto;
}
#page-gallery .gallery-item:before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 */
}
#page-gallery .gallery-item a {
	display:block;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
#page-gallery .gallery-item a img{
	height:100%;
	max-width: none;
}
#page-gallery .gallery-item a img.check1{
	height:auto;
	width:100%;
}
#page-gallery .gallery-item img.bottom {
    bottom: 0;
    position: inherit;
}
}
@media (min-width: 768px) and (max-width: 980px){
	img{max-width: 100%;}
	#menu li{width: 16.5%}
	#page-concept .box-01{background: url('../images/common/bg_trans.png') repeat; margin-top: 40px; border: double 4px #E296AB;}

	.schedule .new-row{ display: none; width: 0}
	#single-location .col-03{ width: 30%}
	#single-location .plan-dtl .img{ width: 35%; margin-right: 2%;}
	#single-location .plan-dtl .dtl{ width: 63%;}
	#page-index .one-half{ width: 44%}
	#page-index .box-subnav{ margin: 20px 2%}
	#page-index .one-third{ width: 27%}
	#page-index #box-movie{ width: 54%; }
	#page-index .fb{ width: 35%; }
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}
@media screen and (max-width: 769px) {
	img{max-width: 100%;}
	#wrapper{ max-width: 768px; }
	.container{
		max-width: 768px;
		margin: 0 auto;
		word-wrap: break-word;
	}
	#header{ padding: none; }
	.header_left{ float: none; text-align: center;}
	.header_right{ display: none;}

	/* menu 
	======================== */
	#menu{ display: none;}
	#sp-header{ display: block; background: #AE9980; height: 40px; }
	#sp-header a{ background: url(../images/common/icon_sp_menu.png) 0 10px no-repeat; display: block; width: 70%; margin: 0 auto; padding-left: 30px; line-height: 42px; color: #FFFFFF; font-family: 'Sorts Mill Goudy', serif; }
	#sp-menu{ display: none; background: #AE9980; }
	#sp-menu li{ height: 30px; width: 70%; margin: 0 auto; font-family: 'Sorts Mill Goudy', serif; padding: 3px 0 3px 20px; }
	#sp-menu li a{ color: #FFFFFF; line-height: 40px; display: block;}
	.flex-control-nav{ display: none;}
	.main_img{ max-width: 786px; height: auto;}
	.main_img img{ display: block;}
	.head-catch h2, .head-catch p{ padding: 0 10px;}
	#page-index #box-intro{ margin: 20px 0;}
	#page-index #box-intro p{ padding: 40px 15px;}
	#page-index .one-half,#page-index .one-third{ width: 100%; height: auto; margin: 0 auto}
	#page-index .box-subnav{ float: none; padding: 0; margin: 0; width: 100%; }
	#page-index .box-subnav a{ display: block;}
	#page-index .box-subnav h2{ padding: 20px 0}
	#page-index .box-subnav .btn_more{ display: none;}
	#page-index .box-subnav .inner{ width: 90%; margin: 0 auto 20px; padding: 10px;}
	#page-index .box-subnav .inner .img{ text-align: center;}
	#page-index .one-third .img{ width: 40%; float: left;}
	#page-index .one-third .txt{ width: 60%; float: left;}
	#page-index .one-third h2, #page-index .one-third p{ padding: 0 0 10px 10px; text-align: left;}
	#page-index #box-news{ float: none; width: 100%; padding: 0}
	#page-index #box-news h2{ padding: 20px 0 10px 10px; margin: 0;}
	#page-index #box-news .txt{ float: none; width: 100%; clear: both;}
	#page-index #box-news .news_row{ margin-bottom: 0;}
	#page-index .fb{ display: none;}
	#page-index #box-movie{ width: 94%; padding: 10px 3%;float: none; margin-bottom: 20px;}
	.videoWrapper {
		position: relative;
		padding-bottom: 56.25%; /* 16:9 */
		padding-top: 25px;
		padding-right: 25px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	#page-concept .box-01 p{  padding: 0 10px; }
	#page-concept .about .img, #page-concept .about .txt{ width: 100%; float: none;}
	#page-concept .about .txt, #page-concept .about .txt{ margin-top: 20px;}
	#page-plan .box-plan .col{ width: 100%; float:none;}
	#page-plan .box-plan .photo li{ width: 22%;float: left; margin-right: 1%}
	#page-location .area, #page-location .situation{ padding: 40px 0;}
	#page-location .area .map{ padding-left: 10px; padding-right: 10px;}
	#page-location .area h2, #page-location .area ul{ padding: 0 20px;}
	#page-location .situation h3{ padding: 0 10px; margin-top: 60px;}
	#page-location .situation .row{ padding: 0 10px;}
	#page-location .situation .thumb{ display: none;}
	#page-location .situation .place_list{width: 100%; float: none;}
	#page-location .situation .place_list li{width: 24%; margin-left: 1%; margin-bottom: 1%}
	#page-gallery .col{ width: 30%; float: left;}
	#page-faq .faq li p{max-width: 90%;}
	#single-location .spot, #single-location .plan, #single-location .schedule, #single-location .stay, #single-location .sight, #single-location .gm{ padding: 20px;}
	#single-location .col-03{ width: 30.3%; margin-right: 3%;}
	#single-location .col-04{ width: 24%; margin-right: 1%;}
	#single-location .plan-dtl .img{ width: 27%; margin-right: 3%}
	#single-location .plan-dtl .dtl{ width: 70%}
	#page-gallery .pagination{ padding: 20px 0;}
	#page-gallery .pagination .back-index{ position: relative; top:10px; display: block; text-align: center;}
	#page-report .col{ width: 30%; float: left;}
	#page-report .single-row{ padding: 20px;}
	#page-report .single-row .ttl-box .txt{ width: 55%;margin-right:5%;}
	#page-report .single-row .ttl-box .img{width: 40%}
	#page-report .single-row .ttl-box h2,#page-report .single-row .ttl-box .ttl-main{ margin-bottom: 10px;}
	#page-report .single-row .sub-box .txt{width: 60%;margin-right:5%;}
	#page-report .single-row .sub-box .img{width: 35%}
	#page-report .single-row .photo-box ul li{ width: 24%; margin-right: 1%;}
	#page-contact .main{ padding: 20px;}
	#page-contact .form-full{ width: 95%;}
	#page-contact textarea{ width: 93%;}
	#page-contact .form-half{ width: 90%}
	#page-news .main,#page-news .news-sidebar{ width: 100%; margin-right: 0; float: none;}
	#page-news .col{ width: 32%;}
	#page-contact .tbl th{ width: 30%}
	#page-sitemap .col{ width: 100%; float: none; margin-right: 0 }
	.footer-bnr{ display: none;}
	#sp-footer-bnr{ display: block; margin-top: 40px;}
	.btn-call { width: 310px; margin: 0 auto 20px; height: 52px; }
	.btn-mail{ width: 310px; margin: 0 auto 20px; height: 37px; }
	#sp-footer{ display: block;}
	#footer{ height: auto;}
	#footer .left{ float: none;}
	#footer .right{ display: none;}
	#footer .copyright{ padding: 0 10px;}
	#banner_hairgallery{display:none;}
	#sp_banner_hairgallery{display:block;width:96%;margin:auto;}
#page-report .clearfix{width:96%;margin:auto;}
#page-report .clearfix li{
	width:31%;
	margin-right:1%;
	margin-bottom:10px;
}
#page-report .clearfix li .img img{
	width:100%;
}
#page-report .clearfix{width:96%;margin:auto;}
#page-report .clearfix li{
	width:31%;
	margin-right:1%;
	margin-bottom:10px;
}
#page-report .clearfix li .img img{
	width:100%;
}
#report-sidebar .list ul{
	margin-bottom:20px;
}
#report-sidebar .list li{
	display:inline-block;
	width:31%;
	margin-right:1%;
	padding:0!important;
	padding-top:10px!important;
	border-bottom:0!important;
	vertical-align: top;
}
#report-sidebar .list li img{
	width:100%;
	margin-bottom:5px;
}
#report-sidebar .list li a.text{
	width:100%;
	font-size:12px;
	line-height:1.3em;
}
#page-index #box-news {
    margin-bottom: 30px;
}
}
@media screen and (max-width: 480px) {
#page-report .clearfix li{
	width:48%;
}	
	#page-location .situation .place_list li{width: 48%; margin-left: 2%; margin-bottom: 2%; margin-right: 0;}
	#page-plan .main{ padding: 20px;}
	#page-plan .box-plan .photo li{ width: 48%;  margin-left: 2%; margin-bottom: 2%; margin-right: 0;}
	.schedule .circle{ margin-top: 10px;}
	#page-plan .tbl_step th{ width: 60px;}
	#single-location .plan-dtl .img, #single-location .plan-dtl .dtl{width: 100%; float: none;}
	#single-location .col-04{ width: 48%; margin-left: 2%; margin-bottom: 2%; margin-right: 0;}
	#page-news .col{width: 48%; margin-left: 2%; margin-bottom: 2%; margin-right: 0;}
}
@media screen and (max-width: 360px) {
	#page-concept .box-01{ height: auto; padding-bottom: 40px;}
	#page-concept .about{ padding: 20px;}
	#single-location .plan-dtl table th{ width: 70px}
	#single-location .col-03{ width: 100%; text-align: center; padding-bottom:20px; margin-bottom: 20px; border-bottom: 1px solid #ccc;}
	#single-location .col-03:last-child{ margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
	#single-location .schedule{ padding: 20px 10px;}
	#page-news .news-container{ padding: 20px 0 40px 0;}
	#page-news .wp-pagenavi{ text-align: center;}
	#page-news .col{width: 100%; float: none; margin-left: 0; margin-right: 0; margin-bottom: 20px; border-bottom: 1px dotted #ccc; padding: 10px;}
	#page-gallery .col, #page-report .col{ width: 100%; float: none; text-align: center; margin-bottom: 40px; }
	.schedule .circle{ margin-top: 10px; width: 120px; padding: 15px 30px 15px 19px !important;}
	#page-report .single-row .ttl-box .txt{ float: none; width: 100%;}
	#page-report .single-row .ttl-box .img{ float: none; width: 100%; text-align: center;}
	#page-report .single-row .photo-box ul li{ width: 45%; margin-left:2% text-align: center; margin-top: 10px;}
	.sub-page .main{ padding: 20px;}
	#page-faq .remark, #page-contact .remark{ margin-right: 30px;}
	#page-faq .faq{ margin-bottom: 40px; padding-bottom: 20px; border-bottom: 1px dotted #eee;}
	#page-faq .faq:last-child{ margin-bottom: 0; border: none;}
	#page-faq .faq li p{ width: 85%}
	#page-contact .main{ padding: 10px;}
	#page-contact .tbl th{ font-size: 14px; width: 20%}
}