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

@media (width <= 992px){
	.pagetitle {
		width: 100%;
		min-width: auto;
		height: auto;
    margin: 0 auto var(--space-4xl);
		background-image: url(../img/pagetitle-photospot-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);
  line-height: 1.2;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.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 (width <= 992px) {
  .article__title {
    padding-inline: 1rem;
  }
  .article__date {
    padding-inline: 1rem;
  }
}

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


/* 本文
---------------------------------------------- */
.photospot {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}
.photospot__swiper {
  position: relative;
  border-top: 1px solid var(--color-secondary);
  margin: 0 auto var(--space-4xl);
  padding-top: var(--space-4xl);
  padding-bottom: clamp(0.75rem, 0.189rem + 2.393vw, 1.625rem);
}
.photospot__swiper .swiper,
.photospot__swiper .swiper-slide {
  width: 100% !important;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.photospot__swiper .swiper-container {
  overflow: visible;
}
.photospot__swiper .swiper-pagination-bullets.swiper-pagination-horizontal {
  position: absolute;
	bottom: -16px;
}
.photospot .swiper-pagination-bullet {
  width: clamp(0.625rem, 0.385rem + 1.026vw, 1rem);
  height: clamp(0.625rem, 0.385rem + 1.026vw, 1rem);
}
.photospot .swiper-pagination-bullet-active {
	background: var(--color-primary);
}
.photospot .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
.photospot .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 10px;
}

.photospot__shootingpoint {
  margin-bottom: var(--space-4xl);
}
.photospot__shootingpoint h5 {
  margin: var(--space-2xl) auto var(--space-m);
}
.photospot__shootingpoint p {
  margin-bottom: var(--space-m);
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 2;
  font-size: var(--font-size-base);
}
.photospot__shootingpoint ul {
  margin-left: 1em;
  margin-bottom: var(--space-m);
}
.photospot__shootingpoint ul li {
  margin-bottom: var(--space-xs);
  padding-inline-start: var(--space-3xs);
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.5;
  font-size: var(--font-size-base);
}

.photospot__access {
  border-top: 1px solid var(--color-secondary);
  border-bottom: 1px solid var(--color-secondary);
  margin: 0 auto;
  padding: var(--space-3xl) 0 var(--space-4xl);
}
.photospot__access-heading {
  margin: 0 auto var(--space-3xl);
  text-align: center;
  letter-spacing: var(--space-2xs);
  text-indent: var(--space-2xs);
  font-size: var(--font-size-l);
  font-weight: 700;
}
.photospot__access-container {
  display: flex;
  justify-content: space-between;
  gap: 36px;
}
.photospot__access-text {
  flex-grow: 1;
}
.photospot__access p {
  margin-bottom: var(--space-m);
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 2;
  font-size: clamp(0.875rem, 0.795rem + 0.342vw, 1rem);
  color: #000;
}
.photospot__map-container {
  width: 360px;
  height: 0;
  overflow: hidden;
  padding-bottom: 25%;
  position: relative;
}
.photospot__map-container iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
@media (width <= 992px) {
  .photospot {
    padding-inline: 1rem;
  }
}
@media (width > 768px) {
  .photospot__access-text {
    width: calc(100% - 360px - 36px);
  }
}
@media (width <= 768px) {
  .photospot__access {
    display: block;
  }
  .photospot__access-container {
    flex-direction: column-reverse;
  }
  .photospot__access h5 {
    text-align: center;
  }
  .photospot__map-container {
    width: 100%;
    padding-bottom: 70%;
  }
  .photospot__access p:last-of-type {
    margin-bottom: 0;
  }
}

.photospot__photographer {
  border-bottom: 1px solid var(--color-secondary);
  margin: 0 auto;
  padding: var(--space-3xl) 0 var(--space-4xl);
}
.photospot__photographer-heading {
  margin: 0 auto var(--space-3xl);
  text-align: center;
  letter-spacing: var(--space-2xs);
  text-indent: var(--space-2xs);
  font-size: var(--font-size-l);
  font-weight: 700;
}
.photospot__photographer-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(2 * var(--space-2xl));
}
.photospot__photographer-img {
  width: 240px;
  height: 240px;
}
.photospot__photographer-text {
  flex-grow: 1;
}
.photospot__photographer-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.photospot__photographer-title h5 {
  margin: 0 0 var(--space-l);
  padding-right: 4px;
  letter-spacing: 8px;
  font-weight: 400;
  font-size: var(--font-size-xl);
}
.photospot__photographer-title h5 span {
  padding-left: var(--space-xs);
  letter-spacing: 2px;
  font-weight: 500;
  font-size: var(--font-size-s);
}
.photospot__photographer-profile {
  margin: 0 0 var(--space-l);
  text-align: justify;
  word-break: break-all; 
  text-justify: inter-ideograph;
  text-justify: inter-character;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 2;
  font-size: var(--font-size-base);
}
.photospot__photographer-social-links {
  gap: var(--space-s);
  margin-bottom: 0;
}
.photospot__photographer-social-links a {
  width: var(--space-2xl);
  height: var(--space-2xl);
}

@media (width <= 992px) {
  .photospot__photographer {
    padding-inline: 1rem;
  }
  .photospot__photographer-container {
    display: block;
  }
  .photospot__photographer-img {
    margin: 0 auto var(--space-m);
    width: 248px;
    height: 248px;
  }
  .photospot__photographer-title {
    display: block;
    border: 0;
  }
  .photospot__photographer-title h5 {
    margin: 0 auto var(--space-m);
    text-align: center;
  }
  .photospot__photographer-title h5 span {
    display: block;
    padding-top: var(--space-xs);
  }
  .photospot__photographer-social-links {
    justify-content: center;
  }
}