@charset "utf-8";

:root{
}


/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/
	/*** main px ***/
	
	.section_title{
		--clamp-max: 32;
		--clamp-min: 28;
		font-size: var(--clamp);
		margin:60px 0 90px 0;
	}
	
	
	#breadcrumb{
		display:none;
	}

	#preamble{
		width:auto;
		margin:0 auto;
	}
	#main_space{
		background:none;
		padding:0 0 0 0;
		width:auto;
		margin:0 auto;
		}
	.foot_access{/*まずはお気軽にお問い合わせ下さい。*/
		@media (max-width: 1200px) {
			margin:50px 20px 0 20px;
			}
		}
	#sns_btn{
		@media (max-width: 1200px) {
			margin:60px 20px 0 20px;
			}
		}
	.section_all{
		> div{
			width:min(1200px,100%);
			margin:0 auto;
			padding:60px 0 60px 0;
		}
		@media (max-width: 1200px) {
			> div{
				width:auto;
				padding:50px 20px;
			}
		}
	}
	
	aside.other_link{/*詳しく見る*/
		text-align:right;
		margin:30px auto 0 auto;
		a{
			text-decoration:none;
			display:inline-block;
			background:white;
			padding:.3em .7em;
			border-radius: 5px;
			border:1px solid silver;
			color:rgb(var(--baceFontColor));
			svg{
				margin:0 0 0 .3em;
				vertical-align:middle;
				fill:red;
			}
			&:hover{
				color:red;
			}
		}
	}
	
	#riyuu{/*選ばれる理由*/
		> div{
			margin:0 auto;
			padding-top:0px;
			#riyuu_list{
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(270px,100%),1fr));
				gap:20px 50px;
				div{
					position:relative;
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 3;
					gap:1em;
					> figure{
						display:block;
							img{
								width:min(230px,100%);
							}
					}
					h3{
						font-weight:500;
						color:#C00;
						inline-size: fit-content;
						margin-inline: auto;
						text-align: left;
						}
					p{
						text-align:left;
						font-size: .9em;
					}
				}
			}
		}
	}

	#plan{/*ホームページ制作*/
		color:white;
		background: url(grp/seisaku_bg.jpg);
  	background-size: cover;
  	background-position: center center;
		> div{
			> p{
				text-align:left;
				width:min(640px,100%);
				margin:0 auto;
			}
			#plan_list{
				--title_color:#ddd;
				display:grid;
				grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr));
				gap:30px;
				margin:60px auto 0 auto;
				div{
					background:white;
					a{
							display:block;
							text-decoration:none;
							height:100%;
							figure{
								position:relative;
								background:white;
								figcaption{
									background:var(--title_color);
									padding:.5em 10px;
									color:white;
									font-weight:500;
									margin:0 2px;
								}	
							}
							p{
								color:rgb(var(--baceFontColor));
								padding:15px 15px 15px 15px;
								text-align:left;
							}
							&:hover{
								img{
									opacity: .75;
								}
							}
					}
					&:nth-child(1){
						--title_color:#FF4D94;
					}
					&:nth-child(2){
						--title_color:#FF7111;
					}
					&:nth-child(3){
						--title_color:#156C2C;
					}
				}
			}
		}
	}
		
	
	#shop_plan{/*ショッププラン*/
		background:#e3fdef;
		> div{
			> p{
				font-size: 1.1em;
				font-weight: 500;
				color:red;
				width:760px;
				max-width:100%;
				margin:0 auto;
				text-align: left;
			}
			> ul{
				width:760px;
				max-width:100%;
				padding:10px 0 0 0;
				margin:0 auto;
				display:flex;
				flex-wrap:wrap;
				justify-content: start;
				gap:.3em 1em;
				li{
					margin:0 0 0 2em;
					list-style:disc;
					text-align: left;
					color:rgb(var(--mainColor));
					i{
						margin:0 .3em 0 0;
					}
				}
			}
			> div{
				margin:20px auto 0 auto;
				width:760px;
				max-width:100%;
				display:grid;
				grid-template-columns: 250px 1fr;
				gap:30px;
				align-items:center;
				> figure{
					img{
						border-radius: 5px;
					}
				}
				div{
					text-align: left;
					> h3{
						padding:10px 0 0 0;
						font-size: 1.1em;
						font-weight: 500;
						color:red;
						strong{
							margin:0 0 0 .5em ;
							display:inline-bloc(20,20);
							background:red;
							color:white;
							padding:.3em .5em .1em .5em;
						}
					}
					p{
						margin:5px 0 0 0;
						&:nth-of-type(1){
							color:red;
							margin:10px 0 0 0;
						}
						&:nth-of-type(2){
							color:red;
							font-weight: bold;
							font-size: 1.1em;
						}
					}
				}
			}
		}
		@media (max-width: 1200px) {
			> div{
				> div{
					figure{
						width:100%;
						display:block;
						img{
							width:100%;
							max-width:420px;
						}
					}
					> div{
						margin-top:20px;
						width:auto;
					}
				}
			}
		}
		@media (max-width: 768px) {
			> div{
				> p{
					text-align: left;
					@include font-size(17);
				}
				> div{
					display:block;
				}
			}
		}
	}
	
	#design{/*デザイン*/
		color:white;
		background: url(grp/desine_bg.jpg);
  	background-size: cover;
  	background-position: center center;
		> div{
			#design_list{
				ul{
					padding:60px 0 0 0;
					display:grid;
					grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr));
					gap:30px;
					li{
						position:relative;
						div{
							border:3px solid #78124d;
							background:#78124d;
							h3{
								padding:20px;
								font-weight:bold;
								color:white;
								}
							}
						}
					}
				}
			}
		@media (max-width: 480px) {
			> div{
				> p{
					text-align:left;
				}
			}
		}
	}
	
	
	#faq{/*よくある質問*/
		background:#f4f4f4;
		width:860px;
		max-width:100%;
		margin:80px auto 0 auto;
		border-radius: 20px;
		> div{
			width:auto;
			padding:40px;
			#qa_list{
				ul{
					border-bottom:2px dotted #a3bad3;
					li{
						border-top:2px dotted #a3bad3;
						padding:30px 10px;
						text-align:left;
						h3{
							font-size: 1.2em;
							font-weight:500;
							position: relative;
							padding:0 0 0 1.3em;
          		&::before {
            		display: block;
            		content: "";
            		background-color: rgb(var(--mainColor));
        
            		-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M96 256c0 88.4 71.6 160 160 160c28.9 0 56-7.7 79.4-21.1l-72-86.4c-11.3-13.6-9.5-33.8 4.1-45.1s33.8-9.5 45.1 4.1l70.9 85.1C403.9 325.8 416 292.3 416 256c0-88.4-71.6-160-160-160S96 167.6 96 256zM376.9 444.6C342 467 300.5 480 256 480C132.3 480 32 379.7 32 256S132.3 32 256 32s224 100.3 224 224c0 56.1-20.6 107.4-54.7 146.7l47.3 56.8c11.3 13.6 9.5 33.8-4.1 45.1s-33.8 9.5-45.1-4.1l-46.6-55.9z"/></svg>');
            		-webkit-mask-size: contain;
            		mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M96 256c0 88.4 71.6 160 160 160c28.9 0 56-7.7 79.4-21.1l-72-86.4c-11.3-13.6-9.5-33.8 4.1-45.1s33.8-9.5 45.1 4.1l70.9 85.1C403.9 325.8 416 292.3 416 256c0-88.4-71.6-160-160-160S96 167.6 96 256zM376.9 444.6C342 467 300.5 480 256 480C132.3 480 32 379.7 32 256S132.3 32 256 32s224 100.3 224 224c0 56.1-20.6 107.4-54.7 146.7l47.3 56.8c11.3 13.6 9.5 33.8-4.1 45.1s-33.8 9.5-45.1-4.1l-46.6-55.9z"/></svg>');
            		mask-size: contain;
        
            		height: 1em;
            		width: 1em;
        
            		position: absolute;
            		top: 50%;
            		left: 0;
            		margin-top:-.5em;
          		}
						}
						div{
							margin:1em 0 0 1.3em;
							position: relative;
							padding:0 0 0 1.3em;
							&::before {
								display: block;
								content: "";
								background-color: red;
						
								-webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M253.5 51.7C248.6 39.8 236.9 32 224 32s-24.6 7.8-29.5 19.7l-120 288-40 96c-6.8 16.3 .9 35 17.2 41.8s35-.9 41.8-17.2L125.3 384H322.7l31.8 76.3c6.8 16.3 25.5 24 41.8 17.2s24-25.5 17.2-41.8l-40-96-120-288zM296 320H152l72-172.8L296 320z"/></svg>');
								-webkit-mask-size: contain;
								mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M253.5 51.7C248.6 39.8 236.9 32 224 32s-24.6 7.8-29.5 19.7l-120 288-40 96c-6.8 16.3 .9 35 17.2 41.8s35-.9 41.8-17.2L125.3 384H322.7l31.8 76.3c6.8 16.3 25.5 24 41.8 17.2s24-25.5 17.2-41.8l-40-96-120-288zM296 320H152l72-172.8L296 320z"/></svg>');
								mask-size: contain;
						
								height: 1em;
								width: 14px;
						
								position: absolute;
								top: 15px;
								left: 0;
								margin-top:-.5em;
							}
						}
					}
				}
			}
		}
		@media (max-width: 1200px) {
			width:auto;
			margin:20px 20px 0 20px;
			> div{
				padding:30px 20px 20px 20px;
				}
			}
		}