@charset "utf-8";
/* CSS Document */
.spTab_img{display: none;}
.nav_area{
	max-width: 100%;
	margin:-1px auto 65px;
	color: #FFFFFF; 
	position: sticky;
    z-index: 100;
}
.nav_area>ul{
	display: flex;
} 

.nav_area>ul>li:first-child{
	background: url( "../images/introduction/navi01.jpg")no-repeat;
	background-size: cover;
	background-position: center;
}
.nav_area>ul>li:nth-child(2){
	background: url( "../images/introduction/navi02.jpg")no-repeat;
	background-size: cover;
	background-position: center;
}
.nav_area>ul>li:last-child{
	background: url( "../images/introduction/navi03.jpg")no-repeat;
	background-size: cover;
	background-position: center top;
}
.nav_area>ul>li{padding: 85px 60px 72px;width: 33.33%;}
.nav_area>ul>li>p{
	font-size: 3.0rem;
	font-weight: 900;
	text-align: center;
	margin-bottom: 30px;
}

.nav_area>ul>li>.nav_inner li{
	background: rgba(0,0,0,.7);
	border: 1px solid rgba(255,255,255,.3);
	font-size: 2.0rem;
	font-weight: 700;
}
.nav_area>ul>li>.nav_inner li a{
	display: block;
	padding: 15px;
	background: url( "../images/introduction/nav_arr.png")no-repeat;
	background-position: center right 1em;
	padding-right: 1.5em;
}
section{
	max-width: 1600px;
	margin: auto;
	position: relative;
	padding-bottom: 100px;
}
section:last-of-type{margin-bottom: 100px;}
section+hr{
	background: #e5e5e5;
	height: 1px;
	color: transparent;
	box-sizing: border-box;
	margin-bottom: 100px;
}
section h2{
	font-size: 2.8rem;
	font-weight: 900;
	color: #FFFFFF;
	text-align: right;
	padding: 15px 75px 15px 0;
	transform: translate(-38%,0);
	width: 587px;
}
/*section h2 {
    font-size: 2.8rem;
    font-weight: 900;
    color: #FFFFFF;
    transform: translate(-45%,0);
}*/

section.category01 h2{background: #0966c6;padding-right: 72px;}
section:not(:first-of-type) h2{}
section h3 i{font-style: normal;}
section .sec_inner{display: flex;}
section .txt_area ul li:not(:last-child) {margin-bottom: 30px;}
section h3{
	position: absolute;
	font-size: 5.9rem;
	font-weight: 900;
	color: #031726;
	background: #FFFFFF;
	padding: 30px 30px 30px 13px;
	text-align: left;
	left: 87px;
	top:100px;
	z-index: 100000;
	/*max-width: 56%;*/
}

section .txt_area{
	padding: 190px 11% 0 104px;
	font-size: 2.0rem;
	color: #030a11;
	line-height: 1.7;
}
section .txt_area h4{
	font-size: 2.0rem;
	font-weight: 700;
	color: #FFFFFF;
	text-align: center;
	padding: .3em;
	margin: 30px 0;
}
section .txt_area h5{
	font-size: 1.8rem;
	font-weight: 700;
	font-family: 'DM sans';
	line-height: 1.1;
}
section .txt_area dl{line-height: 1.6;}
section .txt_area dl dt{
	font-size: 2.2rem;
	margin-bottom: .3em;
}
section .txt_area dl dd{
	font-size: 1.6rem;
	font-weight: 500;
}
section .txt_area p{font-weight: 500;}
section .right_area{flex-shrink: 0;width: 62.5%;}
section .right_area .imgbox{
	position: relative;
	margin-top: -10px;
}

section .right_area .imgbox::after{
	position: absolute;
	content: '';
	display: block;
	width: 1095px;
	height: 89px;
	z-index: -1;
	bottom: -21px;
    left: 2%;
}

section.category01 h2{background: #0966c6;}
section.category02 h2{background: #df8044;padding-right: 36px;}
section.category03 h2{background: #ff6c71;padding-right: 49px;}

section#sec01 h3 i{color: #325aa8;}
section#sec01 .txt_area h4{background: #325aa8;}
section#sec01 .txt_area h5{color: #6393ef;}
section#sec01 .txt_area dl dt{color: #325aa8;}
section#sec01 .right_area .imgbox::after{background: #325aa8;}

section#sec02 h3 i{color: #008cd0;}
section#sec02 .txt_area h4{background: #008cd0;}
section#sec02 .txt_area h5{color: #5bc9ff;}
section#sec02 .txt_area dl dt{color: #008cd0;}
section#sec02 .right_area .imgbox::after{background: #008cd0;}

section#sec03 h3 i{color: #00a5a8;}
section#sec03 .txt_area h4{background: #00a5a8;}
section#sec03 .txt_area h5{color: #88e0e2;}
section#sec03 .txt_area dl dt{color: #00a5a8;}
section#sec03 .right_area .imgbox::after{background: #00a5a8;}

section#sec04 h3 i{color: #f08200;}
section#sec04 .txt_area h4{background: #f08200;}
section#sec04 .txt_area h5{color: #fcb867;}
section#sec04 .txt_area dl dt{color: #f08200;}
section#sec04 .right_area .imgbox::after{background: #f08200;}

/*section#sec05 h3{letter-spacing: -.14em;}*/
section#sec05 h3{letter-spacing: -.1em;}
section#sec05 h3 i{color: #ecbc24;}
section#sec05 .txt_area h4{background: #ecbc24;}
section#sec05 .txt_area h5{color: #f6de93;}
section#sec05 .txt_area dl dt{color: #ecbc24;}
section#sec05 .right_area .imgbox::after{background: #ecbc24;}

/*section#sec06 h3{letter-spacing: -.139em;}*/
section#sec06 h3{letter-spacing: -.1em;}
section#sec06 h3 i{color: #c98232;}
section#sec06 .txt_area h4{background: #c98232;}
section#sec06 .txt_area h5{color: #f7ba74;}
section#sec06 .txt_area dl dt{color: #c98232;}
section#sec06 .right_area .imgbox::after{background: #c98232;}

section#sec07 h3 i{color: #e03b8b;}
section#sec07 .txt_area h4{background: #e03b8b;}
section#sec07 .txt_area h5{color: #ffacd4;}
section#sec07 .txt_area dl dt{color: #e03b8b;}
section#sec07 .right_area .imgbox::after{background: #e03b8b;}

section#sec08 h3 i{color: #ff3e3a;}
section#sec08 .txt_area h4{background: #ff3e3a;}
section#sec08 .txt_area h5{color: #ff9492;}
section#sec08 .txt_area dl dt{color: #ff3e3a;}
section#sec08 .right_area .imgbox::after{background: #ff3e3a;}
/*----------------------------------------------
TAB・SPスタイル
----------------------------------------------*/
@media screen and (max-width:1024px) {
	.spTab_img{display: block;}
	.nav_area>ul {
    display: block;
		overflow: hidden;
}
	.nav_area>ul>li{
		padding: 0;
		width:100%!important;
		overflow: hidden;
		/*transition: 3s;*/
	}
	.nav_area>ul>li:first-child{
	background: url( "../images/introduction/navi01.jpg")no-repeat;
	background-size: cover;
	background-position: center top;
}
.nav_area>ul>li:nth-child(2){
	background: url( "../images/introduction/navi02.jpg")no-repeat;
	background-size: cover;
	background-position: center top;
}
.nav_area>ul>li:last-child{
	background: url( "../images/introduction/navi03.jpg")no-repeat;
	background-size: cover;
	background-position: center top;
}
	.nav_area>ul>li.active{
		height: auto!important;
		max-height: 9999px!important;}
	.nav_area>ul>li>p{
		text-align: left;
		padding: 20px 20px;
		/*transition: .5s!important;*/
	}
	.nav_area>ul>li>ul{
		padding: 0 2% 35px;
	}

	section .sec_inner{display: block;}
	section h2{
		display: inline-block;
		transform: translate(0,0);
		padding-left: 4.5%!important	;
		padding-right: 5.5%!important;
		/*width: 37.335%;*/
		width: auto;
		text-align: left;
	}
section:last-of-type{margin-bottom: 0;padding-bottom: 12vw;}
	section:not(:last-of-type){
		padding-bottom: 5.5vw;
	}
	section h3{
		position: static;
		width: auto;
		padding-left: 0;
		padding-right: 0;
		margin: 0 4.5% 0 4.5%;
		max-width: none;
	}
	section .imgbox img{width: 100%;}
	section .right_area{display: none;}
	section .txt_area{padding: 0;}
	section .txt_area p{padding: 0 4.5% 0 4.5%;margin-bottom: 55px;}
	section ul{padding: 0 4.5% 0 4.5%;}
	section#sec01 .txt_area ul li:last-child{margin-bottom: 0;}
	section+hr{margin-bottom: 8vw;}
}
/*----------------------------------------------
ラップトップスタイル
----------------------------------------------*/
@media screen and (max-width:1550px) and (min-width:1024px){
	section h3{font-size: 3.6vw;}
}
/*----------------------------------------------
TBスタイル
----------------------------------------------*/
@media screen and (max-width:1024px) and (min-width:750px) {
	section h3{font-size: 5.4vw;max-width: none;}
	section{overflow: hidden;}
}
/*----------------------------------------------
SPスタイル
----------------------------------------------*/
@media screen and (max-width:750px) {
	.nav_area{margin: -1px auto 9vw;}
	.nav_area>ul>li>p{
	font-size: 1.6rem;
	margin-bottom: 0;
}
	.nav_area>ul>li>.nav_inner li{
		font-size: 1.2rem;
	}
	section h2 {
    font-size: 1.4rem;
    text-align: left;
}
section h3{/*font-size: 2.6rem;*/font-size:6.4vw;margin-left: 3%;max-width: none;}
section .txt_area{font-size: 1.3rem;}
section .txt_area p{
	margin-bottom: 25px;
}
section .txt_area h4{
	font-size: 1.4rem;
	padding: 0.5em;
}

section .txt_area h5{font-size: 1.4rem;}
section .txt_area dl dt{font-size: 1.5rem;}
section .txt_area dl dd{font-size: 1.2rem;}
	}
/*----------------------------------------------
TAB横スタイル
----------------------------------------------*/
@media (orientation: landscape) and (max-width: 1366px) and (min-width:1180px){
	section{overflow: hidden;}
	section h3{font-size: 3.7vw;}
	section .txt_area{padding: 14vw 11% 0 80px;}
	section h3 {left: 80px;}
	section.category01 h2{padding-right: 80px;}
	section.category02 h2{padding-right: 49px;}
	section.category03 h2{padding-right: 58px;}
}