@charset "utf-8";
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
word-break: break-all;
word-wrap: break-word;
}
html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
font-size: 14px;
line-height: 1.3;
}
body {
padding: 0;
margin: 0;
background: #fff;
color: #000;
font-size: 100%;
font-family: 'メイリオ','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック';
font-family: 'Noto Sans JP', sans-serif;
font-weight: normal;
width: 100%;
height: 100%;
}
li{
list-style: none;
}
ul::before,
ul::after,
ol::before,
ol::after,
dl::before,
dl::after {
display: none;
}
img {
max-width: 100%;
vertical-align: top;
}
a {
color: #3089E4;
}
/* reset end */

/* wrap */
#wrap {
min-width: 320px;
padding-top: 80px;
}
#header {
min-width: 320px;
}
#wrap * {
box-sizing: border-box;
}
#wrap img {
vertical-align: top;
height: auto;
}
.area {
position: relative;
clear: both;
display: block;
z-index: 10;
padding: 50px 0;
}
.area_in {
box-sizing: border-box;
position: relative;
clear: both;
margin: 0 auto;
padding: 0 10px;
width: 100%;
max-width: 1020px;
}
	@media screen and (max-width: 768px) {
	#wrap {
	background-position: center top;
	padding-top: 60px;
	}
	.area {
	padding: 30px 0;
	}
	}
.pc {
display: block;
}
.sp {
display: none;
}
	@media screen and (max-width: 768px) {
	.pc {
	display: none;
	}
	.sp {
	display: block;
	}
	}
/* wrap end */


/* header */
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 1;
z-index: 999;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
transition: 0.2s;
}
#header * {
transition: 0.2s;
}
#header .area_in {
height: 100%;
max-width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
padding: 0;
}
#header .branding {
position: relative;
flex: 1 0 0%;
align-self: center;
display: flex;
align-items: center;
}
#header .bookmark {
font-size: 90%;
}
#header .logo {
align-self: center;
padding: 10px;
}
#header .logo a {
display: flex;
height: 100%;
}
#header .logo img {
max-height: 40px;
height: auto;
}
	@media screen and (max-width: 768px) {
	#header {
	height: 60px;
	}
	#header .area_in {
	padding-left: 0;
	padding-right: 50px;
	}
	}
#header .logo_txt {
font-size: 80%;
align-self: center;
}
	@media screen and (max-width: 768px) {
	#header .logo_txt {
	display: none;
	}
	}
/* header end */

/* menubtn */
#menubtn {
display: none;
position: absolute;
z-index: 99999;
width: 30px;
height: 23px;
right: 13px;
top: 17px;
cursor: pointer;
}
#menubtn {
transition: all .2s;
box-sizing: border-box;
}
#menubtn span {
display: inline-block;
transition: all .2s;
box-sizing: border-box;
}
#menubtn span {
position: absolute;
left: 0;
width: 100%;
height: 1px;
background-color: #ccc;
border-radius: 0;
}
#menubtn span:nth-of-type(1) {
top: 0;
}
#menubtn span:nth-of-type(2) {
top: 11px;
}
#menubtn span:nth-of-type(3) {
bottom: 0;
}
#menubtn.active span {
background: #ccc;
}
#menubtn.active span:nth-of-type(1) {
transform: translateY(11px) rotate(-45deg);
}
#menubtn.active span:nth-of-type(2) {
opacity: 0;
}
#menubtn.active span:nth-of-type(3) {
transform: translateY(-11px) rotate(45deg);
}
	@media screen and (max-width: 768px) {
	#menubtn {
	display: block;
	}
	}
/* menubtn end */

/* menu */
#menu ul {
display: flex;
width: 100%;
height: 100%;
max-width: 800px;
align-items: center;
font-size: 90%;
}
#menu ul li a {
display: inline-block;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
padding: 10px;
font-weight: bold;
color: #000;
}
#menu ul li a:hover {
color: #3089E4;
}
#menu li a.comp span {
display: inline-block;
background: linear-gradient(to right, #0A59B9, #00B4FF);
padding: 10px 20px;
border-radius: 0;
font-weight: bold;
border-radius: 30px;
color: #fff;
}
#menu li a.comp:hover {
opacity: 0.7;
}
#menu li a.comp.contact_end span {
background: #999;
}
	@media screen and (max-width: 800px) {
	#menu ul {
	max-width: 600px;
	}
	}
	@media screen and (max-width: 768px) {
	#menu ul li a {
	padding: 5px;
	font-size: 90%;
	color: #fff;
	}
	#menu li a.comp span {
	padding: 10px 10px;
	border-radius: 30px;
	}
	#menu {
	position: fixed;
	left: 100%;
	top: 0;
	height: 100%;
	width: 100%;
	padding: 60px 0 0 0;
	background: #000;
	transition: all 0.3s linear;
	z-index: 100;
	border-right: none;
	height: 100%;
	}
	#menu.active {
	left: 0;
	}
	#menu ul {
	border: none;
	display: block;
	width: 100%;
	max-width: 100%;
	}
	#menu ul li {
	display: block;
	}
	#menu ul li a {
	border: none;
	width: 100%;
	font-size: 130%;
	}
	#menu li > a > * {
	padding: 20px;
	color: #fff;
	}
	#menu ul li a.comp {
	padding: 20px;
	}
	#menu ul li a.comp span {
	display: block;
	background: #fff;
	color: #000;
	}
	}

#menu ul {
max-width: 800px;
}
#menu ul li.sns {
display: flex;
justify-content: center;
}
#menu ul li.sns a {
padding: 10px;
}
#menu ul li.sns img {
max-width: 30px;
vertical-align: bottom;
opacity: 1;
}
#menu ul li.sns .fb span {
display: inline-block;
background: url("../images/icon_f_w.png") no-repeat center center / contain;
}
#menu ul li.sns .tw span {
display: inline-block;
background: url("../images/icon_x_w.png") no-repeat center center / contain;
}
	@media screen and (max-width: 768px) {
	#menu ul li.sns .tw span img,
	#menu ul li.sns .fb span img {
	opacity: 0;
	}
	}
/* menu end */

/* footer */
#footer {
padding: 50px 0;
background: #fff;
}
#footer a {
transition: 0.3s;
}
#footer a:hover {
opacity: 0.7;
}
.company_logo {
padding: 30px;
text-align: center;
max-width: 260px;
margin: 0 auto;
}
#footer .text {
text-align: center;
}
#footer .copy {
text-align: center;
font-size: 90%;
padding: 20px;
}
#nav {
clear: both;
padding: 20px;
}
#nav ul {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
line-height: 1;
}
#nav ul li {
border-right: 1px solid #ddd;
}
#nav ul li.sns {
display: none;
}
#nav ul li:last-child {
border-right: none;
}
#nav ul li a {
font-weight: bold;
display: inline-block;
text-decoration: none;
padding: 0 20px;
color: #000;
}
.footer_link {
text-align: center;
font-size: 90%;
padding: 0 20px;
}
.footer_link a {
text-decoration: none;
}
	@media screen and (max-width: 768px) {
    #nav {
    padding: 0 10px 20px 10px;
    }
    #nav ul {
    flex-flow: column wrap;
    justify-content: flex-start;
    }
    #nav ul li {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    }
    #nav ul li:last-child {
    }
    #nav ul li a {
    display: block;
    padding: 20px 0;
    text-decoration: none;
    }
	}
#footer .txt {
margin-bottom: 20px;
}
#footer {
background: linear-gradient(to right, #002d4e, #114a94);
}
#footer {
color: #fff;
}
#footer #nav ul li a {
color: #fff;
}
#footer .footer_link a {
color: #fff;
}
#footer .pr {
text-align: center;
}
#footer .flogo {
text-align: center;
padding: 20px;
}
#footer .flogo img {
max-width: 150px;
}
#footer .copy {
color: #fff;
}
/* footer end */

/* pagetop */
#pagetop {
position: fixed;
right: 10px;
bottom: -100px;
transition: all 0.3s linear;
opacity: 0;
z-index: 100;
}
#pagetop.active {
bottom: 10px;
opacity: 0.9;
}
#pagetop:hover {
opacity: 0.6;
}
#pagetop a {
display: block;
width: 60px;
height: 60px;
border-radius: 30px;
background: rgba(0,45,78,0.8);
text-indent: -9999px;
}
#pagetop a:before {
content: "";
position: absolute;
right: 50%;
top: 50%;
width: 15px;
height: 15px;
margin: -6px -9px 0 0;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(-45deg);
}
	@media screen and (max-width: 768px) {
	#pagetop.active,
	#pagetop:hover {
	opacity: 0.8;
	}
	#pagetop a {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	}
	#pagetop a:before {
	width: 10px;
	height: 10px;
	margin: -4px -6px 0 0;
	}
	}
/* pagetop end */

/* visual * /
#visual {
position: relative;
width: 100%;
height: 500px;
}
#visual .area_in {
position: relative;
z-index: 10;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100%;
max-width: 1400px;
background: none!important;
}
#visual .area_in img {
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) and (max-width: 1000px) {
#visual {
height: auto;
}
#visual .area_in img {
height: calc(100vw * (500 / 1000));
}
}
@media screen and (max-width: 768px) {
	#visual {
	height: auto;
	padding: 0!important;
	}
	#visual .area_in {
	background: url("../images/visual_sp.png") no-repeat left top / contain;
	}
	#visual .area_in img {
	width: 100%;
	height: calc(100vw * (350 / 800));
	opacity: 0;
	}
}
/* visual end */

/* lead */
/* lead end */

/* contact */
/* contact end */

/* title * /
.base_tit {
position: relative;
margin-bottom: 50px;
text-align: center;
}
.base_tit b {
position: relative;
display: inline-block;
font-weight: 600;
font-size: 150%;
}
.base_tit span {
position: relative;
display: inline-block;
font-weight: bold;
font-weight: 600;
font-size: 130%;
}
	@media screen and (max-width: 768px) {
	.base_tit {
	margin-bottom: 30px;
	}
	.base_tit b {
	font-size: 130%;
	}
	.base_tit span {
	font-size: 110%;
	}
	}
.base_tit {
display: flex;
flex-flow: column-reverse nowrap;
justify-content: center;
align-items: center;
color: #fff;
}
.base_tit b {
margin-top: 10px;
padding-top: 15px;
font-size: 110%;
}
.base_tit b::before {
content: "";
position: absolute;
left: 50%;
top: 0;
display: block;
width: 100px;
height: 5px;
background: linear-gradient(to right, #3089E4 0%, #945BF3 100%);
transform: translate(-50%,0);
}
.base_tit span {
font-size: 250%;
font-weight: 800;
}
@media screen and (max-width: 768px) {
.base_tit {
font-size: 90%;
}
.base_tit b::before {
width: 70px;
height: 3px;
}
}
@media screen and (max-width: 500px) {
.base_tit {
font-size: 80%;
}
}
/* title end */

/* program */
/* program end */

/* timetable_area */
/* timetable_area end */

/* program_nav */
/* program_nav end */

/* program_table */
/* program_table end */

/* program_table_head */
/* program_table_head end */

/* popup */
.mfp-bg {
opacity: 0.9;
background: #000;
}
.popup_contents {
display: none;
}
.mfp-content {
max-width: 700px!important;
max-width: inherit!important;
padding: 50px 50px;
}
.mfp-close {
position: fixed!important;
top: 15px!important;
right: 15px!important;
width: 30px!important;
height: 30px!important;
opacity: 1!important;
text-indent: -9999px;
position: relative;
}
.mfp-close:before,
.mfp-close:after {
position: absolute;
left: 0;
top: 50%;
content: "";
width: 30px;
height: 2px;
background: #fff;
}
.mfp-close:before {
transform: rotate(45deg);
}
.mfp-close:after {
transform: rotate(-45deg);
}
.mfp-close:hover {
opacity: 0.7!important;
}
button.mfp-arrow.mfp-arrow-left {
background: url(../js/prev_w.png) no-repeat center center / cover;
width: 50px;
height: 50px;
}
button.mfp-arrow.mfp-arrow-right {
background: url(../js/next_w.png) no-repeat center center / cover;
width: 50px;
height: 50px;
}
/*
左右矢印を中央に寄せる
	@media screen and (min-width: 768px) {
	button.mfp-arrow.mfp-arrow-left {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-370px, -25px);
	}
	button.mfp-arrow.mfp-arrow-right {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(320px, -25px);
	}
	}
*/
	
.mfp-arrow:after,
.mfp-arrow:before {
display: none;
}
.pop_prev,
.pop_next {
position: fixed;
top: 50%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
cursor: pointer;
text-indent: -9999px;
transition: .3s;
}
.pop_prev {
left: 10px;
background: url(../js/prev_w.png) no-repeat center center / cover;
}
.pop_next {
right: 10px;
background: url(../js/next_w.png) no-repeat center center / cover;
}
.pop_prev:hover,
.pop_next:hover {
opacity: 0.7;
}
button.mfp-arrow.mfp-arrow-left,
button.mfp-arrow.mfp-arrow-right {
display: none;
}
/* popup end */

/* popup_box */
.popup_box {
margin: 60px 10px 10px 10px;
background: #fff;
border-radius: 0px;
padding: 30px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
max-width: 900px;
margin: 0 auto;
font-weight: 400;
font-size: 120%;
}
.popup_box.program .layout .photo {
flex: 0 1 250px;
}
@media screen and (max-width: 768px) {
.popup_box.program .layout {
flex-flow: column nowrap;
}
.popup_box.program .layout .photo {
text-align: center;
flex: 1 0 0%;
}
.popup_box.program .layout .info {
padding: 20px 0 0 0;
}
}
/* popup_box end */


/* TECH+ */
/*
#header {
transition: .6s;
box-shadow: none;
opacity: 1;
transform: translate(0,-100px);
transform: translate(0,0);
background: #fff;
}
body.active #header {
height: 60px;
}
*/
#header {
position: absolute;
}
#header .logo {
padding: 0;
}
#header .logo a {
padding: 10px 20px;
}
#header .logo img {
max-height: 40px;
height: 100%;
width: auto;
}
	@media screen and (max-width: 768px) {
	#header .logo a {
	padding: 10px;
	}
	#menu {
	background: #fff;
	}
	#menu.active {
	height: 100vh;
	}
	}
/*
#menu ul li a {
color: #000;
padding: 10px 20px;
}
#menu ul li a:hover {
opacity: 0.7;
}
*/
.contents {
background: #031032 url("../images/visual_bg.png") no-repeat right top / 100% auto;
background-attachment: fixed;
}
.contents2 {
background: #fff;
}
#visual {
height: 700px;
background: none;
padding-top: 0!important;
}
#visual .area_in {
display: flex;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
height: 100%;
max-width: 1040px;
padding: 0 20px;
}
#visual .visual_tit {
padding-top: 80px;
position: relative;
z-index: 1;
}
#visual .visual_tit　span {
display: flex;
width: 100%;
align-items: flex-start;
justify-content: center;
flex-flow: column nowrap;
}
#visual .visual_tit b {
display: block;
background: linear-gradient(90deg, #fff 0%, #fff 40%, #0496D6 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 300%;
font-weight: 900;
line-height: 1.2;
}
#visual .visual_tit em {
display: block;
font-style: normal;
background: linear-gradient(90deg, #114A94 0%, #0095D6 100%);
color: #fff;
line-height: 1.2;
padding: 10px;
margin: 10px 0 0;
}
	@media screen and (min-width: 768px) and (max-width: 1200px) {
	.contents {
	background-size: auto 100%;
	}
	}
	@media screen and (max-width: 768px) {
	.contents {
	background-image: url("../images/visual_bg_sp.png");
	}
	#visual {
	height: 450px;
	}
	#visual .visual_tit {
	font-size: 150%;
	}
	}
	@media screen and (max-width: 500px) {
	#visual {
	height: 300px;
	}
	#visual .visual_tit {
	padding-top: 50px;
	font-size: 120%;
	}
#visual .visual_tit b {
font-size: 300%;
}
#visual .visual_tit em {
padding: 5px;
}
	}
#visual::after {
display: block;
content: "";
width: 100%;
height: 200px;
background: linear-gradient(90deg, #c5edfa 0%, #cbdef7 100%);
clip-path: polygon(0 0, 0 100%, 100% 100%);
position: absolute;
bottom: 0;
left: 0;
}
#comic_area {
padding-top: 0;
background: linear-gradient(90deg, #c5edfa 0%, #cbdef7 100%);
}
#comic_area::after {
display: block;
content: "";
width: 100%;
height: 200px;
background: linear-gradient(90deg, #fff 0%, #fff 100%);
clip-path: polygon(100% 0, 0 100%, 100% 100%);
position: absolute;
bottom: -1px;
right: 0;
}
.comic_list {
position: relative;
z-index: 1;
display: flex;
flex-flow: row-reverse wrap;
justify-content: flex-start;
}
.comic_list li {
flex: 0 1 50%;
padding: 10px;
}
.comic_list li img {
box-shadow: 5px 5px 0 rgba(17,74,148,0.3);
}
	@media screen and (min-width: 768px) {
	.comic_list li:nth-child(odd) {
	margin-top: -150px;
	}
	}
	@media screen and (max-width:768px) {
	.comic_list {
	}
	.comic_list li {
	flex: 0 1 100%;
	}
	#visual::after {
	height: 100px;
	display: none;
	}
	#comic_area::after {
	height: 100px;
	}
#comic_area::before {
display: block;
content: "";
width: 100%;
height: 100px;
background: #031032 url("../images/visual_bg_sp.png") no-repeat right top / 100% auto;
background-attachment: fixed;
clip-path: polygon(0 0, 100% 0, 100% 100%);
position: absolute;
top: 0;
left: 0;
}


}

/* parts */
.fuki_box {
position: relative;
border: 5px solid #114c96;
border-radius: 30px;
background-color: #e9d9ff;
font-size: 120%;
font-weight: 700;
line-height: 1.6;
padding: 20px 30px 30px;
max-width: 900px;
box-sizing: border-box;
margin: 0 auto;
margin-top: 30px;
}
.fuki_box::before,
.fuki_box::after {
content: "";
position: absolute;
top: 0;
left: 50%;
translate: -50% -100%;
}
.fuki_box::before {
width: 30px;
height: 30px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
background: #114c96;
}
.fuki_box::after {
width: 20px;
height: 20px;
clip-path: polygon(50% 0, 0 100%, 100% 100%);
background: #e9d9ff;
translate: -50% -97%;
}
.fuki_bar {
display: flex;
justify-content: center;
}
.fuki_bar b {
font-style: normal;
background: #e66d38;
color: #fff;
display: block;
text-align: center;
font-size: 150%;
font-weight: bold;
margin: 0 auto;
padding: 10px 20px;
line-height: 1.2;
bottom: 0;
translate: 0 calc(100% - 20px);
translate: 0 -20px;
}
	@media screen and (min-width:768px) and ( max-width:1080px) {
	}
	@media screen and (max-width:768px) {
	.fuki_box {
	border-width: 3px;
	padding: 20px 20px 20px;
	margin-top: 20px;
	}
	.fuki_box::before {
	width: 20px;
	height: 20px;
	}
	.fuki_box::after {
	width: 14px;
	height: 14px;
	}
	.fuki_bar b {
	translate: 0;
	margin-top: 10px;
	}
	}
.area_ttl {
font-size: 350%;
font-weight: 700;
text-align: center;
line-height: 1.2;
padding-bottom: 40px;
margin-bottom: 40px;
position: relative;
}
.area_ttl::after {
position: absolute;
display: block;
content: "";
background: linear-gradient(to right, #114a94,#0096d6);
width: 100px;
height: 10px;
right: 50%;
bottom: 0;
transform: translate(50%,0);
}
.area_ttl span {
color: #fff;
}
.area_ttl em {
font-style: normal;
color: #E66D38;
}
.area_ttl b {
background: linear-gradient(to right, #114a94,#0096d6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: block;
}
.area_txt {
padding: 0;
margin: 0 auto 50px;
font-size: 140%;
line-height: 1.6;
}
.marker {
background: rgba(255, 255, 0, 0.7);
}
	@media screen and (min-width:768px) and ( max-width:1080px) {
	}
	@media screen and (max-width:768px) {
	.area_ttl {
	font-size: 250%;
	padding-bottom: 30px;
	margin-bottom: 30px;
	}
	.area_ttl::after {
	width: 50px;
	height: 5px;
	}
	.area_txt {
	padding: 0;
	margin: 0 auto 40px;
	font-size: 120%;
	}
	}
	@media screen and (max-width:600px) {
	.area_ttl {
	font-size: 200%;
	padding-bottom: 20px;
	margin-bottom: 20px;
	}
	}
	@media screen and (max-width:500px) {
	.area_ttl {
	font-size: 180%;
	}
	}
	@media screen and (max-width:450px) {
	.area_ttl br {
	display: none;
	}
	}
.btn_box {
margin: 50px auto 0;
}
.btn_box > span {
text-align: center;
font-weight: bold;
color: #0e328a;
display: block;
padding: 10px 5px;
font-size: 120%;
}
.btn_box > span b {
color: #222;
display: inline-block;
padding: 0 3px;
font-size: 120%;
}
.button {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 100px;
border-radius: 50px;
background: #0096D6;
font-size: 200%;
line-height: 1.1;
color: #fff;
font-weight: normal;
text-align: center;
margin: 0 auto;
text-decoration: none;
box-shadow: 0 5px 0 rgba(73,2,2,0.1);
transition: .3s;
max-width: 600px;
padding: 0 45px;
border: none;
transition: .3;
}
.button:hover {
opacity: 0.8;
}
.button:before {
content: "";
position: absolute;
right: 30px;
top: 50%;
width: 15px;
height: 15px;
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
transform: translate(0,-50%) rotate(-45deg);
}
.button span {
display: inline-block;
}
.button br {
display: none;
}
	@media screen and (min-width: 768px) {
	.button:hover {
	opacity: 0.7;
	}
	}
	@media screen and (max-width: 768px) {
	.btn_box {
	margin: 30px auto 0;
	}
	.button {
	height: 80px;
	border-radius: 40px;
	font-size: 150%;
	box-shadow: 3px 5px 0 rgba(73,2,2,0.1);
	max-width: 600px;
	padding: 0 30px;
	}
	.button:before {
	right: 20px;
	width: 10px;
	height: 10px;
	border-bottom: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: translate(0,-50%) rotate(-45deg);
	}
	}
	@media screen and (max-width: 500px) {
	.button br {
	display: block;
	}
	}
/* parts end */

/* about_area */
#about_area {
background: #fff;
}
#about_area .area_txt {
padding: 0 50px;
}
.about_ttl {
display: flex;
justify-content: center;
align-items: flex-end;
text-align: center;
color: #104991;
font-weight: 700;
line-height: 1.2;
margin-bottom: 60px;
}
.about_ttl .txt {
display: flex;
flex-flow: column nowrap;
align-items: center;
padding-bottom: 15px;
}
.about_ttl em {
font-size: 200%;
font-style: normal;
color: #104991;
display: block;
}
.about_ttl b {
font-size: 250%;
position: relative;
display: inline-block;
}
.about_ttl::before,
.about_ttl::after {
flex: 0 1 150px;
height: 120px;
display: block;
content: "";
}
.about_ttl::before {
background: url("../images/about_icon01.png") no-repeat center center / contain;
}
.about_ttl::after {
background: url("../images/about_icon02.png") no-repeat center center / contain;
}
	@media screen and (max-width:900px) {
	.about_ttl em {
	font-size: 180%;
	}
	.about_ttl b {
	font-size: 200%;
	}
	}
	@media screen and (max-width:768px) {
	.about_ttl {
	margin-bottom: 30px;
	}
	.about_ttl .txt {
	padding-bottom: 10px;
	flex: 1 0 0%;
	}
	.about_ttl em {
	font-size: 130%;
	}
	.about_ttl b {
	font-size: 180%;
	}
	.about_ttl b br {
	display: none;
	}
	.about_ttl::before,
	.about_ttl::after {
	flex: 0 1 100px;
	height: 80px;
	}
	#about_area .area_txt {
	padding: 0 10px;
	}
	}
	@media screen and (max-width:600px) {
	.about_ttl {
	flex-flow: row wrap;
	}
	.about_ttl .txt {
	flex: 1 0 100%;
	order: 3;
	}
	.about_ttl::before {
	}
	.about_ttl::after {	
	}
	}
	@media screen and (max-width:600px) {
	.about_ttl em {
	font-size: 120%;
	}
	.about_ttl b {
	font-size: 150%;
	}
	}
.about_list {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: space-between;
}
.about_list li {
width: 48%;
} 
.about_list li .box {
box-shadow: 0px 0px 10px 0px rgba(17,74,148,0.3);
background: linear-gradient(90deg, #c5edfa 0%, #cbdef7 100%);
margin: 0;
}
.about_list .ttl {
padding: 30px 20px 10px;
}
.about_list .ttl b {
font-size: 170%;
font-weight: 700;
display: flex;
align-items: center;
height: 60px;
position: relative;
padding: 10px 10px 10px 25px;
}
.about_list .ttl b::before {
content: "";
display: block;
width: 10px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to top, #114a94, #0096d6);
}
.about_list .txt {
width: 80%;
margin: 10px auto 0;
font-size: 80%;
display: block;
}
.about_list .txt a {
color: #000;
}
	@media screen and (max-width:768px) {
	.about_list .ttl b::before {
	width: 5px;
	}
	.about_list {
	flex-flow: row wrap;
	}
	.about_list li {
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
	padding: 0 10px 20px;
	}
	.about_list .txt {
	width: 100%;
	text-align: center;
	}
	}
	@media screen and (max-width:768px) {
	#about_area .fuki_box {
	padding: 20px 20px 30px;
	margin-left: 10px;
	margin-right: 10px;
	}
	#about_area .fuki_bar b {
	translate: 0 -30px;
	margin: 10px auto 0;
	max-width: 85%;
	font-size: 130%;
	}
	}
	@media screen and (max-width:600px) {
	.about_list .txt {
	width: 100%;
	}
	}
	@media screen and (max-width:600px) {
	.about_list li {
	max-width: inherit;
	}
	}

/* threat_area */
#threat_area {
background: url("../images/threat_bg.png") no-repeat center top / 100% auto,linear-gradient(to left, #001158,#000);
}
#threat_area .area_ttl {
display: flex;
justify-content: center;
align-items: flex-end;
text-align: center;
color: #104991;
font-weight: 700;
line-height: 1.2;
margin-bottom: 60px;
}
#threat_area .area_ttl::before,
#threat_area .about_ttl::after {
flex: 0 1 150px;
height: 120px;
display: block;
content: "";
}
#threat_area .area_ttl::before {
background: url("../images/threat_icon01.png") no-repeat center center / contain;
}
	@media screen and (max-width:768px) {
	#threat_area {
	background: url("../images/threat_bg.png") no-repeat center top / auto 350px,linear-gradient(to left, #001158,#000);
	}
	#threat_area .area_ttl {
	margin-bottom: 30px;
	}
	#threat_area .area_ttl::before {
	flex: 0 1 100px;
	height: 80px;
	}
	}
	@media screen and (max-width:500px) {
	#threat_area .area_ttl br {
	display: block;
	}
	#threat_area .area_ttl::before {
	flex: 0 1 80px;
	height: 60px;
	}
	}
#threat_area .area_txt {
color: #fff;
}
.threat_box {
position: relative;
padding: 50px;
margin-bottom: 40px;
background: linear-gradient(to right, #002d4e, #114a94);
}
	@media screen and (max-width:768px) {
	#threat_area .area_txt {
	padding: 0 10px;
	}
	.threat_box {
	margin: 0 10px 20px;
	padding: 20px;
	}
	}
.threat_box .image {
position: absolute;
display: block;
right: 0;
top: -20px;
width: 200px;
}
.threat_ttl {
text-align: center;
color: #fff;
margin-bottom: 40px;
position: relative;
padding-right: 50px;
}
	@media screen and (max-width:900px) {
	.threat_ttl {
	padding-right: 100px;
	}
	}
.threat_ttl em {
color: #b4e0f9;
font-style: normal;
font-size: 170%;
font-weight: 700;
line-height: 1;
display: block;
margin-bottom: 15px;
}
.threat_ttl b {
font-size: 350%;
font-weight: 700;
line-height: 1;
}
	@media screen and (max-width:850px) {
	.threat_ttl em {
	font-size: 140%;
	margin-bottom: 15px;
	}
	.threat_ttl b {
	font-size: 300%;
	}
	}
	@media screen and (max-width:768px) {
	.threat_box .image {
	position: relative;
	right: inherit;
	top: inherit;
	width: 150px;
	margin: 0 auto 10px;
	}
	.threat_ttl {
	margin-bottom: 20px;
	padding: 0;
	}
	.threat_ttl em {
	font-size: 130%;
	margin-bottom: 15px;
	}
	.threat_ttl b {
	font-size: 300%;
	}
	}
	@media screen and (max-width:600px) {
	.threat_box .image {
	width: 120px;
	}
	.threat_ttl em {
	font-size: 110%;
	margin-bottom: 10px;
	}
	}
.threat_list .bar {
color: #fff;
font-weight: 700;
height: 60px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.threat_list .bar em {
flex: 0 0 60px;
height: 100%;
font-size: 200%;
font-style: normal;
background: #0096d6;
display: flex;
align-items: center;
justify-content: center;
}
.threat_list .bar b {
flex: 1 0 0%;
color: #fff;
font-size: 200%;
font-weight: 700;
height: 100%;
padding: 0 20px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
background: linear-gradient(to left, #0096d6, #114a94);
}
	@media screen and (max-width:768px) {
	.threat_list .bar {
	height: 100%;
	min-height: 60px;
	align-items: normal;
	}
	.threat_list .bar em {
	flex: 0 0 60px;
	font-size: 150%;
	height: auto;
	}
	.threat_list .bar b {
	font-size: 150%;
	padding: 5px 10px;
	height: auto;
	}
	}
	@media screen and (max-width:500px) {
	.threat_list .bar {
	min-height: 40px;
	}
	.threat_list .bar em {
	flex: 0 0 40px;
	font-size: 130%;
	}
	.threat_list .bar b {
	font-size: 130%;
	}
	}
.threat_list li:not(:last-child) {
margin-bottom: 30px;
}
.threat_list .box_list {
background: #fff;
padding: 30px;
line-height: 2;
}
.threat_list .box_list dl:not(:last-child) {
margin-bottom: 20px;
}
.threat_list .box_list dt {
position: relative;
color: #0096d6;
font-size: 140%;
font-weight: 700;
padding: 5px 0 5px 15px;
line-height: 1.2;
}
.threat_list .box_list dt::before {
position: absolute;
display: block;
content: "";
background: url(../img/icon02.png);
height: 10px;
aspect-ratio: cos(30deg);
clip-path: polygon(0 0,100% 50%,0 100%);
background: linear-gradient(45deg,#002d4e,#002d4e);
left: 0;
top: 50%;
translate: 0 -50%;
}
	@media screen and (max-width:768px) {
	.threat_list li:not(:last-child) {
	margin-bottom: 20px;
	}
	.threat_list .box_list {
	padding: 20px;
	}
	.threat_list .box_list dl:not(:last-child) {
	margin-bottom: 15px;
	}
	.threat_list .box_list dt {
	font-size: 140%;
	padding-left: 10px;
	}
	.threat_list .box_list dt::before {
	height: 8px;
	}
	}
.arrow {
display: flex;
justify-content: center;
padding: 30px;
}
.arrow span {
position: relative;
display: flex;
padding: 20px 20px 10px;
color: #fff;
font-size: 230%;
font-weight: 700;
background: linear-gradient(to bottom, #114a94, #0096d6);
}
.arrow span::before {
content: "";
position: absolute;
left: 50%;
top: 99%;
translate: -50% 0;
width: 150%;
height: 30px;
clip-path: polygon(0 0, 100% 0%, 50% 100%);
background: #0096d6;
}
	@media screen and (max-width:768px) {
	.arrow {
	padding: 20px;
	}
	.arrow span {
	padding: 15px 20px 10px;
	font-size: 150%;
	}
	.arrow span::before {
	height: 30px;
	}
	}
.threat_box .box {
margin-top: 30px;
}
.threat_box .box .bar {
color: #fff;
font-weight: 700;
height: 60px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.threat_box .box .bar em {
flex: 0 0 300px;
height: 100%;
font-size: 150%;
font-style: normal;
background: #BA5AD5;
display: flex;
align-items: center;
justify-content: center;
}
.threat_box .box .bar b {
flex: 1 0 0%;
color: #fff;
font-size: 200%;
font-weight: 700;
height: 100%;
padding: 0 20px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
background: linear-gradient(to left, #0096d6, #114a94);
}
	@media screen and (max-width:768px) {
	.threat_box .box .bar {
	height: auto;
	flex-flow: row wrap;
	align-items: normal;
	}
	.threat_box .box .bar em {
	flex: 0 1 100%;
	height: auto;
	font-size: 130%;
	padding: 10px;
	}
	.threat_box .box .bar b {
	flex: 0 1 100%;
	font-size: 140%;
	height: auto;
	padding: 10px;
	text-align: center;
	}
	}
.threat_box .box .box_txt {
background: #fff;
padding: 30px;
line-height: 2;
}
.threat_box .fuki_box {
font-size: 140%;
padding: 40px;
}
	@media screen and (max-width:768px) {
	.threat_box .box .box_txt {
	padding: 20px;
	}
	.threat_box .fuki_box {
	font-size: 120%;
	padding: 20px;
	}
	}
.threat_column_list li {
margin-bottom: 40px;
}
.threat_column_list li .layout {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.threat_column_list .info {
padding: 0;
flex: 1 0 0%;
}
.threat_column_list li:nth-child(even) .layout {
flex-flow: row-reverse;
}
.threat_column_list li:nth-child(even) .layout .info {
padding-right: 20px;
}
.threat_column_list li:nth-child(odd) .layout .info {
padding-left: 20px;
}
.threat_column_list .image {
flex: 0 1 20%;
}
.threat_column_list .image img {
}
.threat_column_list .txt_box {
}
.threat_column_list .bar {
background: #fff;
display: flex;
align-items: stretch;
color: #114a93;
font-weight: 700;
margin-bottom: 20px;
}
.threat_column_list .bar em {
flex: 0 1 35%;
display: flex;
font-size: 150%;
padding: 10px;
font-style: normal;
align-items: center;
justify-content: center;
text-align: center;
}
.threat_column_list .bar b {
flex: 1 0 0%;
display: flex;
background: #114a93;
color: #fff;
font-size: 150%;
padding: 10px;
align-items: center;
justify-content: center;
text-align: center;
}
.threat_column_list .txt {
color: #fff;
line-height: 2;
}
	@media screen and (max-width:768px) {
	.threat_column_list li {
	padding: 0 10px;
	}
	.threat_column_list .info {
	padding: 0 0;
	flex: 1 0 0%;
	}
	.threat_column_list .bar {
	display: block;
	}
	.threat_column_list .bar em {
	display: block;
	}
	.threat_column_list .bar b {
	display: block;
	}
	}
	@media screen and (max-width:500px) {
	.threat_column_list li:last-child {
	margin-bottom: 0;
	}
	.threat_column_list li .layout {
	flex-flow: column nowrap!important;
	}
	.threat_column_list li:nth-child(even) .layout .info {
	padding-right: 0;
	}
	.threat_column_list li:nth-child(odd) .layout .info {
	padding-left: 0;
	}
	.threat_column_list .image {
	order: 2;
	text-align: center;
	width: 100%;
	padding: 10px;
	}
	.threat_column_list .image img {
	max-width: 200px;
	}
	.threat_column_list .bar em {
	font-size: 130%;
	}
	.threat_column_list .bar b {
	font-size: 130%;
	}
	}

#industry_area {
background: linear-gradient(to right, #c5edfa, #cbdef7);
padding-bottom: 10px;
}
#industry_area .area_ttl {
display: flex;
align-items: center;
justify-content: center;
}
#industry_area .area_ttl em {
color: #fff;
background: linear-gradient(to left, #0096d6, #114a94);
display: inline-block;
padding: 10px 30px;
border-radius: 50px;
margin-right: 10px;
font-size: 80%;
line-height: 1;
}
	@media screen and (min-width:900px) {
	#industry_area .area_ttl b br {
	display: none;
	}
	}
	@media screen and (max-width:900px) {
	#industry_area .area_ttl b br {
	display: block!important;
	}
	}
	@media screen and (max-width:768px) {
	}
.industry_list {
margin-bottom: 0;
}
.industry_list li {
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(17,74,148,0.3);
padding: 30px;
}
.industry_list li:not(:last-child) {
margin-bottom: 30px;
}
.industry_list li .layout {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
justify-content: flex-start;
}
.industry_list li:nth-child(even) .layout {
flex-flow: row-reverse;
}
.industry_list .image {
flex: 0 1 48%;
}
.industry_list .info {
padding: 0 0 0 20px;
flex: 1 0 0%;
}
.industry_list li:nth-child(even) .layout .info {
padding: 0 20px 0 0;
}
.industry_list .bar {
color: #fff;
font-weight: 700;
height: 60px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
}
.industry_list .bar em {
flex: 0 0 60px;
height: 100%;
font-size: 200%;
font-style: normal;
background: #0096d6;
display: flex;
align-items: center;
justify-content: center;
}
.industry_list .bar b {
flex: 1 0 0%;
color: #fff;
font-size: 200%;
font-weight: 700;
height: 100%;
padding: 0 20px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-start;
background: linear-gradient(to left, #0096d6, #114a94);
}
	@media screen and (max-width:768px) {
	.industry_list .bar {
	height: 100%;
	min-height: 60px;
	align-items: normal;
	}
	.industry_list .bar em {
	flex: 0 0 60px;
	font-size: 150%;
	height: auto;
	}
	.industry_list .bar b {
	font-size: 150%;
	padding: 5px 10px;
	height: auto;
	}
	}
	@media screen and (max-width:500px) {
	.industry_list .bar {
	min-height: 40px;
	}
	.industry_list .bar em {
	flex: 0 0 40px;
	font-size: 130%;
	}
	.industry_list .bar b {
	font-size: 130%;
	}
	}
.industry_list .txt {
line-height: 1.8;
font-size: 120%;
padding: 20px 0;
}
	@media screen and (max-width:768px) {
	.industry_list {
	padding: 0 10px;
	}
	.industry_list li {
	padding: 20px;
	}
	.industry_list li .layout {
	flex-flow: column wrap!important;
	}
	.industry_list .image {
	flex: 1 0 100%;
	text-align: center;
	order: 2;
	width: 100%;
	}
	.industry_list .info {
	flex: 1 0 0%;
	width: 100%;
	padding: 0!important;
	}
	.industry_list li:nth-child(even) .layout .info {
	padding: 0 20px 0 0;
	}
	.industry_list .txt {
	padding: 15px 0;
	}
	}

#ai_area {
background: linear-gradient(to right, #c5edfa, #cbdef7);
}
#ai_area .area_txt {
text-align: center;
}
	@media screen and (min-width:900px) {
	#ai_area .area_ttl b br {
	display: none;
	}
	}
	@media screen and (max-width:900px) {
	#ai_area .area_ttl b br {
	display: block!important;
	}
	}
	@media screen and (max-width:768px) {
	#ai_area .area_txt {
	text-align: left;
	padding: 0 10px;
	}
	}
.ai_list {
display: flex;
flex-flow: row nowrap;
align-items: stretch;
justify-content: space-between;
}
.ai_list li {
width: 48%;
background: #fff;
box-shadow: 0px 0px 10px 0px rgba(17,74,148,0.3);
padding: 30px;
box-sizing: border-box;
}
.ai_list .ttl {
padding: 0 20px 10px;
}
.ai_list .ttl b {
font-size: 170%;
font-weight: 700;
display: flex;
align-items: center;
height: 60px;
position: relative;
padding: 0 0 0 25px;
}
.ai_list .ttl b::before {
content: "";
display: block;
width: 10px;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to top, #114a94, #0096d6);
}
.ai_list .txt {
line-height: 1.6;
font-size: 120%;
padding-top: 10px;
}
	@media screen and (min-width: 768px) and (max-width: 1100px) {
	.ai_list .ttl {
	padding: 0 0 10px;
	}
	.ai_list .ttl b {
	font-size: 150%;
	}
	.ai_list .ttl br {
	display: none;
	}
	}
	@media screen and (max-width:768px) {
	.ai_list {
	padding: 0 10px;
	flex-flow: row wrap;
	}
	.ai_list li {
	width: 100%;
	padding: 20px;
	}
	.ai_list li:not(:last-child) {
	margin-bottom: 30px;
	}
	.ai_list .ttl {
	padding: 0 0 10px;
	}
	.ai_list .ttl b {
	font-size: 130%;
	height: auto;
	}
	.ai_list .ttl b::before {
	width: 5px;
	}
	.ai_list .image {
	width: 100%;
	max-width: 400px;
	text-align: center;
	margin: 0 auto;
	}
	.ai_list .image img {
	max-width: 100%;
	min-width: 300px;
	}
	.ai_list .txt {
	line-height: 1.6;
	font-size: 120%;
	}
	}
	@media screen and (max-width:500px) {
	.ai_list .image img {
	min-width: inherit;
	}
	}

/* #check_area */

#check_area {
background: linear-gradient(to right, #002d4e, #114a94);
margin-bottom: 50px;
}
#check_area .area_in {
}
#check_area .area_ttl {
color: #fff;
position: relative;
padding-left: 0;
display: flex;
justify-content: center;

}
#check_area .area_ttl em {
color: #b4e0f9;
}
#check_area .area_ttl > span {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
#check_area .area_ttl > span .txt {

}
#check_area .area_ttl > span::before {
flex: 0 1 150px;
display: block;
content: "";
background: url("../images/check_icon01.png") no-repeat center top / contain;
width: 150px;
height: 120px;
}
#check_area .area_ttl br {
display: none;
}
#check_area .area_ttl::after {
background: linear-gradient(to right, #10488f,#b4e0f9);
}
	@media screen and (max-width:900px) {
	#check_area .area_ttl br {
	display: block;
	}
	}
	@media screen and (max-width:768px) {
	#check_area .area_ttl > span::before {
	flex: 0 1 120px;
	}
	#check_area .area_ttl > span::before {
	width: 120px;
	height: 80px;
	}
	}
	@media screen and (max-width:600px) {
	#check_area .area_ttl > span::before {
	flex: 0 1 100px;
	}
	#check_area .area_ttl > span::before {
	width: 100px;
	height: 100%;
	}
	}

.check_list {
max-width: 900px;
margin: 0 auto 70px;
}
.check_list li {
position: relative;
background: #fff;
border-radius: 10px;
font-size: 170%;
font-weight: 700;
padding: 20px 20px 20px 60px;
}
.check_list li:not(:last-child) {
margin-bottom: 10px;
}
.check_list li .icon {
position: absolute;
left: 20px;
top: 50%;
translate: 0 -50%;
}
.check_list li .icon img {
max-width: 33px;
}
.check_list li.uncheck {
position: relative;
}
.check_list li.uncheck .icon img {
max-width: 25px;
}
	@media screen and (max-width:768px) {
	.check_list {
	padding: 0 10px;
	}
	.check_list li {
	font-size: 150%;
	padding: 20px 20px 20px 60px;
	}
	}
	@media screen and (max-width:600px) {
	.check_list li {
	font-size: 120%;
	}
	}
.check_list li.uncheck .purple_com {
position: absolute;
background: #ba5ad5;
display: inline-block;
font-weight: 700;
color: #fff;
bottom: 0;
left: 40px;
translate: 0 100%;
padding: 10px 20px;
}
.check_list li.uncheck .purple_com::before {
content: "";
position: absolute;
top: 0;
left: 22px;
border-style: solid;
border-width: 0 8px 18px 8px;
border-color: transparent transparent #ba5ad5;
translate: -50% -100%;
}
	@media screen and (max-width:768px) {
	.check_list li.uncheck .purple_com {
	width: 80%;
	text-align: center;
	font-size: 90%;
	}
	}
	@media screen and (max-width:600px) {
	.check_list li.uncheck .purple_com {
	width: 85%;
	left: 10%;
	font-size: 85%;
	padding: 10px;
	}
	}
#check_area .fuki {
position: relative;
width: 100%;
}
#check_area .fuki_box {
position: absolute;
left: 50%;
bottom: 0;
translate: -50% 100%;
text-align: center;
font-size: 250%;
padding: 20px;
width: 100%;
}
#check_area .com .purple {
color: #ba5ad5;
}
#check_area .fuki_box::before,
#check_area .fuki_box::after {
display: none;
}
#check_area .fuki_box .marker {
color: #BA5AD5;
}
	@media screen and (max-width:768px) {
	#check_area {
	margin: 0;
	}
	#check_area .fuki {
	padding: 0 10px;
	}
	#check_area .fuki_box {
	position: relative;
	left: inherit;
	bottom: inherit;
	translate: 0;
	font-size: 180%;
	padding: 20px;
	}
	#check_area .com .purple {
	color: #ba5ad5;
	}
	}
	@media screen and (max-width:768px) {
	#check_area .fuki_box {
	font-size: 150%;
	}
	}

/* introduce_area */
#introduce_area .introduce_box {
box-shadow: 5px 5px 0px 0px rgba(17,74,148,0.3);
margin-bottom: 70px;
}
.introduce_ttl_box {
background: linear-gradient(to right, #002d4e, #114a94);
}
.introduce_ttl_box .introduce_ttl {
color: #fff;
text-align: center;
padding: 20px 10px;
font-weight: 700;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.introduce_ttl_box .introduce_ttl em {
display: block;
font-style: normal;
font-size: 180%;
color: #b4e0f9;
line-height: 1.1;
}
.introduce_ttl_box .introduce_ttl b {
display: block;
font-size: 300%;
color: #b4e0f9;
line-height: 1.1;
}
.introduce_ttl_box .introduce_ttl b span {
color: #fff;
}
.introduce_ttl_box .introduce_ttl > span {
display: flex;
position: relative;
}
.introduce_ttl_box .introduce_ttl > span .txt {
display: flex;
flex-flow: column nowrap;
justify-content: center;
margin: 0;
padding: 0;
}
.introduce_ttl_box .introduce_ttl > span::before {
flex: 0 1 150px;
display: block;
content: "";
background: url("../images/introduce_icon01.png") no-repeat center center /contain;
width: 150px;
height: 120px;
}
	@media screen and (max-width:900px) {
	.introduce_ttl_box .introduce_ttl em {
	font-size: 150%;
	}
	.introduce_ttl_box .introduce_ttl b {
	font-size: 250%;
	}
	}
	@media screen and (max-width:768px) {
	#introduce_area .introduce_box {
	margin-bottom: 50px;
	}
	#introduce_area .area_ttl,
	#introduce_area .area_txt,
	#introduce_area .introduce_box {
	margin-left: 10px;
	margin-right: 10px;
	}
	.introduce_ttl_box .introduce_ttl {
	height: auto;
	}
	.introduce_ttl_box .introduce_ttl em {
	font-size: 130%;
	}
	.introduce_ttl_box .introduce_ttl b {
	font-size: 200%;
	}
	.introduce_ttl_box .introduce_ttl > span {
	align-items: center;
	}
	.introduce_ttl_box .introduce_ttl > span::before {
	flex: 0 1 120px;
	width: 120px;
	height: 80px;
	}
	}
	@media screen and (max-width:600px) {
	.introduce_ttl_box .introduce_ttl b {
	font-size: 160%;
	}
	.introduce_ttl_box .introduce_ttl > span::before {
	flex: 0 1 100px;
	width: 100px;
	}
	}
	@media screen and (max-width:500px) {
	.introduce_ttl_box .introduce_ttl {
	padding-bottom: 5px;
	}
	.introduce_ttl_box .introduce_ttl > span {
	flex-flow: column-reverse nowrap;
	}
	.introduce_ttl_box .introduce_ttl > span::before {
	height: 60px;
	flex: 0 1 60px;
	margin-top: 5px;
	}
	.introduce_ttl_box .introduce_ttl em {
	font-size: 110%;
	}
	.introduce_ttl_box .introduce_ttl b {
	font-size: 130%;
	}
	}
#introduce_area .introduce_box .lead {
background: #f0f2f4;
font-size: 130%;
line-height: 1.8;
padding: 30px;
}
.introduce_box_cont {
border-left: 5px solid #002d4f;
border-right: 5px solid #002d4f;
border-bottom: 5px solid #002d4f;
}
	@media screen and (max-width:768px) {
	#introduce_area .introduce_box .lead {
	font-size: 120%;
	padding: 20px;
	}
	.introduce_box_cont {
	border-left: 4px solid #002d4f;
	border-right: 4px solid #002d4f;
	border-bottom: 4px solid #002d4f;
	}
	}
.introduce_box .ttl {
text-align: center;
font-size: 250%;
color: #104991;
font-weight: 700;
margin: 40px 20px;
}
.introduce_box .image {
padding: 0 30px 30px;
text-align: center;
}
.introduce_box .image img {
width: 100%;
max-width: 800px;
}
.introduce_box .ttl_num {
width: 200px;
color: #fff;
font-size: 150%;
font-weight: 700;
text-align: center;
margin-bottom: 30px;
padding: 20px;
line-height: 1;
background: linear-gradient(to right, #002d4e, #114a94);
}
.introduce_box .bar {
max-width: 800px;
margin: 0 auto 30px;
padding: 0;
font-size: 200%;
font-weight: 700;
border-bottom: 5px solid #002d4e;
padding-bottom: 10px;
margin-bottom: 20px;
}
.introduce_box .txt {
max-width: 800px;
margin: 0 auto 30px;
padding: 0;
font-size: 120%;
line-height: 2;
}
	@media screen and (max-width:768px) {
	.introduce_box .ttl {
	font-size: 200%;
	margin: 20px 20px;
	}
	.introduce_box .image {
	padding: 0 20px 20px;
	}
	.introduce_box .image img {
	width: 100%;
	max-width: 100%;
	}
	.introduce_box .ttl_num {
	width: 150px;
	font-size: 120%;
	margin-bottom: 20px;
	padding: 10px 20px;
	line-height: 1.2;
	}
	.introduce_box .bar {
	max-width: 100%;
	margin: 0 20px 20px;
	font-size: 180%;
	border-bottom: 4px solid #002d4e;
	}
	.introduce_box .txt {
	max-width: 100%;
	margin: 0 auto 20px;
	padding: 0 20px;
	}
	}
	@media screen and (max-width:600px) {
	.introduce_box .ttl {
	font-size: 150%;
	margin: 10px 20px;
	}
	.introduce_box .bar {
	font-size: 150%;
	}
	}

.hp_box_ttl {
display: inline-block;
color: #fff;
padding: 10px 40px 10px 20px;
font-size: 200%;
font-weight: 300;
font-weight: 700;
margin-bottom: 30px;
background: linear-gradient(to right, #002d4e, #114a94);
}
.hp_box_ttl br {
display: none;
}
.hp_box ul {
padding: 0 20px;
margin-bottom: 60px;
}
.hp_box ul li {
font-size: 150%;
position: relative;
padding-left: 40px;
}
.hp_box ul li:not(:last-child) {
margin-bottom: 20px;
}
.hp_box ul li::before {
position: absolute;
display: block;
content: "";
background: url(../images/icon_sield.png)no-repeat left top/ contain;
width: 28px;
height: 32px;
left: 0;
top: 5px;
}
.hp_box .box {
border-top: 5px solid #002d4e;
border-bottom: 5px solid #002d4e;
padding: 40px 0;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.hp_box .box .icon {
margin-right: 30px;
}
.hp_box .box .icon img {
max-width: 151px;
}
.hp_box .box .ttl {
color: #002d4e;
font-weight: 700;
font-feature-settings: "palt";
}
.hp_box .box .ttl span {
display: block;
font-size: 200%;
}
.hp_box .box .ttl b {
font-size: 300%;
}
	@media screen and (max-width:768px) {
	.hp_box {
	padding: 0 10px;
	}
	.hp_box_ttl {
	padding: 10px;
	font-size: 130%;
	margin-bottom: 20px;
	width: 100%;
	text-align: center;
	}
	.hp_box ul {
	padding: 0;
	margin-bottom: 30px;
	}
	.hp_box ul li {
	font-size: 120%;
	padding-left: 30px;
	}
	.hp_box ul li::before {
	width: 20px;
	}
	.hp_box .box {
	border-top: 4px solid #002d4e;
	border-bottom: 4px solid #002d4e;
	padding: 20px 0;
	flex-flow: row wrap;
	}
	.hp_box .box .icon {
	margin-right: 0;
	}
	.hp_box .box .icon img {
	max-width: 100px;
	}
	.hp_box .box .ttl {
	text-align: center;
	}
	.hp_box .box .ttl span {
	font-size: 150%;
	}
	.hp_box .box .ttl b {
	font-size: 250%;
	}
	}
	@media screen and (max-width:600px) {
	.hp_box_ttl {
	font-size: 130%;
	}
	.hp_box_ttl br {
	display: block;
	}
	.hp_box .box .ttl span {
	font-size: 120%;
	}
	.hp_box .box .ttl b {
	font-size: 200%;
	}
	}

/*
@media screen and (min-width:768px) and ( max-width:1080px) {
	#introduce_area .mid_img {
		margin: 0 20px 50px;
	}
	#introduce_area .list_2wall .img {
		margin: 0 20px 30px;
	}
	#introduce_area .box03 .ttl {
		font-size: 5rem;
	}
}
@media screen and (max-width:768px) {
	#introduce_area .lead_txt {
		font-size: 1.6rem;
		margin-bottom: 30px;
	}
	#introduce_area .box01 {
		box-shadow: 5px 5px 0px 0px rgba(17,74,148,0.3);
		margin-bottom: 40px;
	}
	#introduce_area .box01 .ttl_box {
		padding: 15px;
	}
	#introduce_area .box01 .ttl_box dt {
		font-size: 1.6rem;
	}
	#introduce_area .box01 .ttl_box dt::before {
		background: url(../img/ttl04_icon01.png)no-repeat left top/48px 48px;
		width: 48px;
		height: 48px;
		left: -10px;
		top: 10px;
	}
	#introduce_area .box01 .ttl_box dd {
		font-size: 2.3rem;
	}
	#introduce_area .box01 .txt {
		font-size: 1.6rem;
		line-height: 1.6;
		padding: 20px;
	}
	#introduce_area .box01 .border {
		border-left: 3px solid #002d4f;
		border-right: 3px solid #002d4f;
		border-bottom: 3px solid #002d4f;
	}
	#introduce_area .box_in {
		margin: 0 auto;
	}
	#introduce_area .box_in .mid_ttl {
		font-size: 2.2rem;
		margin: 30px 20px;
		line-height: 1.2;
	}
	#introduce_area .mid_img {
		margin: 0 20px 30px;
	}
	#introduce_area .list_2wall li {
		margin-bottom: 30px;
	}
	#introduce_area .list_2wall .num {
		font-size: 2rem;
		margin-bottom: 20px;
		width: 150px;
	}
	#introduce_area .list_2wall .img {
		margin: 0 20px 20px;
	}
	#introduce_area .list_2wall dl dt {
		font-size: 2rem;
		border-bottom: 3px solid #002d4e;
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	#introduce_area .box02 .ttl {
		padding: 20px;
		font-size: 1.8rem;
		margin-bottom: 20px;
		width: 100%;
		box-sizing: border-box;
	}
	#introduce_area .box02 ul {
		padding: 0 20px;
		margin-bottom: 30px;
	}
	#introduce_area .box02 ul li {
		font-size: 1.6rem;
		padding-left: 30px;
	}
	#introduce_area .box02 ul li:not(:last-child) {
		margin-bottom: 10px;
	}
	#introduce_area .box02 ul li::before {
		background: url(../img/icon_sield.png)no-repeat left top/14px 16px;
		width: 14px;
		height: 16px;
		top: 7px;
	}
	#introduce_area .box03 {
		border-top: 3px solid #002d4e;
		border-bottom: 3px solid #002d4e;
		padding: 20px 0;
		flex-flow: column;
		margin-bottom: 30px;
	}
	#introduce_area .box03 .icon {
		margin-right: 0;
		margin-bottom: 10px;
		text-align: center;
	}
	#introduce_area .box03 .icon img {
		max-width: 40%;
	}
	#introduce_area .box03 .ttl {
		font-size: 3rem;
	}
	#introduce_area .box03 .ttl span {
		font-size: 1.5rem;
		text-align: center;
	}	
}
*/
/*
.btn {
text-align: center;
}
.btn a {
display: flex;
width: 600px;
height: 100px;
background: #0096d6;
color: #fff;
border-radius: 100px;
margin: 0 auto;
font-size: 2.7rem;
font-weight: 700;
align-items: center;
justify-content: center;
position: relative;
}
.btn a::after {
position: absolute;
display: block;
content: "";
background: url(../img/arrow02.png)no-repeat right center/17px 25px;
width: 17px;
height: 25px;
right: 30px;
}
@media screen and (max-width:768px) {
.btn a {
width: 100%;
height: 70px;
font-size: 1.8rem;
}
.btn a::after {
background: url(../img/arrow02.png)no-repeat right center/11px 17px;
width: 11px;
height: 17px;
right: 15px;
}
}

/* effect */
/*
@media screen and (min-width: 768px) {
.effectdelay {
opacity: 0;
transition: 0.8s;
}
.effectdelay.effect_active {
opacity: 1;
transform: translateY(0);
}
.effect {
opacity: 0;
transition: 1.2s;
transform: translateY(-70px);
}
.effect.effect_active {
opacity: 1;
transform: translateY(0);
}
}
*/
#wrap.effectdelay {
background: #C6ECFA;
}
#wrap.effectdelay .contents {
opacity: 0;
transition: .6s;
}
#wrap.effectdelay.effect_active .contents {
opacity: 1;
}
#wrap.effectdelay .visual_tit span b,
#wrap.effectdelay .visual_tit em {
opacity: 0;
transition: .8s;
translate: -9999px 0;
}
#wrap.effectdelay.effect_active .visual_tit span b,
#wrap.effectdelay.effect_active .visual_tit em {
opacity: 1;
translate: 0 0;
}
#wrap.effectdelay .visual_tit span b:nth-child(1) {
transition-delay: 0;
}
#wrap.effectdelay .visual_tit span b:nth-child(2) {
transition-delay: 0.2s;
}
#wrap.effectdelay .visual_tit span b:nth-child(3) {
transition-delay: 0.4s;
}
#wrap.effectdelay .visual_tit em {
transition-delay: 0.6s;
}

.comic_list li.effect {
opacity: 0;
transition: .6s;
translate: 0 100px;
}
.comic_list li.effect.effect_active {
opacity: 1;
translate: 0 0;
}


#about_area .area_ttl.effect,
#about_area .area_txt.effect,
#about_area .about_ttl.effect,
#about_area .fuki.effect {
opacity: 0;
translate: 0 100px;
transition: .6s;
}
#about_area .area_ttl.effect.effect_active,
#about_area .area_txt.effect.effect_active,
#about_area .about_ttl.effect.effect_active,
#about_area .fuki.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#about_area .about_list li.effect {
opacity: 0;
translate: -100px 0;
transition: .6s;
}
#about_area .about_list li.effect.effect_active {
opacity: 1;
translate: 0 0;
}
	@media screen and (min-width:600px) {
	#about_area .about_list li:nth-child(2).effect {
	transition-delay: 0.2s;
	}
	}

#threat_area .area_ttl.effect,
#threat_area .area_txt.effect,
#threat_area .threat_box.effect,
#threat_area .fuki.effect,
#threat_area .threat_column_list li.effect {
opacity: 0;
translate: 0 100px;
transition: .6s;
}
#threat_area .area_ttl.effect.effect_active,
#threat_area .area_txt.effect.effect_active,
#threat_area .threat_box.effect.effect_active,
#threat_area .fuki.effect.effect_active,
#threat_area .threat_column_list li.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#threat_area .threat_list li.effect,
#threat_area .box.effect {
opacity: 0;
translate: -100px 0;
transition: .6s;
}
#threat_area .threat_list li.effect.effect_active,
#threat_area .box.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#threat_area .arrow.effect {
opacity: 0;
translate: 0 -100px;
transition: .6s;
}
#threat_area .arrow.effect.effect_active {
opacity: 1;
translate: 0 0;
}
#industry_area .area_ttl.effect,
#ai_area .area_ttl.effect,
#ai_area .area_txt.effect {
opacity: 0;
translate: 0 100px;
transition: .6s;
}
#industry_area .industry_list li.effect,
#ai_area .ai_list li.effect {
opacity: 0;
translate: -100px 0;
transition: .6s;
}
#industry_area .area_ttl.effect.effect_active,
#industry_area .industry_list li.effect.effect_active,
#ai_area .area_ttl.effect.effect_active,
#ai_area .area_txt.effect.effect_active,
#ai_area .ai_list li.effect.effect_active {
opacity: 1;
translate: 0 0;
}
	@media screen and (min-width:600px) {
	#ai_area .ai_list li:nth-child(2).effect {
	transition-delay: 0.2s;
	}
	}


#check_area .area_ttl.effect,
#check_area .check_list li.effect,
#check_area .fuki.effect {
opacity: 0;
translate: 0 100px;
transition: .6s;
}
#check_area .area_ttl.effect.effect_active,
#check_area .check_list li.effect.effect_active,
#check_area .fuki.effect.effect_active {
opacity: 1;
translate: 0 0;
}

#introduce_area .area_ttl.effect,
#introduce_area .area_txt.effect,
#introduce_area .introduce_box.effect,
#introduce_area .introduce_box .effect,
#introduce_area .hp_box .effect,
#introduce_area .btn_box.effect {
opacity: 0;
translate: 0 100px;
transition: .6s;
}
#introduce_area .area_ttl.effect.effect_active,
#introduce_area .area_txt.effect.effect_active,
#introduce_area .introduce_box.effect.effect_active,
#introduce_area .introduce_box .effect.effect_active,
#introduce_area .hp_box .effect.effect_active,
#introduce_area .btn_box.effect.effect_active {
opacity: 1;
translate: 0 0;
}

/* effect end */




/* css end */