@charset "utf-8";

/* all
-------------------------------------------------------------------*/
:root{
	--f12:0.75rem;
	--f14:0.875rem;
	--f18:1.25rem;
	--f19:1.1875rem;
	--f20:1.25rem;
	--f22:1.375rem;
	--hover:background .4s,color .4s,border-color .4s,opacity .4s,text-decoration-color .4s,transform .4s,filter .4s,box-shadow .4s;
	--header:80px;
	--container:1200px;
	--wide:1680px;
	--inner:2%;
	--fontcolor:#282828;
	--keycolor:#1676b9;
}
:root img{
	transition:opacity .4s,filter .4s;
}
:root a{
	transition:var(--hover);
}
:root sup{
	vertical-align:text-top;
	font-size:0.66em;
}
html {
	background: #FFFFFF;
	color: var(--fontcolor);
	font-size: 16px;
	line-height: 1.4;
	scroll-padding:var(--header);
	scroll-behavior:smooth;
	font-feature-settings:'palt';
}
body{
	font-family: "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
}
html .goti{
	font-family: "Noto Sans JP", sans-serif;
}
html .mincho{
	font-family: "Zen Old Mincho", serif;
}
body {
	width: 100%;
	font-size: 100%;
	min-width: var(--container);
}
main {
	overflow: clip;
	width: 100%;
}
body img,
body svg {
	max-width: 100%;
	height: auto;
}
*:has(ruby){
	line-height:2;
}
ruby {
	position:relative;
	letter-spacing:0.1em;
	z-index:2;
}
ruby rt{
	position:absolute;
	top:-0.75em;
	font-size:min(0.45em,0.85rem)!important;
	margin:0 auto;
	left:0;
	right:0;
	text-align:center;
	letter-spacing:-0.03em;
	z-index:-1;
}
.sitewrap {
	width: var(--container);
	min-width: var(--container);
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
}
*:has( > .sitewrap ){
	width:100%;
	overflow: clip;
}
.center_content {
	text-align:center;
}
.center_content > *{
	margin-inline:auto;
}
.right_content {
	text-align:right;
}
.right_content > *{
	margin-inline:auto 0;
}
@media screen and (max-width:1400px) {
	body,
	.sitewrap {
		width: 100%;
		min-width: 0;
	}
	.sitewrap  {
		padding-inline:var(--inner);
	}
}
@media screen and (max-width:767px) {
	:root{
		--inner:15px;
		--header: 80px;
	}
	html {
		font-size: 14px;
	}
}
/* header
-------------------------------------------------------------------*/
header#fix_menu {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	right: 0;
	display:flex;
	align-items:center;
	transition: top .4s .2s, background .2s;
	padding: 1.5em 1.5em;
	color:#fff;
	height:var(--header)
}
header #site_ttl {
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:0.5em;
}
header #site_ttl a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5em;
	text-decoration: none;
}
header #site_ttl a img{
	display:block;
	max-width:inherit;
}
@media screen and (min-width:1921px) {
	:is(header,main){
		max-width:1920px;
		margin-inline:auto;
	}
}
@media screen and (max-width:767px) {
	header#fix_menu{
		padding: 1rem;
		align-items: center;
		height:var(--header);
	}
	header #site_ttl{
		text-align: left;
		padding:0;
	}
	header #site_ttl a img{
		height:15px;
		width:auto;
	}

}
/* contents
-------------------------------------------------------------------*/
section.visual{
	padding-top:10.5em;
	background:url(../img/kv_bg01.png) no-repeat top center / auto #49a1d9;
	background-repeat:no-repeat;
	position:relative;
	z-index:2;
}
section.visual .kv{
	max-width:1500px;
	margin-inline:auto;
}
section.visual .kv .grd-bar{
	font-size:1.55rem;
}
section.visual .kv hgroup h1{
	filter:drop-shadow(0 0 5px rgba(255, 255, 255, 1)) drop-shadow(0 0 10px rgba(255, 255, 255, 1));
}
section.visual .kv hgroup h1 em{
	display:block;
	font-size:6.25rem;
	font-weight:900;
	background: #1676B9;
	background: linear-gradient(-15deg,rgba(22, 118, 185, 1) 50%, rgba(78, 190, 248, 1) 100%);
    color: transparent;
	background-clip: text;
	width:fit-content;
	line-height:1;
	margin-block:0.25em 0.20em;
	letter-spacing:-0.0em
}
section.visual .kv hgroup h1 b{
	display:block;
	font-size:2.5rem;
	font-weight:700;
	letter-spacing:-0.03em
}
section.visual .kv hgroup h1 i{
	font-size:2.25rem;
	display:inline-block;
	margin-left:0.5em;
	letter-spacing:-0.2em;
}
section.visual .kv hgroup .grd-bar{
	margin-bottom:0;
}
:root :is(.grd-bar,.grd-bar-wrap > span){
	background: #1676B9;
	background: linear-gradient(90deg,rgba(22, 118, 185, 1) 50%, rgba(78, 190, 248, 1) 100%);
	color:#fff;
	font-size:2rem;
	font-weight: 600;
	width:fit-content;
	padding: 0.2em 1.25em 0.25em;
	line-height:1.25;
	border-radius:2em;
	text-shadow:0 0 4px rgba(0, 16, 32, 0.5);
	margin-bottom: 0.75em;
	letter-spacing: 0.03em;
	display:block;
}
:root .line-bar{
	font-size:1.5rem;
	color:var(--keycolor);
	font-weight:600;
	border-bottom:solid 1px var(--fontcolor);
	margin-bottom:0.75em;
	position:relative;
	z-index:2;	
}
:root .line-bar:after{
	content:"";
	display:block;
	height:1px;
	background:var(--fontcolor);
	margin-block:0.5em 0.15em;
}
:root i.caption{
	display:grid;
	font-size:0.75rem;
	width:fit-content;
	gap:0;
	line-height:1.6;
	letter-spacing:0.09em;
}
:root i.caption span{
	display:inline-block;
	grid-column: 2;
}
section.visual .kv .lead{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	/* margin-bottom:1.5em; */
}
section.visual .kv .left_area{
	max-width:738px;
	flex-grow:1;
	color:#fff;
	text-shadow:0 0 10px rgba(0,144,206,1), 0 0 20px rgba(0,144,206,1), 0 0 45px rgba(0,144,206,0.5);
}
section.visual .kv .lead_ttl {
	position:relative;
	z-index:1;
	margin-bottom: 2.5em;
	margin-top:4em;
	color:#fff;
	text-shadow:0 0 10px rgba(0,144,206,1), 0 0 20px rgba(0,144,206,1), 0 0 45px rgba(0,144,206,0.5);
}
section.visual .kv .lead_ttl .flt{
	font-size:1.625rem;
	color:#fff;
	font-weight:800;
	position:absolute;
	top:0.65em;
	left:0;
}
section.visual .kv .lead_ttl .ttl_body{
	display:flex;
	align-items:baseline;
}
section.visual .kv .lead_ttl .ttl_body p{
	font-size:3.58rem;
	font-weight:900;
	line-height:1;
}
section.visual .kv .lead_ttl .ttl_body em{
	font-size:1.615em;
	display:inline-block;
	transform:skewX(-10deg);
}
section.visual .kv .lead_ttl .ttl_body b{
	font-size:1.76em;
}
section.visual .kv .lead_ttl .ttl_body sup{
	font-size:1.62rem;
	vertical-align:text-top;
}
section.visual .kv dl dt{
	background:#fff;
	text-shadow:none;
	color:var(--keycolor);
	font-size:1.5rem;
	font-weight:600;
	padding:0.15em 1em 0.2em;
	width:fit-content;
	border-radius:0.75rem 0.75rem 0 0;
}
section.visual .kv dd{
	border-top:solid 2px #fff;
	padding-block:1em;
	font-size:1.125rem;
	line-height:1.75;
	letter-spacing:0.09em;
	text-shadow:0 0 10px rgba(0,144,206,1), 0 0 20px rgba(0,77,103,1), 0 0 45px rgba(0,77,103,1);
}
section.visual .kv dd .caption{
	margin-top:1em;
}
section.visual .kv ul{
	display:flex;
	justify-content:space-between;
	max-width:670px;
	flex-grow:1;
	margin-block: auto 0;
}
section.visual .kv ul li a{
	display:flex;
	align-items:center;
	justify-content:center;
	height:236px;
	aspect-ratio:1 / 1;
	background:url(../img/kv_orb.png) no-repeat top center /contain;
	font-size:2rem;
	text-align:center;
	color:#fff;
	line-height:1.2;
	text-shadow:0 0 20px rgba(204, 105, 21,1), 0 0 10px rgba(204, 105, 21,1), 0 0 5px rgba(204, 105, 21,1);	
	text-decoration:none;
}
section.visual .bg_wrap2{
	background:url(../img/kv_bg02.png) no-repeat top center / auto;
	padding-top:4.5em;
	margin-top:1.25em;
}
section.visual .sitewrap h2{
	text-align:center;
	color:#fff;
	font-size:4.25rem;
	text-shadow:0 0 10px rgba(0,144,206,1), 0 0 20px rgba(0,144,206,1), 0 0 45px rgba(0,144,206,0.5);
	margin-bottom:0.5em;
}
section.visual .sitewrap h2 em{
	font-size:1.323em;
	display:inline-block;
	margin-inline:-0.5em;
}
section.visual .sitewrap h2 span{
	display:inline-block;
}
section.visual .sitewrap h2 span:first-letter{
	font-size:0.855em;
}
section.visual .sitewrap ul{
	display:flex;
	justify-content:space-between;
	padding-bottom:33em;
	gap:4%;
}
section.visual .sitewrap ul li{
	display:flex;
	flex:1;
	align-items:center;
	justify-content:center;
	background:rgba(255,255,255,0.7);
	padding:1.5em 1em;
	border-radius:0.75rem;
	font-size:1.125rem;
	flex-direction:column;
	box-shadow:0 0 15px rgba(0,144,206,0.5);
	transition:var(--hover);
	text-decoration:none;
	text-align:center;
}
section.visual .sitewrap ul li p{
	font-weight:500;
}
@media (any-hover: hover) {
	section.visual .sitewrap ul li a:hover{
		background:rgba(255,255,255,1);
		box-shadow:0 0 0px rgba(0,144,206,0);
		transform:translateY(0.5em);
	}
}
section.visual .sitewrap ul li h3{
	font-size:1.75rem;
	color:var(--keycolor);
	margin-bottom:0.35em;
	text-align:center;
	font-weight:600;
}
section.visual .sitewrap ul li h3 em{
	font-size:1.14em;
}
/**/
#feature01{
	margin-top:-20em;
	position:relative;
	z-index:2;
}
#feature01:after{
	content:"";
	display:block;
	position:absolute;
	inset:12em 0 0;
	z-index:-2;
	background:#caeaf9;
}
:root .main-ttl{
	font-size:3.875rem;
	text-align:center;
	color:var(--keycolor);
	text-shadow:0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,1), 0 0 30px rgba(255,255,255,1);
	font-weight:800;
	margin-bottom:1em;
	letter-spacing:-0.08em;
}
#feature01 {
	overflow:clip;
	padding-bottom: 5em;
}
#feature01 .sitewrap{
	overflow:visible;
}
#feature01 .box{
	position:relative;
	z-index:2;
	padding: 4em 2em 5em;
	margin-block:6.5em 0;
}
#feature01 .box:after{
	content:"";
	display:block;
	inset:0;
	margin:-5em -5em 0;
	position:absolute;
	z-index:-1;
	background:url(../img/bg_buller.png) top center no-repeat;
}

#feature01 .box .box-block p{
	line-height:2;
	letter-spacing:0.06em;
}
#feature01 .box .box-block{
	margin-bottom: 3.5em;
}
#feature01 .box .box-block.flex{
	position:relative;
	display:flex;
	z-index:3;
	gap: 0em 4em;
	flex-wrap:wrap;
}
#feature01 .box .box-block.flex .inner{
	flex:1;
}
#feature01 .box .box-block .full{
	flex-basis:100%;
	margin-top:0.5em;
}
#feature01 .box .box-block.img-fit{
	gap:5em;
	margin-bottom: 2em;
}
#feature01 .box .box-block.img-fit .buller_wrap{
	margin:-8em -6.5em -6.5em;
	position:relative;
	z-index:-1;
}
#feature01 .box .box-block.flex .buller_wrap img{
	max-width:fit-content;
	mask-image:
    linear-gradient(to bottom, transparent, #FFF 10%),
    linear-gradient(to top, transparent, #FFF 10%),
    linear-gradient(to right, transparent, #FFF 10%),
    linear-gradient(to left, transparent, #FFF 10%);
	mask-composite: intersect;
}
#feature01 .box .box-block{
	font-size:1.125rem;
}
#feature01 .box .box-block .inner:has(h4) {
	font-size:1rem;
}
#feature01 .sub-box{
	background:rgba(255,255,255,1);
	padding:2em 4em;
	margin-bottom:5em;
	display:flex;
	flex-direction:column;
	align-items:center;
	border-radius:0.5rem;
	box-shadow:0 0 10px rgba(0,144,206,0.25);
}
#feature01 .sub-box .flex{
	display:flex;
	gap:2em;
	font-size:1.175rem;
	line-height:1.8;
	margin-bottom:1.0em;
	align-items:center;
	letter-spacing:0.06em;
	border-bottom:dotted 2px #caeaf9;
	padding-bottom:1em;
}
#feature01 .sub-box .flex h3{
	white-space:nowrap;
	font-size:1.65rem;
	color:var(--keycolor);
	font-weight:800;
	line-height:1.35;
	text-align:center;
}
#feature01 .sub-box .flex p{
	font-weight:600;
}
#feature01 .sub-box .flex sup{
	font-size:0.66em;
	vertical-align:text-top;
}
#feature01 .sub-box .txt_indent{
	font-size:0.875rem;
	letter-spacing:0.06em;
}
#feature02{
	position:relative;
	z-index:2;
	background:#caeaf9;
}
#feature02 .bg01{
	background:url(../img/point02_bg01.png) no-repeat top center / auto;
	padding-block: 15em 2em;
	margin-top:-7.5em;
	--height:1400px;
	position:relative;
	z-index:2;
}
#feature02 .bg01:after{
	content:"";
	display:block;
	inset:var(--height) 0 0;
	background:url(../img/point02_bg02.png) no-repeat top center / auto;
	position:absolute;
	z-index:-1;
}
#feature02 .flex{
	display:flex;
	gap:2em;
	position:relative;
	z-index:3;
	align-items:center;
	margin-bottom:3em;
}
#feature02 .flex .inner{
	flex:1;
}
#feature02 .flex .inner p{
	font-weight:500;
	font-size:1.125rem;
	line-height:2.25;
	font-weight:500;
	letter-spacing:0.06em;
}
#feature02 .box-block.img-fit{
	gap:2em;
	margin-bottom: 0em;
}
#feature02 .box-block.img-fit .wrap{
	margin:-4em -1em -6em;
	position:relative;
	z-index:-1;
}
#feature02 .box-block.img-fit .wrap img{
	max-width:fit-content;
}
#feature02 .figure-box{
	border:solid 1px #caeaf9;
	background:#fff;
	padding:2.5em 1em;
	text-align:center;
	max-width:600px;
	border-radius:0.5rem;
	min-height:268px;
	display:flex;
	flex-direction:column;
	justify-content:center;
}
#feature02 .figure-box :is(figcaption, .video p){
	display:flex;
	align-items:center;
	margin-bottom:2em;
	width:100%;
	justify-content:space-between;
	max-width:494px;
	margin-inline:auto;
}
#feature02 .figure-box :is(figcaption, .video p):before,
#feature02 .figure-box :is(figcaption, .video p):after{
	content:"";
	display:block;
	height:3.5em;
	width:1.25em;
	border:solid 2px var(--fontcolor);
	border-right:none;
}
#feature02 .figure-box :is(figcaption, .video p):after{
	transform:rotate(180deg);
}
#feature02 .figure-box .video :is(iframe,img){
	max-width:100%;
	height:auto;
	display:block;
	aspect-ratio:16 / 9;
	margin-inline:auto;
	object-fit:cover;
}
#feature02 .figure-box .video a{
	display:block;
	position:relative;
	z-index:2;
}
#feature02 .figure-box .video a:before,
#feature02 .figure-box .video a:after{
	content:"";
	display:block;
	z-index:1;
	inset:0;
	margin:auto;
	position:absolute;
}
#feature02 .figure-box .video a:before{
	background:#ff0000;
	width:4.5em;
	aspect-ratio:1 / 0.66;
	border-radius:1em;	
}
#feature02 .figure-box .video a:after{
	background:#fff;
	clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
	width:1.05em;
	aspect-ratio:0.95 / 1;
}


#feature02 :is(.grd-bar,.grd-bar-wrap > span){
	letter-spacing:-0.03em;
	padding-inline:0.75em;
}
#feature02 .bg02{
	position:relative;
	z-index:2;
	padding-bottom: 32.875em;
}
#feature02 .bg02:after{
	background:url(../img/point02_bg02.png) no-repeat top center / auto;
	content:"";
	display:block;
	position:absolute;
	z-index:-1;
	inset: -10em 0 0; 
}
#feature02 .bg02 .flex figure img{
	max-width:fit-content;
}
#feature02 .bg02 .figures{
	display:flex;
	justify-content:space-between;
	gap:2%;
	text-align:center;
}
#feature02 .bg02 .figures figure{
	flex:1;
}
#feature02 .bg02 .figures figcaption{
	margin-top:1em;
	font-size:1.25rem;
}
#feature03{
	position:relative;
	z-index:2;
	margin-top:-16em;
	padding-bottom:6.56em;
}
#feature03:after{
	background:url(../img/point03_bg.png) no-repeat bottom center / auto;
	content:"";
	display:block;
	position:absolute;
	z-index:-2;
	inset: -16em 0 0;
	mask-image: linear-gradient(to bottom, transparent 0%, black 25%);
}
#feature03 .box{
	background:rgba(255,255,255,0.72);
	border-radius:0.5rem;
	padding:4em 7.5em;
	margin-inline: -1.75em;
	display:flex;
	flex-direction:column;
	gap:1em;
	align-items:stretch;
}
#feature03 .box h3{
	margin-inline:auto;
}
#feature03 .box ul{
	display:flex;
	flex-direction:column;
	gap:2em;
	margin-top: 1em;
}
#feature03 .box li{
	background:#f4d2ae;
	display:flex;
	padding:1.5em 3em;
	gap:3em;
	border-radius:0.35rem;
}
#feature03 .box li:nth-child(2){
	background:#ede9d9;
}
#feature03 .box li:nth-child(3){
	background:#d6e7d8;
}
#feature03 .box li .ttl{
	display:flex;
	flex-direction:column;
	gap:2em;
	padding-inline:0 3em;
	border-right:solid 2px #fff;
	justify-content:center;
}
#feature03 .box li .ttl h3{
	font-size:1.75rem;
	font-weight:600;
}
#feature03 .box li .body{
	display:flex;
	justify-content:space-between;
	flex-grow:1;
	gap:2%;
}
#feature03 .box li .body .figure{
	position:relative;
	z-index:1;
}
#feature03 .box li .body .figure h4{
	font-size:1.25rem;
	width:fit-content;
	margin:0 auto -1rem;
	position:relative;
	z-index:2;
	padding: 0 2rem;
	font-weight:500;
	background:#bdc7cd;
	min-width: 7.75rem;
	text-align:center;
	border-radius:2rem;
	display:flex;
	align-items:center;
	justify-content:center;
	height: 2.3125rem;
}
#feature03 .box li .body .figure:nth-child(2) h4{
	background:var(--keycolor);
	color:#fff;
	font-weight:700;
	font-size:1.75rem;
}
#feature03 .box li .body .figure figcaption{
	text-align:center;
	margin-top:0.5em;
	font-size:1.125rem;
}
#feature03 .box li a{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#fff;
	min-height:3em;
	padding:0.5em 1em;
	border-radius:2em;
	gap:0.25em;
	position:relative;
	cursor:pointer;
	text-decoration:none;
	transition:var(--hover);
}
#feature03 .box li a:before{
	content:"";
	display:block;
	height:1em;
	aspect-ratio:1 / 1;
	border:solid 1px var(--keycolor);
	border-radius:50%;
	position:relative;
	z-index:1;
	transition:border-color .4s;
}
#feature03 .box li a span:before{
	position:absolute;
	left:1.45em;
	top:50%;
	z-index:2;
	content:"";
	display:block;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	background:var(--keycolor);
	width:0.375em;
	aspect-ratio:0.75 / 1;
	transform:translateY(-50%);
	transition:background-color .4s;
}
@media (any-hover: hover) {
	#feature03 .box li a:hover{
		background:var(--keycolor);
		color:#fff;
	}
	#feature03 .box li a:hover:before{
		border-color:#fff;
	}
	#feature03 .box li a:hover span:before{
		background-color:#fff;
	}
}
#feature03 .box .txt_indent{
	font-size:0.875rem;	
}
:is(#other,#product) {
	padding-block: 6em;
	background:url(../img/point03_bg02.jpg)  top center ;
}
:is(#other,#product) .box{
	background:#fff;
	padding:3.75em;
	border-radius:0.75rem;
	box-shadow: 0 0 15px rgba(0,0,0,0.15);
}
:is(#other,#product) .box .mincho{
	font-size:2.25rem;
	font-weight:800;
	text-align:center;
	margin-bottom:1em;
}
:is(#other,#product) .flex{
	margin-top:4em;
	display:flex;
	gap:3em;
}
#other .box > p{
	font-size:1.125rem;
	line-height:2;
	font-weight:500;
}
:is(#other,#product) .inner{
	flex:1;
}
:root .ttlbox {
	display:flex;
	flex-direction:column;
	gap:1em;
}
:root .ttlbox li{
	border:solid 3px #caeaf9;
	padding:2em 2em;
}
:root .ttlbox li h5{
	font-size:1.25rem;
	font-weight:600;
	color:var(--keycolor);
	margin-bottom:1em;
}
#other .box .ttlbox{
	margin-top:2em;
}
#other .box figure{
	margin-top:2em;
}
#other .box figure figcaption{
	text-align:right;
	margin-top:0.5em;
	font-size:0.875rem;
}
#product {
	background:#eceff1;
	padding-block:6em;
}
:root .solid-bar{
	font-size:1.5rem;
	font-weight:700;
	color:var(--keycolor);
	border-bottom:solid 1px var(--fontcolor);
	padding-bottom:0.75em;
	margin-bottom:0.75em;
}
:root .subttl{
	font-weight:600;
	font-size:1.25rem;
	margin-bottom:0.5em;
}
#product .flex{
	margin-top:0em;
	display:flex;
	gap:3em;
}
:root figure.table_wrap:not(:last-of-type){
	margin-bottom:2em;
}
:root figure.table_wrap{
	margin-inline:-0.35em;
}
:root figure.table_wrap table{
	width:100%;
	border-collapse: separate;
	border-spacing: 0.35em; 
}
:root figure.table_wrap table :is(th,td){
	padding:0.5em;
	text-align:center;
	background:#eceff1;
}
:root figure.table_wrap table th{
	background:var(--keycolor);
	color:#fff;
}
.dl-btn{
	margin-block:4em 6em;
}
.dl-btn a{
	display:flex;
	align-items:center;
	justify-content:center;
	max-width:720px;
	margin-inline:auto;
	border:solid 5px #fff;
	position:relative;
	z-index:2;
	color:#fff;
	font-size:1.75rem;
	padding:1em;
	text-decoration:none;
	box-shadow: 0 0 15px rgba(0,0,0,0.15);
	gap:0.5em;
	background: #fff;
}
.dl-btn a:after{
	content:"";
	display:block;
	position:absolute;
	z-index:-1;
	inset:0;
	background: #1676B9;
	background: linear-gradient(0deg, rgba(22, 118, 185, 1) 50%, rgba(78, 190, 248, 1) 100%);
	transition:opacity .4s;
}
.dl-btn a:before{
	content:"";
	display:block;
	height:1em;
	aspect-ratio:1 / 1;
	background: #fff;
	mask-image: url('../img/icon_dl.png');
	mask-size: contain;
	position:relative;
	z-index:2;
	transition:background .4s;
}
:root .links {
	display:flex;
	justify-content:center;
	gap:4em;
	flex-wrap:wrap;	
}
:root .links a{
	text-decoration-color:var(--fontcolor);
	text-underline-offset:0.5em;
	font-weight:600;
}
@media (any-hover: hover) {
	.dl-btn a:hover{
		text-decoration:none;
		color:#1676B9;
	}
	.dl-btn a:hover:after{
		opacity:0.1;
	}
	.dl-btn a:hover:before{
		background-color: #1676B9;
	}
	:root .links a:hover{
		text-decoration-color:transparent;
	}
}

/* footer
-------------------------------------------------------------------*/
#pageTop {
	position: fixed;
	z-index: 500;
	bottom: 2.55%;
	right: 10%;
}
#pageTop a{
	position:relative;
	height:70px;
	aspect-ratio:1 / 1;
	text-indent:-999px;
	overflow:hidden;
	background:var(--keycolor);
	border:solid 3px #fff;
	box-shadow:0 0 10px rgba(0,0,0,0.5);
	border-radius:0.25em;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:transform .4s;
}
#pageTop a::after {
	content:"";
	display:block;
	background:#fff;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
	width:1.25em;
	aspect-ratio:1 / 0.85;
	position:absolute;
	inset:0;
	margin:auto;
	z-index:2;
}

footer{
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	padding-block:1.5em 1em;
	gap:1em;
}
footer small{
	font-size:0.875rem;
}
@media (any-hover: hover) {
	a.pagetop:hover{
		transform:translateY(-0.5em);
		text-decoration-color:transparent;
		background:#fff;
		color:var(--fontcolor);
	}
	a.pagetop:hover:before{
		border-color:var(--fontcolor);
	}

}
@media screen and (max-width:1400px) {
	section.visual{
		background-position-x:90%;
	}
	section.visual > *{
		padding-inline:var(--inner);
	}
	section.visual .kv .lead_ttl {
	}
	
	section.visual .kv .lead_ttl .ttl_body{
		flex-direction:column;
		align-items:flex-end;
		gap:0.5em;
		width:fit-content;
	}
	section.visual .kv .lead{
		align-items:flex-start;
		position:relative;
	}
	section.visual .kv .left_area{
		padding-right:4%;
		max-width:calc(100% - 400px)
	}
	section.visual .kv ul{
		flex-wrap:wrap;
		gap:4%;
		justify-content:center;
		width:400px;
		position:absolute;
		right:0;
		bottom:0;
	}
	section.visual .kv ul li{
		flex-basis:48%;
	}
	section.visual .kv ul li a{
		height:auto;
		background-size:110%;
		background-position:50% 50%;
	}
	section.visual .kv ul li:nth-child(1){
		margin-inline:4%;
	}
	section.visual .bg_wrap2 .sitewrap{
		padding-inline:0;
	}
	#feature01 .box .box-block.flex .inner,
	#feature01 .box .box-block.flex .buller_wrap,
	#feature02 .box-block.img-fit .wrap{
		flex:1;
	}
	#feature02 .box-block.img-fit .wrap img,
	#feature01 .box .box-block.flex .buller_wrap img,
	#feature02 .bg02 .flex figure img{
		max-width:100%;
	}
	#feature02 .box-block.img-fit{
		margin-bottom:2em;
	}
	#feature03 .box{
		margin-inline:auto;
		padding-inline:var(--inner);
	}
	:root :is(.grd-bar,.grd-bar-wrap > span){
		font-size:1.75rem;
	}
}
@media screen and (max-width:990px) {
	section.visual .kv .lead{
		flex-direction:column-reverse;
	}
	section.visual .kv .left_area{
		margin-top:1.45em;
		max-width:100%;
		padding-right:0;
	}
	section.visual .kv .lead_ttl {
		position:relative;
		z-index:1;
		margin-bottom: 3em;
		text-shadow:0 0 5px rgba(0,144,206,1), 0 0 10px rgba(0,77,103,1), 0 0 20px rgba(0,77,103,1);
	}
	section.visual .kv .lead_ttl .flt{
		position:static;
		margin-bottom:-1.25em;
	}
	section.visual .kv .lead_ttl .ttl_body{
		display:flex;
		align-items:baseline;
	}
	section.visual .kv ul{
		gap:2%;
		justify-content:center;
		margin-inline:auto;
		width:100%;
		position:static;
	}
	section.visual .kv ul li{
		flex-basis:32%;
	}
	section.visual .kv ul li:nth-child(1){
		margin:0;
	}
}
@media screen and (max-width:767px) {
	section.visual{
		padding-top:6em;
		background-size:250%;
	}
	section.visual .kv hgroup h1{
		text-shadow:0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1);
	}
	section.visual .kv hgroup h1 em{
		font-size: 3.15rem;
		margin-block:0.25em 0.20em;
		background:none;
		color:var(--keycolor);
	}
	section.visual .kv hgroup h1 b{
		font-size: 1.375rem;
		letter-spacing: 0;
	}
	section.visual .kv hgroup h1 i{
		font-size:1.25rem;
	}
	section.visual .kv hgroup .grd-bar{
		font-size: 1.125rem;
	}
	:root :is(.grd-bar,.grd-bar-wrap > span){
		font-size:1.175rem;
		padding: 0.3em 0.75em 0.3em;
	}
	:root .line-bar{
		font-size:1.11rem;
		margin-bottom:0.75em;
	}
	:root .line-bar:after{
		margin-block:6px 3px;
	}
	:root i.caption{
		font-size:0.6785rem;
	}
	section.visual .kv .left_area{
		margin-top:1.45em;
		max-width:100%;
		padding-right:0;
	}
	section.visual .kv .lead_ttl {
		position:relative;
		z-index:1;
		margin-block:1.5em 1em;
	}
	section.visual .kv .lead_ttl .flt{
		font-size:1.125rem;
		position:static;
		margin-bottom:-1.25em;
	}
	section.visual .kv .lead_ttl .ttl_body{
		display:flex;
		align-items:baseline;
	}
	section.visual .kv .lead_ttl .ttl_body p{
		font-size:2.25rem;
	}
	section.visual .kv .lead_ttl .ttl_body em{
		font-size:1.25em;
	}
	section.visual .kv .lead_ttl .ttl_body b{
		font-size:1.5em;
	}
	section.visual .kv dl dt{
		font-size:1.25rem;
	}
	section.visual .kv dd{
		font-size:0.81rem;
		letter-spacing:0.03em;
		text-shadow:0 0 5px rgba(0,144,206,1), 0 0 10px rgba(0,77,103,1), 0 0 20px rgba(0,77,103,1);
	}
	section.visual .kv ul{
		max-width:300px;
	}
	section.visual .kv ul li a{
		font-size:1.15rem;
	}
	section.visual .bg_wrap2{
		padding-top:2.5em;
		margin-top:0;
		position:relative;
		z-index:2;
		background-size:150% auto;
		background-position:bottom;
	}
	section.visual .sitewrap h2{
		font-size:1.875rem;
	}
	section.visual .sitewrap ul{
		padding-bottom: 5em;
		gap:1em;
		flex-direction:column;
		max-width:280px;
		margin-inline:auto;
	}
	section.visual .sitewrap ul li{
		padding:0.75em 1em;
		border-radius:0.5rem;
		font-size:0.875rem;
		background:rgba(255,255,255,0.9);
	}
	section.visual .sitewrap ul li h3{
		font-size:1.35rem;
	}
	#feature01{
		margin-top:-2em;
		background:#e9f8ff;
		padding-top: 0em;
	}
	#feature01:after{
		content:"";
		display:block;
		position:absolute;
		inset:0;
		z-index:-2;
	}
	:root .main-ttl{
		font-size:2.66rem;
		text-shadow:0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1), 0 0 15px rgba(255,255,255,1);
	}
	#feature01 .box{
		padding: 2em 0em 0em;
		margin-block:0;
	}
	#feature01 .box:after{
		margin:-5em -2em 0;
		background:url(../img/bg_buller.png) top center no-repeat;
	}
	#feature01 .box .box-block{
		margin-block:2em;
	}
	#feature01 .box .box-block p{
		line-height:1.8;
		font-size:0.875rem;		
		letter-spacing:0.03em;
		text-shadow:0 0 2px rgba(255,255,255,1), 0 0 5px rgba(255,255,255,1), 0 0 10px rgba(255,255,255,1);
	}
	#feature01 .box .box-block.flex{
		flex-direction:column;
		gap:0em;
	}
	#feature01 .box .box-block.img-fit{
		gap:0em;
		margin-bottom: 2em;
	}
	#feature01 .box .box-block.flex .full{
	}
	#feature01 .box .box-block.img-fit .buller_wrap{
		margin:-2em -3.5em -3em;
	}
	#feature01 .box .box-block.flex .buller_wrap img{
		max-width:100%;
	}
	#feature01 .box .box-block.flex .inner:nth-child(n+2):has(.line-bar){
		margin-top:2em;		
	}
	#feature01 .box .box-block{
		font-size:1.125rem;
	}
	#feature01 .sub-box{
		padding:1em 1em;
	}
	#feature01 .sub-box .flex{
		display:flex;
		flex-direction:column;
		gap:1em;
		font-size:0.875rem;
		line-height:1.5;
	}
	#feature01 .sub-box .flex h3{
		font-size:1.25rem;
		text-align:center;
	}
	#feature01 .sub-box .txt_indent{
		font-size:0.75rem;
		letter-spacing:0em;
	}
	#feature02 .bg01{
		padding-block: 0;
		margin-top:-5em;
		--height:700px;
	}
	#feature02 .bg01:after{
		inset:var(--height) 0 0;
		background-size:auto 100%;
	}
	#feature02 .flex{
		gap: 1em;
		margin-bottom:3em;
		flex-direction:column;
	}
	#feature02 .flex .inner p{
		font-size:0.875rem;
		line-height:1.8;
		letter-spacing:0.03em;
	}
	#feature02 .box-block.img-fit{
		gap:2em;
		margin-bottom: 0em;
	}
	#feature02 .box-block.img-fit .wrap{
		margin:-4em 5em 0em;
		position:relative;
		z-index:-1;
	}
	#feature02 .box-block.img-fit .wrap img{
		max-width:100%;
	}
	#feature02 .figure-box{
		padding:1.5em 1em 1.5em;
		min-height:0;
	}
	#feature02 .figure-box :is(figcaption,.video p){
		margin-bottom:1em;
	}
	#feature02 .figure-box :is(figcaption,.video p):before,
	#feature02 .figure-box :is(figcaption,.video p):after{
		height:2em;
		width:0.5em;
		border-width:1px;
	}
	#feature02 :is(.grd-bar,.grd-bar-wrap > span){
		letter-spacing:-0.03em;
		padding-inline:0.75em;
	}
	#feature02 .bg02{
		position:relative;
		z-index:2;
		padding-bottom: 17.5em;
		background: #FFF;
		background: linear-gradient(0deg, rgba(255, 255, 255, 1) 80%, rgba(239, 249, 253, 0) 100%);
	}
	#feature02 .bg02:after{
		inset:auto -25% 0%;
		margin:0;
		aspect-ratio:192 / 140;
		background-size:150% auto;
		background-position:bottom center;
	}
	#feature02 .bg02 .flex figure img{
		max-width:100%;
	}
	#feature02 .bg02 .figures{
		gap:1em 4%;
		flex-wrap:wrap;
		margin-inline:1em;
	}
	#feature02 .bg02 .figures figure{
		flex-basis:48%;
	}
	#feature02 .bg02 .figures figcaption{
		margin-top:0.5em;
		font-size:0.75rem;
	}
	#feature03{
		position:relative;
		z-index:2;
		margin-top:-10em;
		padding-bottom: 3em;
	}
	#feature03:after{
		z-index:-2;
		inset:-10em 0 0;
	}
	#feature03 .box{
		padding: 2em 1em 1em;
		margin-inline:0em;
		gap: 0;
	}
	#feature03 .box > h3{
		width:calc(100% - 2em);
		text-align:center;
	}
	#feature03 .box ul{
		display:flex;
		flex-direction:column;
		gap:2em;
		margin-top: 1em;
	}
	#feature03 .box li{
		padding:1em 1em 5em;
		gap:1em;
		flex-direction:column;
		position:relative;
		align-items: center;
	}
	#feature03 .box li .ttl{
		gap:1em;
		padding-inline:0;
		border:none;
	}
	#feature03 .box li .ttl h3{
		font-size: 1.25rem;
	}
	#feature03 .box li .body .figure{
		position:relative;
		z-index:1;
	}
	#feature03 .box li .body .figure h4{
		font-size:1rem;
		min-width: 8em;
		padding:0.25em 0.5em;
	}
	#feature03 .box li .body .figure:nth-child(2) h4{
		font-size:1rem;
	}
	#feature03 .box li .body .figure figcaption{
		margin-top:0.5em;
		font-size:0.75rem;
	}
	#feature03 .box li a{
		position:absolute;
		inset: auto 0 1em;
		width:fit-content;
		margin:0 auto;
	}
	#feature03 .box .txt_indent{
		font-size:0.75rem;
		margin-top:1em;
	}
	:is(#other,#product) {
		padding-block: 3em;
		background-size:cover;
	}
	:is(#other,#product) .box{
		padding:1.5em;
	}
	:is(#other,#product) .box .mincho{
		font-size:1.4rem;
	}
	:is(#other,#product) .flex{
		margin-top:2em;
		gap:2em;
		flex-direction:column;
		font-size:0.875rem;
	}
	#other .box > p{
		font-size:0.875rem;
		line-height:1.8;
	}
	#other .box > ul {
		font-size:0.8rem;
	}
	#other .box > ul li{
		margin-top:0.5em;
	}
	:root .ttlbox li{
		border:solid 2px #caeaf9;
		padding:1em 1em;
	}
	:root .ttlbox li h5{
		font-size:1rem;
		margin-bottom:0.75em;
	}
	#other .box figure figcaption{
		font-size:0.75rem;
	}
	:root .solid-bar{
		font-size:1.25rem;
		font-weight:600;
		padding-bottom:0.5em;
		margin-bottom:0.5em;
	}
	:root .subttl{
		font-weight:600;
		font-size:1rem;
	}
	#product .flex{
		margin-top:0em;
		gap:1em;
	}
	:root figure.table_wrap table :is(th,td){
		font-size:0.75rem;
	}
	:root figure.table_wrap table th{
		background:var(--keycolor);
		color:#fff;
	}
	.dl-btn{
		margin:3em 1em 3em;
	}
	.dl-btn a{
		border:solid 3px #fff;
		position:relative;
		z-index:2;
		color:#fff;
		font-size:1.2rem;
		padding:1em 0.5em;
	}
	:root .links {
		display:flex;
		justify-content:center;
		gap:1em 2em;
		flex-wrap:wrap;
		font-size:0.75rem
	}
	:root .links img{
		width:250px;
	}
	#pageTop{
		right:1em;
		bottom:1em;
	}
	#pageTop a{
		height:50px;
		border-width:2px;
	}
	#pageTop a:after{
		width:0.875em;
	}
	footer{
		display:flex;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		padding-block:1.5em 1em;
		gap:1em;
	}
	footer small{
		font-size:0.75rem;
	}
	footer img{
		width:100px;
	}
}
.modal-content {
	position: fixed;
	z-index: 1020;
	display: none;
	width: 80%;
	max-width: 800px;
	background: none;
	margin: 0px;
	padding: 10px 20px;
}
.modal-content .movie_wrap{
	width: 100%;
	aspect-ratio:16 / 9;
}
.movie_wrap iframe {
	display:block;
	width:100%;
	height:100%;
}
#modal-overlay {
	position: fixed;
	z-index: 1000;
	display: none;
	width: 100%;
	height: 120%;
	background-color: rgba(0, 0, 0, 0.66);
	top: 0px;
	left: 0px;
}
.modal-content .close_btn {
	position: absolute;
	z-index: 100;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	font-size: 2.5rem;
	font-weight: bold;
	color: rgb(255, 255, 255);
	line-height: 0.8;
	border-radius: 50%;
	aspect-ratio: 1/1;
	padding: 0.1em 0.15em 0.2em;
	top: -13%;
	right: 0;
	cursor: pointer;
	text-decoration: none;
		text-decoration:none;
}
.modal-content .close_btn:has(~ .movie_wrap) {
	top: -10%;
	right: 20px;
}
@media (any-hover: hover) {
	.modal-content .close_btn:hover {
		color: var(--keycolor);
		text-decoration:none;
	}
}
@media screen and (max-width: 767px) {
	.modal-content {
		width: 100%;
		padding: 15px;
		box-sizing: border-box;
	}
	.modal-content .close_btn {
		font-size: 2rem;
		right: 15px;
	}
}
/* print
-------------------------------------------------------------------*/
*html body {
	zoom:60%;
}