@charset "UTF-8";

a[id] {
    margin-top: -120px;
    padding-top: 120px;
    display: block;
  }
  
  #pan {
    display: block;
  }
  
  #pan li {
    font-size: 1.4rem;
  }
  
  @media screen and (max-width: 900px) {
    a[id] {
      display: initial;
    }
  }
  
  
  /*SP時、文章左寄せに変更*/
  @media screen and (max-width: 900px){
      #text_center+section .inner_item_txt p{
          text-align: left!important;
      }
  }
  /*画像の背景に四角*/
  
  #left+section .inner_item_img,
  #right+section .inner_item_img,
  #left2+section .inner_item_img{
      position: relative;
  }
  #left+section .inner_item_img::before{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: #f0f3f7;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    bottom: -20px;
    left: -30px;
  }
  #left2+section .inner_item_img::before{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: #e3e8f0;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    bottom: -20px;
    left: -30px;
  }
  #right+section .inner_item_img::before{
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    background: #f0f3f7;
    opacity: 1;
    pointer-events: none;
    z-index: -1;
    bottom: -20px;
    right: -30px;
  }
  @media screen and (max-width: 900px){
      #left+section .inner_item_img::before,
      #left2+section .inner_item_img::before{
          bottom: -10px;
            left: -15px;
      }
      #right+section .inner_item_img::before{
          bottom: -10px;
          right: -15px;
      }
  }
  
  /*タイトルテキスト*/
  .contents_box01 .title{
      font-size: 1.8rem;
      padding: 5px 10px 5px 10px;
      background: #f0f3f7;
      font-weight: 600;
      margin-bottom: 10px;
      margin-top: 15px;
  }
  .contents_box01 .title2{
      font-weight: 600;
      font-size: 1.65rem;
      margin-top: 25px;
  }
  
  #banner + div {
    margin: 0;
  }
  #banner + div .content_wrapper {
    width: auto;
    margin: 0 auto;
  }
  #banner + div .wrapper_item {
    justify-content: center;
  }
  #banner + div .inner_item {
    width: 23.5% !important;
  }
  #banner + div .inner_item:last-child {
    margin-left: 2% !important;
  }
  #banner + div .heading.block_header_4 .h {
    text-align: center;
  }
  #banner+div .inner_item_txt{
      min-height: 150px;
      border: 4px solid rgba(255,255,255,0.25);
  }
  /*横線*/
  #banner+div .inner_item::before,
  #banner+div .inner_item::after{
    content: "";
    position: absolute;
    z-index: 999;
    background: #fff;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
  }
  #banner+div .inner_item::before{
      left: 3%;
      top: 5%;
      width: 0;
      height: 1px;
  }
  #banner+div .inner_item::after{
      left: 95%;
      right: 5%;
      bottom: 5%;
      width: 0;
      height: 1px;
      -webkit-transition-property: all;
      transition-property: all;
  }
  
  #banner+div .inner_item:hover::before{
    width: 94%;
  }
  #banner+div .inner_item:hover::after{
    left: 3%;
    width:94%;
  }
  /*縦線*/
  #banner+div .inner_item a::before,
  #banner+div .inner_item a::after{
    content: "";
    position: absolute;
    z-index: 999;
    background: #fff;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  #banner+div .inner_item a::before{
    left: 3%;
    bottom: 5%;
    width: 1px;
    height: 0;
    -webkit-transition-property: height;
    transition-property: height;
  }
  
  #banner+div .inner_item a::after{
    right: 3%;
    top: 5%;
    bottom: 95%;
    height: 0;
    width: 1px;
    -webkit-transition-property: height;
    transition-property: height;
  }
  
  #banner+div .inner_item a:hover::before{
      height: 90%;
  }
  #banner+div .inner_item a:hover::after{
    bottom: 5%;
    height: 90%;
  }
  @media screen and (max-width: 900px) {
    #banner + div .inner_item {
      width: 49% !important;
    }
  }
  @media screen and (max-width: 500px) {
  #banner+div .inner_item_txt {
    min-height: 100px;
    padding: 10px 5px;
  }
}

#flow3 + * .inner_item_img {
    display: grid;
}