@charset "utf-8";
/*------------------------------------------------------------
	index
------------------------------------------------------------*/
h1 {
	color: #fff;
	font-family: 'Barlow', sans-serif;
}

#gHeader img {
	width: 240px;
}

.mainVisual {
	height: 400px;
	padding-top: 50px;
	font-weight: 700;
	color: #FFF;
	box-sizing: border-box;
	text-align: center;
	background: url(../img/index/main_visual_bg.jpg) no-repeat center center;
	background-size: cover;
	background-color: #132651;
}
.mainVisual .title01 {
	width: 350px;
	margin: 0 auto;
}
.mainVisual .title02 {
	margin-bottom: 30px;
	color: #00eb7e;
	font-size: 2.2rem;
	margin-top: 20px;
}
.mainVisual .title02 span {
	font-size: 3.6rem;
}

.mainVisual .title02 .en {
	margin-bottom: -4px;
	display: block;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.03em;
	font-family: 'Barlow', sans-serif;
}
.mainVisual .title03 {
	margin-bottom: 40px;
	font-size: 1.5rem;
	margin-top: 20px;
	font-weight: normal;
}

.mainVisual .link a {
	margin: 0 auto;
	width: 200px;
	padding: 12px 0 12px;
	display: block;
	text-align: center;
	border-radius: 25px;
	background-color: #fff;
}
.mainVisual .link a:hover {
	opacity: 0.7;
}
#main .topBox {
	padding: 58px 0 61px;
	text-align: center;
	background-color: #424242;
}
#main .topBox p {
	color: #FFF;
	font-size: 2.3rem;
	font-weight: 700;
	line-height: 1.98;
}

.date-index {
	text-align: center;
	margin: 0 0 50px;
	font-size: 2rem;
	border-bottom: 1px solid #bbb;
	border-top: 1px solid #bbb;
	padding: 10px 0;
}


.tools {
    margin-bottom: 20px;
    background-color: #efefef;
    padding: 50px 0 90px;
}
.tools .headLine02 {
    margin-bottom: 45px;
    font-size: 1.4em;
    color: #132651;
    padding: 0 20px;
}
.tools p.headLine02 {
    margin-bottom: 20px;
    font-size: 2em;
    font-weight: bold;
    color: #132651;
}
.tools ul {
    margin: -27px -15px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.tools ul.left {
    justify-content: flex-start;
}
.tools ul li {
    margin: 42px 15px 0;
    width: 280px;
}
.tools ul li a {
    display: block;
}
.tools ul li a:hover {
    opacity: 0.7;
}
.tools ul .img {
    margin-bottom: 20px;
}
.tools .photo {
    margin-bottom: 8px;
}
.tools .photo img {
    object-fit: cover;
    height: 120px;
    width: 282px;
}
.tools .photo.other img {
    object-fit: cover;
    height: 110px;
    width: 292px;
}
.tools .vol {
    margin-bottom: 1px;
    color: #999;
    font-size: 2rem;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;
    letter-spacing: 0.02em;
}

.tools .vol::before {
    content: 'Vol.';
    font-size: 1.4rem;
    font-weight: bold;
}
.tools .vol span {
    font-size: 1.5rem;
    font-family: inherit;
}
.tools h3 {
    margin-bottom: 6px;
    font-size: 1.7rem;
    line-height: 1.3;
}
.tools p {
    margin-bottom: 6px;
    font-size: 1.3rem;
}
.tools p.gojitsu {
    margin: 10px 0;
}
.tools p.gojitsu span {
    font-size: 1.1rem;
    border: 1px solid #bbb;
    padding: 3px 5px;
    border-radius: 4px;
    
}
.tools .comLink {
    margin-bottom: 0;
    color: #132651;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: underline;
    position: relative;
    display: inline-block;
}
.tools .comLink::after {
    position: absolute;
    top: 2px;
    right: -20px;
    width: 20px;
    height: 20px;
    content: '';
    background: url("../img/index/arrow02.png") no-repeat top right / 18px;
}
.tools .noicon.comLink::after {
    background: none;
}

.tools .leadUnit {
	margin-bottom: 40px;
}

.tools .leadUnit p {
	font-size: 1em;
	line-height: 1.6;
}

.tools .link a {
	margin: 0 auto 50px;
	padding: 12px 0 12px;
	display: block;
	text-align: center;
	border-radius: 25px;
	background-color: #132651;
	color: #fff;
	width: 400px;
	font-size: 2rem;
}
.tools .link a:hover {
	opacity: 0.7;
}


@media all and (max-width: 896px) {
	.mainVisual {
		height: 400px;
		padding-top: 80px;
		background-image: url(../img/index/sp_main_visual_bg.jpg) ;
	}
	#gHeader img {
		width: 120px;
	}
	.mainVisual .title01 {
		width: 250px;
	}
	.mainVisual .title02 {
		margin-bottom: 32px;
		font-size: 1.3rem;
	}
	.mainVisual .title03 {
		font-size: 1.3rem;
		width: 85%;
		margin: 0 auto 32px;
		text-align: left;
	}
	.mainVisual .title02 span {
		font-size: 2.5rem;
	}
	.mainVisual .title02 .en {
		margin-bottom: -1px;
	}
	.mainVisual .link a {
		width: 135px;
		padding: 7px 0;
	}
	#main .topBox {
		padding: 27px 0 28px;
	}
	#main .topBox p {
		font-size: 1.6rem;
		line-height: 1.93;
		text-align: left;
	}
	.date-index {
		margin: 0 auto 50px;
		font-size: 1.4rem;
		padding: 10px 0;
		width: calc(100% - 20px);
	}
    .tools ul {
        display: block;
        margin: 0 auto;
        padding: 0 20px;
    }
    .tools ul li {
        margin: 39px 0 0;
        width: auto;
    }
    .tools .photo {
        margin-bottom: 9px;
    }
	.tools .photo img {
	    height: 40vw;
	    width: 100%
	}
	.tools .photo.other img {
	    height: 34vw;
	    width: 100%;
	}
    .tools .vol {
        margin-bottom: 2px;
        font-size: 1.8rem;
    }
	.tools .vol::before {
	    font-size: 1.2rem;
	}
    .tools h3 {
        margin-bottom: 6px;
        font-size: 1.8rem;
    }
    .tools p {
        margin-bottom: 13px;
        font-size: 1.4rem;
    }
	.tools p.gojitsu {
	    margin: -4px 0 18px;
	} 
    .tools .comLink {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
	.tools .comLink::after {
	    top: 2px;
	}
    .tools {
        margin-bottom: 78px;
    }
	.tools .leadUnit {
		padding: 0 20px;
	}
	.tools .leadUnit p {
		font-size: 1.3em;
	}
	.tools .link a {
		width: 90%;
		font-size: 2rem;
	}

}

@media all and (max-width: 320px) {
	#main .features .imgBox .txtBox h3 {
		font-size: 1.8rem;
	}
}