@charset "utf-8";





.cssbr_w500::after  {content:"\A";
                    white-space:pre;}

.cssbr::after  {content:"\A";
                    white-space:pre;}

/* 最後まで解除しない改行 */
.cssbr_sp::after  {content:"\A";
                    white-space:pre;}




a:link {color:#fff;}
a:visited {color:#fff;}
a:hover {color:#ffd700;}


.tcolor_yellow	{color:#ffd700;}



body	{background-color:#000;
    	margin: 0;}
  

	/*  ================================

		Header   z-index/999

 	 ================================ */

      header	{color:#fff;
             		 width:100%;
              		background-color:rgb(0 0 0 / 0.7);
              		position:fixed;
              		top:0;
              		left:0;
              		z-index:999;
              		}

              nav ul.topnav_link	{max-width:800px;
                                    	width:100%;
                                    	height:5rem;
                                    	margin-inline:auto;
                                    	position:relative;
                                    	display:flex;
                                    	align-items:center;
                                    	justify-content:center;
                                    	flex-wrap:nowrap; 
                                    	padding-left:0;
			top:0.5rem;
                                    	}
            
                                    nav ul.topnav_link li {max-width:25%;
                                                          	min-width:8rem;
                                                          	width:100%;
                                                          	font-size:1.1rem;
                                                          	text-align:center;
                                                         	 position:relative;
                                                          	}

                                                          nav ul.topnav_link li::after	{content:"";
                                                                                        	display:inline-block;
                                                                                        	width:1px;
                                                                                        	height:2.6rem;
                                                                                        	border-left:1px solid #fff;
                                                                                        	position:absolute;
                                                                                        	top:0;
                                                                                       		 right:0;
                                                                                        	}

                                                        /*  top メニュー最後の欄　線消し */
                                                        nav ul.topnav_link li:last-of-type::after {border:none;}


                                        span.topnav_smalltext	{color:#ccc;
                                                              		font-size:0.8rem;
                                                              		white-space:pre;
                                                              		position:absolute;
                                                              		top:1.4rem;
                                                              		left:50%; 
                                                              		translate:-50% 0;
                                                              		} 




    nav ul.topnav_link li a 	{display:block;
                            		width:100%;
                            		height:3rem;}

    nav ul.topnav_link li:hover 		{color:yellow;
                                  			text-shadow: 0 0 10px #fff;
				}







@media screen and (min-width:270px) and (max-width:500px) {



	nav ul.topnav_link	{height:3rem;
			margin-top:1rem;
			top:0;}

		nav ul.topnav_link li:nth-of-type(2) {display:none;}

	nav ul.topnav_link li {max-width:23%;
			font-size:1.1rem;
			min-width: initial;}


	span.topnav_smalltext {display:none;}

	nav ul.topnav_link li::after	{height: 2rem;}


}


              



	/*  ================================

		TOPスライダー   z-index/0/5

	   ================================ */

    main	{max-width:100%;
	width:100%;
	overflow:hidden;
          	}


          /*  スライダー領域 */
          div.slide_fixed_wrap 	{max-width:1408px;
			width:100%;
			max-height:792px;
			height:100%;
			background-color:#000;
			margin-inline:auto;
                               		position:relative;
                                		top:5rem;
                               		 z-index:0;  
                               		 }
                      
         	 /* スライダー外枠  */ 
         	 .top_sliderbox 	{max-width:1408px;
			max-height:792px;
			min-height: 270px;
			height:100%;
			position:relative;
			inset: 0;
  			margin: auto;
			aspect-ratio:16/9;
 			}     

			


			/* 　　両方の黒グラデ　  */
 			.top_sliderbox::before	{content:" " ;
						display:inline-block;
						width:100px;
						height:600px;
						 background: linear-gradient(to left, transparent, #000 40%);
						position:absolute;
						top:0;
						left:-50px;
						z-index:20;
						}

			.top_sliderbox::after		{content:" " ;
						display:inline-block;
						width:100px;
						height:600px;
						 background: linear-gradient(to left, #000 40%, transparent);
						position:absolute;
						top:0;
						right:-50px;
						z-index:20;
						}






		img.slideBox	{display: block;
				width:100%;
				height:600px;
                               			aspect-ratio:16/9;
				} 



			.slideBox {height: 600px;
  				overflow: hidden;
  				position: relative;
				}



	/* imgのみ */
	.item1	{width: 100%;
		opacity: 0;
		object-fit: fill;
  		position: absolute;
  		left: 0;
  		top: 0;
 		 -webkit-animation: anime 60s 0s infinite;
  		animation: anime 60s 0s infinite;
		}


		.item1:nth-of-type(2)	{-webkit-animation-delay: 10s;
      					animation-delay: 10s; }

		.item1:nth-of-type(3)	 {-webkit-animation-delay: 20s;
      					animation-delay: 20s;
      					}

		.item1:nth-of-type(4) 	{-webkit-animation-delay: 30s;
      					animation-delay: 30s;
      					}

		.item1:nth-of-type(5) 	{-webkit-animation-delay: 40s;
      					 animation-delay: 40s;
      					}

		.item1:nth-of-type(6) 	{-webkit-animation-delay: 50s;
      					animation-delay: 50s;
      					}


		.item1:nth-of-type(7) 	{-webkit-animation-delay: 60s;
      					 animation-delay: 60s;
      					}



		@keyframes anime {0% 	{opacity: 0;}
    				8% 	{opacity: 1;}
   				17% 	{opacity: 1;}
    				25%	{opacity: 0;
        					transform: scale(1.2) ;
        					 z-index:9;}
   		 		100% 	{ opacity: 0 }
				}





/* ================================

	       タイトルキャッチ

================================= */



                                	
	section.top_titlebox		{max-width: 80%;
    				width: 100%;
    				position: absolute;
    				top: -10rem;
    				left: 21%;
    				z-index: 80;
				}


                                
                                
                          h1  	 {color:#000;
		padding-right:2rem;
                                	font-family: "M PLUS Rounded 1c", sans-serif;
  		font-weight: 600;
 		font-style: normal;
                                	font-size:clamp(1.8rem, -0.266rem + 4.3vw, 3.5rem);
		line-height:150%;
		text-align:right;
		text-shadow:0 0 3px #fff ,
			1px 0 3px #e3e548,
			0 1px 3px #e3e548 ,
			-1px 0 3px #e3e548,
			0 -1px 3px #e3e548;
		text-decoration:underline;
		text-underline-offset:0.8rem;
		background:linear-gradient(to left, rgb(255 255 255/0.7) 0% 70% ,transparent 80% 100%);
                                	}




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

	section.top_titlebox {position: absolute;
    			top: -9rem;
    			left: 27%;
    			}


		h1	{font-size: 1.5rem;
    			line-height: 150%;
    			text-underline-offset: 0.3rem;
   		 	background: linear-gradient(to left, rgb(255 255 255 / 0.6) 0% 70%, transparent 80% 100%);
			}


}/*  w600 ここまで */
@media screen and (max-width:450px){



    section.top_titlebox 	{top: -12rem;
        			left: 27%;}

	h1	{font-size: 1.2rem;
		text-wrap:nowrap;}

}/*  w450ここまで */



 
/* ===========================================================

	        スライダー以下の部分

============================================================ */


hr	{width:100%;
	 visibility:hidden;}


/*  ＴＯＰイメージ以下　全内包div　 */
#nofixed_block 	{/* width:100%;
		padding:0 1.5rem 0; */
                		background-color:#000;
                		position:relative;
		z-index:30;
                		}



div.top_namebox	{max-width:1300px;
		padding:30px 2rem 2rem;
		margin-inline:auto;
		display:flex;
		justify-content:center;
		align-items:center;
		flex-wrap:nowrap;
		position:relative;
		}

	
	div.top_namebox img	{max-width:20%;
				width:100%;
				min-width:200px;
				}


	div.top_namebox p	{color:#fff;
			max-width:70%;
			width:100%;   
			padding-right:2rem;
			font-size:1.2rem;
			text-align:right;
			box-sizing:border-box;
			}

		div.top_namebox p a		{text-decoration:underline;
					text-underline-offset:5px;}

	

/*   作者紹介　 */
section.owner_infoarea  	{width:100%;
			padding:0 0 8rem;
			background-color:#111;
			position:relative;
			}

	div.owner_infobox	{max-width:1300px;
			width:100%;
			margin-inline:auto;
			display:flex;
			justify-content:center;
			align-items:center;
			flex-wrap:nowrap;
			gap:3rem;
			position:relative;
			}


		div.owner_infobox img	{display:block;
					width:120px;
					height:120px;
					border-radius:100vh;
					}

	div.owner_infobox dl.owner_infotext	{color:#fff;
					max-width:68%;
					width:100%;
					padding:1.4rem 2rem;
					border:3px double #aaa;
					border-radius:10px 10px;
					}


	div.owner_infobox dl.owner_infotext dt	{display:flex;
					align-items:flex-end;
					margin-bottom:1rem;
					}
					
	div.owner_infobox dl.owner_infotext h2	{color:#ffdc00;
					width:fit-content;
					font-size:1.8rem;
					letter-spacing:2px;
					margin-right:2rem;
					border-bottom:3px solid #eee;
					position:relative;
					}




		div.owner_infobox dl.owner_infotext dd	{color:#fff;
						font-size:1rem;
						line-height:2rem;
						letter-spacing:1px;
						}


			div.owner_infobox dl.owner_infotext dt a	{display:block;
								width:fit-content;
								height:1.5rem;
								border:1px solid #fff;
								border-radius:10px 10px;
								padding:2px;
								box-sizing:border-box;
								}

				div.owner_infobox dl.owner_infotext dt img.xicon	{width:1.5rem;
									height:1.5rem;
									display:inline-block;
									position:relative;
									}

				div.owner_infobox dl.owner_infotext dt a::after 	{content:"@hibikakuhito";
									display:inline-block;
									width:fit-content;
									line-height:1rem;
									color:#ddd;
									font-size:0.8rem;
									position:relative;
									top:-0.5rem;
									
								
									}



/*  ===================================

                                         製作者紹介              w768 

   ===================================    */

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


	/*  冒頭文　フレックス解除  */
	div.top_namebox	{padding:45px 1rem 2rem;
			margin-inline:auto;
			display:block;
			}

		div.top_namebox img	{max-width:34%;
					width:100%;
					position:absolute;
					top:-3rem;
					left:-0.5rem;
					}
	
		div.top_namebox p	{max-width:100%;
				width:100%;   
				font-size:1.1rem;
				margin-top:5.5rem;
				}



	/*   作者紹介　 */
	section.owner_infoarea  	{padding:0 0 5rem;}

	div.owner_infobox	{max-width:85%;
			width:100%;
			}

		div.owner_infobox img	{position:absolute;
					top:1.5rem;
					left:2rem;
					}


		div.owner_infobox dl.owner_infotext	{max-width:100%;
						width:100%;
						padding:1.4rem 1.5rem;
						}


		div.owner_infobox dl.owner_infotext dt	{position:relative;
						left:180px;
						margin:2rem 0 4rem;
						}
					
		div.owner_infobox dl.owner_infotext h2	{letter-spacing:5px;
						margin-right:2rem;
						}

		div.owner_infobox dl.owner_infotext dt a	{height:1.6rem;
							padding:5px;
							}

		div.owner_infobox dl.owner_infotext dt img.xicon	{width:1.2em;
							height:1.2rem;
							top: 0;
							left: 0;
							}	





}/*  --------w768 ここまで-------  */
/*  =========================================

                                         w500
   ========================================    */

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

	.cssbr_w500::after  {content:" ";
                    		white-space:initial;}


	/*  経歴　タイトル部分  */
	div.owner_infobox dl.owner_infotext dt {display: block;
					margin: 0 0 3rem;
					left: 50%;}

	div.owner_infobox dl.owner_infotext h2	{margin-bottom: 0.8rem;}

		div.owner_infobox img	{width: 100px;
					height: 100px;}




}/*  --------w500 ここまで-------  */
/*  =========================================

                                         w450

   ========================================    */

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

	#nofixed_block {padding:0;}

	    div.top_namebox {padding: 0;
			padding-top: 3rem;
        			display: block;
        			justify-content: end;
      			}


		div.top_namebox img	{min-width:20%;
					margin-left: 1.5rem;
					margin-top: -1rem;
					}


		div.top_namebox p	{max-width: 80%;
       				 font-size: 1rem;
				padding: 2rem 0 1rem;
       				margin: 0 auto;
        				position: relative;
        				right: 0;
   				 }







}/* -----w450 おわり  ------*/
/*  =========================================

                                         w400

   ========================================    */
	
	@media screen and (max-width:400px){


    	div.top_namebox img {margin-top: 0;}

	div.top_namebox {margin-top: 1rem;}







}/* -----w400 おわり  ------*/



/*  =========================================

                                         w350

   ========================================    */

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

	div.owner_infobox dl.owner_infotext dd {font-size: 1rem;}



}






/* ===========================================================

	ギャラリー　スクロールで画面内へ

=========================================================== */

	.garallybox_area	{width:100%;
			background-color:#fff;
			padding-bottom:3rem;
			position:relative;}

		.garallybox_area::before 	{content: "▲▲▲";
					color:#fff;
					font-size:3rem;
					position:absolute;
					top:-3.2rem;
					left:78%;
					z-index:40;
					}	

	.garallybox_area hgroup	{width:fit-content;
				padding-top:4rem;
				position:relative;
				left:15%;
				}

		.garallybox_area hgroup h2	{font-size: 4.2em;
					 line-height: 2.8rem;
					font-family: "Sora", sans-serif;
  					font-optical-sizing: auto;
  					font-weight: 300;
  					font-style: normal;
					letter-spacing:-2px;
					border-bottom: 9px solid #ffcc00;
					}
		.garallybox_area hgroup p	{font-size:1.2rem;
					color:#ffcc00;
					padding-top:0.2rem;
					margin-left:7.5rem;
					}

		

		p.gall_info		{color:#666;
				max-width:100%;
				width:100%;
				text-align:center;
				font-size:0.8rem;
				padding:1.5rem 0;
				position:relative;
				}





	/* 　イラスト部分囲み　 */
	#wrap 	{position: relative;
		overflow: hidden;
		width: 100vw;
		margin: 0 auto;
		}


		.slideConts 	{max-width: 970px;
				width:100%;
				height: 400px;
				margin: 20px auto 200px;
				-webkit-transition: .5s;
				-o-transition: .5s;
				transition: .5s;
				}

		.slideContsL	{background-color:transparent;								transform: translate(-850px, 0);
				}

		.slideContsR	{background-color: transparent;
  				transform: translate(850px, 0);
				}

		.slideContsL.show {transform: translate(-50px, 0) !important;}

		.slideContsR.show {transform: translate(50px, 0) !important;}


	div.right_swipebox,
	div.left_swipebox 	{padding-top:400px;
			box-sizing:border-box;}

	div.garally_list1,
	div.garally_list2,
	div.garally_list3	{background:url("../imgs/garally/gal01_bgimage.png") no-repeat;
			background-size:contein;
			background-position: 90% 20%;
			}

		div.garally_list2	{background:url("../imgs/garally/gal02_bgimage.png") no-repeat;
				background-position: 20% 20%;
    				margin-left: 40px;}

		div.garally_list3	{background:url("../imgs/garally/gal03_bgimage.png") no-repeat;
				background-position: 101% 18%;}




	div.right_swipebox>h2,
	div.left_swipebox>h2	{color: #000;
				 width: fit-content;
				font-family: "M PLUS 1 Code", monospace;
 				 font-optical-sizing: auto;
 				 font-style: normal;
 				 font-size: 2rem;
				 letter-spacing: -1px;
				 line-height: 2rem;
				 padding: 0.5rem 1rem;
				 position: relative;
				 border-radius: 10px 10px 0 0;
				 background-color: #ffd700;
				 }

		div.garally_list1>h2	{background-color:#ffc0cb;}

		div.left_swipebox>h2	{background-color:#40e0d0;}




	div.right_swipebox>ul,
	div.left_swipebox>ul	{width:100%;
				 padding: 1rem 0 1rem 1rem;
				border-top:5px solid #000;
				background-color:#ffd700;
				display:flex;
				justify-content:flex-start;
				align-items:center;
				gap:0.8rem;
				flex-wrap: wrap;
				}

		div.garally_list1>ul	{background-color:#ffc0cb;}

		div.left_swipebox>ul	{background-color:#40e0d0;}



	div.right_swipebox>ul li,
	div.left_swipebox>ul li	{display:inline-block;
				width:80px;
				height:40px;
				overflow:hidden;
				border:3px solid #fff;
				}



		div.right_swipebox>ul li:hover,
		div.left_swipebox>ul li:hover	{opacity:0.8;
					border:3px solid #ffa500;
					transition: 0.5s;
					}

			div.left_swipebox>ul li:hover	{border:3px solid #00ced1;}



	div.garallybox_bottom_infotext	{color:#666;
					width:fit-content;
					padding-top:3rem;
					margin-inline:auto;
    					position: relative;
					}


		div.garallybox_bottom_infotext p {padding:2rem 0;}

		div.garallybox_bottom_infotext p:before {content:"※";}








/*  =========================================

                                         w600

   ========================================    */


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

		p.gall_info		{width:80%;
				font-size:0.9rem;
				text-align:left;
				margin-inline:auto;}



		.slideConts 	{max-width: 100%;
				width:100%;
				height: 250px;
				}


			.slideConts:nth-of-type(2) {height: 260px;}


		.slideContsL	{transform: translate(0, 0);}				
		.slideContsR	{transform: translate(0, 0);}
				


	#wrap {width: 100%;}

	div.right_swipebox, div.left_swipebox {padding-top: 205px;}


		.slideContsL.show {transform: translate(0, 0) !important;}

		.slideContsR.show {transform: translate(0, 0) !important;}



	div.garally_list1, div.garally_list2, div.garally_list3	{background-size: contain;
    						background-position: 0 13%;
						}

		div.garally_list2	{background-position: 141% 10%;
				margin-left: 0;}
				

			div.garally_list3 {background-position: 0 5%;}



	div.right_swipebox>h2, div.left_swipebox>h2	{font-size:clamp(1.2rem, -0.2rem + 5.33vw, 1.8rem);
						font-weight:bold;
						line-height:1rem;
						background-color:transparent;
						text-shadow:0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;
						}


		 div.left_swipebox>h2	{width:90%;
					text-align:right;}

							
	div.right_swipebox>ul li, div.left_swipebox>ul li	{width:60px;
    						height: 43px;
						background: #fff;}


	div.right_swipebox>ul, div.left_swipebox>ul	{width: initial;
						padding: 1.5rem;
						gap:0.5rem;}



}/* -----w600 おわり  ------*/

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

	w430

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

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



	div.garally_list1	{background-size: 112%;
			background-position: 0% 22%;
			}


		div.garally_list2 	{background-size: 112%;
				background-position: 0% 22%;
				margin-top:200px;}

		    div.garally_list3	{background-size: 121%;
      				 background-position: -35px 24px;
    				}
    

div.right_swipebox>ul, div.left_swipebox>ul	{width: initial;
					padding: 1rem;
					display: block; }




	div.garallybox_bottom_infotext p	{font-size:0.8rem;
					padding: 2rem 0 0; }


}   /* -----w450 おわり  ------*/



/*  =========================================

                                         w350

   ========================================    */

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

	div.right_swipebox>ul li, div.left_swipebox>ul li {width: 80px;}

   	 div.garallybox_bottom_infotext p {padding: 5rem 0 0;}


}





/*  ===================================

                                     3ポイント　領域　

   ===================================    */


	h2.nopreview_item	{display:none;}


	section.point_area	{width:100%;
			border-top:50px solid #fff;
			background: linear-gradient(180deg, #fff 0% 25%, #000 25% 100%);
			margin-bottom:3rem;
			}





	section.point_area dl	{max-width:1024px;
				width:100%;
				margin-inline:auto;
				display:flex;
				justify-content:center;
				align-items:flex-start;
				gap:1rem;
				}


		section.point_area dl div.point_1,
		section.point_area dl div.point_2,
		section.point_area dl div.point_3	{color:#fff;
						max-width:12rem;
						min-height:11rem;
						width:100%;
						font-size:0.9rem;
						padding:1rem 1rem 1.5rem;
						border:6px double #fff;
						border-radius:10px 10px;
						background-color:#000;
						}


			section.point_area dt	{color:#ffd700;
						font-size:1.4rem;
						border-bottom:1px solid #fff;
						margin-bottom:1rem;
						}


				section.point_area dt:before	{content:"●";
							padding-right:0.2rem;}



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

	w650

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

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


	section.point_area	{background: linear-gradient(180deg, #fff 0% 15%, #000 15% 100%);
			width:100%;	
			}
			
			



	section.point_area dl	{max-width:90%;
				display:block;
				}

		section.point_area dl div.point_1,
		section.point_area dl div.point_2,
		section.point_area dl div.point_3	{min-height:auto;
						max-width:90%;
						font-size:1rem;
						margin-bottom:1.2rem;
						}


}


/* ===========================================================

	料金案内

=========================================================== */


	section.menu_listarea	{width:100%;
				position:relative;
				padding-top:4rem;
				}

	
		div.menu_mainbox	{color:#fff;
				max-width:1024px;
				width:100%;
				margin:0 auto;
				}

   
		div.menu_mainbox hgroup	{color:#40e0d0;
					text-align: center;
					margin-bottom:2rem;
					letter-spacing:1px;
					}

		div.menu_mainbox hgroup h2	{color:#fff;
					font-size: 1.4rem;
    					text-decoration: underline 3px;
    					text-decoration-style: dotted;
    					text-underline-offset: 8px;
					margin-bottom:2rem;
					}

	table.menu_list	{max-width:1000px;
			width:95%;
			border:1px solid #aaa;
			background-color:#ddd;
			margin-inline: auto;
			}



		table.menu_list th	{font-size:1.1rem;
				width:30%;
				text-align:center;
				line-height:2rem;
				background-color:#aaa;
				}

		table.menu_list td	{color:#333;
				text-indent:1rem;
				line-height:3rem;
				border-top:1px dashed  #777;
				}

 			td.text_center {text-align:center;}


			table.menu_list caption	{display:none;}


	div.manu_list_bottom_info ul	{margin-top:0.5rem;}
	div.manu_list_bottom_info ul li {color:#ccc;
				font-size:0.9rem;
				list-style-type:none;
				}


	div.skilcite_box	{width:100%;
			margin-top:2rem;
			letter-spacing:1px;
			}

		div.skilcite_box p	{padding:1rem;
				font-size:1.1rem;
				border-top:1px solid #aaa;}	

	
	div.skilcite_box ul 	{margin:0.8rem 1rem 6rem;
			display:flex;
			justify-content:flex-end;
			gap:1rem;}

	div.skilcite_box ul li {max-width:10rem;width:100%;}

		div.skilcite_box ul li a	{text-align:center;
					padding:0.5rem;
					border:1px solid #fff;
					border-radius:5px 5px;
					background-color:#444;
					display:block;
					}

			div.skilcite_box ul li a:hover	{background-color:#555;}



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

	
div.skilcite_box ul li a	{text-wrap:nowrap;
			width:fit-content;
			line-height:50px;
			}


	div.skilcite_box ul 	{width:100%;
			display:block;
			margin:0;
			margin-bottom:2rem;
			text-align:center;}

	div.skilcite_box ul li { max-width: 90%;
   			 width: 100%;
			}
	
	div.skilcite_box ul li a	{width:100%;
				line-height:2rem;
				margin-bottom:1rem;
				margin-inline: auto;
				}



}








/* =====================================================

	フォーム前

===================================================== */


section.form_infoarea	{width:100%;
			padding-top:5rem;
			background-color:#fff;}



		.form_infoarea hgroup	{width:fit-content;
					margin-inline:auto;
					margin-bottom:3rem;}

		.form_infoarea hgroup h2	{
					font-size: 3em;
					 line-height: 2.2rem;
					font-family: "Sora", sans-serif;
  					font-optical-sizing: auto;
  					font-weight: 300;
  					font-style: normal;
					letter-spacing:-2px;
					border-bottom: 9px solid #ffcc00;
					}

			.form_infoarea p	{font-size:1.2rem;
					color:#ffcc00;
					}






	div.mainform table 	{margin-inline: auto;
			max-width: 800px;
    			width: 90%;
			}



	div.mainform table div	{margin:0 0 1.5rem 0;}




	div.mainform table div input	{max-width:800px;
				width:100%;
				line-height:2.5rem;
				border:1px solid #aaa;
				border-radius:6px 6px;
				}

	div.mainform p	{color:#555;
			font-size:1rem;
			font-weight:bold;
			letter-spacing:1px;
			}


	div.mainform span	{color:#cc5555;
			font-size:0.7rem;
			font-weight:bold;
			padding:0 0.2rem;
			border-radius:6px 6px;
			background:rgb(255 200 200/0.8);}



	 div.mainform span.c_glay	{color:#666;
				background:rgb(220 220 220/0.9);}




	div.form_radiobox_wrap	{border-bottom:1px solid #aaa;}


		div.form_radiobox_wrap p	{margin-bottom:1rem;}

		div.form_radiobox_wrap div	{display:flex;
					gap:3rem;
					}


	textarea#free4	{max-width:800px;
			width:100%;
			min-height:200px;
			border-radius:6px 6px;
			}

	div.form_submit_box	{text-align:center;}

	div.form_submit_box	button	{color:#333;
				max-width:800px;
				width:100%;
				font-size:1rem;
				font-weight:bold;
				line-height:3rem;
				text-align:center;
				border:none;
				border-radius:10px 10px;
				background-color:#ffcc00;}

	div.form_submit_box	button:hover	{opacity:0.8;}






	div.formcopy	{max-width:800px;
			width:100%;
			margin:0 auto;
			padding:1rem 0 5rem;
			box-sizing:border-box;}

	div.formcopy>a	{color:#aaa;
			font-size:0.8rem;
			}







/* =====================================================

	注意文　モーダル

===================================================== */


	div.orderinfo_box a.modal-open-button {color:#000;}
	div.orderinfo_box a.modal-open-button:hover {color:red;}



	.modal-open-button {color: #000;
			font-size:1.1rem;
			font-weight:bold;
			text-decoration:underline;
			text-underline-offset:5px;
			padding:1rem 2rem;
  			cursor: pointer;
  			background-color: #ffcc00;
 			 border: none;
  			border-radius: 5px 5px 0 0; 
			display:inline-block;
			}


		.modal	{position: fixed;
  			top: 0;
  			left: 0;
  			z-index: 1;
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			width: 100%;
  			height: 100%;
  			background-color: rgb(0 0 0 / 60%);
  			opacity: 0;
  			transition: opacity 0.5s, scale 0s 0.5s;
  			scale: 0;
			
			}

.modal:target	{margin-top: 3rem;
		opacity: 1;
  		transition: opacity 0.5s;
		scale: 1;
		}

	.close	{position: absolute;
 		 top: 30px;
  		right: 30px;
  		font-size: 2rem;
		line-height:2rem;
  		color: #fff;
		padding:1rem;
  		text-decoration: none;
		background-color:red;
		border-radius:5px 5px;
  		cursor: pointer;
  		transform: translate(50%, -50%);
		}

			.modal-wrapper	{position: relative;
  					width: 90%;
  					max-width: 600px;
  					max-height: 70%;
  					padding: 50px;
  					margin: auto;
  					overflow: hidden scroll ;
  					background-color: #FEFEFE;
  					border-radius: 5px;
  					transition: scale 0.5s;
  					scale: 0;
					}

				.modal:target .modal-wrapper {transition: scale 0.5s;
 							scale: 1;}

				.modal-content h3 {margin: 2rem 0 0;
  						font-size: 1.4rem;
  						line-height: 2em;
  						letter-spacing: -1px;
						}


					.modal-content h3:first-of-type	{padding-left:1rem;
									margin-bottom:1rem;
									border:1px solid #000;}



				.modal-content p>a {color:red;
						text-decoration:underline;}

				.modal-content p		{margin:1rem 0;
							font-size:0.9rem;}

				.modal-content p:last-of-type		{font-size:0.9rem;
								margin-top:2rem;}











/*  =====================================================

	フッター

===================================================== */


	footer	{width:100%;
		padding:3rem 0;
		background-color:#000;
		position:relative;
		z-index:80;
		}

	footer::after	{content:"無料サービス利用により、これ以下に広告が表示されます";
			color:#000;
			width:100%;
			height:500px;
			background-color:#000;
			position:relative;
			display:block;
			z-index:79;
			}



		footer p.copylight	{color:#999;
				line-height:2rem;
				font-size:0.9rem;
				text-align:center;}




/* フォーム送信ボタン前注意文 */
div.mainform span.cssbr_w500	{color:#ff6666;
				font-size:0.8rem;
				font-weight:0;
    				padding: 0;
   		 		border-radius: none;
    				background:none;
				}
	
div.mainform  p.submit_infotext	{width:90vw;
				color:#ff6666;
				font-size:0.8rem;
				font-weight:0;
				text-align:center;
				margin: 0 auto;
				margin-bottom:1rem;
				}




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

	w500

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

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

	div.mainform table div.flex_w500outo	{display:block;}

	div.mainform table div.flex_w500outo>label input  {width: initial;margin-left: 1rem;}
						





}
/* -------------------------------------------------------------- 

	w768

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

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

.cssbr::after  {content:" ";
                    white-space: normal;}

.cssbr_w768::after  {content:"\A";
                   	 white-space:pre;}

	section.menu_listarea,	
	div.skilcite_box		{width:95%;
				margin:0 auto;}


	div.menu_mainbox hgroup p	{text-align:left;
				width: 85%;
        				margin: 0 auto;
				}

		table.menu_list td	{line-height:1.5rem;}



	div.manu_list_bottom_info ul {margin: 0.5rem 0 2rem;}




}/* -----w768 おわり  ------*/