@charset 'UTF-8';
@import url("reset.css");
@import url("base.css");

/*====================================================
------------------------------------------------------
    main.css
------------------------------------------------------
====================================================*/

/* --------------------------------------------------
    Common
-------------------------------------------------- */

#wrap-container { max-width: 1250px!important; padding: 0!important;}
.rcrumbs-list-cover { padding-left: 20px;}
.cp-010 .ttl-text { display: none;}


.cp-010 { max-width: 1200px; margin:10px auto 50px auto;}

.cp-010 a:hover { opacity: .5; -webkit-transition: all 0.5s; transition: all 0.5s;}

.cp-010 h2 { display: block; font-size: 2.4rem; text-align: center; line-height: 1.5em;}
.cp-010 h2 span { font-size: 1.5rem;}
.cp-010 h3 { font-size: 2rem; text-align: center; font-weight: 100;}
.cp-010 h4 { font-size: 1.8rem; text-align: center; font-weight: 100;}

.cp-010 .rl-line { position: relative; display: block; padding: 0 55px;}
.cp-010 .rl-line:before, .cp-010 .rl-line:after {
content: ''; position: absolute; top: 50%; display: inline-block; width: 32%; height: 3px; background-color: #00B3ED;}
.cp-010 .rl-line:before { left:0;}
.cp-010 .rl-line:after { right: 0;}

@media screen and (max-width: 767px) {
.cp-010 { width: 100%; margin: 30px auto; padding: 0 10px;}
.cp-010 .rl-line:before, .cp-010 .rl-line:after { width: 40px;}

.cp-010 h2 { display: block; font-size: 2rem; text-align: center; line-height: 1.5em;}
.cp-010 h2 span { font-size: 1.2rem;}
.cp-010 h3 { font-size: 1.8rem; text-align: center; font-weight: 100;}
.cp-010 h4 { font-size: 1.6rem; text-align: center; font-weight: 100;}
}

/* --------------------------------------------------
    Main Visual
-------------------------------------------------- */
.mainvisual { position: relative;}
.mainvisual h1 { position: absolute; top: 50%; left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
text-align: center; z-index: 10;
}
.mainvisual h1 { width: 695px; height: 435px;}
.mainvisual h1 img{
/*width:50vw;*/
position: absolute;
top: 50%; left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform : translate(-50%,-50%);
transform : translate(-50%,-50%);
}

.bn_goodday { display: block; max-width: inherit; margin:50px auto;}
.bn_tabisaku { display: block; margin: 30px auto;}

@media screen and (max-width: 767px) {
.swiper-container { height: 400px!important;}
.swiper-container .swiper-slide { height: 400px!important;}
.mainvisual h1 img{width:80vw;}
.bn_goodday { width: 50%; margin: 30px auto;}
.bn_tabisaku { width: 80%; margin: 30px auto;}
}


/* --------------------------------------------------
    Tab Accordion
-------------------------------------------------- */
.cp-010 .resp-tabs-list { padding: 15px 0 0 0;}
.cp-010 .resp-tabs-list li { display: block; text-align: center; font-size: 1.8rem; padding: 13px 35px 13px 15px; margin: 0; list-style: none; cursor: pointer;	border: 3px solid #00B3ED; position: relative;}
.cp-010 .resp-tabs-list li:after { font-family: "Font Awesome 5 Free"; content: "\f13a"; font-weight: bold; position: absolute; top: 25%; right: 10px; color: #00B3ED;}
.cp-010 .resp-tabs-list li:hover { opacity: .6;-webkit-transition: all 0.5s; transition: all 0.5s;}

.cp-010 .resp-tabs-container { padding: 10px;}

.cp-010 .resp-tab-content { display: none; padding: 0 10px 15px 10px;}

.cp-010 .resp-tabs-list li.resp-tab-active { background: #00B3ED; color: #fff; padding: 13px 35px 13px 15px;}
.cp-010 .resp-tabs-list li.resp-tab-active:after { font-family: "Font Awesome 5 Free"; content: "\f621"; font-weight: bold; position: absolute; top: 25%; right: 10px; color: #FDD401;}
.cp-010 .resp-tabs-list li.resp-tab-active:hover { opacity: 1;}

.cp-010 .resp-tab-content.resp-tab-content-active { display: block;}

/*-----------Accordion styles-----------*/
.cp-010 h3.resp-accordion { font-size: 1.4rem; border: 2px solid #00B3ED; margin: 0 0 5px 0; padding: 10px 15px ;position: relative; cursor: pointer; padding: 5px; display: none;}
.cp-010 h3.resp-accordion:after { font-family: "Font Awesome 5 Free"; content: "\f13a"; font-weight: bold; position: absolute; top: 20%; right: 10px; color: #00B3ED;}
.cp-010 h3.resp-tab-active { background: #FDD401; color: #fff; }
.cp-010 h3.resp-accordion.resp-tab-active { background: #00B3ED !important; color: #fff;position:relative; }
.cp-010 h3.resp-accordion.resp-tab-active:after { font-family: "Font Awesome 5 Free"; content: "\f139"; font-weight: bold; position: absolute; top: 20%; right: 10px; color: #FDD401;}

.cp-010 .resp-easy-accordion .resp-tab-content { margin-bottom: 15px;}
.cp-010 .resp-jfit { width: 100%; margin: 0px;}
.cp-010 .resp-tab-content-active { display: block;}

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

.cp-010 .resp-tab-content.resp-tab-content-active { display: none;}
.cp-010 ul.resp-tabs-list { display: none;}
.cp-010 h3.resp-accordion { display: block;}
.resp-vtabs .resp-tab-content { margin-bottom: 15px; }
.cp-010 .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none;}
.cp-010 .resp-accordion-closed { display:none !important;}

}

/* --------------------------------------------------
    Main Contents
-------------------------------------------------- */

/*head-area*/

.cp-010 .head-area h2 {
font-family: 'Times New Roman', '游明朝体', 'Yu Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝B', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
letter-spacing: .1em; border-top: 5px solid #FDD401; border-bottom: 5px solid #FDD401; padding: .5em 0; margin: 60px 0 30px 0;}

.cp-010 .head-area .col-4-s { display: flex; align-items: center; background: #0C3393; color: #fff; padding: 15px 0;}
.cp-010 .head-area .col-4-s h3 { width: 100%; text-align: center;}
.cp-010 .head-area .col-8-s ul { list-style: none;}
.cp-010 .head-area .col-8-s li { display: block; padding: 0 0 .8em 30px;}
.cp-010 .head-area .col-8-s li.car:before { font-family: "Font Awesome 5 Free"; content: "\f1b9"; font-weight: bold; color: #0C3393; margin-left: -25px; padding-right: 5px; font-size: 1.3em;}
.cp-010 .head-area .col-8-s li.bus:before { font-family: "Font Awesome 5 Free"; content: "\f207"; font-weight: bold; color: #0C3393;margin-left: -25px; padding-right: 5px; font-size: 1.3em;}

@media only screen and (max-width: 767px) {
.cp-010 .head-area h2 { margin: 15px 0;}
.cp-010 .head-area .col-4-s h3 { font-size: 1.4rem;}
.cp-010 .head-area .col-8-s li { line-height: 1.4em;}
}

/*photo-area*/

.cp-010 .photo-area, .cp-010 .hotel-area { font-size: 1.4rem;}
.cp-010 .photo-area p, .cp-010 .hotel-area p { padding-bottom: .8em;}
.cp-010 .photo-area h3, .cp-010 .hotel-area h3 { margin: 0 0 20px 0; border-bottom: 3px dotted #00B3ED; line-height: 75px; font-size: 2.5rem;}
.cp-010 .photo-area h3 img, .cp-010 .hotel-area h3 img  { margin-bottom: -30px;}


.cp-010 .photo-area h4 { font-family: 'Times New Roman', '游明朝体', 'Yu Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝B', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
color: #fff; padding: 0.3em 0.5em; margin: 0 0 10px 0; font-weight: bold;
background: -moz-linear-gradient(to left, rgb(57, 193, 237), #009CCF);
background: -webkit-linear-gradient(to left, rgb(57, 193, 237), #009CCF);
background: linear-gradient(to left, rgb(57, 193, 237), #009CCF);
}


@media only screen and (max-width: 767px) {
.cp-010 .photo-area h3, .cp-010 .hotel-area h3 { font-size: 1.8rem; text-align: center; line-height: normal; margin: 20px 0;}
.cp-010 .photo-area h3 img, .cp-010 .hotel-area h3 img { display: block; margin: 0 auto;}
}

/*hotel-area*/

.cp-010 .hotel-area > div.row { background: -moz-linear-gradient(to top, rgb(217, 244, 253), #fff);
background: -webkit-linear-gradient(to top, rgb(217, 244, 253), #fff);
background: linear-gradient(to top, rgb(217, 244, 253), #fffF); padding: 0 0 10px 0;}
.cp-010 .hotel-area h4 { font-family: 'Times New Roman', '游明朝体', 'Yu Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝B', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
color: #003399; padding: 0.3em 0.5em; margin: 0; font-weight: bold;}

.cp-010 .hotel-area .col-4 > span { font-family: 'Times New Roman', '游明朝体', 'Yu Mincho', 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'HGS明朝B', 'Hiragino Mincho ProN', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;display: block; width: 5em; background: #0c3393; color: #fff; position: absolute; top: 0; left: 0; font-size: 1.4rem; text-align: center; padding: .2em .;}

.cp-010 .hotel-area .btn-input { display:block; width: 97%; line-height: 60px; color: #FFF; text-decoration: none; text-align: center; font-size: 1.6rem; background-color: #f39800; border-radius: 5px; border: none; padding: 0 30px 0 0; -webkit-transition: all 0.5s; transition: all 0.5s; position: relative; cursor: pointer; margin: .3em auto;}
.cp-010 .hotel-area .btn-input:hover{ background-color: #f9c500;}
.cp-010 .hotel-area .btn-input:after { font-family: "Font Awesome 5 Free"; content: "\f138"; font-weight: bold; color: #fff; position: absolute; top: 0; right: 15px; z-index: 10;}

.cp-010 .hotel-area select { width: 100%; border-radius: 5px; border: 1px solid #ddd; padding: .3em .5em; font-size: 1.4rem;}

.cp-010 .hotel-area .btn_detail { display: block; color: #FFF; text-decoration: none; text-align: center; font-size: 1.3rem; background-color: #003399; border-radius: 5px; border: none; padding: .4em 15px .4em .2em; -webkit-transition: all 0.5s; transition: all 0.5s; position: relative; cursor: pointer;}
.cp-010 .hotel-area .btn_detail:after { font-family: "Font Awesome 5 Free"; content: "\f2d2"; font-weight: bold; position: absolute; top: 25%; right: 5px; color: #fff;}

@media only screen and (max-width: 767px) {
.cp-010 .hotel-area .col-4 { margin: 0 auto 15px auto;}
.cp-010 .hotel-area select { padding: .5em;}
}


/*tour-costs*/
.cp-010 .tour-costs { width: 80%; margin: 30px auto; border: 1px solid #333; padding: 0; font-size: 1.4rem;}
.cp-010 .tour-costs h3 { background: #ccc; padding: .5em;}
.cp-010 .tour-costs p { display: block; width: 80%; margin: 15px auto;}

@media only screen and (max-width: 767px) {
.cp-010 .tour-costs, .cp-010 .tour-costs p { width: 90%; font-size: 1.3rem;}
}


/* MultiLink */
.cp-010 .multilink {text-align: center;}
.cp-010 .multilink .blank {width: 15px !important;}
.cp-010 .multilink .btn-multilink {position: relative;cursor: pointer;}
.cp-010 .multilink .btn-multilink ul {position: absolute;width: 100%;padding: 10px 10px 10px 15px;background: #fff;border: 1px solid #eee;text-align: left;top: 105%;left: 0;z-index: 100;display: none;}
.cp-010 .multilink .btn-multilink ul li {padding-left: 1.1em;text-indent: -1.1em;}
.cp-010 .multilink .btn-multilink ul li a{ color:#05336a;}
.cp-010 .multilink .close {border-top: 1px dotted gray;padding-top: 10px;margin-top: 10px;text-align: center;}

.cp-010 .ovtext a:hover {opacity:1;}
.cp-010 .ovtext {line-height: 0;}

.cp-010 .ovtext .caption {
width: 100%;
position:absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
text-align:center;
line-height:1;
color:#fff;
padding: 0 15px;
}
.cp-010 .ovtext .mask {
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.4);
-webkit-transition:all 0.2s ease;
transition:all 0.2s ease;

}
.cp-010 .ovtext:hover .mask {opacity:1;}
.cp-010 .cap-area, .cap-name, .cap-place{display:block;}
.cp-010 .ovtext .caption .cap-area, .ovtext .caption .cap-place {font-size:1.5rem;}
.cp-010 .ovtext .caption .cap-name {font-size:2rem;font-weight:600;margin:1rem 0;}


.cp-010 .row [class^="img"] {
    float: left;
    margin: 0.1rem;
    position: relative;
}
@media only screen and (min-width: 768px) {
.cp-010 .img-5 { width: 19.7%;}
}

/* 191106 */
.cp-010 .expressbus .ico-blank-img, .cp-010 .coupon .ico-blank-img{display:none !important;}
.cp-010 .coupon, .cp-010 .expressbus{color:#fff;background-color:#0c3393;padding:2rem;outline: dashed 2px #fff;outline-offset: -.5em;}

.cp-010 .coupon p{font-size:2rem;text-align:center;}
.cp-010 .coupon p span{font-size:2.5rem;}

.cp-010 .expressbus h2{margin-bottom:1.5rem;}
.cp-010 .expressbus a, .cp-010 .coupon a{color:#fff;}

.goodday{text-align:center;margin-top:20px;}

@media only screen and (max-width: 1024px) {
.cp-010 .expressbus h2{font-size:2rem;}
}