@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　overseas
 * 
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/




/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* page-nav-area
-----------------------------------------------------------------*/
.page-nav-area{
	padding: 160px 0 80px;
}
.page-nav{
	justify-content: space-between;
	max-width: 765px;
  width: 100%;
	margin-inline: auto;
}
.page-nav li{
	max-width: 235px;
	width: calc((100% - 20px)/3);
}


/* sec
-----------------------------------------------------------------*/
.sec{
	padding: 160px 0;
}
.sec .flag{
	margin-bottom: 30px;
	text-align: center;
}
.sec h2{
	margin-bottom: 80px;
	text-align: center;
	line-height: 1;
}
.sec h2 span{
	font-size:min(3.39vw,5.2rem);
}
.sec h2 small{
	position: relative;
	display: block;
	margin-top: 20px;
	padding-top: 20px;
	font-size:min(0.91vw,1.4rem);
}
.sec h2 small::before{
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	display: block;
	width: 30px;
	height: 1px;
	content: "";
	background: #ccc;	
}
.sec .pic-map{
	width: 41.21%;
}
.sec .txt-area{
	width: 58.79%;
	padding: 0 5vw 0 calc((100vw - 1300px)/2);
}
.sec .txt-area-inner{
	  max-width: 632px;
    margin-right: auto;
}
.sec .txt-area h3{
	margin-bottom: 40px;
	font-size:min(2.28vw,3.5rem);
	line-height: 1.6;	
}
.sec .txt-area-inner > .txt{
	margin-bottom: 70px;
	font-size:min(1.04vw,1.6rem);
}
.sec .txt-area .btn-view-more{
	max-width: 305px;
	width: 100%;
	margin: 80px 0 0 auto;
	padding-bottom: 8px;
	border-bottom: 1px solid #ccc;
}
.sec .txt-area .btn-view-more a{
	justify-content: space-between;
}

/* vietnam */
.vietnam{
	background: var(--beige);
}
.vietnam .layout-box{
	flex-direction: row-reverse;
}

/* taiwan */
.taiwan .txt-area{
	padding: 0 calc((100vw - 1300px)/2) 0 5vw;
}
.taiwan .txt-area-inner{
	  max-width: 632px;
    margin: 0 0 0 auto;
}

/* usa */
.usa{
	background: var(--beige);
}
.usa .txt-area-inner > .txt{
	margin-bottom: 10px;
}
.usa .txt-area .note{
	margin-bottom: 70px;
}


@media screen and (max-width: 1300px) {
	
	.sec .txt-area{
		padding-left: 20px;
	}
	.taiwan .txt-area{
		padding-right: 20px;
	}
	
}




















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/* page-nav-area
-----------------------------------------------------------------*/
  .page-nav-area{
    padding: 20px 0 80px;
  }
  .page-nav{
    flex-wrap: wrap;
  }
  .page-nav li{
    max-width: none;
    width: calc(50% - 10px);
  }
  .page-nav li:nth-child(n+3){
    margin-top: 20px; 
  }


/* sec
-----------------------------------------------------------------*/
	.sec{
		padding: 110px 0;
	}
	.sec .flag{
		width: 68px;
		margin: 0 auto 20px;
	}
	.sec h2{
		margin-bottom: 30px;
	}
	.sec h2 span{
		font-size: 2.7rem;
	}
	.sec h2 small{
		padding-top: 15px;
		margin-top: 15px;
		font-size: 1.2rem;
	}
	.sec h2 small::before{
		width: 20px;
	}
	.sec .layout-box{
		display: block;
	}
	.sec .pic-map{
		width: 100%;
		margin-bottom: 40px;
	}
	.sec .txt-area{
		width: 100%;
		padding: 0 20px;
	}
	.sec .txt-area-inner{
		max-width: none;
		margin: 0;
	}
	.sec .txt-area h3{
		margin-bottom: 30px;
		font-size: 2.4rem;	
	}
	.sec .txt-area-inner > .txt{
		margin-bottom: 50px;
		font-size: 1.4rem;
		text-align: justify;
	}
	.sec .txt-area .btn-view-more{
		max-width: none;
		width: 100%;
		margin: 50px 0 0;
		padding-bottom: 15px;
	}
	.sec .txt-area .btn-view-more a{
		font-size: 1.4rem;
	}


/* vietnam */
	.vietnam .pic-map{
		padding-left: 2vw;
	}

/* taiwan */
	.taiwan .pic-map{
		padding-right: 5vw;
	}
	.taiwan .txt-area{
		padding: 0 20px;
	}
	.taiwan .txt-area-inner{
		max-width: none;
		margin: 0;
	}

/* usa */
	.usa .pic-map{
		padding-right: 5vw;
	}
	.usa .txt-area-inner > .txt{
		margin-bottom: 5px;
	}
	.usa .txt-area .note{
		margin-bottom: 50px;
	}

}