/* 撮影テクニック
---------------------------------------------- */
.pagetitle {
  width: 100%;
  max-width: 1920px;
  height: 248px;
	margin: 0 auto 80px;
	background-image: url(../img/pagetitle-pc-bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;
	text-align: center;
}
.pagetitle img {
  margin-inline: auto;
}

@media screen and (width <= 992px){
	.pagetitle {
		width: 100%;
		min-width: auto;
		height: auto;
    margin: 0 auto var(--space-4xl);
		background-image: url(../img/pagetitle-sp.jpg);
		background-repeat: no-repeat;
		background-size: contain;
		overflow: visible;
	}
	.pagetitle p:before {
		content:"";
		display: block;
		padding-top: 28.225%;
	}
	.pagetitle img {
		display: none;
	}
}


/* タイトル
---------------------------------------------- */
.article__title {
  margin-bottom: var(--space-s);
}
.article__title-num {
  display: inline-block;
  text-box: trim-both cap alphabetic;
  margin-bottom: var(--space-xs);
  padding: var(--space-xs);
  background: var(--color-primary);
  letter-spacing: clamp(0rem, -0.120rem + 0.513vw, 0.188rem);
  font-size: var(--font-size-m);
  color: var(--text-light);
}
.article__title-sub {
  display: block;
  margin-bottom: var(--space-2xs);
  letter-spacing: clamp(0rem, -0.022rem + 0.094vw, 0.063rem);
  font-size: clamp(0.875rem, 0.655rem + 0.939vw, 1.5rem);
}
.article__title-main {
  display: block;
  letter-spacing: 1px;
  font-size: clamp(1.5rem, 0.859rem + 2.735vw, 2.5rem);
}
.article .article__date {
  margin-bottom: var(--space-xl);
  text-decoration: solid underline var(--text-dark) 2px;
  text-underline-offset: 4px;
  letter-spacing: 1px;
  font-weight: 700;
  font-size: clamp(0.688rem, 0.407rem + 1.197vw, 1.125rem);
}

@media screen and (width <= 992px) {
  .article__title {
    padding-inline: 1rem;
  }
  .article__date {
    padding-inline: 1rem;
  }
}

@media screen and (width <= 576px) {
  .article__title-num {
    font-size: var(--font-size-base);
  }
}


/* SNSボタン
---------------------------------------------- */
.social-links {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: var(--space-2xl);
}
.social-links a,
.social-links button {
  display: inline-block;
  width: var(--space-2xl);
  height: var(--space-2xl);
  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="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="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 screen and (width <= 992px) {
  .social-links {
    padding-inline: 1rem;
  }
}

@media screen and (width <= 576px) {
  .social-links a,
  .social-links button {
    display: flex;
    height: 30px;
    width: 30px;
  }
  .social-links svg {
    transform: scale(0.75);
  }
}


/* 本文
---------------------------------------------- */
.article__lead {
  border-radius: var(--radius-m);
  background: var(--bg-secondary);
}
.article__lead p {
  margin-bottom: var(--space-xl);
  padding: var(--space-2xl);
  line-height: 2;
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.article__main img {
  max-height: 720px;
  background-color: var(--bg-primary);
  animation: fade-in ease both;
  animation-timeline: view();
  animation-range: entry 0 cover 50%;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.article__main img[data-state="vertical"] {
  max-height: 680px;
}

.article__main .article__photo-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-s-xl);
  margin: var(--space-2xl) auto var(--space-m);
}
.article__main .article__photo-container img {
  width: calc((100% - var(--space-s-xl)) / 2);
}

.article__main p {
  margin-bottom: var(--space-xl);
  line-height: 2;
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.article__main p + img,
.article__main .article__conclusion {
  margin: var(--space-5xl-6xl) auto var(--space-m);
}
.article__main .article__intro + img,
.article__main .article__intro + .article__photo-container {
  margin: var(--space-2xl) auto var(--space-m);
}
.article__main .article__photo-container {
  margin: var(--space-5xl-6xl) auto var(--space-m);
}
.article__main p.article__credit {
  margin-bottom: var(--space-5xl-6xl);
  text-align: right;
  font-size: var(--font-size-s);
}

.article__main h2 .article__heading-point,
.article__main h2 .article__heading-main {
  font-weight: 700;
}
.article__main p + h2 {
  margin: var(--space-5xl-6xl) auto var(--space-l-2xl);
}
.article__main h2 .article__heading-point {
  display: inline-block;
  margin-right: var(--space-m);
  padding: var(--space-m);
  background: var(--color-secondary);
  letter-spacing: 1px;
  font-size: var(--font-size-l);
  color: var(--text-light);
}

@media screen and (width > 992px) {
  .article__main h2 {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2xl);
    line-height: 1.2;
    letter-spacing: 1px;
  }
  .article__main h2::after {
    content: "";
    height: clamp(0.125rem, 0.045rem + 0.342vw, 0.25rem);
    flex-grow: 1;
    margin-left: var(--space-m);
    background-color: var(--text-dark);
  }
}

@media screen and (width <= 992px) {
  .article__lead {
    border-radius: unset;
  }
  .article__lead p {
    padding-inline: 1rem;
    line-height: 1.8;
  }
  .article__main {
    padding-inline: 1rem;
  }
  .article__main p {
    line-height: 1.8;
  }
  .article__main h2 {
    margin-bottom: var(--space-2xl);
    line-height: 1.5;
    letter-spacing: 0;
    background-image: url(../img/bg-header-line.gif);
    background-repeat: repeat-x;
    background-position: bottom 0.70rem right 0;
  }
  .article__main h2 span {
    display: inline-block;
    background: #fff;
  }
  .article__main h2 span:last-of-type {
    padding-right: 0.5rem;
  }
  .article__main h2.article__heading--adv {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
  }
  .article__main h2 .article__heading-point {
    padding: var(--space-xs) var(--space-s);
  }
  .article__heading-main {
    display: block;
  }
}

@media screen and (width <= 576px) {
  .article__main h2 {
    font-size: var(--font-size-m);
  }
  .article__main h2::after {
    margin-left: var(--space-xs);
  }
  .article__main h2 .article__heading-point {
    font-size: var(--font-size-base);
  }
  .article__main .article__photo-container[data-state="photo2"],
  .article__main .article__photo-container[data-state="photo3"] {
    flex-direction: column;
  }
  .article__main .article__photo-container[data-state="photo3"] img {
    width: 100%;
  }
}


/* 記事リンク
---------------------------------------------- */
.article__link {
  width: 100%;
  max-width: 960px;
  line-height: 2.4;
  text-align: right;
}
.article__link[data-state="lead"] {
  border-bottom: 1px solid var(--color-secondary);
  margin: 0 auto var(--space-4xl);
  padding-bottom: var(--space-2xl);
}
.article__link[data-state="footer"] {
  border-top: 1px solid var(--color-secondary);
  margin: var(--space-4xl) auto 0;
  padding-top: var(--space-2xl);
}
.article__link a {
  font-weight: 700;
}
.article__link .article__link-heading {
  display: inline-block;
  padding: 0 var(--space-xs) 0 var(--space-s);
  background-color: var(--color-secondary);
  color: var(--text-light);
  transition: background-color 0.3s;
}
.article__link .article__link-heading: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-2xs);
}
.article__link .article__link-heading:hover {
  background-color: var(--color-primary);
}

@media screen and (width <= 992px) {
  .article__link {
    width: calc(100% - 2rem);
    margin-inline: 1rem;
  }
}