@charset "utf-8";

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

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

.sec1 .outer {
	padding:var(--pd) 0;
}
.toproll {
	position:relative;
	overflow:hidden;
	margin-bottom:1em;
}
.toproll .field {
	position:relative;
	display:block;
}
.toproll .field > li {
	position:absolute;
	display:block;
	inset:0;
}
.toproll .sarea {
	position:relative;
	display:block;
	#border:1px solid #ff000088;
}
.toproll .sarea:before {
	content:'';
	display:block;
	padding-top:calc(100% / 3 * 4);
}
.toproll :where(.sarea > li) {
	position:absolute;
	display:block;
	inset:0;
	inset:0 var(--esr) 0 var(--esl);
	transition-property:all;
	transition-timing-function:ease;
	transition-duration:.5s;
	transition-delay:calc(var(--ddl) - var(--dl));
}
.toproll :where(.sarea > li:nth-child(1)) { --dl:.0s; }
.toproll :where(.sarea > li:nth-child(2)) { --dl:.1s; }
.toproll :where(.sarea > li:nth-child(3)) { --dl:.2s; }
.toproll :where(.sarea > li:nth-child(4)) { --dl:.3s; }
.toproll :where(.sarea > li:nth-child(5)) { --dl:.4s; }
.toproll :where(.sarea > li:nth-child(6)) { --dl:.5s; }
.toproll :where(.sarea > li:nth-child(7)) { --dl:.6s; }
.toproll :where(.sarea > li .iner) {
	position:absolute;
	display:block;
	inset:auto;
	width:fit-content;
	height:fit-content;
}
.toproll .back {
	position:absolute;
	inset:0;
	transition-property:all;
	transition-timing-function:ease;
	transition-duration:1s;
}
.toproll .top .iner {
	top:0;
}
.toproll .bottom .iner {
	bottom:0;
}
.toproll .left .iner {
	left:0;
}
.toproll .right .iner {
	right:0;
}
.toproll .middle .iner {
	top:0;
	bottom:0;
	margin-top:auto;
	margin-bottom:auto;
}
.toproll .center .iner {
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;

}
.toproll .eee {
	position:absolute;
	display:block;
	inset:0;
	#background-color:#ffffffdd;
}
.toproll .field > li:nth-of-type(2) ~ li:not(:last-of-type) {
	display:none;
}
.toproll .field > li:is(:nth-of-type(2), :last-of-type) .back {
	opacity:0;
}
.toproll .field > li:is(:nth-of-type(2), :last-of-type) > .sarea > li {
	opacity:0;
}
.toproll .field > li:first-of-type > .sarea > li {
}
.toproll .field > li:last-of-type > .sarea > li {
	transform:scale(0.5);
}
.toproll .field > li:nth-of-type(2) > .sarea > li {
	transform:scale(1.2);
}
@media screen and (min-width:700px) {
	.toproll .sarea:before {
		padding-top:calc(100% / 16 * 9);
	}
}


/* toproll 1 */
.toproll .jpx .iner {
	width:100%;
	height:100%;
}
.toproll .jpx svg {
	width:100%;
	height:100%;
}
.toproll .jpx svg .map {
	transform:translate(-60px,40px) scale(1.8) rotate(-16deg);
	transform:translate(75px,180px) scale(2) rotate(5deg);
}
.toproll .jpx svg #jp {
	fill:#ffffff55;
}
.toproll .jpx svg #ar path {
	fill:var(--color2);
	opacity:.5;
}
.toproll .jpx svg #ar circle {
	fill:none;
	stroke:#ff0000;
	animation-name:toproll0;
	animation-duration:1.5s;
	animation-timing-function:linear;
	animation-iteration-count:infinite;
}
.toproll .jpx svg #ar circle:nth-of-type(2) {
	animation-delay:-.5s;
}
.toproll .jpx svg #ar circle:nth-of-type(3) {
	animation-delay:-1s;
}
@keyframes toproll0 {
	0%   { transform:scale(1); stroke-width:0; opacity:1; }
	100% { transform:scale(2); stroke-width:2px; opacity:0; }
}
.toproll .jpx svg #pin {
	transform:translate(-60px,40px) scale(3);
	transform:translate(75px,180px) scale(3);
}
.toproll .jpx svg #pin path {
	fill:var(--color2);
}
.toproll .jpx svg #pin circle {
	fill:#fff;;
}
.toproll .npc img {
	width:300px;
	max-width:60vw;
}
.toproll .wrd {
	color:#fff;
	text-shadow:1px 1px 3px #000;
}
.toproll .wrd .iner {
	padding:1em;
	line-height:1;
}
.toproll .wrd strong {
	font-size:180%;
}
.toproll .wrd div {
	font-size:130%;
}
.toproll .wrd small {
	font-size:60%;
}
.toproll .wrd h3 {
	text-align:center;
	padding:.3em;
}
.toproll .wrd .artk {
	display:block;
	font-size:70%;
}
.toproll .wrd .artk > li {
	display:inline-block;
}
.toproll .wrd .artk > li:not(:first-of-type) {
	margin-left:-.2em;
}
.toproll .wrd .artk > li:not(:first-of-type):before {
	content:'・';
	display:inline-block;
	margin-right:-.2em;
}
.toproll .wrd .artk > div {
	margin-top:.5em;
	font-size:80%;
}
@media screen and (min-width:700px) {
	.toproll .jpx svg .map {
		transform:translate(-60px,100px) scale(1.8) rotate(16deg);
	}
	.toproll .jpx svg #pin {
		transform:translate(-60px,100px) scale(1.8);
	}
	.toproll .npc img {
		width:360px;
		max-width:none;
	}
	.toproll .wrd .iner {
		padding:2em 0 0 3em ;
		line-height:1.2;
	}
	.toproll .wrd.ara .artk {
		font-size:70%;
	}
	.toproll .wrd.ara .iner {
		margin:0 0 0 auto;
		max-width:80%;
		width:fit-content;
		padding:.5em .5em;
	}
}

/* toproll 2 */
.toproll .disco0 .iner {
	width:100%;
	height:100%;
}
.toproll .discon {
	display:flex;
	flex-flow:column;
	justify-content:space-around;
	place-items:center;
	height:100%;
}
.toproll .discon > li {
	position:relative;
	display:flex;
	width:12em;
	height:12em;
	border-radius:10px;
	justify-content:center;
	place-items:center;
	color:#fff;
	text-align:center;
	line-height:1;
}
.toproll .discon > li:nth-child(1) {
	background-color:#7cd2c5;
}
.toproll .discon > li:nth-child(2) {
	background-color:#6171a4;
}
.toproll .discon > li:nth-child(1) strong {
	font-size:400%;
}
.toproll .discon > li:nth-child(2) strong {
	font-size:250%;
}
.toproll .discon .dwr2 {
	display:inline-block;
	font-size:300%;
}
.toproll .discon .dwr1 small {
	display:inline-block;
	font-size:90%;
}
.toproll .discon .dwr1 small * {
	display:block;
}
.toproll .discon .dwr3 {
	font-size:180%;
}
.toproll .discon .dwr4 {
	font-size:70%;
}
.toproll .discon > li b {
	position:absolute;
	inset:100% 0 auto;
	padding:1em 0 0;
	font-size:60%;
}
.toproll .discon > li b div:before {
	content:'*';
}
@media screen and (min-width:700px) {
	.toproll .discon {
		display:flex;
		flex-flow:row;
		font-size:150%;
	}
	.toproll .discon > li {
		width:250px;
		height:250px;
	}
}

/* toproll END */



.banner2 .phy {
	position:relative;
	--bbb:#ffff00;
	#background-color:#e5e5e5;
	#border-radius:2em;
}
.banner2 .amg {
	position:absolute;
	inset:0;
	overflow:hidden;
	border-radius:2em;
}
.banner2 .amg:after {
	position:absolute;
	content:'';
	display:block;
	inset:-1px;
	margin:auto;
	background-color:#88888888;
	background-image:linear-gradient(#88888888, #ffffffaa);
}
.banner2 .amg :where(.i1, .i2) {
	position:absolute;
	max-width:100%;
}
.banner2 .amg .i1 {
	inset:auto 0 49.5% 0;
}
.banner2 .amg .i2 {
	inset:49.5% 0 auto 0;
}
@media screen and (min-width:700px) {
	.banner2 .amg :where(.i1, .i2) {
		height:100%;
		width:auto;
	}
	.banner2 .amg .i1 {
		inset:0 49.5% 0 auto;
	}
	.banner2 .amg .i2 {
		inset:0 auto 0 49.5%;
	}
}
.banner2 .talk {
	inset:auto 0 .5em auto;
	font-size:130%;
	width:fit-content;
	height:fit-content;
	font-weight:bold;
	line-height:1;
	filter:drop-shadow(0 .1em .1em #000000aa);
	margin:auto;
}
.banner2 h2 {
	display:inline;
	font-weight:inherit;
	font-size:120%;
	color:#ff5500;
}
.banner2 h2:after {
	content:' ';
}
.banner2 h2 span {
	display:inline-block;
}
.banner2 .wd {
	display:block;
	padding:1.5em 1em 0;
}
.banner2 .sh0 {
	position:absolute;
	#inset:0;
}
.banner2 .sh1 > li {
	-webkit-text-stroke:#fff 0.2em;
}
.banner2 .c1 {
	font-size:140%;
	margin-bottom:.6em;
	line-height:1.3;
}
.banner2 .c2 {
	font-size:200%;
	margin:2em 0;
}
.banner2 .c2 svg {
	max-width:100%;
	width:80%;
	height:auto;
}
.banner2 .c2 use:nth-child(2) {
	fill:#fff;
}
.banner2 .c3 {
	color:var(--color2);
	margin:0;
}
.banner2 .wd > li {
	display:block;
	text-align:center;
}
.banner2 .laureate {
	display:flex;
	gap:1em;
	justify-content:center;
	align-items:center;
	padding:4em 0;
}
.banner2 .laureate > li {
	position:relative;
	display:block;
	width:calc(100% / 3);
}
.banner2 .sh0 .laureate > li {
	z-index:2;
}
.banner2 .sh1 .laureate > li b {
	position:absolute;
	inset:-1em;
	margin:auto;
	width:6em;
	height:6em;
	border:3px double #ffffffff;
	border-radius:3em;
	background-color:#00000055;
}
.banner2 .laureate div {
	position:relative;
}
.banner2 .laureate div:nth-of-type(1) {
	color:#f00;
	margin-bottom:.6em;
}
/*

.banner1 .talk .sh:nth-child(1) {
	position:absolute;
	inset:0;
}
.banner1 .talk .sh:nth-child(2) {
	-webkit-text-stroke:#fff .12em;
}
.banner1 .talk p {
}
.banner1 .talk b {
	font-size:125%;
	color:#ff5555;
}
*/

.banner1 .phy {
	position:relative;
	--bbb:#ffff00;
	background-color:#e5e5e5;
	border-radius:2em;
}
.banner1 .know {
	#position:absolute;
	position:relative;
	inset:0;
}
.banner1 .know:before {
	content:'';
	display:block;
	padding-top:75%;
	background-image:url(banner1.1.jpg);
	background-size:cover;
	border-radius:2em;
	mix-blend-mode:darken;
}
/*.banner1 .know:after,*/
.banner1 .know p:after {
	position:absolute;
	content:'';
	display:block;
	width:1.5em;
	height:1em;
	border-style:solid;
	border-width:.5em .75em;
	border-color:
}
.banner1 .know:after {
	inset:auto auto calc(100% - 4em) -1em;
	width:1.9em;
	height:1.4em;
	border-width:.7em .95em;
	border-color:var(--bbb) var(--bbb) #00000000 #00000000;
}
.banner1 .know p:after {
	inset:auto 0 0 auto;
	width:1.5em;
	height:1em;
	border-width:.5em .75em;
	border-color:#fff #fff #00000000 #00000000;
	border-color:var(--bbb) var(--bbb) #00000000 #00000000;
	transform-origin:bottom right;
	transform:rotate(-30deg);
}
.banner1 .know p {
	position:absolute;
	padding:1em 2.5em 1em 1.5em;
	border-radius:50%;
	border:.2em solid var(--bbb);
	background-color:#fff;
	inset:auto auto calc(100% - 4em) -1em;
	line-height:1;
	font-size:140%;
	font-weight:bold;
	color:var(--color2);
	filter:drop-shadow(2px 4px 6px #00000066);
}
.banner1 .know b {
	position:absolute;
	inset:0 .3em 0 auto;
	margin:auto;
	font-size:180%;
	display:block;
	height:fit-content;
}
.banner1 h2 {
	position:absolute;
	inset:calc(100% - 7em) 0 auto auto;
	font-size:100%;
	width:fit-content;
	background-image:linear-gradient(to right, #00000000, var(--bbb) 50%);
}
.banner1 .talk {
	position:absolute;
	inset:auto 0 .5em auto;
	font-size:200%;
	width:fit-content;
	height:fit-content;
	font-weight:bold;
	line-height:1;
	color:var(--color2);
	filter:drop-shadow(0 .1em .1em #000000aa);
}
.banner1 .talk .sh:nth-child(1) {
	position:absolute;
	inset:0;
}
.banner1 .talk .sh:nth-child(2) {
	-webkit-text-stroke:#fff .12em;
}
.banner1 .talk p {
}
.banner1 .talk b {
	font-size:125%;
	color:#ff5555;
}
@media screen and (min-width:700px) {
	.banner1 h2 {
		font-size:140%;
		padding:0 2em;
		inset:0 0 auto auto;
	}
	.banner1 .know {
		position:relative;
		width:30%;
		right:auto;
	}
	.banner1 .know p {
		font-size:90%;
	}
	.banner1 .know:before {
		border-radius:2em 0 0 2em;
	}
	.banner1 .talk {
		inset:2em 0 auto auto;
		inset:0 0 0 5em;
		margin:auto;
		font-size:260%;
	}
}
@media screen and (min-width:900px) {
	.banner1 .know p {
		font-size:140%;
	}
	.banner1 .talk {
		font-size:320%;
	}
}
.soluList {
	#gap:1em;
}
.soluList .item {
	cursor:pointer;
}
@media screen and (min-width:720px) {
	.soluList .item {
		width:calc(50% - .5em);
	}
}

.myspec {

}
.myspec .phy {
	position:relative;
	--bbb:#ffff00;
	background-color:#e5e5e5;
	border-radius:2em;
	padding-bottom:2em;
}
.myspec .phy .video {
	position:absolute;
	inset:0 0 auto;
	z-index:0;
	overflow:hidden;
	border-radius:2em 2em 0 0;
}
.myspec .phy .video:before {
	content:'';
	display:block;
	padding-top:60%;
}
.myspec .phy .video:after {
	position:absolute;
	inset:auto 0 -1px;
	content:'';
	display:block;
	height:40%;
	background-image:linear-gradient(#00000000, #e5e5e588 40%, #e5e5e5 95%);
}
.myspec .phy .video video {
	position:absolute;
	inset:-30% -100% 0;
	margin:auto;
	height:130%;
}
@media screen and (min-width:700px) {
	.myspec .phy .video:before {
		padding-top:30%;
	}
	.myspec .phy .video video {
		inset:-100% 0 -50%;
		height:auto;
		max-width:100%;
	}
}
.myspec h2 {
	position:relative;
	text-align:center;
	font-size:140%;
	width:fit-content;
	height:fit-content;
	font-weight:bold;
	line-height:1;
	color:var(--color2);
	filter:drop-shadow(0 .1em .1em #000000aa);
	margin:auto;
}
.myspec h2 .sh {
	padding:1em 0;
}
.myspec h2 .sh:nth-child(1) {
	position:absolute;
	inset:0;
}
.myspec h2 .sh:nth-child(2) {
	-webkit-text-stroke:#fff .12em;
}
.myspec h2 b {
	font-size:140%;
	color:#ff5555;
}
.myspec .phy p {
	position:relative;
	padding:.5em 2em;
}
.myspec .red {
	color:#ff5555;
	font-weight:bold;
}
.spList {
	display:flex;
	justify-content:space-evenly;
}
.spList li {
	display:flex;
	flex-flow:column;
	justify-content:center;
	align-items:center;
	width:6em;
	height:6em;
	#background-color:#fff;
	border-radius:1em;
	filter:drop-shadow(0 .1em .1em #000000aa);
	font-weight:bold;
	background-image:linear-gradient(var(--color2), #00000055);
	color:#fff;
}
.spList li .zero {
	font-size:180%;
}
@media screen and (min-width:700px) {
	.spList li {
		font-size:200%;
	}
}

section.sec2 .outer h2 {
	border:0;
	padding:2em 0;
	text-align:center;
}
.sec2 h2 * {
	display:inline-block;
	line-height:1;
}
.sec2 h2 b {
	font-size:120%;
}
.sec2 h2 small {
	font-size:80%;
	padding:.5em;
}
.sec2 h2 ul {
	position:relative;
	width:0;
	text-shadow:0 0 .1em #ffff99;
}
.sec2 h2 ul:before {
	position:absolute;
	content:'';
	display:block;
	border-color:#000 #000 #00000000 #00000000;
	border-width:1em .6em;
	border-style:solid;
	inset:auto .5em 0 auto;
}
.sec2 h2 ul:after {
	position:absolute;
	content:'';
	display:block;
	width:3em;
	height:.3em;
	background-color:#000;
	border-radius:50%;
	filter:blur(.1em);
	inset:0 .5em 0 auto;
	margin:auto;
}
.sec2 h2 li * {
	display:block;
	font-size:60%;
}
.sec2 h2 li {
	position:absolute;
	inset:auto 0 .5em auto;
	padding:.1em .5em .3em;
	border:1px solid #000;
	border-radius:50%;
	background-image:linear-gradient(#555555 52%, #333333 53%, #000000 100%);
	color:#fff;
	white-space:nowrap;
}
.ribon {
	position:absolute;
	display:block;
	inset:0 0 auto auto;
	line-height:1;
	transform-origin:top left;
	transform:skewY(45deg);
	font-size:130%;
}
.ribon:before,
.ribon:after {
	content:'';
	position:absolute;
	display:block;
	inset:0;
	background-color:#45a6dd;
}
.ribon:after {
	transform-origin:top left;
	transform:skewX(-45deg) translateX(-2px);
}
.ribon li {
	position:relative;
	display:block;
	color:#fff;
	padding:.5em 0;
	z-index:2;
	transform-origin:top left;
	transform:skewX(-26deg);
}
.ribon span {
	display:block;
	transform-origin:center;
	transform:scaleX(.5);
	font-weight:bold;
}
section.sec2 .inner {
	padding-top:0;
}
.sec2 .sarea {
}
.sec2 .bloc,
.pointList {
	position:relative;
	background-color:#f1f1f1;
}
.pointList {
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	justify-content:space-evenly;
}
.pointList li {
	display:block;
	width:calc((100% - 2em) / 3);
	margin-bottom:.5em;
	border:1px solid #ddd;
	border-radius:3px;
	background-color:#fff;
}
.pointList .pic {
	padding:.5em .5em 0;
}
.pointList img {
	width:100%;
}
.pointList h3 {
	padding:.5em;
	text-align:center;
}
.pointList h3 span {
	display:inline-block;
	font-size:80%;
}
@media screen and (min-width:700px) {
	.pointList li {
		width:calc((100% - 3.5em) / 6);
	}
}

.newsList {
	display:block;
}
.newsList > li {
	display:flex;
	flex-wrap:wrap;
	margin:0 0 1em;
}
.newsList .date {
	width:6em;
}
.newsList h3 {
	width:calc(100% - 6em);
	font-weight:bold;
}
.newsList .bloc {
	display:flex;
	width:100%;
}
.newsList .pic {
	width:7em;
	padding:.5em;
}
.newsList .short {
	width:100%;
	padding:.5em;
}
.newsList .pic + .short {
	width:calc(100% - 7em);
}
.newsList img {
	width:100%;
}
.newsList .more {
	position:relative;
	display:block;
	line-height:1;
}
.newsList .more li {
	position:absolute;
	display:block;
	inset:auto 0 0 auto;
	padding:.2em .5em;
	background-color:var(--color2);
	color:#fff;
	border-radius:.7em;
}
.newsList .more li:after {
	content:'more…';
}