@charset "shift-jis";
/* ===========================================
	960px未満
=========================================== */
@media (max-width: 959px) {
  h1 {
    margin:0;
    padding: 5% 0 0 0;
    font-size:100%;
    font-weight: normal;
  }
  h2 {
    font-size:180%;
    line-height: 1.3em;
  }
  h2 img#title_icon {
    width: auto;
    height: 60px;
    margin-right: 20px;
    vertical-align: middle;
  }
  h3 {
    font-size:120%;
    line-height: 1.3em;
  }
  h3.catch {
    font-size:120%;
  }
  table {
    width: 100%;
    border-collapse:collapse;
  }
  table.table_half {
    width: 100%;
    border-collapse:collapse;
  }
  th {
    padding: 10px;
    background:#e7e7e7;
    border:solid 1px #CCCCCC;
    font-weight: normal;
  }
  td {
    padding: 10px;
    background:#FFFFFF;
    border:solid 1px #CCCCCC;
    text-align: center;
  }
  td span.price { font-size: 120%; }
  #header { margin-bottom: 10px; }
  #header #header_contents {
    width:auto;
    margin:0;
  }
  #header #header_contents #rogo {
    display: inline-block;
    width: 15%;
    margin: 0 10px;
  }
  #header #header_contents #rogo img { width: 100%; }
  /* ハンバーガーアイコンの設置スペース */
  #header #header_contents .drawer-open {
    position: absolute;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
    right: 117px;
    top: 10px;
  }
  /* ハンバーガーメニューのアイコン */
  #header #header_contents .drawer-open span,
  #header #header_contents .drawer-open span:after {
    content: '';
    display: block;
    width: 107px;
    height: 50px;
    background:url(../img/sp_menu_on.png) no-repeat center ;
    transition: 0.5s;
    position: absolute;
  }
  /* クリック後のアイコン */
  #header #header_contents #drawer-check:checked ~ .drawer-open span,
  #header #header_contents #drawer-check:checked ~ .drawer-open span::after {
    background:url(../img/sp_menu_off.png) no-repeat center ;
    position: fixed;
  }
  /* メニューのデザイン*/
  #header #header_contents .drawer-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/* メニューを画面の外に飛ばす */
    z-index: 99;
    background: rgba(0,0,0,0.8);
    transition: .5s;
  }
  /* アイコンがクリックされたらメニューを表示 */
  #header #header_contents #drawer-check:checked ~ .drawer-content {
    left: 0;
  }
  #header #header_contents #drawer-check:checked ~ .drawer-content .drawer-list {
    overflow-y: scroll;
    height: 100%;
    }
    #header #header_contents ul {
    display: block;
    margin: 80px 0 0 0;
    padding: 0;
    overflow: hidden;
  }
  #header #header_contents ul li {
    font-size:14px;
    list-style:none;
    color:#fff;
    padding:20px 20px 20px 20px ;
    text-align:center;
    line-height:1.5;
    border-bottom: 1px solid #999999;
  }
  #header #header_contents ul li a { color:#FFFFFF; }
  #main_img {
    width:100%;
    margin:0 auto;
    padding: 20px 0 40px 0;
    overflow: hidden;
  }

  .bg_typeA .typeA_contents ,
  .bg_typeB .typeB_contents ,
  .bg_typeC .typeC_contents {
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
  }
  .bg_typeD .typeD_contents ,
  .bg_typeE .typeE_contents {
    width: auto;
    margin: 0 20px;
    padding: 50px 0;
  }
  .bg_typeA .typeA_contents img ,
  .bg_typeB .typeB_contents img ,
  .bg_typeC .typeC_contents img ,
  .bg_typeD .typeD_contents img ,
  .bg_typeE .typeE_contents img {
    width: 100%;
  }
  .bg_typeA .typeA_contents h2 span ,
  .bg_typeB .typeB_contents h2 span ,
  .bg_typeC .typeC_contents h2 span ,
  .bg_typeD .typeD_contents h2 span ,
  .bg_typeE .typeE_contents h2 span {
    font-size: 80%;
  }
  .bg_typeA .typeA_contents .grid ,
  #related_information .grid {
    display:block;
    grid-template-columns: auto;
  }
  .bg_typeA .typeA_contents .grid div ,
  #related_information .grid div {
    margin: 0 0 20px 0;
    padding-bottom: 10px;
    background: #FFFFFF;
  }
  .bg_typeA .typeA_contents .grid div img ,
  #related_information .grid div img {
    width: 100%;
  }
  .bg_typeA .typeA_contents .grid div a ,
  #related_information .grid div a {
    display: block;
    text-decoration: none;
  }
  .bg_typeA .typeA_contents .grid div a h3 ,
  #related_information .grid div a h3 {
    text-align: center;
    font-size: 140%;
    font-weight: normal;
  }
  .bg_typeA .typeA_contents .grid div a p ,
  #related_information .grid div a p {
    text-align: center;
    font-size: 100%;
    line-height: 2em;
  }
  /* リンク付きタブ */
  .bg_typeD #tab_link ul.tab_link_2col ,
  .bg_typeE #tab_link ul.tab_link_2col {
    width: auto;
    margin: 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    list-style: none;
  }
  .bg_typeD #tab_link ul.tab_link_3col ,
  .bg_typeE #tab_link ul.tab_link_3col {
    width: auto;
    margin: 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
  }
  .bg_typeD #tab_link ul.tab_link_4col ,
  .bg_typeE #tab_link ul.tab_link_4col {
    width: auto;
    margin: 0 20px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    list-style: none;
  }
  #tab_link ul li a {
    padding: 15px;
    display: block;
    font-size: 120%;
  }
  #main_link { padding: 0 10px; }
  #main_link ul li {
    width: 100%;
    list-style: none;
    margin: 0 auto 10px auto;
    padding: 0;
  }
  #main_link ul li:nth-child(odd) { margin-right: auto; }
  #main_link ul li img { width: 100%; }
  #main_link h3 img.link_blank_w { width: auto; }
  #topics dl {
    height: 260px;
    margin: 0 10px;
    padding: 20px;
    background: #FFFFFF;
    overflow-y: scroll;
  }
  #topics dl dt {
    width: 100%;
    float: none;
  }
  #topics dl dd {
    margin: 10px 0 20px 0;
    font-size: 95%;
  }
  #osusume ul li {
    width: 50.2%;
    margin: 0 0 10px 0;
    float: left;
  }
  /* #osusume ul li:nth-child(even) { float: right; } */
  #osusume ul li img { width: 100%; }
  #icon_link ul li img { width: 60%; }

 
/* 下層ページ */
	#sub_main_img img { width:100%; }
	.event p img {
		width:100%;
		height:auto;
	}
	.eco table img {
		width:100%;
		height:auto;
	}
  .main_contents {
    padding: 0 20px;
  }
  
  .main_contents_tab .bg_typeD .typeD_contents ,
  .main_contents_tab .bg_typeE .typeE_contents {
    width: 100%;
    margin: 0 auto;
    padding: 50px 10px;
  }

  .main_contents #lineup_img_btn {
		width:100%;
		float:none;
	}
  .main_contents #lineup_img_btn img {
    width: auto!important;
  }
  .lineup {
    width:auto;
    margin:0 20px 10px 0;
    text-align:center;
    float:none;
  }
  .main_contents section.tenpo {
    width: auto;
    margin: 0 0 10px 0 ;
    padding: 10px;
    float: none;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    clear: both;
    overflow: hidden;
  }
  .main_contents section.tenpo address {
    width: auto;
    float: none;
    font-style: normal;
  }
  .main_contents section.tenpo address h3 {
    margin: 0;
    padding: 10px;
    border-bottom: solid 2px #00A3DE ;
    color: #00A3DE ;
  }
  .main_contents section.tenpo address dl dt {
    width: auto;
    padding: 10px;
    float: none;
  }
  .main_contents section.tenpo address dl dd {
    margin: 0;
    padding: 0 10px 10px 10px;
    border-bottom: dotted 1px #999999;
  }
  .main_contents section.tenpo div {
    width: auto;
    margin-bottom: 20px;
    float: none;
  }
  .main_contents section.tenpo div img {
    width: 100%;
  }
  .main_contents section.tenpo p {
    margin: 0;
    padding: 0;
    display: inherit;
    clear: both;
  }
  .main_contents section.tenpo p a {
    display: block;
    float: left;
    width: 60px;
    height: 60px;
    margin: 0 10px 10px 0;
  }
  #company dt , #company_02 dt {
    float:none;
    width:auto;
    padding: 10px;
  }
  #company dd , #company_02 dd {
    padding: 0 10px 10px 10px;
    margin:0;
    border-bottom: dotted 1px #999999;
  }

  /*  エコアクション21 ======== */
  #eco21 table {
    text-align:center;
    margin:0 auto;
    width:100%;
  }
  #eco21 table img {
      width:100%;
  }
  /*  健康企業宣言 ======== */
  #kenkou_left {
    float:none;
    width:auto;
  }
  #kenkou_right {
    float:none;
    width:auto;
  }
  #kenkou_right img , 
  #kenkou_left img {
      width:100%;
  }
  .text_right_box180 {
    width: 180px;
    margin: 0 0 0 auto;
  }
  .text_right_box300 {
    width: auto;
    margin: 0 0 0 auto;
  }
  .text_right_box350 {
    width: auto;
    margin: 0 0 0 auto;
  }
  /*  所有権解除及び残債照会 ======== */
  #ownership ol li div { text-align: center; }
    #ownership ol li div.dl_link {
    width: auto;
    float: none;
  }
/*  サイトマップ ======== */
  #sitemap #site_map_left {
    width: auto;
    float: none;
  }
  #sitemap #site_map_right {
    width: auto;
    float: none;
  }
  /* イベント情報 ==================== */
  #event ul li {
    float: none;
    margin: 10px;
  }
  #event img {
    width: 100%;
    height: auto;
  }
/* アフターサービス ==================== */
  #service div.service_top_link_first {
    margin: 0;
    padding: 20px 0;
    overflow: hidden;
    border-top: 1px #CCCCCC solid;
    border-bottom: 1px #CCCCCC solid;
  }
  #service .service_top_link {
    margin: 0;
    padding: 15px 0;
    overflow: hidden;
    border-bottom: 1px #CCCCCC solid;
  }
  #service .service_top_link_first a ,
  #service .service_top_link a { text-decoration: none; }
  #service .service_top_link_first .service_cate ,
  #service .service_top_link .service_cate {
    width: auto;
    margin-bottom: 30px;
    float: none;
    text-align: center;
  }
  #service .service_top_link_first .service_cate h3 ,
  #service .service_top_link .service_cate h3 { font-size: 140%; }
  #service .service_top_link_first .service_link ,
  #service .service_top_link .service_link {
    float: none;
    width: auto;
    display: block;
    grid-template-columns: auto;
  }
  #service .service_top_link_first .service_link section ,
  #service .service_top_link .service_link section {
    width: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    background: #FFFFFF;
  }
  #service .service_top_link_first .service_link section h4 ,
  #service .service_top_link .service_link section h4 {
    margin: 20px 10px;
    font-size: 140%;
    font-weight: normal;
    text-align: left;
    line-height: 1.5;
  }
  #service .service_top_link_first .service_link section h4.one_line ,
  #service .service_top_link .service_link section h4.one_line {
    margin: 20px 10px;
  }
  #service .service_top_link_first .service_link section p ,
  #service .service_top_link .service_link section p {
    margin: 10px;
    font-size: 100%;
  }
  #service #maintenance_parts {
    display: block;
    grid-template-columns: auto;
    margin-bottom: 20px;
    padding-bottom: 10px;
    background: #FFFFFF;
  }
  #service #maintenance_parts section h4 {
    margin: 20px 10px;
    font-size: 140%;
    font-weight: normal;
    text-align: left;
  }
  #service #maintenance_parts section p {
    margin: 10px;
    font-size: 100%;
    text-align: left;
  }
  #service .service_top_link_first .service_link section img ,
  #service .service_top_link .service_link section img ,
  #service #maintenance_parts section img {
    width: 100%;
  }
  #se_topics dl {
    margin: 0 10px;
    padding: 20px;
    background: #FFFFFF;
  }
  #se_topics dl dt {
    width: 100%;
    float: none;
  }
  #se_topics dl dd {
    margin: 10px 0 20px 0;
    font-size: 95%;
  }
  /* パックdeメンテ */
  #packdemente_anshin4 {
    width: auto;
    margin: 0 auto;
    padding: 50px 20px;
    color: #FFFFFF;
    background:url(../service/carlife-care/img/packdemente_anshin4_sp_img01.jpg) no-repeat top;
    background-size: cover;
  }
  #packdemente_anshin4 div {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  #packdemente_anshin4 div section {
    width: auto;
    padding: 5px;
    text-align: center;
  }
  #packdemente_important h3 {
    margin: 30px 0;
    font-size: 140%;
    font-weight: normal;
  }
  #packdemente_important section article {
    width: auto;
    margin: 10px 0;
    padding: 10px;
    background: #FFFFFF;
  }
  #packdemente_important section article h4 {
    font-size: 140%;
    font-weight: normal;
  }
  /* 自動車保険スカイプラス */
  #insurance {
    padding: 50px 20px;
    color: #FFFFFF;
    background:url(../service/carlife-care/img/insurance_info_img01.jpg) no-repeat top center;
    background-size: cover;
  }
  #insurance div {
    width: auto;
    margin: 50px 10px;
    text-align: center;
  }
  #insurance_summary div#insurance_compensation h3 {
    font-size: 140%;
    font-weight: normal;
    text-align: center;
  }
  #insurance_summary div#insurance_compensation div {
    display: block;
    grid-template-columns: auto;
  }
  #insurance_summary div#insurance_compensation div section {
    padding: 0 20px;
  }
  #insurance_summary div#insurance_compensation div section p strong {
    font-size: 140%;
  }
  #insurance_summary div#insurance_grid {
    display: block;
    grid-template-columns: auto;
  }
  #insurance_summary div#insurance_grid section {
    width: auto;
    margin: 10px;
    padding: 10px;
    background: #FFFFFF;
  }
  #insurance_summary div#insurance_grid section h3 {
    font-size: 140%;
    font-weight: normal;
    text-align: center;
  }
  #insurance_summary div#insurance_grid section ul {
    margin: 20px 0px;
    padding: 0 25px;
  }
  /* 延長保証5年・7年 */
  #encho_hosho h3 {
    margin: 40px 0 20px 0;
    font-size: 140%;
    font-weight: normal;
  }
  #encho_hosho section {
    display: block;
    grid-template-columns: auto;
  }
  #encho_hosho section article {
    width: auto;
    margin: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #CCCCCC;
  }
  #encho_hosho section article h4 {
    font-size: 120%;
    font-weight: normal;
    text-align: center;
  }
  #encho_hosho section article p {
    font-size: 120%;
    text-align: center;
  }
  #relief4 section {
    display: block;
    grid-template-columns: auto;
  }
  #relief4 section article {
    width: auto;
    margin: 10px;
    padding: 10px;
    line-height: 1.3;
    background: #F5F5F5;
  }
  #relief4 section article h4 {
    font-size: 160%;
    font-weight: normal;
    text-align: center;
  }
  #relief4 section article h4 span {
    font-size: 80%;
  }
  /* マツダコーティングシリーズ */
  #coating_hero {
    padding: 50px 20px;
    color: #FFFFFF;
    background:url(../service/carlife-care/img/coating_hero_img01.jpg) no-repeat top center;
    background-size: cover;
  }
  #coating_menu section {
    display: block;
    grid-template-columns: auto;
  }
  #coating_menu section article {
    margin: 20px 0;
    border-bottom: 1px solid #CCCCCC;
  }
  #coating_menu section article h3 {
    font-size: 140%;
    font-weight: normal;
    text-align: center;
  }
  section.maint_point_col3 ,
  section.maint_point_col4 {
    display: block;
    grid-template-columns: auto;
  }
  section.maint_point_col3 article h3 ,
  section.maint_point_col4 article h3 {
    font-size: 120%;
  }
  /* 日常点検 */
  section.daily_2col {
    display: block;
    grid-template-columns: auto;
  }
  .daily_mente_area {
    margin: 20px 0;
  }
  section.daily_mente_2col {
    display: block;
    grid-template-columns: auto;
  }
  section.daily_mente_2col article {
    margin: 20px 0px;
  }
  .daily_mente_area h3 ,
  section.daily_mente_2col h3 {
    font-size: 140%;
  }
  .daily_mente_area h4 ,
  section.daily_mente_2col h4 {
    font-size: 120%;
  }
  .daily_mente_area h5 ,
  section.daily_mente_2col h5 {
    font-size: 100%;
  }
  .daily_mente_area section {
    display: block;
    grid-template-columns: none;  
  }
  .daily_mente_area section article { margin: 0; }

  /* マツダお車エステ */
  section.esthetic_2col {
    display: block;
    grid-template-columns: auto;
  }
  section.esthetic_2col article {
    padding:0 ;
    border-bottom: 1px solid #CCCCCC;
  }
  section.esthetic_2col article h3 {
    font-size: 140%;
    font-weight: normal;
  }
  section.esthetic_2col article h4 {
    font-size: 120%;
    font-weight: normal;
  }
  /* マツダQBpit */
  section.qbpit_2col {
    display: block;
    grid-template-columns: auto;
  }
  section.qbpit_2col article {
    margin: 20px 0;
    padding: 10px 20px 20px 20px;
    background: #FFFFFF;
  }
  section.qbpit_2col article h3 {
    font-size: 120%;
    font-weight: normal;
  }
  /* メンテナンス */
  #maintenance_parts section.parts_4col_gray {
    display: block;
    grid-template-columns: auto;
  }
  #maintenance_parts section.parts_4col_gray article {
    padding: 10px;
  }
  #maintenance_parts section.parts_4col_gray article h3 {
    font-size: 140%;
  }
  #maintenance_parts section.parts_4col_gray article h4 {
    font-size: 120%;
  }
  /* メンテナンス　パーツ選択 */
  #parts_choice section.parts_4col {
    display: block;
    grid-template-columns: auto;
  }
  #parts_choice section.parts_4col article h3 {
    font-size: 130%;
  }
  #parts_choice section.parts_4col article h4 {
    font-size: 120%;
  }
  #parts_choice section.parts_4col article p {
    font-size: 100%;
  }
  /* メンテナンス　シビアコンディション */
  #severe_condition section {
    display: block;
    grid-template-columns: auto;
  }
  #severe_condition h3 {
    font-size: 140%;
  }
  #severe_condition section article h4 {
    font-size: 130%;
  }
  /* メンテナンス　季節ごとのメンテナンス */
  #four_seasons section {
    width: auto;
    margin: 0;
    display: block;
    grid-template-columns: auto;
  }
  #four_seasons section article h3 {
    font-size: 130%;
  }
  #four_seasons section article p {
    font-size: 100%;
  }
  .leftArea_30 {
    width: auto;
    float: none;
  }
  .leftArea_65 {
    width: auto;
    float: none;
  }
  .rightArea_30 {
    width: auto;
    float: none;
  }
  .rightArea_65 {
    width: auto;
    float: none;
  }
  section.parts_grid_2col {
    display: block;
    grid-template-columns: auto;
  }
  section.parts_grid_2col article div.mark {
    width: 100%;
  }
  section.parts_grid_2col article div.mark img {
    width: auto;
  }
  section.parts_grid_2col article h3 {
    font-size: 140%;
  }
  section.parts_grid_2col article h4 {
    font-size: 120%;
  }
  section.parts_grid_2col article ul {
    padding: 20px;
  }
  section.parts_grid_3col {
    display: block;
    grid-template-columns: auto;
  }
  section.parts_grid_3col article h3 {
    font-size: 140%;
  }
  section.parts_grid_4col {
    display: block;
    grid-template-columns: auto;
  }
  section.parts_grid_4col article h3 {
    font-size: 140%;
  }

  section.grid_2col ,
  section.grid_2col_gray {
    display: block;
    grid-template-columns: auto;
  }
  section.grid_3col_gray {
    display: block;
    grid-template-columns: auto;
  }
  section.grid_4col_gray {
    display: block;
    grid-template-columns: auto;
  }
  section.grid_2col article ,
  section.grid_3col article ,
  section.grid_4col article {
    margin: 10px;
    padding: 10px;
    line-height: 1.3;
    border-bottom: 1px solid #CCCCCC;
  }
  section.grid_2col article h4 ,
  section.grid_2col_gray article h4 ,
  section.grid_3col_gray article h4 ,
  section.grid_4col_gray article h4 {
    font-size: 140%;
    font-weight: normal;
  }
  .repair_cost_left {
    float: none;
    width: auto;
  }
  .repair_cost_right {
    float: none;
    width: auto;
    font-size: 120%;
  }
  .repair_cost_right span { font-size: 100%; }
  /* タブ用 */
  /* タブ */
  div.tab_typeA .tabLabel {
    font-size: 100%;
  }
  /* 本文 */
  div.tab_typeA .content h3 {
    text-align: center;
    font-size: 140%;
    font-weight: normal;
  }
  div.tab_typeA .content h4 {
    margin: 0;
    padding: 20px;
    font-size: 120%;
    font-weight: normal;
  }
  div.tab_typeA .content section {
    display: block;
    grid-template-columns: auto;
  }
  p.slider2_info { font-size: 90%; }
  /* 注意事項 ==================== */
  .notes h3 {
    font-size:120%;
  }
  /* cgi用css ==================== */
  form h3 {
    font-size:120%;
  }
  table.form td div.request_area {
    float: none;
    width: auto;
    margin-right: 30px;
    margin-bottom: 20px;
  }
  /* アコーディオン用css ==================== */
  .accordion_content_left {
    float: none;
    width: auto;
  }
  .accordion_content_right {
    float: none;
    width: auto;
  }
  .accordion_content_left h3 ,
  .accordion_content_right h3 {
    font-size: 120%;
  }
  /* footer ==================== */
  #footer #footer_contents {
    width: auto;
    margin:0;
    padding:10px 0 0 0;
  }
  #footer #footer_contents h2 {
    margin: 0;
    padding: 0;
    text-align: left;
    font-weight: bold;
    font-size: 120%;
    color: #999999;
  }
  #footer #footer_contents #calendar {
    width:auto;
    margin:0 10px;
    font-size:95%;
    line-height:1.5em;
    float:none;
  }
  #footer #footer_contents #calendar img { width: 100%; }
  #footer #footer_contents #calendar #annual_calendar img {
    width: 50%;
    height: auto;
  }
  #footer #footer_contents #footer_menu #footer_menu_left {
    width:auto;
    float: none;
  }
  #footer #footer_contents #footer_menu #footer_menu_right {
    width:auto;
    float: none;
  }
  #footer #footer_contents #copyright {
    clear: both;
    font-size:10px;
    margin:0;
    padding: 40px 0 10px 0;
  }
  /*アコーディオン全体*/
  #footer #footer_contents #footer_menu {
    width: 100%;
    margin: 40px 0 0 0;
    float:none;
    color: #999999;
    clear: both;
  }
  #footer #footer_contents #footer_menu div.half {
    display: flex;
    border-bottom: 1px solid #999999;
  }
  #footer #footer_contents #footer_menu div.half h3 {
    width: 50%;
    border-top: none;
  }
  #footer #footer_contents #footer_menu div.half h3:first-child {
    border-right: 1px solid #999999;
  }
  /*バー部分*/
  #footer #footer_contents #footer_menu h3 ,
  #footer #footer_contents #footer_menu label {
    height: 80px;
    font-weight: normal;
    cursor :pointer;
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #999999;
    line-height: 1.2;
    position: relative;
    margin: 0;
    padding: 0 20px;
    background-color: #000000;
    border-top: 1px solid #999999;

  }
  #footer #footer_contents #footer_menu label.last_label {
    border-bottom: 1px solid #999999;
  }
  #footer #footer_contents #footer_menu .brd-bttm {
    border-bottom: 1px solid #999999;
  }
  #footer #footer_contents #footer_menu h3:before ,
  #footer #footer_contents #footer_menu label:before {
    content:  ""; 
    width: auto;
    height: auto;
    display: inline-block;
    position:  relative;
    background: none;
    border-radius:  0;
    margin-right: 0;
  }
  /*開いたときに表示される部分*/
  #footer #footer_contents #footer_menu ul {
    margin: 0;
    padding: 0;
    font-size:100%;
    list-style: none;
    background: #f1f1f1;
  }
  #footer #footer_contents #footer_menu ul li:last-child {
     margin-bottom: auto;
  }
  #footer #footer_contents #footer_menu li {
    height: 0;
    overflow-y: hidden;
    transition: padding-bottom 0.5s, padding-top 0.5s; /*閉じるときのアニメーション*/
    -webkit-transition: padding-bottom 0.5s, padding-top 0.5s
    -moz-transition: padding-bottom 0.5s, padding-top 0.5s;
    -ms-transition: padding-bottom 0.5s, padding-top 0.5s;
    -o-transition: padding-bottom 0.5s, padding-top 0.5s;
  }
  #footer #footer_contents #footer_menu ul li:before {
    content:  ""; 
    width: 9px;
    height: 9px;
    display: none;
    position:  relative;
    background: none;
    border: none;
    border-radius:  0;
    margin-right: 0;
  }
  #footer #footer_contents #footer_menu li a {
    display: block;
    padding: 15px 20px 15px 20px;
  }
  #menu_bar01:checked ~ #links01 li ,
  #menu_bar02:checked ~ #links02 li ,
  #menu_bar03:checked ~ #links03 li ,
  #menu_bar04:checked ~ #links04 li {
    height: auto; /*開いたときに表示されるliの高さ*/
    opacity: 1;
    background: #f1f1f1 url(../img/arrow_right.png) no-repeat center right 17px;
    padding: 0px 0px 50px 0px;
  }
   /*開いたときの下の余白*/
  #menu_bar01:checked ~ #links01 li:last-child ,
  #menu_bar02:checked ~ #links02 li:last-child ,
  #menu_bar03:checked ~ #links03 li:last-child ,
  #menu_bar04:checked ~ #links04 li:last-child {
    margin-bottom: 20px;
  }
  /*閉じた状態の矢印描画*/
  #footer #footer_contents #footer_menu h3:after {
    content:"";
    display:block;
    width:10px;
    height:10px;
    border-top: #999999 2px solid;
    border-right: #999999 2px solid;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position:absolute;
    right: 2%;
    top: 0;
    bottom: 15%;
    margin: auto;
  }
  #footer #footer_contents #footer_menu div.half h3:after {
    right: 4%;
  }
  #footer #footer_contents #footer_menu label:after {
    content:"";
    display:block;
    width:10px;
    height:10px;
    border-top: #999999 2px solid;
    border-right: #999999 2px solid;
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    transform: rotate(135deg);
    position:absolute;
    right: 2%;
    top: 0;
    bottom: 15%;
    margin: auto;
  }
  /*開いた状態の矢印描画*/
  #footer #footer_contents #footer_menu input[type=checkbox]:checked + label:after{
    content:"";
    display:block;
    width:10px;
    height:10px;
    border-top: #999999 2px solid;
    border-right: #999999 2px solid;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position:absolute;
    right: 2%;
    top: 7%;
    bottom: 0;
    margin: auto;
  }
  .link_blank ,
  .link_blank_w ,
  .link_blank_g {
    width: auto!important;
    margin: 0 0 0 15px!important;
    vertical-align: initial;
  }
  ol.annotation_alone li ,
  ol.annotation li {
    font-size: 90%;
  }
  .photo_center img { width: auto; }
  .text_12 { font-size: 90%; }
  .text_24 { font-size: 140%; }
  .li_blank img {
    width: auto!important;
  }
	.pc { display: none; }
	.sp { display: inline; }
}
/* ===========================================
	320px未満
=========================================== */
@media (max-width: 320px) {
  h1 {
    margin:0;
    padding: 5% 0 5% 0;
    font-size:100%;
    font-weight: normal;
  }
  th {
    padding: 5px;
    background:#e7e7e7;
    border:solid 1px #CCCCCC;
    font-weight: normal;
  }
  td {
    padding: 5px;
    background:#FFFFFF;
    border:solid 1px #CCCCCC;
    text-align: center;
  }
  /* ハンバーガーアイコンの設置スペース */
  #header #header_contents .drawer-open {
    position: absolute;
    z-index: 100;/* 重なり順を一番上に */
    cursor: pointer;
    right: 50px;
    top: 15px;
  }
  /* ハンバーガーメニューのアイコン */
  #header #header_contents .drawer-open span ,
  #header #header_contents .drawer-open span:after {
    content: '';
    display: block;
    width: 40px;
    height: 37px;
    background:url(../img/sp_menu_on_se.png) no-repeat center;
    transition: 0.5s;
    position: absolute;
  }
  /* クリック後のアイコン */
  #header #header_contents #drawer-check:checked ~ .drawer-open span,
  #header #header_contents #drawer-check:checked ~ .drawer-open span::after {
    background:url(../img/sp_menu_off_se.png) no-repeat center ;
    position: fixed;
  }
}