@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');


/*----------------------------------------------
	Overall settings
-----------------------------------------------*/

body{ min-width: 1100px; color: #111; font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif; font-size: 24px; font-weight: 500; text-align: center;}
body.ovh{ position: fixed; left: 0; top: 0; width: 100%; height: 100vh;}
a{ color: #3190f2; text-decoration: none; -webkit-transition: all .2s; transition: all .2s;}
a:hover{ opacity: .7; text-decoration: underline;}
.underline{ text-decoration: underline;}
/* font */
.hiragino{ font-family: "ヒラギノ角ゴ Pro W3", sans-serif;}
.montserrat{ font-family: 'Montserrat', sans-serif;}
.bold{ font-weight: bold;}
.medium{ font-weight: 500;}
.f18{ font-size: 18px !important;}
.f22{ font-size: 22px;}
.f24{ font-size: 24px;}
/* bg */
.bg-white{ background: #fff;}
.bg-black{ background: #000;}
.bg-grade1{ background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 98% 82%, hsla(208,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 96% 99%, hsla(156,100%,87%,1) 0px, transparent 50%),
radial-gradient(at 1% 79%, hsla(208,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 25%, hsla(15,100%,100%,1) 0px, transparent 50%),
radial-gradient(at 20% 42%, hsla(15,100%,100%,1) 0px, transparent 50%),
radial-gradient(at 96% 85%, hsla(208,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 66% 55%, hsla(107,100%,100%,1) 0px, transparent 50%),
radial-gradient(at 26% 24%, hsla(87,100%,94%,1) 0px, transparent 50%),
radial-gradient(at 2% 2%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 94% 15%, hsla(175,100%,93%,1) 0px, transparent 50%);}
/* color */
.white{ color: #fff;}
.red{ color: #c00;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	body{ min-width: inherit; font-size: 4.26vw;}
	a:hover{ opacity: 1;}
	/* font */
	.f22{ font-size: 4.26vw;}
	.f24{ font-size: 4.26vw;}
}



/*----------------------------------------------
	header
-----------------------------------------------*/

/* header{ background-color:hsla(0,0%,100%,1);
background-image:
radial-gradient(at 99% 0%, hsla(215,0%,100%,0.5) 0px, transparent 50%),
radial-gradient(at 74% 29%, hsla(60,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 50% 77%, hsla(180,65%,58%,1) 0px, transparent 50%),
radial-gradient(at 5% 94%, hsla(73,0%,100%,1) 0px, transparent 50%),
radial-gradient(at 64% 100%, hsla(233,100%,94%,1) 0px, transparent 50%),
radial-gradient(at 96% 98%, hsla(207,100%,86%,1) 0px, transparent 50%),
radial-gradient(at 56% 75%, hsla(180,65%,58%,1) 0px, transparent 50%),
radial-gradient(at 98% 42%, hsla(305,71%,76%,1) 0px, transparent 50%),
radial-gradient(at 67% 21%, hsla(60,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 9% 5%, hsla(150,20%,90%,1) 0px, transparent 50%),
radial-gradient(at 79% 12%, hsla(87,100%,94%,1) 0px, transparent 50%);} */
/* header{
	background-image: url(../img/header-pc.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height:1100px;
} */
header .wrap{ display: flex; max-width: 1500px; padding: 1.2% 0; text-align: left;}
header .wrap div{ width: 58.3%; padding-left: 7.3%;}
header .wrap div .logo{ width: 27.8%; margin-left: -4%; margin-bottom: 1.2%;}
header .wrap div h1{ margin-bottom: 65px;}
header .wrap div .txt{ width: 69.8%;}
header .wrap figure{ width: 41.7%; padding-top: 6%;}
header .wrap figure img{ margin-left: -23%; width: 123%; max-width: inherit;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	header .wrap{ display: block; padding: 0 3.35vw 5.33vw;}
	header .wrap div{ width: auto; padding-left: 0;}
	header .wrap div .logo{ width: 30vw; margin: -2.5vw auto -2vw;}
	header .wrap div h1{ margin-bottom: 8vw;}
	header .wrap div .txt{ width: 64%;}
	header .wrap figure{ width: auto; padding: 4% 8% 0 5%;}
	header .wrap figure img{ margin-left: 0; width: 100%;}
	header{
		/* background-image: url(../img/header-sp.jpg); */
		background-size: auto;
		background-repeat: no-repeat;
		height: 100%;
	}
}



/*----------------------------------------------
	section
-----------------------------------------------*/

section{}
.wrap{ clear: both; box-sizing: content-box; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 4%; padding-right: 4%;}
/* btn */
.btn1{ display: inline-block; background: linear-gradient(to right,  rgba(49,140,244,1) 0%,rgba(46,196,212,1) 100%); border-radius: 20px; overflow: hidden; position: relative;}
.btn1:hover{ opacity: 1;}
.btn1:before{ opacity: 0; display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(238,144,246,1) 0%,rgba(241,175,99,1) 46%,rgba(251,176,59,1) 66%,rgba(143,230,92,1) 100%); transition: all .2s;}
.btn1:hover:before{ opacity: 1;}
.btn1 img{ position: relative;}
/* list1 */
.list1{ font-size: 16px;}
.list1 li{ margin-bottom: 2em;}
/* cont */
.cont1{ padding: 60px 0 0;}
.cont1 .txt{ margin-bottom: 60px; font-size: 22px; text-align: left;}
.cont1 .btn{ margin-bottom: 180px;}
.cont2{ padding: 150px 0 100px;}
.cont2 h2{ margin-bottom: 80px;}
.cont2 table{ width: 100%; line-height: 1.4; text-align: left;}
.cont2 table tr:last-child th, .cont2 table tr:last-child td{ border-bottom: none;}
.cont2 table th{ vertical-align: top; width: 11em; padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
.cont2 table th span{ display: block; width: 11em; text-align-last: justify;font-size:20px;}
.cont2 table td{ padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
.cont2 table td .box1{ display: flex; justify-content: flex-start;}
.cont2 table td .box1 p{ padding: .5em 0;}
.cont2 table td .box1 span{ font-size:16px;}
.cont2 table td .logo{ display: flex; align-items: center;}
.cont2 table td .logo li{  margin-right: 70px; margin-bottom: 20px;}
.cont3{ max-width: 1300px; padding-top: 150px; padding-bottom: 130px;}
.cont3 h2{ margin-bottom: 80px;}
.cont3wrap{ display: flex; justify-content: space-between;}
.cont3wrap table{ width: 56.4%; line-height: 1.4; text-align: left;}
.cont3wrap table tr:last-child th, .cont3wrap table tr:last-child td{ border-bottom: none;}
.cont3wrap table th{ vertical-align: top; width: 9em; padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
.cont3wrap table td{ padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
.cont3wrap table .kome{ font-size: 16px; text-align: right;}
.cont3wrap figure{ flex: 1; padding-left: 2px;}
.cont4{ padding: 150px 0 130px;}
.cont4 h2{ margin-bottom: 80px;}
.cont4 .ttl1{ margin-bottom: 50px; background: #575757; overflow: hidden;}
.cont4 .ttl1 h3{ 
text-align: left;
/* background: url("../img/cont4-ttl.svg") left 4% top / auto 100% no-repeat;
position: relative; */
}
.cont4 .ttl1 h3:before{
	display: block;
	content: "";
	position: absolute;
	right: 96%;
	top: 0;
	width: 100vw;
	height: 100%;
	/* background: #000; */
}
.cont4 .ttl1 h3 span{ position: absolute; right: 4%; top: 50%; transform: translateY(-50%); padding-left: 1em; text-indent: -1em; color: #fff; font-size: 16px; line-height: 1.3;}
.cont4 h4{ margin-bottom: .5em;}
.cont4 .box1{ display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items:center;margin-bottom: 150px;}
.cont4 .box1 div{ width: 31.25%;}
.cont4 .box1 div figure{ margin-bottom: .5em;}
.cont4 .box1 div .yomi{ font-size: 15px;}
.cont4 .box1 div .name{ line-height: 1.3;}
.cont4 .box1 div .status{ font-size: 16px; margin-bottom: 1em;}
.cont4 .box1 div .txt{ font-size: 22px;}
.cont4 .mb50{ }
.cont4 .theme{ margin-bottom: 1em; font-size: 50px;}
.cont4 .column2{ display: flex; justify-content: space-between;}
.cont4 .column2 div{ width: 62.5%;}
.cont4 .column2 figure{ flex: 1;}
.cont5{ padding-top: 150px; padding-bottom: 120px;}
.cont5 table{ margin-bottom: 2em; width: 100%; line-height: 1.4; text-align: left;}
.cont5 table th{ vertical-align: top; width: 9em; padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
.cont5 table th .justify4{ display: block; width: 4em; text-align-last: justify;}
.cont5 table td{ padding: 1em 0; border-bottom: 1px solid #E6E6E6;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	/* btn */
	.btn1{ border-radius: 15px;}
	/* table */
	.table1{ width: 100%; line-height: 1.4; text-align: left; border-top: 1px solid #E6E6E6;}
	.table1.nolineT{ border-top: none;}
	.table1.nolineB tr:last-child th, .table1.nolineB tr:last-child td{ border-bottom: none;}
	.table1 th{ vertical-align: top; width: 9em; padding: 1em 0; font-feature-settings: "palt"; border-bottom: 1px solid #E6E6E6;}
	.table1 th .justify4{ display: block; width: 4em; text-align-last: justify;}
	.table1 td{ padding: 1em 0; border-bottom: 1px solid #E6E6E6;}
	/* list1 */
	.list1{ font-size: 16px;}
	.list1 li{ margin-bottom: 2em;}
	/* cont */
	.cont1{ padding: 1.5em 0 0;}
	.cont1 .txt{ margin-bottom: 1.5em; font-size: 4.26vw;}
	.cont1 .btn{ margin-bottom: 1em;}
	.cont2{ padding: 3.5em 0 2em;}
	.cont2 h2{ margin-bottom: 2em;}
	.cont2 table th{ display: block; text-align: center; width: auto; padding: 1em 0 .5em; border-bottom: none;}
	.cont2 table th span{ margin: 0 auto;}
	.cont2 table td{ display: block; padding: 0 0 1em; font-size: 3.73vw; text-align: center;}
	.cont2 table td .spfont{ font-size: 3.2vw;}
	.cont2 table td .box1 span{ font-size:12px;}
	.cont2 table td .box1{ flex-wrap: wrap; justify-content: center;}
	.cont2 table td .box1 li{ width: 50%; padding: 0 1em .5em;}
	.cont2 table td .logo{ flex-wrap: wrap; justify-content: center;}
	.cont2 table td .logo li{ width: 40%; margin-right: 10%; margin-bottom: 4%;}
	.cont2 table td .logo li:nth-child(2n), .cont2 table td .logo li:last-child{ margin-right: 0;}
	.cont2 table td .logo li:nth-child(3){ width: 70%;}
	.cont3{ padding-top: 3em; padding-bottom: 1em;}
	.cont3 h2{ margin-bottom: 2.5em;}
	.cont3wrap{ display: block;}
	.cont3wrap table{ width: 100%;}
	.cont3wrap table th{ width: 4.5em;}
	.cont3wrap table .kome{ font-size: 2.93vw;}
	.cont3wrap figure{ padding-left: 0; padding-top: .5em;}
	.cont3wrap figure img{ width: 73%;}
	.cont4{ padding: 4em 0;}
	.cont4 h2{ margin-bottom: 2.5em;}
	.cont4 .ttl1{ margin-bottom: 1.5em; background: none;}
	.cont4 .ttl1 h3{ padding: 0; background: none;}
	.cont4 .ttl1 h3:before{ display: none;}
	.cont4 .ttl1 h3 span{ position: static; transform: none; font-size: 3.2vw; display: block; padding: .5em 4% 0; color: #000; text-align: right;}
	.cont4 .box1{ display: block; margin-bottom: 0;}
	.cont4 .box1 div{ width: auto; margin-bottom: 3em;}
	.cont4 .box1 div figure{ padding: 0 14%;}
	.cont4 .box1 div .yomi{ font-size: 3.73vw; text-align: center;}
	.cont4 .box1 div .name{ font-size: 4.53vw; text-align: center;}
	.cont4 .box1 div .status{ font-size: 3.46vw; margin-bottom: .5em; text-align: center;}
	.cont4 .box1 div .txt{ font-size: 3.73vw;}
	.cont4 .mb50{ margin-bottom: 3em;}
	.cont4 .theme{ margin-bottom: 1.5em; font-size: 6.4vw;}
	.cont4 .column2{ display: block; margin-bottom: 3em;}
	.cont4 .column2 div{ width: auto;}
	.cont4 .column2 div .theme{ margin-bottom: .3em;}
	.cont4 .column2 div .mb50{ margin-bottom: 2em;}
	.cont4 .column2 figure{ flex: 1;}
	.cont5{ padding-top: 4em; padding-bottom: 2em;}
	.cont5 table{ margin-bottom: 2em;}
	.cont5 table th{ display: block; width: auto; padding: 1em 0 .5em; border-bottom: none;}
	.cont5 table td{ display: block; padding: 0 0 1em;}
	.cont5 .list1{ font-size: 3.46vw;}
	/*img*/
	.img-size-sp{
		width:50%;
	}
}



/*----------------------------------------------
	footer
-----------------------------------------------*/

footer{ clear: both;}
footer .fnav{ background: #E6E6E6;}
footer .fnav ul{ padding-top: 100px; padding-bottom: 65px; display: flex; justify-content: space-between; align-items: center;}
footer .txt{ padding: 1em 2%; font-size: 14px; line-height: 1.6; border-bottom: 1px solid #E6E6E6;}
footer .copy{ padding: 1.1em 4%; font-size: 14px;}

/*------------------------------ responsive ------------------------------*/
@media screen and (max-width: 540px) {
	footer .fnav ul{ padding-top: 1.5em; padding-bottom: 1.5em; justify-content: center; flex-wrap: wrap;}
	footer .fnav ul li{ padding: 1em 3%;}
	footer .fnav ul li:nth-child(1){ width: 57%;}
	footer .fnav ul li:nth-child(2){ width: 43%;}
	footer .fnav ul li:nth-child(3){ width: 65%;}
	footer .txt{ padding: 1.2em 0; font-size: 3.2vw;}
	footer .copy{ padding: .7em 4%; font-size: 2.66vw;}
}