@charset "utf-8";

:root {
	--vsinsta-rem12: min(calc(1.2rem + (1vw - 1.92rem) * 0.0647), 1.2rem);/*1.2rem-1.1rem (1920-375)*/
	--vsinsta-rem14: min(calc(1.4rem + (1vw - 1.92rem) * 0.1294), 1.4rem);/*1.4rem-1.2rem (1920-375)*/
	--vsinsta-rem16: min(calc(1.6rem + (1vw - 1.92rem) * 0.1294), 1.6rem);/*1.6rem-1.4rem (1920-375)*/
	--vsinsta-rem18: min(calc(1.8rem + (1vw - 1.92rem) * 0.2589), 1.8rem);/*1.8rem-1.4rem (1920-375)*/
	--vsinsta-rem20: min(calc(2rem + (1vw - 1.92rem) * 0.3883), 2rem);/*2rem-1.4rem (1920-375)*/
	--vsinsta-rem30: min(calc(3rem + (1vw - 1.92rem) * 0.6472), 3rem);/*3rem-2rem (1920-375)*/
	--vsinsta-rem40: min(calc(4rem + (1vw - 1.92rem) * 1.2945), 4rem);/*4rem-2rem (1920-375)*/
}
/* 全体のスタイル */
.instagram-media-section, .instagram-caption, .additional-text, .instagram-link-container, .instagram-tags-container {
  & + * {
    border-bottom: 1px solid #ccc;
    margin: var(--vsinsta-rem30) 0 var(--vsinsta-rem30);
    padding: 0 0 var(--vsinsta-rem30);
  }
  a {
    color: #0095f6;
    transition: .1s;
    &:hover {
      color: #0068ac;
    }
  }
}

.instagram-link-container, .instagram-tags-container {
  font-weight: 700;
  a {
    font-weight: 400;
  }
}

/* instagram-media */
.instagram-media-section {
  width: 100%;;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.instagram-media-container {
    display: flex;
    & > * {
        flex: 0 0 100%;
        aspect-ratio: 1 / 1;
        transition: transform 0.5s ease;
        & > * {
            display: block;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            object-fit: cover;
        }
    }
    .video-container {
          .mute-toggle {
            width: var(--vsinsta-rem30);
            height: var(--vsinsta-rem30);
            position: absolute;
            bottom: var(--vsinsta-rem14);
            right: var(--vsinsta-rem16);
            background: #ededed;
            border: none;
            border-radius: 50vh;
            font-size: 0;
            color: transparent;
            opacity: .6;
            cursor: pointer;
            @media screen and (max-width: 768px) {
              width: var(--vsinsta-rem40);
              height: var(--vsinsta-rem40);
            }
            &::before {
              display: block;
              content: "";
              width: 50%;
              height: 50%;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 54 54'%3E%3Cpath d='M46.4 26l7.3-7.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L45 24.6l-7.3-7.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4l7.3 7.3-7.3 7.3c-.4.4-.4 1 0 1.4.2.2.5.3.7.3s.5-.1.7-.3l7.3-7.3 7.3 7.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L46.4 26z'/%3E%3Cpath d='M26.9 4c-.6 0-1.1.2-1.6.4l-.1.1-13.6 11.5H1c-.6 0-1 .4-1 1v19c0 .6.4 1 1 1h10.6l13.5 12.4.2.1c.5.3 1 .4 1.6.4 1.7 0 3.1-1.4 3.1-3.2V7.2C30 5.4 28.6 4 26.9 4zM13 35c0 .6-.4 1-1 1s-1-.4-1-1v-4c0-.6.4-1 1-1s1 .4 1 1v4zm0-13c0 .6-.4 1-1 1s-1-.4-1-1v-4c0-.6.4-1 1-1s1 .4 1 1v4z'/%3E%3C/svg%3E");
              background-repeat: no-repeat;
              background-position: center;
              background-size: contain;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
            &.active::before {
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 52'%3E%3Cpath d='M26.9 3c-.6 0-1.1.2-1.6.4l-.1.1-13.6 11.5H1c-.6 0-1 .4-1 1v19c0 .6.4 1 1 1h10.6l13.5 12.4.2.1c.5.3 1 .4 1.6.4 1.7 0 3.1-1.4 3.1-3.2V6.2C30 4.4 28.6 3 26.9 3zM13 34c0 .6-.4 1-1 1s-1-.4-1-1v-4c0-.6.4-1 1-1s1 .4 1 1v4zm0-13c0 .6-.4 1-1 1s-1-.4-1-1v-4c0-.6.4-1 1-1s1 .4 1 1v4z'/%3E%3Cpath d='M38.8 7.1c-.5-.2-1.1.1-1.3.6-.2.5.1 1.1.6 1.3 7.1 2.4 11.9 9.1 11.9 16.6 0 7.5-4.8 14.1-11.8 16.6-.5.2-.8.7-.6 1.3.1.4.5.7.9.7.1 0 .2 0 .3-.1 7.9-2.7 13.2-10.1 13.2-18.4 0-8.3-5.3-15.8-13.2-18.6z'/%3E%3Cpath d='M43 25.5c0-6-4-11.3-9.7-13-.5-.2-1.1.2-1.2.7-.2.5.2 1.1.7 1.2 4.9 1.4 8.3 6 8.3 11s-3.4 9.6-8.3 11c-.5.2-.8.7-.7 1.2.1.4.5.7 1 .7.1 0 .2 0 .3 0 5.7-1.6 9.7-7 9.7-13z'/%3E%3C/svg%3E");
            }
            &:hover {
              opacity: 1;
            }
          }
    }
}
.instagram-media-section {
  ul.indicator {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: auto;
    padding: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--vsinsta-rem16);
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  li {
    cursor: pointer;
    margin: 0 5px;
    width: 8px;
    height: 8px;
    background-color:#ccc;
    border-radius: 50%;
    &:is(.active) {
      background-color: #333;
    }
  }
}
}
/* 矢印ボタンのスタイル */
#change-buttons {
  button.prev,
  button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: var(--vsinsta-rem40);
    height: var(--vsinsta-rem40);
    background: rgba(255, 255, 255, 0.5);
    border: none;
    border-radius: 50%;
    font-size: 0;
    color: transparent;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.2s ease;
  }
  
  /* 矢印の共通スタイル */
  button.prev::before,
  button.next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    height: 30%;
    border-top: 2px solid #000;
    border-left: 2px solid #000;
  }
  
  /* 前へボタンの矢印 */
  button.prev {
    left: var(--vsinsta-rem20);
  }
  
  button.prev::before {
    transform: translate(-25%, -50%) rotate(-45deg);
  }
  
  /* 次へボタンの矢印 */
  button.next {
    right: var(--vsinsta-rem20);
  }
  
  button.next::before {
    transform: translate(-75%, -50%) rotate(135deg);
  }
  
  /* ホバー効果 */
  button.prev:hover,
  button.next:hover {
    background: rgba(255, 255, 255, 0.9);
  }
  
  
  /* モバイル対応 */
  @media (max-width: 768px) {
    button.prev,
    button.next {
      width: var(--vsinsta-rem30);
      height: var(--vsinsta-rem30);
    }
    
    button.prev {
      left: var(--vsinsta-rem14);
    }
    
    button.next {
      right: var(--vsinsta-rem14);
    }
  }
}

/* additional-text */
.additional-text {
  & > * {
    & + & {
      margin-top: var(--vsinsta-rem30);
    }
  }
}