@charset "utf-8";

/********** 【仮】 サイトの定義 **********

使用する文字サイズ：
10px
12px
14px
16px（基本）
18px（中サイズ見出し）
20px（特例:TOPの検索するボタンなど）
24px（特例:TOPのエリア検索・駅検索など）
28px（大サイズ見出し）

空白の使用サイズ：
10px
20px
40px（基本）
60px
120px（大見出しの段落ごと）

*******************************/


html {
	scroll-behavior: smooth;
}

body {
	font-family: "YakuHanJP","Roboto","Noto Sans JP",Meiryo,sans-serif;
	margin: 0;
	color: #000;
	font-size: 16px;
}

.only_sp { display:none !important; }

img { display:block; }

a { color:#ff33b0; text-decoration:underline; }
a:hover { color:#ff33b0; text-decoration:none; transition: 0.2s; }
a:active, a:focus { outline: 0; }

a img:hover { opacity:0.8; transition: 0.5s; }

strong { font-weight:normal; }

div,
section {
	margin: 0;
	padding: 0;
	font-size: 0;
}

div::after,
section::after {
   content: "";
   display: block;
   clear: both;
}

p {
	margin: 0 0 20px 0;
	padding: 0;
	font-size: 16px;
}

p:last-child {
	margin: 0;
	margin-bottom: 0;
}

ul {
	margin: 0;
	padding: 0;
	font-size: 0;
}

li {
	list-style: none;
	font-size: 16px;
}

table {
	text-shadow: none;
}


.clear {
	clear: both;

	margin: 0;
	padding: 0;
}




/*** 【フォント読み込み】 Impactフォント ***/

@font-face {
	font-family:Impact;
	src:url('../../fonts/impact.ttf') format("truetype");
}




/********** ヘッダー領域 **********/

header {
	position: fixed;
	width: 100%;
	background: #fff;
	z-index: 9998;
}

header #head {
	width: 100%;
	background: #ff33b0;
}

header #head .description {
	width: 1200px;
	margin: 0 auto;
	padding: 0;
	height: 24px;
	line-height: 24px;
}

header #head .description h1 {
	float: left;
	display: inline-block;
	margin: 0;
	font-size: 12px;
	font-weight: normal;
	color: #fff;
}

header #head .description h1 a {
	color: #fff;
	text-decoration: underline;
}
header #head .description h1 a:hover {
	color: #fff;
	text-decoration: none;
}

/*** 18歳未満はご退場下さい。 ***/
header #head .description p.exit {
	float: right;
	display: inline-block;
	position: relative;
	width: 129px;
	height: 18px;
	margin: 2px 0;
	padding: 0 4.5px;
	text-align: center;
	border: 1px solid #000;
	border-radius: 3px;
}

header #head .description p.exit a {
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
	line-height: 20px;

	font-size: 10px;
	color: #000;
	text-decoration: none;
}
header #head .description p.exit a:hover {

}

header #region {
	width: 1200px;
	height: 94px;
	margin: 0 auto;
	padding: 20px calc(100% / 2 - 1200px / 2);

	background-image: url("../../img/header_bg.png");
	background-repeat: repeat-x;

	border-bottom: 1px solid #ccc;
}

header #region h2 {
	float: left;

	/*
	position: relative;
	top: 6px;
	*/

	display: inline-block;
	width: 327.75px;
	margin-right: 40px;
}

header #region h2 img {
	width: 327.75px;
	height: 94px;

	filter: drop-shadow(0px 0px 0px #fff) drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 1px #000) drop-shadow(0px 0px 1px #000) drop-shadow(0px 0px 1px #000);
}


header #region nav {
	display: inline-block;

	position: relative;
	top: 10px;

	width: 580px;
	height: 74px;
}

header #region nav ul {

}

header #region nav ul li {
	display: inline-block;

	position: relative;

	width: 137.5px;
	height: 32px;
	margin-right: 10px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: bold;

	transition: 0.2s;
}

header #region nav ul li:nth-child(4n) {
	margin-right: 0;
}

header #region nav ul li:nth-last-child(-n+4) {
	margin-bottom: 0;
}

header #region nav ul li:hover {

}

header #region nav ul li a {
	display: inline-block;

	position: absolute;
	top: 0;
	left: 0;
	width: 117.5px;
	line-height: 20px;

	padding: 4px 8px;
	color: #fff;
	text-decoration: none;
	text-align: center;

	border: 2px solid;
	border-color: #fff;
	border-radius: 28px;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

header #region nav ul li a:hover {
	color: #ff33b0;

	border-color: #ff33b0;
	background-color: #fff;

    transition: 0.2s ease-in-out;
}


/*** 求人応募ボタン ***/
header #region .form {
	float: right;
	display: inline-block;

	position: relative;
	top: 10px;
}

header #region .form a {
	float: right;

	position: relative;

	justify-content: space-around;
	align-items: center;

	margin: 0 auto;
	padding: 6px 33.3px 11px 15.55px;
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	text-decoration: none;

	background: #ff33b0;

	border: 2px solid;
	border-color: #ff33b0;
	border-radius: 6px;

    transition: 0.2s ease-in-out;
}
header #region .form a:hover {
	border-color: #fff;
}
header #region .form a:after {
	content: '';
	width: 9px;
	height: 9px;
	border-top: 4px solid #fff;
	border-right: 4px solid #fff;
	transform: rotate(45deg) translateY(-50%);
	position: absolute;
	top: 32px;
	right: 20px;
	border-radius: 1px;
}

header #region .form a font {
	font-size: 12px;
	font-weight: bold;
	color: #ffff00;
	letter-spacing: 0.65px;
}


/*** 【新】 パンくずリスト ***/

header #breadcrumb {
	width: 100%;
	padding: 7.5px 0;

	border-top: 1px solid #fff;
	border-bottom: 1px solid #ccc;

	background: #e2e2e2;
	background: linear-gradient(to bottom,#ffffff 0%,#e2e2e2 100%);

	-webkit-box-shadow: 0px -2px 2px -1px #fff inset;
			box-shadow: 0px -2px 2px -1px #fff inset;
}

header #breadcrumb ul {
	width: 1200px;
	margin: 0 auto;
}

header #breadcrumb ul li {
	display: inline-flex;
	font-size: 14px;

	line-height: 20px;
}

header #breadcrumb ul li::after {
	content: '\f105';
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: #999;

	margin: 0 7.5px;
}

header #breadcrumb ul li:last-child::after {
	content: '';
}

header #breadcrumb ul li a {
	color: #000;
	text-decoration: none;
}
header #breadcrumb ul li a:hover {
	color: #ff33b0;
	text-decoration: underline;
}

header #breadcrumb ul li a i {
	margin-right: 5px;
	color: #ff33b0;
}




/********** 18歳未満による求人応募はご遠慮下さい ※全ページ共通 **********/

section#exit {
	background: #ff33b0;
}

section#exit div.content p {
	color: #fff;
	text-shadow: none;
}




/*-- LINEお問い合わせ 追従キャラクター --*/

#fade-character.fade-element {
  position: fixed;
  bottom: 435px;
  right: 282px;
  opacity: 0;			/* 初期状態：透明 */
  visibility: hidden;	/* 初期状態：クリックできないようにする */
  transition: all 0.5s;	/* フェード効果の速さ */
  z-index: 999;
}

/* スクロール時にJSで付与するクラス */
#fade-character.fade-element.is-show {
  opacity: 1;			/* 表示状態 */
  visibility: visible;
}


#fade-character.fade-element #line_animation {
	position: absolute; /* ← 【注】 この行を消すと、縦揺れのアニメーションが動作しなくなる */
}

#fade-character.fade-element #line_animation img {
    position: fixed;
    z-index: 9999;
}




section {
	width: 100%;
	text-align: center;
}

section div.content {
	width: 1200px;
	margin: 0 auto;
	padding: 80px 0;
}

section div.content h3 {
	display: inline-block;
	height: 58px;
	line-height: 58px;
	margin: 0 0 40px 0;

	font-size: 40px;
	font-family: 'Noto Sans JP',system-ui;
	font-weight: 900;
}

section div.content h3 strong {
	font-weight: 900;
}


section div.content p {
	word-break: break-all;
}

section div.content p.description {
	margin-bottom: 40px;
}
section div.content p.description:last-child {
	margin-bottom: 0;
}

section div.content p.description i.fa-solid.fa-circle-exclamation {
	color: #ff0000;
}

section div.content p.description a,
section div.content p.description a:hover { color:#777; }

section div.content p i {
	margin-right: 5px;
}




/********** 求人応募フォームはこちら ボタン画像 **********/
.Btn_form {
	width: 600px;
}

.Btn_form img {
	width: 100%;
}




/* 両サイドから球アニメーションボタン（ボタン配置＆配色） */
section div.content .btnMore {
	width: 274px;
	height: 44px;
	margin: 0 auto;	/* ← 要素を丸ごと右寄せ */
}

section div.content .btnMore a {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 270px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	text-decoration: none;
	color: #000;
	border: 2px solid #000;
	overflow: hidden;
	transition: all 0.5s;
	border-radius: 100px;

	text-shadow: none;
}

section div.content .btnMore a::before,
section div.content .btnMore a::after {
	content: '';
	position: absolute;
	z-index: -1;
	top: 50%;
	width: 23px;
	height: 23px;
	background-color: #000;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

section div.content .btnMore a::before {
	left: -23px;
}

section div.content .btnMore a::after {
	right: -23px;
	transform: translate(50%, -50%);
}

section div.content .btnMore a:hover {
	color: #fff;
	transition: all 0.4s 0.4s;

	text-shadow: none;
}

section div.content .btnMore a:hover::before {
	animation: left-circle 0.8s both alternate;
}
@keyframes left-circle {
	0% {
		left: -23px;
		width: 23px;
		height: 23px;
	}
	50% {
		left:  50%;
		width: 23px;
		height: 23px;
	}
	100% {
		left: 50%;
		width: calc(234px * 1.5);
		height: calc(234px * 1.5);
	}
}

section div.content .btnMore a:hover::after {
	animation: right-circle 0.8s both alternate;
}
@keyframes right-circle {
	0% {
		right: -23px;
		width: 23px;
		height: 23px;
	}
	50% {
		right:  50%;
		width: 23px;
		height: 23px;
	}
	100% {
		right: 50%;
		width: calc(234px * 1.5);
		height: calc(234px * 1.5);
	}
}




/********** 求人解説メニュー （ 各ページ誘導用リンク ） **********/

section#pageLink {

}

section#pageLink div.content {

}

section#pageLink div.content h3 font {
	color: #ff33b0;
}

section#pageLink div.content .link {

}

section#pageLink div.content .link ul {

}

section#pageLink div.content .link ul li {
	display: inline-block;
	width: calc(100% / 6 - 172px / 6);
	margin-right: 20px;
	border: 6px solid;
	border-radius: 500px;
}
section#pageLink div.content .link ul li:last-child {
	margin-right: 0;
}

section#pageLink div.content .link ul li:nth-child(1) { border-color:#fa8cb1; }	/* どんなお仕事？ */
section#pageLink div.content .link ul li:nth-child(2) { border-color:#ffa15e; }	/* お給料について */
section#pageLink div.content .link ul li:nth-child(3) { border-color:#d3a2f6; }	/* お仕事の流れ */
section#pageLink div.content .link ul li:nth-child(4) { border-color:#aebe96; }	/* なぜバレナイの？ */
section#pageLink div.content .link ul li:nth-child(5) { border-color:#f6b3c4; }	/* 禁止事項について */
section#pageLink div.content .link ul li:nth-child(6) { border-color:#85c7e9; }	/* 求人応募フォーム */

section#pageLink div.content .link ul li figure {
    display: block;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

section#pageLink div.content .link ul li figure img.rotate {
	text-align: center;
	margin: 0 auto;
	text-decoration: none;
	display: block;
	width: 100%;
	height: 100%;
	outline: 2px solid #fff;
	border-radius: 50%;
	transition: all 1.15s ease;
	-webkit-transition: all 1.15s ease;
}

section#pageLink div.content .link ul li figure img.rotate:hover {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}




/* LINE応募バナー＋カカオ応募バナー＋文字リンク（配置＆配色） */
section#contactLink div.content h3 font {
	color: #ff33b0;
}

section#contactLink div.content .banner {
	margin-bottom: 20px;
}

section#contactLink div.content .banner ul {

}

section#contactLink div.content .banner ul li {
	display: inline-block;
	width: 580px;
	margin-right: 20px;
	margin-bottom: 20px;

	border: 5px solid;
	border-color: #fff;

	transition: 0.2s;
}
section#contactLink div.content .banner ul li:nth-child(2) {
	margin-right: 0;
}
section#contactLink div.content .banner ul li:nth-child(3) {
	width: calc(100% - 10px);
	margin-right: 0;
	margin-bottom: 0;
}
section#contactLink div.content .banner ul li:hover {
	border-color: #000;
}



section#contactLink div.content .banner ul li a img {
	width: 100%;
}
section#contactLink div.content .banner ul li a img:hover {
	opacity: 1;
}

section#contactLink div.content p.mail {
	font-weight: bold;
}

section#contactLink div.content p.mail a {
	color: #000;
	text-decoration: none;
}
section#contactLink div.content p.mail a:hover {
	color: #ff33b0;
}

section#contactLink div.content p.mail i {
	color: #ff33b0;
}




/********** 先頭へ戻るボタン **********/
#pageTop {
	position: fixed;
	z-index: 9999;

	width: 56px;
	height: 56px;

	right: 22px;
}
#pageTop a {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;

  background: #ff33b0;
  border: 2px solid #fff;
  border-radius: 50%;

  opacity: 0.8;
}
#pageTop a:hover {
  background: #fff;
  border: 2px solid #ff33b0;
  transition : .5s;
}
#pageTop a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
#pageTop a:hover::before {
  color: #ff33b0;
  transition : .5s;
}




/********** フッター領域全体 **********/

footer {
	padding: 40px 0 10px 0;
	border-top: 1px solid #ddd;
}


/*** フッター上部 （ サイト内メニューリンク ） ***/
footer .f_top {
	width: 1200px;
	margin: 0 auto 40px;
}

footer .f_top .menuLink {
	float: left;

	width: 1037px;
}

footer .f_top .menuLink ul {
	margin-bottom: 5px; /* 右端のロゴ（高さ45px）と、高さを合わせるため */
}

footer .f_top .menuLink ul:last-child {
	margin-bottom: 0;
}

footer .f_top .menuLink ul li {
	display: inline-block;
	font-size: 12px;
}

footer .f_top .menuLink ul li::after {
    content: "｜";
    color: #777;
}

footer .f_top .menuLink ul li:last-child::after {
    content: "";
}

footer .f_top .menuLink ul li a {
	color: #000;
}

footer .f_top .f_logo {
	float: right;
}

footer .f_top .f_logo img {
	height: 41px;
}

footer .f_top .f_logo a img:hover { opacity:unset; transition:unset; }


/*** フッター下部 （ コピーライト ） ***/
footer .copyright {
	width: 1200px;
	margin: 0 auto;
	text-align: center;
}

footer .copyright p {

}

footer .copyright p.by {
	margin-bottom: 10px;
	font-size: 12px;
	color: #999;
}

footer .copyright p.by a {
	color: #777;
}

footer .copyright p.copy {
	color: #999;
}

footer .copyright p.copy a {
	font-weight: bold;
}

footer .copyright p.copy a strong {
	font-weight: bold;
}




/********** 系列店一覧 （ グループ店舗一覧 ）※トップページ＋グループ店舗一覧ページに適用 **********/

	/***********************************************************************
	　注：
	　「トップページ」と「グループ店舗一覧ページ」の【両方】に適用するため、
	　section#shoplist .List を section#shoplist .List にしています。
	***********************************************************************/

section#shoplist .List #Left {
	float: left;

	display: inline-block;

	height: 617px; /* ← 表示中ドットアイコンの位置調整のため */

	margin-right: 20px;
	margin-left: 40px;
	padding-left: 20px;
}

section#shoplist .List #Left .name {
	margin: 0 auto 20px;
	padding: 10px;

	border: 1px solid;
	border-radius: 6px;

	background: #fff;
}

section#shoplist .List .gals-excellent #Left .name	{ color:#8e008e; border-color:#8e008e; }
section#shoplist .List .gals-takatsuki #Left .name	{ color:#00b900; border-color:#00b900; }
section#shoplist .List .b-wife #Left .name			{ color:#cb7ac7; border-color:#cb7ac7; }
section#shoplist .List .minisuka #Left .name		{ color:#fb2a8b; border-color:#fb2a8b; }
section#shoplist .List .oppai-hirakata #Left .name	{ color:#fc82ad; border-color:#fc82ad; }
section#shoplist .List .prin-alamode #Left .name	{ color:#f2bc63; border-color:#f2bc63; }
section#shoplist .List .do-m #Left .name			{ color:#f03f6d; border-color:#f03f6d; }


section#shoplist .List #Left .name p {
	width: 487px;

	font-size: 24px;
	font-weight: 900;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

section#shoplist .List #Left .name p i {
	margin-right: 5px;
}

section#shoplist .List #Left .thumbnail {
	width: 507px;
	height: 507px;
	border:1px solid #ccc;
}

section#shoplist .List #Left .thumbnail img {
	position: relative;
	top: 1px;

	width: calc(100% - 2px);
	height: calc(100% - 2px);
	object-fit: cover;

	margin: 0 auto;

	text-align:center;
	outline: 1px solid #fff;
}


section#shoplist .List #Right {
	float:right;

	height: 617px; /* ← 表示中ドットアイコンの位置調整のため */

	margin-right: 40px;
	padding-right: 20px;

	font-size: 16px;
}

section#shoplist .List #Right table {
	width: 551px;

	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
	text-align: left;
	line-height: 1.5;
	border-top: 1px solid;
	border-left: 1px solid;
}

section#shoplist .List .gals-excellent #Right table	{ border-top-color:#8e008e; border-left-color:#8e008e; }
section#shoplist .List .gals-takatsuki #Right table	{ border-top-color:#00b900; border-left-color:#00b900; }
section#shoplist .List .b-wife #Right table			{ border-top-color:#cb7ac7; border-left-color:#cb7ac7; }
section#shoplist .List .minisuka #Right table		{ border-top-color:#fb2a8b; border-left-color:#fb2a8b; }
section#shoplist .List .oppai-hirakata #Right table	{ border-top-color:#fc82ad; border-left-color:#fc82ad; }
section#shoplist .List .prin-alamode #Right table	{ border-top-color:#f2bc63; border-left-color:#f2bc63; }
section#shoplist .List .do-m #Right table			{ border-top-color:#f03f6d; border-left-color:#f03f6d; }


section#shoplist .List #Right table th {
	width: 170px;
	padding: 10px;
	font-size: 14px;
	font-weight: normal;
	color: #fff;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid;
	border-bottom: 1px solid #fff;
}

section#shoplist .List .gals-excellent #Right table th	{ border-right-color:#8e008e; background:#8e008e; }
section#shoplist .List .gals-takatsuki #Right table th	{ border-right-color:#00b900; background:#00b900; }
section#shoplist .List .b-wife #Right table th			{ border-right-color:#cb7ac7; background:#cb7ac7; }
section#shoplist .List .minisuka #Right table th		{ border-right-color:#fb2a8b; background:#fb2a8b; }
section#shoplist .List .oppai-hirakata #Right table th	{ border-right-color:#fc82ad; background:#fc82ad; }
section#shoplist .List .prin-alamode #Right table th	{ border-right-color:#f2bc63; background:#f2bc63; }
section#shoplist .List .do-m #Right table th			{ border-right-color:#f03f6d; background:#f03f6d; }


section#shoplist .List #Right table tr:last-child th {
	border-bottom: 1px solid;
}

section#shoplist .List .gals-excellent #Right table tr:last-child th	{ border-bottom-color:#8e008e; }
section#shoplist .List .gals-takatsuki #Right table tr:last-child th	{ border-bottom-color:#00b900; }
section#shoplist .List .b-wife #Right table tr:last-child th			{ border-bottom-color:#cb7ac7; }
section#shoplist .List .minisuka #Right table tr:last-child th			{ border-bottom-color:#fb2a8b; }
section#shoplist .List .oppai-hirakata #Right table tr:last-child th	{ border-bottom-color:#fc82ad; }
section#shoplist .List .prin-alamode #Right table tr:last-child th		{ border-bottom-color:#f2bc63; }
section#shoplist .List .do-m #Right table tr:last-child th				{ border-bottom-color:#f03f6d; }


section#shoplist .List #Right table td {
	width: 388px;
	padding: 10px;
	vertical-align: middle;
	border-right: 1px solid;
	border-bottom: 1px solid;

	background: #fff;
}

section#shoplist .List .gals-excellent #Right table td	{ border-right-color:#8e008e; border-bottom-color:#8e008e; }
section#shoplist .List .gals-takatsuki #Right table td	{ border-right-color:#00b900; border-bottom-color:#00b900; }
section#shoplist .List .minisuka #Right table td		{ border-right-color:#fb2a8b; border-bottom-color:#fb2a8b; }
section#shoplist .List .oppai-hirakata #Right table td	{ border-right-color:#fc82ad; border-bottom-color:#fc82ad; }
section#shoplist .List .b-wife #Right table td			{ border-right-color:#cb7ac7; border-bottom-color:#cb7ac7; }
section#shoplist .List .prin-alamode #Right table td	{ border-right-color:#f2bc63; border-bottom-color:#f2bc63; }
section#shoplist .List .do-m #Right table td			{ border-right-color:#f03f6d; border-bottom-color:#f03f6d; }


section#shoplist .List #Right table td .text {
	width: 388px;

	font-size: 16px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
section#shoplist .List #Right table td .text.area {
	white-space: unset;
	overflow: unset;
	text-overflow: unset;

	display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
}

section#shoplist .List #Right table td .text span {
	font-size: 12px;
	color: #969696;
}

section#shoplist .List #Right table td .text span::before {
	content: "※";
	color: #ff0000;
}

section#shoplist .List #Right table td .text b {
	vertical-align: -2px;

	font-family: Impact;
	font-size: 24px;
	font-weight: normal;

	margin: 0 5px;
}

section#shoplist .List #Right table td .text.limit b {
	color: #ff0000;
}




/*画面幅が1340px以上の時（パソコン）*/
@media screen and (min-width:1340px){
	
}



/*画面幅が1339pxまでの時（iPad など）*/
@media screen and (max-width:1339px){

}




/*==================================================
ボタン 縮小＆拡大アニメーションCSS
===================================*/

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




/*==================================================
背景色が伸びて出現＝左から右へ流れる背景（適用箇所： h3 等）
===================================*/

/*背景色が伸びて出現（共通）*/
.bgextend {
  animation-name:bgextendAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
  position: relative;
  overflow: hidden;/*　はみ出た色要素を隠す　*/
  opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
  }
}

/*中の要素*/
.bgappear {
  animation-name:bgextendAnimeSecond;
  animation-duration:1s;
  animation-delay: 0.6s;
  animation-fill-mode:forwards;
  opacity: 0;
}

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

/*左から*/
.bgLRextend::before {
  animation-name:bgLRextendAnime;
  animation-duration:1s;
  animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
}
.bgLRextend.white::before { background-color:#fff; }	/*伸びる背景色の設定*/
.bgLRextend.yellow::before { background-color:#ff0; }	/*伸びる背景色の設定*/

@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}


/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger {
    opacity: 0;
}




/*==================================================
奥から手前へズームして出現（適用箇所：　　等）
===================================*/

/* --------------------------
【初期状態】 アニメーションを適用する要素
 -------------------------- */
.animate {
    opacity: 0; /* 初期状態では非表示 */
    transition: opacity 0s ease-out, transform 0.6s ease-out; /* 透明度と変形を3秒かけてスムーズに変化 */
}

/* ズームインアニメーション（拡大しながら表示） */
.zoom-in {
    transform: scale(0.1); /* 初期状態では10%のサイズ */
}

/* --------------------------
 【最終状態】要素が画面内に入ったとき（アニメーション完了時）
 -------------------------- */
.show {
    opacity: 1; /* 完全に表示 */
    transform: translateY(0) scale(1) translateX(0) rotateY(0); /* 元の位置・サイズ・回転に戻す */
}




/*==================================================
フェードアップ＝下から上へ出現（適用箇所：「class="box"」を設定済みの<li> 等）
===================================*/

/* スタート時は要素自体を透過0にするためのopacity:0;を指定する */
.box{
  opacity: 0;
}


.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}