@charset "utf-8";

/*-----------------------------------------------

   _._     _,-'""`-._
(,-.`._,'(       |\`-/|
    `-.-' \ )-`( , o o)
          `-    \`_`"'-

-------------------------------------------------*/

/*-----------------------------------------------

 * Reset, root

 * Bace

 * Modal

 * Header

 * Footer

 * Parts

-------------------------------------------------*/

/*-----------------------------------------------

 * Reset, root

-------------------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,p,h1,h2,h3,h4,h5,h6,th,td,pre,code,blockquote,form,fieldset,legend,input,textarea,figcaption,figure{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#FFF}hr{display:none}img{vertical-align:bottom}select,input,button,textarea{font-size:99%}table{font-size:inherit;font:100%;border-collapse:collapse;border-spacing:0}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}.hd{display:block;width:0;height:0;overflow:hidden}.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{*zoom:1}article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section,main{display:block}*{margin:0;padding:0;box-sizing:border-box;max-height:999999px;outline:none;}*:focus{outline: none;}button{background-color:transparent;border:none;cursor:pointer;outline:none;padding:0;}

:root {

	--common-min-width: 1200px;

	--common-min-height: 640px;

	/* メインで使用するサイズやカラー */

	--main-font-size: 16px;

	--main-font-family: "Questrial","Noto Sans Thai", sans-serif;

	/*

	Regular 400

	Medium 500

	SemiBold 600

	Bold 700	

	*/

    --main-color: #C41211;

	--sub-color: #6b1620;



	/*chara*/

    --chara1: #1B9D90;

	--chara2: #AF5A5F;

	--chara3: #CBAA68;

	--chara4: #7466A0;

	--chara5: #88AF60;

	--chara6: #DE8D90;

  
  


/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212; /* สีพื้นหลังโหมดมืด */
    color: #ffffff; /* สีข้อความในโหมดมืด */
}

.dark-mode a {
    color: #fff; /* สีลิงก์ในโหมดมืด */
}

.dark-mode .header__inner {
    background-color: rgba(18, 18, 18, 0.96); /* เปลี่ยนสีพื้นหลังของ header */
}

.dark-mode .footerArea {
    background-color: #1f1f1f; /* เปลี่ยนสีพื้นหลังของ footer */
}

.dark-mode .siteTtl_logo {
    filter: brightness(0) invert(1); /* ทำให้โลโก้หรือภาพเป็นสีขาวในโหมดมืด */
}

.dark-mode .contentsArea {
    background-color: #121212; /* สีพื้นหลังของเนื้อหา */
}

.dark-mode .modalBox {
    background: rgba(27, 27, 27, 0.8); /* เปลี่ยนพื้นหลังของโมดัล */
}

/* ปรับภาพพื้นหลังหรือองค์ประกอบที่เป็นภาพ */
.dark-mode .header__inner {
    background-image: url('path/to/dark-mode-image.png'); /* ใช้ภาพสำหรับโหมดมืด */
}




	/* easing */

	--easing-outquart: cubic-bezier(0.25, 1, 0.5, 1);

	/* sp-size */

	--sp-size-2: min(0.2667vw, 2px);

	--sp-size-4: min(0.5334vw, 4px);

	--sp-size-8: min(1.0667vw, 8px);

	--sp-size-10: min(1.3334vw, 10px);

	--sp-size-12: min(1.6vw, 12px);

	--sp-size-16: min(2.1334vw, 16px);

	--sp-size-20: min(2.6667vw, 20px);

	--sp-size-24: min(3.2vw, 24px);

	--sp-size-26: min(3.4667vw, 26px);

	--sp-size-28: min(3.7334vw, 28px);

	--sp-size-30: min(4vw, 30px);

	--sp-size-32: min(4.2667vw, 32px);

	--sp-size-36: min(4.8vw, 36px);

	--sp-size-40: min(5.3334vw, 40px);

	--sp-size-48: min(6.4vw, 48px);

	--sp-size-56: min(7.4667vw, 56px);

	--sp-size-64: min(8.5334vw, 64px);

	--sp-size-72: min(9.6vw, 72px);

	--sp-size-80: min(10.6667vw, 80px);

	--sp-size-96: min(12.8vw, 96px);

	--sp-size-192: min(25.6vw, 192px);

}

@media screen and (max-width:767px){

	:root {

		--common-min-width: 100%;

		--common-min-height: auto;

		--main-font-size: 12px;

		--vw-min: 375;

	}

}



/*FONT*/

.f_zen-old{

	font-family: "Questrial","Noto Sans Thai", sans-serif;

	/*

	Regular 400

	SemiBold 600

	Bold 700	

	*/

}

.f_cormo {

	font-family: "Questrial","Noto Sans Thai", sans-serif,;

	/*

	Light 300

	Regular 400

	Medium 500

	SemiBold 600

	Bold 700

	*/

} 









/*-----------------------------------------------

 * Bace

-------------------------------------------------*/

body{

	-webkit-text-size-adjust: 100%;

	background-color: #fff;

	color: #000;

	font-family: var(--main-font-family);

	font-size: var(--main-font-size);

	font-weight: normal;

	letter-spacing: 0.07em;

	line-height: 1.8;

	word-wrap: break-word;

	-webkit-user-select: none; /* ห้ามห้าม copy text สำหรับ Safari และ Chrome */
        -ms-user-select: none;     /* ห้าม copy text สำหรับ Internet Explorer และ Edge */
         user-select: none;         /* ห้าม copy text มาตรฐานทั่วไป */

}

.pc{ display: block; }

.sp{ display: none; }

a{ color: #222; }

a:hover{ text-decoration: none; }

.ah { transition: opacity .3s ease; }

.ah:hover { opacity: .7; }

::selection{

	background: #B7D4F9;

	color: #000;

}

::-moz-selection{

	background: #B7D4F9;

	color: #000;

}

@media screen and (max-width:767px){

	.sp{ display: block; }

	.pc{ display: none; }

	.ah:hover { opacity: 1; }

}

/**

 * scroll bar

 */

::-webkit-scrollbar {

	width: 6px;

	height: 6px;

}

::-webkit-scrollbar-track {

	background: var(--main-color);

}

::-webkit-scrollbar-thumb {

	background: var(--sub-color);

	margin: 2px;

	box-shadow: none;

}

/**

 * Wrap

 * 大枠のwrap指定

 */

/* fullWrap */

#fullWrap {

	display: flex;

	flex-direction: column;

	min-height: 100vh;

	position: relative;

	z-index: 1;

}

/*-----------------------------------------------

 * Modal

-------------------------------------------------*/

/**

 * modalBox

 * 基盤のモーダル

 */

.modalBox{

	-webkit-overflow-scrolling: touch;

	background: rgba(27,157,144,.8);

	display: none;

	width: 100%;

	height: 100%;

	overflow: auto;

	position: fixed;

	top: 0;

	left: 0;

	z-index: 9999;

}

.oneModal{

	display: none;

	width: 100%;

	height: 100%;

	position: relative;

	z-index: 1;

}

.oneModal.is-show {

	display: block;

}



/* oneModalIn */

.oneModalIn{

	display: flex;

	justify-content: center;

	align-items: center;

	height: auto;

	width: 100%;

	min-height: 100%;

	margin: 0 auto;

	position: relative;

}

.oneModalIn__cont{

	padding: 50px 0;

}

@media screen and (max-width:767px){

	.modalBox{

		background: rgba(27,157,144,.9);

	}

	.oneModalIn{

		min-width: 100%;

	}

	.oneModalIn__cont{

		width: 100%;

		padding: 10vw 3vw;

	}

}



/**

 * closeBtn

 */

.closeBtn{

	width: 107px;

    height: 60px;

    position: absolute;

    top: 20px;

    right: 20px;

    z-index: 2;

}

@media screen and (max-width:767px){

	.closeBtn{

		width:11.2vw;

		height:6.4vw;

		top: 3vw;

		right: 3vw;

	}

}

.closeBtn a {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

}

/* img */

.closeBtn a:before {

	content: "";

	-webkit-mask-image: url(/data/img/ic_close.png);

    width: 100%;

    height: 100%;

    background-color: #FFF;

	-webkit-mask-size: 100% auto;

    width: 100%;

}

/**

 * iframe

 */

/* common */

.commonIframe{

	width: 100%;

	height: 100%;

	display: block;

}

/* youtube */

.youtubeIframeWrap {

	width: 70%;

	max-width: 159.993vh;

	position: relative;

}

@media screen and (max-width:767px){

	.youtubeIframeWrap {

		width: 100%;

		max-width: 100%;

		margin: 50px 0;

	}

}

.youtubeIframeWrap:before{

	content: "";

	display: block;

	padding-top: 56.25%;

	z-index: 0;

}

.youtubeIframe{

	position: absolute;

	top: 0;

	left: 0;

	z-index: 1;

}





/*-----------------------------------------------

 * Header

-------------------------------------------------*/

.header {

	width: 100%;

	position: fixed;

	top: 0;

	z-index: 999;

}



/* inner */

.header__inner {

    background-color: rgba(255,255,255,.96);

    -webkit-overflow-scrolling: touch;

    width: 370px;

    height: 100%;

    overflow-y: auto;

    overscroll-behavior: contain;

    position: fixed;

    top: 0;

    right: 0;

    z-index: 1;

	background-image: url(/data/img/menutext.png), url(/data/img/hd_line_btm.png),url(/data/img/hd_line_top.png);

	background-size: 26% auto,70% auto, 100% auto;

	background-position: left bottom,right bottom 5px, center top 5px;

	background-repeat: no-repeat,no-repeat,no-repeat;

}

@media screen and (max-width:767px){

	.header__inner {

		-webkit-overflow-scrolling: touch;

		width: 66.6vw;

		height: 100%;

		overflow-y: auto;

		overscroll-behavior: contain;

		position: fixed;

		top: 0;

		right: 0;

		z-index: 1;

		background-image:  url(/data/img/hd_line_top.png),url(/data/img/hd_line_top.png);

		background-size: 100% auto, 100% auto;

		background-position:right bottom 5px, center top 5px;

		background-repeat: no-repeat,no-repeat;

	

	}

}

/**

 * headerNav

 */

.headerNav,

.headerNav__inner,

.headerNav__cont {

	width: 100%;

	height: 100%;

}

@media screen and (max-width:767px){

	.headerNav {

		height: calc(100% + 1px);

		position: relative;

	}

	.headerNav__inner {

		display: flex;

		align-items: center;

		justify-content: center;

		height: auto;

		min-height: 100%;

		margin: 0 auto;

		position: relative;

	}

	.headerNav__cont {

		height: auto;

		margin: 100px 0;

		position: relative;

	}

}

/**

 * headerNavLists

 */

.headerNavLists {

	height: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

}

.headerNavLists__item {

	height: 100%;

}

.headerNavLists__item a {

	color: #fff

}

@media screen and (max-width:767px){

	.headerNavLists {

		display: block;

	}

	.headerNavLists__item {

		height: auto;

	}

	.headerNavLists__item:not(:first-child) {

		margin-top: 20px;

	}

}

/* a */

.headerNavLists__item > a {

	display: flex;

	align-items: center;

	justify-content: center;

	height: 100%;

	font-size: 16px;

	font-weight: 800;

	padding: 0 20px;

	position: relative;

	text-decoration: none;

}

@media screen and (max-width:767px){

	.headerNavLists__item > a {

		display: block;

		color: #fff;

		height: auto;

		font-size: 16px;

		padding: 0 0 0 16px;

	}

}



/**

 * navBtn

 */

 .menuBtn{

    position: fixed;

    right: 0;

    top: 0;

    z-index: 10;

    width: 88px;

    height:78px;

	background:url(/data/img/redmenu.png) no-repeat top right;

	background-size: 100% auto;

}

@media screen and (max-width:767px){

	.menuBtn{

		width: 17.8vw;

		height: 17.3vw;

	}

}

/*

.menuBtn::before{

    content: "";

    position: absolute;

    margin: auto;

    width: 100%;

  height: 100%;

  display: block;

  background-color: var(--main-color);

  clip-path: circle(100% at right 0% top 0%);

}*/

	.header__navBtnWrap {

		position: absolute;

		top: 0;

		right: 0;

		z-index: 2;

	}

	.header__navBtn {

		display: flex;

		align-items: center;

		justify-content: center;

		flex-direction: column;

		position: absolute;

		top: 20px;

		right: 20px;

		text-decoration: none;

	}

	.header__navBtn__lineWrap {

		width: 33px;

		height: 6px;

		position: relative;

	}

	.header__navBtn--line {

		background-color: #FFF;

		display: block;

		width: 100%;

		height: 1px;

		margin: auto;

		position: absolute;

	}

	.header__navBtn--line:nth-child(1) {

		top: 0;

	}



	.header__navBtn--line:nth-child(2) {

		bottom: 0;

	}

	.header__navBtn::after{

		content: "Menu";

		color: #FFF;

		width: 100%;

		text-align: center;

		font-size: 13.7px;

		letter-spacing: 0.05em;

		line-height: 1.24;

		margin-top: 5px;

	}

	@media screen and (max-width:767px){

		.header__navBtn {

			top:  3.46vw;

			right: 3.46vw;

		}

		.header__navBtn__lineWrap {

			width: 7.4vw;

			height: 1.76vw;

		}

		.header__navBtn::after{

			font-size: 3.1vw;

		}

		.header__navBtn--line {

			height: .26vw;

		}

	}

/**

 * active

 */

.header__inner {

	transform: translateX(100%);

	transition: transform .5s var(--easing-outquart);

}

.header.is-active .header__inner {

	transform: translateX(0);

}

.header__navBtn--line {

	transition: transform .3s ease,

				opacity .3s ease;

}

.header__navBtn.is-active .header__navBtn--line:nth-child(1) {

	transform: rotate(13deg);

	top: 2px;

}

.header__navBtn.is-active .header__navBtn--line:nth-child(2) {

	transform: rotate(-13deg);

	top: -2px;

}

.header__navBtn.is-active::after{

	content: "Close";

}

@media screen and (max-width:767px){

	.header__navBtn.is-active .header__navBtn--line:nth-child(1) {

		top: 0.53vw;

	}

	.header__navBtn.is-active .header__navBtn--line:nth-child(2) {

		top: -0.53vw;

	}		

}



/*HEADER*/

.headerArea{

    width: 100%;

    position: fixed;

    top: 0;

    z-index: 999;

}

.xBtn__link{

    color: #FFF;

    display: block;

    text-decoration: none;

    background-color: var(--main-color);

    border-radius: 100px;

    padding: 11px 36px;

    transition: all .4s ease;

	font-size: 17.5px;

	font-weight: 600;

	line-height: 1.2;

	letter-spacing: 0.04em;

}

.xBtn__link:hover{

    background-color: var(--sub-color);

}

.xBtn__txt{

    padding-right: 32px;

    position: relative;

}

.xBtn__link .xBtn__txt:after{

    content: '';

	position: absolute;

	right: 0;

	bottom: 0;

    top: 0;

    margin: auto;

	width: 20px;

	height: 20px;

	-webkit-mask-image: url(https://img.icons8.com/?size=100&id=E7zWXk73ENql&format=png&color=ffffff);

    mask-image: url(https://img.icons8.com/?size=100&id=E7zWXk73ENql&format=png&color=ffffff);

    -webkit-mask-size: cover;

    mask-size: cover;

    background-color: #FFF;

	transition: all .4s ease;

}

/*deco*/

.hd_deco{

    width: 100%;

    height: 100%;

    content: "";

    position: fixed;

    right: 0;

    top: 0;

    display: block;

    pointer-events: none;

}

.hd_deco::after,

.hd_deco::before{

    position: absolute;

    margin: auto;

    content: "";

    display: block;

    pointer-events: none;

}



.hd_deco._x::after{

    top: 1%;

    left: 0;

    width: 100%;

    height: 1px;

    background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

}

.hd_deco._x::before{

    bottom: 1%;

    right: 0;

    width: 70%;

    height: 1px;

    background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

}

.hd_deco._y::after{

    left: 6px;

    width: 1px;

    height: 88%;

    background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 20%, transparent 50%, rgba(209,37,26,1) 80%, transparent 100%);

}

@media screen and (max-width:767px){

	.hd_deco._y::after{

		height: 100%;

	}

}

.hd_deco._y::before{

    bottom: 0;

    right: 6px;

    width: 1px;

    height: 98%;

    background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 20%, transparent 50%, rgba(209,37,26,1) 80%, transparent 100%);

}

/*nav*/

.header__contentsBox{

	display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

	padding: 80px 0;

	width: 100%;

	min-height: 100%;

}

.hd_navWrap{

	display: flex;

	justify-content: center;

}

.hd_nav{

    margin-bottom: 56px;

	display: flex;

	flex-direction: column;

}

.hd_nav_item{

    margin-bottom: 25px;

}

.hd_nav_item_link{

    text-decoration: none;

    color: var(--main-color);

    font-size: 31px;

	letter-spacing: 0.02em;

    font-weight: 500;/*medium*/

    line-height: 1.22;

    transition: all .3s ease;

	margin-bottom: 17px;

}

.hd_nav_item_link.is-active,

.hd_nav_item_link:hover{

    color: var(--sub-color);

}

.nav_jp{

    display: block;

    font-size: 11px;

	letter-spacing: .17em;

	font-family: var(--main-font-family);

	font-weight: 500;

}

.hd_shareListsWrap{

    display: flex;

	align-items: center;

    margin-bottom: 37px;

    justify-content: center;

}

.sp.nav_jp{

	display: none;

}

.nav_official_xBtn{

	width: 162px;

	margin: 0 auto;

}

@media screen and (max-width:767px){

	.header__contentsBox{

		padding: 20.2vw 0;

	}

	.hd_nav{

		margin-bottom: 10.6vw;

	}

	.hd_nav_item{

		margin-bottom: 3.7vw;

	}

	.hd_nav_item_link{

		font-size: 5.5vw;

		line-height: 1.19;

		letter-spacing: 0.02em;

	}



	.nav_jp{

		display: block;

		margin-top:0;

		font-size: 2.6vw;

	}

	.hd_shareListsWrap{

		margin-bottom: 10.6vw;

	}

	.nav_official_xBtn{

		width: 39.4vw;

	}

	.nav_official_xBtn .xBtn__link {

		padding: 3.14vw 9vw;

		font-size: 4vw;

	}

	.nav_official_xBtn .xBtn__link .xBtn__txt:after {

		width: 4.8vw;

		height: 4.8vw;

	}

	.nav_official_xBtn .xBtn__txt {

		padding-right: 0;

	}

	

	

}

/*-----------------------------------------------

 * Parts

-------------------------------------------------*/

/**

 * shareLists

 */

.shareLists {

	display: flex;

}

/* item */

.shareLists__item {

	width:18px;

	height: 18px;

	margin:0 10px;

}

.footerArea .shareLists__item {

	width:20px;

	height: 20px;

	margin:0 10px;

}

@media screen and (max-width:767px){

	.shareLists__item {

		width:4.8vw;

		height: 4.8vw;

		margin:0 2.6vw;

	}

}

/* link */

.shareLists__link {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 100%;

	height: 100%;

	position: relative;

	text-decoration: none;

}

.shareLists__link:before {

	content: "";

	background-color: var(--main-color);

	display: block;

	-webkit-mask-repeat: no-repeat;

	mask-repeat: no-repeat;

	-webkit-mask-position: center;

	mask-position: center;

	-webkit-mask-size: 100%;

	mask-size: 100%;

	transition: background-color .4s ease;

	width: 100%;

	height: 100%;

}

.shareLists__link:hover:before {

	background-color: var(--sub-color);	

}

/* 各SNSパーツ */

.shareLists__item.is-x .shareLists__link:before {

	-webkit-mask-image: url(https://img.icons8.com/?size=100&id=A4DsujzAX4rw&format=png&color=ffffff);

	mask-image: url(https://img.icons8.com/?size=100&id=A4DsujzAX4rw&format=png&color=ffffff);

}

.shareLists__item.is-facebook .shareLists__link:before {

	-webkit-mask-image: url(https://img.icons8.com/?size=100&id=118467&format=png&color=ffffff);

	mask-image: url(https://img.icons8.com/?size=100&id=118467&format=png&color=ffffff);

}

.shareLists__item.is-line .shareLists__link:before {

	-webkit-mask-image: url(https://img.icons8.com/?size=100&id=i7393ie24LoV&format=png&color=ffffff);

	mask-image: url(https://img.icons8.com/?size=100&id=i7393ie24LoV&format=png&color=ffffff);

}

/*footer*/

.footerArea{

	margin-top:auto;

}

/*share*/

.footerArea .shareLists_ttl{

    color: #FFF;

}

.footerArea .shareLists__link:before {

	background-color: #FFF;

}

.footerArea .shareLists__link:hover:before {

	background-color: var(--sub-color);	

}

.copyright{

	color: #FFF;

    text-align: center;

    display: block;

	font-size: 11px;

	letter-spacing: 0.1em;

}

.ft_bnr_list{

    display: flex;

    justify-content: center;

    margin-top: 35px;

}

.ft_bnr_list li{

    margin: 0 5px;

}

.footerArea .shareListsWrap{

	display: flex;

    align-items: center;

    justify-content: center;

	margin-bottom: 50px;

}

.footerArea .area_inner {

    padding: 40px;

}



@media screen and (max-width:767px){

    .footerArea .area_inner {

        width: 100%;

        padding: 6vw 6vw;

    }

    .footerArea .shareListsWrap{

       color: var(--main-color); 

       margin-top: 5vw;

       display: flex;

	   align-items: center;

    }

    .footerArea .shareLists_ttl {

        margin-bottom: 0;

    }

    .footerArea .shareLists__item {

        width: 5vw;

        height:5vw;

        margin-left: 0;

        margin: 0 3vw;

    }

    .footerArea .shareLists__link:before {

        content: "";

        background-color:#FFF;	

        display: block;

        -webkit-mask-repeat: no-repeat;

        mask-repeat: no-repeat;

        -webkit-mask-position: center;

        mask-position: center;

        -webkit-mask-size: 100%;

        mask-size: 100%;

        transition: background-color .4s ease;

        width: 100%;

        height: 100%;

    }



	.ft_bnr_list{

		flex-wrap: wrap;

		margin-top: 6.6vw;

	}

	.ft_bnr_list li{

		margin: 0 1.5vw 3vw 1.5vw;

		width: 40%;

	}

	.ft_bnr_list li img{

		width: 100%;

		height: auto;



	}

	.footerArea .area_inner {

		width: 100%;

		padding: 6vw 0;

	}

	.copyright{

		font-size: 2.9vw;

	}

	

}

/*-----------------------------------------------

 * Loading

-------------------------------------------------*/

.loading{

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	z-index: 10002;

	pointer-events: none;	

}

.loading_inner{

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background-color: #FFF;

	display: flex;

	align-items: center;

}

@media screen and (max-width: 767px){

	.loading_logo{

		width: 40%;

	}

}

.loading_logo{

	position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

	opacity: 1;

}



body.--loaded .loading{

	animation: fadeOut .6s forwards;

}





.stage{

	opacity: 0;

}

body.--loaded .stage{

	animation: fadein .8s forwards;

	animation-delay: .8s;

}



@keyframes fadeOut {

	0% {opacity: 1}

	100% {opacity: 0}

}

@keyframes fadein {

	0% {opacity: 0}

	100% {opacity: 1}

}

/*COMMMON*/

img{

    vertical-align: bottom;

}

.fc_led{

    color: var(--main-color);

}

.stage{

    width: 100%;

    min-width: 1200px;

}

.area_inner{

    width: 1200px;

    margin: 0 auto;

    overflow: hidden;

    position: relative;

}

.inner{

	width: 1200px;

	margin: 0 auto;

	padding: 0 90px;

}	

@media screen and (max-width:767px){

    .stage{

        min-width: 100%;

    }

    .area_inner{

        width: 100%;

        padding: 14.6vw 6vw;

    }

	.inner{

		width: 100%;

		padding: 0 6.6vw;

	}

    img{

        width: 100%;

        height: auto;

    }

}



/*sns*/

.shareLists_ttl{

    font-size: 14.5px;

    color: var(--main-color);

	margin-right: 10px;

	font-weight: 600;

	letter-spacing: .04em;

	line-height: 1.17;

}

@media screen and (max-width:767px){

    .shareListsWrap{

        display: flex;

        align-items: center;

    }

    .shareLists_ttl{

        font-size: 3.2vw;

		margin-right: 2.6vw;

    }

}



/*toTop*/

.toTopWrap{

    text-align: center;

    padding-bottom: 60px;

}

.sub .toTopWrap{

    text-align: center;

    padding-bottom: 0;

	margin-top: 95px;

}





.toTop{

    display: block;

    margin: 0 auto;

    width: 45px;

    padding-top: 45px;

    background-color: var(--main-color);

    -webkit-mask: url(/data/img/totop.png) no-repeat center / contain;

	mask: url(/data/img/totop.png) no-repeat center / contain;

    transition: all .4s ease;

}

@media screen and (max-width:767px){

	.toTop{

		width: 9.33vw;

		padding-top: 9.33vw;

	}

	.sub .toTopWrap{

		text-align: center;

		padding-bottom: 0;

		margin-top: 20.5vw;

	}

}

/* hover */

.movieListsPager > a:before {

    transition: transform .3s ease;

}

.toTop:hover { transform: translateY(-20%); }





/*--------------

FOOTER

----------------*/

.footerArea{

    background-color:var(--main-color);

    width: 100%;

    padding: 70px 0;

}

.index .footerArea{

    margin-top: -30px;

}

.sub .footerArea{

    margin-top: auto;

}

.ft_nav{

    display: flex;

    justify-content: center;

    margin-bottom: 70px;

}

.ft_nav_item {

    display: block;

    margin: 0 15px;

    font-size: 19px;

}

.ft_nav_item a{

    text-decoration: none;

    color: #FFF;

	transition: all .4s ease;

}

.ft_nav_item:hover a{

    color: var(--sub-color);

}

@media screen and (max-width:767px){

    .footerArea{

        flex-direction: column;

    }

    .ft_nav{

		flex-direction: column;

		margin-bottom: 20vw;

		padding: 0 13.3vw;

	}

	.ft_nav_item {

		margin: 0 0 4.53vw;

		font-size: 7.73vw;

		line-height: 1.2;

		font-weight: 500;

	}

	.ft_nav_item .nav_jp{

		display: block;

		font-size: 2.93vw;

	}

}



/*site ttl*/

.siteTtl {
    display: inline-block;
    width: 200px; /* ขนาดที่ต้องการ */
    height: 50px; /* ขนาดที่ต้องการ */
    background-image: url('/data/img/logo.png');
    background-size: contain; /* หรือ cover ขึ้นอยู่กับความต้องการ */
    background-repeat: no-repeat;
    text-indent: -9999px; /* ซ่อนข้อความ */
    overflow: hidden;
    position: absolute;
    left: 40px; /* ระยะห่างจากขอบซ้าย */
    top: 25px; /* ระยะห่างจากขอบบน */
    z-index: 5;
}


 /* สำหรับหน้าจอที่มีความกว้างสูงสุด 767 พิกเซล */
@media screen and (max-width: 767px) {
    .siteTtl {
        width: 100px; /* ขนาดที่เล็กลงสำหรับมือถือ */
        height: 50px; /* กำหนดความสูงให้พอเหมาะ */
        left: 25px; /* ปรับระยะห่างจากขอบซ้าย */
        top: 20px; /* ปรับระยะห่างจากขอบบน */
    }
}






/*--------------

SUB PAGE

----------------*/



/*sub common*/

.f_red{

    color: var(--main-color);

}

.f_green{

    color: var(--sub-color);

}



/*sub deco*/

.sub_deco{

    width: 100%;

    height: 100%;

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    display: block;

    pointer-events: none;

}

.sub_deco::before,

.sub_deco::after{

    position: absolute;

    margin: auto;

    content: "";

    display: block;

    pointer-events: none;

}

.sub_deco._x::after{

    top: 40px;

    right: 0;

    width: calc(50% - 90px);

    height: 1px;

	background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

}

.sub_deco._x::before{

    top: 40px;

	bottom: unset;

    left: 0;

    width: calc(50% - 90px);

    height: 1px;

	background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

}

.sub_deco._y::after{

    top: 1%;

    left: 20px;

    width: 1px;

    height: 99%;

	background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 17%, transparent 29%, rgba(209,37,26,1) 55%, transparent 72%, rgba(232,144,139,1) 87%, transparent 100%);

}

.sub_deco._y::before{

    bottom: 1%;

    right: 20px;

    width: 1px;

    height: 99%;

	background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 10%, transparent 30%, rgba(209,37,26,1) 50%,  transparent 100%);

}

@media screen and (max-width:767px){

    .sub_deco._x::after{

        

        left: unset;

        right: 0;

		width: calc(50% - 15vw);

		background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

    }

    .sub_deco._x::before{

		bottom: unset;



        left: 0;

		width: calc(50% - 15vw);

        height: 1px;

		background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

    }

    .sub_deco._y::after{

        bottom: 1%;

		top: unset;

		left: 1.86vw;

		width: 1px;

		height: 100%;

    }

    .sub_deco._y::before{

        bottom: 1%;

        right: 1.86vw;

        width: 1px;

        height: 100%;

        background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 17%, transparent 29%, rgba(209,37,26,1) 55%, transparent 72%, rgba(232,144,139,1) 87%, transparent 100%);

    }

}





/*

.siteTtl::after{

	content: "";

	width: calc(50% - 90px);

	height:1px;

	position: absolute;

	right: 0;

	top: 5px;

	background-color: var(--main-color);

}

.siteTtl::before{

	content: "";

	width: calc(50% - 90px);

	height:1px;

	position: absolute;

	left: 0;

	top: 5px;

	background-color: var(--main-color);

}*/





.sub .contentsArea{

	background-color: #FFF;

}

.sub .contentInner{

	/*width: 1360px;*/

	width: 1200px;

	margin: 0 auto;

	padding-bottom: 95px;

}

@media screen and (max-width:767px){

	.sub .contentInner{

		width: 100%;

		padding-bottom: 10vw;

	}

}

.contentsTtlBox{

	display: flex;

	justify-content: center;

	padding: 126px 0 65px;

	position: relative;

}

.contentsTtl{

	font-size: 70px;

	line-height: 1.21;

	font-weight: 300;

	letter-spacing: 0.14em;

}

.contentsTtl .ttl_jp{

	font-size: 15px;

	font-weight: 500;

	display: block;

	line-height: 2.53;

	letter-spacing: 0.18em;

	text-align: center;

	font-family: var(--main-font-family);

}

@media screen and (max-width:767px){

	.contentsTtl{

		font-size: 11.4vw;

	}

	.contentsTtl .ttl_jp{

		font-size: 2.9vw;

		/*margin-top: 5.3vw;*/

	}

}

/*contentsTtl deco*/

.contentsTtl_deco{

	position: absolute;

	bottom: 0;

	content: "";

	width: 100%;

	height: 100%;

	pointer-events: none;

}

.contentsTtl_deco::before{

	position: absolute;

	bottom: 0;

	content: "";

	width: 100%;

	height: 1px;

	background: linear-gradient(90deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

}

.contentsTtl_deco::after{

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	margin: auto;

	content: "";

	width: 1px;

	height: 29px;

	background: var(--main-color);

	background: linear-gradient(0deg, transparent 0%, rgba(209,37,26,1) 50%, transparent 100%);

	transform: translate(0, 50%);

}

@media screen and (max-width:767px){

	.contentsTtlBox{

		padding:21.6vw 0 9.86vw;

	}

}