/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
@wht: #fff;
@blue: #2478b0;
@background: #edf2ff;
@background1: #0880bd;
@titlecolor: #217fbc;

#ap_create {
  body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed,
  figure, figcaption, footer, header, hgroup,
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  max-width: none;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure,
  footer, header, hgroup, menu, nav, section {
  display: block;
  }
  body {
  line-height: 1;
  }
  ol, ul {
  list-style: none;
  }
  blockquote, q {
  quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  content: '';
  content: none;
  }
  table {
  border-collapse: collapse;
  border-spacing: 0;
  }

  h1::before, h2::before, h3::before, h4::before, h5::before, h6::before, p::before, blockquote::before, pre::before,
  a::before, abbr::before, acronym::before, address::before, big::before, cite::before, code::before,
  del::before, dfn::before, em::before, img::before, ins::before, kbd::before, q::before, s::before, samp::before,
  small::before, strike::before, strong::before, sub::before, sup::before, tt::before, var::before,
  b::before, u::before, center::before,
  dl::before, dt::before, dd::before, ol::before, ul::before, li::before,
  fieldset::before, form::before, label::before, legend::before,
  table::before, caption::before, tbody::before, tfoot::before, thead::before, tr::before, th::before, td::before,
  article::before, aside::before, canvas::before, details::before, embed::before,
  figure::before, figcaption::before, footer::before, header::before, hgroup::before,
  menu::before, nav::before, output::before, ruby::before, section::before, summary::before,
  time::before, mark::before, audio::before, video::before, h1::after, h2::after, h3::after, h4::after, h5::after, h6::after, p::after, blockquote::after, pre::after,
  a::after, abbr::after, acronym::after, address::after, big::after, cite::after, code::after,
  del::after, dfn::after, em::after, img::after, ins::after, kbd::after, q::after, s::after, samp::after,
  small::after, strike::after, strong::after, sub::after, sup::after, tt::after, var::after,
  b::after, u::after, center::after,
  dl::after, dt::after, dd::after, ol::after, ul::after, li::after,
  fieldset::after, form::after, label::after, legend::after,
  table::after, caption::after, tbody::after, tfoot::after, thead::after, tr::after, th::after, td::after,
  article::after, aside::after, canvas::after, details::after, embed::after,
  figure::after, figcaption::after, footer::after, header::after, hgroup::after,
  menu::after, nav::after, output::after, ruby::after, section::after, summary::after,
  time::after, mark::after, audio::after, video::after,#wpadminbar:not(*)  {
    display: none;
  }
//   *:not(#wpadminbar *) {
//     font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO" !important;
//     line-height: normal;
//   }
  p, span, a, div, pre, li, td, label, i {
    margin: 0;
    font-size: 14px;
    color: #414141;
  }
  p {
    font-size: 16px;
    line-height: 30px;
  }
  h2 {
    margin: 0;
    font-size: 25px;
  }
  h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 300;
  }
  h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 300;
  }
  h5 {
    margin: 0;
    font-size: 18px;
  }
  img {
    max-width: 100%;
  }
  .clearfix::after,
  .clearfix::before {
    content: "";
    clear: both;
    display: block;
  }
  .column2 {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    margin-right: -0.25em;
    @media (max-width: 1023px) {
      width: 100%;
    }
  }
  .column3 {
    display: inline-block;
    width: 33.3333333333%;
    vertical-align: top;
    margin-right: -0.25em;
  }
  .column4 {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-right: -0.25em;
  }
  .column5 {
    display: inline-block;
    width: 20%;
    vertical-align: top;
    margin-right: -0.25em;
  }
  .column6 {
    display: inline-block;
    width: 16.6666666666%;
    vertical-align: top;
    margin-right: -0.25em;
  }
  .column7 {
    display: inline-block;
    width: 14.2857142%;
    vertical-align: top;
    margin-right: -0.25em;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .visible-tablet {
      @media (min-width: 1023px) {
        display: none;
      }
      @media (max-width: 1023px) {
        display: block;
      }
    }
  .visible-phone {
    @media (min-width: 768px) {
      display: none;
    }
    @media (max-width: 767px) {
      display: block;
    }
  }
  .hidden-tablet {
    @media (min-width: 1023px) {
      display: block;
    }
    @media (max-width: 1023px) {
      display: none !important;
    }
  }
  .hidden-phone {
    @media (min-width: 768px) {
      display: block;
    }
    @media (max-width: 767px) {
      display: none !important;
    }
  }
  .hidden {
    display: none !important;
  }
  .float {
    &-right {
      float: right;
    }
    &-left {
      float: left;
    }
  }
  .flex {
    &-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &-column {
      display: flex;
      justify-content: center;
      flex-flow: column;
      align-items: center;
    }
    &-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-around {
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }
  .text-all_center {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .ap_btn {
    min-width: 320px;
    width: auto;
    max-width: 350px;
    margin: 20px auto 0;
    padding: 15px 20px;
    border: 2px solid @background1;
    border-radius: 30px;
    position: relative;
    display: block;
    text-align: center;
    color: @background1;
    font-weight: 700;
    text-decoration: none;
    & a {
      text-decoration: none;
      color: @background1;
    }
    @media (max-width: 767px) {
      min-width: fit-content;
      max-width: 280px;
      min-width: 250px;
      @media (max-width: 374px) {
        min-width: 200px;
      }
      font-size: 12px;
    }
    &:after {
      content: "";
      width: 10px;
      height: 10px;
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 10px;
      margin: auto;
      border-top: 2px solid @background1;
      border-right: 2px solid @background1;
      transform: rotate(45deg);
    }
    &:hover {
      border: 2px solid transparent;
      background: @background1;
      color: @wht;
      & a {
        text-decoration: none;
        color: @wht;
      }
      &::after {
        border-top: 2px solid @wht;
        border-right: 2px solid @wht;
      }
    }
  }
  .ap_info_button {
    width: 280px;
    padding: 25px 40px;
    background: #2478b0;
    margin: 30px auto !important;
    position: relative;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #ddd;
    &:hover {
      box-shadow: 0 3px 0 #ddd;
    }
    &:active {
      top: 3px;
      box-shadow: none;
    }
    a {
      color: #fff;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      margin: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }
  }
  .fas, .fa, .far {
    font-family: "Font Awesome 5 Free" !important;
  }
  .menu {
    .menu-item {
      margin-top: 20px;
    }
    .sub-menu {
      padding-left: 30px;
      display: none;
      position: relative;
      & > li {
        a {
          color: #808080;
        }
        &::after {
          border-top: 1px solid #dadada;
          border-right: 1px solid #dadada;
          content: "";
          position: absolute;
          left: 10px;
          top: 50%;
          transform: rotate(45deg);
          display: block;
          width: 8px;
          height: 8px;
          bottom: 50%;
          margin: auto;
        }
      }
    }
    .open + .sub-menu {
      display: block;
    }
  }
  .slick-prev {
    left: 15%;
    background: #fff !important;
    width: 40px;
    height: 40px;
    z-index: 1;
    box-shadow: 1px 1px 0px 1px #0880bd;
    border: 2px solid #0880bd;
    transition: ease all 0.6s;
    &::before {
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #0880bd;
      border-right: 2px solid #0880bd;
      display: block;
      transform: rotate(225deg);
      left: 0;
      right: 0;
      margin: auto;
    }
    @media (max-width: 1024px) {
      left: 3%;
    }
  }
  .slick-next {
    right: 15%;
    background: #fff !important;
    width: 40px;
    height: 40px;
    box-shadow: -1px 1px 0px 1px #0880bd;
    border: 2px solid #0880bd;
    transition: ease all 0.6s;
    &::before {
      content: "";
      width: 10px;
      height: 10px;
      border-top: 2px solid #0880bd;
      border-right: 2px solid #0880bd;
      display: block;
      transform: rotate(45deg);
      left: 0;
      right: 0;
      margin: auto;
    }
    @media (max-width: 1024px) {
      right: 3%;
    }
  }
  .slick-next:active,.slick-prev:active {
    box-shadow: none;
  }
  .slick-slide + div {
    text-align: center;
  }
  #wp-content-wrap #tinymce,
  .ap_single_content {
    h1 {
      font-size: 27px;
      position: relative;
      text-align: center;
      width: max-content;
      max-width: 80%;
      overflow-wrap: break-word;
      margin: 20px auto;
      &::before {
        position: absolute;
        left: -20px;
        bottom: 0;
        top: 0;
        margin: auto;
        display: block;
        width: 20px;
        background: @background1;
      }
      &::after {
        content: "";
        position: absolute;
        right: -20px;
        bottom: 0;
        top: 0;
        margin: auto;
        display: block;
        width: 20px;
        background: @background1;
        height: 2px;
      }
    }
    h2 {
      font-size: 23px;
      padding: 20px;
      position: relative;
      margin: auto;
      max-width: none;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0px;
        bottom: 0;
        margin: auto;
        width: 15px;
        height: 15px;
        background: @background1;
        border-radius: 50%;
        display: block;
      }
    }
    h3 {
      font-size: 23px;
      padding: 20px;
      position: relative;
      text-align: left;
      margin: auto;
      max-width: none;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0px;
        bottom: 0;
        margin: auto;
        width: 4px;
        height: 20px;
        background: @background1;
        display: block;
      }
    }
    h4 {
      font-size: 17px;
      margin: auto;
      text-align: left;
      max-width: none;
    }
    h5 {
      font-size: 15px;
      margin: auto;
      text-align: left;
      max-width: none;
    }
    h6 {
      font-size: 13px;
      margin: auto;
      text-align: left;
      max-width: none;
    }
    pre {
      margin: 20px auto;
      text-align: left;
      max-width: none;
      font-size: 13px;
      overflow: inherit;
      img {
        display: inline-block;
        width: 50%;
        vertical-align: top;
        margin-right: -0.25em;
      }
      a {
        background: #0880bd;
        color: #fff;
        padding: 5px 10px;
        width: max-content;
        margin: 20px auto;
        text-decoration: none;
        box-shadow: 0px 2px 3px 0px #999;
      }
    }
    strong {
      margin: auto;
      text-align: left;
    }
    em {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    ul {
      li {
        margin: auto;
        text-align: left;
        font-size: 13px;
      }
    }
    ol {
      li {
        margin: auto;
        text-align: left;
        font-size: 13px;
      }
    }
    blockquote {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    p {
      display: block;
      font-size: 13px;
      margin: auto;
      max-width: none;
    }
    a {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    del {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    hr {
      margin: auto;
      text-align: left;
    }
    span {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    div {
      margin: auto;
      text-align: left;
      font-size: 13px;
    }
    img {
      display: block;
      width: 100%;
    }
  }
  .numbers_title {
    font-size: 26px;
    color: #003f7d;
    position: relative;
    padding: 40px 0;
    font-weight: 400;
    @media (max-width: 767px ) {
      font-size: 20px;
    }
  }
  .text-margin {
    margin: 20px auto;
  }
  .text_deco {
    color: @blue;
    font-weight: bold;
    font-size: 16px;
  }
  .weight-none {
    font-weight: 400;
  }
  .res_nav {
    #nav_toggle {
      display: none;
    }
    .nav_menu_inner {
      width: 30px;
      height: 30px;
      display: block;
      position: absolute;
      right: 20px;
      top: 0px;
    }
    .hamburger {
      position: absolute;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
      width: 30px;
      height: 3px;
      background: #25417a;
      display: block;
      transform-origin: center;
      transition: .5s ease-in-out;
      border-radius: 10px;
      z-index: 1001;
      &:nth-of-type(2) {
        top: -15px;
      }
      &:nth-of-type(3) {
        top: 15px;
      }
    }
    #nav_toggle + label + div {
      opacity: 0;
      position: absolute;
      transition: ease all .5s;
      width: 100vw;
      height: 110vh;
      left: 0;
      top: -3000px;
    }
    #nav_toggle:checked + label {
      z-index: 1010;
      & .hamon {
        &::before,&::after {
          content: "";
          right: -50%;
          left: -50%;
          top: -50%;
          bottom: -50%;
          width: 200%;
          height: 200%;
          margin: auto;
          display: block;
          position: absolute;
          border: 1px solid;
          border-radius: 50%;
          animation: hamon 2s;
          transition: ease all 5s;
          z-index: 1;
          opacity: 0;
        }
        &::after {
          display: block;
          animation: hamon2 2s;
        }
        @keyframes hamon {
          from {
            right: -50%;
            left: -50%;
            top: -50%;
            bottom: -50%;
            width: 100%;
            height: 100%;
            opacity: 1;
          }
          to {
            right: -50%;
            left: -50%;
            top: -50%;
            bottom: -50%;
            width: 150%;
            height: 150%;
            opacity: 0;
          }
        }
        @keyframes hamon2 {
          from {
            right: -50%;
            left: -50%;
            top: -50%;
            bottom: -50%;
            width: 100%;
            height: 100%;
            opacity: 1;
          }
          to {
            right: -50%;
            left: -50%;
            top: -50%;
            bottom: -50%;
            width: 200%;
            height: 200%;
            opacity: 0;
          }
        }
      }
    }
    #nav_toggle:checked + label + div {
      background: @background1;
      z-index: 1000;
      top: -30px;
      opacity: 1;
      overflow: scroll;
      padding: 50px 20px;
      & > ul {
        display: flex;
        justify-content: space-around;
      }
    }
  }
  .ap_header_panel {
    z-index: 5;
  }
}
@keyframes fade_in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}