@import url('sub.css'); 

/* About */
.about_engjpn_basic_cont {width:100%; max-width:100%; margin-bottom:0 !important;}

.about_greeting {position:relative; width:100%; box-sizing:border-box;}
.about_greeting_in {display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;}

.about_greeting_logo {margin-bottom:50px; background:var(--grayBg); width:100%; padding:100px 0; position:relative;}
.about_greeting_logo img {width:460px; height:auto; max-width:50%;}

.about_deco {position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; pointer-events:none;}
.about_deco img {max-width:60px !important; width:100%; height:auto; position:absolute;}
.about_deco img:nth-child(1) {top:10px; left:10px; transform:rotate(90deg);}
.about_deco img:nth-child(2) {top:10px; right:10px; transform:rotate(180deg);}
.about_deco img:nth-child(3) {bottom:10px; left:10px; transform:rotate(0deg);}
.about_deco img:nth-child(4) {bottom:10px; right:10px; transform:rotate(-90deg);}

.about_greeting_main {color:var(--black); margin-bottom:25px;}
.about_greeting_sub {color:var(--light);}

.about_message {position:relative; width:100%; background:var(--main); box-sizing:border-box; overflow:hidden;}
.about_message::before {content:''; position:absolute; left:50%; top:0; transform:translate(-50%, -60%); width:100%; height:0; padding-top:105.52%; border-radius:2026px; background:var(--sub, #07C9FF); opacity:0.4; mix-blend-mode:hard-light; filter:blur(367px); z-index:0; pointer-events:none;}

.about_message_in {position:relative; z-index:1;}
.about_message_title {margin-bottom:50px;}

.about_message_content {display:flex; align-items:center; gap:80px; max-width:1200px; margin:0 auto;}

.about_message_img {flex-shrink:0; width:35%; max-width:320px;}
.about_message_img img {width:100%; height:auto; display:block;}

.about_message_text {flex:1;}
.about_message_text > * {word-break:keep-all;}
.about_message_subtitle {margin-bottom:20px;}
.about_message_body {margin-bottom:40px; opacity:0.7;}
.about_message_signature {display:flex; align-items:center; gap:10px; justify-content:center;}
.about_message_signature_divider {display:block; width:1px; height:10px; background:var(--white); opacity:0.2;}

.about_message_logo {position:absolute; right:0; top:50%; transform:translateY(-50%); width:171px; height:467px; opacity:0.1; z-index:0; pointer-events:none;}
.about_message_logo img {width:100%; height:auto; display:block;}

/* about_vision */
.about_vision_in {position:relative;}
.about_vision_title {margin-bottom:50px; color:var(--black);}
.about_vision_dia {position:relative; display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; max-width:1360px; margin:0 auto;}
.about_vision_card {flex:1 1 0; min-width:0; aspect-ratio:1; max-width:460px; border-radius:500px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 40px; box-sizing:border-box; border:10px solid var(--main);}
.about_vision_card_white {background:var(--white);}
.about_vision_card_main {background:var(--main);}
.about_vision_icon {width:100px; height:100px; margin-bottom:20px; display:flex; align-items:center; justify-content:center;}
.about_vision_icon img {width:100%; height:auto; max-width:100%; object-fit:contain;}
.about_vision_card_txt {text-align:center;}
.about_vision_card_tit {margin-bottom:10px;}
.about_vision_card_desc {line-height:1.667;}
/* .about_vision_card_white .about_vision_card_desc {color:var(--light); opacity:0.7;} */
.about_vision_card_white .about_vision_card_desc {color:#313131;}
.about_vision_card_main .about_vision_card_desc {opacity:1;}
.about_vision_connector {position:absolute; top:50%; width:60px; height:60px; display:flex; align-items:center; justify-content:center; pointer-events:none;}
.about_vision_connector:nth-child(2) {left:33.333%; transform:translate(-50%, -50%);}
.about_vision_connector:nth-child(4) {left:66.666%; transform:translate(-50%, -50%);}
.about_vision_connector_outer {display:block; width:60px; height:60px; border-radius:500px; background:var(--main); position:absolute; left:0; top:0; opacity:0.2;}
.about_vision_connector_inner {display:block; width:40px; height:40px; border-radius:500px; background:var(--white); position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:1;}
.about_vision_connector_icon {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); font-size:24px; font-weight:700; font-variation-settings:'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 48; color:var(--main); z-index:2;}

/* about_partner */
.about_partner {background:var(--grayBg); box-sizing:border-box;}
.about_partner_in {position:relative;}
.about_partner_section_title {margin-bottom:50px; color:var(--black);}
.about_partner_block {margin-bottom:80px;}
.about_partner_block:last-child {margin-bottom:0;}
.about_partner_block_title {margin-bottom:20px; color:var(--black);}
.about_partner_list {display:grid; grid-template-columns:repeat(6, 1fr); gap:30px;}
.about_partner_item {aspect-ratio:230/100; background:var(--white); border-radius:10px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; list-style:none; position:relative; overflow:hidden; transition:all 0.35s ease; border: 1px solid transparent;}
.about_partner_item:hover {box-shadow:5px 5px 20px 0 rgba(0, 0, 0, 0.10); border-color:var(--main);}
.about_partner_item:has(.no_link):hover {box-shadow:none;}
.about_partner_item a {position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; box-sizing:border-box;}
.about_partner_item img {max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block;}
.about_partner_item_txt {display:block; font-size:0.889rem; line-height:1.4; color:var(--black); text-align:center; word-break:break-all;}
.about_partner_hover {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,52,108,0.9); display:flex; align-items:center; justify-content:center; gap:10px; opacity:0; transition:opacity 0.35s ease; color:var(--white);}
.about_partner_hover_icon, .about_partner_hover_txt {opacity:0; transform:translateY(10px); transition:opacity 0.35s ease, transform 0.35s ease;}
.about_partner_hover_icon {font-size:22px; font-variation-settings:'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48;}
.about_partner_hover_txt {font-size:0.889rem; font-weight:700; letter-spacing:0.5px;}
.about_partner_item:hover .about_partner_hover {opacity:1;}
.about_partner_item:hover .about_partner_hover_icon, .about_partner_item:hover .about_partner_hover_txt {opacity:1; transform:translateY(0);}

/* Location (アクセス) - PC */
.location_about.company_cont > ul > li {display:flex; align-items:stretch; gap:30px;}
.location_about.company_cont > ul > li + li {margin-top:80px;}
.location_about .mapbox {flex:1; border:1px solid #dddddd; overflow:hidden; box-sizing:border-box; min-height:574px;}
.location_about .mapbox iframe {display:block; width:100%; height:100%; border:0;}
.location_about .mapinfo { background:var(--main); padding:50px; box-sizing:border-box; display:flex; flex-direction:column; width:500px; flex-shrink: 0; box-sizing: border-box;}
.location_about .mapinfo_sub4 {background:var(--sub4);}
.location_about .mapinfo_title {border-bottom:1px solid rgba(255,255,255,0.2); padding-bottom:50px; margin-bottom:50px;}
.location_about .mapinfo_title p:first-child {margin:0 0 4px 0;}
.location_about .mapinfo_title p:last-child {margin:0;}
.location_about .mapinfo_location {display:flex; align-items:center; gap:25px;}
.location_about .mapinfo_location img {flex-shrink:0; width:36px; height:36px; display:block;}
.location_about .mapinfo_location p {font-size:1rem; font-weight:400; line-height:1.667; color:var(--white); margin:0; flex:1;}
.location_about .mapinfo_contact {margin-top:auto; padding-top:80px;}
.location_about .mapinfo_contact > p {font-size:14px; font-weight:400; line-height:1.5; color:var(--white); margin:0 0 20px 0; opacity:0.7;}
.location_about .mapinfo_contact > p a {color:var(--sub); text-decoration:underline;}
.location_about .mapinfo_contact_btn {display:flex; gap:2px;}
.location_about .mapinfo_contact_btn a {display:flex; align-items:center; justify-content:center; height:60px; padding:0 20px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.2); color:var(--white); font-size:0.889rem; font-weight:700; line-height:1.75; font-family:var(--eng); box-sizing:border-box; transition:var(--transition-default); gap:8px; width:100%}
.location_about .mapinfo_contact_btn a:hover {background:rgba(255,255,255,0.2);}
.location_about .mapinfo_contact_btn a:hover {background:var(--white); color:var(--main);}

/*******************************************************************************
    @media 1700px
*******************************************************************************/
@media all and (max-width:1700px){



}

/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



}

/*******************************************************************************
    @media 1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* about_greeting */
.about_greeting_logo {padding:60px 0;}
.about_greeting_logo img {width:400px;}
.about_greeting_text br {display:none;}
/* about_message */
.about_message_logo {width:130px; height:auto;}
.about_message_title {margin-bottom:30px;}
.about_message_text br:not(.brFixed) {display:none;}
.about_message_content {gap:40px;}

/* about_vision */
.about_vision_title {margin-bottom:30px;}
.about_vision_card {padding:30px 20px; border-width:5px}
.about_vision_icon {width:80px; height:80px; margin-bottom:10px;}
.about_vision_card_desc br {display:none;}

/* about_partner */
.about_partner_list {grid-template-columns:repeat(4, 1fr); gap:15px;}

/* location */
.location_about.company_cont > ul > li {gap:15px;}
.location_about .mapinfo {flex:0 0 350px; width:350px; max-width:350px; padding:30px;}
.location_about .mapinfo_title {padding-bottom:30px; margin-bottom:30px;}
.location_about .mapinfo_location {display: block;}
.location_about .mapinfo_location img {width:30px; height:30px; margin-bottom: 10px;}
.location_about .mapinfo_contact_btn {flex-wrap:wrap;}
.location_about .mapinfo_contact_btn a {width:100%; min-width:0;}

}

/*******************************************************************************
    @media 980px
*******************************************************************************/
@media all and (max-width:980px){
/* about_greeting */
.about_greeting_logo {margin-bottom:30px;}
.about_greeting_logo img {width:300px;}
.about_deco img {max-width:40px !important;}
.about_greeting_main {margin-bottom:15px;}
/* about_message */
.about_message_logo {width:110px;}
.about_message_subtitle {margin-bottom:10px;}
.about_message_body {margin-bottom:20px;}
.about_message_content {gap:30px; align-items: flex-start;}
/* about_vision */
.about_vision_card {padding:5px 20px;}
.about_vision_card_desc {font-size:13px;}
.about_vision_icon  {width:65px; height:65px;}

.about_vision_connector {width:50px; height:50px;}
.about_vision_connector_outer {width:50px; height:50px;}
.about_vision_connector_inner {width:35px; height:35px;}
.about_vision_connector_icon {font-size:20px;}

/* about_partner */
.about_partner_section_title {margin-bottom:30px;}
.about_partner_list {gap:10px;}
.about_partner_block {margin-bottom:50px;}
.about_partner_item {border-radius:5px;}
.about_partner_hover_icon {font-size:19px;}

/* loaction */
.location_about.company_cont > ul > li {display: block;}
.location_about .mapbox {min-height:auto; height:400px}
.location_about .mapinfo {padding:20px; width:100%; max-width:none; margin-top:10px;}
.location_about .mapinfo_location {display: flex; gap:15px}
.location_about .mapinfo_location img {margin-bottom: 0;}
.location_about .mapinfo_contact {padding-top:50px;}
.location_about .mapinfo_contact_btn a {height:50px}
.location_about .mapinfo_contact_btn a span {font-size:20px;}
.location_about .mapinfo_contact_btn a img {width:15px; height:auto}
}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
/* about_vision */
.about_vision_dia {flex-wrap:wrap;}
.about_vision_card {flex:auto; width:100%; max-width:none; aspect-ratio: auto; border-radius: 0; padding:15px}
.about_vision_connector {position:relative; transform:none !important; top:auto !important; left:auto !important; margin:-20px 0}
.about_vision_card_tit {margin-bottom:2px;}
}

/*******************************************************************************
    @media 680px
*******************************************************************************/
@media all and (max-width:680px){
/* about_greeting */
.about_greeting_logo {padding:50px 0;}
.about_deco img {max-width:32px !important;}
.about_greeting_main {margin-bottom:5px;}
/* about_message */
.about_message_content {flex-wrap:wrap;}
.about_message_img {width:100%; margin:0 auto 20px; max-width:200px;}
.about_message_text {width:100%; flex:auto}
.about_message_signature {gap:5px;}

/* about_partner */
.about_partner_list {grid-template-columns:repeat(3, 1fr);}
.about_partner_block_title {margin-bottom:10px;}
.about_partner_block {margin-bottom:25px;}

/* location */
.location_about .mapbox {height:300px}
.location_about .mapinfo_title {padding-bottom:20px; margin-bottom:20px;}
.location_about .mapinfo_location {gap:10px}
.location_about .mapinfo_location img {width:25px;}
.location_about .mapinfo_contact_btn a {height:45px; font-size:13px;}

}

/*******************************************************************************
    @media 480px
*******************************************************************************/
@media all and (max-width:480px){

/* about_partner */
.about_partner_list {grid-template-columns:repeat(2, 1fr);}



}

/*******************************************************************************
    @media 320px
*******************************************************************************/
@media all and (max-width:320px){



}