@charset "UTF-8";

/* =========================
   mv
========================= */
#mv{
position:relative;
width:100%;
color:#fff;
overflow:hidden;
}
.mv-video{
display:block;
width:100%;
height:auto;
}
#mv::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.45) 0%,
rgba(0,0,0,.20) 45%,
rgba(0,0,0,.55) 100%
);
z-index:1;
pointer-events:none;
}

/* =========================
   top
========================= */
#top{
position:relative;
z-index:2;
padding:0;
background:#231815;
}
#top .inner.box{
color:#fff;
width:92%;
max-width:80rem;
margin-inline:auto;
padding:3rem 3rem 3rem 0;
display:flex;
align-items:center;
gap:3vw;
box-sizing:border-box;
}
#top dl{
flex:1;
}
#top dl dt{
font-weight:700;
letter-spacing:.04em;
font-size:var(--font-size-30);
margin-bottom:1rem;
}
#top dl dd{
font-size:var(--font-size-18);
opacity:.95;
}
#top ul{
flex:0 0 20rem;
display:flex;
flex-direction:column;
gap:.7rem;
margin-left:auto;
}
#top ul a{
width:min(20rem,100%);
display:flex;
align-items:center;
justify-content:space-between;
gap:.75rem;
padding:.75rem 1rem .75rem 2rem;
font-weight:600;
letter-spacing:.02em;
}

/* =========================
   headings
========================= */
#business h2,
#advantage h2,
#company h2{
text-align:center;
font-weight:700;
letter-spacing:.08em;
margin-bottom:1.8rem;
font-size:var(--font-size-38);
color:#333;
}
#business h2 span,
#advantage h2 span,
#company h2 span{
display:block;
margin-top:.25rem;
font-size:var(--font-size-18);
color:#9e9e9e;
letter-spacing:.14em;
}

/* =========================
   business
========================= */
#business{
background:#eee;
}
#business ul{
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
column-gap:2vw;
row-gap:3vw;
align-items:stretch;
}
#business ul>li{
grid-column:span 2;
background:#fff;
border:1px solid #e6e6e6;
padding:1.3rem;
display:flex;
flex-direction:column;
gap:.9rem;
min-height:10.5rem;
}
#business ul>li:nth-child(4){
grid-column:2/span 2;
}
#business ul>li:nth-child(5){
grid-column:4/span 2;
}
#business dl dt{
font-weight:700;
font-size:var(--font-size-23);
line-height:1.35;
margin-bottom:1rem;
}
#business dl dd{
color:#444;
font-size:var(--font-size-18);
}
#business li>a{
margin-top:auto;
align-self:flex-end;
display:inline-flex;
align-items:center;
gap:.55rem;
font-weight:700;
font-size:var(--font-size-18);
}
#business li a span:hover{
opacity:.7;
}

/* =========================
   advantage
========================= */
#advantage h3{
text-align:center;
font-weight:700;
margin:0 auto 1.8rem;
font-size:var(--font-size-34);
letter-spacing:.04em;
}
#advantage ul{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
}
#advantage li{
border:1px solid #e6e6e6;
background:#fff;
padding:1.6rem;
margin:-1px 0 0 -1px;
}
#advantage dl dt{
text-align:center;
font-weight:700;
font-size:var(--font-size-26);
margin-bottom:2rem;
}
#advantage dd.icon{
display:grid;
place-items:center;
margin-bottom:2rem;
}
#advantage dd.icon img{
width:9vw;
min-width:4.5rem;
max-width:6rem;
}
#advantage dd.text{
color:#444;
font-size:var(--font-size-18);
}
#advantage .consul{
margin-top:2rem;
background:#fff;
}
#advantage .consul dl{
border:2px solid #7e1083;
padding:1.5rem 2rem;
}
#advantage .consul dl dt{
background:#7e1083;
color:#fff;
padding:.75rem 1rem;
text-align:center;
font-size:var(--font-size-28);
}
#advantage .consul dl dd{
padding:1rem 1.4rem;
color:#444;
font-size:var(--font-size-20);
}
#advantage .consul p{
padding:0 1.4rem 1rem;
margin:0;
text-align:center;
color:#7e1083;
font-weight:700;
font-size:var(--font-size-24);
}

/* =========================
   company
========================= */
#company ul{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
align-items:center;
gap:3vw;
}
#company ul li:first-child{
width:45%;
}
#company ul li:last-child{
width:50%;
}
#company dl dt{
font-weight:800;
font-size:var(--font-size-28);
margin-bottom:.6rem;
}
#company dl dd{
color:#444;
font-size:var(--font-size-20);
}
#company .btn{
margin-top:6rem;
}
#company .btn a{
display:flex;
align-items:center;
justify-content:space-between;
gap:.8rem;
padding:.85rem 1rem;
font-weight:800;
border-radius:.15rem;
width:min(24rem,100%);
color:#fff;
}

/* =========================
   responsive 980
========================= */
@media (max-width:980px){
#advantage ul{
grid-template-columns:1fr;
}
}

/* =========================
   responsive 900
========================= */
@media (max-width:900px){
#business ul{
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:1rem;
row-gap:2rem;
}
#business ul>li{
grid-column:auto;
}
#business ul>li:nth-child(4),
#business ul>li:nth-child(5){
grid-column:auto;
}
}

/* =========================
   responsive 768
========================= */
@media (max-width:768px){
#company ul{
align-items:flex-start;
}
#company .btn a{
width:90%;
}
}

/* =========================
   responsive 640
========================= */
@media (max-width:640px){
#business ul{
grid-template-columns:1fr;
}
}

/* =========================
   responsive 520
========================= */
@media (max-width:520px){
#mv{
min-height:34rem;
}
#top .inner.box{
flex-direction:column;
padding:2.2rem 1.4rem;
}
#top ul{
flex:none;
width:100%;
}
#top ul a{
width:86%;
}
#top dl{
margin-bottom:2rem;
}
#company ul{
flex-direction:column;
gap:2rem;
}
#company ul li:first-child,
#company ul li:last-child{
width:100%;
}
#advantage .consul dl{
padding:1.5rem 1rem;
}
#company .btn a{
width:90%;
}
}

/* =========================
   responsive 1400
========================= */
@media (min-width:1400px){
#business ul{
column-gap:1.4rem;
row-gap:3rem;
}
}