
.header-table {
	display: inline-table;
	vertical-align: middle;
    margin-left: 10px;
}

.header-table div {
	display: -webkit-flex;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	line-height: 1;
    margin-left: 10px;
}

/* エリア詳細ページ
------------------------------------------------------------ */

section.about_branch {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    padding: 30px;
    background-color: #F1EDE6;
  }

a.btn_gotoarea{
    display: inline-block;
    padding: 20px 50px 20px 80px;
    background-color: #339999;
    text-decoration: none;
    color: #FFFFFF;
    font-size: 1.8rem;
}

a.btn_gotoarea:hover{
    text-decoration: underline;
    color: #FFFFFF;
}

@media screen and (min-width:992px) {
    .sc_title{
        text-align: center;
        margin:50px auto;
    }
    .sc_title img{
        max-width:45%;
    }

}

@media screen and (min-width:770px) and (max-width:991px) {
    .sc_title{
        text-align: center;
        margin:0 auto;
    }
    .sc_title img{
        max-width:55%;
    }

}

@media screen and (min-width:481px) and (max-width:769px) {
    .sc_title{
        text-align: center;
        margin:0 auto;
    }

    .sc_title img{
        max-width:80%;
    }
}

@media screen and (max-width:480px) {
    .sc_title{
        text-align: center;
        margin:0 auto;
    }

    .sc_title img{
        max-width:100%;
    }
}

/* トップページ用SVG
------------------------------------------------------------ */

@media screen and (min-width:992px) {
    .sc_title_top{
        text-align: center;
        margin:25px auto 0 auto;
    }
    .sc_title_top img{
        max-width:40%;
    }

}

@media screen and (min-width:770px) and (max-width:991px) {
    .sc_title_top{
        text-align: center;
        margin:0 auto;
    }
    .sc_title_top img{
        max-width:40%;
    }

}


@media screen and (min-width:481px) and (max-width:769px) {
    .sc_title_top{
        text-align: center;
        margin:0 auto;
    }

    .sc_title_top img{
        max-width:60%;
    }
}

@media screen and (max-width:480px) {
    .sc_title_top{
        text-align: center;
        margin:0 auto;
    }

    .sc_title_top img{
        max-width:100%;
    }
}

/* 支部タイトル
------------------------------------------------------------ */

@media screen and (min-width:770px) {

    .area_inner{
        width:90%;
        margin:30px auto;
    }
    
    h2.area_title {
        position: relative;
        padding:0.5em 0.5em 0.5em 1.4em;
        border: 1px solid #CCC;
        border-radius: 5px;
        font-size: 2.3rem;
    }
    
    h2.area_title::after {
        position: absolute;
        top: 50%;
        left:0.7em;
        transform:translateY(-50%);
        content: '';
        width: 5px;
        height:25px;
        background-color: #446689;
    }
}

@media screen and (min-width:481px) and (max-width:769px) {
    .area_inner{
        width:95%;
        margin:30px auto;
    }
    
    h2.area_title {
        position: relative;
        padding:0.5em 0.5em 0.5em 1.4em;
        border: 1px solid #CCC;
        border-radius: 5px;
        font-size: 2.1rem;
    }
    
    h2.area_title::after {
        position: absolute;
        top: 50%;
        left:0.7em;
        transform:translateY(-50%);
        content: '';
        width: 5px;
        height:25px;
        background-color: #446689;
    }
}

@media screen and (max-width:480px) {
    .area_inner{
        width:100%;
        margin:30px auto;
    }
    
    h2.area_title {
        position: relative;
        padding:0.5em 0.5em 0.5em 1.4em;
        border: 1px solid #CCC;
        border-radius: 5px;
        font-size: 2rem;
    }
    
    h2.area_title::after {
        position: absolute;
        top: 50%;
        left:0.7em;
        transform:translateY(-50%);
        content: '';
        width: 5px;
        height:25px;
        background-color: #446689;
    }
}

/* 代表ボックス
------------------------------------------------------------ */
@media screen and (min-width:770px){
    .box01{
        padding:15px;
        border:1px solid #707070;
        background-color: #fff;
    }

    .box01b{
        padding:15px;
        border:1px solid #707070;
        background-color: #fff;
    }

    .box02a{
        padding:15px;
        background-color: #34c287;
    }

    .box02{
        padding:15px;
        background-color: #163649;
    }

    h2.ereaname{
        font-size: 24px;
        font-weight: normal;
        color:#000;
        margin-bottom:15px;
    }

    h2.ttl01{
        font-size: 20px;
        font-weight: normal;
        color:#fff;
        margin-bottom:5px;
    }
    .textbox{
        display:flex;
    }
    p.maintext{
        margin-left:30px;
    }

    p.headname{
        color:#fff;
    }

    .box01 img{
        min-width: 150px;
        margin:0px 20px 0 10px;
    }

    .eria_ti_box{
        padding:15px;
        border:1px solid #707070;
        background-color: #fff;
    }
}

@media screen and (max-width:769px) {
    .box01{
        padding:15px;
        border:1px solid #707070;
        background-color: #fff;
    }
    
    .box01b{
        padding:15px;
        border:1px solid #707070;
        background-color: #fff;
    }

    .box02{
        padding:15px;
        background-color: #163649;
    }

    .box02a{
        padding:15px;
        background-color: #34c287;
    }

    h2.ttl01{
        font-size: 20px;
        font-weight: normal;
        color:#fff;
        margin-bottom:5px;
    }

    .textbox{
        display:block;
    }

    .textbox span {
        display: block;
    }

    p.maintext{
        display: block;
        margin-left: 0;
    }

    p.headname{
        color:#fff;
    }

    .box01 img{
        min-width: 150px;
        margin-bottom: 10px;
    }
}

/* エリア紹介
------------------------------------------------------------ */
@media screen and (min-width:770px){
    section.area{
        max-width: 100%;
        margin: 40px auto;
        padding: 0;
        background-color: #FFFFFF;
    }
    
    p.vararea{
        color: #000000;
        font-size: 1.8rem;
    }
    
    .box02 {
        max-width: 80%;
        height: auto;
        margin: 0 auto;
    }
    
    .box01 {
        max-width: 80%;
        height: auto;
        margin: 0 auto;
    }
    
    .area_photo {
        max-width: 95%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 15px;
    }
    
    .area_photo img {
        max-width: 100%;
        height: auto;
    }

    p.vareria {
        width: 90%;
        font-size: 1.6rem;
        margin: 0 auto;
    }
}

@media screen and (max-width:769px){
    .box02 {
        max-width: 90%;
        height: auto;
        margin: 0 auto;
    }

    p.vareria {
        font-size: 1.4rem;
    }
    .area_photo {
        max-width: 95%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        margin-bottom: 15px;
    }
    
    .area_photo img {
        max-width: 100%;
        height: auto;
    }
}

/* 真誓会相互扶助について
------------------------------------------------------------ */
section.soufu{
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 20px 0;
    background-color: #FFFFFF;
  }
  
  @media screen and (min-width:770px) {
    .soufu_box {
    position:relative;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .soufu_ti {
      width: 60%;
      height: auto;
      margin: 0 auto;
    }
    .soufu_ti_small {
      display: none;
    }
    p.p_varsoufu{
      width: 80%;
      margin: 30px auto;
      line-height: 180%;
      font-size: 1.6rem;
      color: #000000;
    }
    .teireikai_box {
      position:relative;
      width:80%;
      height: auto;
      margin:30px auto;
      padding: 20px;
      background-image: url(../image/teireikai_box_bg.png);
      background-repeat: repeat;
    }
    
    .teireikai_box img {
        width: 20%;
    }

    p.p_varteireikai {
      margin: 20px auto;
      max-width: 85%;
      line-height: 180%;
      font-size: 1.6rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_box{
      position: relative;
      width: 90%;
      margin-top: 80px;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 20px 20px 20px;
      border: 1px solid #333333;
      text-align: center;
    }
    .vr_box_ti{
      display: block;
      position: absolute;
      top: -30px;
      left: 10%;
      right: 10%;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .vr_box_ti img {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
    .vr_box_ti_mid {
      display: none;
    }
    .vr_box_ti_small {
      display: none;
    }
    p.p_varvr{
      margin-top: 50px;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      max-width: 85%;
      line-height: 180%;
      font-size: 1.8rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_etc_box{
      display: block;
      max-width: 90%;
      height: auto;
      margin: 20px auto;
      padding: 0;
    }
    .vr_etc_box_small {
      display: none;
    }
    .vr_etc_box img {
      max-width: 100%;
      height: auto;
    }
  }
  
  @media screen and (min-width:481px) and (max-width:769px) {
    .soufu_ti {
      width: 60%;
      height: auto;
      margin: 0 auto;
    }
    .soufu_ti_small {
      display: none;
    }
    p.p_varsoufu{
      width: 85%;
      margin: 20px auto;
      line-height: 170%;
      font-size: 1.5rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
    }
    .teireikai_box {
      position:relative;
      width: 80%;
      height: auto;
      margin:0 auto;
      padding: 20px;
      background-image: url(../image/teireikai_box_bg.png);
      background-repeat: repeat;
      text-align: center;
    }

    .teireikai_box img {
        width: 30%;
    }

    p.p_varteireikai {
      margin: 20px auto;
      max-width: 85%;
      line-height: 150%;
      font-size: 1.5rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_box{
      position: relative;
      width: 90%;
      margin-top: 70px;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 20px 20px 20px;
      border: 1px solid #333333;
    }
    .vr_box_ti {
      display: none;
    }
    .vr_box_ti_mid{
      display: block;
      position: absolute;
      top: -25px;
      left: 2%;
      right: 2%;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .vr_box_ti_small {
      display: none;
    }
    .vr_box_ti_mid img {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
    p.p_varvr{
      margin-top: 30px;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      max-width: 85%;
      line-height: 170%;
      font-size: 1.7rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_etc_box{
      display: block;
      max-width: 90%;
      height: auto;
      margin: 20px auto;
      padding: 0;
    }
    .vr_etc_box_small {
      display: none;
    }
    .vr_etc_box img {
      max-width: 100%;
      height: auto;
    }
  }
  
  @media screen and (max-width:480px) {
    .soufu_ti_small {
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
    .soufu_ti {
      display: none;
    }
    p.p_varsoufu{
      width: 80%;
      margin: 20px auto;
      line-height: 160%;
      font-size: 1.6rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
    }
    .teireikai_box {
      position:relative;
      width: 85%;
      height: auto;
      margin:0 auto;
      padding: 15px;
      background-image: url(../image/teireikai_box_bg.png);
      background-repeat: repeat;
      text-align: center;
    }
    .teireikai_box img {
        width: 60%;
    }
    p.p_varteireikai {
      margin: 20px auto;
      max-width: 90%;
      line-height: 160%;
      font-size: 1.6rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_box{
      position: relative;
      width: 90%;
      margin-top: 40px;
      margin-bottom: 20px;
      margin-left: auto;
      margin-right: auto;
      padding: 0 20px 20px 20px;
      border: 1px solid #333333;
    }
    .vr_box_ti {
      display: none;
    }
    .vr_box_ti_mid {
      display: none;
    }
    .vr_box_ti_small{
      display: block;
      position: absolute;
      top: -25px;
      left: 2%;
      right: 2%;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
      text-align: center;
    }
    .vr_box_ti_small img {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
    p.p_varvr{
      margin-top: 30px;
      margin-bottom: 0;
      margin-left: auto;
      margin-right: auto;
      max-width: 85%;
      line-height: 160%;
      font-size: 1.6rem;
      font-family: 'Shippori Mincho', serif;
      color: #000000;
      text-align: left;
    }
    .vr_etc_box{
      display: none;
    }
    .vr_etc_box_small {
      display: block;
      max-width: 90%;
      height: auto;
      margin: 20px auto;
      padding: 0;
    }
    .vr_etc_box_small img {
      max-width: 100%;
      height: auto;
    }
  }

/* フッター
------------------------------------------------------------ */

.footer_logo{
    width: 100%;
    height: auto;
    margin: 10px auto;
    padding: 5px;
    text-align: center;
  }
  
  .footer_logo_small{
    display: none;
  }
  
  .copy_right{
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    padding: 10px 0;
    background-color: #B5C5CC;
    text-align: center;
    color: #000000;
    font-size: 1.4rem;
  }
  
  @media screen and (max-width: 480px) {
    .footer_logo_small{
      display: block;
      width: 100%;
      height: auto;
      margin: 10px auto;
      padding: 5px;
      text-align: center;
    }
    .footer_logo{
      display: none;
    }
  }

  /* 定例会スケジュール・イベント報告
------------------------------------------------------------ */
@media screen and (min-width: 770px) {
    section.sched{
      max-width: 100%;
      height: auto;
      background-color: #FFFFFF;
      margin: 0 auto;
      padding: 0;
    }
  
    .sched_ti{
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
  
    .sched_ti_mid{
      display: none;
    }
  
    .sched_ti_small{
      display: none;
    }
  
    .map_box{
      position: relative;
      max-width: 100%;
      height: auto;
      background-image: url(../image/map_box_bg.png);
      background-repeat: repeat;
      margin: 0 auto;
      padding: 30px 0;
    }
  }
  
  @media screen and (min-width: 481px) and (max-width: 769px){
    section.sched{
      max-width: 100%;
      height: auto;
      background-color: #FFFFFF;
      margin: 0 auto;
      padding: 0;
    }
  
    .sched_ti{
      display: none;
    }
  
    .sched_ti_mid{
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
  
    .sched_ti_small{
      display: none;
    }
  
    .map_box{
      max-width: 100%;
      height: auto;
      background-image: url(../image/map_box_bg.png);
      background-repeat: repeat;
      margin: 0 auto;
      padding: 30px 0;
    }
  }
  
  @media screen and (max-width: 480px) {
    section.sched{
      max-width: 100%;
      height: auto;
      background-color: #FFFFFF;
      margin: 0 auto;
      padding: 0;
    }
  
    .sched_ti{
      display: none;
    }
  
    .sched_ti_mid{
      display: none;
    }
  
    .sched_ti_small{
      display: block;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      padding: 0;
    }
  
    .map_box{
      max-width: 100%;
      height: auto;
      background-image: url(../image/map_box_bg.png);
      background-repeat: repeat;
      margin: 0 auto;
      padding: 30px 0;
    }
  }
  
  /* MAP
  ------------------------------------------------------------ */
  img {
      vertical-align: bottom;
  } 
  a:hover img {
      opacity: 0.7;
          -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity = 60);
          filter: alpha(opacity = 60);
      transition: all 0.4s;
  }
  a {
      text-decoration: none;
      color: #435ea9;
  }
  a:hover {
      text-decoration: none;
      color: #0E2D96;
      transition: 0.3s all;
  }
  .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
  }
  
  /******* 地図成形 *******/
  #japan-map div div.area div {
      border: 1px #ffffff solid;
      text-align: center;
      font-size: 14px;
       display: flex;
          display: -webkit-flex;
       align-items: center; /* 縦方向中央揃え */
           -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
       justify-content: center; /* 横方向中央揃え */
           -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
      border-radius: 6px;
          -webkit-border-radius: 6px;
      position: absolute;
      box-sizing: border-box;
      transition: 0.2s;
  }
  #japan-map div div.area-virtual div {
        border: 1px #ffffff solid;
        text-align: center;
        font-size: 14px;
        display: flex;
            display: -webkit-flex;
        align-items: center; /* 縦方向中央揃え */
            -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
        justify-content: center; /* 横方向中央揃え */
            -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
        border-radius: 6px;
            -webkit-border-radius: 6px;
        position: absolute;
        box-sizing: border-box;
        transition: 0.2s;
  }

  #japan-map div div.area-abroad div {
    border: 1px #ffffff solid;
    text-align: center;
    font-size: 14px;
    display: flex;
        display: -webkit-flex;
    align-items: center; /* 縦方向中央揃え */
        -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
    justify-content: center; /* 横方向中央揃え */
        -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
    border-radius: 6px;
        -webkit-border-radius: 6px;
    position: absolute;
    box-sizing: border-box;
    transition: 0.2s;
}


  #japan-map div div.area div:hover {
      opacity: 0.5;
      transition: 0.2s;
  }
  #japan-map div div.area-virtual div:hover {
    opacity: 0.5;
    transition: 0.2s;
  }

  #japan-map div div.area-abroad div:hover {
    opacity: 0.5;
    transition: 0.2s;
  }
  
  #japan-map {
      display: block;
      width: 777px;
      height: 482px;
      background-color: none;
      margin-left: auto;
      margin-right: auto;
      position: relative;
  }
  #japan-map p.area-title {
      display: none;
  }
  
  /* バーチャルエリア */
  #virtual-area {
        width: 136px;
        display: block;
        height: 50px;
        position: absolute;
        top: 0px;
        left: 0px;
    }
  #virtual-area div.area-virtual div {
        background-color: #996666;
        color: #ffffff;
    }
    #virtual {	
        width: 136px;
        height: 50px;
    }

    /* 海外エリア */
    #abroad-area {
    width: 136px;
    display: block;
    height: 50px;
    position: absolute;
    top: 100px;
    left: 0px;
    }
    #abroad-area div.area-abroad div {
    background-color: #e16d6b;
    color: #ffffff;
    }
    #abroad {	
    width: 136px;
    height: 50px;
}

  /* 北海道・東北 */
  
  #hokkaido-touhoku {
      width: 136px;
      display: block;
      height: 265px;
      position: absolute;
      left: 638px;
  }
  #hokkaido-touhoku div.area div {
      background-color: #7478c2;
      color: #ffffff;
  }
  
  #hokkaido {	
      width: 133px;
      height: 70px;
  }
  #aomori {
      width: 93px;
      height: 43px;
      left: 21px;
      top: 96px;
  }
  #akita {
      width: 67px;
      height: 42px;
      left: 3px;
      top: 139px;
  
  }
  #iwate {
      width: 67px;
      height: 42px;
      left: 70px;
      top: 139px;
  }
  #yamagata {
      width: 67px;
      height: 42px;
      top: 181px;
      left: 3px;
  }
  #miyagi {
      width: 67px;
      height: 42px;
      top: 181px;
      left: 70px;
  }
  #fukushima {
      width: 67px;
      height: 42px;
      top: 223px;
      left: 70px;
  }
  
  /* 関東 */
  
  #kantou {
      width: 158px;
      display: block;
      height: 174px;
      position: absolute;
      top: 265px;
      left: 623px;
      z-index: 2;
  }
  #kantou div.area div {
      background-color: #31beca;
      color: #ffffff;
  }
  #ibaraki {
      width: 52px;
      height: 85px;
      top: 0px;
      left: 100px;
  }
  #tochigi {
      width: 50px;
      height: 42px;
      top: 0px;
      left: 50px;
  }
  #gunma {
      width: 50px;
      height: 42px;
      top: 0px;
      left: 0px;
  }
  #saitama {
      width: 100px;
      height: 43px;
      top: 42px;
      left: 0px;
  }
  #chiba {
      width: 52px;
      height: 84px;
      top: 85px;
      left: 100px;
  }
  #tokyo {
      width: 100px;
      height: 42px;
      top: 85px;
      left: 0px;
  }
  #kanagawa {
      width: 67px;
      height: 42px;
      top: 127px;
      left: 0px;
  }
  
  /* 中部 */
  
  #tyubu {
      width: 270px;
      height: 211px;
      position: absolute;
      left: 438px;
      top: 223px;
  }
  #tyubu div.area div {
      background-color: #4ab969;
      color: #ffffff;
  }
  
  #nigata {
      width: 85px;
      height: 42px;
      left: 185px;
  }
  #toyama {
      width: 67px;
      height: 42px;
      left: 118px;
  }
  #ishikawa {
      width: 50px;
      height: 57px;
      left: 68px;
  }
  #fukui {
      width: 68px;
      height: 42px;
      left: 0px;
      z-index: 2;
  }
  #nagano {
      width: 67px;
      height: 85px;
      left: 118px;
      top: 42px
  }
  #yamanashi {
      width: 67px;
      height: 42px;
      left: 118px;
      top: 127px;
  }
  #gifu {
      width: 50px;
      height: 55px;
      left: 68px;
      top: 57px
  }
  #shizuoka {
      width: 67px;
      height: 42px;
      left: 118px;
      top: 169px;
  }
  #aichi {
      width: 50px;
      height: 57px;
      top: 112px;
      left: 68px;
  }
  
  /* 近畿 */
  
  #kinki {
      width: 186px;
      height: 211px;
      position: absolute;
      left: 320px;
      top: 223px;
  }
  #kinki div.area div {
      background-color: #b0b72f;
      color: #ffffff;
  }
  
  #kyoto {
      width: 67px;
      height: 84px;
      left: 51px;
  }
  #shiga {
      width: 68px;
      height: 42px;
      top: 42px;
      left: 118px;
  }
  #osaka {
      width: 67px;
      height: 85px;
      top: 84px;
      left: 51px;
  }
  #nara {
      width: 34px;
      height: 85px;
      top: 84px;
      left: 118px;
  }
  #mie {
      width: 34px;
      height: 85px;
      top: 84px;
      left: 152px;
  }
  #wakayama {
      width: 113px;
      height: 42px;
      top: 169px;
      left: 61px;
  }
  #hyougo {
      width: 51px;
      height: 98px;
      left: 0px;
  }
  
  /* 中国 */
  
  #tyugoku {
      width: 151px;
      height: 98px;
      position: absolute;
      left: 169px;
      top: 223px;
  }
  #tyugoku div.area div {
      background-color: #ef9f27;
      color: #ffffff;
  }
  #tottori {
      width: 50px;
      height: 49px;
      left: 101px;
  }
  #okayama {
      width: 50px;
      height: 49px;
      top: 49px;
      left: 101px;
  }
  #shimane {
      width: 51px;
      height: 49px;
      left: 50px;
  }
  #hiroshima {
      width: 51px;
      height: 49px;
      top: 49px;
      left: 50px;
  }
  #yamaguchi {
      width: 50px;
      height: 98px;
      left: 0px;
  }
  
  /* 四国 */
  
  #shikoku {
      width: 184px;
      height: 84px;
      position: absolute;
      left: 169px;
      top: 350px;
  }
  #shikoku div.area div {
      background-color: #d08f68;
      color: #ffffff;
  }
  #kagawa {
      width: 92px;
      height: 42px;
      right: 0px;
  }
  #ehime {
      width: 92px;
      height: 42px;
      left: 0px;
  }
  #tokushima {
      width: 92px;
      height: 42px;
      right: 0px;
      top: 42px;
  }
  #kouchi {
      width: 92px;
      height: 42px;
      left: 0px;
      top: 42px;
  }
  
  /* 九州・沖縄 */
  
  #kyusyu {
      width: 152px;
      height: 247px;
      position: absolute;
      left: 0px;
      top: 235px;
  }
  #kyusyu div.area div {
      background-color: #ff7575;
      color: #ffffff;
  }
  #fukuoka {
      width: 50px;
      height: 50px;
      left: 101px;
      top: 0px;
  }
  #saga {
      width: 50px;
      height: 50px;
      left: 51px;
      top: 0px;
  }
  #nagasaki {
      width: 50px;
      height: 50px;
      left: 1px;
      top: 0px;
  }
  #oita {
      width: 50px;
      height: 50px;
      left: 101px;
      top: 50px;
  }
  #kumamoto {
      width: 50px;
      height: 100px;
      left: 51px;
      top: 50px;
  }
  #miyazaki {
      width: 50px;
      height: 50px;
      left: 101px;
      top: 100px;
  }
  #kagoshima {
      width: 68px;
      height: 49px;
      left: 83px;
      top: 150px;
  }
  #okinawa {
      width: 50px;
      height: 50px;
      left: 1px;
      top: 197px;
  }
  
  /****************************************
      レスポンシブ
  ****************************************/
  @media screen and (max-width: 776px) {
  #japan-map {
      display: flex;
      width: 100%;
      height: auto;
      flex-wrap: wrap;
      justify-content: space-around;
  }
  #japan-map p.area-title {
      display: inline-block;
      width: 100%;
      font-size: 15px;
      text-align: center;
      margin-top: 1.5em;
      margin-bottom: 1em;
      color: #000000;
  }
  #virtual-area, #abroad-area, #hokkaido-touhoku, #kantou, #tyubu, #kinki, #tyugoku, #shikoku, #kyusyu {
      display: block;
      position: static;
      margin: 0 1em 0 1em;
  }
  #japan-map div div.area {
    display: block;
    position: relative;
  }
  #japan-map div div.area-virtual,div.area-abroad {
      display: block;
      position: relative;
  }
  #virtual-area {
    height: calc(50px + 4.5em);
  }
  #abroad-area {
    height: calc(50px + 4.5em);
  }
  #hokkaido-touhoku {
      height: calc(265px + 4.5em);
  }
  #kantou {
      height: calc(174px + 4.5em);
  }
  #tyubu {
      height: calc(211px + 4.5em);
  }
  #kinki {
      height: calc(211px + 4.5em);
  }
  #tyugoku {
      height: calc(98px + 4.5em);
  }
  #shikoku {
      height: calc(84px + 4.5em);
  }
  #kyusyu {
      height: calc(247px + 4.5em);
  }
  } /* レスポンシブ max-776px */
  
  @media screen and (max-width: 500px) {
  #japan-map {
      display: block;
      width: 100%;
      height: auto;
  }
  #virtual-area, #abroad-area, #hokkaido-touhoku, #kantou, #tyubu, #kinki, #tyugoku, #shikoku, #kyusyu {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: auto;
      position: static;
      margin-left: 0px;
      margin-right: 0px;
  }
  #japan-map div div.area,
  #japan-map div div.area-virtual {
      font-size: 14px;
       display: flex;
      flex-wrap: wrap;
      width: 100%;
  }
  #japan-map div div.area,
  #japan-map div div.area-abroad {
      font-size: 14px;
       display: flex;
      flex-wrap: wrap;
      width: 100%;
  }
  #japan-map div div.area a {
      height: auto;
      width: 25%;
  }
  #japan-map div div.area-virtual a {
    height: auto;
    width: 50%;
  }

  #japan-map div div.area-abroad a {
    height: auto;
    width: 50%;
  }

  #japan-map div div.area div,
  #japan-map div div.area-virtual div {
       display: block;
      border-radius: 0px;
      position: static;
      height: auto;
      font-size: 16px;
      width: 100%;
      padding: 0.5em 0.3em 0.5em 0.3em;
  }

  #japan-map div div.area div,
  #japan-map div div.area-abroad div {
       display: block;
      border-radius: 0px;
      position: static;
      height: auto;
      font-size: 16px;
      width: 100%;
      padding: 0.5em 0.3em 0.5em 0.3em;
  }
  } 

/****************************************
      サンクス
  ****************************************/

  @media screen and (min-width:770px) {
  section.company {
    max-width: 100%;
    padding: 30px 50px;
    background-color: #FFFFFF;
}

.thanksbox {
    max-width: 80%;
    margin: 0 auto;
}

h2.ti {
    font-size: 2rem;
    margin-top: 50px;
    padding:0 0 15px 0;
}
  }

  
  @media screen and (min-width:481px) and (max-width:769px) {
    section.company {
        max-width: 100%;
        padding: 30px 50px;
        background-color: #FFFFFF;
    }
    
    .thanksbox {
        max-width: 80%;
        margin: 0 auto;
    }
    
    h2.ti {
        font-size: 2rem;
        margin-top: 50px;
        padding:0 0 15px 0;
    }
  }

  @media screen and (max-width:480px) {
    section.company {
        max-width: 100%;
        padding: 20px 20px;
        background-color: #FFFFFF;
    }
    
    .thanksbox {
        max-width: 80%;
        margin: 0 auto;
    }
    
    h2.ti {
        font-size: 2rem;
        margin-top: 50px;
        padding:0 0 15px 0;
    }
}