@charset "utf-8";

/* mainimage
------------------------------------------------------------ */
#mainimage{
	position: relative;
	width: 95%;
	padding: 0 0;
}
#mainimage video{width: 100%;}
#mainimage .main-logo{
	position: absolute;
	top: 8%;
	left: 4%;
}
#mainimage .main-logo h2{
	width: 36%;
	margin-bottom: 1em;
}
#mainimage .main-logo strong{
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
}
#mainimage .main-catch{
	position: absolute;
	bottom: 5%;
	left: 4%;
	color: #fff;
	font-family: ttl-font-b;
	font-size: 4.3em;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.1em;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
	#mainimage { width: 93%;}
	#mainimage .main-catch {font-size: 3.5em;}
}
@media screen and (max-width: 520px) {
	#mainimage {width: 100%;}
	#mainimage .main-logo {left: 5%;}
#mainimage .main-logo h2 {
    width: 40%;
    margin-bottom: 0.2em;
}

#mainimage .main-logo strong {font-size: 0.7em;}
#mainimage .main-catch {font-size: 1.3em;}


}
/* section01
------------------------------------------------------------ */
#section01{
	position: relative;
	padding: 12em 0;
}
#section01::after{
	content: "";
	width: 120%;
	height: 1px;
	background: #cacaca;
	transform: rotate(32deg);
	display: block;
	bottom: 20%;
	position: absolute;
	left: -10%;
	z-index: -8;
}
#section01 .bg-line{
	position: absolute;
}
#section01 .bg-line.bgl01{
	top: 1%;
	z-index: -2;
}
#section01 .ttl01{
	padding-left: 3%;
	font-weight: 800;
}
#section01 .column03{
position: relative;
padding: 8em 0 0;
}

#section01 .column03 .box:first-child{
	width: 36%;
	margin-top: 10%;
}
#section01 .column03 .box:nth-child(2){
	width: 36%;
  margin-left: 2%;
}
#section01 .column03 .box:last-child{
	width: 25%;
  margin-top: -5%;
}
#section01 .column03 .box:nth-child(2) p{
	line-height: 2.5em;
}
#section01 .contents-in::after{
	content: "";
	background: url(/assets/img/index/img03.png) 0 100% no-repeat;
	background-size: cover;
	width: 50em;
	height: 35em;
	position: absolute;
	bottom: -28%;
	right: 5%;
	z-index: -3;
}
#section01 .bg-line.bgl02{
	bottom: -20%;
	z-index: -2;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
	#section01 { padding: 6em 0;}
	#section01 .column03 .box:nth-child(2) p {
    font-size: 0.9em;
}
#section01 .contents-in::after {
    width: 40em;
    height: 27em;
}
}
@media screen and (max-width: 520px) {
	#section01 {padding: 5em 0;}
	#section01 .bg-line.bgl01 {top: 0.5%;}
	#section01 .ttl01 {
    padding-left: 4%;
		font-size: 0.9em;
		font-weight: 600;
    letter-spacing: 0em;
}
#section01 .column03 {padding: 4em 0 0;}
#section01 .column03 .box:first-child {
    width: 50%;
    margin-top: 25%;
}
#section01 .column03 .box:nth-child(2) {
    width: 92%;
    margin-left: 5%;
    order: -1;
}
#section01 .column03 .box:nth-child(2) p {
    line-height: 2em;
    font-size: 0.8em;
}
#section01 .column03 .box:last-child {
    width: 40%;
    margin-top: 10%;
    margin-left: 5%;
}
#section01 .contents-in::after {
    width: 21em;
    height: 15em;
    position: absolute;
    bottom: -18%;
    right: 2%;
    z-index: -3;
}
#section01 .bg-line.bgl02 {
    bottom: -8%;
    z-index: -2;
}
}

/* section02
------------------------------------------------------------ */
#section02{
	position: relative;
	padding: 12em 0;
}
#section02::after{
	content: "";
	width: 120%;
	height: 1px;
	background: #ebebeb;
	transform: rotate(-32deg);
	display: block;
	top: 55%;
	position: absolute;
	left: -10%;
	z-index: -2;
}
#section02 .img{
	width: 80%;
	margin: auto;
}
#section02 .txt{
margin: 1em auto;
width: 80%;
line-height: 2em;
}
#section02 .s-area{
	margin: 6em auto;
	width: 93%;
	justify-content: space-between;
}
#section02 .column03 .box{
	width: 30%;
	margin-right: 3.5%;
}
#section02 .column03 .box:last-child{
	margin-right: 0;
}
#section02 .column03 .box p{
	margin-top: 2em;
	letter-spacing: 0.1em;
}
#section02 .column03 .box:first-child{}
#section02 .column03 .box:nth-child(2){
	    margin-top: 15em;
}
#section02 .column03 .box:last-child{
	    margin-top: 30em;
}
#section02 .s-img{
	display: flex;
	justify-content: space-between;
}
#section02 .s-img .left-img{
	width: 60%;
  margin-top: -12%;
	margin-left: -2%;
}
#section02 .s-img .right-img{
	width: 25%;
	margin-right: 5%;
	margin-top: 5%;
}
#section02 .bg-line{
	position: absolute;
	bottom: 4%;
	z-index: -2;
}
@media screen and (min-width:521px) and ( max-width:1024px) {
	#section02 .img { width: 85%;}
	#section02 .txt {
		width: 85%;
		font-size: 0.9em;
	}
	#section02 .column03 .box p {font-size: 0.9em;}
	#section02 .column03 .box:nth-child(2) {margin-top: 10em;}
	#section02 .column03 .box:last-child { margin-top: 20em;}
	#section02 .s-img .right-img {width: 28%;}

}
@media screen and (max-width: 520px) {
	#section02 {padding: 10em 0;}
	#section02 .img {width: 85%;}
	#section02 .txt {
    width: 85%;
    font-size: 0.8em;
}
#section02 .s-area {
    margin: 4em 0 4em 2em;
    width: 90%;
    justify-content: space-between;
}
#section02 .column03 .box {
    width: 92%;
    margin-right: 0;
}
#section02 .column03 .box p {
    margin-top: 1em;
    letter-spacing: 0.1em;
    font-size: 0.8em;
}
#section02 .column03 .box:nth-child(2) {margin-top: 2em;}
#section02 .column03 .box:last-child {margin-top: 2em;}
#section02 .s-img {
    display: block;
}
#section02 .s-img .left-img {
    width: 90%;
    margin-top: -10%;
    margin-left: -2%;
}
#section02 .s-img .right-img {
    width: 50%;
    margin-right: 0px;
    margin-top: 5%;
    text-align: right;
    position: absolute;
    right: 0;
}
#section02 .bg-line {
    position: absolute;
    bottom: 3%;
    z-index: -2;
}
}

/* section03
------------------------------------------------------------ */
#section03 .contents{
width: 80%;
margin: 0 0 0 0;
}
#section03 .n-list{margin: 2em 0 8em 8em;}
#section03 .contents ul{
}
#section03 .contents li{
	border-bottom: 1px solid #a9a9a9;
	padding: 1em;
	margin-bottom: 1em;
}
#section03 .contents .txtbtn{  text-align: right;}
#section03 .n-list .time{ margin-right: 1em;}
@media screen and (min-width:521px) and ( max-width:1024px) {
	#section03 .contents {
    width: 92%;
    margin: 0 0 0 0;
}
	#section03 .n-list { margin: 2em 0 4em 5em;}

}
@media screen and (max-width: 520px) {
	#section03{    padding-top: 10em;}
	#section03 .contents {
    width: 90%;
    margin: 0 0 0 0;
}
#section03 .n-list {margin: 2em 0 8em 1.5em;}
#section03 .n-list a{font-size: 0.7em;}
#section03 .n-list .time{display: block;}

}