@charset "utf-8";

/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header .main{ position:relative; overflow:hidden; max-height:800px; width:100%; margin: 0 auto; }
.header .pattern{ background: url(../images/pat.png); position:absolute; height:100%; width:100%; z-index:100; }
.header .main-visual{ background-image: url(./img/main-visual.jpg); background-size: cover; height: 100vh; position: relative; overflow: hidden; }
.header .login{ width:268px; height:462px; padding:40px 30px ; position:absolute; z-index:999; background:url(../images/login_base.png) no-repeat; }
.header .login ul li{ margin:20px 0;}
.header .login .sns img{margin-right:10px; }
.header ul li.btn a{ display: block; width: 190px;  border: solid 1px #ffffff; padding: 5px 25px; color:#ffffff; text-decoration:inherit; text-align:center; }
.header .vdo{ /*top: 0; left: 0;  width: 100%; height: 100%; object-fit: cover;*/ position: absolute; width: auto; height: auto; top: 50%; left: 50%; min-height: 100%; min-width: 100%; -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);}
.header .top{ background:url(../images/base.png); height:82px; padding:0 30px; }
.header .top .link{ float:right; padding-top:20px; }
.header .top .link a{ margin-left:15px; }
.header .top .link a .boat{ background:url(../images/header_link_boat_icon.png) no-repeat left center; padding-left:65px; height:38px; }
.header .top .link a .scuba{ background:url(../images/header_link_scuba_icon.png) no-repeat left center; padding-left:48px; height:38px; }
.header .top .link a .crew{ background:url(../images/header_link_crew_icon.png) no-repeat left center; padding-left:48px; height:38px; }
.header .top .link a .spot{ background:url(../images/header_link_spot_icon.png) no-repeat left center; padding-left:45px; height:36px; }

/* sp gnav btn 
.header .sp-gnav-btn span{ position:absolute; left:0; width:100%; height:2px; background-color:#ffffff; border-radius:6px; }
.sp-gnav{ position:fixed; top:90px; left:0; width:100%; height:calc(100% - 90px); -webkit-height:calc(100% - 90px); background-color:#f0fbff; overflow:auto; z-index:9999; display:none; }
.sp-gnav .mdropmenu li a{ display:block; width:100%; background:url(../images/list.png) 20px center / 13px 13px no-repeat; color:#333; font-size:16px; text-align:left; border-bottom:solid 1px #d2e0e8; padding:12px 20px 10px 45px; }
.sp-gnav .btn{ margin:20px 10px; text-align:center; }
.sp-gnav .mdropmenu li a:hover{ background:url("../images/list_active.png") 20px center / 13px 13px no-repeat; }
.sp-gnav .rig ul{ margin:5px 5px; width:100%; }
.sp-gnav .rig li{ width:calc(100% / 2 - 10px); width:-webkit-calc(100% / 2 - 10px); float:left; margin:5px; }
.sp-gnav .rig li a{ display:block; width:100%; background:#4a94df; text-align:center; }
.sp-gnav .link li{ background:#003c96; padding:10px 20px; margin:5px; }
*/

/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav ul li{ position:relative; width:calc(100% / 5); text-align:left; }
.gnav ul li .arrow{ position: absolute; bottom: 40px; text-align: center; margin-left: -14px; left: 50%; }
.gnav ul li .arrow.soon{ position: absolute; bottom: 40px; text-align: center; margin-left: -90px; left: 50%; color: #fff; font-size: 20px; }/*coming soon用*/

.gnav ul li img{ margin:60px auto 0; }
.gnav ul li a{ width:100%; display:flex; align-items:center; }
.gnav ul li a:hover,.gnav ul li a img:hover{ opacity:1; }
.gnav ul li:after{ content:""; background: url(../images/arrow_dwn_w.png) center right 20px / 28px 16px no-repeat;}
.gnav ul li.gtop{ background-size: cover; height: 280px; overflow: hidden; border-left: 1px solid #ffffff; border-bottom: 1px solid #ffffff; }
.gnav ul li:first-child.gtop.btsh, .gnav ul li:nth-child(6).gtop.play{ border-left: inherit; }
.gnav .btsh img{ position: absolute; z-index: 999; left: 50%; margin-left: -95px; top: 0px; }
.gnav .btsh .btsh_bg{ background: url(../images/nav_btsh_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .btsh .btsh_det{ text-align: center; z-index: 999; color: #FFF; width: 240px; background: inherit; height: 30px; position: absolute; top: 158px; left: 50%; margin-left: -120px; }
.gnav .btsh .btsh_det ul li{ display: inline-block; width: 100px; margin-top:10px; border: 1px solid #fff; text-align: center; padding-left: inherit; margin-left: 10px; letter-spacing: 0.2em; padding-top: 1px; height: 30px; }
.gnav .btsh .btsh_det ul li:hover { opacity:0.7; }
.gnav .btsh .btsh_det ul li a{ color:#FFF; display:inherit; }
.gnav .scb img{ position: absolute; z-index: 999; left: 50%; margin-left: -115px; margin-top: 120px; }
.gnav .scb .scb_bg{ background: url(../images/nav_scb_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .cnts img{ margin-top: 109px; }
.gnav .cnts .cnts_bg{ background: url(../images/nav_cnts_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .matc img{ position: absolute; z-index: 999; left: 50%; margin-left: -98.5px; margin-top: 120px; }
.gnav .matc .matc_bg{ background: url(../images/nav_matc_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .mem img{ position: absolute; z-index: 999; left: 50%; margin-left: -75px; margin-top: 120px; }
.gnav .mem .mem_bg{ background: url(../images/nav_mem_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .play img{ position: absolute; z-index: 999; left: 50%; margin-left: -68px; margin-top: 120px; }
.gnav .play .play_bg{ background: url(../images/nav_play_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .stdy img{ position: absolute; z-index: 999; left: 50%; margin-left: -68px; margin-top: 120px; }
.gnav .stdy .stdy_bg{ background: url(../images/nav_stdy_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .mar img{ position: absolute; z-index: 999; left: 50%; margin-left: -70px; margin-top: 120px; }
.gnav .mar .mar_bg{ background: url(../images/nav_mar_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .fel img{ position: absolute; z-index: 999; left: 50%; margin-left: -73px; margin-top: 120px; }
.gnav .fel .fel_bg{ background: url(../images/nav_fel_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }
.gnav .my img{ position: absolute; z-index: 999; left: 50%; margin-left: -115px; margin-top: 120px; }
.gnav .my .my_bg{ background: url(../images/nav_my_bg.png) no-repeat top left / 100%; background-size: cover; height: 280px; position: absolute; top: 0; left: 0; width: 100%; z-index: 111; }

.gtop.mem, .gtop.play, .gtop.stdy, .gtop.fel, .gtop.my {
	height:			188px;
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
.gtop.mem .caption, .gtop.play .caption, .gtop.stdy .caption, .gtop.fel .caption, .gtop.my .caption {
	font-size:		130%;
	text-align: 		center;
	color:			#fff;
    position: absolute;
    z-index: 999;
    left: 8%;
    top: 40px;
}

.gtop.mem .caption ul li, .gtop.play .caption ul li, .gtop.stdy .caption ul li, .gtop.fel .caption ul li, .gtop.my .caption ul li {
    position: relative;
    width: 100%;
    text-align: left;

}
.gtop.mem .caption ul li a, .gtop.play .caption ul li a, .gtop.stdy .caption ul li a, .gtop.fel .caption ul li a, .gtop.my .caption ul li a{
    color:#FFF;    font-size: 15px;

}
.gtop.mem .caption ul li a, .gtop.play .caption ul li a:hover, .gtop.stdy .caption ul li a:hover, .gtop.fel .caption ul li a:hover, .gtop.my .caption ul li a:hover  {
    opacity:0.8;

}

.gtop.mem .caption ul li a span, .gtop.play .caption ul li a span, .gtop.stdy .caption ul li a span, .gtop.fel .caption ul li a span, .gtop.my .caption ul li a span { letter-spacing: -2px; }
.gtop.mem .mask, .gtop.play .mask, .gtop.stdy .mask, .gtop.fel .mask, .gtop.my .mask  {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.gtop.mem:hover .mask, .gtop.play:hover .mask, .gtop.stdy:hover .mask, .gtop.fel:hover .mask, .gtop.my:hover .mask{
	opacity:		1;	/* マスクを表示する */
}

/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.bnr-slider{ padding:56px 0; background: initial; }
.bnr-slider .slider { width: initial; }
.bnr-slider .slider .slick-slide{ margin:0 15px; }

/* article **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
/*article{ background:url("../images/cloud.png") repeat-x; }*/
article div.wrap{ margin-bottom:30px; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main .link{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; align-items:flex-end; justify-content:space-between; flex-direction:row-reverse; height:100%; }
.main .link a:hover , a img:hover , input[type=image]:hover{ opacity:1; }
.main .link .link-left{ width:738px; padding:30px 20px; display:flex; display:-webkit-flex; }
.main .link .link-left li:not(:first-child){ margin-left:10px; }
.main .link .link-right{ width:384px; padding:30px 20px; }
.main .link .link-right li:not(:first-child){ margin-top:10px; }


/* info area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info-area{ padding-top:50px;  }
.info-area h3{ text-align:center; margin-bottom:10px; }
.info-area .pr-list-area , .info-area .calendar-area{ float:left; }
.info-area .pr-list-area{ width:640px; margin-right:30px; }
.info-area .pr-list-area .menu ul{ margin-left:10px; }
.info-area .pr-list-area .frame{ height:642px; overflow:auto; margin-bottom:10px; }
.info-area .calendar-area{ width:530px; }
.info-area .calendar-area .title{ color:#4aacdf; text-align:center; font-size:18px; padding:6px 0 3px; margin-bottom:10px; line-height:1; }
.info-area .calendar-area .title span{ font-size:26px; padding:0 5px; }
.info-area .calendar-area table{ width:100%; table-layout:fixed; }
.info-area .calendar-area td{ border:solid 1px #c2cdd4; background:#fff; line-height:1; }
.info-area .calendar-area td:first-child , .info-area .calendar-area td.hli{ color:#e32c2c; } /*赤文字*/
.info-area .calendar-area td:last-child{ color:#2c87e3; } /*青文字*/
.info-area .calendar-area td.nom{ color:#bbb; } /*グレー文字*/
.info-area .calendar-area .week td{ height:29px; text-align:center; font-size:12px; background:#f3f3f3; }
.info-area .calendar-area .week td:first-child{ background:#feeeee; }
.info-area .calendar-area .week td:last-child{ background:#eef5fe; }
.info-area .calendar-area .date td{ font-size:16px; padding:5px 8px 3px; }
.info-area .calendar-area .pgm td{ height:18px; }
.info-area .calendar-area .pgm td a{ text-overflow: ellipsis; white-space:nowrap; overflow:hidden; }
.info-area .calendar-area .pgm a{ display:block; min-height:18px; color:#fff; font-size:11px; text-decoration:none; padding:2px 4px 0; border:solid 1px #fff; border-top:none; }
.info-area .calendar-area .pgm a.event_3{ background:#74b2ff; }
.info-area .calendar-area .pgm a.event_1{ background:#6571e4; }
.info-area .calendar-area .pgm a.event_4{ background:#e85656; }
.info-area .calendar-area .pgm a.event_2{ background:#ffbb17; }
.info-area .calendar-area .pgm a.event_5{ background:#a3d04b; }
.info-area .calendar-area .pgm a img{ vertical-align:middle; margin-left:3px; margin-top:-2px; }
.info-area .calendar-area td.holiday{ color:#e32c2c; } /*赤文字*/
.info-area .calendar-area td.today{ background:#dfedf5; }
.info-area .calendar-area td.today:after{ content:"today"; color:#48708c; font-size: 8pt; padding-left:8px; }
.info-area .calendar-area tr td:not(:first-child){ border-left:none; }
.info-area .calendar-area tr:not(:last-child) td{ border-bottom:none; }
.info-area .calendar-area .pgm td{ border-top:none; }
.info-area .calendar-area .sort{ display:flex; justify-content:space-between; margin-bottom:10px; }
.info-area .calendar-area .sort a{ display:block; width:153px; height:30px; border:solid 2px #4a94df; color:#4a94df; text-decoration:none; text-align:center; padding-top:7px; line-height:1; }
.info-area .calendar-area .sort a:first-child{ background:url("../images/calendar_arrow_l_off.png") 10px 7px / 6px 11px no-repeat; margin-right:5px; }
.info-area .calendar-area .sort a:last-child{ background:url("../images/calendar_arrow_r_off.png") right 10px top 7px / 6px 11px no-repeat; margin-left:5px; }
.info-area .calendar-area .sort a:hover{ color:#fff !important; background-color:#4a94df !important; }
.info-area .calendar-area .sort a:first-child:hover{ background-image:url("../images/calendar_arrow_l_on.png"); }
.info-area .calendar-area .sort a:last-child:hover{ background-image:url("../images/calendar_arrow_r_on.png"); }
.info-area .pr-list-area .news { margin-top:30px; }
.info-area .pr-list-area .news ul li{ position:relative; float:left; width:108px; height:35px; border-bottom: solid 2px #4aacdf; margin-bottom:10px; text-align:center; text-indent:-9999px; }
.info-area .pr-list-area .news ul li:not(:last-child){ margin-right:25px; }
.info-area .pr-list-area .news ul li:hover,.info-area .pr-list-area .news ul li.active{ background:#4aacdf; }
.info-area .pr-list-area .news ul li:hover:after,.info-area .pr-list-area .news ul li.active:after{ position:absolute; bottom:-16px; left:0; right:0; margin:0 auto; content:""; width:0; height:0; border:solid 8px; border-color:#4aacdf transparent transparent; }
.info-area .pr-list-area .news ul li a:hover,.info-area .pr-list-area .news ul li a img:hover{ opacity:1; }
.info-area .pr-list-area .news ul li a{ display:block; height:35px; cursor:pointer; background-size:120px 35px !important; }
.info-area .pr-list-area .news ul li:nth-child(1) a{ background:url(../images/news_menu1_off.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(2) a{ background:url(../images/news_menu2_off.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(3) a{ background:url(../images/news_menu3_off.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(4) a{ background:url(../images/news_menu4_off.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(5) a{ background:url(../images/news_menu5_off.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(1) a:hover,.info-area .pr-list-area .news ul li.active:nth-child(1) a{ background:url(../images/news_menu1_on.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(2) a:hover,.info-area .pr-list-area .news ul li.active:nth-child(2) a{ background:url(../images/news_menu2_on.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(3) a:hover,.info-area .pr-list-area .news ul li.active:nth-child(3) a{ background:url(../images/news_menu3_on.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(4) a:hover,.info-area .pr-list-area .news ul li.active:nth-child(4) a{ background:url(../images/news_menu4_on.png) center no-repeat; }
.info-area .pr-list-area .news ul li:nth-child(5) a:hover,.info-area .pr-list-area .news ul li.active:nth-child(5) a{ background:url(../images/news_menu5_on.png) center no-repeat; }
.info-area .pr-list-area .year select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; }
::-ms-expand{ display:none; }
.info-area .pr-list-area .year select{ width:153px; height:30px; border:solid 2px #4a94df; color:#4a94df; padding:2px 10px 0; margin:14px 0 5px; background:url("../images/select_arrow_off.png") right 10px center /11px 6px no-repeat; }
.info-area .pr-list-area .month ul{ margin:5px 0 10px; margin-right:-3px; line-height:1; }
.info-area .pr-list-area .month ul li{ float:left; width:calc(100% / 12 - 3px); width:-webkit-calc(100% / 12 - 3px); height:22px; margin-right:3px; text-align:center; text-indent:-9999px; cursor:pointer; }
.info-area .pr-list-area .month ul li:nth-child(12){ margin-right:0; }
.info-area .pr-list-area .icon ul{ margin-top:20px; }
.info-area .pr-list-area .icon ul li{ line-height:22px; float:left; margin-right:20px; }
.info-area .pr-list-area .icon ul li:nth-child(1){ color:#74b2ff; }
.info-area .pr-list-area .icon ul li:nth-child(2){ color:#6571e4; }
.info-area .pr-list-area .icon ul li:nth-child(3){ color:#e95e5e; }
.info-area .pr-list-area .icon ul li:nth-child(4){ color:#ffbb17; }
.info-area .pr-list-area .icon ul li:nth-child(5){ color:#a3d04b; }
.info-area .pr-list-area .month li{ background:#f4f4f4 center / 50px 22px no-repeat; }
.info-area .pr-list-area .month li:nth-child(1){ background-image:url("../images/tag_month_1_off.png");  }
.info-area .pr-list-area .month li:nth-child(2){ background-image:url("../images/tag_month_2_off.png");  }
.info-area .pr-list-area .month li:nth-child(3){ background-image:url("../images/tag_month_3_off.png");  }
.info-area .pr-list-area .month li:nth-child(4){ background-image:url("../images/tag_month_4_off.png");  }
.info-area .pr-list-area .month li:nth-child(5){ background-image:url("../images/tag_month_5_off.png");  }
.info-area .pr-list-area .month li:nth-child(6){ background-image:url("../images/tag_month_6_off.png");  }
.info-area .pr-list-area .month li:nth-child(7){ background-image:url("../images/tag_month_7_off.png");  }
.info-area .pr-list-area .month li:nth-child(8){ background-image:url("../images/tag_month_8_off.png");  }
.info-area .pr-list-area .month li:nth-child(9){ background-image:url("../images/tag_month_9_off.png");  }
.info-area .pr-list-area .month li:nth-child(10){ background-image:url("../images/tag_month_10_off.png");  }
.info-area .pr-list-area .month li:nth-child(11){ background-image:url("../images/tag_month_11_off.png");  }
.info-area .pr-list-area .month li:nth-child(12){ background-image:url("../images/tag_month_12_off.png");  }
.info-area .pr-list-area .month li:nth-child(1).active{ background-color:#f3da68; background-image:url("../images/tag_month_1_on.png"); }
.info-area .pr-list-area .month li:nth-child(2).active{ background-color:#f3da68; background-image:url("../images/tag_month_2_on.png"); }
.info-area .pr-list-area .month li:nth-child(3).active{ background-color:#f3bb33; background-image:url("../images/tag_month_3_on.png"); }
.info-area .pr-list-area .month li:nth-child(4).active{ background-color:#f3bb33; background-image:url("../images/tag_month_4_on.png"); }
.info-area .pr-list-area .month li:nth-child(5).active{ background-color:#f2a537; background-image:url("../images/tag_month_5_on.png"); }
.info-area .pr-list-area .month li:nth-child(6).active{ background-color:#f2a537; background-image:url("../images/tag_month_6_on.png"); }
.info-area .pr-list-area .month li:nth-child(7).active{ background-color:#e38600; background-image:url("../images/tag_month_7_on.png"); }
.info-area .pr-list-area .month li:nth-child(8).active{ background-color:#e38600; background-image:url("../images/tag_month_8_on.png"); }
.info-area .pr-list-area .month li:nth-child(9).active{ background-color:#d56900; background-image:url("../images/tag_month_9_on.png"); }
.info-area .pr-list-area .month li:nth-child(10).active{ background-color:#d56900; background-image:url("../images/tag_month_10_on.png"); }
.info-area .pr-list-area .month li:nth-child(11).active{ background-color:#b64800; background-image:url("../images/tag_month_11_on.png"); }
.info-area .pr-list-area .month li:nth-child(12).active{ background-color:#b64800; background-image:url("../images/tag_month_12_on.png"); }
.info-area .pr-list-area dt{ color:#666; padding-top:23px; }
.info-area .pr-list-area dd{ list-style-image:url("../images/list.png"); border-bottom:solid 1px #e6ebeb; padding-bottom:23px; /*width:700px;*/ }
.info-area .pr-list-area dl dt{ width:calc(100% - 90px - 15px); width:-webkit-calc(100% - 90px - 15px); }
.info-area .pr-list-area dt span{ color:#666; margin-right:10px; }
.info-area .pr-list-area dt img{ vertical-align:middle; margin-right:10px; }
.info-area .pr-list-area dd{ font-size:16px; list-style-image:url("../images/list.png"); }
.info-area .pr-list-area dd br{ display:none; }
.info-area .pr-list-area .btn a{ display:block; height:35px; border:solid 2px #4a94df; text-indent:-9999px; margin-top:20px; background:url(../images/news_btn_off.png) center no-repeat; }
.info-area .pr-list-area .btn a:hover{ background:#4a94df url(../images/news_btn_on.png) center no-repeat; }


/* pickup **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pickup{ background: #f2f6fa; margin-top:30px; margin: 150px 0 0; }
.pickup h3 img{ margin-top: -90px; margin-bottom: 40px; }
.pickup .bdr { border-left: 1px solid #d0d8df; }
.pickup ul{ display:flex; display:-webkit-flex; flex-wrap:wrap; -webkit-flex-wrap:wrap; }
.pickup li{ width:33.3%; position:relative; padding-bottom:45px; }
.pickup li:nth-child(3) .bdr, .pickup li:nth-child(6) .bdr{ border-right: 1px solid #d0d8df; }
.pickup li > a{ display:block; width:100%; height:320px; border-left: solid 0.5px #fff; }
.pickup li .tit{ font-size:16px; margin:15px 20px 5px; padding-left:15px; background:url("../images/list_sq.png") no-repeat left 2px; line-height:1.6;  }
.pickup li .tit a{ color:#333; text-decoration:none; }
.pickup li .txt{ font-size:14px; margin:0 20px 10px; }
.pickup li .txt_h{ height: 10em; }
.pickup li.channel a{position: relative;}
.pickup li.channel a img{position:absolute; bottom:15px; left:15px;}

.pickup li .btn{ margin:0 20px; width:calc(100% - 40px); width:-webkit-calc(100% - 40px); bottom:10px; position: initial; }
.pickup li .btn.num a{ width:38%; float:right; }
.pickup li .btn.num a:not(:first-child){ margin-left:8px; }

.pickup li .btn a.first{ background-image:url("../images/pickup_first_btn_off.png"); width: 40%; }
.pickup li .btn a.shop{ background-image:url("../images/pickup_shop_btn_off.png"); width: 24%; }
.pickup li .btn a.tour{ background-image:url("../images/pickup_tour_btn_off.png"); }


/* sns **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.instagram-area , .fb-area{ float:left; background:#fff; border:solid 1px #c2cdd4; border-radius:0px; text-align:center; }
.instagram-area{ width:640px; padding:20px 15px 30px 20px; margin-right:30px; }
.instagram-area iframe{ height:350px; }
.fb-area{ width:530px; padding:20px 20px 20px; }


/* responsive  **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:block; }
.sp-item{ display:none; }


/* 一覧へ戻る */
.back-btn{ display:block; width:130px; height:35px; border:solid 2px #bbb; text-indent:-9999px; background:url(../images/back_btn_off.png) center / 90px 16px no-repeat; }
.back-btn:hover{ background:#bbb url(../images/back_btn_on.png) center / 90px 16px no-repeat; }

.footer{ margin-top: initial; }

/* ★★★ タブレット ★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 768px){
/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header .pattern{ background: none; z-index:0; }
.header .main{ height:100%; background-size:1123px 400px; background-position:calc(50% + 150px) center; }
.header .site { display:none; }
.header{ padding:0; }
.header .top{ height:auto; padding:0 10px 14px; position:fixed; width:100%; z-index:100; }
.header .logo{ float:none; padding:5px 0 10px; }
.header .logo a{ width:180px; height:28px; background-size:180px 28px; }
.header .top .link{ display:none; }
.header .login{ display:none; }

.header .sp-item .main-visual{ background-image: url(./img/main-visual.jpg); background-size: auto; height: inherit; position: inherit; overflow: hidden; padding-top:57px; }
.header .sp-item .vdo{ position: inherit; width:100%; height: inherit; top: inherit; left: inherit; min-height: inherit; min-width: inherit; -ms-transform: none; -moz-transform: none; -webkit-transform: none; transform: none;}


/* article **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
article { padding-top:0; }


/* gnav **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.gnav{ display:none; }
.gnav .menu{ padding-top:24px; background: none; }


/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.bnr-slider{ padding:20px 30px; }
.bnr-slider .slider{ width:100%; }

.bnr-slider .slider .slide-arrow{ width:15px; height:auto; }
.bnr-slider .slider .prev-arrow{ top:calc(50% - 20px); left:-20px; }
.bnr-slider .slider .next-arrow{ top:calc(50% - 20px); right:-20px; }


/* slider_banner_top **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.slider_banner_top{ padding:0 30px; }
.slider_banner_top ul{ width:100%; padding-top:60px; }

.slider_banner_top ul .slide-arrow{ width:15px; height:auto; }
.slider_banner_top ul .prev-arrow{ top:calc(50% + 15px); left:-20px; }
.slider_banner_top ul .next-arrow{ top:calc(50% + 15px); right:-20px; }


/* info area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info-area .pr-list-area .news ul li{ width:calc(100% / 2 - 13px); width:-webkit-calc(100% / 2 - 13px); }
.info-area .pr-list-area .news ul li:nth-child(even){ margin-right:0px; }

.info-area .pr-list-area .month ul li{ float:left; width:calc(100% / 6 - 3px); width:-webkit-calc(100% / 6 - 3px); height:30px; margin:0 3px 3px 0; }
.info-area .pr-list-area .month ul li:nth-child(6n){ margin-right:0; }

.info-area .pr-list-area{ float:none; width:100%; margin-right:0; }
	
.info-area .pr-list-area dl dt{padding-top:10px; }
.info-area .pr-list-area dl dd{padding-bottom:10px; }

.info-area .pr-list-area dt span{ display:block; margin-right:0; }
.info-area .pr-list-area dt img{ vertical-align:middle; margin-right:10px; }


/* pickup **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pickup{ margin-top:20px; padding-bottom: 20px; }
.pickup .bdr { border-left: inherit; }
.pickup li:nth-child(3) .bdr, .pickup li:nth-child(6) .bdr { border-right: inherit; }
.pickup h3 img { margin-top: 40px; }
.pickup ul{ display:block; }
.pickup li{ width:100%; position:inherit; padding-bottom:0; }
.pickup li > a{ height:260px; }
.pickup li .btn{ margin-bottom:20px !important; position:inherit; }
.pickup li .btn.num a{ width:100%; float:none; }
.pickup li .btn.num a:not(:first-child){ margin-left:0; margin-top:10px; }
.pickup li .txt_h { height: inherit; }
.pickup li .btn.num a{ display: block; width: 100%; height: 35px; border: solid 2px #4a94df; text-indent: -9999px; background: url(../images/pickup_reading_btn_off.png) center no-repeat; padding: 0 25px; }
.pickup li .btn a.shop { background:url(../images/pickup_shop_btn_off.png) center no-repeat; border: solid 2px #001534; }
.pickup li .btn a.first { background:url(../images/pickup_first_btn_off.png) center no-repeat; }

/* article **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
article div.wrap{ margin-bottom:40px; }


/* info area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info-area{ padding-top:40px; }
.info-area .pr-list-area .frame{ /*height:auto;*/ margin-bottom:20px; }
.info-area .pr-list-area , .info-area .calendar-area{ float:none; width:100%; margin-right:0; }
.info-area .calendar-area{ margin-top:40px; }
.info-area .calendar-area td.today:after{ display:none; }


/* sns **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.instagram-area , .fb-area{ float:none; }
.instagram-area{ width:100%; padding:10px 10px 30px 10px; margin-right:0; }
.instagram-area iframe{ width:100% !important;  }
.fb-area{ width:100%; padding:20px 10px 10px; margin-top:20px; }
.fb-area .btn{ margin-bottom:10px; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main .link .link-left{ max-width:250px; width:calc(50% - 8px); margin-right:8px; padding:10px 0; display:block; }
.main .link .link-left li:not(:first-child){ margin-left:0; margin-top:10px; }
.main .link .link-right{ max-width:250px; width:calc(50% - 8px); margin-left:8px; padding:10px 0; }
.main .link .link-right li:not(:first-child){ margin-top:10px; }
	

/* responsive  **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.pc-item{ display:none; }
.sp-item{ display:block; }


/* footer **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.footer .logo img{ width:260px; height:auto; }

}


/* ★★★ スマホ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
@media only screen and (max-width: 414px){ /* iPhone6Plus */
/* header **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.header .main{ height:100%; background-size: 1273px 510px; background-position:calc(50% + 180px) center; }


/* link **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.main .link .link-left{ max-width:230px; width:100%; margin-right:0; padding:0 0 10px; }
.main .link .link-left li:not(:first-child){ margin-top:5px; }

.main .link .link-right{ max-width:230px; width:100%; margin-left:0; padding:10px 0 5px; }
.main .link .link-right li:not(:first-child){ margin-top:5px; }


/* info area **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.info-area .pr-list-area .month ul li{ width:calc(100% / 4 - 3px); width:-webkit-calc(100% / 4 - 3px); }
.info-area .pr-list-area .month ul li:nth-child(6n){ margin-right:3px; }
.info-area .pr-list-area .month ul li:nth-child(4n){ margin-right:0; }


/* slider **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.bnr-slider{ padding:20px 0px; }


/* slider_banner_top **********
///////////////////////////////////////////////////////////////////////////////////////////////*/
.slider_banner_top{ padding:0 40px; }

}