@charset "utf-8";
#lp_main_wrap{
margin: 0 auto;
font-size: 1.4em;
}
#lp_main_wrap img{max-width: 100%;}

/*--- カバー画像 ---------------------------------------------------------------------------------------------------*/
.lp_top_wrap {
width: 100%;
height: 450px;
position: relative;
overflow: hidden;
}
.sliding {
height: 450px;
width: 100%; /* ブラウザ幅に合わせる */
background: url("./img/lp_top.jpg");
background-size: auto 100%; /* 高さをコンテナに合わせる */
background-position: 0 0;
animation: slide 100s linear infinite reverse;
}

@keyframes slide {
0%   { background-position: 0 0; }
100% { background-position: -1600px 0; } /* 画像1枚分スライド */
}

/*
.sliding{
height: 450px;
width: 3200px;
animation: slide 100s linear infinite reverse;
background: url("./img/lp_top.jpg") repeat-x;
}
@keyframes slide{
0%{transform: translate3d(0, 0, 0);}
100%{transform: translate3d(-1600px, 0, 0);}
}
*/
.top_wrap{
position: absolute;
width: 850px;
top: 1.5em;
left: 50%;
transform: translate(-50%, 0);
z-index: 1;
background: rgba(23, 73, 117, 0.7);
padding: 3em;

background-image: url("./img/flame_1.png"), url("./img/flame_2.png");
background-repeat: no-repeat, no-repeat;
background-position: top center, bottom -6px center; /* 上下 */
background-size: 100%, 100%; /* 必要に応じて 'contain' や 'cover' に変更 */

border-radius: 10px;
box-shadow: 0px 0px 20px rgb(255, 255, 255);
}
.top_wrap h2{
font-size: 3.8em;
text-align: center;
margin-bottom: 0.3em;
color: #fff;
}
.top_wrap h2 span{
display: block;
font-size: 0.8em;
color: #ff0;
}
.top_wrap p{
font-size: 1.9em;
text-align: center;
color: #fff;
}
.top_bus{
position: absolute;
width: 450px;
transform: translate(-50%, 0);
bottom: -8px;
left: 50%;
z-index: 1;
}
.lp_flex{
width: 1100px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.lp_flex h3{
width: 1080px;
position: relative;
background: #f7f4ec;
margin: 0em 0px 2em 20px;
padding: 0.5em 0px 0.5em 2.5em;
font-size: 1.4em;
color: #666666;
border-radius: 0 5px 5px 0;
}
.lp_flex h3 i{
display: inline-block;
position: absolute;
padding: 0em;
color: white;
background: #b49844;
font-weight: bold;
text-align: center;
width: 60px;
height: 60px;
top: -13%;
left: -0.7em;
border: solid 3px white;
border-radius: 10px;
font-size: 1.7em;
}

/*アイコン--------------------------------------*/
#lp_main_wrap .fa-map-marker-alt{
margin-right: 0.3em;
margin-left: 0.1em;
font-weight: bold;
}
#lp_main_wrap .fa-bus{line-height: 1.7em;}
#lp_main_wrap .fa-arrow-right{color: #ff7070;
}
.lp_flex.top{
width: 900px;
margin: 0em auto 1em;
align-items: center;
justify-content: space-between;
}
.lp_flex.top img{width: 36%;}
.lp_flex.top p{
width: 60%;
font-size: 1.3em;
text-align: center;
line-height: 1.7;
background: #f1f1f1;
padding: 1em;
}
.small_t{font-size: 0.8em;}

/*運行ルート--------------------------------------*/
.lp_flex.root{
justify-content: space-between;
align-items: start;
margin-bottom: 5em;
}
.root_wrap{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
padding: 0 1em 0 3em;
}
.root_wrap_bottom{margin-bottom: 4em;}
.root_img{
border: solid 5px #dcdcdc;
padding: 3px;
width: 300px;
order: 1;
}
.root_img img{max-width: 100%;}
.root_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 67%;
order: 2;
}
figure{width: 48%;}
figcaption{
font-size: 1.3em;
font-weight: bold;
margin-bottom: 5px;
}
figcaption .fa-bus{margin-right: 0.3em;}
figcaption .fa-arrow-right {
color: #ff7070;
margin: 0 0.3em;
}
.root_box table{
width: 100%;
background-color: #fff;
border-collapse: collapse;
border: solid 1px #cccccc;
}
.root_box table a{text-decoration: underline;line-height: 1.3;}
.root_box table a:hover{text-decoration: none;}
.root_box th,td{
padding: 0.9em 0.2em;
text-align: center;
vertical-align:middle;
border-bottom: solid 1px #ccc;
}
.root_box th{width: 35%;}
.root_box th.ore,.root_box td.ore{background-color: #f1f1f1;}
.root_box th.blue,.root_box td.blue{background-color: #ebf6f9;}
.root_box td .fa-arrow-right{font-size: 1.4em;transform: rotate(90deg);}

.lp_btn.root{
width: 50%;
order: 3;
text-align: center;
margin: 2em 25% 0em;
}

.lp_btn a{
position: relative;
font-weight: bold;
font-size: 1.3em;
text-align: center;
border-radius: 10px;
color: #fff;
text-decoration: none;
display: block;
background: #b49844;
padding: 1.0em 2.5em 1.0em 1.0em;
}
.lp_btn a:after{
font-family: "Font Awesome 5 Free";
position: absolute;
font-size: 1.6em;
color: #ffffff;
content: "\f061";
transform: translate(0, -50%);
right: 0.5em;
top: 50%;
}

/* シート写真------------------------------------------- */
.lp_flex.detail{margin-bottom: 2em;}
.cp_cssslider { position: relative; width: 100%; font-size: 0; margin: 0 auto 0 auto;}
.cp_cssslider > .img, .cp_cssslider > .img img { left: 0; transition: all 0.5s; }
.cp_cssslider > .img { position: absolute; width: 100%; top: 0; left: 0; text-align: left; }
.cp_cssslider > .img img { width: 100%; top: 0; box-shadow:0px 0px 5px 0px rgba(0,0,0,0.3);}
.cp_cssslider .text { position: absolute; bottom: 0; background: #ffffffb3; padding: 0.5em; width: 100%;}
/* サムネイル */
.cp_cssslider label {
width: calc(100% / 10 - 2px);
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
transition: all 0.5s ease;
padding: 0;
margin-left: 2px;
}
.cp_cssslider label:hover { opacity: 0.9; }
.cp_cssslider label img { width: 100%; }
.cp_cssslider input[name='cp_switch'] { display: none; }
.cp_cssslider input[name='cp_switch']:checked + label { border: 2px solid #B49844; opacity: 1; }
.cp_cssslider input[name='cp_switch'] ~ .img { opacity: 0; }
.cp_cssslider input[name='cp_switch']:checked + label + .img { opacity: 1; }
.cp_cssslider { position: relative; width: 90%; padding-top: 36%;}
.cp_cssslider label { margin-bottom: 10px; }
.cp_cssslider > .img { width: 50%; left: 0; }
.cp_cssslider > .img img { margin-top: 0;}
  
.bus_info_text{
position: absolute;
top: 0;
right: 0;
font-size: 16px;
width: 45%;
padding-top: 0;
}
.bus_info_text h4{
font-size: 1.3em;
margin-bottom: 1em;
transform: rotate(-4deg);
color: #ff6a48;
border-bottom: double;
display: inline-block;
padding: 0 0.5em;
}
.bus_info_text h4 i{}
.bus_info_text .list-8 li span{
font-weight: bold;
font-size: 1.1em;
background: linear-gradient(transparent 60%, #ffd9d9 60%);
}

.lp_flex.detail_info{
border: solid 7px #ebdfbf;
width: 1000px;
margin: 0 auto;
padding: 1em 2em;
justify-content: space-between;
border-radius: 10px;
}
.detail_info_text{
font-size: 1.2em;
width: 66%;
}
.detail_info_text h4{
font-size: 1.3em;
transform: rotate(-4deg);
margin: 0em 0 0.5em 0em;
color: #89690b;
padding: 0.3em 0.6em 0em;
background: linear-gradient(transparent 65%, #ffd9d9 65%);
display: inline-block;
}
.detail_info_text p{margin-bottom: 0.7em;}
.detail_info_img{width: 33%;}

.lp_btn.detail {
width: 50%;
text-align: center;
margin: 2em 25% 0em;
}

section.bg{
background: #f7f4ec;
margin-top: 3em;
padding: 3em 0;
}

.lp_flex.info_b{
background: #fff;
padding: 1.5em 1.5em;
border-radius: 10px;
justify-content: space-between;
align-items: center;
}
.info_b h3{
background: none;
position: unset;
width: 100%;
margin: 0 0 1.5em;
padding: 0;
border-radius: unset;
text-align: center;
}
.info_b h3 span{
padding: 0.3em 0.7em 0.2em;
margin-right: 0.3em;
background: #ff6a48;
color: #fff;
}
.lp_flex h3 i.fa-exchange-alt{
color: #ff6a48;
position: unset;
background: unset;
width: auto;
height: auto;
border: none;
font-size: 1em;
padding: 0 0.3em;
}
.info_b_text{
width: 65%;
text-align: center;
}
.info_b_text p{
font-size: 1.2em;
line-height: 1.7;
}
.info_b_img{width: 34%;}


@media screen and (max-width: 767px) {
.lp_flex{width: 98%;}

.lp_top_wrap {height: 370px;}
.sliding{height: 370px;}

.top_wrap{
width: 95%;
padding: 2em 1.5em 1.5em;
background-position: top center, bottom center;
}
.top_wrap h2{font-size: 7vw;}
.top_wrap h2 span{}
.top_wrap p{font-size: 1.3em;}
.top_bus{width: 70%;bottom: -4px;}

.lp_flex h3{
margin: 0 2px 20px 1.6em;
padding: 0.5em 0px 0.3em 2.3em;
font-size: 1.2em;
width: 100%;
}
.lp_flex h3 i{
width: 50px;
height: 50px;
top: -17%;
left: -1.0em;
font-size: 1.5em;
}

/*アイコン--------------------------------------*/
#lp_main_wrap .fa-map-marker-alt{}
#lp_main_wrap .fa-bus{}
#lp_main_wrap .fa-arrow-right{}

.lp_flex.top{width: 100%;margin: 1.5em auto 1.5em;}
.lp_flex.top img{display: none;}
.lp_flex.top p{
width: 98%;
margin: 0 auto;
font-size: 1.2em;
padding: 0 1em;
background: none;
line-height: 1.9;
}


/*運行ルート--------------------------------------*/
.lp_flex.root{margin-bottom: 3em;}
.root_wrap{width: 93%;margin: 0 auto;padding: 0;}
.root_wrap_bottom{}
.root_img{width: 70%;border: solid 3px #dcdcdc;padding: 2px;margin: 0 auto 30px;}
.root_box{width: 100%;}
figure{width: 100%;margin-bottom: 2em;}
.nt_box table{width: 100%;font-size: 0.8em;margin-bottom: 30px;}
.nt_box th,td{padding: 0.6em;text-align: center;vertical-align:middle;}
.nt_box th{line-height: 1.4em;width: 30%;}
figcaption{}
figcaption .fa-bus{}
figcaption .fa-arrow-right {}
.root_box th.ore,.root_box td.ore{}
.root_box th.blue,.root_box td.blue{}
.root_box td.arrow{}
.lp_btn.root{width: 80%;margin: 1em auto 0em;}
.lp_btn a{font-size: 1.2em;padding:0.7em 2.2em 0.7em 1.0em;}
.lp_btn a:after{font-size: 1.3em;}

/* シート写真------------------------------------------- */
.lp_flex.detail{}
.cp_cssslider {}
.cp_cssslider .img p {}
.cp_cssslider .title {}
.cp_cssslider .star {}
.cp_cssslider > .img, .cp_cssslider > .img img {}
.cp_cssslider > .img {width: 100%;}
.cp_cssslider > .img img {}
.cp_cssslider .text {}
/* サムネイル */
.cp_cssslider label {}
.cp_cssslider label img {}
.cp_cssslider input[name='cp_switch'] {}
.cp_cssslider input[name='cp_switch']:checked + label {}
.cp_cssslider input[name='cp_switch'] ~ .img {}
.cp_cssslider input[name='cp_switch']:checked + label + .img { }
.cp_cssslider {}
.cp_cssslider label {}

.cp_cssslider {padding-top: 74%;padding-bottom: 2em;width: 95%;}
.cp_cssslider label { width: calc(100% / 4 - 2px); }
.cp_cssslider > .img { text-align: left; }
.cp_cssslider > .img img { width: auto; max-height: 370px; margin-top: 0;}
  
.bus_info_text{width: 100%;position: unset;margin-top: 1.5em;}
.bus_info_text h4{margin-bottom: 0.5em;font-size: 1.2em;}
.bus_info_text h4 i{}
.bus_info_text .list-8 li span{font-size: 1em;}

.lp_flex.detail_info{width: 90%;border: solid 4px #ebdfbf;padding: 0.2em 1em 1em;}
.detail_info_text{font-size: 1.1em;width: 100%;}
.detail_info_text h4{}
.detail_info_text p{}
.detail_info_img{width: 85%;margin: 1.3em auto 0;}

.lp_btn.detail {width: 80%;margin: 2em auto 0em;}

section.bg{}

.lp_flex.info_b{width: 90%;
padding: 1.3em;}
.info_b h3{
margin: 0 0 0.7em;
padding: 0;
line-height: 1.6;
text-align: left;
}
.info_b h3 span{
display: block;
width: fit-content;
}
.lp_flex h3 i.fa-exchange-alt{}
.info_b_text{width: 100%;text-align: left;}
.info_b_text p{
font-size: 1.1em;
line-height: unset;
text-align: left;
margin-bottom: 1em;
}
.info_b_img{width: 85%;margin: 0 auto;}

}