@charset "utf-8";

.outer h2 {
	display:block;
	border-bottom:1px solid #ddd;
	font-size:120%;
}

.toTop {
	position:sticky;
	bottom:5em;
	z-index:4;
}
.toTop * {
	display:block;
}
.toTop ul {
	position:relative;
	width:240px;
	padding:1em;
}
.toTop li {
	position:relative;
	border:1px solid #bbb;
	background-color:#fff;
	border-radius:1em;
	padding:1em;
	overflow:hidden;
}
.toTop li:before {
	content:'';
	inset:0;
	background-image:linear-gradient(to right, #00000000 0%, #fff 1em, #00000000 70%);
	position:absolute;
	display:block;
	transform:skewX(10deg);
	animation:3s ease 0s infinite animeTT;
	pointer-events:none;
}
@keyframes animeTT {
0% { inset:0 -100% 0 100%; }
23% { inset:0 100% 0 -100%; }
30% { inset:-1px 100% 100% -100%; }
31% { inset:-1px -100% 100% 100%; }
100% { inset:0 -100% 0 100%; }
}
.toTop svg {
	width:100%;
	max-width:none;
}
.toTop svg use:nth-child(2) {
	fill:var(--color2);
}
@media screen and (min-width:500px) {
	.toTop ul {
		width:400px;
	}
}

.sec1,
.sec2 {
	opacity:var(--opp);
}

.sec1 .sarea > h3 {
	position:relative;
	font-size:150%;
}
.sec1 .sarea > h3 b {
	position:relative;
	display:block;
	width:fit-content;
	margin:auto;
	margin-left:4em;
	padding:.3em;
	background-color:#fff;
}
.sec1 .sarea > h3:before {
	position:absolute;
	display:block;
	content:'';
	background-image:linear-gradient(to right, var(--color2), #ffffff);
	inset:0;
	height:2px;
	margin:auto;
}

.conttList > b {
	display:block;
	font-size:120%;
	text-align:center;
	padding:1em 0;
}

.top_apps.bottom {
	z-index:9;
}

.top_apps.land {
	position:relative;
}
.top_apps.land .bara {
	display:block;
	padding:.5em;
}
.top_apps.land .bara .ba {
	display:none;
}
.top_apps.land .jump {
	position:relative;
	inset:auto;
	display:flex;
	flex-wrap:wrap;
	width:100%;
	height:auto;
	gap:.5em;
}
.top_apps.land .floats {
	position:static;
	display:block;
	height:auto;
	width:100%;
	padding:2em 0;
	border:2px solid #ccc;
	border-radius:.5em;
}
.top_apps.land .floats ul {
	position:static;
	filter:none;
	display:block;
	margin:auto;
}
.top_apps.land .floats ul:before {
	content:none;
}
.top_apps.land .fone:not(:hover) ~ .jump .fone2:not(:hover),
.top_apps.land .line:not(:hover) ~ .jump .line2:not(:hover),
.top_apps.land .gmap:not(:hover) ~ .jump .gmap2:not(:hover),
.top_apps.land .cont:not(:hover) ~ .jump .cont2:not(:hover),
.top_apps.land .wcht:not(:hover) ~ .jump .wcht2:not(:hover) {
	height:auto;
}
.top_apps.land .floats svg {
	display:block;
	max-width:90%;
	margin:auto;
}
.top_apps.land .gmap2 {
	display:none;
}
.top_apps.land .fone2 {
	order:1;
}
.top_apps.land .cont2 {
	order:2;
}
.top_apps.land .line2 {
	order:3;
}
.top_apps.land .wcht2 {
	order:4;
}
@media screen and (min-width:500px) {
	.top_apps.land .floats {
		width:calc((100% - .5em) / 2);
		#font-size:80%;
	}
}

.h2sub {
	display:block;
	text-align:center;
	position:relative;
	--bbb:#ffff00;
}
.h2sub:before {
	content:'';
	display:block;
	padding-top:80%;
}
.h2sub p {
	position:absolute;
	display:flex;
	inset:0;
	text-align:center;
	justify-content:center;
	align-items:center;
	#display:block;
	font-size:130%;
	color:#000;
	text-shadow:0 0 1em #fff, 0 0 1em #fff;
}
.h2sub p span {
	display:block;
	width:fit-content;
}
.h2sub .amg {
	position:absolute;
	inset:0;
	overflow:hidden;
	border-radius:2em;
}
.h2sub .amg:after {
	position:absolute;
	content:'';
	display:block;
	inset:-1px;
	margin:auto;
	background-color:#88888888;
	background-image:linear-gradient(#88888888, #ffffffaa);
}
.h2sub .amg :where(.i1, .i2) {
	position:absolute;
	max-width:100%;
}
.h2sub .amg .i1 {
	inset:auto 0 49.5% 0;
}
.h2sub .amg .i2 {
	inset:49.5% 0 auto 0;
}
@media screen and (min-width:700px) {
	.h2sub:before {
		padding-top:40%;
	}
	.h2sub .amg :where(.i1, .i2) {
		height:130%;
		width:auto;
	}
	.h2sub .amg .i1 {
		inset:-15% 49.5% -15% auto;
	}
	.h2sub .amg .i2 {
		inset:-15% auto -15% 49.5%;
	}
}

.sec1 .fList {
	display:block;
}
.sec1 .fList h4 {
	font-weight:bold;
}
.sec1 .fitm {
	display:block;
	padding:1em 1em 2em;
	font-weight:normal;
}
.sec1 .wrd {}
:is(.problemsList, .blogList) {
	padding-bottom:2em;
}
.clist {
	display:block;
}
.clist li {
	display:block;
	padding:0 0 .5em 2em;
	text-indent:-2em;
}
.clist li:before {
	content:'※';
	display:inline-block;
	width:2em;
	text-indent:0;
}

.sec2 a {
	display:block;
	padding:1em 2em;
	background-color:var(--color2);
	color:#fff;
	font-size:110%;
	width:fit-content;
	text-decoration-line:none;
	border-radius:.5em;
}
.sec2 .sarea {
	display:flex;
	height:10em;
	justify-content:center;
	place-items:center;
}
.sec2 .sarea li {
	display:block;
	width:fit-content;
	height:fit-content;

}