@charset "utf-8";

/* ■■■メインイメージ■■■*/
#movieArea{
position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
min-height: 900px;
background-image : url(../images/bg01.png);
background-position : center center;
background-size: cover;
background-repeat: no-repeat;
}

#video-area{
position: absolute;
background-size: cover;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}

#video {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}

.main_text img,
.main_text1 img{
max-width: 685px;
}

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

#movieArea{
height: 436px;
min-height: 436px;
}

.main_text img,
.main_text1 img{
max-width: 320px;
}

}
/* max-width: 768px @end */

/* max-width: 426px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 426px){
.main_text1 img{
max-width: 284px;
}

}
/* max-width: 426px @end */


/* ■■■日本とベトナムを繋ぐ貿易・ビジネス支援■■■*/

.t_content01 {
background-color: #2F6FF8;
}

.t_content01 .ty01 {
font-size: 52px;
color: #FFF;
font-weight: bold;
letter-spacing: 0;
margin-top: -20px;
}

.t_content01 .ty02 {
font-size: 20px;
color: #FFF;
padding: 70px 0 130px 0;
line-height: 230%;
}

.t_content01 .ty03 {
width: 100%;
max-width: 520px;
margin: 0 auto;
font-weight: bold;
color: #000;
padding: 20px 0 20px 60px;
border-radius: 30px;
background-image : url(../common/images/icon02.png);
background-position : 20px center;
background-size: 32px 31px;
background-repeat: no-repeat;
background-color: #F5F5F5;
text-align: left;
}

.t_content01 .ty04 {
margin-top: 60px;
}

.t_content01 .ty05 {
margin-top: 30px;
}

.t_content01_1 {
background-image : url(../images/bg02_1.png);
background-position : center center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: space-between;
padding: 145px 0;
}

.t_content01_2 {
width: 40%;
background-color: #FFF;
border-radius: 0 20px 20px 0;
padding: 77px 50px 60px 50px;
}

.t_content01_2 img {
width: 320px;
height: auto;
}

.t_content01_3 {
width: 40%;
background-color: #FFF;
border-radius: 20px 0 0 20px;
padding: 30px 50px 60px 50px;
}

.t_content01_3 img {
width: 183px;
height: auto;
}

/* 流れる文字 */
.news-banner {
  display: block;
  position: relative;
  height: 180px;
  width: 100%;
  overflow: hidden;
  font-size: 200px;
  letter-spacing: 0;
  opacity: 0.1;
  font-family: 'Oswald', sans-serif;
}

/* 流れる文字内コンテンツ */
.news-banner__content {
  display: inline-block;
  color: #000;
  line-height: 220px;
  padding-left: 100%;
  white-space: nowrap;
  animation: animate-banner 20s linear infinite;

  position: absolute;
  top: -30px;   /* ←ここがミソ。上に30px押し上げる */
  left: 0;
}

/* 流れる文字内の要素をすべて選択 */
.news-banner__content > * {
display: inline-block;
}

/* 横にスクロールさせるアニメーション */
@keyframes animate-banner {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

/* max-width: 1068px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1068px){
.t_content01 .ty01 {
font-size: 34px;
margin-top: -20px;
}

.t_content01 .ty02 {
font-size: 20px;
padding: 70px 20px 90px 20px;
line-height: 230%;
text-align: left;
}

.t_content01 .ty03 {
font-size: 14px;
padding: 20px 20px 20px 60px;
}

.t_content01 .ty04 {
margin-top: 30px;
}

.t_content01 .ty05 {
display: none;
}

.t_content01_1 {
padding: 120px 0;
}

.t_content01_1 .bt01 {
width: 60%;
min-width: 260px;
}

.t_content01_2 {
padding: 50px 20px 60px 20px;
}

.t_content01_2 img {
width: 200px;
}

.t_content01_3 {
padding: 20px 20px 60px 20px;
}

.t_content01_3 img {
width: 123px;
}

}
/* max-width: 1068px @end */

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){
.t_content01_4 {
display: none;
}


}
/* min-width: 769px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
.t_content01 .ty01 {
font-size: 28px;
line-height: 38px;
margin-top: -20px;
}

.t_content01 .ty02 {
font-size: 14px;
padding: 45px 20px 80px 20px;
}

.news-banner {
  height: 95px;
  font-size: 120px;
}

.news-banner__content {
  line-height: 120px;
  top: -20px;   /* ←ここがミソ。上に30px押し上げる */
}

.t_content01 .ty03 {
padding: 20px 0 20px 50px;
background-position : 20px center;
background-size: 18px 17px;
}

.t_content01_1 {
background-image : url(../images/bg02_3.png),url(../images/bg02_4.png);
background-position : top center, bottom center;
background-size: 100% auto,100% auto;
background-repeat: no-repeat,no-repeat;
display: block;
padding: 120px 0;
}

.t_content01_2 {
width: 95%;
}

.t_content01_2 img {
width: 180px;
}

.t_content01_3 {
width: 95%;
margin-left: 5%;
}

.t_content01_3 img {
width: 103px;
}

.t_content01_4 {
padding: 25px 0;
}

.t_content01_4 img {
width: 80px;
height: auto;
}

}
/* max-width: 768px @end */

/* ■■■Business■■■*/

.t_content02{
background: 
    radial-gradient(
        at bottom left,
        rgba(255,255,255,0.8) 0%,
        rgba(255,255,255,0) 60%
    ),
    radial-gradient(
        at bottom right,
        rgba(233,192,255,0.8) 0%,
        rgba(233,192,255,0) 65%
    ),
    linear-gradient(
        to bottom,
        #2F6FF8 0%,      /* 上の鮮やかな青 */
        #8EC7FF 55%,     /* 中間の水色 */
        #E0D5FF 90%,     /* 下の淡い紫 */
        #F2E4FF 100%     /* 最下の白みがかった薄紫 */
    );
padding: 140px 0 0 0;
}

.t_content02 .ty01{
font-size: 140px;
line-height: 140px;
color: #FFF;
font-family: 'Oswald', sans-serif;
}

.t_content02 .ty02{
font-size: 32px;
color: #FFF;
padding-top: 30px;
}

.t_content02 .ty03 {
font-size: 20px;
color: #FFF;
padding: 70px 0;
line-height: 230%;
}

.t_content02 .ty04 {
margin-top: 60px;
}

.t_content02 ul {
display: flex;
justify-content: center;
}

.t_content02 ul img{
max-width: 370px;
width: 100%;
height: auto;
}

.t_content02 ul li {
width: calc(370px + 20px);
}

.t_content02 .news-banner__content {
  color: #494949 !important;
}

.t_content02 ul li a:hover {
/* box-shadow: 0px 4px 20px rgba(0,4,20,0.2); */
}



#slideArea .title01 {
position: absolute;
top: -70px;
left: 0;
z-index: 3;
}

#slideArea .title01 img {
max-width: 490px;
}

/* max-width: 1229x
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1229px){
.t_content02 .ty01{
font-size: 100px;
line-height: 100px;
}

.t_content02 .ty02{
font-size: 26px;
padding-top: 26px;
}

.t_content02 .ty03 {
padding: 50px 20px;
text-align: left;
}

.t_content02 .ty05 {
display: none;
}

.t_content02 ul {
padding: 0 20px;
gap: 20px; 
}


}
/* max-width: 1229px @end */

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){



}
/* min-width: 769px @end */

/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
 .t_content02{
padding: 80px 0 0 0;
}

.t_content02 .ty01{
font-size: 72px;
line-height: 72px;
}

.t_content02 .ty02{
font-size: 24px;
padding-top: 24px;
}

.t_content02 .ty03 {
padding: 40px 20px;
font-size: 14px;
}

.t_content02 ul {
display: block;
width: 100%;
max-width: 500px;
margin: 0 auto;
}

.t_content02 ul img{
max-width: 100%;
}

.t_content02 ul li {
width: 100%;
padding-bottom: 20px;
}

.t_content02 ul li:last-child {
padding-bottom: 0;
}

}
/* max-width: 768px @end */


/* ■■■当社の強み■■■*/
#movieArea1{
position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
min-height: 1080px;
background-color: rgba(1, 1, 1, 0.7);
}

#video-area1{
position: absolute;
background-size: cover;
z-index: -1;/*最背面に設定*/
top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}

#video1 {
/*天地中央配置*/
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*縦横幅指定*/
width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
min-height: 100%;
min-width: 100%;
}

.t_content03 {
display: flex;
justify-content: space-between;
padding: 160px 0 160px 160px;
}

.t_content03 .ty01 {
color: #EE1B24;
font-size: 40px;
line-height: 40px;
font-family: 'Oswald', sans-serif;
}

.t_content03 .ty02 {
font-size: 120px;
line-height: 140px;
font-weight: bold;
}

.t_content03 .ty03 {
margin-top: 80px;
font-size: 20px;
line-height: 230%;
}

.t_content03 .ty04 {
margin-top: 80px;
}

.t_content03_1 {
width: 26%;
color: #FFF;
text-align: left;
}

.t_content03_2 {
width: 57%;
}

.slider_contents {
display: flex;
padding-top: 25px;
}

.t_content03_2 .slider li a {
background-color: #FFF;
border-radius: 24px;
padding: 40px;
display: block;
text-align: left;
text-decoration: none;
width: 100%;
}

.t_content03_2 .slider li a .slidetitle01 {
color: #2F6FF8;
font-family: Oswald;
font-size: 120px;
font-weight: bold;
margin-top: -10%;
}

.t_content03_2 .slider li a .slidetitle02 {
font-size: 32px;
line-height: 40px;
font-weight: bold;
}

.t_content03_2 .slider li a .slidetitle03 {
padding-top: 20px;
line-height: 240%;
}


/* max-width: 1400px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1400px){
.t_content03 {
padding: 160px 0 160px 60px;
}

.t_content03 .ty04 {
text-align: center;
}

.t_content03_1 {
width: 36%;
}



}
/* max-width: 1400px @end */

/* min-width: 1051px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 1051px){
.t_content03 .ty05 {
display: none;
}

}
/* min-width: 1051px @end */

/* max-width: 1050px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 1050px){
.t_content03 {
display: block;
padding: 80px 20px;
}

.t_content03 .ty03 {
margin: 40px 0;
}

.t_content03 .ty04 {
display: none;
}

.t_content03_1 {
width: 100%;
}

.t_content03_2 {
width: 100%;
}

.t_content03 .ty05 {
margin-top: 40px;
}

}
/* max-width: 1050px @end */

/* min-width: 769px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px){

}

/* min-width: 769px @end */



/* max-width: 768px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 768px){
#movieArea1{
min-height: 100vh;
}

#video1{
width: 100%;
height: 100%;
object-fit: cover;
}

.t_content03 .ty01 {
font-size: 28px;
line-height: 28px;
}

.t_content03 .ty02 {
font-size: 86px;
line-height: 96px;
}

.t_content03 .ty03 {
font-size: 14px;
}

.slider_contents {
padding-top: 10px;
}

.t_content03_2 .slider li a {
padding: 20px;
}

.t_content03_2 .slider li a .slidetitle01 {
font-size: 62px;
margin-top: -5%;
}

.t_content03_2 .slider li a .slidetitle02 {
font-size: 20px;
line-height: 30px;
}

.t_content03_2 .slider li a .slidetitle03 {
padding-top: 10px;
line-height: 140%;
font-size: 14px;
}



}
/* max-width: 768px @end */

/* min-width: 427px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 427px){
.t_content03_2 .slider li a .slidetitle04 {
display: none;
}

}
/* min-width: 427px @end */

/* max-width: 426px
* * * * * * * * * * * * * * * * * * * * */
@media only screen and (max-width: 426px){
.t_content03_2 .slider li a .slidetitle01 {
margin-top: -10%;
}

.t_content03_2 .slider li a .slidetitle03 {
display: none;
}

.t_content03_2 .slider li a .slidetitle04 {
padding-top: 10px;
line-height: 140%;
font-size: 14px;
}

}
/* max-width: 426px @end */