@charset "utf-8";


/* Google fonts import */

@import url("https://fonts.googleapis.com/earlyaccess/sawarabimincho.css"); /* mincho [font-family: "Sawarabi Mincho";] */
@import url("https://fonts.googleapis.com/earlyaccess/notosansjapanese.css"); /* gothic [font-family: "Noto Sans Japanese";] */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&display=swap&subset=japanese');



/*■reset----------------------------------------------*/
*{
	padding:0;
	margin:0;
}
h1,h2,h3,h4,h5,h6{
	font-size:14px;
	font-weight:normal;
}
ul,ol,li{
	list-style-type:none;
}
a{
	font-size:14px;
	transition:all 0.5s;
	display:block;
	text-decoration:none;
}
a:hover{
	opacity:0.7;
}
img{
	border:none;
	display:block;
	width:100%;
}
p{
	font-size:14px;
	line-height:140%;
}
html{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: "Noto Sans Japanese","Hiragino Sans","Yu Gothic",sans-serif;
}
body{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        font-family: "Noto Serif Japanese", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", 游明朝, YuMincho, HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	font-family: "Noto Sans Japanese","Hiragino Sans","Yu Gothic",sans-serif;
	background:#0A7CC1;
}



.fade_wrap{
	opacity:0;
	transition:all 1.5s;
}
.fade_wrap.on{
	opacity:1;
}
.fade_wrap_delay1{
	opacity:0;
	transition:all 1.5s;
}
.fade_wrap_delay1.on{
	opacity:1;
}



/* Header
--------------------------------------------------------------------- */

header{
	position:fixed;
	top:0;
	left:0;
	background:#0A7CC1;
	width:100%;
	z-index:10;
}
header .Area{
	position:relative;
	padding:12px;
}
header .Area a.logo{
	width:140px;
	margin-left:10px;
}
header .Area ul{
	width:75%;
	position:absolute;
	top:0;
	right:0;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
header .Area ul li{
	width:20%;
	position:relative;
}
header .Area ul li.active::after{
	content:"";
	display: block;
	height:3px;
	width:100%;
	background:#012F5E;
	position:absolute;
	bottom:0;
	left:0;
}
header .Area ul li a{
	font-size:14px;
	letter-spacing:1px;
	font-weight:500;
	color:#FFFFFF;
	text-align:center;
	padding:15px 0;
}
header .Area ul li ul{
	display:none;
	position:absolute;
	top:50px;
	left:50%;
	transform:translateX(-50%);
	padding:10px 12px;
	background:rgba(255,255,255,0.3);
	border-bottom-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top:solid 3px #012F5E;
}
#low header .Area ul li ul{
	background:#0A7CC1;
}
header .Area ul li:nth-child(1) ul{ width:98%; }
header .Area ul li:nth-child(2) ul{ width:72%; }
header .Area ul li:nth-child(3) ul{ width:105%; }
header .Area ul li:nth-child(4) ul{ width:55%; }
header .Area ul li:nth-child(5) ul{ width:55%; }
header .Area ul li ul li{
	width:100%;
}
header .Area ul li ul li a{
	font-size:12px;
	letter-spacing:1px;
	font-weight:500;
	color:#FFFFFF;
	text-align:left;
	padding:5px 0;
}
header .Area ul li ul li::after{
	display:none !important;
}



.WaterBtnWrap{
	display:block;
	margin:auto;
	margin-top:-50px;
	width:300px;
	height:300px;
	position:relative;
}
.WaterBtn{
	display:block;
	margin:auto;
	width:300px;
	height:300px;
	position:absolute;
	top:0;
	left:0;
}
.WaterBtn span{
	display:block;
	font-size:28px;
	font-weight:600;
	text-align:center;
	line-height:145%;
	letter-spacing:4px;
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	width:100%;
	color:#0A7CC1;
	z-index:5;
}



/* Wrap
--------------------------------------------------------------------- */

#Wrapper{
	width:100vw;
	height:100vh;
	background:#0A7CC1;
	position:relative;
}
#Wrapper.low{
	background:#FFFFFF;
}
#Wrapper.low.g{
	background:#F4F4F4;
}
.Contents{
	width:75%;
	margin:auto;
	padding-top:120px;
}
.Contents.w{
	width:92%;
	padding-top:80px;
}
@media screen and (min-width: 1280px) {
	.Contents{
		padding-top:175px;
	}
	.Contents.w{
		padding-top:130px;
	}
}





/* Top
--------------------------------------------------------------------- */

.TopTitle{
	width:100%;
	position:relative;
	top:20%;
}
.TopTitle img{
	opacity:0;
	transition:all 1.5s;
}
.TopTitle img.on{
	opacity:1;
}
.TopTitle img#Mv01{
	width:48%;
	margin:auto;
}
.TopTitle img#Mv02{
	width:60%;
	margin:auto;
	margin-top:40px;
}
.SlideBg{
	width:100%;
	height:200px;
	background:-webkit-linear-gradient(top,#52A4D6,#047DC4);
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
}
.SlideTx{
	width:98%;
	position:absolute;
	bottom:10px;
	left:1%;
	z-index:3;
}
.SlideTx div{
	width:100%;
	height:100%;
	position:relative;
}
.SlideTx div img{
	width:52%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.TopSlide{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	z-index:2;
}
@media screen and (min-width: 1280px) {
	.SlideBg{
		height:230px;
	}
}








.Dia_list{
	width:100%;
	z-index:10;
	position:relative;
}
.Dia_list ul li{
	margin-bottom:16px;
}
.Dia_list ul li a{
	font-size:28px;
	font-weight:600;
	letter-spacing:1px;
	padding-left:50px;
	position:relative;
	display:block;
	color:#0A7CC1;
	opacity:1 !important;
}
.Dia_list ul li a::after{
	content:"";
	display:block;
	width:40px;
	height:40px;
	background:url(../img/check.png) no-repeat left top;
	background-size:40px;
	top:50%;
	left:0;
	transform:translateY(-50%);
	position:absolute;
	transition:all 0.5s;
}
.Dia_list ul li a.on::after{
	background:url(../img/check_on.png) no-repeat left top;
	background-size:40px;
}







.Dia_contents{
	width:100%;
	margin:auto;
}
.Dia_contents strong{
	display:block;
	text-align:center;
	letter-spacing:3px;
	color:#0A7CC1;
	font-size:26px;
	margin-bottom:35px;
}
.Dia_contents .Items{
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.Dia_contents .Items a.Item{
	display:block;
	text-decoration:none;
	width:23.5%;
	background:#FFFFFF;
	border-radius:10px;
	box-shadow:0 1px 6px rgba(0,0,0,0.25);
	position:relative;
	color:#FFFFFF;
	overflow:hidden;
}
.Dia_contents .Items a.Item[href*="javascript"]{
	pointer-events:none;
	cursor:default;
}
.Dia_contents .Items a.Item::after{
	content:"〈JJデータより作図〉";
	display:block;
	font-size:7.5px;
	color:#3e3a39;
	position:absolute;
	bottom:55px;
	right:0px;
	opacity:0;
	transition:all 1s;
}
.Dia_contents .Items.on a.Item::after{
	opacity:1;
}
.Dia_contents .Items a.Item .Area{
	padding:25px 10px 85px 10px;
}
.Dia_contents .Items a.Item .Area .Gr{
	width:100%;
	position:relative;
	margin-top:35px;
}
.Dia_contents .Items a.Item .Area .Gr{
	width:100%;
	position:relative;
	margin-top:35px;
}
.Dia_contents .Items a.Item .Area .Gr img.f{
	position:absolute;
	top:0;
	left:0;
}
.Dia_contents .Items a.Item span{
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	background:#0A7CC1;
	width:100%;
}
.Dia_contents .Items a.Item span i{
	font-style:normal;
	font-size:17px;
	font-weight:600;
	letter-spacing:1px;
	line-height:1;
	transition:all 1.5s;
	padding:7px 0;
	text-align:center;
	position:relative;
	display:block;
	opacity:0;
}
.Dia_contents .Items a.Item span i.on{
	opacity:1;
}

.Dia_contents .Items img.t{
	opacity:0;
	width:85%;
	margin:auto;
	transition:all 1.5s;
}
.Dia_contents .Items img.t.on{
	opacity:1;
}
.Dia_contents .Items img.g{
	opacity:0;
	transition:all 1.5s;
}
.Dia_contents .Items img.g.on{
	opacity:1;
}
.Dia_contents .Items img.f{
	opacity:0;
	transform:scale(0.2,0.2);
	transition:all 1.5s;
}
.Dia_contents .Items img.f.on{
	opacity:1;
	transform:scale(1,1);
}





.kakaku_cap{
	width:92%;
	margin:6px auto;
}





.Gui_contents{
	width:100%;
	margin:auto;
}
.Gui_contents strong{
	display:block;
	text-align:center;
	letter-spacing:3px;
	color:#0A7CC1;
	font-size:26px;
	margin-bottom:35px;
}
.Gui_contents .Links{
	width:1000px;
	margin:auto;
	margin-top:60px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.Gui_contents .Links .w{
	width:50%;
}
.Gui_contents .Links .w .WaterBtnWrap{
	width:500px;
	height:500px;
	position:relative;
	overflow:hidden;
}
.Gui_contents .Links .w .WaterBtnWrap .WaterBtn{
	margin-top:0;
	width:500px;
	height:500px;
}
.Gui_contents .Links canvas{
	width:600px;
	height:600px;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.Gui_contents .Links.b{
	margin-top:90px;
}
.Gui_contents .Links.b .w{
	width:25%;
}
.Gui_contents .Links.b .w .WaterBtnWrap{
	width:250px;
	height:250px;
}
.Gui_contents .Links.b .w .WaterBtnWrap .WaterBtn{
	width:250px;
	height:250px;
}
.Gui_contents .Links.b canvas{
	width:300px;
	height:300px;
}

 





.SlideImg{
	width:920px;
	margin:auto;
	overflow:scroll;
}
.Table_img{
	position:relative;
	width:920px;
	margin:auto;
	opacity:0;
	transition:all 1.5s;
}
@media screen and (min-width: 1280px) {
	.SlideImg,.Table_img{
		width:1180px;
	}
}

.Table_img.on{
	opacity:1;
}
.Table_img.s{
	width:760px;
}
.Table_img.l{
	width:960px;
}
.Table_caption{
	display:block;
	width:920px;
	margin:auto;
	font-size:10px;
	line-height:115%;
	color:#222222;
	opacity:0;
	transition:all 1.5s;
}
@media screen and (min-width: 1280px) {
	.Table_img.s{
		width:830px;
		margin-bottom:5px;
	}
	.Table_img.l{
		width:1085px;
	}
	.Table_caption{
		width:1180px;
	}
}

.Table_caption sup{
	font-size:8px;
	vertical-align:text-top;
}
.Table_caption.on{
	opacity:1;
}
.Table_caption.pr{
	margin-top:5px;
}
.Table_caption.s{
	width:760px;
}
.Table_caption.l{
	width:960px;
}

img.sc_img{
	width:1840px;
}
@media screen and (min-width: 1280px) {
	img.sc_img{
		width:2200px;
	}
}

.Table_img a{
	display:block;
	/* background:rgba(0,0,0,0.7); */
	position:absolute;
	transition:none !important;
}


.Table_img#Ti_g1 a{
	width:194px;
	height:158px;
	top:63px;
}
.Table_img#Ti_g1 a.tr_link1{ left:82px; }
.Table_img#Ti_g1 a.tr_link2{ left:276px; }
.Table_img#Ti_g1 a.tr_link3{ left:472px; }
.Table_img#Ti_g1 a.tr_link4{ left:667px; }
.Table_img#Ti_g1 a.tr_link5{ left:862px; }
.Table_img#Ti_g1 a.tr_link6{ left:1058px; }
.Table_img#Ti_g1 a.tr_link7{ left:1253px; }
.Table_img#Ti_g1 a.tr_link8{ left:1449px; }
.Table_img#Ti_g1 a.tr_link9{ left:1645px; }
@media screen and (min-width: 1280px) {
	.Table_img#Ti_g1 a{
		width:232px;
		height:187px;
		top:76px;
	}
	.Table_img#Ti_g1 a.tr_link1{ left:94px; }
	.Table_img#Ti_g1 a.tr_link2{ left:328px; }
	.Table_img#Ti_g1 a.tr_link3{ left:562px; }
	.Table_img#Ti_g1 a.tr_link4{ left:796px; }
	.Table_img#Ti_g1 a.tr_link5{ left:1032px; }
	.Table_img#Ti_g1 a.tr_link6{ left:1266px; }
	.Table_img#Ti_g1 a.tr_link7{ left:1500px; }
	.Table_img#Ti_g1 a.tr_link8{ left:1733px; }
	.Table_img#Ti_g1 a.tr_link9{ left:1966px; }
}


.Table_img#Ti_g2 a{
	width:207px;
	height:167px;
	top:68px;
}
.Table_img#Ti_g2 a.tr_link1{ left:83px; }
.Table_img#Ti_g2 a.tr_link2{ left:292px; }
.Table_img#Ti_g2 a.tr_link3{ left:502px; }
.Table_img#Ti_g2 a.tr_link4{ left:712px; }
@media screen and (min-width: 1280px) {
	.Table_img#Ti_g2 a{
		width:268px;
		height:216px;
		top:85px;
	}
	.Table_img#Ti_g2 a.tr_link1{ left:106px; }
	.Table_img#Ti_g2 a.tr_link2{ left:373px; }
	.Table_img#Ti_g2 a.tr_link3{ left:644px; }
	.Table_img#Ti_g2 a.tr_link4{ left:914px; }
}


.Table_img#Ti_g3 a{
	width:207px;
	height:167px;
	top:68px;
}
.Table_img#Ti_g3 a.tr_link1{ left:83px; }
.Table_img#Ti_g3 a.tr_link2{ left:292px; }
.Table_img#Ti_g3 a.tr_link3{ left:502px; }
.Table_img#Ti_g3 a.tr_link4{ left:712px; }


.Table_img#Ti_g4 a{
	width:221px;
	height:181px;
	top:65px;
}
.Table_img#Ti_g4 a.tr_link1{ left:91px; }
.Table_img#Ti_g4 a.tr_link2{ left:314px; }
.Table_img#Ti_g4 a.tr_link3{ left:537px; }
@media screen and (min-width: 1280px) {
	.Table_img#Ti_g4 a{
		width:242px;
		height:195px;
		top:71px;
	}
	.Table_img#Ti_g4 a.tr_link1{ left:99px; }
	.Table_img#Ti_g4 a.tr_link2{ left:343px; }
	.Table_img#Ti_g4 a.tr_link3{ left:586px; }
}


.Table_img#Ti_g5 a{
	width:215px;
	height:175px;
	top:64px;
}
.Table_img#Ti_g5 a.tr_link1{ left:89px; }
.Table_img#Ti_g5 a.tr_link2{ left:306px; }
.Table_img#Ti_g5 a.tr_link3{ left:524px; }
.Table_img#Ti_g5 a.tr_link4{ left:743px; }
@media screen and (min-width: 1280px) {
	.Table_img#Ti_g5 a{
		width:245px;
		height:198px;
		top:71px;
	}
	.Table_img#Ti_g5 a.tr_link1{ left:99px; }
	.Table_img#Ti_g5 a.tr_link2{ left:347px; }
	.Table_img#Ti_g5 a.tr_link3{ left:594px; }
	.Table_img#Ti_g5 a.tr_link4{ left:840px; }
}


#Ti_g6_Img{
	width:900px;
}
.Table_img#Ti_g6 a{
	width:194px;
	height:156px;
	top:5px;
}
.Table_img#Ti_g6 a.tr_link1{ left:86px; }
.Table_img#Ti_g6 a.tr_link2{ left:292px; }
.Table_img#Ti_g6 a.tr_link3{ left:496px; }
.Table_img#Ti_g6 a.tr_link4{ left:698px; }
.Table_img#Ti_g6 a.tr_link5{ left:865px; }
.Table_img#Ti_g6 a.tr_link6{ left:1061px; }
.Table_img#Ti_g6 a.tr_link7{ left:1257px; }
.Table_img#Ti_g6 a.tr_link8{ left:1453px; }
@media screen and (min-width: 1280px) {
	#Ti_g6_Img{
		width:1060px;
		margin:auto;
	}
	.Table_img#Ti_g6 a{
		width:240px;
		height:192px;
		top:3px;
	}
	.Table_img#Ti_g6 a.tr_link1{ left:157px; }
	.Table_img#Ti_g6 a.tr_link2{ left:397px; }
	.Table_img#Ti_g6 a.tr_link3{ left:637px; }
	.Table_img#Ti_g6 a.tr_link4{ left:878px; }
}


#Ti_g7_Img{
	width:1350px;
}
.Table_img#Ti_g7 a{
	width:208px;
	height:169px;
	top:4px;
}
.Table_img#Ti_g7 a.tr_link1{ left:87px; }
.Table_img#Ti_g7 a.tr_link2{ left:297px; }
.Table_img#Ti_g7 a.tr_link3{ left:507px; }
.Table_img#Ti_g7 a.tr_link4{ left:717px; }
.Table_img#Ti_g7 a.tr_link5{ left:928px; }
.Table_img#Ti_g7 a.tr_link6{ left:1138px; }
@media screen and (min-width: 1280px) {
	#Ti_g7_Img{
		width:1650px;
	}
	.Table_img#Ti_g7 a{
		width:256px;
		height:206px;
		top:4px;
	}
	.Table_img#Ti_g7 a.tr_link1{ left:104px; }
	.Table_img#Ti_g7 a.tr_link2{ left:362px; }
	.Table_img#Ti_g7 a.tr_link3{ left:619px; }
	.Table_img#Ti_g7 a.tr_link4{ left:878px; }
	.Table_img#Ti_g7 a.tr_link5{ left:1136px; }
	.Table_img#Ti_g7 a.tr_link6{ left:1392px; }
}


 #Ti_g8_Img{
	width:660px;
}
.Table_img#Ti_g8{
	width:660px;
}
.Table_img#Ti_g8 a{
	width:189px;
	height:154px;
	top:2px;
}
.Table_img#Ti_g8 a.tr_link1{ left:79px; }
.Table_img#Ti_g8 a.tr_link2{ left:274px; }
.Table_img#Ti_g8 a.tr_link3{ left:467px; }
.Table_img#Ti_g8 a.tr_link4{ left:650px; }
.Table_img#Ti_g8 a.tr_link5{ left:840px; }
.Table_img#Ti_g8 a.tr_link6{ left:1030px; }
.Table_img#Ti_g8 a.tr_link7{ left:1220px; }
@media screen and (min-width: 1280px) {
	 #Ti_g8_Img{
		width:780px;
	}
	.Table_img#Ti_g8{
		width:780px;
	}
	.Table_img#Ti_g8 a{
		width:225px;
		height:183px;
		top:2px;
	}
	.Table_img#Ti_g8 a.tr_link1{ left:93px; }
	.Table_img#Ti_g8 a.tr_link2{ left:323px; }
	.Table_img#Ti_g8 a.tr_link3{ left:550px; }
}


#Ti_g9_Img{
	width:900px;
}
.Table_img#Ti_g9 a{
	width:187px;
	height:153px;
	top:8px;
}
.Table_img#Ti_g9 a.tr_link1{ left:92px; }
.Table_img#Ti_g9 a.tr_link2{ left:296px; }
.Table_img#Ti_g9 a.tr_link3{ left:499px; }
.Table_img#Ti_g9 a.tr_link4{ left:703px; }
.Table_img#Ti_g9 a.tr_link5{ left:839px; }
.Table_img#Ti_g9 a.tr_link6{ left:1029px; }
.Table_img#Ti_g9 a.tr_link7{ left:1219px; }
.Table_img#Ti_g9 a.tr_link8{ left:1409px; }
@media screen and (min-width: 1280px) {
	#Ti_g9_Img{
		width:1040px;
		margin:auto;
	}
	.Table_img#Ti_g9 a{
		width:235px;
		height:189px;
		top:3px;
	}
	.Table_img#Ti_g9 a.tr_link1{ left:164px; }
	.Table_img#Ti_g9 a.tr_link2{ left:400px; }
	.Table_img#Ti_g9 a.tr_link3{ left:637px; }
	.Table_img#Ti_g9 a.tr_link4{ left:872px; }
}


 #Ti_g10_Img{
	width:510px;
}
.Table_img#Ti_g10{
	width:510px;
}
.Table_img#Ti_g10 a{
	width:208px;
	height:169px;
	top:4px;
}
.Table_img#Ti_g10 a.tr_link1{ left:87px; }
.Table_img#Ti_g10 a.tr_link2{ left:297px; }
@media screen and (min-width: 1280px) {
	#Ti_g10_Img{
		width:600px;
	}
	.Table_img#Ti_g10{
		width:600px;
	}
	.Table_img#Ti_g10 a{
		width:245px;
		height:198px;
		top:4px;
	}
	.Table_img#Ti_g10 a.tr_link1{ left:102px; }
	.Table_img#Ti_g10 a.tr_link2{ left:350px; }
}








.Lec_contents{
	width:100%;
	margin:auto;
}
.Lec_contents strong{
	display:block;
	text-align:center;
	letter-spacing:3px;
	color:#0A7CC1;
	font-size:26px;
	margin-bottom:35px;
}
.Lec_contents iframe{
	display:block;
	width:920px;
	height:520px;
	margin:auto;
}






.Pri_contents{
	width:100%;
	margin:auto;
}
.Pri_contents strong{
	display:block;
	text-align:center;
	letter-spacing:3px;
	color:#0A7CC1;
	font-size:26px;
	margin-bottom:35px;
}







  .wb-wrap{
    background:#fff;
    padding: 24px 16px;
  }
  .wb-wrap.one{
	display:flex;
	justify-content:center;
	background:#fff;
  }
  .wb-list{
    display:grid;
    grid-template-columns: repeat(4, minmax(160px, 1fr));
    gap: 24px;
    align-items:center;
    justify-items:center;
    max-width: 1100px;
    margin: 0 auto;
  }
  .wb-btn{
    position: relative;
    width: 220px;
    height: 220px;
    border: 0;
    padding: 0;
    background: #fff;
    cursor: pointer;
    border-radius: 999px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .wb-wrap.one .wb-btn{
	width: 210px;
	height: 210px;
  }
  .wb-canvas{
    width: 100%;
    height: 100%;
    display:block;
    background:#fff;
  }
  .wb-text{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    font-weight: 700;
    font-size: 26px;
    color: #0a74c9;
    letter-spacing: .06em;
    pointer-events:none;
    user-select:none;
  }
  .wb-btn:focus-visible{
    outline: 3px solid #1e90ff;
    outline-offset: 6px;
  }
  .wb-wrap.two{
	background:#fff;
  }
  
  .wb-wrap.two .wb-list{
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0px;
	justify-items:center;
  }
  
  .wb-wrap.two .wb-btn{
	width: 400px;
	height: 400px;
  }