@charset "UTF-8";

/*--------------------------------------------
CONPANY PROFILE
---------------------------------------------*/
a:hover {
    opacity: .8;
}

#companyprofile{
	position : relative;
	overflow : hidden;
}

#companyprofile:before{
	position : absolute;
	top : 0;
	left : 0;
	content : "";
	width : 100%;
	background-repeat : no-repeat;
	background-size : cover;
	background-position : center;
	z-index : -1;
}

#companyprofile .box{
	background-color : #fff;
}

#companyprofile ul{
	display : grid;
	grid-auto-flow : column;
}

#companyprofile a{
	width : 100%;
	height : 100%;
	border-style : solid;
	border-color : #ccc;
	display : block;
	text-align : center;
	letter-spacing : .1em;
	text-indent : .1em;
}

#companyprofile a:after{
	content : "";
	display : block;
	margin-left : auto;
	margin-right : auto;
	font-size : 0;
	width : auto;
}

#companyprofile li:nth-child(1) a:after{
	background-color : var(--green);
}

#companyprofile li:nth-child(2) a:after{
	background-color : var(--blue);
}

#companyprofile li:nth-child(3) a:after{
	background-color : #dbd7d5;
}

@media screen and (max-width: 750px){
	#companyprofile{
		padding-top : calc( 252 * 100vw / 750 );
		padding-bottom : calc( 83 * 100vw / 750 );
		padding-left : calc( 20 * 100% / 750 );
		padding-right : calc( 20 * 100% / 750 );
	}
	#companyprofile:before{
		background-image : url("../images/home/companyprofile/bg_sp.webp");
		height : calc( 465 * 100vw / 750 );
	}
	#companyprofile .box{
		width : 100%;
		padding-top : calc( 37 * 100vw / 750 );
		padding-bottom : calc( 25 * 100vw / 750 );
		padding-left : calc( 40 * 100% / 710 );
		padding-right : calc( 40 * 100% / 710 );
	}
	#companyprofile .title01:before{
		width : calc( 130 * 100% / 630 );
	}
	#companyprofile .text01{
		margin-top : calc( ( 25 - var(--text01gap) ) * 100vw / 750 );
	}
	#companyprofile ul{
		margin-top : calc( ( 33 - var(--text01gap) ) * 100vw / 750 );
		grid-template-columns : repeat( 3 , calc( 202 * 100% / 630 ) );
		grid-template-rows : calc( 140 * 100vw / 750 );
		column-gap : calc( 12 * 100% / 630 );
	}
	#companyprofile a{
		border-width : calc( 6 * 100vw / 750 );
	}
	#companyprofile a{
		font-size : 2.6rem;
		line-height : 1.2;
	}
	#companyprofile a{
        padding: 0 5px;
        display: flex;
        align-items: center;
        justify-content: center;
	}
	#companyprofile a:after{
		display: none;
	}
}

@media print,screen and (min-width: 751px){
	#companyprofile{
		padding-top : 107px;
	}
	#companyprofile:before{
		background-image : url("../images/home/companyprofile/bg_pc.webp");
		height : 550px;
	}
	#companyprofile .box{
		width : 700px;
		margin-left : auto;
		padding-top : 65px;
		padding-bottom : 80px;
		padding-left : 50px;
		padding-right : 50px;
	}
	#companyprofile .text01{
		margin-top : calc( 20px - var(--text01gap) );
	}
	#companyprofile ul{
		margin-top : calc( 28px - var(--text01gap) );
		grid-template-columns : repeat( 2 , 200px ) 180px;
		grid-template-rows : 80px;
		column-gap : 10px;
	}
	#companyprofile a{
		border-width : 3px;
		font-size : 1.6rem;
		padding-top : 22px;
	}
	#companyprofile a:after{
		margin-top : 15px;
		height : 4px;
		margin-left : 50px;
		margin-right : 50px;
	}
	#companyprofile li.logo a{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 0px !important;
	}
        #companyprofile li.logo a img{
            height: 37px;
            width: auto;
        }
	#companyprofile li.logo a:after{
        content: none;
	}
}

/*--------------------------------------------
SECTIONS
---------------------------------------------*/

@media screen and (max-width: 750px){
	.sections{
		padding-bottom : calc( 80 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	.sections{
		padding-top : 71px;
		padding-bottom : 56px;
		display : grid;
		align-items : start;
		grid-template-rows : auto;
		grid-template-columns : 10px 480px 30px 680px;
	}
}

/*--------------------------------------------
KNOWLEDGE
---------------------------------------------*/

#knowledge{
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	color : #fff;
}

#knowledge a{
	color : #fff;
}

#knowledge h2{
	border-bottom-style : solid;
	border-bottom-color : currentColor;
	letter-spacing : .2em;
}

#knowledge li{
	counter-increment : no;
}

#knowledge li a{
	display : grid;
	grid-auto-flow : column;
	align-items : start;
	justify-content : start;
	background-color : rgba(0,0,0,.6);
	position : relative;
	letter-spacing : .1em;
}

#knowledge li a:before{
	content : "0"counter(no);
	font-weight : 700;
	font-style : italic;
	position : absolute;
	top : 50%;
	translate : 0 -50%;
	letter-spacing : 0;
}

#knowledge li a:after{
	content : "";
	display : block;
	position : absolute;
	background-position : 0 0;
	background-repeat : no-repeat;
	background-size : contain;
	font-size : 0;
}

@media screen and (max-width: 750px){
	#knowledge{
		background-image : url("../images/home/knowledge/bg_sp.webp");
		padding-top : calc( 80 * 100vw / 750 );
		padding-bottom : calc( 72 * 100vw / 750 );
		padding-left : calc( 30 * 100% / 750 );
		padding-right : calc( 30 * 100% / 750 );
	}
	#knowledge h2{
		font-weight : 400;
		border-bottom-width : calc( 2 * 100vw / 750 );
		font-size : 4.4rem;
		padding-bottom : calc( 26 * 100vw / 750 );
	}
	#knowledge h2[data-after]:after{
		font-size : 2rem;
	}
	#knowledge ul{
		margin-top : calc( 28 * 100vw / 750 );
	}
	#knowledge li + li{
		margin-top : calc( 12 * 100vw / 750 );
	}
	#knowledge li a{
		font-size : 2.6rem;
		line-height : calc( 50 / 26 );
	}
	#knowledge li a{
		padding-left : calc( 79 * 100% / 690 );
		padding-top : calc( ( 28 - 12 ) * 100vw / 750 );
		padding-bottom : calc( ( 28 - 12 ) * 100vw / 750 );
	}
	#knowledge li a:before{
		left : calc( 15 * 100% / 690 );
		font-size : 4rem;
	}
	#knowledge li a:after{
		width : calc( 101 * 100% / 690 );
		height : calc( 20 * 100vw / 750 );
		bottom : calc( 9 * 100vw / 750 );
		right : calc( -5 * 100% / 690 );
		background-image : url("../images/ui/arrow/right03_sp.svg");
	}
}

@media print,screen and (min-width: 751px){
	#knowledge{
		background-image : url("../images/home/knowledge/bg_pc.webp");
		grid-row : 1;
		grid-column : 4;
		padding-top : 35px;
		padding-bottom : 20px;
		padding-left : 20px;
		padding-right : 20px;
	}
	#knowledge h2{
		border-bottom-width : 1px;
		font-weight : 300;
		font-size : 3.6rem;
		padding-bottom : 20px;
		margin-left : 5px;
		margin-right : 5px;
	}
	#knowledge h2[data-after]:after{
		font-family : "Noto Serif JP", serif;
		letter-spacing : .1em;
		font-size : 1.4rem;
	}
	#knowledge ul{
		margin-top : 20px;
        display: flex;
        flex-wrap: wrap;
        gap:10px;
	}
	#knowledge li {
        width: calc(50% - 10px);
	}
	#knowledge li:nth-child(1) {
        order: 1;
    }
	#knowledge li:nth-child(2) {
        order: 3;
    }
	#knowledge li:nth-child(3) {
        order: 5;
    }
	#knowledge li:nth-child(4) {
        order: 2;
    }
	#knowledge li:nth-child(5) {
        order: 4;
    }
	#knowledge li:nth-child(6) {
        order: 6;
    }
	#knowledge li a{
		font-size : 1.6rem;
		padding-left : 74px;
		padding-top : 20px;
		padding-bottom : 5px;
		min-height : 60px;
	}
	#knowledge li a:before{
		font-size : 4rem;
		left : 15px;
	}
	#knowledge li a:after{
		width : 99px;
		height : 19px;
		bottom : 10px;
		right : -10px;
		background-image : url("../images/ui/arrow/right03_pc.svg");
	}
}

/*--------------------------------------------
INFORMATION
---------------------------------------------*/

#information time , #information h3{
	letter-spacing : .1em;
}

#information h3{
	font-weight : 500;
	letter-spacing : .1em;
}

@media screen and (max-width: 750px){
	#information{
		margin-top : calc( 121 * 100vw / 750 );
	}
	#information li{
		border-bottom : calc( 2 * 100vw / 750 ) dotted #ccc;
	}
	#information li a{
		display : block;
		padding-top : calc( ( 39 - 7 ) * 100vw / 750 );
		padding-bottom : calc( ( 39 - 7 ) * 100vw / 750 );
	}
	#information time , #information h3{
		font-size : 2.6rem;
		line-height : calc( 40 / 26 );
	}
	#information h3{
		margin-top : calc( 10 * 100vw / 750 );
	}
    #information .excerpt {
		font-size : 2.2rem;
		line-height : 1.8   ;
        margin-top: 6px;
    }
	#information .link01{
		margin-top : calc( 75 * 100vw / 750 );
	}
}

@media print,screen and (min-width: 751px){
	#information{
		grid-row : 1;
		grid-column : 2;
		padding-top : 26px;
	}
	#information ul{
        margin-top: 10px;
	}
	#information li{
		border-bottom : 1px dotted #ccc;
	}
	#information li a{
		display : grid;
		align-items : start;
		justify-content : start;
		grid-template-columns : 140px 1fr;
		padding-top : 15px;
		padding-bottom : 15px;
	}
	#information h3{
		font-size : 1.6rem;
		line-height : 1.2;
        font-weight: 500;
        margin-bottom: 5px;
	}
	#information time{
		font-size : 1.6rem;
		line-height : 1.2;
	}
	#information time , #information h3{
		font-weight : 500;
	}
    #information .excerpt {
		font-size : 1.4rem;
		line-height : 1.8   ;
        margin-top: 6px;
    }
    #information .excerpt .more {
        text-decoration: underline;
    }
    #information a:hover .excerpt .more {
        text-decoration: none;
    }
	#information time{
		padding-left : 10px;
	}
	#information .link01{
		margin-top : 28px;
	}
}