/* CSS Document */

@import url("https://use.typekit.net/unr3rhd.css");

#top_contents{
    text-align: center;
    margin-bottom: 5em;
    font-size: clamp(0.9rem, 0.8rem + 1.5vw, 2.0rem);
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

#top_contents h2,#top_contents h3 {
	font-family: "Noto Sans JP", YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	font-weight: normal;
}

#top_contents .w800 {
	max-width: 800px;
	margin: 0 auto;
}

#top_contents .w90 {
	width: 90%;
	margin: 0 auto;
}

#top_contents .ttl {
    color: #606578;
    /*font-size: clamp(0.3rem, 0.5rem + 1.85vw, 1.3rem);*/
	font-size: 90%;
    margin-bottom: 3.5em;
}

#top_contents .ttl span {
    font-family: futura-pt, sans-serif;
    font-weight: 300;
    font-style: normal;
    display: block;
    font-size: 250%;
    letter-spacing: 0.1em;
    margin-bottom: 0.2em;
}


#top_contents a{
    color: inherit;
	text-decoration: none;
}

#top_contents .comm_mt{
    margin-top: 5em;
}
#top_contents img{
    max-width: 100%;
	vertical-align: bottom;
}

#h_of_bnr{
    display: none !important;
}



#top_contents #hero{
    width: 94%;
    margin: 0 auto 3em;
}

#top_contents #intro img{
    margin: 2em auto;
}

#top_contents #intro p{
    margin-bottom: 1.5em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}


#top_contents #video{
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 35px;
}

#top_contents #video iframe{
    width: 100%;
    height: 100%;
}



#top_contents #series #slide{
    margin-top: 3em;
}


#top_contents #series .text p{
    margin-bottom: 1em;
    word-break: keep-all;
    overflow-wrap: anywhere;
}


#top_contents #series ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#top_contents #series ul::before{
    content: "";
    width: 23%;
    display: block;
    order: 1;
}

#top_contents #series ul::after{
    content: "";
    width: 23%;
    display: block;
}


#top_contents #series ul li{
    width: 23%;
    margin-bottom: 3em;
    font-size: 70%;
}

#top_contents #series ul li p{
    margin-top: 0.3em;
}

#top_contents #series ul li p span{
    font-size: 11px;
    display: block;
}



#top_contents #shindan h2{
    font-size: 150%;
}

#top_contents #shindan h3{
	font-size: 180%;
    display: inline-block;
    padding: 0.2em 4%;
    font-weight: normal;
    border-top: 1px solid;
    border-bottom: 1px solid;
    margin-top: 0.2em;
}

#top_contents #shindan .inner{
    background: #f0f0f0;
    padding: 0.5em 0 1.5em;
    margin-bottom: 2.5em;
}

#top_contents #shindan .inner .btn{
    background: #5d687a;
    width: 75%;
    max-width: 600px;
    margin: auto;
    border-radius: 50px;
    box-shadow: 3px 3px 5px #ccc;
}

#top_contents #shindan .inner .btn a{
    color: #fff;
    padding: 0.8em 0;
    display: block;
}

#top_contents #shindan .inner .att{
    width: 92%;
    margin: 2em auto 0;
    font-size: clamp(0.563rem, 0.45rem + 0.38vw, 0.75rem);
}

#top_contents #shindan .chart{
    margin-bottom: 3em;
}

#top_contents #shindan .chart h2{
    border-bottom: 1px solid;
    padding-bottom: 0.5em;
    margin: 2em auto 1em;
    max-width: 760px;
	line-height: 2.0;
}

#top_contents #shindan .chart h2 span{
    display: block;
    font-size: 70%;
}









#top_contents #tech .comm_flex{
    margin-top: 2em;
    align-items: flex-start;
}

#top_contents #tech .comm_flex dl{
    width: 57%;
    max-width: 460px;
}

#top_contents #tech .comm_flex dt{
    font-size: clamp(0.79rem, 0.275rem + 2vw, 1.875rem);
    margin-top: 0.5em;
    color: #606578;
}

#top_contents #tech .comm_flex dt span{
    font-size: 65%;
    background: #eff0f2;
    padding: 5px 0;
    display: block;
    width: 90%;
    max-width: 410px;
    margin: auto;
    position: relative;
    color: #606578;
}

#top_contents #tech .comm_flex dt span::before,
#top_contents #tech .comm_flex dt span::after{
    content: "";
    position: absolute;
    box-sizing: border-box;
    right: -9px;
    top: 0;
    background: #eff0f2;
    height: calc(tan(64deg) * 100% / 2);
    width: 10px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#top_contents #tech .comm_flex dt span::before{
    left: -9px;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

#top_contents #tech .comm_flex dd{
    text-align: left;
    margin-top: 1.5em;
    line-height: 1.8;
    /*font-size: clamp(0.75rem, 0.3rem + 1.5vw, 1.5rem);*/
}


#top_contents #tech .comm_flex img{
    width: 38%;
}









#top_contents #category,
#top_contents #trouble{
}


#top_contents ul.cate_list{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 3.5em;
}

#top_contents ul.cate_list::before{
    content: "";
    width: 24%;
    display: block;
    order: 1;
}

#top_contents ul.cate_list::after{
    content: "";
    width: 24%;
    display: block;
}


#top_contents ul.cate_list li{
    width: 24%;
    margin-bottom: 1em;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

#top_contents ul.cate_list li a{
    display: flex;
    align-items: center;
    padding: 1% 2% 1% 1%;
}


#top_contents ul.cate_list li img{
    width: 25%;
    margin-right: 5%;
}

#top_contents ul.cate_list li p{
    width: 69%;
    text-align: left;
    /*font-size: clamp(0.75rem, 0.637rem + 0.38vw, 0.938rem);*/
	font-size: 70%;
}

#top_contents ul.cate_list li p span{
    font-size: 85%;
    display: block;
}

#top_contents .nintei,
#series_cate .nintei{
    margin: 2em auto 0;
}


/*ラインページ*/
#series_cate {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
    font-size: clamp(1.6rem, 1.2rem + 1.33vw, 2.2rem);
    margin-bottom: 3.0em;
}

#series_cate img {
    max-width: 100%
}

#series_cate .w90 {
    width: 90%;
    margin: 0 auto;
    max-width: 1000px;
}

#series_cate .logo_cate {
    margin: 1.5em auto 0;
}

#series_cate .logo_cate img {
    width: 80%;
    max-width: 630px;
    margin: 0 auto;
}

#series_cate .logo_cate p {
    letter-spacing: 0.1em;
    line-height: 2.5;
    margin: auto;
    font-size: clamp(1.4rem, 1rem + 1.33vw, 2rem);
}

#series_cate dl {
max-width: 800px;
margin: 0 auto;
}

#series_cate dt {
    margin: 2.5em auto;
}

#series_cate dd {
    text-align: left;
    line-height: 1.8;
    margin: auto;
}




.sub_nintei{
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 2% 1%;
    max-width: 800px;
    text-align: left;
    margin-top: 1em;
}
.sub_nintei #pclogo{
    width: 25%;
    max-width: 252px;
}
.sub_nintei .text{
    width: 70%;
    font-size: clamp(1.2rem, 1.127rem + 0.36vw, 1.4rem);
}

.sub_nintei .text img{
    display: none;
}

.sub_nintei .text h2{
    font-size: clamp(0.9rem, 0.433rem + 1.56vw, 1.6rem);
    margin-bottom: 0.07em;
    font-weight: normal;
}






@media only screen and (max-width: 640px) {  
    #top_contents .comm_mt {
        margin-top: 3em;
    }

    #top_contents #video.w90{
        width: 100%;
    }

    #top_contents #series ul li {
        width: 48%;
        font-size: clamp(0.75rem, 0.268rem + 2.14vw, 1.125rem);
    }

    .sliderArea {
        margin-top: 2em;
    }
    #top_contents #tech .comm_flex dd {
        margin-top: 0.6em;
        line-height: 1.6;
    }

    #top_contents ul.cate_list li{
        width: 48%;
    }

    #top_contents ul.cate_list li p{
        width: 68%;
        text-align: left;
        font-size: clamp(0.688rem, 0.286rem + 1.79vw, 1rem);
    }
}


@media only screen and (max-width: 480px) {  
.sub_nintei{
    display: block;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 0 0 2em;
    text-align: left;
    margin: 1em auto;
}

.sub_nintei #pclogo{
    display: none;
}
.sub_nintei .text{
    width: 100%;
}

.sub_nintei .text img{
    display: block;
    width: 90%;
    margin: 2em auto 1em;
}

.sub_nintei .text h2{
    background: #333;
    color: #fff;
    font-size: clamp(1.6rem, 0.937rem + 1.32vw, 2.4rem);
    padding: 20px 0;
    text-align: center;
}

.sub_nintei .text p{
    width: 90%;
    margin: auto;
}





}












.slick-slide {
		height: auto;
	}
	
	.slick-prev:before, .slick-next:before {
    content: "";
    background: url("https://www.forcise.jp/img/item/sublimic/arrow.png") no-repeat;
    bottom: -18px;
    left: 0;
    display: block;
    width: 100%;
    background-size: cover;
    aspect-ratio:1/1;
    position: absolute;
}


#item_img .p_ninsyo {
		border: 1px solid #EEEEEE;		
		max-width: 800px;
		margin: 0 auto;
	}
	
	#item_img .p_ninsyo .w90 {
		width: 90%;
		margin: 2.0em auto;
	}
	
	#item_img .p_ninsyo p {
		font-size: clamp(0.9rem, 0.8rem + 1.5vw, 2.0rem);
		line-height: 2.0;
		margin-top: 1.0em;
	}