/* ---------------------------------------------------------------------------------
model */

.modelIntroTxt{ font-size: 26px; margin-bottom: 20px; color: #002378; padding-left: 80px;font-weight: bold;
background: url(/common/images/07_model/megane.png) no-repeat left center; background-size: 70px auto;}


@media(max-width:750px){
.modelIntroTxt{ font-size: 22px;}
}



.cardLinks{ background: #d8edff; padding: 30px;border-radius: 30px;margin-bottom: 50px;}

.kindCard{margin-bottom: 0;padding-bottom: 0;}
.kindCard p{padding-top: 185px; text-align: center; line-height: 1.4em; font-weight: bold; color:#005CB5;}


.kindCard li .base{opacity: 0;}
.kindCard li .card{ opacity: 0;}
.kindCard li .dark{}

.kindCard li.select .base{opacity: 1;}
.kindCard li.select .card{opacity: 1;}
.kindCard li.select .dark{ opacity: 0;}

.kindCard li:hover .base{opacity: 1;}
.kindCard li:hover .card{opacity: 1;}
.kindCard li:hover .dark{ opacity: 0;}

h3.modelTitle{ text-align: center; padding: 0 140px;color: #002378;
  background-size: 100px auto, 100px auto;
}

@media(max-width:750px){
.kindCard p{padding-top: 135px; }
}



.modelDay{
border: 1px solid #002378; border-radius: 20px;background: #f4f4f4;margin-bottom: 75px;
position: relative;}

@media(max-width:750px){
.modelDay{margin-bottom: 83px;}
}


.navDay{
    width: 450px;
    margin: 0 auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 20px;
    row-gap: 20px;
    position: absolute; top: -20px;
  right: 0;
  left: 0;
  margin: 0 auto;
}

.allDayPackage.card04 .navDay{
    grid-template-columns: repeat(4, 1fr);
}

.navDay a{ color: #002378;}


@media(max-width:750px){
.navDay{ top:-28px;}
}




.modelDay >.inner01{background:#ffdde6; border-radius: 20px 20px 0 0;padding: 20px;}

.navDay li{border: 1px solid #002378; background: #fff; 
position: relative; color: #002378;text-align: center; border-radius: 100px;font-size: 110%; font-weight: 900;}
.navDay li span,
.navDay li a{display:block;padding: 6px;}
#DAY01 .navDay li.navDay1{color: #fff; background-color: #002378;}
#DAY02 .navDay li.navDay2{color: #fff; background-color: #002378;}
#DAY03 .navDay li.navDay3{color: #fff; background-color: #002378;}
#DAY04 .navDay li.navDay4{color: #fff; background-color: #002378;}

#DAY02 .navDay li.navDay2:after{
  content: url("/common/images/07_model/road03.png");
  position: absolute;
  left: 50%;
  top: -58px;
  transform: translateX(-50%) scale(0.3);
  transform-origin: top center;
  z-index: 0;
}
#DAY03 .navDay li.navDay3:after{
  content: url("/common/images/07_model/road03.png");
  position: absolute;
  left: 50%;
  top: -58px;
  transform: translateX(-50%) scale(0.3);
  transform-origin: top center;
  z-index: 0;
}
#DAY04 .navDay li.navDay4:after{
  content: url("/common/images/07_model/road03.png");
  position: absolute;
  left: 50%;
  top: -58px;
  transform: translateX(-50%) scale(0.3);
  transform-origin: top center;
  z-index: 0;
}


.thumbList{ display: flex; }

.thumbPrev{width: 30px;}
.thumbList_scrollArea{ 
  width: calc(100% - 60px);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  white-space: nowrap;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
padding: 0 10px;
}
.thumbList_scrollArea::-webkit-scrollbar{
  display: none;
}

.thumbNext{width: 30px; }

.thumbList_scrollArea ul{  display: flex;
margin: 0 10px;
  width: max-content;
  min-width: 100%;}


.thumbList_scrollArea ul li{text-align: center; position: relative; width: 150px;padding:20px 0 50px; width: 150px;cursor: pointer;
  flex: 0 0 150px;}
.thumbList_scrollArea ul li >.inner{ position: relative;z-index: 2;}
.thumbList_scrollArea ul li img{ border-radius: 100px; width: 70%;border: 2px solid #002378;}
.thumbList_scrollArea ul li .listTxt{ border: 2px solid #002378; background: #fff; font-size: 10px;line-height: 1.2em; text-align: center; border-radius: 40px; position: absolute; 
width: 140px;padding: 5px 10px;
top: 95px;
left: 50%;
transform: translateX(-50%);
overflow-wrap: break-word;
word-break: break-word;
white-space: normal
}
.thumbList_scrollArea ul li .listTxt p{
word-break: break-word;
white-space: normal}

.thumbList_scrollArea ul li .listTxt br{display: none;}

.thumbList_scrollArea ul li .listNumber{width: 23px; height: 23px; border-radius: 50px; border: 2px solid #002378; color: #002378; line-height: 1.2em; background: #fff; font-weight: 900; font-size: 14px;
position: absolute; top: 0;right: 30px;}

.thumbList_scrollArea ul li:after{
  content: url("/common/images/07_model/road01.png");
  vertical-align: bottom;
  display: inline-block;
  transform-origin: top left;
  transform: scale(0.3);
 position: absolute;
width: 100%;
top: 60px; right: -120px;
z-index: 0;
}
.thumbList_scrollArea ul li:last-child:after{display: none;}
.thumbList_scrollArea ul li:nth-last-child(2):after{display: none;}

.thumbList_scrollArea ul li.chara{width: 50px;text-align: center;width: 50px;  flex: 0 0 50px; cursor: none;}
.thumbList_scrollArea ul li.chara img{border-radius: 0; width: 100%;border: none;}
.thumbList_scrollArea ul li.chara p{text-align: center; color:#002378; font-weight: bold; font-size: 14px;}

.thumbList_scrollArea ul li.active .listTxt{ border: 2px solid #002378; background: #002378; color:#fff;}
.thumbList_scrollArea ul li.active .listNumber{width: 23px; height: 23px; border-radius: 50px; border: 2px solid #fff; color: #fff;
 background: #002378;}


.thumbPrev{
border-right: 2px solid #e1222c;cursor: pointer;
}
.thumbPrev.disable,
.thumbNext.disable{ opacity: 0.3; pointer-events: none;}

.thumbPrev{ height: 175px;}
.thumbPrev >.inner{cursor: pointer; width: auto; height: 100%; position: relative;}
.thumbPrev span{
  width: 30px;
  height:60px;
  background: #df4545;
  border-radius: 100px 0 0 100px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-indent: -9999px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 0 0 transparent;
}
.thumbPrev span::before{
  content: "";
  width: 15px;
  height: 15px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%) rotate(45deg);
}


.thumbNext{
border-left: 2px solid #e1222c;
}
.thumbNext{ height: 175px;cursor: pointer;}
.thumbNext >.inner{cursor: pointer; width: auto; height: 100%; position: relative;}
.thumbNext span{
  width: 30px;
  height:60px;
  background: #df4545;
  border-radius: 0 100px 100px 0;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-indent: -9999px;
  overflow: hidden;
  z-index: 10;
  box-shadow: 0 0 0 0 transparent;
}
.thumbNext span::before{
  content: "";
  width: 15px;
  height: 15px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%) rotate(-135deg);
}

@media(max-width:750px){


}


.modelSlide{
  padding: 30px;
  max-width: 700px;
 min-height: 400px;
  margin: 0 auto;
 position: relative;
}
.modelSlide >.inner{ position: relative;}

.modelSlide .btnPrev{ width: 70px; position: absolute; top: 140px; left: -20px;z-index: 5; cursor: pointer; transition: all 0.2s 0s ease;}
.modelSlide .btnNext{ width: 70px; position: absolute; top: 140px; right: -20px;z-index: 5; cursor: pointer;transition: all 0.2s 0s ease;}
.modelSlide .btnPrev:hover,
.modelSlide .btnNext:hover{ transform: scale(1.1);}
.modelSlide .btnPrev.disable,
.modelSlide .btnNext.disable{ display: none;}

.modelSlide ul{
  position: relative;
}

.modelSlide ul li{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s ease, visibility 1s ease;
}

.modelSlide ul li.active{
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.modelSlide ul li .imgArea{
  text-align: center;
  margin-bottom: 10px;
}

.modelSlide ul li .imgArea img{
  width: 520px;
  border: 8px solid #df4545;
  border-radius: 20px;
  margin: 0 auto;
}

.modelSlide ul li p.mainTxt{
  text-align: center;
  font-weight: bold;
  color: #002378;
  margin-bottom: 10px;
  font-size: 120%;
width: 460px;margin: 0 auto 10px;
}

.modelSlide ul li p.subTxt{
  color: #002378;
  width: 320px;
  margin: 0 auto;
  font-size: 90%;
}

.modelSlide ul li p.Area{
  display: inline-block;
  border: 4px solid #002378;
  background: #fff;
  font-size: 140%;
  line-height: 1em;
  padding: 5px 10px;
  border-radius: 10px;
  color: #002378;
  position: absolute;
  left: 0;
  top: 0;
}

.modelSlide p.count{width: 50px; position: absolute; right: 50px; top: 350px; text-align: right; color: #002378; font-size: 140%; font-weight: bold; }

.modelDataArea{ display: block; position: relative;}

@media(max-width:750px){
.modelSlide ul li p.mainTxt{
  margin-bottom: 10px;
  font-size: 100%;
padding: 0 10px;
}

.modelSlide ul li p.subTxt{
  width: 440px;
  font-size: 90%;
}

.modelSlide ul li p.Area{
  font-size: 100%;
}


.modelSlide p.count{width: 50px;  right: 0; top: 335px; font-size: 120%; }


}



.allDayPackage.card01 h3.modelTitle{
  background:
    url(/common/images/07_model/card01.png) no-repeat left 20px center,
    url(/common/images/07_model/map01_North.png) no-repeat right 20px center;background-size: 100px auto, 80px auto;}
.allDayPackage.card02 h3.modelTitle{
  background:
    url(/common/images/07_model/card02.png) no-repeat left 20px center,
    url(/common/images/07_model/map02_South.png) no-repeat right 20px center;background-size: 100px auto, 80px auto;}
.allDayPackage.card03 h3.modelTitle{
  background:
    url(/common/images/07_model/card03.png) no-repeat left 20px center,
    url(/common/images/07_model/map03_All.png) no-repeat right 20px center;background-size: 100px auto, 80px auto;}
.allDayPackage.card04 h3.modelTitle{
  background:
    url(/common/images/07_model/card04.png) no-repeat left 20px center,
    url(/common/images/07_model/map04_All.png) no-repeat right 20px center;background-size: 100px auto, 80px auto;}


@media(max-width:750px){
.allDayPackage h3.modelTitle{ font-size: 28px; margin-bottom: 70px;}

.allDayPackage.card01 h3.modelTitle{
  background:
    url(/common/images/07_model/card01.png) no-repeat left 20px center,
    url(/common/images/07_model/map01_North.png) no-repeat right 20px center;background-size: 100px auto, 60px auto;}
.allDayPackage.card02 h3.modelTitle{
  background:
    url(/common/images/07_model/card02.png) no-repeat left 20px center,
    url(/common/images/07_model/map02_South.png) no-repeat right 20px center;background-size: 100px auto, 60px auto;}
.allDayPackage.card03 h3.modelTitle{
  background:
    url(/common/images/07_model/card03.png) no-repeat left 20px center,
    url(/common/images/07_model/map03_All.png) no-repeat right 20px center;background-size: 100px auto, 60px auto;}
.allDayPackage.card04 h3.modelTitle{
  background:
    url(/common/images/07_model/card04.png) no-repeat left 20px center,
    url(/common/images/07_model/map04_All.png) no-repeat right 20px center;background-size: 100px auto, 60px auto;}



}






.allDayPackage.card01 .modelDay >.inner01{background:#ffdde6;}
.allDayPackage.card02 .modelDay >.inner01{background:#ffe6b9;}
.allDayPackage.card03 .modelDay >.inner01{background:#b9dcff;}
.allDayPackage.card04 .modelDay >.inner01{background:#d7f0e1;}



.allDayPackage.card01 .modelDay .thumbNext{border-left: 2px solid #e1222c;}
.allDayPackage.card01 .modelDay .thumbNext span{background: #e1222c;}
.allDayPackage.card01 .modelDay .thumbPrev{border-right: 2px solid #e1222c;}
.allDayPackage.card01 .modelDay .thumbPrev span{background: #e1222c;}

.allDayPackage.card02 .modelDay .thumbNext{border-left: 2px solid #e59714;}
.allDayPackage.card02 .modelDay .thumbNext span{background: #e59714;}
.allDayPackage.card02 .modelDay .thumbPrev{border-right: 2px solid #e59714;}
.allDayPackage.card02 .modelDay .thumbPrev span{background: #e59714;}

.allDayPackage.card03 .modelDay .thumbNext{border-left: 2px solid #326eb1;}
.allDayPackage.card03 .modelDay .thumbNext span{background: #326eb1;}
.allDayPackage.card03 .modelDay .thumbPrev{border-right: 2px solid #326eb1;}
.allDayPackage.card03 .modelDay .thumbPrev span{background: #326eb1;}

.allDayPackage.card04 .modelDay .thumbNext{border-left: 2px solid #027b58;}
.allDayPackage.card04 .modelDay .thumbNext span{background: #027b58;}
.allDayPackage.card04 .modelDay .thumbPrev{border-right: 2px solid #027b58;}
.allDayPackage.card04 .modelDay .thumbPrev span{background: #027b58;}

.allDayPackage.card01 .modelDay .modelSlide ul li .imgArea img {border: 8px solid #df4545;}
.allDayPackage.card02 .modelDay .modelSlide ul li .imgArea img {border: 8px solid #e59714;}
.allDayPackage.card03 .modelDay .modelSlide ul li .imgArea img {border: 8px solid #326eb1;}
.allDayPackage.card04 .modelDay .modelSlide ul li .imgArea img {border: 8px solid #027b58;}





.cardPageChange{margin-bottom: 120px;}
.cardPageChange ul{ text-align: center; display: flex; gap: 30px;
  justify-content: center;
  align-items: center;}
.cardPageChange li{display:table; height: 100px; position: relative; font-weight: bold;}
.cardPageChange a{ color: #fff; width: 100%; height: 100%; position: relative;display: table-cell; vertical-align: middle;font-size: 120%; }

@media(max-width:750px){

.cardPageChange a{ font-size: 90%;line-height: 1.2em;}
}

.cardPageChange li.prev{padding:0 5px 0 40px;width: 200px; }
.cardPageChange li.center{padding:0 10px;width: 220px; }
.cardPageChange li.next{padding:0 40px 0 5px;width: 200px; }

.cardPageChange li:hover{opacity: 0.8;}

.allDayPackage.card01 .cardPageChange li.prev{background: url(/common/images/07_model/day01_pageChange_left.png) no-repeat center top; background-size:contain;}
.allDayPackage.card01 .cardPageChange li.center{background: url(/common/images/07_model/day01_pageChange_center.png) no-repeat center top; background-size: contain;}
.allDayPackage.card01 .cardPageChange li.next{background: url(/common/images/07_model/day01_pageChange_right.png) no-repeat center top; background-size: contain;}

.allDayPackage.card02 .cardPageChange li.prev{background: url(/common/images/07_model/day02_pageChange_left.png) no-repeat center top; background-size:contain;}
.allDayPackage.card02 .cardPageChange li.center{background: url(/common/images/07_model/day02_pageChange_center.png) no-repeat center top; background-size: contain;}
.allDayPackage.card02 .cardPageChange li.next{background: url(/common/images/07_model/day02_pageChange_right.png) no-repeat center top; background-size: contain;}

.allDayPackage.card03 .cardPageChange li.prev{background: url(/common/images/07_model/day03_pageChange_left.png) no-repeat center top; background-size:contain;}
.allDayPackage.card03 .cardPageChange li.center{background: url(/common/images/07_model/day03_pageChange_center.png) no-repeat center top; background-size: contain;}
.allDayPackage.card03 .cardPageChange li.next{background: url(/common/images/07_model/day03_pageChange_right.png) no-repeat center top; background-size: contain;}

.allDayPackage.card04 .cardPageChange li.prev{background: url(/common/images/07_model/day04_pageChange_left.png) no-repeat center top; background-size:contain;}
.allDayPackage.card04 .cardPageChange li.center{background: url(/common/images/07_model/day04_pageChange_center.png) no-repeat center top; background-size: contain;}
.allDayPackage.card04 .cardPageChange li.next{background: url(/common/images/07_model/day04_pageChange_right.png) no-repeat center top; background-size: contain;}






.howtoBuyArea{background: #ffdde6; border-radius: 20px;padding: 0 50px 40px; width: 530px; margin: 0 auto;}
.howtoBuyArea >.inner{ position: relative;padding-top: 110px;}

.image_card{ position: absolute; width: 200px; left: 10px; top: -40px;}
.image_chara{ position: absolute; width: 150px; right: 10px; top: -100px;}

.howtoBuyArea h4{text-align: center; background: #fff; color: #002378; font-size: 140%;font-weight:900;padding: 10px; line-height: 1.2em; border-radius: 100px;}
.howtoBuyArea p{ text-align: center;padding-top: 40px;}
.howtoBuyArea a{ background: #002378 url(/common/images/07_model/logo_trans.png) no-repeat left 20px top 15px; display:;
background-size:50px auto; border-radius: 15px; padding: 20px 40px 20px 90px; color: #fff; font-size: 120%; font-weight: 900;}
.howtoBuyArea a:hover{ opacity: 0.8;}
.allDayPackage.card01 .howtoBuyArea{ background: #ffdde6;}
.allDayPackage.card02 .howtoBuyArea{ background: #ffe6b9;}
.allDayPackage.card03 .howtoBuyArea{ background: #b9dcff;}
.allDayPackage.card04 .howtoBuyArea{ background: #d7f0e1;}



@media(max-width:750px){
.howtoBuyArea{width: 530px; }

.howtoBuyArea h4{font-size: 110%;}


}



@media(max-width:750px){


}



@media(max-width:750px){


}



@media(max-width:750px){


}



@media(max-width:750px){


}