/* 初回ロード時のアニメーション停止
--------------------------------- */
@starting-style {
	body * {
		animation: none !important;
		transition: none !important;
	}
}


/* 全般
---------------------------------------------- */
.wrapper {
  margin-inline: auto;
  max-width: 960px;
}
.fade {
  opacity: 1;
  transition: var(--transition-fade);
}
.fade:hover {
  opacity: 0.5;
}


/* ヘッダー
---------------------------------------------- */
.header__common {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  margin-inline: auto;
  padding: var(--space-l) var(--space-l) var(--space-l) var(--space-s);
  background: var(--bg-primary);
  box-shadow: 0px 10px 16px -6px rgba(0, 0, 0, 0.3);
}
.sitename {
  flex-grow: 1;
  margin-left: var(--space-l);
}
.sitename__main {
  margin-bottom: var(--space-2xs);
  font-weight: 900;
  font-size: 2rem;
}
.sitename__link {
  text-decoration: none;
  color: var(--text-dark);
}
.sitename__sub {
  font-size: var(--font-size-xs);
}


@media (width <= 992px){
  .header__common {
    display: grid;
    grid-template-columns: 60px calc(100% - 60px);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-areas:
    "menu logo"
    "name name";
    align-self: flex-end;
    padding: var(--space-s) 1rem var(--space-xs) 0.5rem;
  }
  .logo {
    grid-area: logo;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--space-4xl);
    align-items: center;
    justify-self: flex-end;
  }
  .logo__img {
    width: clamp(11.2500rem, 8.1423rem + 13.2597vw, 18.7500rem)
  }
  .sitename {
    grid-area: name;
  } 
  .sitename__main {
    margin-bottom: var(--space-2xs);
    text-align: center;
    font-weight: 900;
    font-size: clamp(1.05rem, 0.1846rem + 3.6923vw, 2.4rem);
  }
  .sitename__sub {
    text-align: center;
    font-size: clamp(0.6rem, 0.4718rem + 0.547vw, 0.8rem);
  }
  .menu__button {
    grid-area: menu;
  }
}
@media (width <= 576px){
  .header__common {
    padding: var(--space-2xs) 1rem var(--space-xs) 0.5rem;
  }
}


/* メニュー
---------------------------------------------- */
.menu__button {
  position: relative;
  z-index: 2100;
  display: block;
  width: var(--space-4xl);
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  background-image: url(../img/icon-hamburger-open.svg);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.menu__button[aria-expanded="true"] {
  border: 1px solid #ffffff20;
  background-color: var(--color-secondary);
  background-image: url(../img/icon-hamburger-close.svg);
}
.screenreader {
  opacity: 0;
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  height: 100%;
  width: 100%;
  max-width: 480px;
  background: var(--color-tertiary);
  box-shadow: 10px 0px 16px -6px rgba(0, 0, 0, 0.3);
  font-size: var(--font-size-base);
  color: var(--text-light);
  transition: transform 600ms ease-in-out;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-secondary);
}
.menu[data-visible="false"] {
  transform: translateX(-120%);
}
.menu[data-visible="true"] {
  transform: translateX(0);
}
.menu__list {
  padding: var(--space-xl) 0 0;
}
.menu__item {
  list-style-type: none;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.menu__heading {
  margin-bottom: 0;
  list-style-type: none;
}
.menu__heading-text {
  display: block;
  padding: var(--space-m) var(--space-s);
  background: #ffffff10;
}
.menu__list-sub {
  padding: 0;
}
.menu__list-sub--col2 {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.menu__list-sub--col2 .menu__item {
  width: 50%;
}
.menu__list-sub--col2 .menu__item:nth-of-type(2) {
  border-top: 1px solid #ffffff20;
}
.menu__list-sub--col2 .menu__item:nth-of-type(odd) {
  border-right: 1px solid #ffffff20;
}
.menu__list-sub--col2 .menu__item:last-of-type {
  border-bottom: 0;
}
.menu__heading-text {
  display: block;
  font-weight: bold;
  list-style-type: none;
}
.menu__link {
  position: relative;
  display: block;
  border-bottom: 1px solid #ffffff10;
  padding: var(--space-m) var(--space-s);
  text-decoration: none;
  color: var(--text-light);
  transition: background 400ms ease-in-out;
}
.menu__link:hover {
  background: var(--color-primary);
}
.menu__link:after {
  position: absolute;
  top: var(--space-m);
  right: var(--space-s);
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2015%22%20fill%3D%22%23fff%22%20width%3D%2210%22%20height%3D%2215%22%20%3E%3Cpath%20d%3D%22M10%207.5%202.5%200H.753l7.513%207.5L.755%2015H2.5z%22%2F%3E%3C%2Fsvg%3E");
  padding-left: var(--space-3xl);
}
.menu__item:first-child:not(.--toppage) {
  border-top: 1px solid #ffffff20;
}
.menu__item.--toppage {
  text-align: right;
  font-weight: 700;
}
.menu__item.--toppage .menu__link {
  padding-right: var(--space-2xl);
}
.menu__item.--toppage .menu__link:hover {
  background: var(--color-tertiary);
  color: var(--color-primary);
}
.menu__item.--toppage .menu__link:hover:after {
    content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2015%22%20fill%3D%22%23d82662%22%20width%3D%2210%22%20height%3D%2215%22%20%3E%3Cpath%20d%3D%22M10%207.5%202.5%200H.753l7.513%207.5L.755%2015H2.5z%22%2F%3E%3C%2Fsvg%3E");
}
.menu__link.--current {
  border-right: 16px solid var(--color-primary);
}
.menu__link.--current:hover {
  background: var(--color-tertiary);
}
.menu__link.--current:after {
  content: "";
}
.menu__photocontest {
  border-top: 1px solid #ffffff20;
  padding: var(--space-s) var(--space-l) 0;
}

@media (width <= 576px){
  .menu {
    max-width: none;
  }
}


/* フォトコンテスト
---------------------------------------------- */
.photocontest {
  max-width: calc(960px + var(--space-2xl));
  margin: var(--space-4xl) auto var(--space-4xl);
  padding: 0 var(--space-m);
}
.photocontest[data-type="common-bottom"] {
  margin: var(--space-4xl) auto 0;
}
.photocontest[data-type="article-top"] {
  margin: var(--space-2xl) auto  var(--space-2xl);
  padding: 0;
}
.photocontest__banner-area {
  position: relative;
  aspect-ratio: 37/8;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #000;
  text-decoration: none;
}
.photocontest__banner-bg {
  position: relative;
  z-index: 1;
  transition: 1s all ease;
}
.photocontest__banner:hover .photocontest__banner-bg {
  transform: scale(1.1);
  opacity: 0.7;
  transition: 1s all ease;
}
.photocontest__banner-title {
  position: absolute;
  z-index: 100;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.photocontest__banner-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (width <= 992px){
  .photocontest[data-type="article-top"] {
    padding: 0 var(--space-m);
  }
  .photocontest__banner-area {
    aspect-ratio: 40/21;
  }
  .photocontest__banner-title img {
    height: 100%;
    object-fit: contain;
  }
}


/* SNSボタン
---------------------------------------------- */
.social-links {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}
.social-links__guide {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: var(--space-2xl);
  border-right: 1px solid var(--color-secondary);
  padding: 0 var(--space-xs) 0 0;
  font-weight: 700;
}
.social-links a,
.social-links button {
  display: inline-block;
  width: var(--space-2xl);
  aspect-ratio: 1/1;
  border-radius: 100vw;
  background-color: var(--color-secondary);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  line-height: 0;
  font-size: 0;
  text-indent: -9999px;
  transition: background-color 0.3s;
}
.social-links a:hover,
.social-links button:hover {
  background-color: var(--color-primary);
}
.social-links a[data-state="website"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22m31.994%2019.624-1.007.031%201.007-.032a11.97%2011.97%200%200%200-3.65-8.248%2011.97%2011.97%200%200%200-8.721-3.37%2011.96%2011.96%200%200%200-8.248%203.65%2011.97%2011.97%200%200%200-3.37%208.721%2011.97%2011.97%200%200%200%203.65%208.248%2011.97%2011.97%200%200%200%208.72%203.37%2011.96%2011.96%200%200%200%208.248-3.65%2011.97%2011.97%200%200%200%203.37-8.719Zm-19.17-6.566a10%2010%200%200%201%203.266-2.245c-.514.739-.953%201.614-1.315%202.592h-2.271q.156-.177.32-.347m-1.276%201.629h2.818a20%2020%200%200%200-.673%204.672h-3.655a9.9%209.9%200%200%201%201.51-4.672m-.002%2010.626a9.9%209.9%200%200%201-1.507-4.672h3.658c.049%201.675.279%203.256.667%204.672zm1.512%201.863q-.287-.28-.551-.58h2.271c.192.52.402%201.016.637%201.472q.31.6.668%201.118a10%2010%200%200%201-3.025-2.009Zm6.301%202.786a10%2010%200%200%201-.825-.084%204%204%200%200%201-.338-.245c-.768-.624-1.49-1.68-2.048-3.037h3.211zm0-4.649h-3.663c-.412-1.379-.669-2.97-.721-4.672h4.384zm0-5.954h-4.38c.052-1.703.31-3.292.723-4.672h3.658zm0-5.954h-3.208c.127-.309.26-.607.403-.883.483-.936%201.05-1.671%201.642-2.154q.167-.134.333-.242.41-.06.83-.087zm9.096%201.282a9.9%209.9%200%200%201%201.506%204.672h-3.657c-.049-1.675-.279-3.256-.667-4.672zm-1.512-1.863q.287.28.551.581h-2.271a13%2013%200%200%200-.637-1.472q-.31-.6-.669-1.118a10%2010%200%200%201%203.026%202.009m-6.301-2.786q.417.026.824.084.17.11.339.246c.768.624%201.49%201.679%202.048%203.037h-3.211zm0%204.649h3.663c.412%201.379.669%202.97.721%204.672h-4.384zm0%205.954h4.38c-.052%201.703-.31%203.293-.723%204.672h-3.658v-4.672Zm2.804%206.837c-.483.936-1.051%201.671-1.642%202.154q-.166.134-.332.242-.41.06-.831.087v-3.366h3.207c-.127.309-.26.607-.403.883Zm3.73-.536a10%2010%200%200%201-3.265%202.245c.514-.739.953-1.613%201.314-2.592h2.271q-.156.177-.32.347m1.276-1.629h-2.817c.389-1.416.625-2.996.674-4.672h3.654a9.9%209.9%200%200%201-1.51%204.672Z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');
} 
.social-links a[data-state="youtube"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M30.8%2013.569c-.223-.589-.922-1.185-1.512-1.307-6.413-1.04-12.147-1.043-18.578%200-.59.122-1.288.718-1.512%201.307a17.84%2017.84%200%200%200%200%2012.862c.223.59.922%201.185%201.512%201.307%206.431%201.043%2012.165%201.04%2018.578%200%20.59-.123%201.288-.718%201.512-1.307a17.84%2017.84%200%200%200%200-12.862m-6.776%206.873c-2.274%201.298-3.438%201.985-5.635%203.271-.335.198-.762-.057-.771-.455-.06-2.606-.06-3.91%200-6.516.009-.398.436-.653.771-.458%202.198%201.287%203.361%201.975%205.635%203.275a.506.506%200%200%201%200%20.884Z%22%20style%3D%22fill%3A%23fff%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%2F%3E%3C%2Fsvg%3E');
} 
.social-links a[data-state="facebook"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M17.216%2C22.041h-3.699v-4.924l3.699-.216v-1.656c0-4.212%2C1.944-7.451%2C7.02-7.451%2C1.548%2C0%2C1.916.36%2C2.815.684l-.972%2C3.924c-.684-.288-.476-.432-1.124-.432-1.584%2C0-2.447.936-2.447%2C3.168v1.728h4.779v5.176h-4.779v10.982h-5.292v-10.982Z%22%2F%3E%3C%2Fsvg%3E');
} 
.social-links a[data-state="twitter"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M22.391%2C18.773l7.781-9.045h-1.844l-6.756%2C7.853-5.396-7.853h-6.224l8.16%2C11.876-8.16%2C9.485h1.844l7.135-8.293%2C5.699%2C8.293h6.224l-8.463-12.316h0ZM19.865%2C21.709l-.827-1.183-6.578-9.41h2.832l5.309%2C7.594.827%2C1.183%2C6.901%2C9.871h-2.832l-5.631-8.055h0Z%22%2F%3E%3C%2Fsvg%3E');
}
.social-links a[data-state="instagram"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22instagram%22%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M24.709%208.737h-9.417a6.366%206.366%200%200%200-6.366%206.366v9.794a6.366%206.366%200%200%200%206.366%206.366h9.417a6.366%206.366%200%200%200%206.366-6.366v-9.794a6.366%206.366%200%200%200-6.366-6.366m-13.524%206.366a4.11%204.11%200%200%201%204.106-4.106h9.417a4.11%204.11%200%200%201%204.106%204.106v9.794a4.11%204.11%200%200%201-4.106%204.106h-9.417a4.11%204.11%200%200%201-4.106-4.106z%22%2F%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M20%2025.801c3.199%200%205.801-2.602%205.801-5.801S23.199%2014.199%2020%2014.199%2014.199%2016.801%2014.199%2020s2.602%205.801%205.801%205.801m0-9.794c2.202%200%203.993%201.791%203.993%203.993S22.202%2023.993%2020%2023.993%2016.007%2022.202%2016.007%2020s1.791-3.993%203.993-3.993m5.971-.678a1.3%201.3%200%201%200%200-2.6%201.3%201.3%200%200%200%200%202.6%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
.social-links a[data-state="threads"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20d%3D%22M20.182%2032.153h-.007c-3.513-.024-6.214-1.182-8.029-3.444-1.615-2.012-2.448-4.813-2.476-8.322v-.017c.028-3.51.861-6.309%202.476-8.322%201.814-2.262%204.516-3.42%208.028-3.444h.014c2.693.018%204.947.711%206.698%202.057%201.646%201.266%202.804%203.071%203.444%205.365l-2.001.558c-1.083-3.885-3.824-5.871-8.147-5.902-2.854.02-5.013.918-6.416%202.666-1.314%201.638-1.994%204.003-2.018%207.029.025%203.027.705%205.393%202.018%207.029%201.403%201.749%203.562%202.646%206.416%202.666%202.573-.019%204.276-.618%205.692-2.006%201.616-1.583%201.587-3.525%201.069-4.707-.304-.696-.857-1.276-1.603-1.716-.187%201.325-.609%202.4-1.26%203.21-.868%201.081-2.1%201.672-3.658%201.756-1.18.064-2.316-.215-3.198-.786-1.043-.675-1.654-1.708-1.719-2.909-.064-1.168.399-2.241%201.303-3.023.864-.747%202.079-1.186%203.515-1.266a13.5%2013.5%200%200%201%202.963.14c-.121-.728-.367-1.306-.734-1.723-.504-.574-1.283-.868-2.315-.874h-.029c-.829%200-1.954.227-2.671%201.294l-1.724-1.159c.96-1.427%202.519-2.213%204.394-2.213h.042c3.135.019%205.002%201.937%205.187%205.286q.16.068.315.14c1.463.688%202.532%201.729%203.094%203.011.782%201.788.854%204.701-1.52%207.024-1.813%201.776-4.015%202.577-7.138%202.598h-.007Zm.984-11.471q-.355%200-.724.021c-1.802.102-2.925.927-2.861%202.102.067%201.231%201.426%201.804%202.731%201.733%201.202-.065%202.765-.532%203.027-3.641a10.4%2010.4%200%200%200-2.173-.216Z%22%20style%3D%22fill%3A%23fff%22%2F%3E%3C%2Fsvg%3E');
} 
.social-links a[data-state="line"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M33.121%2C18.416c0-5.691-5.706-10.322-12.719-10.322s-12.719%2C4.63-12.719%2C10.322c0%2C5.102%2C4.525%2C9.376%2C10.637%2C10.183.414.09.978.273%2C1.121.627.128.321.084.825.041%2C1.15%2C0%2C0-.149.898-.182%2C1.089-.055.321-.256%2C1.258%2C1.102.686%2C1.358-.572%2C7.325-4.313%2C9.993-7.385h0c1.843-2.022%2C2.726-4.073%2C2.726-6.351Z%22%2F%3E%3Cpath%20d%3D%22M28.89%2C21.702h-3.573c-.134%2C0-.243-.109-.243-.243v-.004h0v-5.541h0v-.006c0-.134.109-.243.243-.243h3.573c.134%2C0%2C.243.109.243.243v.902c0%2C.134-.109.243-.243.243h-2.429v.937h2.429c.134%2C0%2C.243.109.243.243v.902c0%2C.134-.109.243-.243.243h-2.429v.937h2.429c.134%2C0%2C.243.109.243.243v.902c0%2C.134-.109.243-.243.243Z%22%2F%3E%3Cpath%20d%3D%22M15.672%2C21.702c.134%2C0%2C.243-.109.243-.243v-.902c0-.134-.109-.243-.243-.243h-2.429v-4.406c0-.134-.109-.243-.243-.243h-.902c-.134%2C0-.243.109-.243.243v5.547h0v.004c0%2C.134.109.243.243.243h3.573Z%22%2F%3E%3Crect%20x%3D%2216.678%22%20y%3D%2215.666%22%20width%3D%221.388%22%20height%3D%226.037%22%20rx%3D%22.243%22%20ry%3D%22.243%22%2F%3E%3Cpath%20d%3D%22M23.964%2C15.666h-.902c-.134%2C0-.243.109-.243.243v3.297l-2.54-3.43c-.006-.009-.013-.017-.02-.025%2C0%2C0-.001-.001-.002-.002-.005-.005-.01-.01-.015-.015-.001-.001-.003-.003-.005-.004-.004-.004-.009-.008-.013-.011-.002-.002-.004-.003-.007-.005-.004-.003-.008-.006-.013-.009-.002-.002-.005-.003-.007-.005-.004-.003-.009-.005-.013-.007-.003-.001-.005-.003-.008-.004-.005-.002-.009-.004-.014-.006-.003%2C0-.005-.002-.008-.003-.005-.002-.01-.003-.015-.005-.003%2C0-.006-.002-.009-.002-.005-.001-.01-.002-.014-.003-.003%2C0-.007-.001-.01-.002-.004%2C0-.009-.001-.013-.002-.004%2C0-.009%2C0-.013%2C0-.003%2C0-.005%2C0-.008%2C0h-.897c-.134%2C0-.243.109-.243.243v5.551c0%2C.134.109.243.243.243h.902c.134%2C0%2C.243-.109.243-.243v-3.296l2.543%2C3.434c.018.025.039.045.063.061%2C0%2C0%2C.002.001.003.002.005.003.01.006.015.009.002.001.005.003.007.004.004.002.008.004.012.006.004.002.008.004.012.005.003%2C0%2C.005.002.008.003.005.002.011.004.017.005.001%2C0%2C.002%2C0%2C.003%2C0%2C.02.005.042.009.063.009h.897c.134%2C0%2C.243-.109.243-.243v-5.551c0-.134-.109-.243-.243-.243Z%22%2F%3E%3C%2Fsvg%3E');
} 
.social-links button[data-state="link"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M31.95%2C13.899c-.116-.602-.321-1.191-.613-1.748-.291-.556-.672-1.077-1.136-1.541-.618-.619-1.34-1.088-2.108-1.4-1.153-.466-2.407-.582-3.612-.349-.602.117-1.192.319-1.748.612-.555.293-1.077.672-1.541%2C1.137l-3.018%2C3.018c-.609.608-.609%2C1.597%2C0%2C2.205s1.596.608%2C2.205%2C0l3.018-3.02c.32-.319.684-.555%2C1.075-.714.585-.237%2C1.232-.298%2C1.847-.178.308.06.607.164.89.312.282.148.547.34.787.58.32.322.555.686.715%2C1.076.237.585.298%2C1.232.178%2C1.847-.06.308-.164.608-.311.889-.149.283-.341.548-.582.789l-3.018%2C3.018c-.609.609-.609%2C1.597%2C0%2C2.205s1.595.608%2C2.204%2C0l3.018-3.019c.619-.618%2C1.088-1.34%2C1.399-2.108.467-1.153.583-2.407.35-3.611Z%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M20.427%2C24.984l-3.019%2C3.019c-.321.32-.685.555-1.075.714-.585.238-1.232.298-1.847.179-.308-.061-.607-.165-.89-.313-.282-.149-.547-.342-.787-.581-.32-.322-.556-.685-.715-1.076-.237-.584-.298-1.232-.179-1.848.06-.308.164-.607.312-.889.149-.282.341-.547.582-.788l3.019-3.018c.608-.608.608-1.595%2C0-2.203-.609-.609-1.596-.609-2.205%2C0l-3.018%2C3.018c-.619.619-1.088%2C1.34-1.4%2C2.109-.466%2C1.151-.582%2C2.408-.35%2C3.609.116.602.32%2C1.192.613%2C1.748.292.556.672%2C1.079%2C1.136%2C1.542.619.619%2C1.34%2C1.089%2C2.108%2C1.398%2C1.152.468%2C2.408.584%2C3.611.351.603-.117%2C1.192-.321%2C1.747-.613.556-.291%2C1.079-.672%2C1.543-1.136l3.018-3.019c.608-.608.608-1.595%2C0-2.203-.609-.609-1.596-.609-2.204%2C0Z%22%2F%3E%3Cpath%20style%3D%22fill%3A%23fff%22%20d%3D%22M24.34%2C16.471c-.608-.608-1.595-.608-2.204%2C0l-5.673%2C5.672c-.608.609-.608%2C1.595%2C0%2C2.203.609.609%2C1.597.609%2C2.205%2C0l5.672-5.672c.609-.609.609-1.595%2C0-2.203Z%22%2F%3E%3C%2Fsvg%3E');
}  

#copy-url {
  background-color: var(--color-secondary);
  border: none;
  padding: 0;
  border-radius: 100vw;
  cursor: pointer;
  transition: background-color 0.3s;
}
#copy-url:hover {
  background-color: var(--color-primary);
}
.notification {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  border-radius: var(--radius-s);
  background-color: var(--bg-secondary);
  color: var(--text-dark);
  opacity: 0;
  transition: opacity 0.3s;
}
.notification.show {
  opacity: 1;
}
.notification.error {
  background-color: var(--color-primary);
  color: var(--text-light);
}

@media (width <= 992px) {
  .social-links {
    padding-inline: 1rem;
  }
}

@media (width <= 576px) {
  .social-links {
    position: relative;
  }
  .social-links a,
  .social-links button {
    display: flex;
    height: 30px;
    width: 30px;
  }
  .social-links svg {
    transform: scale(0.75);
  }
  .notification {
    width: 200px;
    height: 2rem;
    position: absolute;
    top: -1.9em;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1rem 0.5rem;
  }
}


/* トップページへ戻る
---------------------------------------------- */
.toppage__link {
  width: 100%;
  max-width: 960px;
  text-align: center;
  margin: var(--space-2xl) auto 0;
  padding-top: var(--space-2xl);
}
.toppage__link a {
  display: inline-block;
  padding: var(--space-m) var(--space-xs)  var(--space-m) var(--space-4xl);
  background-color: var(--color-secondary);
  color: var(--text-light);
  font-weight: 700;
  font-size: var(--font-size-m);
  text-decoration: none;
  transition: background-color 0.3s;
}
.toppage__link a:after {
  position: relative;
  top: 1px;
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2015%22%20fill%3D%22%23fff%22%20width%3D%2210%22%20height%3D%2215%22%20%3E%3Cpath%20d%3D%22M10%207.5%202.5%200H.753l7.513%207.5L.755%2015H2.5z%22%2F%3E%3C%2Fsvg%3E");
  padding-left: var(--space-3xl);
}
.toppage__link a:hover {
  background-color: var(--color-primary);
  color: var(--text-light);
}


/* フッター
---------------------------------------------- */
footer {
  margin-top: var(--space-6xl);
  text-align: center;
}
.footer__banner-area {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-s-3xl);
  padding: var(--space-xl-4xl) 0;
  background: var(--bg-secondary);
}
.footer__copyright {
  padding: var(--space-xl) 0 var(--space-2xl);
  font-size: var(--font-size-xs);
}

@media (width <= 992px) {
  .footer__banner-area {
    padding-inline: 1rem;
  }
}

@media (width <= 576px) {
  .footer__banner-area {
    flex-direction: column;
  }
}