:root {
	--color-white: #fff;
    --color-red: #d92648;
    --color-black: #000000;
	--color-accent-b: #9ec5ff;
	--color-accent-r: #ffacdc;
	--color-accent-p: #af6faa;
	--color-btn-1: #12d2cb;
	--color-btn-2: #d92648;
    --font-serif: "Noto Serif JP", serif;
    --font-sans: 'Noto Sans JP', sans-serif;
    --font-size-10: 1rem;
    --font-size-22: 2.2rem;
    --font-size-27: 2.7rem;
    --font-size-30: 3rem;
    --font-size-42: 4.2rem;
    --font-size-10-sp: 2.66vw;
    --font-size-16-sp: 4.26vw;
    --font-size-18-sp: 4.8vw;
    --font-size-21-sp: 5.6vw;
    --font-size-27-sp: 7.2vw;
}

/*---------------------------------------
common
---------------------------------------*/
html {
    font-size: 62.5%;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-22);
    line-height: 1.75em;
	color: var(--color-black);
}
.mincho{
	font-family: var(--font-serif);
}
.pc{
	display:block !important;
}
.sp{
	display: none !important;
}

.container{
	width:750px;
	margin:0 auto;
	position:relative;
}

.outfit{
	font-family: 'Outfit', sans-serif;
	font-weight:300;
}

@media screen and (max-width:767px) {
	body {
		font-size: var(--font-size-16-sp);
	}

	.pc{
		display:none !important;
	}

	.sp{
		display:block !important;
		line-height:1.4;
	}

	img{
		width:100%;
		vertical-align: top;
	}

	.container{
		width:100%;
	}
}


/*---------------------------------------
header
---------------------------------------*/
.header-area {
	background: linear-gradient(-22.8337deg, #9dd0ff 0%, #d897ca 100%);
}
.header-area h1 {
	display: flex;
	justify-content: center;
	padding: 45px 0 45px 0;
}
.header-area h1 img {
	width: 425px;
}
.header-bottom {
	background-color: var(--color-black);
}
.header-bottom p {
	text-align: center;
	color: var(--color-white);
	font-size: var(--font-size-27);
	font-family: var(--font-serif);
	padding: 30px 0 30px 0;
}
.header-bottom p span {
	font-size: var(--font-size-30);
}
@media screen and (max-width:767px) {
	.header-area {
	}
	.header-area h1 {
		padding: 5% 0 5% 0;
	}
	.header-area h1 picture {
		width: 74.66%;
	}
	.header-area h1 img {
		width: 100%;
	}
	.header-bottom {
		background-color: var(--color-black);
	}
	.header-bottom p {
		font-size: var(--font-size-18-sp);
		padding: 5% 0 5% 0;
	}
	.header-bottom p span {
		font-size: var(--font-size-21-sp);
	}
}

/*---------------------------------------
bg-scroll
---------------------------------------*/
[class^="bg-scroll"] {
	overflow: hidden;
	height: 250px;
	position: relative;
	margin: 120px 0;
}

[class^="bg-scroll"] .bg-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

[class^="bg-scroll"] .bg-track img {
	height: 250px;
	width: auto;
	flex: 0 0 auto;
	display: block;
}
@media screen and (max-width:767px) {
	[class^="bg-scroll"] {
		height: 175px;
		margin: 10% 0;
	}

	[class^="bg-scroll"] .bg-track {
	}

	[class^="bg-scroll"] .bg-track img {
		height: 175px;
	}
}

/*---------------------------------------
スクロール方向ごとにアニメーション付与
---------------------------------------*/
.bg-scroll-1 .bg-track {
	animation: scrollLeft 30s linear infinite;
}

.bg-scroll-2 .bg-track {
	animation: scrollRight 30s linear infinite;
}

/*---------------------------------------
Keyframes
---------------------------------------*/
@keyframes scrollLeft {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes scrollRight {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.bg-scroll-1 .bg-track,
	.bg-scroll-2 .bg-track {
		animation: none;
	}
}

/*---------------------------------------
見出し
---------------------------------------*/
[class^="h1-cont"] {
	text-align: center;
	color: var(--color-red);
	font-size: var(--font-size-42);
	font-weight: 500;
	font-family: var(--font-serif);
	position: relative;
	z-index: 0;
}
[class^="h1-cont"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: -1;
}
@media screen and (max-width:767px) {
	[class^="h1-cont"] {
		font-size: var(--font-size-27-sp);
	}
	[class^="h1-cont"]::before {
	}
}
.h1-cont1::before {
	width: 276px;
	height: 179px;
	background: url(../img/block1-bg.png) no-repeat center / auto 179px;
}
.h1-cont2::before {
	width: 330px;
	height: 224px;
	background: url(../img/block2-bg.png) no-repeat center / auto 224px;
}
.h1-cont3::before {
	width: 467px;
	height: 207px;
	background: url(../img/block3-bg.png) no-repeat center / auto 207px;
}
.h1-cont4::before {
	width: 375px;
	height: 181px;
	background: url(../img/block4-bg.png) no-repeat center / auto 181px;
}
.h1-cont5::before {
	width: 352px;
	height: 216px;
	background: url(../img/block5-bg.png) no-repeat center / auto 216px;
}
@media screen and (max-width:767px) {
.h1-cont1::before {
	width: 73.33%;
	height: 40vw;
	background: url(../img/block1-bg.png) no-repeat center / 100% auto;
}
.h1-cont2::before {
	width: 80%;
	height: 55vw;
	background: url(../img/block2-bg.png) no-repeat center / 100% auto;
}
.h1-cont3::before {
	width: 100%;
	height: 45vw;
	background: url(../img/block3-bg.png) no-repeat center / 100% auto;
}
.h1-cont4::before {
	width: 80%;
	height: 40vw;
	background: url(../img/block4-bg.png) no-repeat center / 100% auto;
}
.h1-cont5::before {
	width: 73.86%;
	height: 46vw;
	background: url(../img/block5-bg.png) no-repeat center / 100% auto;
}
}


/*---------------------------------------
btn
---------------------------------------*/
.btn-area {
	margin: 40px 0 40px 0;
}

/* ===== ボタン本体 ===== */
.btn-fuse{
	/* カスタマイズ用 変数 */
	--w: 430px;
	--h: 75px;
	--w-sp: 100%;
	--h-sp: 8vh;
	--r: 45px;
	--offset: 5px;
	--dur: .45s;
	--ease: cubic-bezier(.25,.8,.25,1);

	position: relative;
	display: inline-grid;
	place-items: center;       /* テキスト中央寄せ */
	width: var(--w);
	height: var(--h);
	border-radius: var(--r);
	isolation: isolate;
	background: #fff;
	color: var(--color-white);
	font-weight: 400;
	font-size: var(--font-size-22);
	text-decoration: none;
	z-index: 0;
}

/* テキストをブレンドの上に確実に表示 */
.btn-fuse > * { position: relative; z-index: 2; }

/* ===== 背景レイヤ（赤/青） ===== */
.btn-fuse::before,
.btn-fuse::after{
	content: "";
	position: absolute;
	inset: 0;                  /* ボタン全体サイズ */
	border-radius: inherit;    /* 角丸を継承 */
	transition: transform var(--dur) var(--ease);
	z-index: 1;
	will-change: transform;
}

/* 左上へ20px ずらした赤 */
.btn-fuse::before{
	background: var(--color-btn-1);
	transform: translate(calc(-1 * var(--offset)), calc(-1 * var(--offset)));
}

/* 右下へ20px ずらした青（重なりを混色したいので blend する） */
.btn-fuse::after{
	background: var(--color-btn-2);
	mix-blend-mode: multiply;  /* 重なり部分が “混ざる” */
	transform: translate(var(--offset), var(--offset));
}

/* ===== hoverで中央に合流 ===== */
.btn-fuse:hover::before,
.btn-fuse:hover::after{
	transform: translate(0,0);
}
/* ===== 右側のCSS矢印（アウトライン） ===== */
.btn-fuse__arrow{
  position: absolute;
  right: 25px;                 /* 矢印の右余白 */
  top: 50%;
  transform: translateY(-50%) rotate(45deg); /* 45度回転で > を作る */
  width: 14px;                 /* 矢印ヘッドのサイズ */
  height: 14px;
  border-right: 3px solid currentColor; /* 輪郭線：テキスト色に追従 */
  border-top: 3px solid currentColor;
  background: transparent;
  z-index: 2;                  /* テキストと同じ前面 */
  pointer-events: none;        /* クリックの邪魔をしない */
  transition: transform var(--dur) var(--ease);
}


/* hoverで少しだけ右へスライド */
.btn-fuse:hover .btn-fuse__arrow{
  transform: translateY(-50%) translateX(2px) rotate(45deg);
}

/* 動きを抑えたいユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce){
	.btn-fuse::before,
	.btn-fuse::after{ transition: none; }
}

@media screen and (max-width:767px) {
.btn-fuse{
	width: var(--w-sp);
	height: var(--h-sp);
	margin: 0 auto;
}
}


/*---------------------------------------
cont1
---------------------------------------*/
.cont1 {
	padding: 130px 0 0 0;
}
.cont1 > div {
	display: flex;
	justify-content: center;
	gap: 0 30px;
	padding: 130px 0 0 0;
}
.cont1 > div > .block1-img {
	width: 305px;
}
.cont1 > div > .block1-img img {
	width: 100%;
}
.cont1 > div > .block1-text {
	width: 690px;
}
.cont1 > div > .block1-text p {
	line-height: 2em;
}
@media screen and (max-width:767px) {
.cont1 {
	padding: 13% 0 0 0;
}
.cont1 > div {
	flex-direction: column;
	gap: 50px 0;
	padding: 13% 0 0 0;
}
.cont1 > div > .block1-img {
	width: 57.6%;
	margin: 0 auto;
}
.cont1 > div > .block1-img img {
	width: 100%;
}
.cont1 > div > .block1-text {
	width: 90%;
	margin: 0 auto;
}
.cont1 > div > .block1-text p {
	line-height: 2em;
}
}

/*---------------------------------------
cont2
---------------------------------------*/
.cont2 {
	padding: 130px 0 0 0;
}
.cont2 > div {
	display: flex;
	justify-content: center;
	gap: 0 30px;
	padding: 130px 0 130px 0;
}
.cont2 > div > .block2-text {
	width: 690px;
}
.cont2 > div > .block2-text ul {
}
.cont2 > div > .block2-text ul li::before {
	content: "▶ ";
	color: var(--color-accent-r);
}
.cont2 > div > .block2-text ul li:last-child::before {
	color: var(--color-accent-b);
}
.cont2 > div > .block2-text ul li {
}
.cont2 > div > .block2-text p {
	line-height: 2em;
}
.cont2 > div > .block2-img {
	width: 270px;
}
.cont2 > div > .block2-img img {
	width: 100%;
}
@media screen and (max-width:767px) {
.cont2 {
	padding: 13% 0 0 0;
}
.cont2 > div {
	flex-direction: column-reverse;
	gap: 50px 0;
	padding: 13% 0 13% 0;
}
.cont2 > div > .block2-text {
	width: 90%;
	margin: 0 auto;
}
.cont2 > div > .block2-text ul {
}
.cont2 > div > .block2-text ul li::before {
	content: "▶ ";
	color: var(--color-accent-r);
}
.cont2 > div > .block2-text ul li:last-child::before {
	color: var(--color-accent-b);
}
.cont2 > div > .block2-text ul li {
}
.cont2 > div > .block2-text p {
	line-height: 2em;
}
.cont2 > div > .block2-img {
	width: 50%;
	margin: 0 auto;
}
.cont2 > div > .block2-img img {
	width: 100%;

}
}

/*---------------------------------------
cont3
---------------------------------------*/
.cont3 {
	padding: 130px 0 0 0;
}
.cont3 > div {
	display: flex;
	justify-content: center;
	gap: 0 30px;
	padding: 130px 0 130px 0;
}
.cont3 > div > .block3-text {
	width: 690px;
}
.cont3 > div > .block3-text p {
	line-height: 2em;
}
.cont3 > div > .block3-img {
	width: 270px;
}
.cont3 > div > .block3-img img {
	width: 100%;
}
@media screen and (max-width:767px) {
.cont3 {
	padding: 13% 0 0 0;
}
.cont3 > div {
	flex-direction: column-reverse;
	gap: 50px 0;
	padding: 13% 0 13% 0;
}
.cont3 > div > .block3-text {
	width: 90%;
	margin: 0 auto;
}
.cont3 > div > .block3-text p {
	line-height: 2em;
}
.cont3 > div > .block3-img {
	width: 50%;
	margin: 0 auto;
}
.cont3 > div > .block3-img img {
	width: 100%;
}
}

/*---------------------------------------
cont4
---------------------------------------*/
.cont4 {
	padding: 130px 0 0 0;
}
.cont4 > div {
	padding: 130px 0 130px 0;
}
.cont4 > div p {
	text-align: center;
}
.cont4 > div > div {
	display: flex;
	justify-content: center;
}
@media screen and (max-width:767px) {
.cont4 {
	padding: 13% 0 0 0;
}
.cont4 > div {
	flex-direction: column;
	gap: 50px 0;
	padding: 13% 0 13% 0;
	width: 90%;
	margin: 0 auto;
}
.cont4 > div p {
	text-align: center;
}
.cont4 > div > div {
	display: flex;
	justify-content: center;
}
}


/*---------------------------------------
cont5
---------------------------------------*/
.cont5 {
	padding: 130px 0 0 0;
}
.cont5 > div {
	display: flex;
	justify-content: center;
	padding: 130px 0 130px 0;
}
.cont5 > div ul li {
	text-align: center;
}
.cont5 > div ul li::before {
	content: "● ";
	color: var(--color-accent-p);
}
@media screen and (max-width:767px) {
.cont5 {
	padding: 13% 0 0 0;
}
.cont5 > div {
	display: flex;
	justify-content: center;
	padding: 130px 0 130px 0;
}
.cont5 > div ul li {
	text-align: center;
}
.cont5 > div ul li::before {
	content: "● ";
	color: var(--color-accent-p);
}
}

/*---------------------------------------
footer
---------------------------------------*/
.footer-area {
	background: linear-gradient(-22.8337deg, #9dd0ff 0%, #d897ca 100%);
	padding: 80px 0 40px 0;
}
.footer-area h1 {
	display: flex;
	justify-content: center;
	padding: 0 0 40px 0;
}
.footer-area h1 a {
	width: 128px;
}
.footer-area h1 picture img {
	width: 100%;
}
.footer-area p {
	text-align: center;
	font-size: var(--font-size-10);
	color: var(--color-white);
}

@media screen and (max-width:767px) {
	.footer-area {
		padding: 10% 0 7%x 0;
	}
	.footer-area h1 {
		padding: 0 0 7% 0;
	}
	.footer-area h1 a {
		width: 34.13%;
	}
	.footer-area h1 picture img {
	}
	.footer-area p {
		font-size: var(--font-size-10-sp);
	}
}