@charset "utf-8";
/*header whitestyle*/
header:not(.fixed):not(.active){
border-bottom: none;
background: none;
}
header:not(.fixed):not(.active) > div{
border-bottom: 1px rgba(255,255,255,.2) solid;
}
header:not(.fixed):not(.active) #logo{
background: url("../images/logo_wh.svg") no-repeat left top /100% auto;
}
header:not(.fixed):not(.active) #logo img{
opacity: 0;
}
@media screen and (min-width: 769px) {/*PC white header */
header:not(.fixed) #gnaviList > li > a{
color: #fff;
}
}/*-PC only-*/
@media screen and (max-width: 768px) {/*SP white header */
header:not(.fixed):not(.active) .menu span{
background: #fff;
}
}/*-SP only-*/
/**/
.mainTitle{
background: url("../images/business_mv.jpg") no-repeat left top/cover;
padding-bottom: 96px;
margin-bottom: 0;
}
.mainTitle h1 .en,
.mainTitle h1 .ja{
color: #fff;
}
@media screen and (max-width: 768px) {/* SP mainTitle*/
.mainTitle{
background: url("../images/business_mv_sp.jpg") no-repeat left top/cover;
padding-top: 211px;
padding-bottom: 183px;
}
}/*-SP only-*/
/*--------------------
business
----------------------*/
#businessLead{
padding-top: 93px;
padding-bottom: 94px;
}
@media screen and (min-width: 769px) {
#businessLead{
flex-flow: row-reverse;
}
#businessLead figure{
width: 62.5%;
max-width: 775px;
}
#businessLead .txts{
width: 32.5%;
max-width: 400px;
}
}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP #businessLead */
#businessLead{
padding-top: 70px;
padding-bottom: 80px;
}
#businessLead figure{
margin: 0 0 40px;
}
#businessLead figure img{object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio:378/385;
}
}/*-SP only-*/
#businessFlow{
position: relative;
padding: 0;
}
#businessFlow::before{
content: "";
display: block;
background: url("../images/business_flow_bg.jpg") no-repeat right top/100% auto;
width: 100%;
height: auto;
aspect-ratio:1400/824;
}
#businessFlow *{
color: #fff;
}
#businessFlow h3{
margin-bottom: 25px;
}
@media screen and (min-width: 769px) {
#businessFlow .inner{
position: absolute;
top: 26.3%;
left: 0;
right: 0;
margin: auto;
}
#businessFlow .businessNav{
position: absolute;
right: 0;
top: 0;
width: 54.28vw;
}
}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP #businessFlow*/
#businessFlow{
overflow: hidden;
background: linear-gradient(to bottom, rgba(226,227,232,1) 0%,rgba(224,229,233,1) 46%,rgba(203,212,219,1) 100%);
margin-bottom: 60px
}
#businessFlow::before{
background: url("../images/business_flow_bg_sp.jpg") no-repeat left bottom -10vw/100% auto;
aspect-ratio:856/1954;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}
#businessFlow .inner{
padding-top: 21.9vw;
padding-bottom: 100vw;
}
#businessFlow .businessNav{
width: 88.3%;
height: 131vw;
margin: 0 auto;
}
}/*-SP only-*/
.businessNav{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
gap:0 0;
}
.businessNav li a{
display: block;
width:115px;
text-align: left;
}
.businessNav li a:hover{
opacity: .7;
}
.businessNav li:nth-of-type(1){
margin-top: 10.78vw;
width: 50.67%;
}
.businessNav li:nth-of-type(2){
margin-top: 8.07vw;
width: 15.53%;
}
.businessNav li:nth-of-type(3){
margin-top: 21.5vw;
width:33.8% ;
}
.businessNav li:nth-of-type(4){
margin: 18vw 0 0 26.2%;
width: 29.6%;
}
.businessNav li:nth-of-type(5){
margin-top: 13.0vw;
}
@media screen and (max-width: 768px) {/* SP businessNav */
.businessNav li{
line-height: 1;
}
.businessNav li a{
width:auto;
font-size: min(4.67vw,20px);
line-height: 1;
}
.businessNav li:nth-of-type(1){
margin-top: 29.2vw;
width: 61.1%;
}
.businessNav li:nth-of-type(2){
margin-top: 24vw;
width:38.9%;
}
.businessNav li:nth-of-type(3){
margin-top: 18.45vw;
width:100%;
}
.businessNav li:nth-of-type(3) a{
margin: 0 0 0 auto;
text-align: right;
}
.businessNav li:nth-of-type(4){
margin: 36.68vw 0 0 27.0%;
width: 37.5%;
}
.businessNav li:nth-of-type(5){
margin-top: 25.7vw;
}
}/*-SP only-*/
[id^="business0"] {
padding-top: 0;
padding-bottom: 65px;
}
[id^="business0"] .pcFlex .txts h4{
border-bottom: 1px var(--gray) solid;
margin-top: 40px;
padding-bottom: 16px;
}
@media screen and (min-width: 769px) {
#business01{
padding-top: 56px;
}
[id^="business0"] .inner{
border-top: 1px var(--Lgray) solid;
padding-top: 60px;
}
[id^="business0"] div.pcFlex{
flex-flow: row-reverse;
}
[id^="business0"] div.pcFlex figure{
width: 62.5%;
max-width: 775px;}
[id^="business0"] .pcFlex .txts{
position: relative;
width: 32.5%;
max-width: 403px;
padding-left: 50px;
}
[id^="business0"] .pcFlex .txts .en{
position: absolute;
left: 0;
top: 10px;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
}
#business04 .accBox .pcFlex{
flex-flow: row;
gap:0 5%;
}
}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP business01-05*/
[id^="business0"] {
padding-top: 0;
padding-bottom: 110px;
}
[id^="business0"] div.pcFlex figure{
margin: 0 -5.85vw 40px;
}
[id^="business0"] div.pcFlex figure img{
object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio:428/385;
}
}/*-SP only-*/
.js-acc,
.acc-close{
position: relative;
background: #D9D9D9;
margin-top: 80px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.js-acc::after{
content: "＋";
display: block;
position: absolute;
left: calc(50% + 5em);
top: 50%;transform: translate(0, -50%);
}
.acc-close::after{
content: "ー";
display: block;
position: absolute;
left: calc(50% + 5em);
top: 50%;transform: translate(0, -50%);
}
@media screen and (min-width: 769px) {
.acc-close{
margin-left: -50px;
}
}/*-PC only-*/
.accBox{
display: none;
padding : 60px 0 0 50px;
}
.accBox p + h4{
margin-top: 80px;
}
.accBox h4{
margin-bottom: 35px;
}
[id^="business0"] ul.pcFlex li figure{
margin: 0 0 29px;
}
[id^="business0"] ul.pcFlex li h5{
/*white-space: nowrap;*/
margin-bottom: 20px;
}
[id^="business0"] ul.pcFlex li p{
text-align: justify;
line-height: 1.7;
}
[id^="business0"] ul.discList li{
margin-bottom: 1.7em;
line-height: 1.7;
}
@media screen and (min-width: 769px) {
[id^="business0"] ul.pcFlex li {
width: 22.8%;
}
#business03 ul.pcFlex li{
width: 30.1%;
}
#business05 .txts h3{
white-space: nowrap;
}
[id^="business0"] ul.pcFlex li h5.min{
font-size: 14px;
white-space: wrap;
}
}/*-PC only-*/
@media screen and (max-width: 1080px) {
[id^="business0"] ul.pcFlex li h5{
white-space: wrap;
}
}
@media screen and (max-width: 768px) {/* SP accBox*/
.js-acc,
.acc-close{
margin-top: 60px;
line-height: 50px;
}
.accBox{
padding : 55px 0 0 0px;
}
.accBox p + h4{
margin-top: 70px;
}
.accBox h4{
margin-bottom: 22px;
}
[id^="business0"] ul.pcFlex li {
margin-bottom: 40px;
}
[id^="business0"] ul.pcFlex li figure{
margin: 0 0 22px;
}
[id^="business0"] ul.pcFlex li h5{
margin-bottom: 20px;
}
}/*-SP only-*/
#businessCase{
overflow: hidden;
background: #16243B;
z-index: 0;
}
#businessCase *{
color: #fff;
}
#businessCase h2 .en::after{
background: #fff;
}
@media screen and (min-width: 769px) {
#businessCase::before{
content: "";
display: block;
background: rgba(255,255,255,.03);
width: calc(100% - 43px);
height: 42vw;
clip-path: polygon(0 0, 72% 100%, 100% 0);
position: absolute;
top: 0;
right: 0;
z-index: -1;
}
#businessCase ul{
justify-content: space-between;
margin-top: 60px;
}
#businessCase ul li{
width: 22%;
max-width: 270px;
}
}/*-PC only-*/
#businessCase .inner >p{
line-height: 1.7;
}
#businessCase ul li figure{
margin: 0 0 25px;
}
#businessCase ul li figure img{object-fit: cover;
width: 100%;
height: 100%;
aspect-ratio:1/1;
}
#businessCase ul li h4{
margin: 0 0 12px;
}
#businessCase ul li p{
margin-top: 2px;
color: var(--gray);
font-size: 12px;
}
#businessCase .btnWrap{
border-top: 1px rgba(255,255,255,.2) solid;
margin-top: 60px;
padding-top: 40px;
}
@media screen and (max-width: 768px) {/*SP #businessCase*/
#businessCase{
padding:90px 0 80px;
}
#businessCase h3{
font-size: 2.4rem;
}
#businessCase .inner >p{
line-height: 2;
}
#businessCase ul{
margin-top: 58px;
}
#businessCase ul li{
overflow: hidden;
margin-bottom: 10px;
}
#businessCase ul li figure{
float: left;
width: 50%;
margin: 0;
}
#businessCase ul li h4,
#businessCase ul li p{
margin-left: calc(50% + 34px);
}
#businessCase ul li h4{
line-height: 1.5;
}
#businessCase .btnWrap{
border-top: 1px var(--Lgray) solid;
margin-top: 40px;
padding-top: 40px;
text-align: center !important;
}
}/*-SP only-*/
@media screen and (min-width: 769px) {
}/*-PC only-*/
@media screen and (max-width: 768px) {/* SP */
}/*-SP only-*/
/* ============================================================
【流し込み化】business本文を全幅で流し込み表示にする 2026-06-27
BudouX(JS)が word-break:keep-all + ゼロ幅スペースでフレーズ単位に
改行し右端がガタガタになるのを解除。あわせて本文中の手動
も無効化。
※元に戻す場合は、この囲み（ここから下）を丸ごと削除すればOK。
============================================================ */
#businessLead p,
#businessFlow p,
#business01 p,
#business02 p,
#business03 p,
#business04 p,
#business05 p,
#businessCase p{
word-break: normal !important; /* BudouXのkeep-all(フレーズ改行)を解除して全幅流し込みに */
}
#businessLead p br,
#businessFlow p br,
#business01 p br,
#business02 p br,
#business03 p br,
#business04 p br,
#business05 p br,
#businessCase p br{
display: none; /* 本文中の手動改行(
)を無効化 */
}
/* ============ 流し込み化ここまで ============ */
/* 事業の流れ：リード文が右のイラストに重ならないよう左側に収める */
#businessFlow .inner h3,
#businessFlow .inner p{
max-width: 600px;
}