@charset "utf-8";
/* CSS Document */

@media only screen and (min-width:769px) {
	#private_wrap{
		max-width: 2200px;
		margin: 0 auto;
	}
	
	h1.block-event-page--header-freespace,.block-event-page--header,.block-event-page--goods{
		display: none !important;
	}
	.slider_box{
		position: relative;
		z-index: 1;
	}
	.index-fade__items {
		position: relative;
		width: 100%;
		height: 900px;
	}
	.index-fade__items li {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.index-fade__items li img {
		width: 100%;
		height: 900px;
		object-fit: cover;
	}
	.maintop_textbox{
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.maintop_title img{
		display: block;
		margin: 0 auto 30px;
	}
	.maintop_text{
		width: 1000px;
		height: 200px;
		position: relative;
	}
	.maintop_text01{
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 40%;
		background-color: rgba(250,190,0,0.8);
		font-size: 20px;
		color: #fff;
		padding: 50px 40px;
	}
	.maintop_text02{
		position: absolute;
		z-index: 11;
		bottom: 0;
		right: 0;
		width: 65%;
		background-color: rgba(250,255,255,0.8);
		padding: 40px 45px;
	}
	.h2_pickup{
		width: 100%;
		padding: 20px;
		margin: 0 !important;
		background: #003461;
		text-align: center;
		color: #fff;
		font-size: 22px;
		font-weight: bold;
	}
	
	.nav_pickup{
		display: flex;
		background: #fff;
	}
	.nav_pickup ul{
		display: flex;
		width: 100%;
		
	}
	.nav_pickup ul li{
		width: 25%;
	}
	.nav_pickup ul li a{
		text-decoration: none;
	}
	.nav_pickup ul li img{
		width: 100%;
	}
	.nav_pickup_text{
		position: relative;
		width: 100%;
	}
	.nav_pickup_text::after {
		content: '';
		display: block;
		width: 16px; /* 矢印の大きさの指定 */
		height: 16px; /* 矢印の大きさの指定 */
		border-top: 2px solid #333; /* 矢印の太さの指定 */
		border-left: 2px solid #333; /* 矢印の太さの指定 */
		transform: rotate(135deg); /* 矢印の角度の指定 */
		position: absolute; /* 矢印の位置の指定 */
		right: 15px; /* 矢印の位置の指定 */
		top: 30%; /* 矢印の位置の指定 */
	}
	.nav_pickup_text span{
		display: block;
		font-size: 10px;
		padding: 10px 0 20px 10px;
	}
	.nav_pickup_text span em{
		font-size: 16px !important;
		font-weight: bold;
	}
	
	section.content01 {
		width: 100%;
		margin: 0;
		padding: 150px 0 200px;
		position: relative;
		top: 0;
		overflow: hidden;
		z-index: 10;
	}
	section.content01::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: url("/img/shopstore/watanet/event/private/bg_towel.png") center bottom;
		background-size: cover;
		transform: skewY(-5deg) translateY(-100px);
		z-index: -1;
	}
	
	section.content02 {
		width: 100%;
		margin: 0;
		padding: 150px 0 80px;
		position: relative;
		top: -100px;
		z-index: 10;
	}
	section.content02::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		transform: skewY(-5deg);
		z-index: -1;
	}	
	
	section.content03 {
		width: 100%;
		margin: 0;
		padding: 150px 0;
		position: relative;
		top: -90px;
		z-index: 10;
	}
	section.content03::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(to bottom, #fff8e1, #fff0c0);
		transform: skewY(-5deg);
		z-index: -1;
	}
	
	section.content04 {
		width: 100%;
		margin: 0;
		padding: 220px 0 160px;
		position: relative;
		top: -190px;
		z-index: 1;
		background: url("/img/shopstore/watanet/event/private/bg_gardening.jpg") center top;
		background-size: 170%;
		transition-property: background-position;
		transition-duration: .7s;
		transition-delay: .035s;
		
	}
	section.content04::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transform: skewY(-5deg);
		z-index: -1;
		
	}
	
	section.contentlast {
		width: 100%;
		margin: 0 0 -400px;
		padding: 200px 0 50px;
		position: relative;
		top: -390px;
		z-index: 10;
		overflow: hidden;
	}
	section.contentlast::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		transform: skewY(-5deg) translateY(100px);
		z-index: -1;
	}	
	
	.content_box{
		max-width: 1200px;
		margin: 0 auto;
	}
	.content_layout01,.content_layout02{
		display: flex;
		justify-content: space-between;
	}
	.content_layout01 .layout_text{
		width: 50%;
		padding-right: 60px;
	}
	.content_layout02 .layout_text{
		width: 50%;
		order: 2;
		padding-left: 60px;
	}
	.content_layout01 .layout_img{
		width: 50%;
	}
	.content_layout02 .layout_img{
		width: 50%;
		order: 1;
	}

	.item_title{
		position: relative;
		text-align: center;
		margin-bottom: 80px;
		padding: 0 10px;
	}
	.item_title img{
		display: inline-block;
		vertical-align: middle;
	}
	.item_title .heading{
		display: inline-block;
		vertical-align: middle;
		padding-left: 10px;
	}
	.item_title h2 {
		position: relative;
		font-size: 30px !important;
		font-weight: normal !important;
		margin: 0 !important;
		padding: 0 !important;
		background-color: transparent !important;
		text-align: center;
	}
	.item_title h2:before {
		position: absolute;
		bottom: -10px;
		left: calc(50% - 30px);
		width: 60px;
		height: 3px;
		content: '';
		border-radius: 3px;
		background: #999;
	}
	.item_title .sub_text{
		font-size: 16px;
		padding-top: 20px;
	}
	.layout_text h3.catch{
		font-size: 28px !important;
		font-weight: bold;
		font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
		margin-bottom: 60px;
	}
	.layout_text h4.sub_catch{
		font-size: 16px !important;
		font-weight: bold;
		border-bottom: 1px solid #222;
		padding-bottom: 5px;
		margin-bottom: 15px;
	}
	.layout_text p.catch_detail{
		margin-bottom: 60px;
	}
	.layout_text p.w320{
		position: relative;
		width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	.layout_text p.w320::after {
		content: '';
		display: block;
		width: 30px; /* 矢印の大きさの指定 */
		height: 30px; /* 矢印の大きさの指定 */
		border-top: 5px solid #7e7e7e; /* 矢印の太さの指定 */
		border-left: 5px solid #7e7e7e; /* 矢印の太さの指定 */
		transform: rotate(225deg); /* 矢印の角度の指定 */
		position: absolute; /* 矢印の位置の指定 */
		left: 25%; /* 矢印の位置の指定 */
		bottom: -35px; /* 矢印の位置の指定 */
	}
	.layout_text .blue_box{
		background: rgba(0,52,97,0.8);
		max-width: 420px;
		color: #fff;
		font-size: 15px;
		font-weight: bold;
		padding: 30px;
	}
	article.exposition01{
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin: 30px 0 80px;
	}
	article.exposition01 .exposition_list{
		width: 30%;
	}
	article.exposition01 .exposition_list img{
		margin-bottom: 20px;
	}
	article.exposition01 .exposition_list p{
		font-size: 14px;
	}
	article.exposition01 .exposition_list p.exposition_title{
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	article.exposition02{
		position: relative;
		max-width: 1200px;
		margin: 160px auto 80px;
	}
	article.exposition02 figue{
		position: absolute;
		top: 0;
		left: 0;
	}
	article.exposition02 .black_box{
		position: absolute;
		top: -80px;
		right: 0;
		min-width: 640px;
		color: #fff;
		background: rgba(14,14,14,0.6);
	}
	article.exposition02 .black_box p.text01{
		text-align: center;
		color: #fff;
		font-size: 16px;
		font-weight: bold;
		padding-top: 80px;
	}
	article.exposition02 .black_box p.text02{
		text-align: center;
		padding: 25px 0 50px;
	}
	article.exposition02 .black_box img.img_fry04{
		vertical-align: bottom;
	}
	
	.col2{
		max-width: 540px;
		margin: 0 auto;
	}
	.col3{
		max-width: 960px;
		margin: 0 auto;
	}
	ul.item_more{
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 80px;
	}
	ul.item_more li{
		background: #fff;
		padding: 20px;
		margin: 0 10px;
	}
	ul.item_more li a{
		text-decoration: none;
	}
	ul.item_more li .private_price{
		padding-top: 5px;
		text-align: right;
	}
	.btn_view_more{
		width: 210px;
		height: 60px;
		line-height: 60px;
		margin: 0 auto;
	}
	.btn_view_more a{
		display: block;
		text-align: center;
		width: 100%;
		height: 100%;
		color: #222;
		font-size: 14px;
		background: #fff;
		text-decoration: none;
		border: 1px solid #222;
	}
	.btn_view_more a:hover{
		color: #999;
		border: 1px solid #999;
	}
	.fadein {
		opacity : 0;
		transform: translateY(40px);
		transition: 1s;
	}

}
@media only screen and (max-width:768px) {
	
	.wrapper>main.pane-main {
		margin: 0 !important;
	}
	
	#private_wrap{
		max-width: 100%;
		margin: 0 auto;
	}
	.block-event-page--header-freespace,.block-event-page--header,.block-event-page--goods{
		display: none !important;
	}
	
	.slider_box{
		position: relative;
		z-index: 1;
	}
	.index-fade__items {
		position: relative;
		width: 100%;
		height: 500px;
	}
	.index-fade__items li {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.index-fade__items li img {
		width: 100%;
		height: 500px;
		object-fit: cover;
	}
	.maintop_textbox{
		position: absolute;
		z-index: 10;
		top: 25%;
		left: 20%;
		-webkit-transform: translate(-12%, -25%);
		transform: translate(-12%, -25%);
	}
	.maintop_title img{
		display: block;
		margin: 0 auto 30px;
	}
	.maintop_text{
		width: 100%;
		height: auto;
		margin: 0 auto;
		position: relative;
	}
	.maintop_text01{
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
		width: 100%;
		background-color: rgba(250,190,0,0.8);
		font-size: 16px;
		color: #fff;
		font-weight: bold;
		padding: 20px 10px;
	}
	.maintop_text02{
		position: absolute;
		z-index: 11;
		top: 75px;
		left: 0;
		width: 100%;
		background-color: rgba(250,255,255,0.8);
		padding: 20px 10px;		
	}
	.h2_pickup{
		width: 100%;
		padding: 20px;
		margin: 0 0 20px !important;
		background: #003461;
		text-align: center;
		color: #fff;
		font-size: 20px;
		font-weight: bold;
	}
	.nav_pickup{
		display: flex;
		flex-flow: column;
		margin: 0 10px;
		background: #fff;
	}
	.nav_pickup ul{
		display: flex;
		flex-flow: column;
		width: 100%;
		margin-bottom: 50px;
	}
	.nav_pickup ul li{
		width: 100%;
		margin-bottom: 20px;
	}
	.nav_pickup ul li a{
		display: flex;
		flex-wrap: wrap;
		text-decoration: none;
	}
	.nav_pickup ul li a img{
		width: 25%;
		padding-right: 5px;
	}
	.nav_pickup ul li a .nav_pickup_text{
		width: 70%;
	}
	.nav_pickup_text span em{
		font-style: normal;
		font-weight: bold;
	}
	
	section.content01,section.content02,section.content03,section.content04,section.contentlast {
		margin: 0 10px;
	}
	.content_box{
		max-width: 100%;
		margin: 0 auto;
	}
	
	.content_layout01,.content_layout02{
		display: flex;
		flex-flow: column;
	}
	.content_layout01 .layout_text{
		order: 2;
		margin-bottom: 30px;
	}
	.content_layout02 .layout_text{
		order: 2;
		margin-bottom: 30px;
	}
	.content_layout01 .layout_img{
		order: 1;
		margin-bottom: 30px;
	}
	.content_layout02 .layout_img{
		order: 1;
		margin-bottom: 30px;
	}
	
	.item_title{
		position: relative;
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
	}
	.item_title img{
		display: inline-block;
		width: 20%;
		vertical-align: middle;
	}
	.item_title .heading{
		display: inline-block;
		width: 78%;
		vertical-align: middle;
		padding-left: 5px;
	}
	.item_title h2 {
		position: relative;
		font-size: 20px !important;
		font-weight: normal !important;
		margin: 0 !important;
		padding: 0 !important;
		border-bottom: 0;
		background-color: transparent !important;
		text-align: center;
	}
	.item_title h2:before {
		position: absolute;
		bottom: -5px;
		left: calc(50% - 30px);
		width: 60px;
		height: 3px;
		content: '';
		border-radius: 3px;
		background: #999;
	}
	.item_title .sub_text{
		font-size: 14px;
		padding-top: 12px;
		line-height: 1.3;
	}
	
	.layout_text h3.catch{
		font-size: 20px !important;
		font-weight: bold;
		text-align: center;
		font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', '游明朝','Yu Mincho', '游明朝体', 'YuMincho','ＭＳ Ｐ明朝', 'MS PMincho', serif;
		margin-bottom: 30px;
	}
	.layout_text h4.sub_catch{
		font-size: 16px !important;
		font-weight: bold;
		border-bottom: 1px solid #222;
		padding-bottom: 5px;
		margin-bottom: 15px;
	}
	.layout_text p.catch_detail{
		margin-bottom: 30px;
	}
	.layout_text p.w320{
		position: relative;
		width: 60%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50px;
	}
	.layout_text p.w320::after {
		content: '';
		display: block;
		width: 30px; /* 矢印の大きさの指定 */
		height: 30px; /* 矢印の大きさの指定 */
		border-top: 5px solid #7e7e7e; /* 矢印の太さの指定 */
		border-left: 5px solid #7e7e7e; /* 矢印の太さの指定 */
		transform: rotate(225deg); /* 矢印の角度の指定 */
		position: absolute; /* 矢印の位置の指定 */
		left: 45%; /* 矢印の位置の指定 */
		bottom: -30px; /* 矢印の位置の指定 */
	}
	.layout_text .blue_box{
		background: rgba(0,52,97,0.8);
		max-width: 80%;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		padding: 10px;
		margin: 0 auto;
	}

	article.exposition01{
		width: 100%;
		display: flex;
		flex-flow: column;
	}
	article.exposition01 .exposition_list{
		margin-bottom: 20px;
	}
	article.exposition01 .exposition_list img{
		margin-bottom: 20px;
	}
	article.exposition01 .exposition_list p{
		font-size: 14px;
	}
	article.exposition01 .exposition_list p.exposition_title{
		font-weight: bold;
		margin-bottom: 5px;
	}
	
	article.exposition02 .black_box{
		position: relative;
		min-width: 100%;
		color: #fff;
		background: rgba(14,14,14,0.8);
	}
	article.exposition02 .black_box p.text01{
		text-align: center;
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		padding: 30px 10px 0;
	}
	article.exposition02 .black_box p.text02{
		text-align: center;
		padding: 25px 0;
	}
	article.exposition02 .black_box img.img_fry04{
		vertical-align: bottom;
	}
	
	ul.item_more{
		width: 100%;
		margin: 30px 0;
	}
	ul.item_more li{
		background: #fff;
		border-top: 1px solid #aaa;
		padding: 20px 0;
		margin: 0 10px;
	}
	ul.item_more li:last-child{
		border-bottom: 1px solid #aaa;
	}
	ul.item_more li a{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		text-decoration: none;
	}
	ul.item_more li a img{
		width: 30%;
		padding-right: 5px;
	}
	ul.item_more li a div{
		width: 65%;
	}
	ul.item_more li a p{
		padding-top: 5px;
	}
	ul.item_more li .private_price{
		text-align: right;

	}
	.btn_view_more{
		width: 210px;
		height: 60px;
		line-height: 60px;
		margin: 0 auto 50px;
	}
	.btn_view_more a{
		display: block;
		text-align: center;
		width: 100%;
		height: 100%;
		color: #222;
		font-size: 14px;
		background: #fff;
		text-decoration: none;
		border: 1px solid #222;
	}
	.btn_view_more a:hover{
		color: #999;
		border: 1px solid #999;
	}	
	
	
}