/* CSS Document */
/********************
 about__history
*********************/
#about__history {
  padding: 100px 0;
  overflow: hidden; }
  @media (max-width: 768px) {
    #about__history {
      padding: 80px 0; } }
  #about__history .is-flex {
    justify-content: space-between; }
    @media (max-width: 500px) {
      #about__history .is-flex {
        flex-flow: column; } }
  #about__history .img01 {
    width: 37.5%; }
    @media (max-width: 500px) {
      #about__history .img01 {
        width: 90%;
        margin: auto; } }
  #about__history .img01 + .txt-box {
    width: 57.275%; }
    @media (max-width: 500px) {
      #about__history .img01 + .txt-box {
        width: 100%;
        margin-top: 2em; } }
    #about__history .img01 + .txt-box h3 {
      text-indent: -0.5em; }
  #about__history p {
    letter-spacing: 0.1em;
    font-feature-settings: "palt"; }
  #about__history p + p {
    margin-top: 1.5em; }
  #about__history .txt03 {
    width: 74.05%; }
    @media (max-width: 500px) {
      #about__history .txt03 {
        width: 100%; } }
    #about__history .txt03 p {
      letter-spacing: 0.07em; }
  #about__history .img03 {
    width: 29.821%;
    margin-right: -9.5%; }
    @media (max-width: 500px) {
      #about__history .img03 {
        width: 50%;
        margin-right: 0;
        margin-left: auto; } }

/********************
 about__point
*********************/
#about__point {
  padding: 100px 0; }
  @media (max-width: 500px) {
    #about__point {
      padding: 80px 0; } }
  #about__point .txt-box {
    width: 88%;
    margin-left: auto;
    margin-right: auto; }
    @media (max-width: 500px) {
      #about__point .txt-box {
        width: 100%; } }
    #about__point .txt-box p + p {
      margin-top: 1.5em; }
  #about__point .menu-nav {
    width: 88%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between; }
    @media (max-width: 500px) {
      #about__point .menu-nav {
        width: 100%; } }
    #about__point .menu-nav a.menu-nav-box {
      width: 30%;
      position: relative;
      display: block;
      height: auto;
      aspect-ratio: 1/1;
      overflow: hidden; }
      #about__point .menu-nav a.menu-nav-box::after {
        content: "";
        width: 100%;
        height: 100%;
        background-color: #574E4E;
        opacity: 0.5;
        mix-blend-mode: darken;
        position: absolute;
        left: 0;
        top: 0;
        transition: .5s ease-out; }
      #about__point .menu-nav a.menu-nav-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: .5s ease-out;
        transform: scale(1); }
      #about__point .menu-nav a.menu-nav-box span {
        display: flex;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        color: #FFFFFF;
        z-index: 3; }
    #about__point .menu-nav a.menu-nav-box:hover {
      text-decoration: none; }
      #about__point .menu-nav a.menu-nav-box:hover::after {
        opacity: 0.2; }
      #about__point .menu-nav a.menu-nav-box:hover img {
        transform: scale(1.1); }