@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:#eff7ff;
    	margin: 0;}


    main	{max-width:55%;
	width:100%;
	margin-inline:auto;
	background-color:#67b5b7;
	overflow:hidden;
	box-shadow:2px 2px 5px #aaa;
          	}

  

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

		Header   z-index/999

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

      header	{color:#fff;
		max-width:55%;
             		width:100%;
		margin-inline:auto;
              		background-color:#006a6c;
		border-top:0.5rem solid #006a6c;
              		}

              nav ul.topnav_link	{width:100%;
			/*padding-top:0.5rem;*/
                                    	margin-inline:auto;
                                    	position:relative;
                                    	display:flex;
                                    	justify-content:center;
                                    	flex-wrap:nowrap; 
                                    	}
            
                                    nav ul.topnav_link li {max-width:fit-content;
                                                          	width:100%;
                                                          	font-size:1rem;
                                                          	text-align:center;
                                                         	 position:relative;
				margin:0 1rem;
                                                          	}

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

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


                                        span.topnav_smalltext	{color:#ccc;
                                                              		font-size:0.5rem;
                                                              		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;
				}








              



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

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

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





         	 /* スライダー外枠  */ 
         	 .top_sliderbox 	{max-width:100%;
			height:100%;
			position:relative;
			inset: 0;
  			margin: auto;
			aspect-ratio:16/9;
 			}     


         	 /* PNG */ 
		img.name_pngimage		{display:block;
					width:18%;
					height:auto;
					position:absolute;
					top:25vh;
					left:55%;
					z-index:900;
					}



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


		#about_garo_space {padding-top:4rem;}




         	 /* 自分アイコン  */ 
		img.owner_image	{display:block;
				border-radius:100vh;
				margin:0 auto 1rem;
				}



			



	/* 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		{width: 85%;
				margin:2rem auto 6rem;
				}

	span.section_name_small	{font-size:0.8rem;
				padding-left:0.3rem;
				font-weight:normal;
				}


		
		hgroup.h1_xicon_space	{position:relative;}	


                          h1  	{font-size: 2em;
    		font-family: "Sora", sans-serif;
    		font-optical-sizing: auto;
    		font-weight: 700;
    		font-style: normal;
    		border-bottom: 6px solid #ffcc00;
		float:left;
		}





	a.pixivicon	{display:inline-block;
			width:1.4rem;
			height:1.4rem;
			font-size:1.4rem;
			text-align:center;
			line-height:1.4rem;
			background-color:#4169e1;
			border-radius:5px 5px;
			}

	div.snsiconset img.xicon	{display:inline-block;
				width:1.2rem;
				height:1.2rem;
				border:1px solid #000;
				}



		
		hgroup.h1_xicon_space div.snsiconset	{display:flex;
						align-items:center;
						gap:0.5rem;
						float:right;}


			br.clear_floa {clear:both;}


	div.snsiconset a:hover {color:#fff;}
					
	








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

	        スライダー以下の部分

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



/*  ＴＯＰイメージ以下　全内包div　 */
#nofixed_block 	{
                		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;}

	

/*   作者紹介　 */


	dl.owner_infotext	{padding-top:3rem;}






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

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

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

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

	.garallybox_area>div	{width:85%;
				margin:0 auto;background-color:#fff;}



		.garallybox_area::before 	{content: "▲▲▲";
					color:#fff;
					font-size:3rem;
					position:absolute;
					top:-3.2rem;
					right:30px;
					}	

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

		.garallybox_area hgroup h2	 {font-size: 2em;
					line-height: 1.2rem;
					font-family: "Sora", sans-serif;
					font-optical-sizing: auto;
					font-weight: 500;
					font-style: normal;
					border-bottom: 6px solid #ffcc00;
					}

		.garallybox_area hgroup p	{font-size:1.2rem;
					color:#ffcc00;
					padding-top:0.2rem;
					margin-left:7.5rem;
					}

		

		p.gall_info		{color:#444;
				font-size:0.9rem;
				padding-top:1rem;
				margin-bottom:1.5rem;
				position:relative;
				}





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


	div.swipebox_ill>h3	{color:#ffa500;
			font-size:1rem;
			font-weight:bold;
			margin-top:1rem; 
			
			}

	

	div.swipebox_ill>ul,
	div.swipebox_ill>ul	{padding: 1rem 0 1rem 1rem;
			background-color:#ffd700;
			display:flex;
			justify-content:flex-start;
			align-items:center;
			gap:1rem;
			flex-wrap: wrap;
			}





	div.swipebox_ill>ul li,
	div.lswipebox_ill>ul li	{display:inline-block;
				height:40px;
				overflow:hidden;box-sizing:border-box;
				}





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



		div.garallybox_bottom_infotext p {text-align:center;}







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

                                     3ポイント　領域　

   ===================================    */
		
	section.point_area dl	{margin-block-start:0;
    				margin-block-end: 0;
				position:relative;
				left:-1rem;}

	h2.nopreview_item	{display:none;}


	section.point_area	{width:100%;
			padding:4rem 0 ;
			background-color:#000;
			position:relative;
			 }



			section.point_area::after	{content:"Point";
						color:#67b5b7;
						font-family: "Sora", sans-serif;
						font-size:4.5rem;
						font-weight:bold;
						letter-spacing:-2px;
						position:absolute;
						top:-2.8rem;
						left:70%;
						}



	section.point_area>div 	{width:85%;
				margin-inline:auto;
				}




		section.point_area dl div.point_1,
		section.point_area dl div.point_2,
		section.point_area dl div.point_3	{color:#fff;
						width:100%;
						font-size:0.9rem;
						padding:1rem;
						margin-bottom:1.5rem;
						background-color:#000;
						}


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


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





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

	Ofar　オファーエリア

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


	section.offer_area	{width:100%;
			padding:5rem 0;
			position:relative;
			}

	section.offer_area div	{width:85%;
				margin:0 auto;
				}


 	section.offer_area div hgroup h2	{width:fit-content;
					font-size: 2em;
    					line-height: 1.2rem;
    					font-family: "Sora", sans-serif;
    					font-optical-sizing: auto;
    					font-weight: 500;
    					font-style: normal;
    					border-bottom: 6px solid #ffcc00;
					}

 			section.offer_area div hgroup h2+p  {padding-top:1rem;}



	 section.offer_area div div.offer_infobox		{width:100%;
						padding-top:2rem;
						margin:0;}

 	section.offer_area div h3	{color:#fff;
				width:fit-content;
				font-size:1.1rem;
				padding:0 1.5rem;
				margin:1rem 0 0.5rem;
				line-height:1.5rem;
				border:2px solid #fff;
				border-radius:100vh;
				}


	 section.offer_area div div.offer_infobox	ul:nth-of-type(1)	{list-style-position: inside;
							list-style-type:disc;}




	/* スキルサイト */

	 section.offer_area div div.offer_infobox	ul:nth-of-type(2)	{margin-top:1rem;
							display:flex;
							gap:2rem;
							justify-content:flex-end;
							position:relative;
							}

	 section.offer_area div div.offer_infobox	ul:nth-of-type(2) li {font-size:1.1rem;
							font-weight:bold;
							border-bottom:2px dotted #fff;}
	
	



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

	フォーム前

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


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


	section.form_infoarea>div	{width:85%;
				margin-inline:auto;}



		.form_infoarea hgroup	{width:fit-content;}

		.form_infoarea hgroup h2	{width:fit-content;
					font-size: 2em;
    					line-height: 1.2rem;
    					font-family: "Sora", sans-serif;
    					font-optical-sizing: auto;
    					font-weight: 500;
    					font-style: normal;
    					border-bottom: 6px solid #ffcc00;
					}

			.form_infoarea div hgroup+p	{font-size:1rem;
						margin-bottom:2rem;}





	/*    フォームの体裁    */

	div.mainform table {width: 100%;}


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




	div.mainform table td, th {padding-top: 13px;}



	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	{text-align: center;
					padding: 0.5rem 0;
					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 2rem;
			box-sizing:border-box;}

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




/* フォーム送信ボタン前注意文 */

	
div.mainform  p.submit_infotext	{max-width:500px;
				width:95%;
				color:#ff6666;
				font-size:0.9rem;
				text-align:center;
				letter-spacing:0;
				padding:0;
				margin-inline:auto;
				margin-bottom:1.5rem;
				}


	div#address_area	{width:100%;
			background-color:#fff;
			border-top:1px dotted #aaa;
			}


	div#address_area>div	{color:#777;
				width:85%;
				padding:1rem 0;
				margin-inline:auto;
				text-align:center;
				font-size:1rem;
			
				}



	div#address_area a	{color:#008080;}


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

	注意文　モーダル

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


	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: 1000;
  			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	{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: 80%;
  					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;}






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

	w768以下

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


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


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


    main	{max-width:85%;}

  header { max-width: 85%;}


	/* header */
	nav ul.topnav_link li:nth-of-type(1) {display:none;}

	span.topnav_smalltext {font-size: 0.8rem;}

	    img.name_pngimage	{width: 35%;
        				top: 100px;
        				left: 50%;}


	/*  about  */
		#about_garo_space {padding-top: 2rem;}

		img.owner_image {width: 100px;}

		h1 {padding-top: 2rem;}



		hgroup.h1_xicon_space div.snsiconset	{float: none;
						position: absolute;
        						left: 80%;}


		dl.owner_infotext {padding-top: 6rem;}



			/*  ポイントエリア  */
			section.point_area::after {left: 5%;}




	div.form_radiobox_wrap div.flex_w500outo	{display:block;}
	div.form_radiobox_wrap div.flex_w500outo label	{width:50%;}



		div.mainform p.submit_infotext	{text-align:left;}


		div#address_area>div	{width: 100%;
					font-size:0.9rem;}




}/*  w768 last   */

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



    main	{max-width:100%;}

  header { max-width: 100%;}





}