.d3_wrap{}
.d3_wrap img{max-width: 100%;}
.d3_wrap h3{letter-spacing: unset;padding: 0;}

.d3_header{
width: 100%;
height: 500px;
position: relative;
background-color: #0e142e;
background-image: url(/bus-list/dendouseat3/img/header_backshell_seat.jpg);
background-repeat: no-repeat;
background-position: right 10% top;
/*background-size: cover;*/
overflow: hidden;
}
.d3_top_wrap{
width: 1100px;
transform: translate(-50%, -50%);
position: absolute;
top: 40%;
left: 50%;
}

.d3_top{
color: #fff;
width: 610px;
font-size: 16px;
box-shadow: 0px 0px 20px rgba(256, 256, 256, 1);
padding: 1em 1.5em;
background: rgba(0, 0, 0, 0.1);
}
.d3_top h2{
font-size: 2.3em;
color: #f2e5be;
}
.d3_top h3{
font-size: 2em;
padding: 0 0 0.6em 2em;
text-align: left;
color: #f6f0dd;
}
.d3_top p{line-height: 1.7;}
.flex_main {
width: 1100px;
margin: 0 auto;
font-size: 16px;
display: flex;
flex-wrap: wrap;
}

@media (max-width:767px){
.d3_header{
background-size: 130%;
background-position: right 20% top;
height: 490px;
}
.d3_top_wrap{
width: 100%;
position: unset;
transform: unset;
margin: 0 auto;
}
.d3_top{
width: 94%;
padding: 0.6em 1em;
margin: 54% auto 0;
box-shadow: 0px 0px 12px rgba(256, 256, 256, 1);
background: rgba(0, 0, 0, 0.5);
/*background: none;*/
}
.d3_top h2{font-size: 1.3em;}
.d3_top h3{font-size: 1.2em;padding: 0 0 0.5em 0em;}
.d3_top p{}
.flex_main{width: 96%;}
}

/*h2 ----------------------------*/
.h2_wrap{
width: 100%;
font-size: 16px;
text-align: center;
display: flex;
justify-content: center;
}
h2.h2_point,
h2.h2_ope,
h2.h2_bus,
h2.h2_reco{
font-size: 1.4em;
color: #0e142e;
padding: 0 0 0.3em;
margin: 0 0 1em;
position: relative;
border-bottom: 3px solid;
}
h2.h2_point:before,
h2.h2_ope:before,
h2.h2_bus:before,
h2.h2_reco:before{
position: absolute;
bottom: -3px;
left: 0;
width: 20%;
height: 3px;
content: '';
background: #b49844;
}
h2.h2_reco{color: #fff;}

@media (max-width:767px){
h2.h2_point,h2.h2_ope,h2.h2_bus,h2.h2_reco{font-size: 1.2em;}

}

/*前後を気にせず ----------------------------*/
.d3_point_wrap{padding: 3em 0;}
.d3_point{justify-content: center;}
.p_point{width: 90%;margin-bottom: 2em;}
.point_co{
width: 43%;
margin: 0 2%;
}
.point_co h3{
font-size: 1.2em;
border-bottom: solid 2px #b49844;
width: fit-content;
padding: 0 0.5em;
text-align: center;
margin: 0 0 0.5em 0em;
}
.point_co img{}

@media (max-width:767px){
.d3_point_wrap{}
.d3_point{margin-bottom: 0em;}
.p_point{width: 100%;margin-bottom: 0;}
.point_co{
width: 92%;
margin: 1.5em auto 0;
}
.point_co h3{
font-size: 1em;
width: unset;
text-align: left;
border-bottom: solid 1px #b49844;
padding: 0;
}
.point_co p{}
.point_co img{}
.point_img2{}
}

/*おすすめ ----------------------------*/
.d3_recommen{
padding: 3em 0;
background: linear-gradient(#35458a, #0e142e);
}
.d3_reco{justify-content: space-between;}
/*h2.h2_reco{
font-size: 1.4em;
margin: 0 0 0.7em;
width: 100%;
text-align: center;
color: #f2e5be;
}*/
.reco_co{
width: calc(100% / 4 - 1em);
padding: 0.8em;
margin: 0 0.5em 1em;
border-radius: 6px;
box-shadow: 0px 0px 10px rgba(256, 256, 256, 0.8);
background: rgba(0, 0, 0, 0.1);
/*
background: rgba(256, 256, 256, 0.1);
border: solid 1px #fff;
*/
}
.reco_co h3{
font-size: 1.1em;
text-align: left;
color: #f2e5be;
margin-bottom: 0.3em;
border-bottom: solid 1px;
}
.reco_co p{color: #fff;}

/*搭載 ----------------------------*/
.p_bus{
width: 100%;
margin-bottom: -1em;
text-align: center;
}

@media (max-width:767px){
.d3_recommen{padding: 3em 0 2em;}
.d3_reco{}
.reco_co{width: calc(100% / 1 - 1em);}
.reco_co h3{font-size: 1em;}
.p_bus{text-align: left;margin-bottom: 0em;}
}


/*バスbox ----------------------------*/
.w_bus_lead{
font-size: 1.5em;
font-weight: bold;
margin: 1em 0 0;
}
.w_bus_lead i{
color: #b49844;
margin-right: 0.4em;
font-size: 1.1em;
}
.w_bus_wrap{padding: 2em 0 0;}
.h2_route{
width: 100%;
margin: 2em 0 1em;
padding: 0.5em 0.3em 0.5em;
font-size: 1.4em;
color: #fff;
line-height: 1.2;
border-top: none;
}
.h2_route span.area{
font-weight: normal;
font-size: 0.8em;
margin: 0 0.3em;
}
.h2_route span.place{
font-weight: normal;
font-size: 0.8em;
}

.w_bus_co{
width: calc(100% - 2em);
padding: 1em;
margin: 0 1em 3em;
border-radius: 6px;
border: 1px solid #d9cba1;
align-items: flex-start;
}
.h3_bus_name{
width: 100%;
background: #f1f1f1;
position: relative;
margin-bottom: 1.6em;
}
.h3_bus_name h3{
letter-spacing: unset;
padding: 0.5em 1em 0.3em 7.4em;
text-align: left;
font-size: 1.4em;
}
.h3_bus_name p{
position: absolute;
top: -8px;
left: -33px;
padding: 0.5em 2em;
font-size: 1.2em;
font-weight: bold;
transform: rotate(-8deg);
color: #fff;
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}
.h3_bus_name p.gold{background: #b49844;}
.h3_bus_name p.pink{background: #dd6288;}

/*swiper -------------------*/
.w_bus_img{
width: 34%;
margin: 0 4% 0 2%;
}
.w_bus_img img{max-width: 100%;}
.swiper-pagination {
text-align: center;
margin-top: 0.5em;
position: unset;
}
.swiper-pagination .swiper-pagination-bullet {width: 10px;height: 10px;}
.swiper-pagination .swiper-pagination-bullet-active {background: #b49844;}
/*swiper -------------------*/

.w_bus_text{width: 60%;}
.img_logo{}
.logo_gf{width: 40%;}
.logo_plu_g{width: 59%;}
.logo_vip{width: 40%;}
.w_bus_text h4{
font-size: 1.1em;
margin: 1em 0 0.5em;
font-weight: normal;
border-bottom: solid 1px #d9cba1;
}
.w_bus_text h4 span{
background: #252d7f;
color: #fff;
padding: 0.1em 0.8em;
margin-right: 0.6em;
}
ul.w_bus_list{
width: 100%;
list-style: disc;
padding-left: 1.2em;
}
.w_bus_list li{margin-bottom: 0.3em;}
.w_bus_text .price{
color: #c00;
font-weight: bold;
text-align: right;
margin: 0 0.5em 0 0;
}
.w_bus_text .price em{
font-style: normal;
font-size: 1.5em;
}
.w_bus_text .link_btn{
width: 60%;
margin: 1em auto 0;
}
.w_bus_text .link_btn a{
padding: 0.6em 1em 0.5em;
display: block;
position: relative;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 1.1em;
border-radius: 6px;
}
.w_bus_text .link_btn a::after {
font-family: "Font Awesome 5 Free";
position: absolute;
color: #fff;
content: "\f054";
font-weight: bold;
right: 1em;
bottom: 0.7em;
}
.w_bus_text .link_btn a.gold{background: #b49844;}
.w_bus_text .link_btn a.pink{background: #dd6288;}

.w_bus_co .wom_btn{
width: 100%;
margin: 1.5em auto 0;
}
.w_bus_co .wom_btn a{
padding: 0.4em 1em 0.3em;
display: block;
position: relative;
text-align: center;
font-size: 1em;
border-radius: 6px;
text-decoration: none;
background: #f7f4ec;
color: #b49844;
}
.w_bg{
padding: 2em 0 0.5em;
margin-bottom: 3em;
}

@media (max-width:767px){
.h2_route{margin: 1em 0 1.5em;font-size: 1.2em;padding: 0.7em 0.3em 0.7em;}
.w_bus_co{padding: 0.7em 0.7em 1.2em;width: 94%;margin: 0 auto 3em;}
.h3_bus_name{margin-bottom: 0.6em;}
.h3_bus_name h3{font-size: 1.1em;padding: 0.5em 0.5em 0.3em 0.5em;}
.h3_bus_name p{
font-size: 1em;
padding: 0.4em 1em;
top: -24px;
transform: rotate(9deg);
left: unset;
right: -6%;
}
.w_bus_img{width: 90%;margin: 0 auto 2em;}
.w_bus_text{width: 100%;}
.logo_gf{width: 60%;margin: 0 20%;}
.logo_plu_g{width: 70%;margin: 0 15%;}
.logo_vip{width: 60%;margin: 0 20%;}
.w_bus_text h4{font-size: 1em;}
.w_bus_text h4 span{
display: block;
font-size: 0.9em;
width: fit-content;
padding: 0.3em 0.8em;
margin: 0 0 0.4em;
}
.w_bus_text .link_btn{width: 98%;}
.w_bus_text .link_btn a{font-size: 1.0em;padding: 0.8em 1em 0.7em;}
.w_bus_co .wom_btn{margin: 1em auto 0;width: 90%;}
}


/*ボタン操作 ----------------------------*/
.d3_operation{
/*background: #f7f4ec;*/
background: #f0f0f0;
padding: 3em 0;
}
.d3_ope{align-items: center;}
.d3_ope_co1{
width: 48%;
margin-right: 3%;
}
.d3_ope_co1 p{margin-bottom: 1em;}
.ope_btn{width: 50%;}
.d3_ope_co2 {
position: relative;
width: 49%;
aspect-ratio: 600 / 400;
overflow: hidden;
}

@media (max-width:767px){
.d3_ope_co1{margin: 0 0 1em;width: 100%;}
.ope_btn{margin: 0 25%;}
.d3_ope_co2{width: 90%;margin: 0 5%;}
}

/*anime -------------------*/

.d3_ope_co2 img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}

/* 画像01 */
.image01 {z-index: 1;}

/* 画像02 */
.image02 {
z-index: 2;
opacity: 0;
animation: image02 13s infinite;
}

/* 画像03 */
.image03 {
z-index: 3;
opacity: 0;
animation: image03 13s infinite;
}

/* 画像04 */
.image04 {
z-index: 4;
opacity: 0;
animation: image04 13s infinite;
}

/* 画像02：2～4秒でフェードイン */
@keyframes image02 {
0%,15.38% {opacity: 0;}
30.77% {opacity: 1;}
62% {opacity: 1;}
63% {opacity: 0;}
100% {opacity: 0;}
}

/* 画像03：4～6秒でフェードイン */
@keyframes image03 {
0%,30.77% {opacity: 0;}
46.15% {opacity: 1;}
62% {opacity: 1;}
63% {opacity: 0;}
100% {opacity: 0;}
}

/* 画像04：6～8秒でフェードイン → 11～13秒でフェードアウト */
@keyframes image04 {
0%,46.15% {opacity: 0;}
61.54%,84.62% {opacity: 1;}
100% {opacity: 0;}
}