@charset "utf-8";

/* CSSをリセットして書き直す
------------------------------------------------------------------ */
.newStyle * {
  box-sizing: border-box;
  background:transparent;
  color:#333;
  font-weight:normal;
  margin:0;
  padding:0;
  text-align:justify;
}
.newStyle img {
  max-width:100%;
  height:auto;
  vertical-align: top;
}
.wrap {
  width:100%;
  padding:1em;
}
@media screen and (min-width: 789px) {
  .wrap {
    width:1100px;
    margin:0 auto;
  }
}
.top-intro {
  margin:3em auto 5em;
}
.top-intro-header {
  margin-bottom:3em;
}
.top-intro-title,
.top-intro-text {
  text-align:center;
}
.top-intro-menu {
  margin-top:3em;
  border:4px solid #1e6aab;
  background-size:cover;
  border-radius:1em;
  padding:1em;
}
.top-intro-menu-title {
  text-align:center;
}
.top-menu-flex,
.top-intro-other {
  width:100%;
  display:flex;
  justify-content: space-between;
  flex-wrap:wrap;
}
.top-menu-flex .item {
  width:100%;
  margin-top:1.5em;
  transition: all 0.5s;
}
.top-menu-flex .item a {
  display:block;
  background:#ff8;
  border:4px solid #62d0d1;
  border-radius:1em;
  overflow:hidden;
}
.top-menu-flex .item img {
  transition: all 0.5s;
}
.top-menu-flex .item img:hover {
  opacity:0.9;
  transform: scale(1.05);
}
.top-menu-flex .item p {
  padding:0 0.5em;
}
.top-other-box {
  width:100%;
  margin-top:1em;
  border:2px solid #e0e0e0;
  border-radius:1em;
  padding:1em;
}
.box-half {
  width:100%;
}
@media screen and (min-width: 789px) {
  .top-intro-menu {
    background:url(../img/index/bg-top-menu.jpg) no-repeat top center;
  }
  .top-menu-flex:before,
  .top-menu-flex:after {
    width:23%;
    content:"";
    order:99;
  }
  .top-menu-flex .item {
    width:23%;
    font-size:.8em;
    line-height:1.5em;
  }
  .box-half {
    width:49%;
  }
}
.top-intro-other {
  margin-top:3em;
}
.box01-a {
  background:#cb1f0c;
  color:#fff !important;
}
.box01-b {
  border:4px solid #cb1f0c;
}
.box02-a {
  background:#c99b10;
  color:#fff !important;
}
.box02-b {
  border:4px solid #eebd2b;
}
.box03-a {
  background:#4bb12e;
  color:#fff !important;
}
.box03-b {
  border:4px solid #4bb12e;
}
.box04-a {
  background:#42a7d2;
  color:#fff !important;
}
.box04-b {
  border:4px solid #42a7d2;
}
.box05-a {
  background:#ea66bf;
  color:#fff !important;
}
.box05-b {
  border:4px solid #ea66bf;
}
.box06-a {
  background:#ef6c40;
  color:#fff !important;
}
.box06-b {
  border:4px solid #ef6c40;
}
.top-other-box {
  display:block;
}
.top-other-box .text {
  width:100%;
}
.top-other-box .text p {
  line-height:1.8em;
}
.top-other-box .image {
  width:100%;
  margin-top:1.5em;
}
.top-other-box .image img {
  width:100%;
}
.top-sub-title {
  border-bottom:1px dashed #ccc;
  line-height:1.4em;
  margin:0 0 10px;
  padding:0 0 10px;
}
.top-button {
  display:block;
  width:100%;
  border-radius:.5em;
  font-size:1.25em;
  line-height:1.5em;
  margin:1em 0 0;
  padding:1em;
  text-align:center;
}
.box-half .top-button {
  width:100%;
}
@media screen and (min-width: 789px) {
  .top-other-box {
    display:flex;
    justify-content: space-between;
  }
  .top-other-box .text {
    width:70%;
  }
  .top-other-box .image {
    width:28%;
    margin-top:0;
  }
.top-other-box.box01-b,.top-other-box.box06-b{display: block !important;}
.top-other-box.box01-b .flexarea .text{width:70%;}
.top-other-box.box01-b .flexarea .image{width:28%;}
  .box-half .text {
    width:100%;
  }
  .top-button {
    width:500px;
    letter-spacing: .15em;
  }
  .box-half .top-button {
    width:100%;
  }
}
.top-other-graph {
  width:100%;
  border:4px solid #1e6aab;
  border-radius:1em;
  padding:1em;
}
.top-other-human {
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  margin:1em auto 0;
}
.top-other-graph-title {
  border-bottom:2px dashed #1e6aab;
  padding:0 0 10px;
  text-align:center;
}
.top-other-tabcloud {
  width:49%;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
}
.top-other-humanimage {
  display:none;
}
.top-other-tabcloud span {
  width:100%;
  display:block;
  color:#125b6b;
  border-bottom:1px dashed #74d6d6;
  font-size:.8em;
  margin:.25em 5px;
  padding:.5em 1em;
}
@media screen and (min-width: 789px) {
  .top-other-human {
    align-items:center;
  }
  .top-other-tabcloud span {
    width:auto;
  }
  .top-other-tabcloud {
    width:40%;
  }
  .top-other-humanimage {
    display:block;
    width:20%;
    padding:0 1em;
  }
}

/* pages
------------------------------------------------------- */
.page-section {
  margin:3em auto;
}
.page-section p {
  font-size:1rem;
  line-height:1.8em;
}
.page-section p + p {
  margin-top:10px;
}
.title-section-main {
  margin:  0;
  font-size:1.5em;
  border-bottom: solid 3px;
  padding-bottom: 10px;
  margin-bottom: 20px;
  position:  relative;
  font-weight:  normal;
  line-height:1.5em;
}
.title-section-main:before {
  content:  '';
  width: 100%;
  height: 1px;
  background-color: #000;
  display:  block;
  position:  absolute;
  left:  0;
  bottom: -6px;
}
.title-section-sub {
  margin-top: 20px!important;
  color:#1e6aab;
  font-size: 20px;
  font-weight: bold;
  margin-bottom:15px;
  line-height:1.5em;
}

.image-section .text {
  width:100%;
}
.image-section .image {
  margin-top:1.5em;
  width:100%;
}
.image-section img {
  width:100%;
  height:auto;
}
@media screen and (min-width: 789px) {
  .image-section:after {
    content: "";
    clear: both;
    display: block;
    height:0;
  }
  .image-section .text {
    width:49%;
    float:left;
  }
  .image-section .image {
    width:49%;
    float:right;
    margin-top:0;
  }
}
.point-ul {
  margin:0 0 1.5em 1.25em;
  font-size:1rem;
  line-height:1.8em;
}
.point-ul li:before {
  content:"■";
  display:block;
  float:left;
  margin-left:-1.25em;
  color:#dc6796;
}

.voice-dl {
  display:flex;
  justify-content: space-between;
  font-size:1rem;
  line-height:1.8em;
  flex-wrap:wrap;
}
.men {
  border:1px solid #65abde;
}
.women {
  border:1px solid #dc6796;
}
.voice-dl + .voice-dl {
  margin-top:1em;
}
.voice-dl dt {
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  color:#fff;
  font-size:1.25em;
  font-weight:bold;
  padding:10px 1em;
}
.men dt {
  background:#65abde;
}
.women dt {
  background:#dc6796;
}
.voice-dl dd {
  width:100%;
  display:flex;
  align-items:center;
  padding:1em;
}
@media screen and (min-width: 789px) {
  .voice-dl dt {
    width:15%;
    padding:1em;
  }
  .voice-dl dd {
    width:85%;
  }
}
.chapter + .chapter {
  margin-top:3em;
}
.page-cluster .page-section:first-of-type {
  margin-top:0;
}