@charset "utf-8";

/*============
 0 top slider
============*/


/*--
 0 top slider
--*/
div.slide-box{
border-top: 3px solid #fff;
}
/*div.slide-box.tourpage{
border-top: none;
}*/
div.slide-box #slide{
width: 100%;
height: auto;
}
div.slide-box .slick-list{
overflow: inherit;
padding: 0 !important;
}

ul.topslide-items li{
opacity: 1;
transition: 0.5s;
}
ul.topslide-items li:not(.slick-active){
opacity: 0.5;
}
ul.topslide-items li.slick-active li{
opacity: 1;
}


.topslide-items .item{
display: flex;
flex-direction: column;
}
.topslide-items .item li.ph{
width: 100%;
}
.topslide-items .item li.ph img{
width: 100%;
}
.topslide-items .item li.ttl{
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
background-image: url('../img/slide-bg.svg');
padding: 1.5rem 1rem;
font-weight: bold;
font-size: 1.6rem;
}
.topslide-items .item li.ttl::before{
content: "";
background-image: url('../img/recommend.svg');
width: 8.5rem;
height: 8rem;
background-size: 5rem 8rem;
background-repeat: no-repeat;
margin: 0.5rem 0;
}
.topslide-items .item li.ttl::after{
content: "";
background-image: url('../img/detail-link.png');
width: 2rem;
height: 3rem;
background-size: contain;
background-repeat: no-repeat;
margin: auto;
}

.topslide-items .item li.ttl div{
width: 100%;
}
.topslide-items .item li.ttl h3{
font-family: rockwell, sans-serif;
font-style: normal;
font-weight: 800;
}
.topslide-items .item li.ttl p{
line-height: 1.4;
}
.topslide-items .item li.ttl p.tour-ttl{
display: inline-block;
padding-right: 1rem;
}






.slick-dots{
width: 100%;
bottom: auto;
}
.slick-dots li{
margin: 0 3px;
}
.slick-dots li button:before{
color: #9b9b9b;
opacity: 1;
font-size: 0.8rem;
}
.slick-dots li.slick-active button:before{
color: #ecc735;
opacity: 1;
font-size: 1rem;
}
.slick-dotted.slick-slider{
margin-bottom: 0;
}



@media screen and (min-width:780px) {
div.slide-box{
border-top: 3px solid #fff;
margin: 0 auto;
}

div.slide-box #slide{
margin: 0 auto;
max-width: 1130px;
width: 100%;
/*height: 46rem;*/
}

.topslide-items .item{
flex-direction: row;
}
.topslide-items .item li.ph{
width: 77%;
}
.topslide-items .item li.ttl{
display: initial;
width: 23%;
padding: 1.5rem;
}
.topslide-items .item li.ttl::before{
content: none;
}
.topslide-items .item li.ttl div{
position: relative;
height: 100%;
}
.topslide-items .item li.ttl h3{
display: flex;
width: 100%;
padding: 3rem 0 1rem 5rem;
margin-bottom: 2rem;
font-size: 1.8rem;
position: relative;
}
.topslide-items .item li.ttl h3::before{
content: "";
background-image: url('../img/recommend.svg');
width: 5rem;
height: 9rem;
background-size: contain;
background-repeat: no-repeat;
position: absolute;
top: 0;
left: 0;
}
.topslide-items .item li.ttl p{
line-height: 1.6;
}
.topslide-items .item li.ttl p.detail{
position: absolute;
bottom: 0;
right: 0;
display: flex;
align-items: center;
}
.topslide-items .item li.ttl p.detail::after{
content:"";
display: inline-block;
-webkit-mask: url("../fontawesome/f101.svg") no-repeat center center / contain;
mask-image: url("../fontawesome/f101.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.5rem;
height:	3rem;
margin-left: 0.5rem;
background-color: #333;
}

.tour-title {
/* 1. 基本設定とパディング */
  position: relative;
  display: inline-block;
 
/* 2. 文字スタイル */
  color: white;
  /*font-family: sans-serif;
  font-weight: 900;
  font-size: 4rem;*/
  line-height: 1.1;
  z-index: 1;
}
/* 3. 【なめらかな縁取り用】パディングの位置に合わせて配置 */
.tour-title::after {
  content: attr(data-text);
  white-space: pre-wrap;
  position: absolute;
  top: 3rem;  /* padding-topに合わせる */
  left: 5rem; /* padding-leftに合わせる */
  z-index: -1;

  color: black;
  -webkit-text-stroke: 4px black; /* 12pxから4pxへ変更 */
  stroke-linejoin: round;         /* 細くても滑らかさを保つ */
  paint-order: stroke fill;
  
  line-height: 1.1;
  width: 100%;
}


.topslide-items .item li.ttl div{
margin-left: 0;
}

.slick-dots{
/*width: auto;*/
bottom: -3rem;
/*left: 34%;*/
}
.slick-dots li{
margin: 0 7px;
}
.slick-dots li button:before{
/*color: #fff;*/
}
}/*@media screen and (min-width:780px)*/



@media screen and (min-width:780px) and ( max-width:1040px) {
.topslide-items .item li.ttl{
padding-left: 1rem;
}
.topslide-items .item li.ttl h3{
padding: 2rem 0 1rem 3.5rem;
font-size: 1.5rem;
}
.topslide-items .item li.ttl h3::before{
width: 3.5rem;
height: 7rem;
}
.tour-title::after {
top: 2rem;
left: 3.5rem;
}
}/*@media screen and (min-width:780px) and ( max-width:1040px)*/




/*--
 button prev/next
--*/
.prev-arrow, .next-arrow {
display: none !important;
}

@media screen and (min-width:780px) {
.prev-arrow, .next-arrow {
display: block !important;
position: absolute;
top: 50%;
width: 35px;
height: 35px;
z-index: 9999;
cursor: pointer;
transform: translate(0, -50%);
border: none;
outline: none;
}
.prev-arrow{
left: -17px;
}
.next-arrow {
right: -15px;
}



.slick-prev, .slick-next {
display: block;
z-index: 9999;
}
.slick-next {
right: 0;
}
.slick-prev:before, .slick-next:before {
font-size:40px;
opacity: 1;
}
}/*@media screen and (min-width:780px)*/