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

/*===============================================

SUVで遊ぶ　TOPページ

===============================================*/

/*●PC　画面の横幅が769px以上*/

img{
	max-width: 100%;
}

#PLAY .box_01 h3.Title { padding-bottom:15px; margin:70px auto 35px; font-size:180%; border-bottom:none; text-align: center; line-height: 1.6em;}
#PLAY .box_01 .list_2 {}
#PLAY .box_01 .list_2 li{ float: left; margin-right:0; width:50%;}
#PLAY .box_01 .list_2 li .waku{background:#ffff00;text-align: center;padding: 50px;}
#PLAY .box_01 .list_2 li .waku h3{width:100%; margin: 0 auto;}
#PLAY .box_01 .list_2 li .waku span{ font-weight: bold; padding-top: 10px; font-size: 110%; display: block; width: 100%;}
#PLAY .box_01 .list_2 li .waku p.line{ border-top:2px solid #000; margin:10px auto; padding-top:10px; width:100%; height:70px; font-size:120%; line-height: 1.5em;}
#PLAY .box_01 .list_2 li .waku .btn_01 a{color:#000;background: #FFF url(../sl_images/common/arrow_01.png) no-repeat right;} 
#PLAY .box_01 .list_2 li .waku .btn_01 a:hover{color:#46B052;background: #FFF url(../sl_images/common/arrow_01.png) no-repeat right;} 
#PLAY h3.Title_02 { padding-bottom:0px; margin:70px auto 10px;border-bottom:none; text-align: center; width: 100%; max-width: 413px;}
#PLAY .box_02 {margin:100px auto;}
#PLAY .box_02.ex {margin:0px auto;}
#PLAY .box_02 .list_2 li h4{ font-size:200%; font-weight: bold; margin-bottom: 30px;}
#PLAY .box_02 .list_2 li .btn_01{margin-top:56px;}
.frame img {display: inline-block;border:8px solid #fff;box-shadow: 0 0 4px #999;transform: rotate(-5deg); margin-bottom: 20px;}
.move-logo{
	width: 492px;
	margin-top: 65px;
	margin-bottom: 50px;
}
.move-logo.pt2{
	width: 492px;
	margin-top: 0px;
	margin-bottom: 50px;
}
.move-logo.pt3{
	width: 350px;
	margin-top: 65px;
	margin-bottom: 50px;
}
.move-logo .title{
	font-size:18px;
	padding-bottom: 15px;
	margin-left: -10px;
}
.move-logo .address{
	font-size:15px;
	padding-top: 14px;
}
.move-logo img{
	width: 100%;
}
.move-logo.pt2 img{
	width: 100%;
	max-width: 415px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.concierge-logo{
	width: 450px;
	margin-top: 10px;
	margin-bottom: 50px;
}
.concierge-logo .title{
	font-size:18px;
	padding-bottom: 15px;
	margin-left: -10px;
}
.concierge-logo .address{
	font-size:15px;
	padding-top: 14px;
}
.concierge-logo img{
	width: 100%;
}
.position{
	position: relative;
}
.new{
	width: 16%;
	position: absolute;
	top:5%;
	right: 3%;
}
.new img{
	max-width: 100%;
}
.slick-dotted.slick-slider {
    margin-bottom: 50px!important;
}
.slick-dots{
	bottom: -40px!important;
}
.bnr-img{
	width: 153px;
	margin-right: 27px;
	float: left;
}
#CONCIERGE .slick-dots{
	bottom: -70px!important;
}
.slick-slider{
	background:#dcdcdc;
}
.slick-list{
	border-top:1px solid #aaa;
	border-bottom:1px solid #aaa;
}
.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
   
	float: none;
    width: 10px!important;
    height: 20px!important;
}
.slick-dots li:nth-child(3){
	margin-right: 5px!important;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 10px!important;
    height: 10px!important;
    padding: 0px!important;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 10px!important;
    line-height: 24px;

}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: #009e96!important;
}
video{
	width: 100%;
}
#MOVE .box_01.video-box {
    margin: 0px auto 0px;
}
.txt-img.pl{
	max-width: 362px;
}
.red{
	color:#d00303;
}
.red.bold{
	font-weight: bold;
}
.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  margin-bottom: 0px;
}

.youtube iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#PLAY .box_01 h3.Title {margin:30px auto 20px; font-size:140%;line-height: 1.6em; text-align: left;}
#PLAY .box_01 .list_2 li{ float:none;width:100%;}
#PLAY .box_01 .list_2 li .waku{ padding:5% 10%;}
#PLAY .box_01 .list_2 li .waku h3{width:100%;}
#PLAY .box_01 .list_2 li .waku span{padding:5px;}
#PLAY .box_01 .list_2 li .waku p.line{margin:0px auto 10px; padding-top:10px; width: 100%;  font-size: 100%;}
#PLAY .box_02 .list_2 li h4{ font-size:180%;margin: 30px 0;}
#PLAY .box_02 .list_2 li .btn_01{margin-top:20px;}
.frame{text-align:center;}
.frame img {width: 90%!important;}
}

/*===============================================

スノーピーク特集

===============================================*/

/*●PC　画面の横幅が769px以上*/
#SNOWPEAK .box_01 {background: url(../sl_images/snowpeak/main.jpg) no-repeat bottom;background-size: cover; padding:150px 0;}
#SNOWPEAK h2.PageName{margin-bottom: 0;}
#SNOWPEAK .list_head { margin:60px auto; text-align:center;}
#SNOWPEAK .list_head h3 { font-size:200%;}
#SNOWPEAK .list_head ul { margin: 40px auto;}
#SNOWPEAK .list_head p {font-size:160%;}
#SNOWPEAK .list_head li{ width: 148px; float: left; margin-right: 30px; background: #fff; color: #000; border:1px solid #000; padding: 30px 0; font-size: 120%;}
#SNOWPEAK .list_head li:last-child {margin-right: 0;}
#SNOWPEAK .box_01 h3.Title { margin:0 auto; font-size:280%; border-bottom:none; text-align: center; line-height: 1.6em; color: #FFF;}
#SNOWPEAK .box_01 .txt_01 { margin:10px auto 40px;color: #FFF; text-align: center; font-size:110%; line-height: 1.7em; }
#SNOWPEAK .box_02 { border-top: 1px solid #CCC; padding-top: 40px; margin: 60px auto 30px; clear: both;}
#SNOWPEAK .box_02 .list_2 li h3 { font-size:220%; margin-bottom:5px;}
#SNOWPEAK .box_02 .list_2 li span { font-size:90%; margin-bottom:20px; display: block;}
#SNOWPEAK .box_02 .list_2 li p { font-size:110%; line-height: 1.7em;}
#SNOWPEAK .box_02 .list_2,
#SNOWPEAK .box_02 .list_3,
#SNOWPEAK .box_02 .list_4 { margin: 20px auto;}
#SNOWPEAK .box_02 .list_2 li .pic,
#SNOWPEAK .box_02 .list_3 li .pic,
#SNOWPEAK .box_02 .list_4 li .pic{border: 1px solid #CCC; width: 100%; margin-bottom: 15px; position: relative;}
#SNOWPEAK .box_02 .list_2 li .pic span,
#SNOWPEAK .box_02 .list_3 li .pic span,
#SNOWPEAK .box_02 .list_4 li .pic span{position: absolute; top: 0; left: 0; background: #366C32; color: #FFF; width:8px; height:8px; font-weight: bold; padding:3px 10px 18px; font-size:14px; vertical-align: sub; display: block;}
#SNOWPEAK .box_02 .list_2 li h4,
#SNOWPEAK .box_02 .list_3 li h4,
#SNOWPEAK .box_02 .list_4 li h4 { font-size:110%; margin-bottom:10px; font-weight: bold;}
#SNOWPEAK .box_02 .list_2 li .pcs,
#SNOWPEAK .box_02 .list_3 li .pcs,
#SNOWPEAK .box_02 .list_4 li .pcs { position: absolute;bottom:5px; right:10px; width:42px; height:42px;}
#SNOWPEAK .box_02 .txt_01 {float: right; margin:20px 0 15px; border-bottom: 1px solid #CCC; padding-bottom:10px; font-size:150%;}
#SNOWPEAK .box_02 .txt_01 span {font-size:150%; padding:0 5px;}
#SNOWPEAK .box_02 .txt_02 { text-align: right;font-size:140%; margin-bottom: 30px; clear: both;}
#SNOWPEAK .cap_box { background: #f1f1f1; padding:20px; font-size:80%; line-height: 1.7em;}

/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#SNOWPEAK .box_01 {background: url(../sl_images/snowpeak/main.jpg) no-repeat bottom;background-size: cover; padding:50px 0;}
#SNOWPEAK .box_01 h3.Title { font-size:180%;}
#SNOWPEAK .box_01 .txt_01 { margin:10px auto 20px;font-size:100%;}
#SNOWPEAK .box_01 .txt_01 br{display: none;}
#SNOWPEAK .box_02 br{display: none;}
#SNOWPEAK .box_02 { padding-top:30px; margin:30px auto;}
#SNOWPEAK .box_02 .list_2 li h3 { font-size:180%;  line-height: 1.6em;}
#SNOWPEAK .box_02 .list_2 li p { font-size:100%; line-height: 1.6em;}
#SNOWPEAK .box_01 {text-align: center;}
#SNOWPEAK .box_01 h3 {margin:30px auto 20px; font-size:140%;line-height: 1.6em;  border: none;}
#SNOWPEAK .list_head h3 { font-size:130%;}
#SNOWPEAK .list_head ul { margin:20px auto; text-align: center;}
#SNOWPEAK .list_head p {font-size:130%;}
#SNOWPEAK .list_head li{ width:37%;margin:0 4% 4% 0;font-size: 120%; padding:5%; height:40px;}
#SNOWPEAK .list_head li:nth-child(2n){margin-right: 0;}
#SNOWPEAK .box_01 .list_2 li{ float:none;width:100%;}
#SNOWPEAK .box_01 .list_2 li .waku{ padding:5% 10%;}
#SNOWPEAK .box_02 .list_2 li h4,
#SNOWPEAK .box_02 .list_3 li h4,
#SNOWPEAK .box_02 .list_4 li h4 { font-size:90%;}
#SNOWPEAK .pc_hidden {height: 0;}
	
	
#SNOWPEAK .list_3 li{ float: left; margin-right:4%;width:48%;}
#SNOWPEAK .list_3 li:nth-child(2n) { margin-right: 0;}
	
#SNOWPEAK .box_02 .txt_01 {float:none; margin:10px auto;font-size:100%;}
#SNOWPEAK .box_02 .txt_01 span {font-size:120%; padding:0 5px;}
#SNOWPEAK .box_02 .txt_02 {float:none; font-size:100%; display: block;}
#SNOWPEAK .caption_right { display: block; text-align: left;}
}

/*===============================================

アソビコンシェルジュ

===============================================*/

/*●PC　画面の横幅が769px以上*/
#CONCIERGE #footer { margin-top: 0;}
#CONCIERGE h2 { margin:70px auto 10px; text-align: center;}
#CONCIERGE .box_01 { margin: 0px auto 30px;}
#CONCIERGE .box_01 img {width: 100%;}
#CONCIERGE .txt_01 { margin:0 auto 50px; text-align: center; font-size: 150%; font-weight: bold;}
#CONCIERGE .txt_02 { margin:0 auto 0; text-align: left; font-size:120%; line-height: 1.7em; font-weight: bold;}
#CONCIERGE .txt_03 { margin:0 auto; padding:80px 0 30px; text-align: center; font-size:220%; }
#CONCIERGE .txt_04 { margin:10px auto 0; text-align: left; font-size:120%; line-height: 1.5em;}
#CONCIERGE h3 { margin:50px auto 0; text-align: center; width:1000px; background: url(../sl_images/play/concierge/vol_01/waku_01.png) no-repeat; height: 106px; font-size:220%; text-align: center;padding-top:40px; font-weight: bold;}
#CONCIERGE .list_2 { margin: 30px auto; line-height: 1.8em;}
#CONCIERGE .box_02 { margin: 0px auto 120px;}
#CONCIERGE .list_3 { margin: 10px auto 0;}
#CONCIERGE .list_3 li { margin-bottom:30px;}
#CONCIERGE .list_3 li p { margin-bottom:15px; font-size: 110%;}
#CONCIERGE .list_1 li p { margin-bottom:15px; font-size: 110%;}
#CONCIERGE .list_3 li .pic{text-align: center; position: relative;}
#CONCIERGE .list_3 li .pic img{
	width: 100%;
}
#CONCIERGE .list_3 li .pic.slide{
	width: 100%;
}
#CONCIERGE .list_3 .pic.slide p {
	margin-bottom: 0!important;

}
#CONCIERGE .list_3 .pic p{
	z-index: 2;
}
#CONCIERGE .list_3 .pic p img{
    width: 82%!important;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	z-index: 3;
}
#CONCIERGE .list_3 .pic .caption{
	position: absolute;
	width: 100%;
	text-align: right;
	bottom:-8%!important;
	font-size: 80%!important;
}
#CONCIERGE .list_1 li .grbg.pic{
	background:#707070;
	text-align: center;
}
#CONCIERGE .list_3 li:nth-child(3n) { margin-right: 0;}
#CONCIERGE .list_2 h4,#CONCIERGE .list_3 h4 { margin: 10px auto; font-size:180%; font-weight: bold; color:#40932F}
#CONCIERGE .list_2 .title,#CONCIERGE .list_3 .title { margin:20px auto 0; font-size: 120%;}
#CONCIERGE .space { padding: 0 40px;}
#CONCIERGE .bg_01{
	padding-bottom: 30px;
}
/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#CONCIERGE h2 { margin:30px auto 10px;}
#CONCIERGE h2 img { width: 100%;}
#CONCIERGE h3 { margin:45px auto 30px; width:100%; background:none; height:auto; font-size:160%;padding-top:0; text-align: left;}
#CONCIERGE h3.small{
	font-size:170%!important
}
#CONCIERGE .FLeft,
#CONCIERGE .FRight{ float: none; margin: 0 auto;}
#CONCIERGE .box_02 { margin: 0px auto 60px;}
#CONCIERGE .txt_03 {padding:30px 0; font-size:150%;}
#CONCIERGE .space { padding: 0;}
#CONCIERGE .bg_01 .list_2 li{
	margin-bottom: 8%;
}
#CONCIERGE .bg_01{
	padding-bottom: 3%;
}
#CONCIERGE .list_1 li img{
	width: 100%;
}
#CONCIERGE .list_3 li {

    margin-bottom: 70px;

}
#CONCIERGE .list_3 .pic .caption {

    position: absolute;
    width: 100%;
    text-align: right;
    bottom: -9.5% !important;

}
#CONCIERGE .slick-dots {

    bottom: -20% !important;

}
}

/*===============================================

アソビMOVE

===============================================*/

/*●PC　画面の横幅が769px以上*/
#MOVE #footer { margin-top: 0;}
#MOVE h2 { margin:70px auto 10px; text-align: center;}
#MOVE .box_01 { margin: 0px auto 50px;}
#MOVE .box_01 img {width: 100%;}
#MOVE .txt_top { margin:0 auto 10px; font-size:140%; font-weight: bold; line-height: 1.5em;}
#MOVE .txt_top span{
	font-size:70%;
	font-weight: bold;
}
#MOVE .txt_01 { margin:0 auto 50px; text-align: center; font-size: 150%; font-weight: bold;}
#MOVE .txt_02 { margin:0 auto 0; text-align: left; font-size:115%; line-height: 1.7em; font-weight: bold;}
#MOVE .txt_02.ex{
	padding-left: 117px;
}
#MOVE .txt_04 { margin:10px auto 0; text-align: left; font-size:120%; line-height: 1.5em;}
#MOVE h3 {font-size:160%;font-weight: bold; padding-bottom: 30px; line-height: 1.5em;}
#MOVE h3.ex {padding-bottom: 1%; margin-top: 10%;}
#MOVE h3.line{
  border: solid 3px #707070;
  background-color: #ffffff;
	padding-top: 15px;
	text-align: center;
	padding-bottom: 17px;
	line-height: 1;
	font-size: 200%;
}
#MOVE .list_2 { margin: 30px auto; line-height: 1.8em;}
#MOVE .box_02 { margin:100px auto;}
#MOVE .box_02.ex { margin:0px auto;}
#MOVE .box_02.ex2 { margin:50px auto;}
#MOVE .box_03 { margin:50px auto; padding:40px 0; background: #f9f9f9;}
#MOVE .box_04 { margin:30px auto 0; padding: 20px 0; background: #f9f9f9;}
#MOVE .space { padding: 0 40px;}
#MOVE .list_1 { margin: 10px auto 0;}
#MOVE .list_1 li { margin-bottom:60px;}
#MOVE .list_1 li:nth-child(3n) { margin-right: 0;}
#MOVE .list_1 .title { margin:20px 0 0; font-size: 120%;}
#MOVE .list_1 .pic{
	margin-bottom: 1%;
}
#MOVE .list_3 { margin: 10px auto 0;}
#MOVE .list_3 > li {min-height:430px;/* overflow: hidden;*/}
#MOVE .list_3.ex > li {
	min-height: inherit;
	margin-bottom: 30px;
}
#MOVE .list_3 li .pic{text-align: center; position: relative;}
#MOVE .list_3 li .pic.slide{
	width: 100%;
}
#MOVE .list_3 .pic p{
	z-index: 2;
}
#MOVE .list_3 .pic p img{
    width: 82%!important;
	margin-left: auto;
	margin-right: auto;
	z-index: 3;
}
#MOVE .list_3 .pic .caption{
	position: absolute;
	width: 100%;
	text-align: right;
	bottom:-8%!important;
}
#MOVE .list_3 li:nth-child(3n) { margin-right: 0;}
#MOVE .list_3 h4,#MOVE .box_04 .list_2 h4 { margin: 10px auto; font-size:180%; font-weight: bold; color:#40932F}
#MOVE .list_3 .title { margin:15px auto 0; font-size: 120%;}
#MOVE .list_2 .title { margin:15px auto 0; font-size: 110%;}
#MOVE .list_2 .title.mt0 { margin:0px auto 0; font-size: 110%;}
#MOVE .list_2 .title.link { margin:12px auto 0; font-size: 110%;}
#MOVE .txt_03 { margin:0 auto; padding:80px 0 30px; text-align: center; font-size:220%; }
#MOVE .talk li { clear: both; margin-bottom:20px;}
#MOVE .talk li h4 { float: left; width:17%; font-size:110%; font-weight: bold; padding-top: 5px;}
#MOVE .talk li p { float:right; width:83%;font-size:110%;}
#MOVE .talk li.ex{
	font-size:120%;
}

#MOVE .move-logo .pic{
	width: 35%;
	margin-right: 5%;
	float: left;
}
#MOVE .move-logo .text{
	width: 60%;
	float: left;
}

.list_2 li .link a,.tex-link a{
	color: #0081c6;
}
.txt-wrap.exr{
	padding-top: 150px;
}
#MOVE .list_1 .title-2 {  font-size: 110%; }
#MOVE .caption.tex-link{
	text-align: center;
}
/*●sp・タブレット　画面の横幅が768pxまで*/
@media screen and (max-width:768px){
#MOVE h2 { margin:30px auto 10px;}
#MOVE h2 img { width: 100%;}
#MOVE .txt_top {font-size:120%; }
#MOVE h3 { margin:0px auto 30px; width:100%; background:none; height:auto; font-size:120%;padding-bottom:0; text-align: left;}
#MOVE h3.line {
    border: solid 3px #707070;
    background-color: #ffffff;
    padding-top: 15px;
    text-align: center;
    padding-bottom: 17px;
    line-height: 1.5;
	font-size:4.5vw;
	margin-bottom: 5%;
	padding:3% 3%;
	box-sizing: border-box;
}
	#MOVE h3.line.plus{
		margin-bottom: 3%;
	}
#MOVE .FLeft,
#MOVE .FRight{ float: none; margin: 0 auto;}
#MOVE .list_3 { padding-bottom:30px;}
#MOVE .list_3.ex { padding-bottom:0px;}
#MOVE .list_3 li { margin-bottom:30px;}
#MOVE .list_3 .pic p img{
    width: 82%!important;
	margin-left: auto;
	margin-right: auto;
}
#MOVE .list_3 li {

    margin-bottom: 70px;

}
#MOVE .box_02 .list_2.ex li{
	margin-bottom: 12%;
}
#MOVE .list_3.ex > li {
    min-height: inherit;
    margin-bottom: 70px;
}
#MOVE .list_3 .pic .text{
	position: absolute;
	width: 100%;
	text-align: right;
	bottom:5%;
}
#MOVE .list_1 { padding-bottom:30px;}
#MOVE .list_1 li { margin-bottom:30px; width: 110%; margin-left: -5%; margin-right: -5%;}
#MOVE .list_1 li img{ 
	max-width: 100%;
}
#MOVE .list_1 .title-2 { margin:15px auto 0; font-size: 110%; width: 90%;}
#MOVE .list_1 li { margin-bottom:30px; width: 110%; margin-left: -5%; margin-right: -5%;}

#MOVE .list_1 .title { margin:20px 5% 0;}
#MOVE .list_2 .title.mt0{ margin:20px 0% 0;}
#MOVE .box_02,#MOVE .box_02.ex2 { margin: 0px auto 30px;}
#MOVE .box_03,	
#MOVE .box_04 { margin:30px auto 0; padding: 20px 0; background: #f9f9f9;}
#MOVE .talk li h4 { float: left; width:23%; font-size:110%; font-weight: bold; padding-top: 5px;}
#MOVE .talk li p { float:right; width:77%;font-size:110%;}
#MOVE .list_3 li .pic.slide,#MOVE .list_3 li .pic.slide img{
	width: 100%;
}
#MOVE .txt_02.ex{
	padding-left: 0;
}
	#MOVE .ex-list{
		padding-top: 0;
	}
.move-logo .text .address {
    font-size: 13px;
}
.move-logo,.move-logo.pt2,.move-logo.pt3{
	width: 100%;
	margin-top: 0%;
	margin-bottom: 5%;
}
.move-logo img{
	width: 100%;
}
.move-logo.pt2 img{
	width: 100%;
	max-width: none;
	padding-top: 2%;
	padding-bottom: 2%;
}
.concierge-logo{
	width: 100%;
	margin-top: 0%;
	margin-bottom: 5%;
}
.concierge-logo img{
	width: 100%;
}
.slick-dotted.slick-slider {
    margin-bottom: 20% !important;
}
.slick-dots{
	bottom: -20%!important;
}
#MOVE .list_1 .pic{
	margin-bottom: 2%;
}
#MOVE .list_3 .pic .caption{
	position: absolute;
	width: 100%;
	text-align: right;
	bottom:-9.5%!important;
}
.bnr-img{
	width:70%;
	margin-right: 0;
	margin-bottom: 3%;
	float: none;
}
.slick-dots li {
    margin-bottom: 5px!important;
}
.txt-img{
	margin-top: 20px;
}
	#MOVE .name-box{
		margin-top: 0;
	}
	
	.txt-box{
		margin-bottom: 10%!important;
		float:none;
	}
	.txt-wrap{
		padding-left: 0;
	}
	.pic-box{
		padding-right: 0;
	}
	#MOVE .main-pic p{
		padding-left: 0;
	}
	.txt-wrap.exr{
		padding-top: 5%;
	}
}
video[poster]{
height:100%;
width:100%;
}