@charset "utf-8";
/* CSS Document */

/**========================================**/
/* 共通 */
#area04 section {
	margin: 0 0 50px; padding: 50px 10%;
	background: #fff;
}

#area04 video {width: 100vw; max-width: 1200px; height: auto; margin: 30px -12.5% 10px;}
#area04 img {display: block; width: 100%; height: auto;}

#area04 h1 {margin: 0 0 30px; font-size: 40px; line-height: 1.8em; text-align: center;}

#area04 h2 {
	padding: 0 0 20px;
    border-bottom: solid 1px #000;
    text-align: center; font-size: 1.3em;}

#area04 strong {display: block; padding: 20px 0; font-size: 1.1em; font-weight: 600;}
#area04 strong span {color: #333; font-size: 0.8em; font-weight: 300;}

#area04 .flex {display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start;}
#area04 .flex > img,
#area04 .flex > div {box-sizing: border-box;}

#area04 .bg {width: 100%; margin: 0 30px 0 0;}

@media screen and (max-width:699px){
	#area04 section {margin: 0 0 30px; padding: 30px 5%;}
	
	#area04 video {margin: 30px -5.5% 10px;}
	
	#area04 h1 {font-size: 26px;}
	#area04 strong {padding: 10px 0;}
	
	#area04 .flex {flex-direction: column;}
	#area04 .bg {margin: 0;}
}


/**========================================**/
/* 01 */
#tech01 > .flex {align-items:stretch;}

#tech01 .bg {
	background: url(../../img/aboutus-img1.jpg);
	background-size: cover; background-position: center; background-repeat: no-repeat;}

#tech01 .p_30 .flex {align-items: center; margin: 30px 0;}
#tech01 .p_30 .flex img {width: 30%;}

@media screen and (max-width:699px){
	#tech01 .bg {margin: 0 0 30px; padding: 50px;}
	#tech01 .p_30 {padding: 0;}
	#tech01 .p_30 .flex img {width: 50%; margin: 0 0 30px;}
}


/**========================================**/
/* 02 */
#tech02 .flex div {width: 45%;}

@media screen and (max-width:699px){
	#tech02 .flex div {width: 100%; margin: 0 0 50px;}
	#tech02 .flex div:last-of-type {margin: 0;}
}


/**========================================**/
/* 03 */
#tech03 > p {margin: 0 0 50px; text-align: center;}
#tech03 .flex div {width: 30%;}

@media screen and (max-width:699px){
	#tech03 > p {text-align: left;}
	#tech03 .flex div {width: 100%; margin: 0 0 50px;}
	#tech03 .flex div:last-of-type {margin: 0;}
}


/**========================================**/
/* 04 */
#tech04 .flex {align-items: stretch; margin: 0 0 50px;}
#tech04 .flex:last-of-type {margin: 0;}
#tech04 .bg {background: #333;}

#tech04 .flex:nth-of-type(1) .bg {
	background-image: url(../img/img03-1.webp);
	background-size: contain; background-position: center; background-repeat: no-repeat;}
#tech04 .flex:nth-of-type(2) .bg {
	background-image: url(../img/img03-2.webp);
	background-size: contain; background-position: center; background-repeat: no-repeat;}
#tech04 .flex:nth-of-type(3) .bg {
	background-image: url(../img/img03-3.webp);
	background-size: contain; background-position: center; background-repeat: no-repeat;}

#tech04 .flex div:last-of-type {width: 200%;}

#tech04 .flex ul {
	display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; 
	list-style: decimal;}
#tech04 .flex li {
    box-sizing: border-box;
    width: 45%; margin: 0 0 20px 1em; padding: 0 0 0 0.5em;
    font-size: 0.9em;}

@media screen and (max-width:699px){
	#tech04 .bg {padding: 100px;}
	#tech04 .flex div:last-of-type {width: 100%;}

	#tech04 .flex li {width: 100%; margin: 0 0 15px 1em;}
}


/* LastUp2026.01.30_kimata */