.press__content {
	width: calc( 100% - 40px );
	max-width: 1000px;
	margin: 0 auto 0 auto;
	background: #fff;
	padding: 40px;
	border-radius: 20px;
	& p {
		font-size: 16px; line-height: 1.77;
	}
}
@media screen and ( max-width:767px ) {
	.press__content {
		padding: 20px;
	}
}
.press__navi {
  & ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: flex-start;
    margin: 0 0 10px 0;
    gap:4px;
    padding: 0;
    & li {
      flex-basis: calc( ( 100% - 44px ) / 12);
      display: block;
      & a {
        display:flex;
        flex-wrap: wrap;
        justify-content:center;
        align-items:baseline;
        background: var(--olive02);
        font-family: var(--mincho);
        color: var(--brown01);
        text-decoration: none;
        padding: 2em 0;
        &:hover , &.active , &:focus {
          background: var(--olive01);
          color:var(--white01);
        }
        & .num {
          font-size: 16px; display: inline-block;
        }
        & .vol {
          font-size: 12px; display: inline-block;
        }
      }
    }
  }
}
@media screen and ( max-width:767px ) {
  .press__navi {
    & ul {
      & li {
        flex-basis: calc( ( 100% - 20px) / 6 );
      }
    }
  }
}

.press__title {
  & img {
    width: 100%; height: auto;
  }
  & .sub__nav {
    & ul {
      list-style: none; margin: 4px 0 0 0; gap:4px; padding: 0;
      & li {
        &.fb50 {
          flex-basis: calc( ( 100% - 4px ) / 2 );
        }
        &.fb30 {
          flex-basis: calc( ( 100% - 8px ) / 3 );
        }
        &.fb25 {
          flex-basis: calc( ( 100% - 12px ) / 4 );
        }
        &.fb20 {
          flex-basis: calc( ( 100% - 16px ) / 5 );
        }
        & a {
          display: flex; align-items: center; width: 100%; padding: 1em; justify-content: center; color: var(--white01); background: var(--green02); text-decoration: none; font-size: 16px; text-align: center; height: 100%;
          &:hover {
            background: var(--gray01);
          }
        }
      }
    }
  }
}
@media screen and ( max-width:767px ) {
  .press__title {
    & .sub__nav {
      & ul {
        & li {
          &.fb50 {
            flex-basis: 100%;
          }
          &.fb30 {
            flex-basis: 100%;
          }
          &.fb20 {
            flex-basis: 100%;
          }
          &.fb25 {
            flex-basis: 100%;
          }
          & a {
            padding: 0.5em 0;
          }
        }
      }
    }
  }
  
}
.magazine__subtitle {
  font-size: var();
  & .sub {
    display: block;
  }
  & .main {
    color: var(--green01);
  }
}
.press__article {
  margin-top: 80px;
  & h3 {
    color: var(--green01); font-size: 20px; font-family: var(--mincho); line-height: 1.2; margin-bottom: 40px; padding-bottom: 10px; border-bottom: var(--green01) solid 1px; font-feature-settings: "palt";
    & .sub {
      display: block; padding: 0 0 0 20px; margin: 0 0 5px 0; font-size: 16px; color: #666;
    }
  }
  & .photo__box {
    
    & figure {
      & img {
        width: 100%; height: auto;
      }
      & figcaption {
        font-size: 14px; display: block; margin-top: 5px; line-height: 1.5;
        & b {
          display: block; font-weight: 700;
        }
      }
      & + figure {
        margin-top: 20px;
      }
      &.fb50 {
        flex-basis: calc( ( 100% - 20px ) / 2 ); align-self: flex-start; margin-top: 0;
      }
    }
  }
  & .menu__box {
    padding: 20px; background: #f0f0e6; border: var(--olive03) solid 1px;
    & h4 {
      font-size: 20px; color: var(--red02); font-family: var(--mincho);
    }
    &.mt20 {
      margin-top: 20px;
    }
    & ul {
      list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap:10px 20px;
      & li {
        padding-bottom: 10px; border-bottom: var(--olive01) solid 1px; flex-basis: 100%;
        & h5 {
          color: var(--olive03); font-size: 20px; margin: 0 0 10px 0; font-family: var(--mincho); font-feature-settings: "palt";
          & .sub {
            font-size: 66.66%;
          }
        }
        &.fb50 {
          flex-basis: calc( ( 100% - 20px ) / 2 );
        }
        & .menu__price {
          display: block; font-size: 14px; font-weight: 700;
        }
        & .menu__description {
          display: block; font-size: 14px;
        }
      }
    }
    & p {
      & a {
        color: var(--olive03); text-decoration: underline;
        &:hover {
          color: var(--olive03); text-decoration: none;
        }
      }
    }
  }
  & .text__box {
    &.mt20 {
      margin-top: 20px;
    }
    
    p {
      & + p {
        margin-top: 20px;
      }
    }
    & h4 {
      font-size: 16px; font-weight: 700; margin-bottom: 20px;
      &.middle__title {
        font-size: 20px; position: relative; padding: 0 0 0 1em;
        &::before {
          content: ''; display: block; width: 0.5em; height: 100%; background: var(--green02); position: absolute; left: 0; top:0;
        }
      }
    }
  }
  & .profile__box {
    display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px;
    & .photo__box {
      flex-basis: 180px;
    }
    & .text__box {
      flex-basis: calc( 100% - 200px );
      & h4 {
        font-size: 16px; font-weight: 700; margin-bottom: 10px;
      }
      & .message__box {
        padding: 16px; border: #666 solid 1px;
        & p {
          font-size: 16px; line-height: 1.5;
        }
      }
    }
  }
  & .press__contact {
    padding: 20px; background: var(--yellow01); margin-top: 40px;
    & h4 {
      color: #fff; display: block; border-bottom: #fff solid 1px; font-size: 16px; font-weight: bold; line-height: 1.2; padding-bottom: 5px; margin-bottom: 10px;
    }
    & p {
      display: block; color: #fff; font-size: 16px; word-break: break-all;
      & a {
        text-decoration: underline; color: #fff;
        &:hover {
          color: #fff; text-decoration: none;
        }
      }
    }
    > h4 {
      font-size: 20px; font-family: var(--mincho); border-bottom: none; font-feature-settings: "palt"; margin-bottom: 20px;
    }
    & .flex__box {
      & .text__box {
        flex-basis: calc( ( 100% - 320px ) );
        &.fb50 {
          flex-basis: calc( ( 100% - 20px ) / 2 );
        }
      }
      & .map__box {
        flex-basis: 300px; min-height: 300px;
        & iframe {
          width: 100%; height: 100%;
        }
      }
      & .photo__box {
        flex-basis: 300px;
      }
    }
  }
  & .flex__box {
    & .text__box {
      flex-basis: calc( 65% - 20px );
      &.col1-3 {
        flex-basis: calc( ( 100% - 20px ) / 2 );
      }
      &.fb50 {
        flex-basis: calc( ( 100% - 20px ) / 2 );
      }
    }
    & .menu__box {
      flex-basis: calc( 65% - 20px );
    }
    & .photo__box {
      flex-basis: calc( 35% - 20px );
      &.fb30 {
        flex-basis: calc( ( 100% - 40px ) / 3 );
      }
      &.fb25 {
        flex-basis: calc( ( 100% - 60px ) / 4 );
      }
      &.fb20 {
        flex-basis: calc( ( 100% - 40px ) / 5 );
      }
      &.col2-3 {
        flex-basis: calc( ( 100% - 20px ) / 2 );
      }
      &.fb35 {
        flex-basis: calc( 35% - 20px );
      }
      &.fb65 {
        flex-basis: calc( 65% - 20px );
      }
      &.fb50 {
        flex-basis: calc( ( 100% - 20px ) / 2 );
      }
    }
    &.mt20 {
      margin-top: 20px;
    }
    &.mt40 {
      margin-top: 40px;
    }
    &.mt60 {
      margin-top: 60px;
    }
    & > .note__box {
      flex-basis: 100%; margin-top: 20px;
      & p {
        font-size: 14px;
      }
    }
  }
}

@media screen and ( max-width:767px) {
  .press__article {
    & .profile__box {
      display: block; border: #666 solid 1px; padding: 20px;
      & .photo__box {
        float: left; width: 150px; margin: 0 20px 20px 0; max-width: calc( 50% - 10px );
      }
      & .text__box {
        & .message__box {
          border: none; padding: 0;
        }
      }
      &::after {
        content: ''; display: block; clear: both;
      }
    }
    & .flex__box {
      gap:40px;
      & .text__box {
        flex-basis: 100%;
        & figure {
          width: 100%;
          & img {
            width: 100%; height: auto;
          }
        }
        &.fb50 {
          flex-basis: 100%;
        }
        &.col1-3 {
          flex-basis: 100%;
        }
      }
      & .menu__box {
        flex-basis: 100%;
      }
      & .photo__box {
        flex-basis: 100%;
        &.fb25 {
          flex-basis: 100%;
        }
        &.fb30 {
          flex-basis: 100%;
        }
        &.fb20 {
          flex-basis: calc( ( 100% - 10px ) / 2 );
        }
        &.fb50 {
          flex-basis: 100%;
        }
        &.col2-3 {
          flex-basis: 100%;
        }
      }
    }
    & .press__contact {
      & .flex__box {
        & .text__box {
          flex-basis: 100%;
          &.fb50 {
            flex-basis: 100%;
          }
        }
        & .map__box , & .photo__box {
          flex-basis: 100%;
        }
      }
    }
  }  
}