@charset utf-8;



			/* ●の不透明度 */
			:root 	{--swiper-pagination-bullet-inactive-opacity: .7;}

			.main-visual	{position: relative;
					overflow: hidden;}
	
	/*  ●ボタン位置 */	
	.swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction 
				{bottom: 0px;z-index:997;}




	/*  開始停止ボタン位置　ヨコ
			.remocon	{position: absolute;
					right:4vw;
					bottom:1vh;
					z-index: 996;
					} */	

		.remocon	{position: relative;　/*  ★停止開始ボタンを枠外移動させた指定 */
    				right: 0;
    				bottom: 1rem;
    				z-index: 1000;
				}



	/*  開始停止ボタン位置  タテ 	
			.remocon .buttons	{display: flex;
						list-style: none;
						padding: 0;
						margin: 1rem 0 1rem;
						letter-spacing: -0.4em;
						position: relative;
    						top: 0.8rem;
						} */


			.remocon .buttons 	{display: flex;　/*  ★停止開始ボタンを枠外移動させた指定 */
    						list-style: none;
    						padding: 0;
    						margin: 0;
    						letter-spacing: -0.4em;
    						position: absolute;
    						top: -4rem;
    						right: 4%;
						}




	/*  開始停止ボタン体裁  	
			.remocon .buttons button	{color:#000;
							letter-spacing: normal;
							display: flex;
							flex-wrap: wrap;
							align-items: center;
							justify-content: center;
							cursor: pointer;
							line-height:1.2rem;
							width: 3rem;
							height: 1.2rem;
							border-radius: 5px;
							box-shadow:1px 1px 3px #3F360A;
							margin: 0 0.35em;
							caret-color:#fff; 
							-webkit-user-select: none;
							-moz-user-select: none;
							-ms-user-select: none;
							user-select: none;
							}*/


			.remocon .buttons button	{color: #000;
							width:fit-content;
							font-size: 1.5rem;
							margin:1rem 0.5rem;
    							padding: 1rem 0.5rem;
    							letter-spacing: normal;    							
    							display: flex;
    							flex-direction: column;
    							flex-wrap: wrap;
    							align-items: center;
    							justify-content: center;
    							border: none;
    							border-radius: 5px;
    							caret-color: #fff;
    							-webkit-user-select: none;
    							-moz-user-select: none;
    							-ms-user-select: none;
    							user-select: none;
    							box-shadow: 1px 1px 3px #3F360A;
    							cursor: pointer; 
							}





			.remocon .buttons button	{background-color:#fff;
							transition: .3s;
    							font-weight: bold;	
   							line-height: 0.5rem;
							}

			.remocon .buttons button.current	{background-color:#000;
								color: #fff;
								font-weight:bold;
    								width: fit-content;  	
    								font-size: 1.5rem;
								}	
								/* オン状態 */

						.remocon .buttons .btnSwiperPlay	{width: fit-content;	
    											font-size: 1.5rem;
    											font-weight: bold;	
    											padding: 1rem;	
											} 
			
			

/* ● 大きさと色 */
.main-visual .swiper-pagination .swiper-pagination-bullet 	{width:15px;
								height:15px;
								background-color:#fdd100;
								position:relative;
								bottom:10px;
    								border: 1px solid #fff; 
								}

.main-visual .swiper-pagination .swiper-pagination-bullet-active {background:#000;}




div.diy_call_allbox	{width:100%;	
			background-color:#FDD100;
			position:relative;
			max-width: 80%; 
  			margin: 0 auto;
			}




/* 表示サイズ */
ul.swiper-wrapper 	{max-width:68vw;
			max-height:686px;
			width:100%;
			margin:0 auto;
			aspect-ratio:16/9;
			}



li.swiper-slide img	{max-height:686px;}







/* 画像上の左右フィルタ　●より下 */
.main-visual .swiper-slide::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    opacity:1;
    background:rgba(252,215,37,1);
    }





/* ---------　★メディアクエリを使用せず可変とボタンサイズ変更で対応-------------------- */
　


					
	/*  開始停止ボタン位置　ヨコ */	
			div .remocon	{position:absolute;
					right:4vw;
					bottom:1vh;
					z-index: 996;
					}

	





/* 表示サイズ */
ul.swiper-wrapper 	{max-width:75vw;}
ul.swiper-wrapper li.swiper-slide {max-width:75vw;}


/* ボタン●のサイズ */
.main-visual .swiper-pagination .swiper-pagination-bullet 	{width:clamp(8px,1vw,12px);
								height:clamp(8px,1vw,12px);
								bottom:5px;
								}










/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W768px以下 対応

    ▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲ */

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

	

/* トップ画像の変更 */

	div.diytitle_imgbox	{height: 100%;
    				top: 41%;}


	.remocon	{position: relative;
    			bottom: revert;
    			background-color: #aaa;
   			z-index: 996;
			}

	element.style	{transition-duration: 0ms;
    			transition-delay: 0ms;
    			transform: none;
			}

	div#slider_bg_area	{max-width: 100%;
    				width: 100%;
				background-color:#FDD100;
    				position: relative;
				}




/* スライド画像 */

	div#slider_bg_area {background-color:transparent;}

	div.diy_call_allbox {max-width: 100%;}

	ul.swiper-wrapper {max-width: 100vw;}

		ul.swiper-wrapper li.swiper-slide {max-width: 100vw;}



.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {bottom:50px;}


/* スタートストップボタン */


	.remocon div.buttons	{max-width: 90%;
        			width: 100%;
 				margin: 0;
        			letter-spacing: revert;
        			list-style: none;
        			position: relative;
				top: 0rem;
        			left: 50%;
				translate: -50% 0;
        			display: flex;
        			justify-content: center;
   				}

		.remocon div.buttons button	{color: #888;
        					max-width: 50%;
        					width: 100%;
        					font-size:1.8rem;
        					border-radius: 3px 3px;
        					box-shadow: none;
						box-sizing: border-box;
    						}


		.remocon div.buttons button.current	{color: #FF4040;
        						max-width: 50%;
        						width: 100%;
        						font-size: 1.8rem;
        						font-weight: bold;
        						border-radius: 3px 3px;
        						background-color: #fff;
							box-sizing:border-box;
    							}


			.remocon .buttons .btnSwiperPlay	{max-width: 50%;
    								width: 100%;
    								font-size: 1.8rem;
    								font-weight: bold;
    								line-height: 1.2rem;
    								border-radius: 3px 3px;
    								box-sizing:border-box;
								}

	.remocon div.buttons button.btnSwiperStop,
	.remocon div.buttons button.btnSwiperPlay	{position:relative;}


		/*   スタートストップボタン　装飾	 */	
		.remocon div.buttons button.btnSwiperPlay::after	{content:"\025b6";
									font-size:1.5rem;
									position:absolute;
									right:20%;
									}

		.remocon div.buttons button.btnSwiperStop::after	{content:"\025a0";
									font-size:1.5rem;
									position:absolute;
									right:20%;
									}


		/*   スタートストップボタン　上記装飾の上書き	 */	
			.remocon div.buttons button.btnSwiperPlay::after	{content:"";
										display:inline-block;
										width:0.6rem;
										height:0.6rem;
										border-top:1px solid #888;
										border-left:1px solid #888;
										transform:rotate(-225deg);
										font-size:initial;
										}


			.remocon div.buttons button.btnSwiperStop::after	{content:"";
										display:inline-block;
										width:0.8rem;
										height:0.8rem;
										font-size:initial;
										border:1px solid #888;
										}

}









/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W480px以下

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

.swiper-horizontal>.swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {display:none;}


}




/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W414px以下

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

	ul.swiper-wrapper {width:800px;}


}



/* ▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼

				W380px以下

▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲  */


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

	/* スライドスイッチの文字サイズ */
	.remocon .buttons .btnSwiperPlay {font-size: 1.5rem;}

	.remocon div.buttons button {font-size: 1.5rem;}

	.remocon div.buttons button.current {font-size: 1.5rem;}

    .remocon div.buttons button.btnSwiperPlay::after {font-size: 1rem;}
    .remocon div.buttons button.btnSwiperStop::after {font-size: 1rem;}
 







}