@charset "UTF-8";

body {
  -webkit-text-size-adjust: 100%;
}

#navigation_btn,
#navigation_cover,
#footer_anchor_pagetop {
  display: none;
}

#contents {
  width: auto;
}

#topic_path,
#contents_area,
#back_number {
  width: 1060px;
  margin-right: auto;
  margin-left: auto;
}

.inner {
  width: 1060px;
  margin: 0 auto;
  box-sizing: border-box;
}


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

  #google_search_box,
  #header_ad,
  #topic_path,
  #anchor_pagetop {
    display: none;
  }

  #header_area,
  #header_navi,
  #head_ad_area .inner,
  #header_sns,
  #contents_area,
  #anchor_pagetop,
  #footer_navi,
  .inner {
    width: auto;
  }

  body {
    min-width: 0;
    font-size: 16px;
    font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN W3', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Meiryo', 'メイリオ', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    line-height: 1.5;
  }

  h1, h2, h3, h4, h5, h6,
  th, td {
    font: inherit;
  }

  /* ================================================================

     header

  ================================================================ */

  #header {
    height: auto;
    background: #fff repeat-x;
    background-image: -webkit-linear-gradient(top, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px, #4e7f99 5px, #fff 5px, #fff 63px, #f5f8fa 108px, #fff 108px, #fff 109px, #b8cbd6 109px);
    background-image: -moz-linear-gradient(top, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px, #4e7f99 5px, #fff 5px, #fff 63px, #f5f8fa 108px, #fff 108px, #fff 109px, #b8cbd6 109px);
    background-image: linear-gradient(to bottom, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px, #4e7f99 5px, #fff 5px, #fff 63px, #f5f8fa 108px, #fff 108px, #fff 109px, #b8cbd6 109px);
  }

  #header::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 50px;
    height: 200px;
  }

  #header h1,
  #header #navigation {
    float: none;
  }

  #header h1 {
    width: 158px;
    margin: 0 auto;
    padding: 16px 0 10px;
  }

  #header h1 img {
    width: 100%;
    margin: 0;
  }

  /* navigation */

  #header #navigation {
    position: fixed;
    top: 0;
    right: -245px;
    z-index: 9999;
    width: auto;
    height: 100%;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    transition: transform .3s;
  }

  #navigation_body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 240px;
    height: 100%;
    border-left: 5px solid transparent;
    overflow: auto;
    background: #fff repeat-y border-box;
    background-image: -webkit-linear-gradient(left, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px);
    background-image: -moz-linear-gradient(left, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px);
    background-image: linear-gradient(to right, #79a7c0 3px, #a7c5d5 3px, #a7c5d5 4px, #4e7f99 4px);
    background-size: 5px;
    -webkit-overflow-scrolling: touch;
  }

  #navigation_btn {
    display: block;
    position: absolute;
    top: 16px;
    right: 255px;
    width: 44px;
    height: 44px;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    background: #f6f6f6 url(../images/navigation_btn_spr.png) no-repeat;
    background-size: 200%;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  #navigation_cover {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background: #000;
    opacity: 0;
    -webkit-transition: opacity .3s, visibility .3s;
    -moz-transition: opacity .3s, visibility .3s;
    transition: opacity .3s, visibility .3s;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* navigation, show */

  body.nav-show {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .nav-show #header #navigation {
    -webkit-transform: translate(-100%, 0);
    -moz-transform: translate(-100%, 0);
    transform: translate(-100%, 0);
  }

  .nav-show #navigation_btn {
    background-position: 100% 0;
  }

  .nav-show #navigation_cover {
    display: block;
    z-index: 9998;
    visibility: visible;
    opacity: .7;
  }

  #header_navi {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    margin: 16px auto 0;
    padding: 0 0 16px;
    background: none;
    font-size: 14px;
    line-height: 1.5714286;
  }

  #header_navi ul {
    margin: 0 16px;
    padding: 0;
  }

  #header_navi ul li {
    float: none;
    width: auto;
    margin: 1px 0 0;
  }

  #header_navi ul li:last-child {
    margin-top: 8px;
  }

  #header_navi a {
    display: block;
    position: relative;
    padding: 16px 12px 16px 36px;
    overflow: hidden;
    color: #fff;
    background: #7ca8c1;
    line-height: 1.285714;
  }

  #header_navi li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 12px;
    width: 18px;
    height: 18px;
    margin: auto;
    background: url(../images/header_navi_icon_spr.png) no-repeat;
    background-size: 100%;
  }

  #header_navi img {
    display: none;
  }

  #header_navi .header_navi_news a::before {
    background-position: 0 0;
  }

  #header_navi .header_navi_news a::after {
    content: 'ニュース・イベント';
  }

  #header_navi .header_navi_traveltour a::before {
    background-position: 0 20%;
  }

  #header_navi .header_navi_traveltour a::after {
    content: '旅行商品';
  }

  #header_navi .header_navi_areaindex a::before {
    background-position: 0 40%;
  }

  #header_navi .header_navi_areaindex a::after {
    content: 'エリアインデックス';
  }

  #header_navi .header_navi_sitemap a::before {
    background-position: 0 60%;
  }

  #header_navi .header_navi_sitemap a::after {
    content: 'サイトマップ';
  }

  #header_navi .header_navi_contact a::before {
    background-position: 0 80%;
  }

  #header_navi .header_navi_contact a::after {
    content: 'お問い合わせ';
  }

  #header_navi .header_navi_inbound a::before {
    background-position: 0 100%;
  }

  #header_navi .header_navi_inbound a::after {
    content: 'ENGLISH';
  }

  #global_navi {
    margin: 0;
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
  }

  #global_navi ul {
    background: none;
  }

  #global_navi ul li {
    float: none;
    width: auto;
    background: #fff repeat-x;
    background-image: -webkit-linear-gradient(top, #fdfefe, #f4f8f9);
    background-image: -moz-linear-gradient(top, #fdfefe, #f4f8f9);
    background-image: linear-gradient(to bottom, #fdfefe, #f4f8f9);
    background-size: 100% 42px;
  }

  #global_navi a {
    display: block;
    height: 42px;
    padding-bottom: 1px;
    border-bottom: 1px solid #b8cbd6;
    overflow: hidden;
    background: center 0 no-repeat;
    text-indent: 100%;
    white-space: nowrap;
  }

  #global_navi_home a {
    background-image: url(../../images/global/global_navi_home_off.png);
  }

  #global_navi_travelinfo a {
    background-image: url(../../images/global/global_navi_travelinfo_off.png);
  }

  #global_navi_railwayinfo a {
    background-image: url(../../images/global/global_navi_railwayinfo_off.png);
  }

  #global_navi_ticketinfo a {
    background-image: url(../../images/global/global_navi_ticketinfo_off.png);
  }

  #global_navi_timetable a {
    background-image: url(../../images/global/global_navi_timetable_off.png);
  }

  #global_navi_hotel a {
    background-image: url(../../images/global/global_navi_hotel_off.png);
  }

  #global_navi ul li img {
    margin: 0;
    visibility: hidden;
  }

  #head_ad_area {
    height: auto;
    background: #fff repeat-x;
    background-image: -webkit-linear-gradient(top, #fff 1px, #f5f8f9 1px, #fff 26px);
    background-image: -moz-linear-gradient(top, #fff 1px, #f5f8f9 1px, #fff 26px);
    background-image: linear-gradient(to bottom, #fff 1px, #f5f8f9 1px, #fff 26px);
  }

  #header_sns {
    float: none;
  }

  #header_sns ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 0;
    text-align: center;
  }

  #header_sns li {
    float: none;
    margin: 0 4px;
    padding: 10px 0;
    vertical-align: bottom;
  }

  #header_sns li.mi {
    height: 20px;
  }

  #header_sns li.tw,
  #header_sns li.fb {
    width: auto;
  }

  #header_sns .mi>span,
  #header_sns .mi>span>iframe,
  #header_sns .tw>iframe,
  #header_sns .fb-like {
    display: block;
  }

  /* ================================================================

     contents

  ================================================================ */

  #contents {
    overflow: hidden;
  }

  #back_number {
    width: auto;
    margin-top: 32px;
    border-bottom: 4px solid #444;
    background: #eee;
  }

  #back_number h2 {
    position: relative;
    padding: 12px 0;
    color: #fff;
    background: #444 url(../images/back_number_heading_bg.png) center;
/*     background-image: -webkit-linear-gradient(-45deg, rgba(96, 96, 96, 0) 11.1111%, #606060 11.1111%, #606060 22.2222%, rgba(96, 96, 96, 0) 22.2222%, rgba(96, 96, 96, 0) 66.6667%, #606060 66.6667%, #606060 77.7778%, rgba(96, 96, 96, 0) 77.7778%); */
/*     background-image: -moz-linear-gradient(-45deg, rgba(96, 96, 96, 0) 11.1111%, #606060 11.1111%, #606060 22.2222%, rgba(96, 96, 96, 0) 22.2222%, rgba(96, 96, 96, 0) 66.6667%, #606060 66.6667%, #606060 77.7778%, rgba(96, 96, 96, 0) 77.7778%); */
/*     background-image: linear-gradient(-45deg, rgba(96, 96, 96, 0) 11.1111%, #606060 11.1111%, #606060 22.2222%, rgba(96, 96, 96, 0) 22.2222%, rgba(96, 96, 96, 0) 66.6667%, #606060 66.6667%, #606060 77.7778%, rgba(96, 96, 96, 0) 77.7778%); */
    background-size: 5px 5px;
    text-align: center;
    }

  #back_number h2::before {
    content: 'バックナンバー';
    font-weight: bold;
  }

  #back_number h2 img {
    display: none;
  }

  #back_number_area {
    margin: 0 auto;
    border: 0;
    background: transparent;
  }

  #back_number_area ul {
    margin: 12px 16px;
    padding: 0;
  }

  #back_number_area ul li {
    margin: 4px 0;
    font-size: 14px;
    line-height: 1.5714286;
  }

  #back_number_area ul.column1 li,
  #back_number_area ul.column2 li,
  #back_number_area ul.column3 li {
    float: none;
    width: auto;
    margin-right: 0;
  }

  /* ================================================================

     footer

  ================================================================ */

  #footer {
    height: auto;
    margin: 0;
    padding: 24px 0 0;
    background: #fff;
  }

  #footer_navi {
    padding: 0;
  }

  #footer_navi ul {
    float: none;
  }

  #footer_navi ul li {
    float: none;
    background: none;
  }

  #footer_navi ul.main_navi {
    display: none;
  }

  #footer_navi ul.sub_navi {
    margin: 0 32px 24px;
  }

  #footer_navi ul.sub_navi li {
    height: auto;
    margin-top: -1px;
    padding: 0;
  }

  #footer_navi ul.sub_navi li:first-child {
    margin-top: 0;
  }

  #footer_navi ul.sub_navi li a {
    display: block;
    position: relative;
    padding: 14px 0;
    border: 1px solid #ddd;
    color: #333;
    font-size: 13px;
    line-height: 1.307692;
    text-align: center;
  }

  #footer_navi ul.sub_navi li a:hover,
  #footer_navi ul.sub_navi li a:active,
  #footer_navi ul.sub_navi li a:focus {
    z-index: 1;
  }

  #footer_navi ul.sub_navi li a::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 8px;
    bottom: 0;
    z-index: 1;
    width: 0;
    height: 0;
    margin: auto;
    border-width: 6px 0 6px 10px;
    border-style: solid;
    border-color: rgba(204, 204, 204, 0) #ccc;
  }

  #footer_navi ul.sub_navi img {
    display: none;
  }

  #footer_navi .sub_navi_news a::before {
    content: 'ニュース・イベント';
  }

  #footer_navi .sub_navi_traveltour a::before {
    content: '旅行商品';
  }

  #footer_navi .sub_navi_sitemap a::before {
    content: 'サイトマップ';
  }

  #footer_navi .sub_navi_company a::before {
    content: '運営会社';
  }

  #footer_navi .sub_navi_terms a::before {
    content: '免責事項';
  }

  #footer_navi .sub_navi_copy a::before {
    content: '著作権';
  }

  #footer_navi .sub_navi_adv a::before {
    content: '広告掲載';
  }

  #footer_navi .sub_navi_privacy a::before {
    content: 'プライバシーポリシー';
  }

  #footer_navi .sub_navi_contact a::before {
    content: 'お問い合わせ';
  }

  #footer_anchor_pagetop {
    display: block;
    margin-top: 24px;
    border-bottom: 1px solid #4e7f99;
    text-align: center;
  }

  #footer_anchor_pagetop a {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 4px 4px 0 0;
    color: #fff;
    background: #4e7f99;
    font-weight: bold;
    font-size: 13px;
    line-height: 1.307692;
  }

  #footer_anchor_pagetop a::before {
    content: '\25b2';
    margin-right: 8px;
  }

  #footer_copy {
    height: auto;
    padding: 16px 32px;
    border-top: 1px solid #95bcd3;
    overflow: hidden;
    color: #fff;
    background: #7eaac1 repeat-x;
    background-image: -webkit-linear-gradient(top, #639cbe, #7ea9c3 74px);
    background-image: -moz-linear-gradient(top, #639cbe, #7ea9c3 74px);
    background-image: linear-gradient(to bottom, #639cbe, #7ea9c3 74px);
    font-size: 14px;
    line-height: 1.5714286;
  }

  #footer_copy p {
    padding: 0;
  }

  #footer_copy p::before {
    content: '当ホームページに掲載されている全ての文章、写真、イラスト等の無断複製・転載を禁じます。';
    display: block;
  }

  #footer_copy p::after {
    content: 'Copyright © 交通新聞社 all rights reserved.';
    display: block;
  }

  #footer_copy img {
    display: none;
  }

}