@charset "utf-8";

*:focus {
  outline: none;
}
body{
    margin: 0;
    padding: 0;
}
.noto-sans-jp{
	font-family: "Noto Sans JP", sans-serif;
}
.inter{
	font-family: "Inter", sans-serif;
}
.zen-kaku-gothic-new{
	font-family: "Zen Kaku Gothic New", sans-serif;
}

.BeVietnam{
	font-family: "Be Vietnam Pro", sans-serif;
}
.Helvetica{
	font-family: "helvetica-lt-pro", sans-serif;
}
.Hiragino{
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
}

.sticky__container{
	display: flex;
    margin: 0 auto;
    padding: 0;
	background: url(../images/bg_dot_pattern.png) repeat 0 0 / 50px 50px;
	background-attachment: fixed;
	/*justify-content: center;*/
}
.pcBox{
	min-height: 100vh;
	position: sticky;
	left: 0;
	top: 0;
	display: flex;
}
.title_pc{
	display: block;
	width: 20vh;
}

#lp_wrap{
	max-width: 600px;
	width: 100%;
	text-align: center;
	margin: 0 auto;
	color: #222;
	display: block;
	padding: 0 0 10%;
	overflow: hidden;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
	letter-spacing:.5px;
	line-height: 1.65em;
	background: #edf2e7;
}
#lp_wrap img{
    vertical-align: bottom;
    line-height: 0;
    border: none;
}
#lp_wrap ul,#lp_wrap li{
	padding: 0;
    list-style: none;
}

#lp_wrap a,#lp_wrap a:hover,#lp_wrap a:link{
    text-decoration: none;
    opacity: 1;
}
#lp_wrap img{
	width: 100%;
	height:auto;
	 display:block;
}
/* ================================================ 
header
================================================ */
#lp_head{
	width: 100%;
	display: block;
	position: relative;
	text-align: center;
	margin: 0 auto;
	padding: 10% 0;
}

#lp_head .head{
	width: 100%;
	display: inline-block;
	margin: 0 auto;
	position: relative;
}

#lp_head .title{
	width:50%;
	display: inline-block;
	position: relative;
	text-align: center;
}
#lp_head .heading{
	font-family: "Be Vietnam Pro", sans-serif;
	font-size: 30px;
	text-align: center;
	margin: 1% auto 0;
	color: #1ea064;
	letter-spacing: 0px;
}
#lp_head .heading {
  align-items: center; /* 横線を上下中央 */
  display: flex; /* 文字と横線を横並び */
  justify-content: center; /* 文字を中央寄せ */
}
#lp_head .heading::before,
#lp_head .heading::after {
  background-color: #1ea064; /* 横線の色 */
  content: "";
  height: 1px; /* 横線の高さ */
  width: 60px; /* 横線の長さ */
}
#lp_head .heading::before {
  margin-right: 15px; /* 文字との余白 */
}
#lp_head .heading::after {
  margin-left: 15px; /* 文字との余白 */
}
#lp_head .lead{
	font-size: 15px;
	text-align: center;
	margin: 10% auto;
	position: relative;
	display: inline-block;
	line-height: 2em;
}
#lp_head .info_area {
	width: 80%;
	text-align: center;
	margin: 0% auto;
	position: relative;
	display: inline-block;
}

#lp_head .info_area .inner {
	position: relative;
	background-color: #fff;
	width: calc(100% - 5px);
	border: 1px solid #333;
	padding: 6% 0;
	box-shadow: 10px 10px 0 #a3e3b4; /* ← 右下に影 */
}
#lp_head .info_area .inner .date{
    font-weight: 600;
    font-size: 20px;
    text-decoration: underline;
    color: #1ea064;
    margin: 15px auto;
	font-family: "Zen Kaku Gothic New", sans-serif;
}
#lp_head .info_area .inner .shop{
	font-size: 15px;
	text-align: center;
	margin: 0% auto;
	display: inline-block;
	position: relative;
	color: #1ea064;
}
#lp_head .info_area .inner .note{
	width: 100%;
    font-size: 14px;
    text-align: center;
    margin: 5% auto 2%;
    position: relative;
    display: block;
    padding: 5% 0;
	line-height: 2em;
}
#lp_head .info_area .inner .note .strong{
    font-size: 120%;
	font-weight:500;
}
#lp_head .yukiha{
	position: absolute;
	width: 110px;
	right: -10%;
	bottom: -3%;
}
#lp_head .sato{
	position: absolute;
	width: 85px;
	left: -10%;
	top: -15%;
	
}

/* ================================================ 
contents
================================================ */

#lp_contents{
	width: 100%;
	position: relative;
	display: block;
	margin: 0% auto 0;
}
#lp_contents section{
	width: 100%;
	text-align: center;
	margin: 10% auto;
	padding: 5% 0;
	position: relative;
	display: inline-block;
	background: #ceecd2;
}
#lp_contents section .staff_area{
	width: 90%;
	text-align: center;
	margin: 5% auto 0;
	position: relative;
	display: inline-block;
}
#lp_contents section .staff_area .staff_name{
	font-family: "hiragino-kaku-gothic-pron", sans-serif;
	color: #1ea064;
	font-size: 50px;
	font-weight: bolder;
	text-align: center;
	margin: 0 auto;
}
#lp_contents section .staff_area .staff_img{
    width: 180px;
    clip-path: circle(50%);
    text-align: center;
    display: block;
    margin: 3% auto;
}
#lp_contents section .staff_area .staff_detail{
	width: 60%;
	display: inline-block;
	font-family: "Zen Kaku Gothic New", sans-serif;
	text-align: center;
	margin: 0 auto;
	position: relative;
}
#lp_contents section .staff_area .staff_detail .spot {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    margin: 0 auto;
	font-weight: 500;
	font-weight: bold;
}
#lp_contents section .staff_area .staff_detail .spot .icon {
    width: 6%;
    margin-right:2%;
}
#lp_contents section .staff_area .staff_detail .plof{
	font-size: 15px;
	text-align: center;
	margin: 10px auto;
	letter-spacing: 0px;
}
#lp_contents section .staff_area .staff_detail .sns-box {
    display: flex;
    justify-content: space-between;
	width: 66%;
    margin: 4% auto 0;
    gap: 5px;
}
#lp_contents section .staff_area .staff_detail .sns-box .snslink {
    font-family: "Be Vietnam Pro", sans-serif;
    font-weight: 400;
    font-size: 10px;
    border-radius: 100vh;
    border: 1px solid #333;
    line-height: 1.5em;
    text-align: center;
    white-space: nowrap;
    padding: 2.5% 0;
    width: 50%;
    color: #000000;
	background: #FFFFFF;
}
#lp_contents section .style_area{
	width: 70%;
	padding: 5% 0;
	margin: 0 auto;
	position: relative;
	display: inline-block;
}
#lp_contents section .style_area .ttl{
	width: 100%;
	padding: 0% 0;
	margin: 0 auto;
	position: relative;
	display: inline-block;
	
}
#lp_contents section .style_area .ttl .speechBubble {
	width: 100%;
	position: relative;
	display: inline-block;
	margin: 5% auto;
	padding: 5% 0;
	border-radius: 20px;
	background-color: #1ea064;
	text-align: center;
	font-size: 20px;
	color: #FFFFFF;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: bold;
	line-height: 1.8em;
}

#lp_contents section .style_area .ttl .speechBubble::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	border-style: solid;
    border-width: 11px 6px 0 6px;
	border-color: #1ea064 transparent transparent;
	translate: -50% 100%;
}
#lp_contents section .style_area .ttl .no{
	position: absolute;
	width: 100px;
	top: 5%;
	left: 12%;
	z-index: 5;
}

/* ============ fade CSS ============ */
/* 共通 */
.styleimg{
	position: relative;
	aspect-ratio: 5 / 6;
}

.styleimg .slider{
  position: absolute;
  inset: 0;
  width: 100%;
  opacity: 0;
  z-index: 1;
}

.styleimg .slider img{
  width: 100%;
  height: auto;
  display: block;
}

/* 再生制御（is-active付いたら動く） */
.styleimg .slider{ animation-play-state: paused; }
.styleimg.is-active .slider{ animation-play-state: running; }

/* 共通キーフレーム */
@keyframes anime {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ============ 4枚切り替え ============ */
/* 1枚あたり2s表示 → 合計8s */
.styleimg.is-4 .slider{
  animation: anime 8s infinite;
}
.styleimg.is-4 .slider:nth-child(1){ animation-delay: 0s; }
.styleimg.is-4 .slider:nth-child(2){ animation-delay: 2s; }
.styleimg.is-4 .slider:nth-child(3){ animation-delay: 4s; }
.styleimg.is-4 .slider:nth-child(4){ animation-delay: 6s; }


#lp_contents section .style_area .credit_box{
	width: 100%;
	text-align: center;
	margin: 5% auto 2.5%;
	position: relative;
	display: inline-block;
}
#lp_contents section .style_area .credit_box .credit{
	font-size: 20px;
	text-align: center;
	margin: 0 auto;
	line-height: 1.7em;
	font-weight: 500;
}
#lp_contents section .style_area .point_box{
	width: 100%;
	display: inline-block;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
#lp_contents section .style_area .point_box .point{
	font-size: 14px;
	text-align: center;
	margin: 10px auto;
	position: relative;
	line-height: 1.7em;
	border-bottom:#1ea064 dotted 2px;
	
}


/* ================================================ 
footer
================================================ */

#lp_footer{
	width:100%;
	display: block;
	margin: 0 auto;
	padding: 0;
	position: relative;
	text-align: center;
}

#lp_footer .lp_logo{
		width: 25%;
		margin: 10% auto 5%;
	}

/*=====ボタン01=====*/
.btn_01 a {
	background: #333;
	color: #FFFFFF;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4% auto;
    width: 60%;
    padding: 3% 0%;
    transition: 0.3s ease-in-out;
    font-weight: 500;
    font-size: 13px;
    line-height: 1.5em;
    letter-spacing: .8px;
	border-radius: 100vh;
	font-family: "Inter", sans-serif;
	float: none;
    
}
.btn_01 a:after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 3px solid #FFFFFF;
    border-right: 3px solid #FFFFFF;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn_all a {
	background: #FFFFFF;
	color: #e7372f;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0% auto 0;
    width: 80%;
    padding: 2.5% 0%;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    font-size: 16px;
    line-height: 2em;
    letter-spacing: .5px;
	border-radius: 100vh;
	font-family: "Inter", sans-serif;
	border: #e7372f 2px solid;
    
}
.btn_all a:hover {
    background: #e7372f;
    color: #FFFFFF;
}
.btn_all a:after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 4px solid #e7372f;
    border-right: 4px solid #e7372f;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.btn_all a:hover:after {
    border-color: #FFFFFF;
}



.pc{
    display:block;
}
.sp {
	display:none;
}
.clear{
    clear: both;
}
.Left{
    float: left;
}
.Right{
    float: right;
}
.small{
	font-size: 70%;
}


/**********************************************
　　　　　　　　　　　　SP
**********************************************/

@media only screen and (max-width:768px){
	.pcBox{
		display: none;
	}
	#lp_wrap {
		width: 100%;
		margin: 0% auto;
		padding: 5% 0;
	}
	#lp_head .title{
		width: 55%;
	}
	#lp_head .heading{
		font-size: 20px;
	}
	#lp_head .lead{
		font-size: 14px;
		letter-spacing: 0px;
	}
	#lp_head .info_area{
		width: 92%;
	}
	#lp_head .info_area .inner{
		box-shadow: 5px 5px 0 #a3e3b4;
		padding: 20% 0;
	}
	#lp_head .info_area .inner .date{
		font-size: 16px;
		    margin: 10px auto;
	}
	#lp_head .info_area .inner .shop{
		font-size: 13px;
	}
	#lp_head .info_area .inner .note{
		font-size: 12px;
	}
	#lp_head .yukiha{
		width: 80px;
		bottom: -1%;
	}
	#lp_head .sato{
		width: 60px;
		left: -5%;
		top: -8%;
	}
	#lp_contents section .staff_area .staff_name{
		font-size: 30px;
	}
	#lp_contents section .staff_area .staff_img{
		width: 130px;
	}
	#lp_contents section .staff_area .staff_detail .spot{
		font-size: 14px;
	}
	#lp_contents section .staff_area .staff_detail .plof{
		font-size: 13px;
		margin: 2px auto;
	}
	#lp_contents section .staff_area .staff_detail .sns-box{
		width: 90%;
	}
	#lp_contents section .style_area{
		width: 90%;
	}
	#lp_contents section .style_area .ttl .no{
		width: 70px;
		left: 5%;
	}
	#lp_contents section .style_area .ttl .speechBubble{
		font-size: 17px;
	}
	#lp_contents section .style_area .credit_box .credit{
		font-size: 17px;
	}
	#lp_contents section .style_area .point_box .point{
		font-size: 13px;
	}
	.pc{
		display: none;
	}
	.sp{
		display: block;
	}
}



/* ================================================ 
　　　　　　　　　　　　JS動き
================================================ */

.fade01{
	opacity: 0;
	transition: 1.5s all 0s ease;
}
.fade02{
	opacity: 0;
	transition: 1.8s all 0.4s ease;
}
.fade03{
	opacity: 0;
	transition: 1.8s all 0.7s ease;
}
.fade04{
	opacity: 0;
	transition: 1.8s all 0.9s ease;
}
.fade01.ac,.fade02.ac,.fade03.ac,.fade04.ac{
	opacity: 1;
    transform: translate(0);
}
.anim01 {
    opacity: 0;
    transform: translateY(50px);
    transition: 1.2s all 0.2s ease;
}
.anim02 {
    opacity: 0;
    transform: translateY(50px);
    transition: 1.2s all 0.4s ease;
}
.anim03 {
    opacity: 0;
    transform: translateY(50px);
    transition: 1.2s all 0.8s ease;
}
.anim04 {
    opacity: 0;
    transform: translateY(50px);
    transition: 1.2s all 1.2s ease;
}

.anim01.ac,.anim02.ac,.anim03.ac,.anim04.ac {
	opacity: 1;
    transform: translate(0);
}

/* ================================================ 
　　　　　　　　　　　　CSS動き
================================================ */

/* ================================================ 
スクロール
================================================ */

.txt_scroll{
	display: flex;
	overflow: hidden;
	width: 100%;
	position: relative;
	z-index: 1;
	color: #000;
	margin: 0% auto;
}
.txt_scroll ul{
	display: flex;          /* ← nowrapの代わりに横並びを保証 */
	flex: 0 0 auto;         /* 自動幅で連結 */
	align-items: center;
	gap: 1em;             /* 単語間の余白。必要に応じて調整 */
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: "Be Vietnam Pro", sans-serif;
	letter-spacing: 0px;
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	animation: marquee 60s linear infinite; /* 速度はここで調整 */
	will-change: transform;
}
/* 2本目を半周（=durationの半分）だけ先行させて継ぎ目を埋める */
.txt_scroll ul:nth-of-type(2){
  animation-delay: -6s;   /* 12sの半分。durationを変えたらここも半分に */
}
/* 連続スクロール（自身の幅ぶん流す） */
@keyframes marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); } /* 要素自身の幅の-100% */
}
@media only screen and (max-width:768px){
	.txt_scroll ul{
		font-size: 15px
	}
}