  <style>
  html {
    touch-action: manipulation;
}
    body {
      font-family: sans-serif;
      background-color: #fffef0;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 20px 10px;
            background: url('https://uedashinnosuke.com/set/topback.jpg') no-repeat center center fixed;
            background-size: cover;
    }
    body::before {
content:"";
display:block;
position:fixed;
      background-color: #fffef0;
top:0;
left:0;
z-index:-1;
width:100%;
height:100vh;
background-repeat:no-repeat;
background-position:top;
background-image:url(https://uedashinnosuke.com/set/topback.jpg);
background-size:cover;
}
    header {
      border-bottom: 0px dotted #dcbf6e;
      padding: 10px;
      margin-bottom:10px;
      color:#FFF;
      text-align: center;
    }
    .tab-menu {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .tab {
      padding: 10px 15px;
      background-color: #ffee88;
      border: 1px solid #aa8800;
      cursor: pointer;
      color: #333333;
      font-weight: bold;
      transition: background-color 0.2s;
      margin: 5px;
      border-radius: 20px;
      font-size: 14px;
  transition: transform 0s;
    }
    .tab:hover {
      transform: scale(1);
      background-color: #fdd835;
    }
    .tab.active {
      background-color: #fdd835;
      font-weight: bold;
    }
    .tab-content {
      max-width: 700px;
      margin: 0 auto;
      background-color: #fffef0;
            box-shadow: 0 4px 4px #FFFFFF;
      border: 0px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      display: none;
            animation: fadeIn 0.3s ease-in;
    }
    .tab-content.active {
      display: block;
    }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

    .tab-content img {
      max-width: 100%;
      border-radius: 8px;
      margin-bottom: 15px;
    }

    .rounded-img {
      width: 120px;
      border-radius: 50%;
      margin-bottom: 10px;
    }
   

    .gallery {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr ;
      gap: 1em;
      overflow: hidden;
    }

    .gallery-item {
      border-radius: 8px;
      height: 150px;
  display: flex;
  justify-content: center;
  align-items: center;
      text-align: center;
    }


    .gallery-item img {
max-height: 140px;
width: auto;
      border-radius: 8px;
      margin-bottom: 0px;
  transition: transform 0.4s;
    }
    
    
    
    .gallery-item img:hover {
      transform: scale(1.03);
    }




    .gallery_2 {
    	text-align:center;
    }

    .gallery_2-item img {
      width: 80%;
      border-radius: 8px;
    }
    
    .accordion-toggle {
      background-color: #ffee88;
      color: #333;
      padding: 0.5em;
      width: 100%;
      text-align: left;
      border: none;
      cursor: pointer;
      font-size: 1em;
      margin-top: 0.5em;
      border-radius: 8px;
    }

    .accordion-content_dummy {
      display: none;
      padding: 0.5em 1em;
      background: #fffef0;
      border-radius: 8px;
    }

        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            padding: 0 20px;
            border-top: 0px solid #ddd;
            transition: max-height 0.3s ease-out, padding 0.3s ease-out;
        }

        .accordion-content.active {
            max-height: 800px; /* コンテンツに応じて調整 */
            padding: 20px;
        }

        .accordion {
            margin-bottom: 20px;
        }

        .accordion-item {
            margin-bottom: 20px;
            border-radius: 8px;
            overflow: hidden;
            border-bottom:1px solid #ffee88;
        }

        .accordion-header {
            background-color: #ffee88;
            padding: 10px 20px;
            cursor: pointer;
            font-size: 1em;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: background-color 0.3s;
      border-radius: 8px;
        }

        .accordion-header:hover {
            background-color: #fdd835;
        }



        .accordion-image {
            width: 100%;
            max-width: 300px;
            height: auto;
            margin-bottom: 5px;
            border-radius: 10px;
        }

        .accordion-header::after {
            content: '▼';
            font-size: 1em;
            transition: transform 0.3s;
        }

        .accordion-header.active::after {
            content: '▼';
            color:#666;
            transform: rotate(180deg);
        }

        .accordion-toggle::after {
            content: '▼';
            font-size: 1em;
            transition: transform 0.3s;
        }

        .accordion-toggle.active::after {
            content: '▼';
            color:#666;
            transform: rotate(180deg);
        }

    .social-buttons a {
      display: inline-block;
      padding: 10px 15px;
      background-color: #ffee88;
      border: 1px solid #aa8800;
      cursor: pointer;
      color: #333333;
      font-weight: bold;
      transition: background-color 0.2s;
      margin: 5px;
      border-radius: 20px;
      font-size: 14px;
      text-decoration: none;
    }

    .social-buttons a:hover {
      background-color: #fdd835;
      text-decoration: none;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    a {
    	 color:#aa8800;
      text-decoration: none;
    }
    a:hover {
    	
      background-color: #fdd835;
      text-decoration: none;
    }
    figure {
      margin: 0 0 20px;
    }
    figcaption {
      text-align: center;
      font-size: 14px;
      margin-top: 5px;
    }
    ul {
      padding-left: 20px;
    }
    footer {
      text-align: center;
      padding: 10px;
      margin-top: 20px;
      color:#FFF;
    }

        .is-visible {
            opacity: 1 !important;
            transform: none !important;
        }
        


    .info-button {
      padding: 1px 1px;
      background-color: #fffef0;
      border: 0px solid #aa8800;
      border-radius: 8px;
      cursor: pointer;
      color: #333333;
      font-weight: bold;
      transition: background-color 0.2s;
    }

    .info-button img:hover {
      border-top: 2px solid #ffdd55;
      border-bottom: 2px solid #ffdd55;
    	
      background-color: #ffdd55;
    }
    .info-button.active {
      background-color: #ffdd55;
    }

    .info-info {
      max-width: 500px;
      margin: 0 auto;
      background-color: #fffef0;
      border: 0px solid #ccc;
      border-radius: 10px;
      padding: 20px;
      display: none;
    }

    .info-info img {
      max-width: 100%;
      border-radius: 8px;
      margin-bottom: 10px;
    }

    .info-info.active {
      display: block;
    }
        
@media (min-width: 768px) {
    figure img{
      width:300px;
    }
}
  </style>