@charset "utf-8";

/*============
 0 common setting
 1 main title area
 2 fixed title /pc
 3 fixed request area /mobile
 4 content
 5 Map & Itinerary
 6 Day by day itinerary
 7 price
 8 pagetop
============*/


/*--
 0 common setting
--*/
body {
overflow: hidden;
font-size: 1.6rem;
/*overflow:visible;
position: relative;*/
}

#header { border-bottom: 7px solid #00a5bf; }

.mb0{margin-bottom: 0!important;}
.mb10{margin-bottom: 1rem!important;}
.mb15{margin-bottom: 1.5rem!important;}
.mb20{margin-bottom: 2rem!important;}
.mb30{margin-bottom: 3rem!important;}
.mb40{margin-bottom: 4rem!important;}

p.note{
padding-left: 1rem;
text-indent: -1rem;
}
ul.note li{
padding-left: 1rem;
text-indent: -1rem;
}

@media screen and (max-width:736px) {
/*PCのみ適用*/
.pc_only{
display: none;
}
}/*@media screen and (max-width:736px)*/

@media screen and (min-width:737px) {
/*spのみ適用*/
.sp_only{
display: none;
}
}/*@media screen and (min-width:737px)*/

/*@media only screen and (max-width: 970px) {
body .inner {
 margin: 0 1%;
 width: 98%;
}
}*//*@media screen and (max-width: 970px)*/




/*--
 1 main title area
--*/
/*各tourページ内　page-setting.css*/




/*--
 2 fixed title /pc
--*/
div.tour-ttl{
width: 100%;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
color: #330;
font-size: 2.8rem;
margin: 2rem 0;
padding: 0 1rem;
}
div.tour-ttl h2{ 
color: #330;
font-size: 2.8rem;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
}

@media screen and (min-width:737px){
section.nav-box{
width: 100vw;
margin: 0 calc(50% - 50vw);
transition: all 0.1s;
}
section.nav-box.m_fixed{
position: fixed;
top: 0;
left: 0;
background-color: #fff;
border-bottom: 2px solid #ccc;
padding: 0 1rem;
z-index: 10;
}
section.nav-box.m_fixed .tour-ttl{
margin: 1.5rem auto 3.5rem;
}

div.tour-ttl{
width: 950px;
margin: 4rem auto;
height: 4.5rem;
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
}
div.tour-ttl h2{ 
font-size: 2.8rem;
}
div.tour-ttl .request-btn{ 
color: #fff;
background-color: #669933;
border-radius: 0.5rem;
font-size: 2.0rem;
}
div.tour-ttl .request-btn a{ 
display: block;
color: #fff;
padding: 1rem 5rem;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:949px) {
div.tour-ttl{
width: 100%;
}
}/*@media screen and (min-width:737px) and ( max-width:949px)*/




/*--
 3 fixed request area /mobile
--*/
section.request-area{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
font-size: 2.8rem;
background-color: #669933;
text-align: center;
z-index: 10;
}
section.request-area a{
color: #fff;
padding: 1.5rem;
display: block;
}




/*--
 4 content
--*/
section.cont-box{
width: 100%;
padding: 0 1rem;
position: relative;
line-height: 1.4;
}
p.lead{
margin-bottom: 1rem;
}
div.tourinfo{
margin-bottom: 4rem;
}
div.tourinfo dt{
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.6rem;
display: flex;
align-items: center;
margin-bottom: 0.8rem;
}
div.tourinfo dt::before{
content:"";
display: inline-block;
width: 2.8rem;
height: 2.8rem;
background-size: contain;
background-repeat: no-repeat;
margin-right: 1rem;
}
div.tourinfo dd{
margin-bottom: 3rem;
}
div.tourinfo dl.tourinfo01 dt::before{
background-image: url(../img/icon01.svg);
}
div.tourinfo dl.tourinfo02 dt::before{
background-image: url(../img/icon02.svg);
}
div.tourinfo dl.tourinfo03 dt::before{
background-image: url(../img/icon03.svg);
}
div.tourinfo dl.tourinfo04 dt::before{
background-image: url("../img/icon04.svg");
}
div.tourinfo dl.tourinfo05 dt::before{
background-image: url("../img/icon05.svg");
}
div.tourinfo dl.tourinfo06 dt::before{
background-image: url("../img/icon06.svg");
}
div.tourinfo dd a.inn-link{
position: relative;
padding-right: 2rem;
}
div.tourinfo dd a.inn-link::before{
content:"";
background-color: #426d18;
height: 0.1rem;
width: 100%;
position: absolute;
bottom: -0.3rem;
left: 0;
}
div.tourinfo dd:hover a.inn-link::before{
content:none;
}
div.tourinfo dd a.inn-link::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f103.svg") no-repeat center center / contain;
mask-image: url("../img/f103.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.4rem;
height:	1.4rem;
margin-left: 1rem;
background-color: #426d18;
position: absolute;
top: 0.5rem;
right: 0;
}

h4.sub{
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
font-size: 1.6rem;
padding: 0.5rem 0.5rem 0.5rem 1rem;
background-color: #f9f7e9;
margin-bottom: 2rem;
}

div.tourhighlights{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 7rem;
}
div.tourhighlights dl{
width: calc((100% - 3rem)/2);
margin-bottom: 3rem;
padding-left: 1rem;
}
div.tourhighlights dt{
font-weight: bold;
margin-bottom: 0.5rem;
}


@media screen and (min-width:737px){
section.cont-box{
width: 950px;
margin: 0 auto;
}

div.tourinfo{
display: flex;
flex-wrap: wrap;
width: 100%;
margin-bottom: 6rem;
}
div.tourinfo dl{
width: calc((100% - 4rem)/3);
margin-right: 2rem;
}
div.tourinfo dl:nth-child(3n){
margin-right: 0;
}

/*ページ内リンク高さ調節*/
.pagelink{
padding-top: 100px; 
margin-top: -100px;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:949px) {
section.cont-box{
width: 100%;
}
}/*@media screen and (min-width:737px) and ( max-width:949px)*/




/*--
 5 Map & Itinerary
--*/
h3.cont-title{
font-size: 2.2rem;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
display: flex;
align-items: center;
position: relative;
margin-bottom: 3rem;
}
h3.cont-title::before{
content:"";
display: inline-block;
width: 4rem;
height: 4rem;
background-size: contain;
margin-right: 1rem;
}
h3.cont-title.map::before{
background-image: url(../img/icon-title01.svg);
}
h3.cont-title.day::before{
background-image: url(../img/icon-title02.svg);
}
h3.cont-title::after{
content:"";
width: 7.5rem;
height: 7.5rem;
border-radius: 50%;
background-color: #e0ebd6;
position: absolute;
top: -2rem;
left: 1.8rem;
z-index: -10;
}

@media screen and (min-width:737px){
h3.cont-title{
font-size: 2.8rem;
margin-bottom: 4rem;
}
h3.cont-title::before{
width: 7rem;
height: 7rem;
}
h3.cont-title::after{
width: 12rem;
height: 12rem;
top: -2rem;
left: 3rem;
}
}/*@media screen and (min-width:737px)*/




/*--
 6 Day by day itinerary
--*/
#day-by-day{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
flex-direction: row-reverse;
}
#day-by-day h3{
width: 100%;
}
div.open-btn{
width: 17rem;
border: 1px solid #330;
border-radius: 0.5rem;
cursor: pointer;
margin-bottom: 1rem;
}
div.open-btn:hover{
background-color: #e0ebd6;
}
div.open-btn span{
display: block;
color: #330;
font-weight: bold;
padding: 0.5rem 1rem;
position: relative;
}
.openall span::before{
content: 'Detailed itinerary';
}
.closeall span::before{
content: 'Brief itinerary';
padding-left: 1rem;
}
.openall span::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f103.svg") no-repeat center center / contain;
mask-image: url("../img/f103.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.3rem;
height:	1.3rem;
position: absolute;
top: 1rem;
right: 1.5rem;
margin-left: 0.5rem;
background-color: #426d18;
}
.closeall span::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f102.svg") no-repeat center center / contain;
mask-image: url("../img/f102.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.3rem;
height:	1.3rem;
position: absolute;
top: 1rem;
right: 1.5rem;
margin-left: 0.5rem;
background-color: #426d18;
}

.acc-container{
position: relative;
width: 100%;
/*background-color: #fff;*/
border:1px solid #ccc;
border-radius: 0.5rem;
margin-bottom: 1rem;
}
.acc-container::before{
content: "";
width: 1rem;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 0.5rem 0 0 0.5rem;
}
.acc-container.day1::before{
background-color: #f1564e;
}
.acc-container.day2::before{
background-color: #ee9513;
}
.acc-container.day3::before{
background-color: #b1be18;
}
.acc-container.day4::before{
background-color: #16916f;
}
.acc-container.day5::before{
background-color: #3d8fbf;
}
.acc-container.day6::before{
background-color: #64417b;
}
.acc-container.day7::before{
background-color: #d13d6d;
}
.acc-title{
/*display: block;*/
position: relative;
padding: 2.5rem 5.5rem 2.5rem 2.5rem;
cursor: pointer;
font-size: 1.6rem;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
transition: 0.3s all ease; 
}
.acc-title.open{
transition: 0.1s all ease; 
}
.acc-title span{
font-size: 1.4rem;
font-weight: normal;
}
.acc-title::after{
content:"";
display: inline-block;
background-image: url(../img/open-btn.png);
width: 5.6rem;
height:	5.6rem;
position: absolute;
right: 0;
top: 20%;
transition: 0.3s all ease; 
}
.acc-title.open::after {
transform: rotate(45deg);
transition: 0.3s all ease; 
}
.acc-title.open + .acc-content::before{
content: "";
background-color: #333300;
height: 0.2rem;
width: 93%;
position: absolute;
top: 0;
left: 2rem;
}
.acc-content {
display: none;
position: relative;
padding: 1rem 1rem 1rem 2rem;
border-radius: 5px;
}
.acc-content .daybyday{
margin: 1rem 0 4rem;
}
.acc-content .daybyday ul.note{
margin-top: 1rem;
}
.acc-title + .acc-content .img01{
display: none;
}
.acc-title.open + .acc-content .img01{
display: block;
width: 100%;
}
.acc-title + .acc-content p{
display: none;
}
.acc-title.open + .acc-content p{
display: block;
width: 100%;
}
.acc-content .daybyday li:first-child{
margin: 0 0 2rem 0;
text-align: right;
}
.acc-content .daybyday li:first-child p{
font-size: 1.4rem;
}

/*experiences*/
h4.experiences-sub{
font-size: 1.6rem;
font-family: "leida", sans-serif;
font-weight: bold;
font-style: normal;
display: flex;
align-items: baseline;
margin-bottom: 1.5rem;
}
h4.experiences-sub::after{
content: "";
background-color: #ccc;
width: 100%;
height: 0.2rem;
margin-left: 2rem;
}

.experience-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
margin-bottom: 4rem;
}
.experience-container dl{
width: 100%;
margin-bottom: 2rem;
}
.experience-container dl:last-child{
margin-bottom: 0;
}
.experience-container dl dt{
font-size: 1.8rem;
margin-bottom: 0.5rem;
position: relative;
padding-left: 0.5rem;
}
.experience-container dl dt::first-letter{
font-size: 2.4rem;
}
.experience-container dl dt::after{
content:"";
width: 3.5rem;
height: 3.5rem;
border-radius: 50%;
background-color: #f9f7e9;
position: absolute;
top: 0;
left: -0.5rem;
z-index: -10;
}
.experience-container dl dd p.rt-indent{
text-indent: -8.5rem;
padding-left: 8.5rem;
}

/*itinerary image*/
ul.itinerary-img{
margin-bottom: 1rem;
}
ul.itinerary-img li{
width: 100%;
line-height: 1.2;
}
ul.itinerary-img li img{
width: 100%;
margin-bottom: 0.5rem;
}
ul.itinerary-img li span{
font-size: 1.4rem;
}
ul.slick-dots li{
width: 2rem;
}
ul.slick-dots li.slick-active button:before{
color:#ef4a01;
font-size: 0.8rem;
}

/**/
p.transportation{
border-left: 3px dotted #aaa;
display: flex;
margin: 0 0 1rem 5rem;
}
p.transportation::before{
content: "";
width: 5.1rem;
height: 2.3rem;
background-image: url(../img/transportation.svg);
background-size: contain;
background-repeat: no-repeat;
margin: 0 1rem 0 2rem;
}


@media screen and (min-width:737px){
#day-by-day{
flex-wrap: nowrap;
flex-direction: row;
}
div.open-btn{
width: 20rem;
margin-bottom: 0;
margin-top: 2rem;
}
div.open-btn span{
padding: 1rem;
}
.openall span::after{
top: 1.5rem;
}
.closeall span::after{
top: 1.5rem;
}

.acc-title{
padding: 2.5rem 28rem 2.5rem 3rem;
}
.acc-title::after{
right: 1.5rem;
}
.acc-title.open + .acc-content::before{
width: 96%;
}
.acc-content .daybyday ul.note li{
width: 100%;
}
.acc-content .daybyday li img{
width: 100%;
}
.acc-content .daybyday li:first-child{
position: relative;
}
.acc-content .daybyday li:first-child p{
position: absolute;
bottom: 0.5rem;
right: 0;
padding: 0.2rem 0.5rem;
color: #fff;
background-color: rgba(46,45,45,0.7);
width: 16.5rem;
}

/*Experiences*/
.experience-container{
flex-direction: row;
}
.experience-container dl{
width: calc((100% - 3rem)/2);
margin-right: 3rem;
}
.experience-container dl:nth-child(even){
margin-right: 0;
}
.experience-container dl:nth-last-child(-n+2){
margin-bottom: 0;
}

/*itinerary image*/
ul.itinerary-img{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
ul.itinerary-img li{
width: calc((100% - 3rem)/3);
margin-right: 1.5rem;
}
ul.itinerary-img li:nth-child(3n){
margin-right: 0;
}
ul.slick-dots{
display: none;
}
}/*@media screen and (min-width:737px)*/




/*--
 7 price
--*/
section.price-box{
margin: 6rem 0 0;
border-top: 4px double #ccc;
}
div.price-box-inner{
width: 100%;
padding: 0 1rem;
margin: 3rem 0;
line-height: 1.4;
}
div.price-box-inner .p-inner{
display: flex;
flex-direction: column;
background-color: #f9e6e8;
padding: 1rem 1.5rem;
}
div.price-box-inner .p-inner p{
color: #c00;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;
border-bottom: 0.2rem solid #fff;
}
div.price-box-inner p span.price1{
font-size: 2rem;
}
div.price-box-inner p span.price2{
font-size: 3.5rem;
font-weight: bold;
}

h5.price-info-ttl{
font-weight: bold;
margin-top: 5rem;
}
p + h5.price-info-ttl{
margin-top: 3rem;
}
dl.price-info dt{
font-weight: normal;
}
dl.price-info ol{
list-style: decimal;
margin-left: 0.5rem;
}
dl.price-info li{
list-style: decimal inside none;
}
div.price-box-inner a.inn-link{
transition: 0.3s all ease;
/*position: relative;*/
cursor: pointer;
border-bottom: 1px solid #426d18;
}
div.price-box-inner a:hover.inn-link{
border-bottom: none;
}
/*div.price-box-inner a.inn-link::before{
content:"";
background-color: #426d18;
height: 0.1rem;
width: 100%;
position: absolute;
bottom: -0.2rem;
left: 0;
}*/
/*div.price-box-inner a:hover.inn-link::before{
content:none;
}*/
div.price-box-inner a.inn-link::after{
content:"";
display: inline-block;
-webkit-mask: url("../img/f103.svg") no-repeat center center / contain;
mask-image: url("../img/f103.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.3rem;
height:	1.3rem;
margin-left: 0.5rem;
background-color: #426d18;
}

dl.acc-box{
border: 1px solid #330;
}
dl.acc-box dt{
padding: 1rem 2rem 1rem 1.5rem;
display: flex;
align-items: center;
transition: 1s all ease;
}
dl.acc-box dt::before{
content:"";
-webkit-mask: url("../img/f067.svg") no-repeat center center / contain;
mask-image: url("../img/f067.svg");
mask-repeat: no-repeat;
mask-position: center center;
mask-size: contain;
width: 1.5rem;
height:	1.5rem;
margin-right: 1.5rem;
background-color: #426d18;
transition: all 0.3s ease-out;
}
dl.acc-box dd{
display: none;
padding: 1rem 2rem 2rem;
}
dl.acc-box dt.open::before{
-webkit-mask: url("../img/f068.svg") no-repeat center center / contain;
mask-image: url("../img/f068.svg");
}
dl.acc-box h5{
font-weight: bold;
}
dl.acc-box p{
margin-bottom: 2rem;
}
dl.acc-box p:last-child{
margin-bottom: 0;
}

@media screen and (min-width:737px){
section.price-box{
width: 100vw;
margin: 6rem calc(50% - 50vw) 0;
}
div.price-box-inner{
width: 950px;
margin: 3rem auto;
}
div.price-box-inner .p-inner{
display: flex;
flex-direction: row;
background-color: #f9e6e8;
padding: 1rem 1.5rem;
}
div.price-box-inner .p-inner p{
width: 55%;
padding: 0 1rem 0 0;
margin-right: 1.5rem;
border-bottom: none;
border-right: 0.2rem solid #fff;
}
div.price-box-inner p span.price1{
font-size: 2.5rem;
}
div.price-box-inner p span.price2{
font-size: 4rem;
}
div.price-box-inner ul{
flex: 1;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:949px) {
div.price-box-inner{
width: 100%;
}
}/*@media screen and (min-width:737px) and ( max-width:949px)*/



/*--
 8 pagetop
--*/
#page-top {
 position: fixed;
 bottom: -70px;
 right: 20px;
 z-index: 90;
}
#page-top a {
 background-color: rgba( 0, 0, 0, 0.4 );
 border-radius: 70px;
 color: #fff;
 display: block;
 font-size: 28px;
 height: 70px;
 line-height: 70px;
 text-align: center;
 width: 70px;
}

#foottab {
 margin: 100px auto 0;
}

@media screen and (min-width:737px){
#page-top {
 bottom: 20px;
}
}/*@media screen and (min-width:737px)*/



/*--
 8 tour operationg company
--*/
p#opc{
position: relative;
margin-top: 8rem;
padding-left: 2rem;
}
p#opc::before{
content:"";
background-color: #426d18;
height: 100%;
width: 0.5rem;
position: absolute;
left: 0;
top: 0;
}




@media screen and (min-width:73
7px) and ( max-width:949px) {

}/*@media screen and (min-width:737px) and ( max-width:949px)*/

@media screen and (min-width:950px) {

}/*@media screen and (min-width:950px)*/

@media screen and (max-width:969px) {

}/*@media screen and (max-width:969px)*/