/*
- 目次
1. page-lp-2026halloween.php（2026ハロウィンオープンキャンパスLP）
*/

/*=======================
  1. page-lp-2026halloween.phpのcss start
========================*/
/*fonts*/
/*@font-face {
	font-family: "BebasNeue";
	src: url("../fonts/BebasNeue-Regular.woff") format("woff");
}
@font-face {
	font-family: "Run_Wild";
	src: url("../fonts/Run_Wild_-_Demo.woff") format("woff");
}*/
/*=======================*/
#lp-halloween {
    background: #027560;
}
.btn-halloween__wrap {
    max-width: 590px;
    margin: auto;
}
.btn-halloween {
    background: #FFD800;
    color: #D9650F;
}
.btn-halloween:hover, 
.btn-halloween:focus, 
.btn-halloween-merit:hover, 
.btn-halloween-merit:focus {
    box-shadow: 0px 8px 10px rgb(0, 0, 0, 0.5);
}
.btn-cta.btn-halloween .btn-arrow {
	width: 24px;
	height: 24px;
}
.para-black {
	font-weight: 900;
}
.u-rel {
	position: relative;
}
.u-abs {
	position: absolute;
}
.under900-none {
    display: block;
}
.under900-only {
	display: none;
}
@media screen and (max-width: 900px) {
    .under900-none {
        display: none;
    }
    .under900-only {
        display: block;
    }
}
/*header*/
/*=======================
  メインビジュアル
  ※ステージ（1920×1080 / SP 390×740）を基準に、各要素を%で絶対配置
========================*/
.mv-halloween {
	width: 100%;
	overflow: hidden;
}
.mv-halloween__stage {
	width: 100%;
	aspect-ratio: 1920 / 1080;
	background: #027560;
	overflow: hidden;
}
.mv-halloween__stage::before {
	content: "";
	position: absolute;
	inset: 0;
	background: #E1C975;
	z-index: 0;
}
.mv-halloween__stage img {
	display: block;
	width: 100%;
	height: auto;
}
.mv-halloween__title {
	margin: 0;
	line-height: 0;
}
/*背景（波）*/
.mv-halloween__wave {
	left: 0;
	width: 100%;
}
.mv-halloween__wave--top {
	top: 0;
	z-index: 1;
}
.mv-halloween__wave--bottom {
	bottom: 0;
	z-index: 4;
}
/*背景（あしらい）*/
.mv-halloween__deco {
	z-index: 2;
	pointer-events: none;
}
.mv-halloween__deco--l {
	left: 5.104%;
	top: -3.426%;
	width: 29.115%;
	z-index: 4;
}
.mv-halloween__deco--r {
	left: 69.896%;
	top: -5.093%;
	width: 25.729%;
}
.mv-halloween__deco--sp01,
.mv-halloween__deco--sp02,
.mv-halloween__deco--sp03 {
	display: none;
}
/*在校生集合写真*/
.mv-halloween__student {
	left: 29.375%;
	top: 51.481%;
	width: 41.25%;
	z-index: 3;
}
/*タイトル*/
.mv-halloween__title {
	left: 26.25%;
	top: 12.222%;
	width: 47.448%;
	z-index: 5;
}
/*スペシャルイベント*/
.mv-halloween__special {
	left: 21.25%;
	top: 30.37%;
	width: 14.844%;
	z-index: 4;
}
/*入試情報解禁*/
.mv-halloween__catch {
	left: 69.167%;
	top: 38.148%;
	width: 6.719%;
	z-index: 5;
}
/*アクセス*/
.mv-halloween__access {
	left: 68.958%;
	top: 78.148%;
	width: 12.292%;
	z-index: 6;
}
/*キャラクター*/
.mv-halloween__chara {
	z-index: 5;
}
.mv-halloween__chara--pumpkin {
	left: 69.792%;
	top: 17.037%;
	width: 7.969%;
}
.mv-halloween__chara--girl {
	left: 76.458%;
	top: 59.259%;
	width: 7.552%;
}
.mv-halloween__chara--zombie {
	left: 17.708%;
	top: 63.704%;
	width: 10.729%;
}
/*=======================
  表示アニメーション（ページ共通）
  使い方：出したい要素に data-anim="fade-up" などを付けるだけ。
          横並びの親に data-anim-stagger="0.2" を付けると直下の子が順番に出る。
  ・<html> に .js-anim が付いて初めて効くので、JSが無い環境では何も隠れない。
  ・個別に遅らせたい時は style="--anim-delay:.3s" でもOK。
  ・移動は transform ではなく translate / scale プロパティを使用。
    揺れ（rotate）と別プロパティなので、重ねても奪い合わない。
========================*/
.js-anim [data-anim] {
	opacity: 0;
	transition: opacity .9s ease,
	            translate .9s cubic-bezier(.22, .61, .36, 1),
	            scale .9s cubic-bezier(.22, .61, .36, 1);
	transition-delay: var(--anim-delay, 0s);
}
.js-anim [data-anim="fade-up"]    { translate: 0 40px; }
.js-anim [data-anim="fade-down"]  { translate: 0 -40px; }
.js-anim [data-anim="fade-right"] { translate: -40px 0; }
.js-anim [data-anim="fade-left"]  { translate: 40px 0; }
.js-anim [data-anim="pop"]        { scale: .88; }
.js-anim [data-anim].is-show {
	opacity: 1;
	translate: none;
	scale: none;
}
/*ぽんっと弾んで出る
  使い方：data-anim="bounce" を付けるだけ。scale 0 から少し行き過ぎて戻る。
  ・出る速さは style="--bounce-duration:1.6s" で個別に変えられる（小さいほど速い）。
  ・並んだ要素を順に出す時は --anim-delay（または親の data-anim-stagger）でずらす。
  ・出たあともカタカタ揺らしたい時は、内側の img に data-anim-loop="shake" を付ける
    （同じ要素に付けるとループ側が animation を上書きして、弾む動きが消える）。*/
@keyframes anim-bounce {
	0%   { opacity: 1; scale: 0; }
	30%  { scale: 1.05; }
	50%  { scale: .97; }
	70%  { scale: 1.02; }
	100% { scale: 1; }
}
.js-anim [data-anim="bounce"] {
	opacity: 0;
	scale: 0;
	/*動きはキーフレーム側で作るので、共通の transition は効かせない*/
	transition: none;
}
.js-anim [data-anim="bounce"].is-show {
	/*backwards＝遅延中は0%の姿勢（scale:0）で待つので、先にチラッと出ない*/
	animation: anim-bounce var(--bounce-duration, 1.2s) ease var(--anim-delay, 0s) backwards;
}

/*MVは絶対配置なので移動量を%で*/
.js-anim .mv-halloween__stage [data-anim="fade-up"] { translate: 0 8%; }

/*MVの出る順番（秒）*/
.mv-halloween__wave,
.mv-halloween__deco { --anim-delay: 0s; }
.mv-halloween__title { --anim-delay: .2s; }
.mv-halloween__student { --anim-delay: .45s; }
.mv-halloween__special { --anim-delay: .65s; }
.mv-halloween__chara--pumpkin { --anim-delay: .75s; }
.mv-halloween__catch { --anim-delay: .85s; }
.mv-halloween__chara--zombie { --anim-delay: .95s; }
.mv-halloween__chara--girl { --anim-delay: 1.05s; }
.mv-halloween__access { --anim-delay: 1.15s; }

/*表示後のループアニメーション
  data-anim に加えて data-anim-loop="○○" を付けた要素だけに効く。
    sway  … 左右にふわふわ（傾き＋わずかな浮き上がり）
    float … 縦にふわふわ（上下だけ）
  角度・幅・速さ・支点は変数で個別調整できる：
    style="--sway-angle:20deg; --float-lift:16px; --float-duration:3s"
  同じ動きが並んで揃って見える時は、要素ごとに --loop-delay をマイナスでずらす：
    style="--loop-delay:-.8s"
  ※傾きは rotate、上下は transform と別プロパティなので、
    表示アニメーション（translate / scale）と奪い合わない。*/
.js-anim [data-anim-loop].is-show {
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	/*fade-up中は開始姿勢で待機し、出終わってから動き始める*/
	animation-fill-mode: backwards;
	/*--loop-delay をマイナスにすると、動きの途中の姿勢から始まる（並んだ要素をずらす用）*/
	animation-delay: calc(var(--anim-delay, 0s) + .2s + var(--loop-delay, 0s));
}

/*左右にふわふわ*/
@keyframes anim-sway {
	/*端でゆっくり・中央で最速。真ん中で止まって見えないよう
	  前半は ease-in、後半は ease-out に分けている*/
	0% {
		animation-timing-function: ease-in;
		rotate: calc(var(--sway-angle, 7deg) * -1);
		transform: translateY(0);
	}
	50% {
		animation-timing-function: ease-out;
		rotate: 0deg;
		transform: translateY(calc(var(--sway-lift, 7px) * -1));
	}
	100% {
		rotate: var(--sway-angle, 7deg);
		transform: translateY(0);
	}
}
.js-anim [data-anim-loop="sway"].is-show {
	transform-origin: var(--sway-origin, bottom center);
	animation-name: anim-sway;
	animation-duration: var(--sway-duration, 2s);
}

/*縦にふわふわ*/
@keyframes anim-float {
	from { transform: translateY(0); }
	to   { transform: translateY(calc(var(--float-lift, 20px) * -1)); }
}
.js-anim [data-anim-loop="float"].is-show {
	animation-name: anim-float;
	animation-duration: var(--float-duration, 2s);
}

/*カタカタ（小刻みに左右へ傾く）*/
@keyframes anim-shake {
	from { rotate: calc(var(--shake-angle, 6deg) * -1); }
	to   { rotate: var(--shake-angle, 6deg); }
}
.js-anim [data-anim-loop="shake"].is-show {
	transform-origin: var(--shake-origin, center center);
	animation-name: anim-shake;
	animation-duration: var(--shake-duration, 1.4s);
	/*ぬるっと動かさず、カクッと切り替えてカタカタ感を出す*/
	animation-timing-function: steps(2);
}

/*ゆらゆら（表示アニメーションと干渉しないよう内側のimgに掛ける）*/
@keyframes mv-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5%); }
}
.mv-halloween__chara img,
.mv-halloween__special img {
	animation: mv-float 3.2s ease-in-out infinite;
}
.mv-halloween__chara--girl img { animation-duration: 3.8s; animation-delay: -1.4s; }
.mv-halloween__chara--zombie img { animation-duration: 4.4s; animation-delay: -.7s; }
.mv-halloween__special img { animation-duration: 5s; animation-delay: -2s; }

@media (prefers-reduced-motion: reduce) {
	.js-anim [data-anim] {
		opacity: 1;
		translate: none;
		scale: none;
		transition: none;
		animation: none;
	}
	.mv-halloween__chara img,
	.mv-halloween__special img,
	.js-anim [data-anim-loop].is-show {
		animation: none;
		rotate: none;
		transform: none;
	}
}

/*main*/
.sec-1-halloween {
    padding: 75px 0 160px;
    overflow: hidden;
}
.sec-1-halloween::before,
.sec-1-halloween::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 360px;
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 360px auto;
    z-index: 0;
    pointer-events: none;
}
.sec-1-halloween::before {
    right: calc(50% + 600px);
    background-image: url("../../assets/img/lp/halloween/merit_bg_l.png.webp");
}
.sec-1-halloween::after {
    left: calc(50% + 600px);
    background-image: url("../../assets/img/lp/halloween/merit_bg_r.png.webp");
}
@media screen and (min-width: 1921px) {
    .sec-1-halloween::before {
        left: 0;
        right: auto;
    }
    .sec-1-halloween::after {
        left: auto;
        right: 0;
    }
}

.halloween-intro {
    margin: 150px auto;
    text-align: center;
}
.deco-halloween-intro01 {
    top: -17%;
    left: -3%;
	width: 14%;
    max-width: 165px;
}
.deco-halloween-intro02 {
    top: -5%;
    width: 12%;
    right: 0;
    max-width: 140px;
}
.deco-halloween-intro03 {
    left: 0;
    bottom: -31%;
    width: 14%;
    max-width: 166px;
}
.deco-halloween-intro04 {
    right: -6%;
    bottom: -25%;
    width: 17%;
    max-width: 196px;
	z-index: 1;
}
.halloween-intro__ttl {
    font-size: 4rem;
    color: #E5C867;
    margin-bottom: 50px;
}
.halloween-intro__txt {
    color: #fff;
    line-height: 2.1;
}
.halloween-intro__lead span {
    border-bottom: solid 2px #E5C867;
}
.halloween-intro__txt em {
	font-size: 2.6rem;
}
/*参加メリット*/
.halloween-sec-ttl {
    text-align: center;
}
.halloween-merit__list {
    max-width: 1000px;
    margin: 20px auto 120px;
}
.halloween-merit__item {
  width: 100%;
  background: #efe5ce;
  border-radius: 20px;
  box-shadow:
    inset 0 16px 22px rgba(201, 139, 73, 0.30),
    inset 0 -16px 22px rgba(201, 139, 73, 0.30),
    inset 16px 0 22px rgba(201, 139, 73, 0.30),
    inset -16px 0 22px rgba(201, 139, 73, 0.30);
  margin-bottom: 85px;
  padding: 55px 25px 30px 65px;
}
.halloween-merit__num {
    top: -25px;
    left: -30px;
	max-width: 202px;
}
.halloween-merit__wrap {
    display: flex;
    justify-content: space-between;
}
.halloween-merit__ttl {
	font-size: 3rem;
	color: #E28B00;
    margin-left: 135px;
	padding-bottom: 20px;
	margin-bottom: 50px;
	position: relative;
}
.halloween-merit__ttl::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 6px;
	background-image: url("../../assets/img/lp/halloween/merit_line.png.webp");
	background-repeat: repeat-x;
	background-position: left bottom;
	background-size: auto 6px;
}
.halloween-merit__item:first-child .halloween-merit__left {
	max-width: 600px;
}
.halloween-merit__item:first-child .halloween-merit__right {
	width: calc(100% - 630px);
	max-width: 246px;
}
.halloween-merit__item:first-child em {
	color: #D93D3D;
}
.halloween-merit__item:nth-child(2) .halloween-merit__left {
	max-width: 490px;
}
.halloween-merit__item:nth-child(2) .halloween-merit__right {
	width: calc(100% - 500px);
	max-width: 420px;
}
.btn-halloween-merit {
	background: #E28B00;
	color: #fff;
}
.halloween-merit__item:last-child .halloween-merit__left {
	max-width: 520px;
}
.halloween-merit__item:last-child .halloween-merit__right {
	width: calc(100% - 530px);
	max-width: 419px;
}
.halloween-merit__item:last-child .halloween-merit__txt {
	font-size: 1.6rem;
	max-width: 470px;
}
.halloween-merit__item:last-child em {
	color: #E08B01;
}
/*当日の流れ*/
.sec-2-halloween {
	padding: 130px 0 160px;
	background: #E5C867;
}
.sec-2-halloween::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;	
	background-image: url("../../assets/img/lp/halloween/schedule_bg_top.png.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 1;
}
.sec-2-halloween::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 100%;
	background-image: url("../../assets/img/lp/halloween/schedule_bg_bottom.png.webp");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% auto;
	pointer-events: none;
	z-index: 1;
}
.sec-2-halloween .l-container__1200 {
	position: relative;
	z-index: 2;
}
.deco-halloween-sche01 {
    top: 0;
    left: -4%;
    width: 28%;
    max-width: 343px;
}
.deco-halloween-sche02 {
    bottom: -24%;
    right: 0;
    width: 17%;
    max-width: 206px;
}
.halloween-sche {
    text-align: center;
	margin-top: 45px;
}
.halloween-sche img {
	max-width: 417px;
	margin-bottom: 50px;
}
/*体験メニュー*/
.sec-3-halloween {
	padding: 120px 0 130px;
	overflow: hidden;
}
.sec-3-halloween::before,
.sec-3-halloween::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 450px;
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 450px auto;
    z-index: 0;
    pointer-events: none;
}
.sec-3-halloween::before {
    right: calc(50% + 500px);
    background-image: url("../../assets/img/lp/halloween/taiken_bg_l.png.webp");
}
.sec-3-halloween::after {
    left: calc(50% + 500px);
    background-image: url("../../assets/img/lp/halloween/taiken_bg_r.png.webp");
}
@media screen and (min-width: 1921px) {
    .sec-3-halloween::before {
        left: 0;
        right: auto;
    }
    .sec-3-halloween::after {
        left: auto;
        right: 0;
    }
}

.halloween-taiken {
	max-width: 1200px;
	margin: auto;
	z-index: 1;
}
.halloween-taiken__list {
	margin-bottom: 90px;
}
.halloween-taiken__item {
    max-width: 1038px;
	min-height: 764px;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
	padding-bottom: 4.5%;
}
.halloween-taiken__item:nth-child(2n) {
    margin-left: auto;
}
.halloween-taiken__item.halloween-taiken__dt {
	background-image: url("../../assets/img/lp/halloween/taiken_dt_frame.png.webp");
}
.halloween-taiken__item.halloween-taiken__elt {
	background-image: url("../../assets/img/lp/halloween/taiken_elt_frame.png.webp");
}
.halloween-taiken__item.halloween-taiken__amt {
	background-image: url("../../assets/img/lp/halloween/taiken_amt_frame.png.webp");
}
.halloween-taiken__item.halloween-taiken__jt {
	background-image: url("../../assets/img/lp/halloween/taiken_jt_frame.png.webp");
}
.halloween-taiken__item.halloween-taiken__elt .halloween-taiken__item-container {
    display: flex;
    align-items: center;
    gap: 30px;	
}
.deco-halloween-taiken-dt01 {
    top: 12%;
    right: -8%;
    width: 29%;
    max-width: 284px;
}
.deco-halloween-taiken-elt01 {
    top: -11%;
    right: 6%;
    width: 26%;
    max-width: 260px;
}
.deco-halloween-taiken-elt02 {
    top: 50%;
    left: -18%;
    transform: translate(0, -50%);
    width: 14%;
    max-width: 134px;
}
.deco-halloween-taiken-elt03 {
    right: 5%;
    bottom: -6%;
    width: 16%;
    max-width: 153px;
}
.deco-halloween-taiken-amt01 {
    top: 22%;
    right: 3%;
    width: 16%;
    max-width: 157px;
}
.deco-halloween-taiken-jt01 {
    top: 6%;
    right: 10%;
    width: 19%;
    max-width: 190px;
}
.deco-halloween-taiken-jt02 {
    top: 53%;
    left: -18%;
	width: 14%;
    max-width: 133px;
}

.halloween-taiken__image {
    padding: 3% 0 0 5%;	
}
.halloween-taiken__dt .halloween-taiken__image {
    max-width: 659px;
}
.halloween-taiken__elt .halloween-taiken__image {
    max-width: 485px;
}
.halloween-taiken__amt .halloween-taiken__image {
    max-width: 628px;
}
.halloween-taiken__jt .halloween-taiken__image {
    max-width: 601px;
}
.halloween-taiken__wrap {
    display: flex;
    justify-content: center;
	gap: 10px;
}
.halloween-taiken__voice {
    transform: translate(-1%, -10%);
}
.halloween-taiken__dt .halloween-taiken__voice {
    max-width: 437px;
}
.halloween-taiken__elt .halloween-taiken__voice {
    max-width: 448px;
	transform: translate(12%, -16%);
}
.halloween-taiken__amt .halloween-taiken__voice {
    max-width: 437px;
}
.halloween-taiken__jt .halloween-taiken__voice {
    max-width: 458px;
}

.halloween-taiken__content {
    max-width: 322px;
}
.halloween-taiken__elt .halloween-taiken__content {
    max-width: 350px;
    transform: translate(0, 15%);
}
.halloween-taiken__ttl {
    margin-bottom: 10px;
}
.halloween-taiken__content dt {
    color: #fff;
	margin-bottom: 20px;
}
.halloween-taiken__menu-arrow {
    width: 26px;
    height: 26px;
    font-size: 2.2rem;
    font-weight: 700;
    display: flex;
    background: #000;
    color: #fff;
    border-radius: 5px;
    margin: 10px auto;
    justify-content: center;
    align-items: center;
}
/*紹介動画*/
.sec-4-halloween {
    padding: 90px 0;
	background: url("../../assets/img/lp/halloween/movie_bg.png.webp") left top repeat;
	overflow: hidden;
}
.halloween-movie {
	max-width: 1100px;
    margin: 60px auto 0;
	padding: 115px;
    text-align: center;
	background-image: url("../../assets/img/lp/halloween/movie_frame.png.webp");
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% 100%;
}
.deco-halloween-movie01 {
    top: -10%;
    right: -5%;
    width: 23%;
    max-width: 244px;
}
.deco-halloween-movie02 {
    bottom: -4%;
    left: -2%;
    width: 23%;
    max-width: 244px;
}
.halloween-movie__txt {
    color: #fff;
    font-size: 2.6rem;
	width: 68%;
	max-width: 650px;
	background: #007361;
	border-radius: 40px;
    padding: 20px;
    top: -10px;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.halloween-movie__txt::before {
	content: url("../../assets/img/lp/halloween/movie_fukidashi.svg");
	position: absolute;
	top: 0;
	bottom: 0;
	right: -20px;
	margin: auto 0;
	width: 39px;
	height: 19px;
}
.halloween-movie__container iframe {
    border-radius: 10px;
	width: 100%;
	height: auto;
	aspect-ratio: 100 / 57;
}
/*参加者の声*/
.sec-5-halloween {
	padding: 90px 0 130px;
	background: url("../../assets/img/lp/halloween/voice_bg.png.webp") left top repeat;
}
.halloween-voice__list {
    margin-top: 50px;
    display: flex;
    gap: 40px;
}
.halloween-voice__item {
	width: 50%;
    background: #E5DFCC;
    border: 4px solid #B48765;
    border-radius: 50px;
    padding: 40px 65px 60px;
}
.halloween-voice__head {
    display: flex;
    gap: 30px;
    align-items: center;
}
.halloween-voice__ttl {
    color: #C15E36;
    font-size: 2.2rem;
    margin: 10px auto 15px;
}
/*お仕事一覧*/
.sec-6-halloween {
	padding: 90px 0 130px;
	background-size: auto auto;
	background-color: rgba(191, 190, 190, 1);
	background-image: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(208, 208, 208, 1) 18px, rgba(208, 208, 208, 1) 36px );
}
.halloween-shigoto__list {
    margin-top: 50px;
}
.halloween-shigoto__item {
    border-radius: 20px;
    padding: 18px 30px 50px 50px;
    display: flex;
    gap: 45px;
	margin-bottom: 90px;
}
.halloween-shigoto__item.halloween-shigoto__dt {
    background: #E7F7F8;
    border: 5px solid #2F9FA9;
}
.halloween-shigoto__item.halloween-shigoto__elt {
    background: #F2E9EB;
    border: 5px solid #AE536B;
}
.halloween-shigoto__item.halloween-shigoto__amt {
    background: #EBE2DB;
    border: 5px solid #CC762D;
}
.halloween-shigoto__item.halloween-shigoto__jt {
    background: #E1EFE9;
    border: 5px solid #439573;
}
.deco-halloween-shigoto {
    top: -100px;
    right: -50px;
}
.halloween-shigoto__left {
	max-width: 315px;
	width: calc(100% - 552px);
}
.halloween-shigoto__left > img {
    margin-bottom: 40px;
}
.halloween-shigoto__reco ul {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.halloween-shigoto__reco li span {
    margin-right: 5px;
}
.halloween-col-dt {
    color: #006F89;
}
.halloween-col-elt {
    color: #9D213D;
}
.halloween-col-amt {
    color: #C3511C;
}
.halloween-col-jt {
    color: #017945;
}
.halloween-shigoto__right {
    margin-top: 55px;
    width: 552px;
}
.halloween-shigoto__lead {
	font-size: 2rem;
    margin-bottom: 10px;
}
.halloween-shigoto__rate {
	font-size: 2rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.halloween-shigoto__rate > div {
    display: flex;
	flex-wrap: wrap;
    align-items: center;
	gap: 10px;
}
.halloween-shigoto__rate em {
	font-size: 6rem;
	font-weight: 900;
	color: #FFA700;
}
.halloween-shigoto__dt .halloween-shigoto__rate em {
	text-shadow: 2px 2px 0px rgba(0, 111, 137, 1);	
}
.halloween-shigoto__elt .halloween-shigoto__rate em {
	text-shadow: 2px 2px 0px rgba(157, 33, 61, 1);	
}
.halloween-shigoto__amt .halloween-shigoto__rate em {
	text-shadow: 2px 2px 0px rgba(195, 81, 28, 1);	
}
.halloween-shigoto__jt .halloween-shigoto__rate em {
	text-shadow: 2px 2px 0px rgba(1, 121, 69, 1);	
}
.halloween-shigoto__rate em span {
	font-size: 4rem;
}
.halloween-shigoto__no1 {
	width: 35%;
    max-width: 115px;
}

.halloween-shigoto__item .btn-cta {
    color: #fff;
    height: auto;
    min-height: 50px;
    padding: 10px 40px 10px 20px;
}
.btn-cta.btn-halloween-dt {
    background: #2F9FA9;
}
.btn-cta.btn-halloween-elt {
    background: #AE536B;
}
.btn-cta.btn-halloween-amt {
    background: #CC762D;
}
.btn-cta.btn-halloween-jt {
    background: #439573;
}
/*TikTok*/
.sec-7-halloween {
    padding: 120px 0 0;
	background: url("../../assets/img/lp/halloween/movie_bg.png.webp") left top repeat;
}
.halloween-tiktok {
    width: 100%;
    max-width: 890px;
    margin: 0 auto 100px;
    /* 画面幅に応じて余白を縮小 */
    padding:
        clamp(100px, 20.2vw, 180px)
        clamp(20px, 16.85vw, 150px)
        clamp(45px, 10.1vw, 90px);

    box-sizing: border-box;
    text-align: center;
    background-image: url(../../assets/img/lp/halloween/tiktok_bg.png.webp);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}
.halloween-tiktok__ttl {
    top: clamp(-40px, -4.5vw, -20px);
    right: 0;
    left: 0;
    width: min(90%, 612px);
    margin: 0 auto;
}
.halloween-tiktok__ttl img {
    width: 100%;
    height: auto;
}
/* TikTok表示エリア */
.halloween-tiktok__wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
/* TikTok本体 */
.halloween-tiktok__wrap iframe {
    position: absolute;
    left: 0;
    width: 100%;
    height: 128.8%;
    top: -15%;

    border: 0;
}
.halloween-marquee {
	width: 100%;
	overflow: hidden;
	background: #000;
	padding: 8px 0;
}
.halloween-marquee__track {
	display: flex;
	width: max-content;
	animation: halloween-marquee 20s linear infinite;
}
.halloween-marquee__text {
	display: flex;
	flex-shrink: 0;
}
.halloween-marquee__text span {
	flex-shrink: 0;
	margin-right: 1rem;
	color: #B7722D;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1;
	white-space: nowrap;
}
@keyframes halloween-marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}


/*=======================
  SP
========================*/
@media screen and (max-width: 900px) {
	/*メリット*/
	.sec-1-halloween {
	    padding: 10px 0 60px;
	}
	.halloween-merit__list {
	    margin: 50px auto;
		max-width: 700px;
	}
	.halloween-merit__item {
		margin-bottom: 50px;
		padding: 120px 40px 40px;
	}
	.halloween-merit__wrap {
	    justify-content: center;
	    flex-wrap: wrap;
	    gap: 35px;
	}
	.halloween-merit__num {
	    left: 0;
	    right: 0;
	    margin: 0 auto;
	    max-width: 140px;
	}
    .halloween-merit__ttl {
        font-size: 2rem;
        margin-left: 0;
        margin-bottom: 20px;
        text-align: center;
    }
	.halloween-merit__txt, 
	.halloween-merit__item:last-child .halloween-merit__txt {
		font-size: 1.4rem;
	}
	.halloween-merit__item:first-child .halloween-merit__left, 
	.halloween-merit__item:nth-child(2) .halloween-merit__left, 
	.halloween-merit__item:last-child .halloween-merit__left {
	    max-width: none;
	    width: 100%;
	}
	.halloween-merit__item:first-child .halloween-merit__right {
	    width: auto;
	    max-width: 190px;
	}
	.halloween-merit__item:nth-child(2) .halloween-merit__right {
	    width: 100%;
	    max-width: 285px;
	}
	.halloween-merit__item:last-child .halloween-merit__right {
	    width: auto;
	    max-width: 285px;
	}
	/*体験メニュー*/
	.sec-3-halloween {
		padding: 120px 0 90px;
	}
	.sec-3-halloween::before {
		background-image: url(../../assets/img/lp/halloween/taiken_bg_sp.png.webp);
		right: auto;
        width: 100%;
        background-size: 760px auto;
	}
	.sec-3-halloween::after {
		content: none;
	}
	.sec-3-halloween .halloween-sec-ttl {
	    z-index: 1;
		margin-bottom: 30px;
	}
	.halloween-taiken__list {
		max-width: 600px;
		margin: 0 auto 90px;
	}
	.halloween-taiken__item {
		min-height: auto;
	}
	.halloween-taiken__item:not(:last-child) {
		margin-bottom: 20px;
	}
	.halloween-taiken__item.halloween-taiken__dt {
		background-image: url("../../assets/img/lp/halloween/taiken_dt_frame_sp.png.webp");
	}
	.halloween-taiken__item.halloween-taiken__elt {
		background-image: url("../../assets/img/lp/halloween/taiken_elt_frame_sp.png.webp");
	    display: flex;
	    align-items: center;
	    gap: 30px;
	}
	.halloween-taiken__item.halloween-taiken__amt {
		background-image: url("../../assets/img/lp/halloween/taiken_amt_frame_sp.png.webp");
	}
	.halloween-taiken__item.halloween-taiken__jt {
		background-image: url("../../assets/img/lp/halloween/taiken_jt_frame_sp.png.webp");
	}
	.halloween-taiken__image img {
	    height: 170px;
	    width: auto;
	}
	.halloween-taiken__wrap {
	    flex-direction: column-reverse;
		gap: 0;
	}
	.halloween-taiken__voice {
		margin: 0 auto 20px;
	    transform: none;
	}
	.halloween-taiken__dt .halloween-taiken__voice {
		max-width: 279px;
	}
	.halloween-taiken__amt .halloween-taiken__voice {
		max-width: 246px;
	}
	.halloween-taiken__jt .halloween-taiken__voice {
		max-width: 240px;
	}
	.halloween-taiken__content {
		width: 60%;
		margin: auto;
	}
	.halloween-taiken__ttl {
	    margin-bottom: 0;
	}
	.halloween-taiken__ttl img {
	    height: 45px;
	    width: auto;
	}
	.halloween-taiken__menu dt {
	    font-size: 2rem;
		margin-bottom: 5px;
	}
	.halloween-taiken__menu dd {
	    font-size: 1.4rem;
	}
	.halloween-taiken__item.halloween-taiken__elt .halloween-taiken__item-container {
		display: block;
		width: 100%;
	}
	.halloween-taiken__elt .halloween-taiken__voice {
	    max-width: 220px;
	    transform: none;
	}
	.halloween-taiken__item.halloween-taiken__elt .halloween-taiken__ttl {
	    position: absolute;
	    top: 120px;
	    right: 60px;
	}
	.halloween-taiken__elt .halloween-taiken__content {
	    transform: none;
	    width: 75%;
	    margin: 0 0 0 20%;
	}
	.halloween-taiken__menu-arrow {
		margin: 5px auto;
	}
	.deco-halloween-taiken-dt01 {
	    top: auto;
	    bottom: 3%;
	    right: 5%;
	}
	.deco-halloween-taiken-elt01 {
	    top: auto;
	    bottom: 0;
	    right: auto;
	    left: 5%;
	    width: 26%;
	}
	.deco-halloween-taiken-elt02, 
	.deco-halloween-taiken-elt03, 
	.deco-halloween-taiken-jt02 {
		display: none;
	}
	.deco-halloween-taiken-amt01 {
	    top: auto;
	    bottom: 5%;
	    right: 10%;
	}
	.deco-halloween-taiken-jt01 {
	    top: auto;
	    right: auto;
	    bottom: 5%;
	    left: 5%;
	}
	/*紹介動画*/
	.halloween-movie__txt {
		top: -40px;
	}
	/*参加者の声*/
	.halloween-voice__list {
		max-width: 700px;
		margin: 50px auto 0;
	    flex-direction: column-reverse;
	}
	.halloween-voice__item {
		width: 100%;
	    padding: 25px 25px 40px;
		border-radius: 20px;
	}
	.halloween-voice__head img {
	    width: 125px;
	}
	.halloween-voice__ttl {
		font-size: 2rem;
	}
	.halloween-voice__txt p {
		font-size: 1.4rem;
	}
	/*お仕事一覧*/
	.sec-6-halloween {
		padding: 90px 0;
	}
	.halloween-shigoto__list {
		max-width: 700px;
		margin: 50px auto 0;
	}
	.halloween-shigoto__item {
	    padding: 0 25px 40px;
	    gap: 25px;
	    flex-direction: column;
	    align-items: center;
		margin-bottom: 20px;
	}
	.halloween-shigoto__left {
		width: 100%;
	}
	.halloween-shigoto__left > img {
	    margin-bottom: 0;
	}
	.halloween-shigoto__rate p {
	    font-size: 1.4rem;
	}
	.halloween-shigoto__gakka img {
	    width: auto;
	    height: 45px;
	}
	.halloween-shigoto__right {
	    margin-top: 0;
	    width: 100%;
	}
	.halloween-shigoto__txt {
	    margin-bottom: 30px;
	}
	.halloween-shigoto__rate {
		font-size: 1.8rem;
		gap: 5px;
		margin-bottom: 30px;
	}
	.halloween-shigoto__rate em {
		font-size: 5.3rem;
		line-height: 1;
	}
	.halloween-shigoto__rate em span {
	    font-size: 3.5rem;
	}
	.halloween-shigoto__rate.halloween-shigoto__no1-wrap > div {
	    flex-direction: column;
	    align-items: flex-start;
	}
	.halloween-shigoto__reco-ttl {
	    max-width: 180px;
	}
	.halloween-shigoto__reco ul {
		font-size: 1.4rem;
		margin-bottom: 25px;
	}
	.deco-halloween-shigoto {
	    top: -40px;
	    right: -25px;
		width: 26%;
		min-width: 90px;
		max-width: 125px;
	}
	.deco-halloween-shigoto img {
	    width: 100%;
	}

}
@media screen and (max-width: 768px) {
/*メインビジュアル*/
	.mv-halloween__stage {
		aspect-ratio: 390 / 740;
	}
	.mv-halloween__stage::before {
		bottom: 4.324%;
	}
	.mv-halloween__wave--bottom {
		bottom: auto;
		top: 77.432%;
	}
	.mv-halloween__deco--l,
	.mv-halloween__deco--r,
	.mv-halloween__chara--girl {
		display: none;
	}
	.mv-halloween__deco--sp01,
	.mv-halloween__deco--sp02,
	.mv-halloween__deco--sp03 {
		display: block;
	}
	.mv-halloween__deco--sp01 {
		left: 5%;
		top: -6.5%;
		width: 35.897%;
	}
	.mv-halloween__deco--sp02 {
		left: 73%;
		top: -2.5%;
		width: 36.154%;
	}
	.mv-halloween__deco--sp03 {
		left: -2.564%;
		top: 88.514%;
		width: 53.59%;
		z-index: 4;
	}
	.mv-halloween__title {
		left: 0;
		top: 5.676%;
		width: 100%;
	}
	.mv-halloween__special {
		left: 3.077%;
		top: 29.189%;
		width: 37.179%;
	}
	.mv-halloween__catch {
		left: 38.462%;
		top: 40.541%;
		width: 59.231%;
	}
	.mv-halloween__student {
		left: 2.051%;
		top: 50.541%;
		width: 94.872%;
	}
	.mv-halloween__access {
		left: 53.333%;
		top: 79.324%;
		width: 42.308%;
	}
	.mv-halloween__chara--pumpkin {
		left: 84%;
		top: 6%;
		width: 15%;
		z-index: 4;
	}
	.mv-halloween__chara--zombie {
		left: 5%;
		top: 79.054%;
		width: 26%;
	}
	.btn-halloween {
		min-height: 60px;
	}
	.btn-halloween-merit {
	    min-height: 40px;
	}
	/*イントロ*/
	.sec-1-halloween::before {
		content: none;
	}
	.sec-1-halloween::after {
		content: none;
	}
	.halloween-intro {
	    margin: 130px auto 210px;
	}
	.deco-halloween-intro01 {
	    top: -70px;
	    left: -2%;
	    width: 26%;
		max-width: 85px;
	}
	.deco-halloween-intro01::before {
        content: "";
		background: url(../../assets/img/lp/halloween/intro_bg01_sp.png.webp) no-repeat;
		background-size: contain;
		width: 128px;
        height: 140px;
        display: block;
		position: absolute;
        top: -40px;
        left: -25px;
    }
	.deco-halloween-intro02 {
	    top: -60px;
		right: 2%;
	    width: 20%;
		max-width: 65px;
	}
	.deco-halloween-intro02::before {
        content: "";
		background: url(../../assets/img/lp/halloween/intro_bg02_sp.png.webp) no-repeat;
		background-size: contain;
		width: 96px;
        height: 96px;
        display: block;
		position: absolute;
        top: -40px;
        right: -60px;
    }
	.deco-halloween-intro03 {
	    left: 7%;
	    bottom: -160px;
	    width: 22%;
		max-width: 73px;
	}
	.deco-halloween-intro03::before {
        content: "";
		background: url(../../assets/img/lp/halloween/intro_bg02_sp.png.webp) no-repeat;
		background-size: contain;
		width: 96px;
        height: 96px;
        display: block;
		position: absolute;
        bottom: 45px;
        left: -45px;
    }
	.deco-halloween-intro04 {
	    right: 5%;
	    bottom: -150px;
	    width: 27%;
	    max-width: 88px;
	}
	.deco-halloween-intro04::before {
        content: "";
		background: url(../../assets/img/lp/halloween/intro_bg03_sp.png.webp) no-repeat;
		background-size: contain;
		width: 174px;
        height: 102px;
        display: block;
		position: absolute;
        bottom: 10px;
        right: 10px;
    }
	.halloween-intro__ttl {
		font-size: 2.8rem;
	}
	.halloween-intro__txt {
	    line-height: 1.8;
	}
	.halloween-intro__txt em {
		font-size: 2rem;
	}
	.halloween-sec-ttl img {
	    width: auto;
	    height: 100px;
	}
	/*メリット*/
	.halloween-merit__item {
		padding: 120px 20px 30px;
	}
	/*当日の流れ*/
	.sec-2-halloween {
	    padding: 30% 0 40%;
	}
	.sec-2-halloween::before {
	    background-image: url(../../assets/img/lp/halloween/schedule_bg_top_sp.png.webp);
	}

.sec-2-halloween::before {
	    background-image: url(../../assets/img/lp/halloween/schedule_bg_top_sp.png.webp);
	}

.sec-2-halloween::after {
		background-image: url("../../assets/img/lp/halloween/schedule_bg_bottom_sp.png.webp");
		bottom: -1px;
	}
	.halloween-sche p {
	    text-align: left;
	    font-size: 1.4rem;
	}
	.deco-halloween-sche01 {
		display: none;
	}
	.deco-halloween-sche02 {
	    bottom: -30%;
	    right: 20px;
	    width: 35%;
	    max-width: 156px;
	}
	/*体験メニュー*/
	.sec-3-halloween::before {
        background-size: 100% auto;
	}

	/*紹介動画*/
	.sec-5-halloween {
		padding: 90px 0;
	}
		.halloween-movie {
	    margin: 120px auto 0;
	    padding: 50px;
	}
	.halloween-movie__txt {
	    font-size: 1.6rem;
	    width: calc(100% - 30%);
	    border-radius: 40px;
	    padding: 8px 15px;
	    top: -75px;
	    right: auto;
	}
	.deco-halloween-movie01 {
	    top: -26%;
	    width: 28%;
		right: 0;
	    max-width: 144px;
	}
	.deco-halloween-movie02 {
	    bottom: -70px;
	    left: -10px;
	    width: 38%;
	    max-width: 150px;
	}
	/*TikTok*/
	.sec-7-halloween {
		padding: 90px 0 0;
	}
    .halloween-tiktok {
        margin-bottom: 50px;
        padding-top: 22vw;
        padding-right: 9vw;
        padding-bottom: 10vw;
        padding-left: 9vw;
    }
    .halloween-tiktok__ttl {
        width: 88%;
        top: -5vw;
    }	
	.halloween-marquee__text span {
		font-size: 1.7rem;
	}
	
}
@media screen and (max-width: 500px) {
	.halloween-intro__lead span {
		font-size: 1.35rem;
	}
	.halloween-taiken__elt .halloween-taiken__content {
		width: 60%;
	}
    .halloween-movie {
        margin: 100px auto 0;
        padding: 30px;
    }
	.halloween-voice__head img {
        width: 80px;
    }
	.deco-halloween-shigoto {
	    top: -20px;
	}
    .halloween-tiktok {
        padding: 90px 50px 50px;
    }
}

/*=======================
  1. page-lp-2026halloween.phpのcss end
========================*/