.contentCommon__wrap-instagram {
	width: 100%;
	max-width: 1296px;
	margin: 0 auto;
}

.contentCommon__wrap-instagram img {
	border-radius: 10px;
}

@media (min-width: 769px) {
	#sbi_images {
		gap: 16px !important;
	}
}

.secInstagram + .secProfile {
	background: #C4AC75;
	color: #ffffff;
}

.secInstagram + .secProfile .titSec::after {
	background-image: url("../images/ico_title_01.png");
}

.secInstagram + .secProfile .listCompanyProfile__label,
.secInstagram + .secProfile .listCompanyProfile__detail {
	border-bottom-color: rgba(255, 255, 255, 0.4);
}

.listCompanyProfile__detail a {
	color: #ffffff;
	text-decoration: underline;
	&:hover {
		text-decoration: none;
	}
}


/* ここから修正 */
@media screen and (min-width: 769px) {
    .listNav__link {
        line-height: 1;
		font-weight: bold;
    }
	.listNav__items+.listNav__items {
        border-left-width: 2px;
    }
}

.boxSns {
	z-index: 10;
}

.hero__images {
	display: block flex;
	flex-wrap: wrap;
	width: 100%;

	img {
		display: block;
		width: 100%;
		height: auto;
		max-width: none;
	}
}

.hero__image {
	width: 50%;
}
.hero__image:nth-child(1) {
	width: 100%;
}

@media screen and (min-width: 769px) {
	.hero__image:nth-child(1),
	.hero__image {
		width: calc( 100% / 3 );
	}
	.hero__image:nth-child(2) {
		order: 0;
	}
	.hero__image:nth-child(1) {
		order: 1;
	}
	.hero__image:nth-child(3) {
		order: 2;
	}
}

.hero__title {
	font-size: 30px;
	text-align: center;
	/* padding-block: 1.5em .25em; */
	padding-block: 2.5em 1em;
	padding-inline: 1em;
	line-height: 1;
	img {
		vertical-align: bottom;
		max-width: 646px;
		width: 100%;
		height: auto;
	}
	@media screen and (min-width: 769px) {
		font-size: 60px;
		padding-block: 1.5em .5em;
	}
	@media screen and (min-width: 978px) {
		font-size: 60px;
		padding-block: 2em .5em;
	}
	@media screen and (min-width: 1620px) {
		padding-block: 2.5em .5em;
	}
}

.hero__lead {
	padding: .5em;
	font-size: 18px;
	color: #C4AC75;
	text-align: center;
	span {
		font-size: 2em;
	}
	br {
		@media screen and (min-width: 769px) {
			display: none;
		}
	}
	@media screen and (min-width: 769px) {
		font-size: 24px;
	}
}

.hero__button-outer {
	text-align: center;
	padding: 1em;
	img {
		max-width: 500px;
		width: 100%;
		height: auto;
	}
	a {
		display: inline-block;
	}
}

.service-included__list {
	display: block grid;
	max-width: 890px;
	width: 100%;
	margin-inline: auto;
	text-align: center;
	margin-block: 5em 3em;
	gap: 2em;
	@media screen and (min-width: 769px) {
		margin-block: 5em;
		gap: 1em;
		grid-template-columns: 1fr 1fr 1fr;
	}
	img {
		margin-block-end: 1em;
	}
	p {
		font-size: 14px;
		font-weight: bold;
		line-height: 1.4;
		color: #C4AC75;
		@media screen and (min-width: 769px) {
			font-size: 18px;
		}
	}
}

.service-included__heading {
	font-size: 18px;
	line-height: 1.4;
	@media screen and (min-width: 769px) {
		font-size: 24px;
	}
}

.reserve-method__lead {
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
	font-weight: bold;
	margin-block: 1.5em;

	@media screen and (min-width: 769px) {
		font-size: 36px;
	}
}

.reserve-method__target {
	background-color: #fff;
	color: #C4AC75;
	font-weight: bold;
	border-radius: 3em;
	max-width: 708px;
	width: 100%;
	padding-inline: 1em;
	padding-block: .25em;
	text-align: center;
	margin-inline: auto;
	font-size: 18px;
	line-height: 1.4;
	margin-block-end: .5em;
	@media screen and (min-width: 769px) {
		font-size: 24px;
	}
}

.reserve-method__caution {
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	font-weight: bold;
	@media screen and (min-width: 769px) {
		font-size: 18px;
	}
}

.reserve-method__list {
	display: block grid;
	gap: 2em;
	margin-block: 4em 2em;
	max-width: 1096px;
	width: 100%;
	margin-inline: auto;
	@media screen and (min-width: 769px) {
		grid-template-columns: 1fr 1fr;
		margin-block: 4em;
	}
}

.reserve-method__item {
	background-color: #fff;
	overflow: hidden;
	border-radius: 20px;
	img {
		display: block;
		border-radius: 20px 20px 0 0;
		width: 100%;
		max-width: none;
		height: auto;
	}

	@media screen and (min-width: 769px) {
		display: block grid;
		grid-template-columns: 2fr 3fr;
		padding: 1em;
		border-radius: 20px;
		img {
			border-radius: 5px;
		}
	}
}

.reserve-method__box {
	padding: 1.5em;

	ol {
		font-size: 14px;
		line-height: 1.4;
		color: #4B4B4B;
		font-weight: bold;
		display: block grid;
		gap: .5em;

		li {
			list-style: none;
			padding-inline-start: 2.5em;
			position: relative;
			line-height: 1.5;
		}
		li::before {
			display: block;
			width: 1.5em;
			height: 1.5em;
			line-height: 1.5;
			border-radius: 100%;
			color: #fff;
			background-color: #C4AC75;
			text-align: center;
			position: absolute;
			left: 0;
			top: 0;
		}
		li:nth-child(1)::before {
			content: '1';
		}
		li:nth-child(2)::before {
			content: '2';
		}

		@media screen and (min-width: 769px) {
			font-size: 18px;
		}
	}
}

.reserve-method__heading {
	text-align: center;
	color: #C4AC75;
	font-size: 20px;
	line-height: 1.4;
	border-bottom: 1px dotted #C4AC75;
	padding-block-end: .5em;
	margin-block-end: 1em;
	@media screen and (min-width: 769px) {
		font-size: 28px;
	}
}

.yaranaikoto {
	position: relative;
}

.yaranaikoto__inner {
	position: relative;
	padding: 50px 12px;
	@media screen and (min-width: 769px) {
		padding: 180px 20px;
		max-width: 1096px;
		width: 100%;
		margin-inline: auto;
	}
}

.yaranaikoto__title {
	font-size: 24px;
	line-height: 1.4;
	text-align: center;
	@media screen and (min-width: 769px) {
		font-size: 36px;
		text-align: left;
	}
}

.yaranaikoto__image {
	img {
		display: block;
		width: 100%;
		height: 100%;
		max-width: none;
	}
	@media screen and (min-width: 769px) {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		img {
			object-fit: cover;
		}
	}
}

.yaranaikoto__list {
	margin-block: 2em 0;
	@media screen and (min-width: 769px) {
		max-width: 550px;
	}
}

.yaranaikoto__item {
	display: block grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 1em;
	border-bottom: 1px dotted #C4AC75;
	padding-block: 1.5em;
	p {
		font-weight: bold;
		line-height: 1.4;
	}
}

.yaranaikoto__number {
	font-size: 26px;
	display: block;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5;
	border-radius: 100%;
	color: #fff;
	background-color: #C4AC75;
	text-align: center;
	position: relative;

	&::before {
		content: '';
		position: absolute;
		width: calc(100% - 4px);
		height: calc(100% - 4px);
		top: 1px;
		left: 1px;
		border: 1px dotted #fff;
		border-radius: 100%;
	}
	@media screen and (min-width: 769px) {
		width: 2em;
		height: 2em;
		line-height: 2;
		font-size: 32px;
	}
}

.yaranaikoto__heading {
	font-size: 18px;
	line-height: 1.4;
	@media screen and (min-width: 769px) {
		font-size: 28px;
	}
}

/*
  MARK: アニメーション
*/
:root {
  --animation-duration: 0.35s;
  --animation-timing-function: cubic-bezier(.645, .045, .355, 1);
}

body {
  .hero__title {
    --animation-delay: 0s;
    opacity: 0;
    transform: translateY(10px) scale(.95);
    transform-origin: 50% 50%;
    transition: opacity .5s var(--animation-timing-function) var(--animation-delay), transform .5s var(--animation-timing-function) var(--animation-delay);
  }
  .hero__image {
	--animation-delay: .4s;
	filter: blur(10px);
	opacity: 0;
	transform: translateY(10px) scale(.95);
	transition: opacity .5s var(--animation-timing-function) var(--animation-delay), transform .5s var(--animation-timing-function) var(--animation-delay), filter .5s var(--animation-timing-function) var(--animation-delay);

	&:nth-child(2) {
		--animation-delay: .5s;
	}
	&:nth-child(3) {
		--animation-delay: .6s;
	}
  }
  .hero__lead {
	--animation-delay: .8s;
    opacity: 0;
    transform: translateY(10px);
    transform-origin: 50% 50%;
    transition: opacity var(--animation-duration) var(--animation-timing-function) var(--animation-delay), transform var(--animation-duration) var(--animation-timing-function) var(--animation-delay);
  }
  .hero__button-outer {
	--animation-delay: 1s;
    opacity: 0;
    transform: translateY(10px);
    transform-origin: 50% 50%;
    transition: opacity var(--animation-duration) var(--animation-timing-function) var(--animation-delay), transform var(--animation-duration) var(--animation-timing-function) var(--animation-delay);
  }

  &.is-mv-loaded {
    .hero__title {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
	.hero__image {
	  filter: blur(0);
      opacity: 1;
      transform: translateY(0) scale(1);
    }
	.hero__lead,
  	.hero__button-outer {
		opacity: 1;
      	transform: translateY(0);
	} 
  }
}

.is-slow {
  --animation-duration: .7s;
}

.animation-slideup-list {
  --base-animation-delay: 0.1s;
  & > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);
  }
  & > *:nth-child(2) {
    transition-delay: calc(var(--base-animation-delay) * 1);
  }
  & > *:nth-child(3) {
    transition-delay: calc(var(--base-animation-delay) * 2);
  }
  & > *:nth-child(4) {
    transition-delay: calc(var(--base-animation-delay) * 3);
  }
  & > *:nth-child(5) {
    transition-delay: calc(var(--base-animation-delay) * 4);
  }
  & > *:nth-child(6) {
    transition-delay: calc(var(--base-animation-delay) * 5);
  }
  & > *:nth-child(7) {
    transition-delay: calc(var(--base-animation-delay) * 6);
  }

  &.has-scroll-animation.is-scrolled {
    & > * {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.animation-slideup {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateY(0);
  }
}

.animation-slide-left {
  opacity: 0;
  transform: translateX(10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-slide-right {
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity var(--animation-duration) var(--animation-timing-function), transform var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
    transform: translateX(0);
  }
}

.animation-fadein {
  opacity: 0;
  transition: opacity var(--animation-duration) var(--animation-timing-function);

  &.has-scroll-animation.is-scrolled {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.poyopoyo {
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(0.9);
  }
}