@charset "UTF-8";
/* CSS Document */

    #single #titBox {
      padding-bottom: 30px;
    }
    #single #titBox h1 {
      color: #fff;
      font-size: 35px;
      text-align: center;
      background-color: #ea5c71;
      border-radius: 15px;
      margin-bottom: 20px;
    }
    #single #titBox p.hatuden {
      border: none;
      max-width: 800px;
      margin: 0 auto;
    }
    #single #titBox h2 {
      font-size: 40px;
      border: none;
      text-align: center;
      font-weight: 500;
      padding: 0.2em 0;
    }
    #single #titBox h3 {
      font-size: 30px;
      border: none;
      text-align: center;
      padding-bottom: 0.5em;
    }
    #single #titBox .indexBox {
      border: #e61e73 solid 1px;
    }
    #single #titBox .indexBox h4 {
     color: #e61e73;
  }
    #single #titBox .indexBox li {
      line-height: 1.4;
    }
    #single #titBox .indexBox li::before {
      content: '●';
      color: #e61e73;
      margin-right: 0.2em;
    }
    #single #outlineWrap {
      background-color: #f6e8e6;
      padding: 30px 0;
    }
    #single #outlineWrap h3 {
      font-size: 30px;
      text-align: center;
      padding-bottom: 0.5em;
    }
    #single #outlineWrap .tableBox {
      max-width: 900px;
    }
    #single #outlineWrap .tableBox table {
      width: 100%;
      border-spacing:10px;
    }
    #single #outlineWrap .tableBox table th,
    #single #outlineWrap .tableBox table td {
      line-height: 1.3;
    }
    #single #outlineWrap .tableBox table th {
     background-color: #efc4c7;
      font-size: 18px;
      padding: 1em;
      font-weight: 400;
      white-space: nowrap;
    }
    #single #outlineWrap .tableBox table td {
      background-color: #fff;
      font-size: 24px;
      padding: 1em;
      font-weight: 500px;
    }
    #single #outlineWrap .tableBox table td dl {
      padding: 15px 0;
    }
    #single #outlineWrap .tableBox table td dl:last-child {
      border-top: #ccc dotted 1px;
    }
    #single #outlineWrap .tableBox table td dt {
      font-size: 75%;
    }
    #single #outlineWrap .tableBox table td dt::before {
      content: '●';
      color: #e61e73;
    }

    #single #outlineWrap .tableBox table td .cap {
      font-size: 70%;
      padding: 0.2em 0;
      text-indent: -1em;
      margin-left: 1em;
    }
#single #outlineWrap .tableBox table td li {
      font-size: 70%;
  list-style: disc;
  margin-left: 1em;
  padding: 0.3em 0;
    }
    #single #outlineWrap .tableBox table td .btnGmap {
  width: 16em;
  height: 2.4em;
  display: flex;
justify-content: center;
align-items: center;
  background-color: #000;
  color: #fff;
  font-size: 14px;
  border-radius: 99px;
      margin-top: 5px;
}
#single #outlineWrap .tableBox table td .btnGmap:hover {
  opacity: 0.6;
}
#single #outlineWrap .tableBox table td .btnGmap .map {
  width: 25px;
  margin: 0 10px;
}
#single #outlineWrap .tableBox table td .btnGmap .try {
  width: 10px;
  margin: 0 10px;
}
    #single #outlineWrap .tableBox table td .btBox {
      color: #fff;
      background-color: #e83c5f;
      border-radius: 6px;
      padding: 0 20px;
      margin-top: 7px;
      display: flex;
      width: 22em;
      height: 2em;
      justify-content: center;
      align-items: center;
    }
#single #outlineWrap .tableBox table td .btBox:hover {
  opacity: 0.6;
}
    #single #outlineWrap .tableBox table td .btBox.bt02 {
      background-color: #00a983;
      margin-bottom: 7px;
    }
    #single #outlineWrap .tableBox table td .btBox .try {
  width: 15px;
  margin-left: 10px;
      display: inline-block;
}
    #single #cautionBox {
      padding: 30px 0;
    }
    #single #cautionBox dl {
      padding: 10px 0;
    }
    #single #cautionBox dt {
      font-size: 20px;
      text-align: center;
      border-bottom: #777 solid 1px;
      padding-bottom: 0.3em;
      
    }
    #single #cautionBox dd {
      padding: 1em 0;
      font-size: 16px;
    }
    #single #cautionBox dd ul {
      padding-left: 1.5em;
    }
    #single #cautionBox dd li {
      list-style: disc;
      list-style-position: outside;
      line-height: 1.3;
      padding: 0.3em 0;
      
    }
    /*#single #cautionBox dd li::before {
      content: '・';
    }*/
    
    @media screen and (max-width: 959px) {
      #single #titBox h1 {
        font-size: clamp(28px, 3.8vw, 30px);
      }
      #single #titBox h2 {
        font-size: clamp(28px, 3.8vw, 30px);
        }

        #single #titBox h3 {
          font-size: clamp(22px, 3vw, 24px);
        }
      #single #titBox .indexBox li {
        font-size: clamp(16px, 2.2vw, 18px);
      }
      
      #single #outlineWrap .tableBox table th {
        font-size: clamp(14px, 2vw, 16px);
        
        
      }
       #single #outlineWrap .tableBox table td {
         
        font-size: clamp(18px, 2.5vw, 20px);
         padding: 1em;
         margin-bottom: 10px;
      }
      #single #outlineWrap .tableBox table td .btBox {
        width: 100%;
        font-size: clamp(16px, 2.2vw, 18px);
        height: 2.5em;
      }
      #single #cautionBox dt {
        font-size: clamp(18px, 2.5vw, 20px);
      }
      #single #cautionBox dd {
        font-size: clamp(12px, 1.7vw, 14px);
      }
    }
    
    @media screen and (max-width: 599px) {
      #single #titBox h1 {
        font-size: clamp(23px, 6.4vw, 25px);
      }
      #single #titBox h2 {
        font-size: clamp(27px, 7.5vw, 29px);
        }

        #single #titBox h3 {
          font-size: clamp(18px, 5.1vw, 20px);
        }
      #single #titBox .indexBox li {
        font-size: clamp(15px, 4.3vw, 17px);
      }
      #single #outlineWrap h3 {
        font-size: clamp(21px, 5.9vw, 23px);
        }
      #single #outlineWrap .tableBox {
        width: 98%;
        }
      #single #outlineWrap .tableBox table {
  
        border-spacing: 0.5em;
        
       }
      #single #outlineWrap .tableBox table tr {
        

      }
      #single #outlineWrap .tableBox table th {
        font-size: clamp(14px, 2vw, 16px);
        white-space: normal;
        display: block;
        box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
        padding: 0.5em;
      }
       #single #outlineWrap .tableBox table td {
        font-size: clamp(17px, 4.8vw, 19px);
         display: block;
         text-align: center;
         box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
      }
      #single #outlineWrap .tableBox table td .btBox {
        width: 100%;
        font-size: clamp(15px, 4.3vw, 17px);
        height: 2.5em;
      }
      #single #cautionBox dt {
        font-size: clamp(17px, 4.8vw, 19px);
      }
      #single #cautionBox dd {
        font-size: clamp(13px, 3.7vw, 15px);
      }
      #single #outlineWrap .tableBox table td .cap {
        font-size: 72%;
        text-align: center;
        padding: 0.5em 0;
      }
      #single #outlineWrap .tableBox table td dd {
        text-align: center;
      }
      #single #outlineWrap .tableBox table td dt {
       padding: 0 0 0.3em 0;
        font-size: 80%;
      }
      #single #outlineWrap .tableBox table td .btnGmap {
        margin: 0 auto;
        margin-top: 5px;
        }
      #single #outlineWrap .tableBox table td .btBox {
        font-size: clamp(15px, 4.3vw, 17px);
        height: 3.5em;
        padding-left: 2.6em;
      }
    }


#single #castWrap {
  padding: 50px 0;
}
#single #castWrap .castBox {
  max-width: 900px;
}
#single #castWrap .castBox .itemBox {
  width: 47%;
  max-width: 420px;
  padding: 30px 0;
  /* display: flex;
  flex-wrap: wrap;
 align-items: flex-start;*/

}
#single #castWrap .castBox .itemBox h5 {
   /*align-self: flex-start;*/
  position: relative;
}
#single #castWrap .castBox .itemBox h5 img {
  max-width: 420px;
}
#single #castWrap .castBox .itemBox h5::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  bottom: 20%;
  z-index: -1;
}
#single #castWrap .castBox .itemBox .imgBox {
   /*align-self: flex-start;*/
}
#single #castWrap .castBox .itemBox p {
  background-color: #fcf0d0;
  padding: 1.5em;
  border-radius: 10px;
  color: rgba(161,96,44,1.00);
  font-size: 20px;
  position: relative;
  margin-top: 20px;
  /* align-self: stretch;*/
}
#single #castWrap .castBox .itemBox p::after {
  content: '';
  width: 36px;
  height: 20px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 20px solid #fcf0d0;
  position: absolute;
  left: calc(50% - 18px);
  bottom: 100%;
}

#single #castWrap .castBox .itemBox.champ {
  width: 100%;
  max-width: 100%;
}
#single #castWrap .castBox .itemBox.champ {
  width: 100%;
  max-width: 100%;
}
#single #castWrap .castBox .itemBox.champ .flex {

}
#single #castWrap .castBox .itemBox.champ .flex .imgBox {
  width: 47%;
  max-width: 420px;

}
#single #castWrap .castBox .itemBox.champ .flex .txtBox {
flex: 1;
}
#single #castWrap .castBox .itemBox.champ .flex .txtBox .icon {
width: 60%;
}
#single #castWrap .castBox .itemBox.champ .flex .txtBox p {
  margin: 0;
}
#single #castWrap .castBox .itemBox.champ .flex .txtBox p::after {
content: '';
  width: 30px;
  height: 30px;
  border-top: 15px solid transparent;
  border-right: 30px solid #fcf0d0;
  border-bottom: 15px solid transparent;
  position: absolute;
  left: auto;
  right:100%;
  top: calc(50% - 18px);
}


@media screen and (max-width: 959px) {
  #single #castWrap .castBox {
    max-width: 420px;
  }
  #single #castWrap .castBox .itemBox {
    width: 100%;
    
  }
  #single #castWrap .castBox .itemBox.champ .flex .imgBox {
    width: 100%;

  }
  #single #castWrap .castBox .itemBox.champ .flex .txtBox {
  flex: none;
  }
  #single #castWrap .castBox .itemBox.champ .flex .txtBox p::after {
  content: '';
  width: 36px;
  height: 20px;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 20px solid #fcf0d0;
  position: absolute;
  left: calc(50% - 18px);
  bottom: 100%;
    top: auto;
    right: auto;

  }
  #single #castWrap .castBox .itemBox p {
    font-size: clamp(16px, 2.2vw, 18px);
  }
}

@media screen and (max-width: 599px) {
  #single #castWrap .castBox .itemBox p {
    font-size: clamp(15px, 4.3vw, 17px);
  }
}