@charset "utf-8";

/*============
 1 main title area
 2 fixed title
 3 map
 4 
============*/


/*--
 1 main title area
--*/
section#main-ttl{
background-image: url("../img/main-img.webp");
background-repeat: no-repeat;
background-position: 50% 0;
background-size: 220%;
width: 100%;
margin: 0;
height: 425px;
transition: all 0.2s;
}
div.main-ttl-inner{
position: relative;
width: 100%;
height: 100%;
text-align: center;
}

div.main-ttl-inner h1{
color: #fff;
font-size: 3.6rem;
font-family: "elina", sans-serif;
font-weight: 400;
font-style: normal;
position: absolute;
top: 3rem;
right: 0;
left: 0;
margin: 0 auto 2rem;
background-color: rgba(85,44,80,0.4);
padding: 1.5rem 1rem 2rem;
line-height: 1.4;
}
div.main-ttl-inner h1::after{
content: "Aichi (Nagoya) / Gifu / Mie / Nagano";
color: #fff;
font-size: 1.8rem;
font-family: "elina", sans-serif;
font-weight: normal;
font-style: normal;
display: block;
margin-top: 1.4rem;
}
div.main-ttl-inner p{
color: #fff;
font-size: 1.6rem;
font-family: 'Source Sans Pro','Microsoft JhengHei', '微軟正黑體', sans-serif;
font-weight: normal;
font-style: normal;
position: absolute;
bottom: 1rem;
right: 0;
left: 0;
margin: auto;
background-color: rgba(44, 44, 44, 0.5);
}

@media screen and (max-width:950px){
div.main-ttl-inner{
width: 100%;
}
}/*@media screen and (max-width:950px)*/

@media screen and (min-width:520px){
section#main-ttl{
background-size: 200%;
}
}/*@media screen and (min-width:520px)*/

@media screen and (min-width:570px){
section#main-ttl{
background-size: 190%;
}
}/*@media screen and (min-width:570px)*/

@media screen and (min-width:620px){
section#main-ttl{
background-size: 180%;
}
}/*@media screen and (min-width:620px)*/

@media screen and (min-width:670px){
section#main-ttl{
background-size: 170%;
}
}/*@media screen and (min-width:670px)*/

@media screen and (min-width:737px){
section#main-ttl{
background-size: 150%;
width: 100vw;
margin: 0 calc(50% - 50vw);
height: 538px;
}
div.main-ttl-inner{
/*margin: 0 auto;
width: 950px;*/
}
div.main-ttl-inner h1{
font-size: 5.2rem;
display: block;
width: 100%;
padding: 1.5rem 0 2rem;
background-image: linear-gradient(90deg, rgba(44, 53, 115, 0) 0%, rgba(44, 53, 115, 0.5) 20% 80%, rgba(44, 53, 115, 0) 100%);
background-color: transparent;
}
div.main-ttl-inner h1::after{
font-size: 2.4rem;
}
div.main-ttl-inner p{
font-size: 2.2rem;
}
}/*@media screen and (min-width:737px)*/

@media screen and (min-width:737px) and ( max-width:949px) {
div.main-ttl-inner{
margin: 0;
width: 100%;
}
div.main-ttl-inner h1{
font-size: 3.8rem;
}
}/*@media screen and (min-width:737px) and ( max-width:949px)*/

@media screen and (min-width:850px){
section#main-ttl{
background-size: 130%;
}
}/*@media screen and (min-width:850px)*/

@media screen and (min-width:950px){
section#main-ttl{
background-size: 120%;
}
}/*@media screen and (min-width:950px)*/

@media screen and (min-width:1100px){
section#main-ttl{
background-size: 110%;
}
}/*@media screen and (min-width:1100px)*/

@media screen and (min-width:1300px){
section#main-ttl{
background-size: 100%;
}
}/*@media screen and (min-width:1300px)*/

@media screen and (min-width:1500px){
section#main-ttl{
background-position: center 20%;
background-size: 100%;
}
}/*@media screen and (min-width:1500px)*/

@media screen and (min-width:1700px){
section#main-ttl{
background-position: center 40%;
background-size: 100%;
}
}/*@media screen and (min-width:1700px)*/




/*--
 2 fixed title
--*/
div.tour-ttl h2::after{ 
content: "[From Mid-April to November 15]";
color: #c00;
font-size: 2.2rem;
font-family: 'Source Sans Pro','Microsoft JhengHei', '微軟正黑體', sans-serif;
font-weight: bold;
font-style: normal;
display: block;
margin-top: 0.5rem;
}




/*--
 3 map
--*/
div.map-area{
width: 100%;
height: 450px;
background-image: url(../img/map.svg);
background-position: 45% 64%;
background-size: 190%;
background-repeat: no-repeat;
border: 3px solid #333300;
margin-bottom: 10rem;
position: relative;
}
div.map-area p.area{
position: absolute;
bottom: 1rem;
right: 1rem;
width: 40%;
}

@media screen and (min-width:500px) and ( max-width:736px) {
div.map-area{
height: 635px;
}
}/*@media screen and (min-width:500px) and ( max-width:736px)*/

@media screen and (min-width:737px){
div.map-area{
height: 635px;
background-position: 56% 64%;
background-size: 135%;
}
}/*@media screen and (min-width:737px)*/





/*--
 4 Day by day itinerary
--*/
@media screen and (min-width:737px){
.acc-container .acc-title{
background-position: right center;
background-repeat: no-repeat;
}
.acc-container .acc-title.open{
background-image: unset;
}
.day1 .acc-title{
background-image: url(../img/itinerary_day1_top.webp);
}
.day2 .acc-title{
background-image: url(../img/itinerary_day2_top.webp);
}
.day3 .acc-title{
background-image: url(../img/itinerary_day3_top.webp);
}
.day4 .acc-title{
background-image: url(../img/itinerary_day4_top.webp);
}
.day5 .acc-title{
background-image: url(../img/itinerary_day5_top.webp);
}
.day6 .acc-title{
background-image: url(../img/itinerary_day6_top.webp);
}
.day7 .acc-title{
background-image: url(../img/itinerary_day7_top.webp);
}
}/*@media screen and (min-width:737px)*/