@charset "utf-8";
    
body {
  margin: 0;
  padding: 0
}

#contents {
  margin: 0;
  padding: 0;
}

#headerCont {
  width: 100%;
  background-color: #ececec
}

#headerBox {
  width: 1010px;
  margin: 0 auto;
  padding: 16px 0 16px 120px;
  overflow: hidden
}

h1, h2, h3, h4, h5, p, div, a {
  font-family: gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  color: #6a696c;
}

.sp{display: none;}
.pc{display: block;}

.header-l {
  width: 30%;
  float: left;
  text-align: center;
  color: #bababa;
  letter-spacing: .1rem;
  font: 14px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.hesder-middle {
  border-left: 1px solid #bababa;
  border-right: 1px solid #bababa
}

.header-l a {
  color: #bababa;
  text-decoration: none
}

.header-l a:hover {
  color: #ef3040
}

#logo {
  width: 350px;
  margin: 30px 0;
}

#gender {
  width: 100%;
  text-align: center
}

#gender_all {
  width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}

#gender2 {
  width: 15%;
  text-align: left;
  float: left
}

#gender3 {
  width: 50%;
  text-align: center;
  float: left
}

.cf:before, .cf:after {
  content: " ";
  display: table
}

.cf:after {
  clear: both
}

.cf {
  *zoom: 1
}

#gender p {
  color: #fff;
  background-color: #6a696c;
  padding: 44px 0;
  margin: 0;
  font: 24px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  color: #6a696c;
}


#gender2 p, #gender3 p {
  color: #6a696c;
  background-color: #fff;
  padding: 5px 0;
  margin: 20px 0;
  letter-spacing: .2em;
}

.txt_mhl {
  font: 24px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.txt_mhwhg {
  font: 22px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.middleLine2 {
  border-right: 1px solid #6a696c;
}

#gender p img {
  width: 108px
}

#contentsBox {
  width: auto;
padding: 20px 10px 150px;
	background-color: #ececec;
}

#contentsList {
  max-width: 1000px;
  margin: 0 auto 140px;
  overflow: hidden
}

.contentsList-l {
  font-size: 12px;
  width: 110px;
  float: left;
  text-align: center;
  padding: 20px 0
}

.contentsList-l a {
  color: #6a696c;
  text-decoration: none
}

.contentsList-l a:hover {
  color: #9EA1A2;
}

.localTitle {
  max-width: 1000px;
    text-align: center;
    margin: 0 auto 30px;
    width: 90%;
}

.localTitle2 {
  max-width: 1000px;
  text-align: center;
  margin: 100px auto 30px;
width: 90%;
}

.localTitle h2, .localTitle2 h2 {
  margin: 0;
  padding: 0;
  color: #6a696c;
  font: 20px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  letter-spacing: .2rem;
	  text-align: left;
}

.localTitle h3, .localTitle2 h3 {
  margin: 6px 0 0;
  padding: 0;
  color: #6a696c;
  font-size: 12px;
	text-align: left;
}

.localLine {
  max-width: 1000px;
width: 90%;
  overflow: hidden;
  margin: 10px auto 0;
  background-color: #fff;
	display:flex;
}

.localLeft {
  width: 50%;
  padding: 41px 0 40px 30px;
  font: 18px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  background-color: #fff;
  height: auto;
}

.localLeft2 {
  width: 50%;
  padding: 70px 0 70px 30px;
  font: 18px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  background-color: #fff;
}

.mac.chrome .onlineLocal .localLeft, .mac.chrome .onlineLocal .localLef2 {
  border-right: none
}


.localRight {
  width: 50%;
  float: right;
  color: #EF303F;
  background-color: #fff;
  padding: 40px 0;
  text-align: center;
  font: 18px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

#footer {
  width: 100%;
  text-align: center;
  background-color: #6a696c;
  padding: 30px 0;
  margin-top: 50px
}

#footer p {
  color: #fff;
  font: 12px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.localRight2 {
  overflow: hidden;
  width: 50%;
  float: right;
  background-color: #fff;
  line-height: 18.5px
}

.mac.chrome .localRight2 {
  overflow: hidden;
  width: 50%;
  float: right;
  background-color: #fff;
  height: auto;
  border-left: 1px solid #ececec
}

.localgender {
  width: 118px;
  float: left;
  text-align: center;
  background-color: #fff;
  padding: 18.5px 0;
  color: #6a696c;
  border-right: 1px solid #ececec
}

.localday {
  color: #6a696c;
  float: right;
  text-align: center;
  background-color: #fff;
  padding: 18.5px 0;
  width: 280px
}

.localgender3 {
  width: 118px;
  padding: 46px 0;
  float: left;
  text-align: center;
  background-color: #fff;
  color: #6a696c;
  border-right: 1px solid #ececec
}

.localday2 {
  color: #6a696c;
  padding: 46px 0;
  float: right;
  text-align: center;
  background-color: #fff;
  width: 280px
}

.mg1 {
  border-bottom: 1px solid #ececec
}

.ml10 {
  margin-left: 10px
}

.spBlock {
  display: none
}

.localLine a .localLeft, .localLine a .localLeft2 {
  color: #000
}

.localLine a:hover .localLeft {
  color: #ef3040
}

.localBanner {
  width: 1000px;
  overflow: hidden;
  padding-top: 50px;
  margin: 0 auto
}

.mb50 {
  margin-bottom: 50px
}

.localBannerLeft {
  width: 480px;
  float: left;
  background-color: #fff;
  text-align: center
}

.localBannerRight {
  width: 480px;
  float: right;
  background-color: #fff;
  text-align: center
}

.localBannerLeft1 {
  font-size: 24px;
  color: #6a696c;
  padding: 50px 0 0;
  font: 24px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.localBannerLeft2 {
  font: 12px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  color: #000;
  padding: 10px 0 30px
}

.localBannerLeft3 {
  font-size: 24px;
  color: #6a696c;
  padding: 40px 0 0;
  font: 24px gill sans, gill sans mt, ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif
}

.localBannerLeft4 {
  font: 12px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  color: #000;
  padding: 20px 0 50px
}

.localBannerLeft5 {
  font: 12px ヒラギノ角ゴ pro w3, hiragino kaku gothic pro, メイリオ, Meiryo, ＭＳ Ｐゴシック, ms pgothic, Osaka, sans-serif;
  color: #000;
  padding: 10px 0 42px
}

.notice {
  font-size: 10px
}
.headerTitle {
    max-width: 1000px;
    text-align: center;
    margin: 0 auto 30px;
    width: 90%;
}

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

    .sp{display: block;}
    .pc{display: none;}
  p{
  font-size:14px;color: #6a696c;
}
img {
  max-width: 100%;
  height: auto;
  width //:auto}
  #container {
    width: 100%
  }
  .pcBlock {
    display: none
  }
  .spBlock {
    display: block
  }
  #contentsBox {
    padding: 0 10px;
  }
  #contentsList {
    width: 100%;
    margin-bottom: 20%
  }
  .contentsList-l {
    width: 33%;
    margin-bottom: 2px
  }
  #headerBox {
    width: 100%;
    padding: 16px 0
  }
  .header-l {
    width: 30%
  }
  .hesder-top {
    width: 38%;
    padding-top: 2%
  }
  .hesder-middle {
    border-left: 2px solid #bababa;
    border-right: 2px solid #bababa;
    padding: 4% 0
  }
  .hesder-end {
    padding: 4% 0
  }
  .localTitle, .localTitle2 {
    width: 90%
  }
  .localLine {
    width: 90%
  }
  .localLeft, .localLeft2 {
    width: 55%;
  }
  .localRight {
    width: 50%;
    font-size: 13px;
    padding: 45px 0 0
  }
  .onlineLocal .localLeft, .onlineLocal .localLeft2 {
    width: 98%;
    float: none;
    margin-bottom: 1px;
    border-right: none;
    border-bottom: 1px solid #ececec;
    padding: 41px 0 40px 30px
  }
  .onlineLocal .localRightBox, .onlineLocal .localRight2 {
    width: 100%;
    overflow: hidden;
    float: none;
    height: auto
  }
	
  .localgender {
    width: 55%;
    font-size: 14px;
    padding: 20px 0 21px 5%;
    text-align: left;
    border-right: none;
    border-right: 1px solid #ececec
  }
  .localday {
    width: 39.8%;
    font-size: 14px;
    padding: 20.5px 0
  }
  .localgender3 {
    width: 56%;
    font-size: 14px;
    text-align: left;
    padding: 20px 0 20px 4%
  }
  .localday2 {
    width: 39.8%;
    font-size: 14px;
    padding: 18.5px 0
  }
  .middleLine {
    border-left: 2px solid #ececec;
    border-right: 2px solid #ececec
  }
 
  .localBanner {
    width: 90%;
    margin: 0 auto
  }
  .localBannerLeft {
    width: 100%;
    float: none;
    margin-bottom: 20px
  }
  .localBannerRight {
    width: 100%;
    float: none
  }
  .notice {
    font-size: 12px;
    width: 80%;
    margin: 0 auto;
    padding-top: 20px
  }
  .txt_mhwhg {
    font-size: 16px
  }
  #gender2 {
    width: 30%;
	}
}

  @media screen and (max-width:640px) {
  img {
    max-width: 100%;
    height: auto;
    width //:auto}
    #container {
      width: 100%
    }
    .pcBlock {
      display: none
    }
    .spBlock {
      display: block
    }
    #contentsBox {
      padding: 0 10px;
    }
    #contentsList {
      width: 100%;
      padding-top: 25px;
    }
    .contentsList-l {
      width: 25%;
	  padding: 10px 0;
    }
    #headerBox {
      width: 100%;
      padding: 16px 0
    }
    .header-l {
      font-size: 10px;
      width: 30%
    }
    .hesder-top {
      width: 38%;
      padding-top: 0
    }
    .hesder-middle {
      border-left: 1px solid #bababa;
      border-right: 1px solid #bababa;
      padding: 4% 0
    }
    .hesder-end {
      padding: 4% 0
    }
    #logo {
      width: 60%
    }
    .localTitle {
      width: 100%
    }
    .localTitle2 {
      width: 100%;
      margin: 50px auto 30px
    }
    .localLine {
      width: 100%;
    background-color: transparent;
    display: flex;
    align-items: center;
    align-items: stretch;
    }
    .localLeft, .localLeft2 {
      width: 45%;
      font-size: 13px;
      border-right: none;
      padding: 20px;
      line-height: 1.6;
      display: flex;																																																																																				
      align-items: center;
    }
    .localRight {
      width: 55%;
      font-size: 13px;
      padding: 20px 3px;
      line-height: 1.6 !important;
      text-align: left;
      display: flex;
      align-items: center;
}
    .localRight2 {
      width: 100%;
      background-color: transparent
    }
    .onlineLocal .localLeft, .onlineLocal .localLeft2 {
      width: 92%;
      float: none;
      margin-bottom: 1px
    }
    .onlineLocal .localRightBox, .onlineLocal .localRight2 {
      width: 100%;
      overflow: hidden;
      float: none
    }
    .mg1 {
      border-bottom: 2px solid #ececec
    }
    .localgender {
      width: 30%;
      font-size: 10px;
      text-align: left;
      border-right: none;
      padding: 20px 0 21px 10%
    }
    .localday {
      width: 59.4%;
      font-size: 10px
    }
    .localgender3 {
      width: 30%;
      font-size: 10px;
      text-align: left;
      padding: 20px 0 20px 10%
    }
    .localday2 {
      width: 59.4%;
      font-size: 10px;
      padding: 20px 0
    }
    .middleLine {
      border-left: 2px solid #ececec;
      border-right: 2px solid #ececec
    }
    .localBanner {
      width: 90%
    }
    .localBannerLeft {
      width: 100%;
      float: none;
      margin-bottom: 40px
    }
    .localBannerRight {
      width: 100%;
      float: none
    }
    .notice {
      font-size: 12px;
      width: 90%
    }
	#gender2 {
    width: 30%;
	}
  }

@media screen and (max-width:320px) {
  .localLeft {
    width: 50%
  }
  .localRight {
    width: 50%
  }
  .onlineLocal .localRightBox, .onlineLocal .localRight2 {
    width: 100%
  }
  .localgender, .localgender3 {
    width: 30%
  }
  .localday {
    width: 59.4%;
    padding: 20.5px 0
  }
  .localday2 {
    width: 59.4%;
    padding: 20px 0
  }
  .notice {
    font-size: 12px;
    width: 90%;
    margin: 0 auto;
    padding-top: 20px
  }
  .txt_mhwhg {
    font-size: 16px
  }
  #gender2 {
    width: 30%;
	}
}