@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Dongle&family=M+PLUS+Rounded+1c&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=M+PLUS+Rounded+1c&display=swap');
html{ font-family:"Noto Sans JP", "Noto Sans", serif; font-weight:400; color:#FFFFFF; }
*{ padding:0; margin:0; box-sizing:border-box; }
body{ font-size:16px; line-height:1.8; overflow-x:hidden; width:100%; background:url("bg.jpg") no-repeat center/ cover; position:relative; }
img,svg{ max-width:100%; height:auto; vertical-align:top; }
a{ color:inherit; }
input,select{ font-family:inherit; font-size:95%; padding:0.25em; background:rgba(255,255,255,0.9); color:#000000; border:none; border-radius:5px; }


header{ position:relative; }
header .lang{ font-size:12px; }

#footer{ background:linear-gradient(to top,rgba(0,0,0,0.6) 20%, rgba(0,0,0,0)); font-size:10px; line-height:1.6; text-align:center; padding:10px; }
#footer a{ color:inherit; }

/* PC */
@media screen and (min-width:768px) {
	header{ padding:20px 0; }
	header h1{ font-size:40px; line-height:1.2; text-align:center; margin-bottom:20px; }
	header h1 strong{ font-size:50px; line-height:1.4; }
	header h1 .s{ font-size:30px; }
	header .read{ font-size:16px; line-height:1.6; text-align:center; margin-top:20px; }
	header .lang{ position:absolute; right:1px; top:0px; }
	.sp{ display:none; }
}

/* SP */
@media screen and (max-width:767px) {
	header{ padding:20px 0; }
	header h1{ font-size:30px; line-height:1.2; text-align:center; margin-bottom:10px; }
	header h1 strong{ font-size:30px; line-height:1.4; }
	header h1 .s{ font-size:18px; }
	header .read{ font-size:14px; line-height:1.6; text-align:center; margin-top:20px; }
	header .lang{ width:fit-content; margin:10px auto 0; }
	.pc{ display:none; }
	#footer{ margin-top:30px; }
}


/* PC */
@media screen and (min-width:768px) {
	.wrap{ display:flex; align-items:flex-start; max-width:1040px; margin:0 auto; }
	.template{ max-width:520px; width:calc(130px * 4); }
	.input{ width:500px; padding:20px; max-height:100vh; overflow-y:auto; }
}

/* SP */
@media screen and (max-width:767px) {
	.wrap{ padding:10px; }
	.template{ display:block; width:260px; margin:0 auto; }
}

.template{ background:url("bg.svg") fixed repeat center/20px; max-height:100vh; }
.template .black { fill:rgba(0,0,0,0.95); }
.template .acrylic { fill:rgba(255,255,255,0.05); stroke:#000; stroke-width:0.5px; filter:drop-shadow(0.5px 0.5px 0.5px rgba(0,0,0,0.75)); }
.template .name {
	fill:#000;
	font-family:"M PLUS Rounded 1c", "Dongle", "Noto Sans", sans-serif; font-size:20px; line-height:1.0; font-weight:900; text-align:center;
	stroke:#DDD; stroke-miterlimit:10; stroke-width:1.5px; text-anchor:middle; dominant-baseline:central; paint-order:stroke;
}
.template .bis circle { fill:rgba(200,200,200,0.5); stroke:#000; stroke-width:0.5px; }
.template .bis line { stroke:rgba(50,50,50,0.75); fill:none; stroke-width:3px; }
.template .unit{ filter:drop-shadow(0.5px 0.5px 0.5px rgba(0,0,0,0.5)); }
.template .back{ animation:back 10s ease 0s infinite normal none running; }
 @keyframes back{
	80% { transform:translate(0px, 0px); }
	90% { transform:translate(2px, 5px); }
	100% { transform:translate(0px, 0px); }
}
.template .light_back{ mix-blend-mode:multiply; filter:blur(10px); opacity:0.25; }
.template .click{ font-size:5px; line-height:1.0; stroke-width:0.75px; paint-order:stroke; transition:all 300ms 0s ease; }
.template:hover .click{ opacity:0.1; }

.template .f.light{ fill:#AAA; }
.template .f.light_back{ fill:rgba(225,225,225,0); }
.template .s.light{ stroke:#AAA; }
.template .mode{ font-size:5px; line-height:1.0; stroke-width:0.5px; paint-order:stroke; }

.a_1{
	.f.light{ fill:#F00;; }
	.s.light{ stroke:#F00; }
}
.a_2{
	.f.light{ fill:#0F0; }
	.s.light{ stroke:#0F0; }
}
.a_3{
	.f.light{ fill:#00F; }
	.s.light{ stroke:#00F; }
}
.a_4{
	.f.light{ fill:#FF0; }
	.s.light{ stroke:#FF0; }
}
.a_5{
	.f.light{ fill:#0FF; }
	.s.light{ stroke:#0FF; }
}
.a_6{
	.f.light{ fill:#F0F; }
	.s.light{ stroke:#F0F; }
}
.a_7{
	.f.light{ fill:#FFF; }
	.s.light{ stroke:#FFF; }
}
.a_8{
	.f.light{ animation:l_a1 10s linear 0s infinite normal none running; }
	.s.light{ animation:l_a2 10s linear 0s infinite normal none running; }
}
.a_9{
	.f.light{ animation:l_a1 3s linear 0s infinite normal none running; }
	.s.light{ animation:l_a2 3s linear 0s infinite normal none running; }
}
.a_10{
	.f.light{ animation:l_ap1 20s linear 0s infinite normal none running; }
	.s.light{ animation:l_ap2 20s linear 0s infinite normal none running; }
}

@keyframes l_a1{
	   0% { fill:#F00; } 14.2% { fill:#F00; }
	14.3% { fill:#0F0; } 28.5% { fill:#0F0; }
	28.6% { fill:#00F; } 42.8% { fill:#00F; }
	42.9% { fill:#FF0; } 57.1% { fill:#FF0; }
	57.2% { fill:#0FF; } 71.4% { fill:#0FF; }
	71.5% { fill:#F0F; } 85.7% { fill:#F0F; }
	85.8% { fill:#FFF; } 99.9% { fill:#FFF; }
	 100% { fill:#F00; }
}
@keyframes l_a2{
	   0% { stroke:#F00; } 14.2% { stroke:#F00; }
	14.3% { stroke:#0F0; } 28.5% { stroke:#0F0; }
	28.6% { stroke:#00F; } 42.8% { stroke:#00F; }
	42.9% { stroke:#FF0; } 57.1% { stroke:#FF0; }
	57.2% { stroke:#0FF; } 71.4% { stroke:#0FF; }
	71.5% { stroke:#F0F; } 85.7% { stroke:#F0F; }
	85.8% { stroke:#FFF; } 99.9% { stroke:#FFF; }
	 100% { stroke:#F00; }
}

@keyframes l_ap1{
	   0% { fill:#F00; }
	14.3% { fill:#0F0; }
	28.6% { fill:#00F; }
	42.9% { fill:#FF0; }
	57.2% { fill:#0FF; }
	71.5% { fill:#F0F; }
	85.8% { fill:#FFF; }
	 100% { fill:#F00; }
}
@keyframes l_ap2{
	   0% { stroke:#F00; }
	14.3% { stroke:#0F0; }
	28.6% { stroke:#00F; }
	42.9% { stroke:#FF0; }
	57.2% { stroke:#0FF; }
	71.5% { stroke:#F0F; }
	85.8% { stroke:#FFF; }
	 100% { stroke:#F00; }
}


.b_1{
	.f.light{ animation:l_b1 20s linear 0s infinite normal none running; }
	.s.light{ animation:l_b2 20s linear 0s infinite normal none running; }
}
.b_2{
	.f.light{ animation:l_bp1 10s linear 0s infinite normal none running; }
	.s.light{ animation:l_bp2 10s linear 0s infinite normal none running; }
}
.b_3{
	.f.light{ fill:#00F; }
	.s.light{ stroke:#00F; }
}
.b_4{
	.f.light{ fill:#0F0; }
	.s.light{ stroke:#0F0; }
}
.b_5{
	.f.light{ fill:#F00; }
	.s.light{ stroke:#F00; }
}
.b_6{
	.f.light{ fill:#0FF; }
	.s.light{ stroke:#0FF; }
}
.b_7{
	.f.light{ fill:#FF0; }
	.s.light{ stroke:#FF0; }
}
.b_8{
	.f.light{ fill:#F0F; }
	.s.light{ stroke:#F0F; }
}
.b_9{
	.f.light{ fill:#FFF; }
	.s.light{ stroke:#FFF; }
}

@keyframes l_b1{
	   0% { fill:#00F; }    5% { fill:#00F; }  7.15% { fill:#666; } 12.15% { fill:#666; }
	14.3% { fill:#0F0; } 19.3% { fill:#0F0; } 21.45% { fill:#666; } 26.45% { fill:#666; }
	28.6% { fill:#F00; } 33.6% { fill:#F00; } 35.75% { fill:#666; } 40.75% { fill:#666; }
	42.9% { fill:#0FF; } 47.9% { fill:#0FF; } 50.05% { fill:#666; } 55.05% { fill:#666; }
	57.2% { fill:#FF0; } 62.2% { fill:#FF0; } 64.35% { fill:#666; } 69.35% { fill:#666; }
	71.5% { fill:#F0F; } 76.5% { fill:#F0F; } 78.65% { fill:#666; } 83.65% { fill:#666; }
	85.8% { fill:#FFF; } 90.8% { fill:#FFF; } 92.95% { fill:#666; } 97.95% { fill:#666; }
	 100% { fill:#00F; }
}
@keyframes l_b2{
	   0% { stroke:#00F; }    5% { stroke:#00F; }  7.15% { stroke:#666; } 12.15% { stroke:#666; }
	14.3% { stroke:#0F0; } 19.3% { stroke:#0F0; } 21.45% { stroke:#666; } 26.45% { stroke:#666; }
	28.6% { stroke:#F00; } 33.6% { stroke:#F00; } 35.75% { stroke:#666; } 40.75% { stroke:#666; }
	42.9% { stroke:#0FF; } 47.9% { stroke:#0FF; } 50.05% { stroke:#666; } 55.05% { stroke:#666; }
	57.2% { stroke:#FF0; } 62.2% { stroke:#FF0; } 64.35% { stroke:#666; } 69.35% { stroke:#666; }
	71.5% { stroke:#F0F; } 76.5% { stroke:#F0F; } 78.65% { stroke:#666; } 83.65% { stroke:#666; }
	85.8% { stroke:#FFF; } 90.8% { stroke:#FFF; } 92.95% { stroke:#666; } 97.95% { stroke:#666; }
	 100% { stroke:#00F; }
}

@keyframes l_bp1{
	   0% { fill:#00F; }
	14.3% { fill:#0F0; }
	28.6% { fill:#F00; }
	42.9% { fill:#0FF; }
	57.2% { fill:#FF0; }
	71.5% { fill:#F0F; }
	85.8% { fill:#FFF; }
	 100% { fill:#00F; }
}
@keyframes l_bp2{
	   0% { stroke:#00F; }
	14.3% { stroke:#0F0; }
	28.6% { stroke:#F00; }
	42.9% { stroke:#0FF; }
	57.2% { stroke:#FF0; }
	71.5% { stroke:#F0F; }
	85.8% { stroke:#FFF; }
	 100% { stroke:#00F; }
}

.template:not(.b_1):not(.b_2):not(.b_3):not(.b_4):not(.b_5):not(.b_6):not(.b_7):not(.b_8):not(.b_9) .swich._1{
	transform:translateY(2px);
}


.template.cover_none .bis,
.template.cover_none .back{ display:none; }
.template.cover_none .name{ fill:#444; opacity:0.8; }

.template .unit .swich{ cursor:pointer; }

.input{ font-size:20px; line-height:1.4; }
.input label{ display:flex; align-items:center; padding-top:10px; border-top:1px solid #FFFFFF; margin-top:10px; }
.input label h2{ font-size:100%; font-weight:inherit; line-height:1.0; width:5em; text-align:center; }
.input label h2+*{ width:calc(100% - 5em); }

.input .note{ padding-top:10px; font-size:16px; line-height:1.4; }
.input .note p{ padding-left:1em; text-indent:-1em; margin-top:5px; }
.input .text{ padding-top:10px; border-top:1px solid #FFFFFF; margin-top:10px; }
.input .note.scl{
	height:200px; overflow-y:scroll; position:relative;
	font-size:12px; line-height:1.4;
	background:rgba(0,0,0,0.6); border:1px solid #F00; padding:10px;
	h3{ font-size:16px; font-weight:bold; text-align:center; margin:0 0 0.7em; }
	h4{ font-size:14px; font-weight:bold; margin:-10px 0 0.7em; }
	p:not(.not)::before{ content:"※"; }
	p:not(:last-child){ margin-bottom:0.7em; }
	p.not{ text-indent:0; padding-left:0; }
	p.update{ position:absolute; right:10px; top:10px; }
}

#total_price{ text-align:center; }

.submit_text{ font-size:16px; line-height:1.4; }

.url{
	display:flex; cursor:pointer; border:1px solid rgba(255,255,255,0.8); text-decoration:none;
	span{ display:block; padding:5px; word-break:break-all; text-align:center; }
	.c1{
		display:flex; justify-content:center; align-items:center; width:6em;
		background:rgba(255,255,255,0.8); color:rgba(0,0,0,1);
		
	}
	.c2{
		display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; width:calc(100% - 6em);
		background:rgba(0,0,0,0.6);
	}
}