/* メインコピー */
  h1{
    text-align: center;
    margin: 100px 0px 10px 0px;
  }

/* サブコピー */
  h2{
    text-align: center;
    margin: 10px 0px 10px 0px;
  }

  h3{
    text-align: center;
    margin: 80px 0px 0px 0px;
  }


/* スライドショー */
  @keyframes SLIDE3_3 {
    0% {
      opacity: var(--opacity-1, 1);
      transform: var(--transform-1, none);
      visibility: var(--visible-1, visible);
    }
    3.333333%,
    33.333333% {
      opacity: var(--opacity-2, 1);
      transform: var(--transform-2, none);
    }
    36.666666% {
      visibility: var(--visible-2, visible);
    }
    36.666666%,
    100% {
      opacity: var(--opacity-3, 1);
      transform: var(--transform-3, none);
    }
  }
  
  @keyframes SLIDE3_4 {
    0% {
      opacity: var(--opacity-1, 1);
      transform: var(--transform-1, none);
      visibility: var(--visible-1, visible);
    }
    2.5%,
    25% {
      opacity: var(--opacity-2, 1);
      transform: var(--transform-2, none);
    }
    27.5% {
      visibility: var(--visible-2, visible);
    }
    27.5%,
    100% {
      opacity: var(--opacity-3, 1);
      transform: var(--transform-3, none);
    }
  }

  .slide3 {
    --time: 4s;
    max-width: 1080px;
    margin: auto;
  }

  .slide3_contents {
    --visibility-2: hidden;
  
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  .slide3_contents:not([class^="is-animation-"]):not([class*=" is-animation-"]):not([style*="--"]),
  .slide3_contents.is-animation-translate-rtl {
    --transform-1: translateX(100%);
    --transform-2: translateX(0%);
    --transform-3: translateX(-100%);
  }
  .slide3_contents.is-animation-translate-ltr {
    --transform-1: translateX(-100%);
    --transform-2: translateX(0%);
    --transform-3: translateX(100%);
  }
  .slide3_contents.is-animation-translate-btt {
    --transform-1: translateY(100%);
    --transform-2: translateY(0%);
    --transform-3: translateY(-100%);
  }
  .slide3_contents.is-animation-translate-ttb {
    --transform-1: translateY(-100%);
    --transform-2: translateY(0%);
    --transform-3: translateY(100%);
  }
  .slide3_contents.is-animation-fade {
    --opacity-1: 0;
    --opacity-3: 0;
    width: auto;
  }
  .slide3_content {
    flex: none;
    margin-inline-end: -100%;
    visibility: hidden;
    width: 100%;
  }
  .slide3_content img {
    display: block;
    margin: auto;
    object-fit: cover;
    height: auto;
  }
  .slide3_labels {
    --opacity-1: 0.25;
    --opacity-3: 0.25;
    display: flex;
    margin: 0 auto;
    position: relative;
    width: min-content;
  }
  .slide3_label.select {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    opacity: 0.25;
    width: 40px;
    z-index: 2;
  }
  .slide3_label.select:before {
    aspect-ratio: 1 / 1;
    background: currentcolor;
    border-radius: 50%;
    content: "";
    display: block;
    transition: transform 0.2s;
    width: 20%;
  }
  .slide3_label.select:hover:before {
    transform: scale(1.5);
  }
  .slide3_label.unselect {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
  }
  .slide3_content:nth-child(1):nth-last-child(2),
  :nth-child(1):nth-last-child(2) ~ .slide3_content,
  .slide3_label.select:nth-child(1):nth-last-child(3),
  :nth-child(1):nth-last-child(3) ~ .slide3_label.select {
    animation: SLIDE3_2 calc(var(--time) * 2) infinite;
  }
  .slide3_content:nth-child(1):nth-last-child(3),
  :nth-child(1):nth-last-child(3) ~ .slide3_content,
  .slide3_label.select:nth-child(1):nth-last-child(4),
  :nth-child(1):nth-last-child(4) ~ .slide3_label.select {
    animation: SLIDE3_3 calc(var(--time) * 3) infinite;
  }
  .slide3_content:nth-child(1):nth-last-child(4),
  :nth-child(1):nth-last-child(4) ~ .slide3_content,
  .slide3_label.select:nth-child(1):nth-last-child(5),
  :nth-child(1):nth-last-child(5) ~ .slide3_label.select {
    animation: SLIDE3_4 calc(var(--time) * 4) infinite;
  }
  .slide3_content:nth-child(1):nth-last-child(n),
  .slide3_label.select:nth-child(1):nth-last-child(n) {
    animation-delay: calc(var(--time) / -10);
  }
  .slide3_content:nth-child(2):nth-last-child(n),
  .slide3_label.select:nth-child(2):nth-last-child(n) {
    animation-delay: calc(var(--time) / -10 + var(--time));
  }
  .slide3_content:nth-child(3):nth-last-child(n),
  .slide3_label.select:nth-child(3):nth-last-child(n) {
    animation-delay: calc(var(--time) / -10 + var(--time) * 2);
  }
  .slide3_content:nth-child(4):nth-last-child(n),
  .slide3_label.select:nth-child(4):nth-last-child(n) {
    animation-delay: calc(var(--time) / -10 + var(--time) * 3);
  }
  .slide3_radio {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    position: absolute;
    visibility: hidden;
  }
  .slide3_radio.select:checked ~ .slide3_contents > .slide3_content,
  .slide3_radio.select:checked ~ .slide3_labels > .slide3_label.select {
    animation: none;
  }
  .slide3_radio.select:nth-child(1):checked
    ~ .slide3_contents
    > .slide3_content:nth-child(1),
  .slide3_radio.select:nth-child(2):checked
    ~ .slide3_contents
    > .slide3_content:nth-child(2),
  .slide3_radio.select:nth-child(3):checked
    ~ .slide3_contents
    > .slide3_content:nth-child(3),
  .slide3_radio.select:nth-child(4):checked
    ~ .slide3_contents
    > .slide3_content:nth-child(4) {
    visibility: visible;
  }
  .slide3_radio.select:nth-child(1):checked
    ~ .slide3_labels
    > .slide3_label.select:nth-child(1),
  .slide3_radio.select:nth-child(2):checked
    ~ .slide3_labels
    > .slide3_label.select:nth-child(2),
  .slide3_radio.select:nth-child(3):checked
    ~ .slide3_labels
    > .slide3_label.select:nth-child(3),
  .slide3_radio.select:nth-child(4):checked
    ~ .slide3_labels
    > .slide3_label.select:nth-child(4) {
    opacity: 1;
    z-index: 0;
  }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
  .slide3 { display: block !important; }
  .sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
  .slide3 { display: none !important; }
  .sp { display: block !important; }
  }

  .news{
    max-width: 1080px;
    margin: auto;
  }

  .news-list{
    list-style: none outside;
    margin: 0;
    padding: 0;
  }
  .news-list .item a{
    display: flex;
    flex-wrap: wrap;
    flex-wrap: nowrap;
    justify-content: center;
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #333;
    padding: 20px 20px;
  }
  .news-list .item:first-child a{
    border-top: 1px solid #333;
  }
  .news-list .item .date{
    font-size: 14px;
    color: #333;
    text-align: center;
    margin-right: 10px;
  }
  .news-list .item .title{
    font-size: 14px;
    text-align: center
  }
  .news-list .item a:hover .title{
    opacity: 0.7;
  }
  
  @media screen and (max-width: 767px){
  .news-list .item a{
    flex-wrap: wrap;
  }
  .news-list .item .date{
    min-width: 100px;
  }
  }
  


  /* ベンチバナー */
  .bench-bn{
    max-width: 1080px;
    margin: auto;
  }
  
  .bench-bn img{
    max-width: 1080px;

    width: 100%;
    margin-top: 80px;
  }

  .bench-bn:hover {
    opacity: .7;
  }




  /* コンテンツ紹介 */
  .b{
    display: flex;
    justify-content: center;
    max-width: 1080px;
    margin: auto;
    padding-top: 10px;
  }

  .box-left{
    text-align: center;
    line-height: 100px; /*行の高さを指定*/
    margin: auto;
    margin-top: 50px;
  }
   
  .box-right{
    text-align: center;
    line-height: 100px; /*行の高さを指定*/
    margin: auto;
    margin-top: 50px;
  }
   
  .box-l{
    margin: auto;
    font-size: 24px;
    font-weight: bold;
    width: 300px;
    height: 100px;
    border: solid;
    border-width: 1px;
    -webkit-box-shadow: 5px 5px 0 #333;
    box-shadow: 5px 5px 0 #333;
  }

  .box-l:hover {
     opacity: .7;
  }
 
  .box-r{
    margin: auto;
    font-size: 24px;
    font-weight: bold;
    width: 300px;
    height: 100px;
    border: solid;
    border-width: 1px;
    -webkit-box-shadow: 5px 5px 0 #333;
    box-shadow: 5px 5px 0 #333;
  }

  .box-r:hover {
    opacity: .7;
  }

/* spotify */
  .spotify{
    display: block;
    margin: auto;
    padding: 10px;
    max-width: 1080px;
  }
 
/* スマホ表示 */
@media screen and (max-width: 825px){

   h1{
    text-align: center;
    margin: 70px 0px 10px 0px;
   }

   .b{
    display: block;
    margin: auto;
   }

   }

  .archive{
    text-align: center;
    margin: auto;
    max-width: 300px;
  }

  .archive:hover {
    opacity: .7;
  }