@charset "utf-8";

#container {
width: 100%;
height: 100%;
}

.kv {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
}

.video_wrapper {
margin: 0 auto;
}

video {
display: block;
width: 100%;
max-width: 768px;
}

@media screen and (min-width: 960px) {
video {
max-width: 1800px;
}
}


/* ===============================================
contents
=============================================== */
section {
padding: 50px 0;
}

#mission, #executive {
background: #000;
}

#about, #business, #recruit {
background: #EEEFF2;
}

#news {
background: #fff;
}

#about.en {
background: #fff;
}


h2 {
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size:clamp(2.875rem, 2.268rem + 3.04vw, 5rem);
line-height: 0.9;
padding-left: 20px;
position: relative;
width: 100%;
}

#mission,
#executive {
color: #fff;
}

h2::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 0;
}


h2.LtoR::before {
border-bottom: solid 1px #000;
animation: border_anim 1s linear forwards;
}

#mission h2.LtoR::before,
#executive h2.LtoR::before{
border-bottom: solid 1px #fff;
animation: border_anim .5s linear forwards;
}

@keyframes border_anim {
0%{
width: 0%;
}
100%{
width: 100%;
}
}

.c_inner {
width: calc(100% - 40px);
max-width: 1440px;
margin: 40px auto;
}


.m1 {
font-family: "Nunito Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
font-style: italic;
font-variation-settings:
"wdth" 100,
"YTLC" 500;
font-size: clamp(1.25rem, 0.786rem + 2.32vw, 2.875rem);
line-height: 1.4;
margin-bottom: 15px;
text-align: left;
}

.m1 span{opacity:.2;}

.m2 {
opacity: .5;
font-size: clamp(0.875rem, 0.768rem + 0.54vw, 1.25rem);
line-height: 1.7;
}

/*-----fadein -----*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 1s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}





@media screen and (min-width: 768px) {
.c_inner {
width: calc(100% - 80px);
margin: 60px auto;
}


.m1 {
margin-bottom: 20px;
}

.m1, .m2 {
text-align: center;
}
}

@media screen and (min-width: 1024px) {
section {
padding: 80px 0;
}


.c_inner {
width: calc(100% - 120px);
}
}

@media screen and (min-width: 1200px) {
.c_inner {
margin: 100px auto;
}

#mission {
padding: 100px 0;
}
}

@media screen and (min-width: 1440px) {
h2 {
padding-left: 115px;
}

.c_inner {
width: calc(100% - 230px);
}

}

/* ===============================================
about
=============================================== */
.about_table {
border-collapse: collapse;
margin: 0 auto;
max-width: 950px;
}

.about_table th {
white-space: nowrap;
vertical-align:baseline;
text-align: left;
padding: 20px 20px 20px 0;
border-bottom: 1px solid #000;
line-height: 1.7;
}

.about_table td {
vertical-align:top;
padding: 20px 0;
line-height: 1.7;
}

.about_table th,
.about_table td {
border-bottom: 1px solid #000;
font-size: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
}

ol.b_description {
margin-left: 2em;
}

ol.b_description li {
list-style-type: none;
counter-increment: cnt;
margin-bottom: 5px;
}

ol.b_description li::before {
content: "(" counter(cnt) ") ";
display:inline-block;
margin-left:-2em;
width: 2em;
}

@media screen and (min-width: 768px) {

.about_table th {
padding: 20px 50px 20px 0;
}


}

/* ===============================================
news
=============================================== */
.news_list {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 15px 10px 20px 10px;
}

.news_link img:hover {
opacity: 1;
}

.article {
list-style:none;
margin-bottom: 50px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
border-radius: 15px;
overflow: hidden;
background: #fff;
transform: .1s all;
}

.article:hover {
transform: translateY(-10px);
opacity: .7;
}

.news_link {
display: block;
height: 100%;
}

.news_link::before {
content: "";
display: block;
position: absolute;
right: 6%;
bottom: 16px;
z-index: 5;
width: 15px;
height: 15px;
background: url("../images/arrow.svg") center no-repeat;
}

.article .news_link img {
width: 100%;
aspect-ratio: 40 / 21;
object-fit: cover;
overflow: hidden;
}

.news_txt {
padding:10px 20px 50px 20px;
}

.time_category {
display: flex;
align-items: center;
}

.time_category time {
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
color: #606060;
line-height: 1;
}

.time_category .news_category {
font-size: clamp(0.75rem, 0.714rem + 0.18vw, 0.875rem);
background: #B7B7B7;
color: #fff;
line-height: 1;
padding: 4px 10px;
margin-left: 10px;
border-radius: 3px;
}



.news_txt p {
color: #000;
text-decoration: none;
margin-top: 10px;
line-height: 1.7;
font-size: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
}

.news_more {
display: block;
height: 60px;
line-height: 60px;
width: 65vw;
max-width: 400px;
background: #000;
color: #fff;
outline: none;
text-align: center;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: clamp(1.125rem, 1.054rem + 0.36vw, 1.375rem);
margin: 0 auto;
position: relative;
border: 1px solid #000;
transition: 0.3s all;
}

.news_more:hover {
opacity: .6;
}


@media screen and (min-width: 768px) {
.news_list {
max-width: 1440px;
padding: 15px 0 20px 0;
display: flex;
justify-content: space-between;
}

.article {
width: 30%;
}

.news_txt {
padding:20px 20px 50px 20px;
}

.news_more {
height: 80px;
line-height: 80px;
}
}

@media screen and (min-width: 960px) {
section#news_wrap {
padding: 150px 0 50px;
}
}

@media screen and (min-width: 1024px) {
.pager {
margin: 100px auto 0;
}
.prev, .next {
width: 35px;
height: 35px;
}
}

/* ===============================================
business
=============================================== */
#business h3 {
font-size: clamp(1.375rem, 1.232rem + 0.71vw, 1.875rem);
font-weight: 700;
text-align: center;
margin-bottom: 25px;
}

#business p {
text-align: center;
margin-bottom: 25px;
line-height: 1.8;
font-size: clamp(0.875rem, 0.804rem + 0.36vw, 1.125rem);
}

.sns {
width: 100%;
max-width: 1200px;
display: flex;
justify-content: flex-end;
column-gap:6px;
margin: 0 auto 10px;
}

.sns li {
width: 34px;
height: 34px;
background: #000;
display: flex;
justify-content: center;
align-items: center;
padding: 6px;
transition: .3s all;
}

.sns li.xlogo {
padding: 8px;
}

.sns li.mlogo {
padding: 6px 0 6px 6px;
}

.sns li:hover {
opacity: .6;
}

.oshi3_img, .nue3_img {
width: 100%;
max-width: 1200px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
margin:0 auto 100px;
transform: .5s all;
}

.node_list {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
gap:10px 10px;
}

/*.node_list li {
width: 42vw;
max-width: 324px;
height: 18.1395348vw;
max-height: 134px;
background: #F5F6F9;
border: 1px solid #fff;
border-radius: 10px;
}
*/

.node_list li {
width: 42vw;
max-width: 230px;
height: 16.2790697vw;
max-height: 90px;
background: #F5F6F9;
border: 1px solid #fff;
border-radius: 10px;
}

.node_list li.none {
display: none;
}

.node_list li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
text-align: center;
}







@media screen and (min-width: 768px) {
#business p {
margin-bottom: 50px;
}

.node_list {
gap:15px;
}

.node_list li {
width: 28vw;
height: 10vw;
}
}

@media screen and (min-width: 960px) {
.sns li {
width: 54px;
height: 54px;
padding: 12px;
}

.sns li.xlogo {
padding: 14px;
}

.sns li.mlogo {
padding: 15px 0 15px 15px;
}

.node_list li {
width: calc((100% - 45px)/4);
}
}

@media screen and (min-width: 1320px) {
.node_list {
gap:15px;
justify-content: flex-start;
}

.node_list li {
width: 220px;
height: 90px;
}

}
/* ===============================================
executive
=============================================== */
.exe {
width: 100%;
max-width: 1440px;
margin: 0 auto;
}

.exe_inner {
display: flex;
column-gap: 10px;
margin-bottom: 30px;
}

.photo {
width: 50%;
}

.prof {
width: 50%;
display: flex;
flex-direction:column;
justify-content: center;
padding-left: 20px;
border-top: 1px solid #7D7D7D;
border-bottom: 1px solid #7D7D7D;
line-height: 1.5;
}

.position {
font-size: clamp(0.813rem, 0.777rem + 0.18vw, 0.938rem);
font-weight: 300;
}

.name {
font-size: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
font-weight: 500;
padding: 5px 0;
}

.name_en {
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size: clamp(0.875rem, 0.839rem + 0.18vw, 1rem);
color: #7D7D7D;
}

@media screen and (min-width: 768px) {
.exe {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}

.exe_inner {
width:48%;
}

.spacer {
  width: 100%;
}




.prof {
line-height: 1.8;
}
}

@media screen and (min-width: 1024px) {
.exe_inner {
width:30%;
}

.spacer {
display: none;
}
}


/* ===============================================
recruit
=============================================== */
.join_btn {
display: block;
height: 65px;
line-height: 65px;
width: 65vw;
max-width: 550px;
background: #000;
color: #fff;
text-align: center;
font-family: "Oswald", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-size:clamp(1.25rem, 0.886rem + 1.82vw, 2.25rem);
margin: 0 auto 10px;
position: relative;
padding-right: 10px;
transition: 0.3s all;
}

.join_btn::after {
content: '';
display: inline-block;
width: 17px; 
height: 16px;
background-image: url("../images/tab.svg");
background-size: contain;
background-repeat:no-repeat;
position:absolute;
top:24px;
right:20px;
}

.join_btn:hover {
opacity: .6;
}

#recruit p {
text-align: center;
font-size: clamp(0.813rem, 0.759rem + 0.27vw, 1rem);
}

@media screen and (min-width: 768px) {
.join_btn {
height: 80px;
line-height: 80px;
width: 400px;
}

.join_btn::after {
width: 24px; 
height: 24px;
top:28px;
right:30px;
}
}

@media screen and (min-width: 960px) {
.join_btn {
width: 550px;
height: 120px;
line-height: 120px;
}

.join_btn::after {
top:48px;
right:125px;
}


}