@charset "UTF-8";
/* ボックスレイアウト
=========================================== */
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.flex.col_1 > div {
  width: 100%; }
  @media only screen and (max-width: 767px) {
    .flex.col_1 > div {
      width: 100%; } }

.flex.flex-between.col_1 > div {
  width: 98.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_1 > div {
      width: 100%; } }

.flex.col_2 > div {
  width: 50%; }
  @media only screen and (max-width: 767px) {
    .flex.col_2 > div {
      width: 100%; } }

.flex.flex-between.col_2 > div {
  width: 48.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_2 > div {
      width: 100%; } }

.flex.col_3 > div {
  width: 33.33333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_3 > div {
      width: 100%; } }

.flex.flex-between.col_3 > div {
  width: 31.83333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_3 > div {
      width: 100%; } }

.flex.col_4 > div {
  width: 25%; }
  @media only screen and (max-width: 767px) {
    .flex.col_4 > div {
      width: 100%; } }

.flex.flex-between.col_4 > div {
  width: 23.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_4 > div {
      width: 100%; } }

.flex.col_5 > div {
  width: 20%; }
  @media only screen and (max-width: 767px) {
    .flex.col_5 > div {
      width: 100%; } }

.flex.flex-between.col_5 > div {
  width: 18.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_5 > div {
      width: 100%; } }

.flex.col_6 > div {
  width: 16.66667%; }
  @media only screen and (max-width: 767px) {
    .flex.col_6 > div {
      width: 100%; } }

.flex.flex-between.col_6 > div {
  width: 15.16667%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_6 > div {
      width: 100%; } }

.flex.col_7 > div {
  width: 14.28571%; }
  @media only screen and (max-width: 767px) {
    .flex.col_7 > div {
      width: 100%; } }

.flex.flex-between.col_7 > div {
  width: 12.78571%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_7 > div {
      width: 100%; } }

.flex.col_8 > div {
  width: 12.5%; }
  @media only screen and (max-width: 767px) {
    .flex.col_8 > div {
      width: 100%; } }

.flex.flex-between.col_8 > div {
  width: 11%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_8 > div {
      width: 100%; } }

.flex.col_9 > div {
  width: 11.11111%; }
  @media only screen and (max-width: 767px) {
    .flex.col_9 > div {
      width: 100%; } }

.flex.flex-between.col_9 > div {
  width: 9.61111%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_9 > div {
      width: 100%; } }

.flex.col_10 > div {
  width: 10%; }
  @media only screen and (max-width: 767px) {
    .flex.col_10 > div {
      width: 100%; } }

.flex.flex-between.col_10 > div {
  width: 8.5%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_10 > div {
      width: 100%; } }

.flex.col_11 > div {
  width: 9.09091%; }
  @media only screen and (max-width: 767px) {
    .flex.col_11 > div {
      width: 100%; } }

.flex.flex-between.col_11 > div {
  width: 7.59091%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_11 > div {
      width: 100%; } }

.flex.col_12 > div {
  width: 8.33333%; }
  @media only screen and (max-width: 767px) {
    .flex.col_12 > div {
      width: 100%; } }

.flex.flex-between.col_12 > div {
  width: 6.83333%; }
  @media only screen and (max-width: 767px) {
    .flex.flex-between.col_12 > div {
      width: 100%; } }

/* 游ゴシック
=========================================== */
@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 100; }

@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 200; }

@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 300; }

@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Medium");
  font-weight: 400; }

@font-face {
  font-family: "Yu Gothic","Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  src: local("Yu Gothic Bold");
  font-weight: bold; }

/* 矢印
=========================================== */
/* 角丸
=========================================== */
/* ページ設定
=========================================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-family: "-apple-system", BlinkMacSystemFont,'Noto Sans Japanese',"Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; }

.linkBox {
  cursor: pointer; }
  .linkBox:hover {
    opacity: 0.8; }

figure img {
  max-width: 100%; }

.container {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto; }
  @media only screen and (max-width: 1050px) {
    .container {
      max-width: none;
      width: 100%;
      padding-left: 3%;
      padding-right: 3%; } }

/* font size
=========================================== */
html {
  font-size: 62.5%; }

body {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 2; }
  @media only screen and (max-width: 414px) {
    body {
      font-size: 15px;
      line-height: 1.8; } }

html, body {
  color: #373737; }

/* iOSでのデフォルトスタイルをリセット
=========================================== */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer; }

input[type="submit"]:-webkit-search-decoration,
input[type="button"]:-webkit-search-decoration {
  display: none; }

input[type="submit"]:focus,
input[type="button"]:focus {
  outline-offset: -2px; }

/* clearfix
=========================================== */
.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
  overflow: hidden; }

.clearfix:after {
  clear: both; }

.clearfix {
  zoom: 1; }

.left {
  float: left; }

.right {
  float: right; }

/* リスト
=========================================== */
ul {
  list-style: none; }

/* リンク
=========================================== */
a {
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
/* 線
=========================================== */
.text-underline {
  text-decoration: underline;
}
/* flexbox
=========================================== */
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-box;
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; }
  @media only screen and (max-width: 767px) {
    .flex {
      flex-direction: column; } }

.flex.flex-between {
  justify-content: space-between; }

.flex.reverse {
  flex-direction: row-reverse; }
  @media only screen and (max-width: 767px) {
    .flex.reverse {
      flex-direction: row; } }

@media only screen and (max-width: 767px) {
  .spFlexRow {
    flex-direction: row;
    flex-wrap: nowrap; } }

/* common parts
=========================================== */
section {
  padding: 60px 0; }
  @media only screen and (max-width: 767px) {
    section {
      padding: 30px 0; } }
  section h2 {
    font-size: 28px;
    text-align: center; }
    @media only screen and (max-width: 414px) {
      section h2 {
        font-size: 24px; } }

@media only screen and (max-width: 767px) {
  .pc {
    display: none; } }

.sp {
  display: none; }
  @media only screen and (max-width: 767px) {
    .sp {
      display: block; } }

.more {
  text-align: center;
  margin-top: 1.5em; }
  .more a {
    display: inline-block;
    background-color: #00597b;
    color: #fff;
    position: relative;
    display: inline-block;
    min-width: 300px;
    padding: 5px 0;
    text-align: center;
    font-weight: bold;
    transition: .2s;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4); }
    @media only screen and (max-width: 414px) {
      .more a {
        font-size: 15px; } }
    .more a:after {
      content: "";
      display: block;
      width: 8px;
      height: 8px;
      border-bottom: 2px #fff solid;
      border-right: 2px #fff solid;
      position: absolute;
      right: 25px;
      top: 42%;
      transform: rotate(-45deg); }
    .more a:hover {
      text-decoration: none;
      opacity: 0.8; }

/* header
=========================================== */
header h1 {
  padding: 1.5em; }
  @media only screen and (max-width: 1000px) {
    header h1 {
      padding: 1em;
      position: relative; } }
  header h1 img {
    vertical-align: bottom; }
    @media only screen and (max-width: 1000px) {
      header h1 img {
        width: 180px;
        vertical-align: middle; } }

header > .flex {
  position: relative; }

header #spMenu {
  display: none; }
  @media only screen and (max-width: 1000px) {
    header #spMenu {
      display: block;
      position: absolute;
      width: 72px;
      height: 72px;
      right: 0;
      top: 0;
      padding-top: 22px; }
      header #spMenu span {
        display: block;
        width: 24px;
        height: 2px;
        background-color: #494446;
        margin-left: auto;
        margin-right: auto;
        margin-top: 6px;
        transition: .2s; }
      header #spMenu.open {
        z-index: 10;
        position: fixed;
        top: 30px; }
        header #spMenu.open span {
          background-color: #fff; }
        header #spMenu.open span:nth-child(1) {
          -webkit-transform: translateY(5px) rotate(-315deg);
          transform: translateY(5px) rotate(-315deg); }
        header #spMenu.open span:nth-child(2) {
          opacity: 0; }
        header #spMenu.open span:nth-child(3) {
          -webkit-transform: translateY(-11px) rotate(315deg);
          transform: translateY(-11px) rotate(315deg); } }
  @media only screen and (max-width: 414px) {
    header #spMenu {
      width: 60px;
      height: 60px;
      padding-top: 15px; } }

@media only screen and (max-width: 1000px) {
  header #regist_login_btn {
    display: none; } }

header #regist_login_btn .flex {
  justify-content: flex-end; }

header #regist_login_btn a.contact {
  font-size: 12px;
  color: #373737;
  display: inline-block;
  margin-right: 30px;
  position: relative;
  padding-left: 20px; }
  header #regist_login_btn a.contact:before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background-color: #00597b;
    border-radius: 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    position: absolute;
    left: 0;
    top: 6px; }
  header #regist_login_btn a.contact:after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-bottom: 2px #fff solid;
    border-right: 2px #fff solid;
    position: absolute;
    left: 3px;
    top: 10px;
    transform: rotate(-45deg); }

header #regist_login_btn a {
  transition: .2s; }
  header #regist_login_btn a:hover {
    text-decoration: none;
    opacity: 0.8; }

header #regist_login_btn a.regist,
header #regist_login_btn a.login {
  display: block;
  padding: 15px 3em;
  font-size: 15px;
  line-height: 1;
  font-weight: bold; }

header #regist_login_btn a.regist {
  background-color: #e4e4e4;
  color: #00597b; }

header #regist_login_btn a.login {
  background-color: #00597b;
  color: #fff; }

@media only screen and (max-width: 1000px) {
  header #gnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.7); }
    header #gnav:not(.open) {
      opacity: 0;
      visibility: hidden;
      transition: visibility 0s 0.2s, opacity 0.2s 0s cubic-bezier(0.4, 0, 0.6, 1); }
    header #gnav.open {
      overflow: auto;
      visibility: visible;
      transition: opacity 0.25s 0s cubic-bezier(0, 0, 0.2, 1);
      opacity: 1; } }

header #gnav ul {
  margin: 14px 0; }
  @media only screen and (max-width: 1000px) {
    header #gnav ul {
      padding-top: 90px; } }
  header #gnav ul li a {
    color: #373737;
    font-size: 15px;
    font-weight: bold;
    position: relative;
    padding: 10px 2.6em;
    transition: .2s; }
    @media only screen and (max-width: 1000px) {
      header #gnav ul li a {
        display: block;
        width: 100%;
        text-align: center;
        color: #fff;
        padding-top: 1em;
        padding-bottom: 1em; } }
    header #gnav ul li a:before {
      content: "";
      display: block;
      width: 1px;
      height: 40px;
      background-color: #626262;
      position: absolute;
      left: 0;
      top: 0; }
    header #gnav ul li a:hover {
      text-decoration: none;
      opacity: 0.8; }
    header #gnav ul li a.active {
      color: #00597B;
      text-decoration: underline; }

/* footer
=========================================== */
footer {
  background-color: #00597B;
  padding: 2em 0; }
  footer .container {
    max-width: 1260px;
    margin-left: auto;
    margin-right: auto; }
    @media only screen and (max-width: 1350px) {
      footer .container {
        max-width: none;
        width: 100%;
        padding-left: 5%;
        padding-right: 5%; } }
    footer .container > .flex > div {
      width: 50%; }
      @media only screen and (max-width: 767px) {
        footer .container > .flex > div {
          width: 100%; } }
    footer .container > .flex .ft_logo {
      align-items: center; }
      footer .container > .flex .ft_logo > div:nth-child(1) {
        width: 20%; }
        @media only screen and (max-width: 767px) {
          footer .container > .flex .ft_logo > div:nth-child(1) {
            width: 100%; }
            footer .container > .flex .ft_logo > div:nth-child(1) img {
              width: 63px; } }
        footer .container > .flex .ft_logo > div:nth-child(1) img {
          max-width: 100%; }
      footer .container > .flex .ft_logo > div:nth-child(2) {
        width: 76%; }
        @media only screen and (max-width: 767px) {
          footer .container > .flex .ft_logo > div:nth-child(2) {
            width: 100%; } }
    footer .container > .flex p {
      font-size: 14px;
      line-height: 1.4;
      color: #fff; }
    footer .container > .flex p.addr a {
      color: #fff; }
    footer .container > .flex p.name {
      font-weight: bold;
      margin-bottom: 8px; }
    footer .container > .flex a.telLink {
      pointer-events: none; }
      @media only screen and (max-width: 767px) {
        footer .container > .flex a.telLink {
          pointer-events: auto;
          text-decoration: underline; } }
    footer .container > .flex p.copyright {
      text-align: right;
      font-size: 10px;
      margin-top: 20px; }
      @media only screen and (max-width: 767px) {
        footer .container > .flex p.copyright {
          text-align: center; } }
    footer .container ul {
      justify-content: flex-end; }
      @media only screen and (max-width: 767px) {
        footer .container ul {
          margin-top: 14px;
          margin-bottom: 14px; } }
      @media only screen and (max-width: 767px) {
        footer .container ul li {
          line-height: 1.2; } }
      footer .container ul li:nth-child(1) {
        margin-right: 30px; }
        @media only screen and (max-width: 767px) {
          footer .container ul li:nth-child(1) {
            margin-right: 0;
            margin-bottom: 4px; } }
      footer .container ul li a {
        font-size: 12px;
        position: relative;
        color: #fff;
        display: inline-block;
        padding-left: 20px; }
        footer .container ul li a:after {
          content: "";
          display: block;
          width: 4px;
          height: 4px;
          border-bottom: 2px #fff solid;
          border-right: 2px #fff solid;
          position: absolute;
          left: 3px;
          top: 10px;
          transform: rotate(-45deg); }
          @media only screen and (max-width: 767px) {
            footer .container ul li a:after {
              top: 5px; } }

/* 下層共通パーツ
=========================================== */
#page_visual {
  background-color: #F2F6F5;
  background-image: url(/common/img/under_h1.png);
  background-repeat: no-repeat;
  background-position: right center; }
  @media only screen and (max-width: 414px) {
    #page_visual {
      background-image: url(/common/img/under_h1_sp.jpg);
      background-size: 100% auto; } }
  #page_visual .breadcrumbs a {
    color: #000;
    font-size: 12px; }
    #page_visual .breadcrumbs a.arrow {
      position: relative;
      padding-right: 18px;
      margin-right: 6px; }
      #page_visual .breadcrumbs a.arrow:after {
        content: "";
        display: block;
        width: 4px;
        height: 4px;
        border-bottom: 2px #000 solid;
        border-right: 2px #000 solid;
        position: absolute;
        right: 0;
        top: 7px;
        transform: rotate(-45deg); }
  #page_visual h1 {
    font-size: 32px;
    color: #00597B;
    text-align: center;
    padding: 1.4em 0 2.6em 0; }
    @media only screen and (max-width: 1000px) {
      #page_visual h1 {
        font-size: 24px; } }
    @media only screen and (max-width: 414px) {
      #page_visual h1 {
        font-size: 18px;
        padding-bottom: 1.8em;
        padding-top: 1.0em; } }

section .block {
  margin-top: 2.6em; }
  @media only screen and (max-width: 414px) {
    section .block {
      margin-top: 1.8em; } }

section h2.bar {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 24px; }
  section h2.bar:before {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background-color: #00597B;
    border-radius: 2px;
    position: absolute;
    left: calc(50% - 20px);
    bottom: 0; }

/* このサイトは日本政府公式Webサイトです */
.l-header__reed {
  display: block;
  min-height: 33px;
  padding: 6px 23px 0 23px;
  background: url("../img/icon_arrow-down.png") no-repeat calc(100% - 25px) 15px;
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: right;
  /*&.is-scroll {
    display: none;
  }*/ }

@media screen and (max-width: 767px) {
  .l-header__reed {
    min-height: 30px;
    padding: 4px 15px 0px 15px;
    background: url("../img/icon_arrow-down.png") no-repeat 284px 15px;
    text-align: left; } }

.l-header__reed-btn {
  display: inline-block;
  padding-right: 12px;
  padding-left: 12px; }

@media screen and (max-width: 767px) {
  .l-header__reed-btn {
    border: none; } }

@media screen and (max-width: 767px) {
  .l-header__reed-btn {
    padding-left: 5px; } }

.l-header__reed__detail {
  display: none;
  margin-top: 10px;
  margin-bottom: 10px; }

.l-header__reed__detail::after {
  visibility: hidden;
  display: block;
  content: " ";
  clear: both;
  height: 0; }

.l-header__reed__detail__wrapper {
  width: 50%;
  float: left;
  text-align: left; }

@media screen and (max-width: 767px) {
  .l-header__reed__detail__wrapper {
    width: 100%; } }

.l-header__reed__detail__img {
  float: left;
  width: 20%;
  text-align: right;
  padding-right: 10px; }

.l-header__reed__detail__img__img {
  max-width: 32px;
  width: 100%; }

.l-header__reed__detail__text-wrap {
  float: left;
  width: 80%; }

.l-header__reed__detail__title {
  font-weight: bold;
  font-size: 14px; }

.l-header__icon_japan {
  position: relative;
  top: 4px;
  padding-right: 10px; }

/*# sourceMappingURL=common.css.map */