.osa{
  text-decoration: none;
   text-decoration-color:#ffffff;
  }

  .img{
    text-align: center;
  }

  .heading-24 {
    position: relative;
    padding-top: 1.5em;
    color: #333333;
    margin-left:20%;
    margin-right: 35%;
}

.heading-24::before {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    color: #fdcece;
    font-size: 3em;
    line-height: 1;
    content: attr(data-number);
    pointer-events: none;
}

.heading-31 {
    position: relative;
    padding: .3em 0 .2em 1em;
    border-bottom: 3px solid #d02525;
    color: #333333;
     margin-left:15%;
    margin-right: 15%;
      font-family: "Zen Kaku Gothic Antique", sans-serif;
}

.heading-31::before {
    position: absolute;
    top: 0;
    left: .3em;
    transform: rotate(55deg);
    height: 11px;
    width: 12px;
    background: #d02525;
    content: '';
}

.heading-31::after {
    position: absolute;
    transform: rotate(15deg);
    top: .6em;
    left: 0;
    height: 8px;
    width: 8px;
    background: #d02525;
    content: '';
}

.list-2 {
    counter-reset: li;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
     margin-left:15%;
    font-size: 25px;
}

/* 横並び */

.zentai {
  display: flex; /*横並び*/
  margin-left:5%;
    margin-right: 20%;
}
.zentai .image {
  width: 1500px; /*画像サイズ指定*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-left: 100px;
}
.zentai .right {
  margin: 0 0 0 5px;
  padding: 0;
}
.zentai .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 40px;
}
.zentai .text {
  margin: 10px 0 0;
  padding: 0;
  font-size: 20px;
  font-family: "Zen Kaku Gothic Antique", sans-serif;
  margin-left:10px;
}



  
  h2{
    font-size: 30px;
  }
  
  h3{
     padding: 10px;             
      font-size: 24px;
       font-family: "Zen Kaku Gothic Antique", sans-serif;
       margin-left: 20%;
       margin-right: 20%;
  }
  
  p{
     font-family: "Zen Kaku Gothic Antique", sans-serif;
     font-size:20px;
     margin-left:20%;
     margin-right: 20%;
  }
  
  ul {
    list-style: none;
    font-family: "Zen Kaku Gothic Antique", sans-serif;
    font-size:20px;
    margin-left:20%;
    margin-right: 20%;
  }
  
  .under {
    background: linear-gradient(transparent 50%, #fcfc38 50%);
  }
  
  .heading-21 {
      position: relative;
      padding: .5em .7em .10em;
      border-bottom: 3px solid #d02525;
      color: #333333;
      font-family: "Zen Kaku Gothic Antique", sans-serif;
      margin-left:15%;
      margin-right: 15%;
  }
  
  .heading-21::before, 
  .heading-21::after {
      position: absolute;
      left: 30px;
      bottom: -15px;
      width: 30px;
      height: 15px;
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      content: '';
  }
  
  .heading-21::before {
      background-color: #d02525;
  }
  
  .heading-21::after {
      bottom: -11px;
  }

  
  
  ao{
    font-size: 21px;
    font-weight: bold
  }
  
  .box27 {
    position: relative;
    margin: 4em 0;
    padding: 5em 1em;
    border: solid 3px #c41a1a;
    margin-left:20%;
    margin-right: 35%;
  }
  .box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 30px;
    font-size: 20px;
    background: #c41a1a;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    margin-left:5%;
     margin-right: 5%;
  }
  .box27 p {
    margin: 0; 
    padding: 0;
    margin-left:5%;
     margin-right: 5%;
  }
  
  /* 018 */
  .button018 a {
      position: relative;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 0 auto;
      max-width: 225px;
      padding: 10px 0px 10px 25px;
      color: #050000;
      transition: 0.3s ease-in-out;
      font-weight: 500;
      text-decoration: none;
      font-family: "Zen Kaku Gothic Antique", sans-serif;
  }
  
  .button018 a:before, .button018 a:after {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
  }
  .button018 a:before {
    width: 0.5rem;
    height: 0.5rem;
    left: 1.1rem;
    border-top: solid 2px #fff;
    border-right: solid 2px #fff;
    z-index: 2;
    transform: translateY(-50%) rotate(45deg);
    transition: all 0.3s;
  }
  .button018 a:after {
    left: 0;
    background: #c41a1a;
    z-index: 1;
    width: 3rem;
    height: 3rem;
    border-radius: 4rem;
    transform: translateY(-50%);
    transition: all 0.5s;
  }
  .button018 a span {
    position: relative;
    transition: all 0.3s;
    z-index: 3;
  }
  
  .button018 a:hover span {
    color: #fff;
  }
  .button018 a:hover:before {
    left: 2rem;
  }
  .button018 a:hover:after {
    right: 0;
    width: 100%;
  }

  .hasi{
    margin-left: 20%;
    margin-right: 20%;
  }
  
  .genzyou{
    margin-left: 20%;
    margin-right: 20%;
  }
  
  nav{
    background:#c41a1a;
    color:#fff;
    text-align: center;
  }
  /*ナビゲーションを横並びに*/
  nav ul{
    list-style: none;
    display: flex;
    justify-content: center;
  }
  /*2階層目以降は横並びにしない*/
  nav ul ul{
    display: block;
  }
  
  /*下の階層のulや矢印の基点にするためliにrelativeを指定*/
  nav ul li{
    position: relative;
  }
  
  /*ナビゲーションのリンク設定*/
  nav ul li a{
    display: block;
    text-decoration: none;
    color: #fff;
    padding:20px 35px;
    transition:all .3s;
  }
  
  nav ul li li a{
    padding:10px 35px;
  }
  
  nav ul li a:hover{
    color:#fff;	
  }
  
  /*==矢印の設定*/
  
  /*2階層目を持つliの矢印の設定*/
  nav ul li.has-child::before{
    content:'';
    position: absolute;
    left:15px;
    top:25px;
    width:6px;
    height:6px;
    border-top: 2px solid #fff;
      border-right:2px solid #fff;
      transform: rotate(135deg);
  }
  
  /*3階層目を持つliの矢印の設定*/
  nav ul ul li.has-child::before{
    content:'';
    position: absolute;
    left:6px;
    top:17px;
    width:6px;
    height:6px;
      border-top: 2px solid #fff;
      border-right:2px solid #fff;
      transform: rotate(45deg);
  }
  
  /*== 2・3階層目の共通設定 */
  
  /*下の階層を持っているulの指定*/
  nav li.has-child ul{
      /*絶対配置で位置を指定*/
    position: absolute;
    left:0;
    top:62px;
    z-index: 4;
      /*形状を指定*/
    background:#c41a1a;
    width:180px;
      /*はじめは非表示*/
    visibility: hidden;
    opacity: 0;
      /*アニメーション設定*/
    transition: all .3s;
  }
  
  /*hoverしたら表示*/
  nav li.has-child:hover > ul,
  nav li.has-child ul li:hover > ul,
  nav li.has-child:active > ul,
  nav li.has-child ul li:active > ul{
    visibility: visible;
    opacity: 1;
  }
  
  /*ナビゲーションaタグの形状*/
  nav li.has-child ul li a{
    color: #fff;
    border-bottom:solid 1px rgba(255,255,255);
  }
  
  nav li.has-child ul li:last-child > a{
   border-bottom:none;
   }
  
  nav li.has-child ul li a:hover,
  nav li.has-child ul li a:active{
    background:#edce66;
  }
  
  nav li.has-child ul ul{
    top:0;
    left:182px;
    background:#edce66;
  }
  
  nav li.has-child ul ul li a:hover,
  nav li.has-child ul ul li a:active{
    background:#edce66;
  }
  
  
  /*==768px以下の形状*/
  
  @media screen and (max-width:768px){
    nav{
      padding: 0;
    }
    
    nav ul{
      display: block;
    }
    
    nav li.has-child ul,
    nav li.has-child ul ul{
      position: relative;
    left:0;
    top:0;
    width:100%;
    visibility:visible;
    opacity:1;
    display: none;
    transition:none;
  }
    
  nav ul li a{
    border-bottom:1px solid #fff;
  }
  
  nav ul li.has-child::before{
    left:20px;	
  }
  
  nav ul ul li.has-child::before{
      transform: rotate(135deg);
    left:20px;
  }
      
  nav ul li.has-child.active::before{
      transform: rotate(-45deg);
  }
  
  html {
    scroll-behavior: smooth;
  }
    
  .text-box {
    width: 300px;
    margin: 0 auto;
    padding: 0 1em;
    }
  }