@charset "utf-8";

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

.kv {
width: 100%;
height: 100vh;
background: url("../images/net_sp.svg") center bottom no-repeat;
background-size: 100% auto;
display: flex;
align-items: center;
}

.kv h2 {
width: 76.3358778vw;
margin-left: 15px;
margin-top: -50px;
}

@media screen and (min-width: 768px) {
.kv {
background: url("../images/net.svg") center bottom no-repeat;
background-size: 100% auto;
}

.kv h2 {
width: 450px;
margin-left: 25px;
}
}

@media screen and (min-width: 1024px) {
.kv h2 {
width: 43.85416666vw;
max-width: 840px;
margin-left: 80px;
margin-top: 0;
}
}


/* ===============================================
common
=============================================== */
section {
width: 100%;
box-sizing: border-box;
padding: 50px 0;
}

section#about {
padding: 10px 0 50px;
}

section#company {
padding:50px 0 250px;
background: url("../images/net_bottom_sp.svg") center bottom no-repeat;
background-size: contain;
}


section h2, section h3,
main h2 {
line-height: 1;
padding-left: 15px;
}

section h2,
main h2 {
font-family: "Barlow", sans-serif;
font-weight: 600;
font-size:clamp(1.75rem, 1.292rem + 2.29vw, 3.125rem);
color: #FF8800;
padding-bottom: 2px;
display: inline-block;
border-bottom: 1px solid #FF8800;
}

section h3 {
font-size: clamp(0.75rem, 0.625rem + 0.63vw, 1.125rem);
padding-top: 4px;
font-weight: 500;
margin-bottom: 30px;
}


#about h2 {
display: block;
border-bottom: none;
}

#about.en h2 {
display: inline-block;
border-bottom: 1px solid #FF8800;
}

#about h3 {
display: inline-block;
border-top: 1px solid #FF8800;
}

section.en h2 {
margin-bottom: 30px;
}


/*-----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) {
section h3 {
margin-bottom: 50px;
}

section.en h2  {
margin-bottom: 50px;
}


section#company {
padding:50px 0 180px;
background: url("../images/net_bottom.svg") center bottom no-repeat;
background-size: contain;
}

}

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

section h2, section h3,
main h2 {
padding-left: 30px;
}
}

@media screen and (min-width: 1300px) {
section h2,
section h3,
main h2 {
padding-left: calc(((100% - 1280px) / 2 ) + 30px);
}

section#company {
padding:50px 0 300px;
}

}



/* ===============================================
about
=============================================== */
.mission {
text-align: center;
margin:0 15px 20px;
}

.mission.en {
margin:0 15px;
}

.mission h4 {
font-family: "Barlow", sans-serif;
font-weight: 300;
font-size:clamp(1.063rem, 0.792rem + 1.35vw, 1.875rem);
color: #FF8800;
margin-bottom: 20px;
}

.mission p {
font-size: clamp(0.938rem, 0.708rem + 1.15vw, 1.625rem);
line-height: 2;
display: inline;
background: linear-gradient(transparent 65%, #FF8800 0%);
padding-bottom: 2px;
}

.mission.en p {
background: linear-gradient(transparent 70%, #FF8800 0%);
line-height: 1.7;
}

.future {
margin: -20.356234vw 12px 0;
font-size: clamp(0.813rem, 0.667rem + 0.73vw, 1.25rem);
line-height: 1.8;
text-align: center;
}

.future.en {
margin: -23vw 12px 0;
line-height: 1.6;
}


@media screen and (min-width: 960px) {
.bp {
width: 80%;
max-width: 1000px;
margin: 0 auto;
}

.future {
margin: -17vw 12px 0;
}
}

@media screen and (min-width: 1024px) {
.future,
.future.en{
margin: -200px 12px 0;
}

}

@media screen and (min-width: 1200px) {
.future.en{
margin: -225px 12px 0;
}
}

/* ===============================================
business
=============================================== */
.business_outer {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}

.business_wrap {
width: 100%;
border: 1px solid #FF8800;
border-radius: 20px;
padding: 20px 10px;
text-align: center;
}

.business_wrap.node {
margin-bottom: 20px;
}

h4.business_title {
font-size: clamp(1.125rem, 1.042rem + 0.42vw, 1.375rem);
font-weight: 700;
color: #FF8800;
}

.business_wrap img {
margin: 15px auto;
width: 54.961832vw;
}

.business_wrap p {
font-size: clamp(0.813rem, 0.729rem + 0.42vw, 1.063rem);
line-height: 1.8;
}

.business_wrap.en p {
line-height: 1.6;
}




@media screen and (min-width: 768px) {
.business_outer {
padding: 0 30px;
display: flex;
column-gap: 20px;
}

.business_wrap.node {
margin-bottom: 0;
}

.business_wrap {
display: flex;
flex-direction: column;
padding: 30px 15px;
}

.business_wrap img {
margin: 20px auto;
height: 150px;
}

.business_wrap p {
 flex-grow:1;
}
}

@media screen and (min-width: 1024px) {
.business_outer {
max-width: 1280px;
padding: 0 30px;
column-gap: 50px;
}

.business_wrap {
padding: 30px 25px;
}

.business_wrap img {
margin: 40px auto;
}

}

@media screen and (min-width: 1280px) {
.business_outer {
column-gap: 80px;
}

.business_wrap {
width: 600px;
}
}



/* ===============================================
partners
=============================================== */
#partners h4,
.contents_outer.brandkit h4{
text-align: center;
font-family: "Barlow", sans-serif;
font-weight: 300;
font-size:clamp(1rem, 0.813rem + 0.94vw, 1.563rem);
position: relative;
margin-bottom: 32px;
}

#partners h4::after,
.contents_outer.brandkit h4::after {
position: absolute;
content: "";
background-color: #FF8800;
width: 40px;
height: 3px;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
}


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

.partners_outer.node {
margin-bottom: 50px;
}

.partners_outer li {
width: 44.274809vw;
max-width: 240px;
height: 16.5394402vw;
max-height: 90px;
background: #fff;
border: 1px solid #FF8800;
border-radius: 10px;
}

.partners_outer li.none {
display: none;
}

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



@media screen and (min-width: 768px) {
.partners_outer {
padding: 0 30px;
}

.partners_outer li {
width: 23%;
}
}

@media screen and (min-width: 1024px) {
#partners h4 {
margin-bottom: 50px;
}

.partners_outer {
width: 100%;
max-width: 1280px;
margin: 0 auto;
}

.partners_outer li {
width: 18%;
}

.partners_outer li.none {
display: block;
background: transparent;
border: none;
}
}


/* ===============================================
executive
=============================================== */
body.fixed { /* モーダル背景固定用 ※JS制御 */
position: fixed;
width: 100%;
height: 100%;
left: 0;
}

.exective_outer {
margin: 0 15px;
}

.exective_wrap {
display: flex;
align-items: center;
column-gap: 25px;
}

.exective_wrap.exe {
margin-bottom: 20px;
}

.photo {
width: 34.35114503vw;
}

.profile {
text-align: center;
}

.profile.exe_modal {
text-align: left;
}

.position,
.position.exe_modal {
font-family: "Barlow", sans-serif;
font-weight: 500;
font-size: clamp(0.813rem, 0.75rem + 0.31vw, 1rem);
background: #FF8800;
color: #fff;
}

.position {
text-align: center;
border-radius: 20px;
padding: 5px 15px;
margin-bottom: 15px;
}

.position.exe_modal {
border-radius: 0;
padding: 5px 10px 5px 15px;
display: inline-block;
margin-bottom: 8px;
}

.name_main,
.name_main.exe_modal {
font-size: clamp(1rem, 0.917rem + 0.42vw, 1.25rem);
font-weight: 600;
}

.name_main {
margin-bottom: 8px;
color: #fff;
}

.name_en {
font-family: "Barlow", sans-serif;
font-size: clamp(0.813rem, 0.771rem + 0.21vw, 0.938rem);
font-weight: 400;
color: #fff;
}

.name_main.exe_modal,
.name_en.exe_modal {
padding-left: 15px;
color: #000;
}


.modal{
display: none;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
}

.modal__bg{
background: rgba(0,0,0,0.75);
width: 100%;
height: 100vh;
position: absolute;
}

.modal__content{
position: absolute;
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: calc(100% - 30px);
max-width: 800px;
height: 60%;
max-height: 500px;
padding: 20px 10px 20px 0;
color: #000;
overflow-y: scroll;
}

.modal__content.en{
max-width: 680px;
height: 50%;
max-height: 420px;
overflow-y: auto;
}

.closeModal {
position: absolute;
top: 0.2em;
right: 0.5em;
font-size: 30px;
cursor: pointer;
}


.cv1,
.cv2,
.att {
padding: 20px 0 15px;
margin-left: 15px;
font-size: clamp(0.813rem, 0.771rem + 0.21vw, 0.938rem);
line-height: 1.6;
}

.cv1 {
border-bottom: 1px solid #000;
}

.cv1.en {
border-bottom: none;
line-height: 1.4;
}

.cv2 li {
display: flex;
column-gap: 10px;
justify-content:flex-start;
margin-bottom: 5px;
}

.cv2 li p {
width: 75%;
}

.cv2 li p.ym {
width: 25%;
}


@media screen and (min-width: 768px) {
.modal__content.en{
max-width: 600px;
max-height: 400px;
}


.exective_outer {
margin: 0 30px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
column-gap: 50px;
}

.exective_wrap {
flex-direction:column;
width: 100%;
gap:10px;
}

.exective_wrap.exe {
margin-bottom: 40px;
}

.photo {
width: 150px;
}
}


@media screen and (min-width: 960px) {
.exective_outer {
width: 700px;
margin: 0 auto;
}

.modal__content.en{
max-width: 640px;
max-height: 420px;
}


.modal__content{
padding: 20px 20px 20px 0;
}
}


@media screen and (min-width: 1024px) {
.exective_outer {
width: 900px;
margin: 0 auto;
}

.photo {
width: 180px;
}

.position.exe_modal {
padding: 8px 20px 8px 25px;
margin-bottom: 8px;
}

.name_main.exe_modal,
.name_en.exe_modal {
padding-left: 25px;
}

.cv1,
.cv2,
.att {
margin-left: 25px;
}

.closeModal {
right: 0.3em;
}

.cv2 li p {
width: 85%;
}

.cv2 li p.ym {
width: 15%;
}


}

@media screen and (min-width: 1280px) {
.exective_outer {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 30px;
}

.exective_wrap {
flex-direction:row;
width: 100%;
gap:10px;
}
}


/* ===============================================
news
=============================================== */
.news_outer {
margin: 0 15px;
}

.more {
font-family: "Barlow", sans-serif;
font-size: clamp(0.875rem, 0.833rem + 0.21vw, 1rem);
font-weight: 500;
text-align: right;
line-height: 2;
}

.news_list {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
}

.article {
padding: 15px 0;
border-bottom: 1px solid #fff;
}

.article:last-child {
border-bottom:none;
}


.time_category {
color: #fff;
font-family: "Barlow", sans-serif;
font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1.125rem);
font-weight: 500;
margin-bottom: 10px;
line-height: 1.6;
}

.article p a {
line-height: 1.6;
font-size: clamp(0.813rem, 0.708rem + 0.52vw, 1.125rem);
color: #fff;
transition: .3s all;
}

.article p a:hover {
color: #FF8800;
}

@media screen and (min-width: 768px) {
.news_outer {
margin: 0 30px;

}

.more {
line-height: 45px;
}

.article {
display: flex;
}

.time_category {
width: 120px;
}

}

@media screen and (min-width: 960px) {
.news_outer {
width: 100%;
max-width: 1064px;
margin: 0 auto;
padding: 0 30px;
}
}


/* ===============================================
company
=============================================== */
.company_outer {
margin: 0 15px;
}

.company_table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
border: none;
margin-bottom: 40px;
}

.company_table th,
.company_table td {
display: block;
width: 100%;
border: none;
font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1.125rem);   
vertical-align: top;
text-align: left;
line-height: 1.6;
}

.company_table.en th,
.company_table.en td {
line-height: 1.4;
}

.company_table th {
font-weight: 700;
padding-top: 10px;
margin-bottom: 5px;
border-top: 1px solid #fff;
}

.company_table td {
padding-bottom: 10px;
}

.company_table td.lc {
border-bottom: 1px solid #fff;
}

.subsidiary h4 {
font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1.125rem);
font-weight: 700;
margin-bottom: 10px;
}

.subsidiary img {
width: 47.32824427vw;
max-width: 273px;
}

@media screen and (min-width: 768px) {
.company_outer {
margin: 0 30px;
}

.company_table th,
.company_table td {
display: table-cell;
border-top: 1px solid #fff;
}

.company_table th.lc {
border-bottom: 1px solid #fff;
}

.company_table th {
padding: 15px;
margin-bottom: 0;
width: 120px;
}

.company_table.en th {
width: 200px;
}

.company_table td {
padding: 15px;
}

}

@media screen and (min-width: 960px) {
.company_outer {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 30px;
}
}

/* ===============================================
contact
=============================================== */
.contact_outer {
margin: 0 15px;
text-align: center;
padding-top: 50px;
}

.contact_outer p {
font-family: "Barlow", sans-serif;
font-size: clamp(1.125rem, 1rem + 0.63vw, 1.5rem); /*18-24*/
font-weight: 500;
margin-bottom: 100px;
}

@media screen and (min-width: 960px) {
.contact_outer {
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 30px;
}

.contact_outer p {
margin-top:50px;
}

}