@charset "utf-8";

/* -------------------------------------------------- */
/*  news
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    #topbox0 {
        width: 100%;
    }
    .toppad10 {
        padding: 0;
    }
    #infolist.child {
        margin-top: 0 !important;
    }
    #pg {
        margin: 0;
        line-height: 1.5;
    }
    #title_syousai0 {
        position: inherit;
        background: none;
        width: 100%;
        height: auto;
    }
    #title_syousai, .title_syousai {
        display: block;
        position: inherit;
        left: 3%;
        top: 112px;
        font-weight: bold;
        border: 1px solid #1e329f;
        padding: 0.5em 0.25em 0.5em 0.5em;
        margin: 0 auto;
        line-height: 1;
    }
    table[width="1000"] {
        width: 100%;
        margin: 0 auto;
    }
    table[cellpadding="10"] td, table[cellpadding="5"] td {
        padding: 0;
    }
    .nokaigyo {
        white-space: normal;
    }
}

/* -------------------------------------------------- */
/*  ridelist
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    img[alt="【写真付き案内あり】"] {
        height: 1em;
        width: auto;
    }
}

/* -------------------------------------------------- */
/*  ridedetail
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    img[alt="【写真付き案内あり】"] {
        height: 1em;
        width: auto;
    }
    .img50 figure {
        width: 100%;
    }
    .img50 figure img {
        width: 100%;
    }
    .zentai {
        margin-bottom: 0;
    }
    .zentai:not(:first-child) {
        margin-top: 2em;
    }
    .zentai iframe, .zentai figure, #station div figure {
        margin: 1em 0 0 0;
    }
    .zentai figure figcaption, #station div figure figcaption {
        line-height: 1.5em;
    }
    .zentai figure span, #station div figure span, #station div p span {
        line-height: 1.5em;
        width: 1.5em;
    }
}

/* -------------------------------------------------- */
/*  delay
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    .delay_wrap {
        width: 94%;
        margin: 0 auto 2em;
    }
}

/* -------------------------------------------------- */
/*  payment
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    form > #readbackwhite {
        width: 94%;
        margin: 0 auto;
    }
    #pg h2 {
        margin-top: 0;
        margin-bottom: 0;
    }
    #pg h2.mgn_top {
        margin-top: 1em;
    }
    #pg h2.mgn_bottom {
        margin-bottom: 1em;
    }
    #pg h3 {
        margin-top: 1em;
        margin-bottom: 1em;
    }
    table[summary="お支払い期限"] {
        border: 0;
        margin-bottom: 2em;
    }
    table[summary="お支払い期限"] tr:nth-child(1) {
        display: none;
    }
    table[summary="お支払い期限"] tr:nth-child(2) td:nth-child(1) {
        display: none;
    }
    table[summary="お支払い期限"] tbody tr th, table[summary="お支払い期限"] tbody tr td {
        border: 0;
        display: block;
        text-align: left;
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:before {
        display: block;
        border-left: 5px solid #1e329f;
        padding-left: 0.5em;
        margin: 1em 0 0.5em;
        color: #1e329f;
        font-weight: bold;
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(2):before {
        margin-top: 0;
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(2):before {
        content: "ご予約日がご出発4日前まで";
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(3):before {
        content: "ご予約日がご出発3日前";
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(4):before {
        content: "ご予約日がご出発2日前";
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(5):before {
        content: "ご予約日がご出発前日";
    }
    table[summary="お支払い期限"] tbody tr:nth-child(2) td:nth-child(6):before {
        content: "ご予約日がご出発当日";
    }
    table[summary="お支払い期限"] tbody tr th br, table[summary="お支払い期限"] tbody tr td br {
        display: none;
    }
    table[summary="コンビニ決済"] {
        margin-bottom: 4em;
    }
    table[summary="コンビニ決済"] img {
        width: auto;
    }
    table[summary="コンビニ決済"] hr {
        width: 100%;
    }
    table[summary="コンビニ決済"] td {
        width: 33.3%;
    }
    table[summary="コンビニ決済"] tr:nth-child(1) td img,
    table[summary="コンビニ決済"] tr:nth-child(4) td img,
    table[summary="コンビニ決済"] tr:nth-child(7) td img,
    table[summary="コンビニ決済"] tr:nth-child(10) td img {
        max-height: 50px;
    }
    img[alt="クレジットカード"] {
        width: auto;
    }
}

/* -------------------------------------------------- */
/*  chartered
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td {
        display: block;
        width: 100%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] {
        padding: 0.5em 0;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] {
        padding: 0;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input {
        width: 97.5%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > select {
        width: 100%;
        max-width: 100%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input[name="ctr_mail2"],
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input[name="ctr_mail3"] {
        width: 43.2%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ff0000"] {
        display: none;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] > p + table[bgcolor="#cccccc"] td[bgcolor="#ff0000"] + td {
        color: red;
        font-weight: 900;
    }
}

/* -------------------------------------------------- */
/*  contact
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td {
        display: block;
        width: 100%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] {
        padding: 0.5em 0;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] {
        padding: 0;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input {
        width: 97.5%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > select {
        width: 100%;
        max-width: 100%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input[name="ctr_mail2"],
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > input[name="ctr_mail3"] {
        width: 43.2%;
    }
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > select[name="lost_date_y"],
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > select[name="lost_date_m"],
    #pg > #title_syousai0 + br + div[class="pad10 black"] br + table[bgcolor="#cccccc"] td[bgcolor="#ecedf7"] + td[bgcolor="white"] > select[name="lost_date_d"] {
        width: 26%;
        max-width: 26%;
    }
}

/* -------------------------------------------------- */
/*  bustype_3column
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    #three_column {
        width: 94% !important;
        margin: 0 auto !important;
    }
    #three_column .wrap,
    #three_column .wrap .blueback .flexbox,
    #three_column .wrap .blueback .child01,
    #three_column .wrap .blueback .child01 .wrap02 .howto {
        width: calc(100% - 20px) !important;
    }
    #three_column .wrap {
        padding: 10px !important;
    }
    
    #three_column .wrap .blueback .flexbox,
    #three_column .wrap .blueback .child01 .wrap01,
    #three_column .wrap .blueback .child01 .wrap02,
    #three_column .wrap .blueback .child01 .wrap03 {
        max-height: initial !important;
    }
    #three_column .wrap .blueback .child01 .wrap02 {
        margin: 0 !important;
    }
    #three_column .wrap .blueback .child01 .wrap02 p:first-of-type {
        width: 100%;
    }
    #three_column img {
        width: 100%;
    }
    #three_column .badge img {
        width: 75px;
    }
    #three_column .wrap .blueback .child01 .wrap01 .text,
    #three_column .wrap .blueback .child01 .wrap02 .text {
        width: calc(100% - 20px) !important;
        padding: 10px !important;
    }
    #three_column .wrap .blueback .child01 .wrap01 .toku01,
    #three_column .wrap .blueback .child01 .wrap01 .toku02 {
        width: 100%;
    }
    #three_column .wrap .blueback .child01 .wrap02 .howto {
        margin: 0 !important;
        flex-wrap: wrap;
    }
    #three_column .wrap .blueback .child01 .wrap02 .httext {
        padding: 0 !important;
        margin-top: 5px;
    }
    #three_column .wrap .blueback .c2title {
        margin-top: 40px !important;
    }
    #three_column .wrap .blueback .child01 .wrap05 {
        margin-bottom: 10px;
    }
    #three_column .wrap .blueback .child01 .wrap04 p:first-of-type,
    #three_column .wrap .blueback .child01 .wrap05 p:first-of-type {
        width: 120px;
        max-width: 120px;
    }
}

/* -------------------------------------------------- */
/*  covid19
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    .covid_wrap {
        width: 94%;
        font-size: 11px;
    }
    .covid_title {
        font-size: 15px !important;
        margin: 0 0 10px !important;
        line-height: 2 !important;
    }
    .covid_wrap .covid_head_text img {
        max-width: 154px;
    }
    .covid_back_blue {
        padding: 2em 0 !important;
        margin-bottom: 0 !important;
    }
    .covid_heading {
        font-size: 13px !important;
        line-height: 2 !important;
    }
    .covid_flex {
        flex-wrap: wrap;
        margin-top: 1.25em !important;
    }
    .covid_flex div {
        margin: 0 !important;
        width: 100%;
    }
    .covid_flex img {
        width: 100% !important;
        margin-top: 1em;
    }
    .covid_small {
        font-size: 11px !important;
    }
    .covid_flex div[name="this"] {
        flex-direction: column;
        margin-top: 1em !important;
    }
    .covid_flex iframe {
        width: 100% !important;
        height: 200px;
    }
    .covid_back_gray {
        padding: 2em 0 !important;
    }
    .covid_flex span[name="fSize11"] {
        font-size: 11px !important;
    }
}

/* -------------------------------------------------- */
/*  campaign003
/* -------------------------------------------------- */
/* SP用のメディアクエリ */
@media screen and (max-width: 767px){
    #camback_osaka {
        width: 100%;
        height: auto;
    }
    #cam_osaka {
        width: 94%;
        height: auto;
    }
    #cam_osaka img {
        width: 100%;
        height: auto;
        margin: 0.5em 0;
    }
    #cam004 {
        display: none;
    }
    #cam005::before {
        display: inline-block;
        content: "SHB 大阪⇔鳥取の特徴";
        background: #1e329f;
        color: #fefefe;
        border-radius: 15px;
        padding: 0.5em 1em;
        margin: 1em 0;
    }
    #cam005 {
        width: 100%;
        background: #fafbfe;
    }
    #cam005_txt {
        padding: 1em;
    }
    #cam005_txt .leftpad80.f16.line150,
    #cam005_txt .leftpad60.f16.line150 {
        padding: 0;
    }
    #cam005_txt img[src="images/text_02_o.png"],
    #cam005_txt img[src="images/text_03.png"] {
        margin-top: 2em;
    }
    #cam005_txt img.photo {
        margin-bottom: 1em;
    }
    #cam005_txt .textright {
        text-align: left;
    }
    #cam005_txt #unkou001,
    #cam005_txt #unkou003 {
        display: none;
    }
    #cam005_txt #unkou002 {
        width: 100%;
    }
    #unkou002 {
        background: none;
    }
    #unkou002_txt::before {
        display: inline-block;
        content: "運行スケジュール";
        background: #1e329f;
        color: #fefefe;
        border-radius: 15px;
        padding: 0.5em 1em;
        margin: 1em 0;
    }
    #unkou002_txt {
        padding: 0;
    }
    #unkou002_txt table {
        width: 100%;
    }
    #unkou002_txt table td {
        padding: 0.25em 0.5em;
    }
    #unkou002_txt table tr td:nth-child(1),
    #unkou002_txt table tr td:nth-child(1) img {
        width: 38px;
        padding: 0;
    }
    #unkou002_txt table tr td:nth-child(2) {
        width: calc(100% - 38px);
    }
    #unkou002_txt table tr td:nth-child(3) {
        display: none;
    }
    #cam005 .leftpad50.line150 {
        padding: 1em;
    }
    #cam005 .leftpad25.line150 {
        padding: 0;
    }
    #cam006 {
        display: none;
    }
}