#container{
	display: none;
}
/*------
 ポップアップ他関連
------*/
#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  background-color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 100000;
  max-width: 240px;
}
/* 画面全体を覆う半透明の背景 */
.background-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5); /* 半透明の白色 */
  backdrop-filter: blur(10px); /* ぼかし効果 */
  z-index: 99900; /* ポップアップよりも背面に配置 */
  display: none;
}
#popup > div{
	padding-top: 7px;
  text-align: center;
}
/* OKボタンのスタイル */
#popup-button ,
#popup-button2{
  padding: 10px;
  background-color: #EF4123;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
#popup-button_u1 ,
#popup-button_u2 ,
#popup-button_u3 ,
#popup-button_u4,
#popup-button_u1_2 ,
#popup-button_u2_2 ,
#popup-button_u3_2 ,
#popup-button_u4_2{
  margin: 2px;
  color: transparent;
  border: none;
  cursor: pointer;
	background-repeat:no-repeat;
	background-size: cover;
	background-color: white;
	width: 45px;
	height: 45px;
}

#popup-button_u1,#popup-button_u1_2{
	background-image:url("../img/btn_play.png");
}
#popup-button_u2,#popup-button_u2_2{
	background-image:url("../img/btn_pause.png");
}
#popup-button_u3,#popup-button_u3_2{
	background-image:url("../img/btn_stop.png");
}
#popup-button_u4,#popup-button_u4_2{
	background-image:url("../img/btn_lylics.png");
}

/*box全体_余白*/
.left-box{
	padding-top:65px;
}
.right-box{
	padding-top:10px;
}
@media screen and (min-width:768px) { 
	.left-box, .right-box {
		padding-top:0px;
	}
}
@media screen and (min-width:1500px) { 
	.left-box, .right-box {
		padding-top:0px;
	}
}

/*box全体_パーツ*/
.split-box {
	position:relative;
	width:100%;
	height:auto;
}
@media screen and (min-width:768px) { 
	.split-box{
		position:absolute;
		width:50%;
		height:100%;
	}
}
.nenga__parts01{max-width: 150px; display:block; padding: 10px 0;  margin-bottom: 30px;}
.nenga__parts02{max-width: 150px; margin:30px auto; padding: 10px 0; display: block;}
.nenga__parts03{    max-width: 150px;
    margin: 30px 0 30px auto;
    padding: 10px 10px;
    display: block;}
.n-right-box__heading__divideline{border:3px double #EF4123; margin: 30px auto; max-width: 250px;}
.n-right-box__heading__outer{
	max-width: 400px; margin: 20px auto 20px;
}

/*box_左*/
.left-box {
	left:0;
	background: url("../img/img_bg_left.jpg");
	background-size: contain;
	background-size: 70%;
	background-repeat: repeat;
	color:#ffffff;
	display: block;
}
.left-box a{
	color:#ffffff;
	display:block;
}
.left-box .n-splitbox--l{
    display: flex;
    flex-direction: column;
}

.n-splitbox--l__img img{
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
	display: block;
	padding-bottom: 30px;
}
.n-splitbox--l__text * {
	text-align: center;
	text-shadow: 2px 2px 2px #000;
}
.n-splitbox--l__text {
	padding-top: 60px;
	padding-bottom: 60px;
}
@media screen and (min-width:768px){
	.n-splitbox--l__text {
		padding-top: 0px;
		padding-bottom: 10px;
	}
	.left-box { position: fixed; }
	.left-box .n-splitbox--l{
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    width: 95%;
	    margin: 0 auto;
	    height: 100%;
	}
	.left-box .n-splitbox--l div.n-splitbox--l__img,
	.left-box .n-splitbox--l div.n-splitbox--l__text {
		width: 90%;
	}
	.left-box .n-splitbox--l .n-splitbox--l__text h2{
		font-size: 31px;
		text-align: center;
		text-shadow: 1px 1px 1px #333;
		letter-spacing: 0px;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.left-box .n-splitbox--l .n-splitbox--l__text p{
		font-size: 14px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 1px;
		text-shadow: 1px 1px 1px #111;
  	}
}
@media screen and (min-width:1200px){
	.left-box .n-splitbox--l h2{
		font-size: 28px;
	}
}
@media screen and (min-width:1350px){
	.left-box .n-splitbox--l h2{
		font-size: 31px;
	}
}

.left-box .n-splitbox--l img{
	display: block;
	width: 80%;
	max-width: 220px;
	margin: 0 auto;
}
@media screen and (min-width:1100px){
	.left-box .n-splitbox--l img{
		width: 80%;
		max-width: 300px;
	}
}

#left_pdca_lylics{
	background-color: rgba(0,0,0,0.7);
	padding:10px;
	box-sizing: border-box;
	position: fixed;
	bottom: 20px;
	left: 10px;
	font-size: 16px;
	animation-name:fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity:0;
	z-index: 9999999;
}
@media screen and (max-width:767px){
	#left_pdca_lylics{
		max-width: 94%;
		left: 3%;
	}
}

#left_pdca_lylics p{
	font-size: 1.6rem;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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


/*box_右*/
/*main*/
.right-box {
	right:0;
	background:#ffffff;
	box-sizing: border-box;
}
@media screen and (min-width:768px){
	.right-box {
		padding-top: auto;
	}
}
.n-right-box__inwrap .n-right-box__inwrap__heading{
	max-width: 450px;
	width: 90%;
	margin: 0 auto;
	padding: 4vh 0 2vh;
}
.n-right-box__inwrap .n-right-box__inwrap__heading h2{
	font-size: 16px;
	text-align: center;
	letter-spacing: 3px;
	line-height: 2em;
}
@media screen and (min-width:768px){
	.n-right-box__inwrap .n-right-box__inwrap__heading{
		padding: 7vh 0 2vh;
		max-width: 100%;
	}
	.n-right-box__inwrap .n-right-box__inwrap__heading h2{
		font-size: min(2vw,22px);
		letter-spacing: -0.5px;
	}
}

#right_pdca_lylics{
	padding: 10px 5px;
	box-sizing: border-box;
	display: none;
	background-color: rgba(100,100,100,0.1);
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
#right_pdca_lylics p{
	text-align: center;
	line-height: 2;
}

#main__main__s .main__contact{
	width: 94%;
	max-width: 300px;
	margin: 30px auto;
	display: block;
}
#main__main .main__2023 h2 {
    font-size: 25px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: -2px;
    text-align: center;
}
#left__main .main__cwb a,
#main__main__s .main__contact a{
    cursor: pointer;
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    padding-top: 5px;
}
#left__audio,
#left__audio2{
	background-color:white;
	color:black;
	text-align:center;
	width: 94%;
	max-width: 250px;
	border: 1px solid #000;
	margin: auto 2%;
	padding: 10px;
	box-sizing: border-box;
}
#left__audio2{
	margin: 20px auto 30px;
}
.audio__btn__wrap{
	text-align: center;
}

#left__main .main__cwb{
	width: 94%;
    max-width: 300px;
    display: block;
    margin: 5px auto 5px;
}

@media screen and (max-width:767px) {
	#left__main{
		display: none;
	}
}

@media screen and (min-width:950px) {
	.left-box .n-splitbox--l #left__main{
    display: flex;
    vertical-align: middle;
	}

}

#left__main .main__cwb img{
    width: 100%;
    display: block;
    margin: 0 auto;
	text-align: center;
}
#main__main__s .main__contact img{
    width: 100%;
    max-width: 220px;
    margin: 0 auto;
    display: block;
}
#left__main .main__cwb a:hover{
	color: #4d9d33;
}
#main__main__s .main__contact a:hover{
	color: #CF3113;
}
#main__main .main__main__aisatsu{
	max-width: 96%; width: 100%;
	display: block; margin: 50px auto 50px;
}
#main__main .main__main__aisatsu h2{
	text-align: center;
	font-size: 2.1em;
}
@media screen and (min-width:768px){
	#main__main .main__main__aisatsu{
		max-width: 350px;
	}
	#main__main .main__main__aisatsu h2{
		text-align: left;
		font-size: 2.4em;
	}
	#main__main__s{
		display: none !important;
	}
}

#main__main__s{
	width: 100%;
}


/*動き関連*/
/*左側*/
.left-box .n-splitbox--l h2,
.left-box .n-splitbox--l p{
	-webkit-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	opacity: 1;
	animation: fadein-top2 1s ease forwards;
	}
@keyframes fadein-top2 {
  0% {
    opacity: 0;
    transform: translateY(-50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.left-box .n-splitbox--l{
	opacity: 0;
	animation: fadein-top 1.5s ease-out forwards;
	animation-delay: 1s;
}
@media screen and (max-width:767px) {
	.left-box .n-splitbox--l{
		opacity: 0;
		animation: fadein-top 1.5s ease-out forwards;
		animation-delay: 1s;
	}
}
@keyframes fadein-top {
  0% {
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.left-box .n-splitbox--l .kyokuari{
	opacity: 0;
	animation: fadein-top 8.5s ease-out forwards;
	animation-delay: 0.5s;
}
@keyframes fadein-top {
  0% {
    transform: translateY(400px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
/*right_box heading*/
.n-right-box__inwrap .n-right-box__inwrap__heading{
transition: all 0.5s ease;
opacity: 0;
animation: fadein-top3 1.5s ease forwards;
animation-delay: 2.0s;
}
@keyframes fadein-top3 {
  0% {
    transform: translateX(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/*==================================================
ふわっ
===================================*/
/* fadeUp */
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(50px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 .fadeUpTrigger{
    opacity: 0;
}


.footer .s_txt p, .footer .s_txt a{
	font-size: 13px !important;
}

/**/

#main__main__s{
	margin: 20px 0;
}

#main__main__s .main__cwb a{
    cursor: pointer;
    display: block;
    font-size: 16px;
    line-height: 1.4em;
    padding-top: 5px;
}
#main__main__s .main__cwb{
	width: 94%;
    max-width: 300px;
    display: block;
    margin: 5px auto 15px;
}
@media screen and (min-width:768px){
	#main__main__s .main__cwb{
	    margin: 15px auto 25px;
	}
}
#main__main__s .main__cwb img{
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
}
#main__main__s .main__cwb a:hover{
    color: #4d9d33;
}
#main__main__s #left__audio{
    margin: 0 auto 10px;
}



#main__main{
	height: auto;
	width: 100%;
}
@media screen and (min-width:768px){
	#main__main{
		height: auto;
		display: flex;
		width: 100%;
	}
}
@media screen and (min-width:768px){
	.caution__s{
		display: none;
	}
}

#dom_overlay_container{
	display: none !important;
	visibility: hidden;
}
#animation_container{
	height: auto !important;
}

#animation_container #canvas{
	width: 90% !important;
	max-width: 800px !important;				
	height: auto !important;
	margin: auto;
}
@media screen and (max-width:767px){
	.caution__s{margin: 10px auto; font-weight:bold; text-align: center; font-size:16px; width:90%; max-width:400px;}

	#animation_container{
		width: 90% !important;
		max-width: 400px !important;
		height: auto !important;
		border-top: 5px double #F55;
		border-bottom: 5px double #F55;
		padding:10px 0;
	}
	#animation_container #canvas{
		width: 90% !important;
		max-width: 400px !important;				
	}
}
.n-right-box__inwrap{
	height: 100%;
	display: flex;
}

.nenga_caution{
	font-weight:bold; color:black; margin-top:10px; box-sizing: border-box; padding:5px; background-color:#FFBB00;
}
@media screen and (max-width:767px){
	.nenga_caution{
		display: none;
		visibility: hidden;
	}
}