@charset 'UTF-8';

 /* CSS Document */
 /*------------------------------------------------------------
   Browser Default Initialization responsive1
 ------------------------------------------------------------*/
 
 
    /* ========== Design Tokens ========== */
    :root{
      --bg:#fff;
      --ink:#1f2937;          /* テキスト濃いめ */
      --muted:#6b7280;        /* 補助テキスト */
      --line:#e5e7eb;         /* 罫線 */
      --brand:#0ea5e9;        /* アクセント（水色寄り） */
      --brand-ink:#0b5e86;    /* ボタンのホバー等 */
      --accent:#f59e0b;       /* 強調用（少量） */
      --card:#f8fafc;         /* 薄い面色 */
      --radius:16px;
      --space:clamp(16px,2vw,28px);
      --container:900px;
      --shadow:0 0 0 rgba(0,0,0,0); /* 影不要方針。必要なら 0 8px 24px rgba(0,0,0,.08) など */
    }
    
     /* Fields Display (Adobe Fonts想定・フォールバック) */
    .font-fields{
      font-family: "fields-display", sans-serif;
      font-weight: 400;
      font-style: normal;
      letter-spacing: .02em;
    }

    /* ========== Base ========== */
   
    .stack>*+*{margin-top:var(--space)}
    .section{padding:clamp(32px,6vw,80px) 0;border-top:1px solid var(--line);background:#fff}
    .section--alt{background:var(--card)}
    .muted{
        color:var(--muted); 
        text-align: left !important;
        margin-bottom: 0 !important;}
    .eyebrow{
        display:inline-block;
        font-size:.9rem;
        letter-spacing:.12em;
        color: #fff;
        background-color: #dc9900;
        padding: 8px 16px 8px 18px;
        border-radius: 999px;}


    /* ========== ヒーロー ========== */
    .hero__logo{
        text-align: center;
        margin: auto;
        }

    .hero__copy{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(16px,1.6vw,18px) !important;
        text-align: center !important;
        line-height: 200%;
        margin: 60px 0 70px;}
        
    .hero__main{
        aspect-ratio:3/2;
        background:#fff url('https://www.della-way.com/pic-labo/about_logo1.webp') center/cover;
        border-radius:2px;}    
        
    .hero__image{
        width: 80%;
        aspect-ratio:1/1;
        background:#fff url('https://www.della-way.com/pic-labo/about_hero.webp') center/cover;
        border-radius:2px;
        margin: auto;}
        
     .sizeup2{
        font-weight: 700;
        font-size: 1.4em;
        line-height: 200%;}    


    @media (max-width:768px){
    .hero__logo{margin: 20px auto 0;}
    .hero__copy{margin: 30px 0 40px;font-size:clamp(13px,1.5vw,15px)!important;}
    .sizeup2{font-size: 1.5em;line-height: 180%;}
    }

    /* ========== ミッション ========== */
   
    .stack>*+*{margin-top:var(--space)}
    .sp-only {display: none;}
    .mission{
        padding:50px 0 100px;
        background:#fff;}
        
    .mission__title{
        font-family: "fields-display", sans-serif;
        font-size:clamp(60px,6.0vw,80px);
        line-height: 150%;
        font-weight: 400;
        padding: 1vh 0 2vh;
        color: #ccc;
        text-align: center;}
        
   .sizeup{
        font-weight: 700;
        font-size: 1.2em;
        line-height: 300%;}        
        
        
    .mission__words{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(16px,1.6vw,18px) !important;
        line-height: 200%;
        text-align: center;
        margin: 0 auto 60px;}        
        
    .mission h3{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(18px,2.0vw,22px) !important;
        line-height: 150%;
        font-weight: 700;
        padding: 0 0 1.5vh !important;}
        
        
    .mission p{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(12px,1.6vw,18px) !important;
        line-height: 200%;
        text-align: center;
        margin: 0 auto 60px;}

    @media (max-width:768px){
    .sp-only {display: block;}
    .sizeup{font-size: 1.4em;line-height: 150%;}   
    .mission{padding:20px 0 100px;}
    .mission p{font-size:clamp(15px,1.6vw,18px) !important;}
    .mission__words{margin: 0 auto 40px;}  
    .mission .grid{width:90%; margin: auto;}
    }



    /* ========== 導入実績ロゴ ========== */
   
    .client{
        padding:50px 0 50px;
        background:#f0e9df;}
        
        
    .client__title{
        font-family: "fields-display", sans-serif;
        font-size:clamp(50px,4.8vw,70px);
        line-height: 150%;
        font-weight: 400;
        padding: 1vh 0 2vh;
        color: #fff;
        text-align: center;}        
        
    .client__words{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(16px,1.6vw,18px) !important;
        line-height: 200%;
        text-align: center;
        margin: 0 auto 20px;}
        
    .client__image{
        width: 90%;
        margin: auto;
        aspect-ratio:6/5;
        background:#f0e9df url('https://www.della-way.com/pic-labo/about_client.webp') center/cover;
        border-radius:2px;}   


    /* ========== いつでもご相談 ========== */
   
    .anytime{
        padding:50px 0 100px;
        background:#fff;}
        
    .anytime__title{
        font-family: "fields-display", sans-serif;
        font-size:clamp(60px,6.0vw,80px);
        line-height: 150%;
        font-weight: 400;
        padding: 1vh 0 2vh;
        color: #ccc;
        text-align: center;}       
        
    .anytime__words{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(16px,1.6vw,18px) !important;
        line-height: 200%;
        text-align: center;
        margin: 0 auto 60px;}
        
/* ボタンのラッパー */
    .anytime__button {
        display: flex;
        flex-direction: column;
        gap: 30px;
        max-width: 700px;
        margin: 24px auto;}

/* ボタン共通 */
    .anytime__cta {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 30px 20px;
        font-size: clamp(18px,2.0vw,24px);
        font-weight: 700;
        border-radius: 999px;
        text-decoration: none;
        width: 100%;
        transition: 0.25s;
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important;}



/* 電話ボタン（暖色） */
    .cta__tel {
        background: #f59e0b;
        color: #fff !important;}
    .cta__tel:hover {
        background: #d88403;}

/* 問い合わせボタン（ブランドカラー） */
    .cta__form {
        background: #2b534b;
        color: #fff !important;}

    .cta__form:hover {
        background: #3e8778;}

/* スマホ時は縦並びにする */
    @media (max-width: 768px) {
        .anytime__button {width: 90%;}
    }
    



    /* ========== 会社概要 ========== */
   
    .companyinfo{
        padding:50px 0 50px;
        background: #efedeb;}
        
        
    .companyinfo__title{
        font-family: "fields-display", sans-serif;
        font-size:clamp(50px,4.8vw,70px);
        line-height: 150%;
        font-weight: 400;
        padding: 1vh 0 2vh;
        color: #fff;
        text-align: center;}        

    .company-table {
  width: 90%;
  border-collapse: collapse;
  font-size: ;
  margin: auto;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important;
}

    .company-table tr {
  border-bottom: 1px solid #b5b1b1;
}

    .company-table th,
    .company-table td {
  padding: 24px 0;
  border: none;
}

    .company-table th {
  width: 30%;
}

/* sp */
@media (max-width: 768px) {
  .company-table th,
  .company-table td {
    width: ;
    display: ;}

  .company-table th {
    width: ;}
}


    /* ========== アクセス ========== */
   
    .accessmap{
        padding:50px 0 100px;
        background:#fff;}
        
    .accessmap__title{
        font-family: "fields-display", sans-serif;
        font-size:clamp(60px,6.0vw,80px);
        line-height: 150%;
        font-weight: 400;
        padding: 1vh 0 2vh;
        color: #ccc;
        text-align: center;}       
        
    .accessmap__words{
        font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif !important; 
        font-size:clamp(16px,1.6vw,18px) !important;
        line-height: 200%;
        text-align: center;
        margin: 0 auto 60px;}

    @media (max-width:768px){
        .pc-only{display: none;}
        .accessmap{ padding:50px 0 0;}
        }


    /* ========== 2col / card grids ========== */
    .grid{display:grid;gap:clamp(16px,2.4vw,24px)}
    .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
    .about__card{
        display: block;
        background:#fff;
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:clamp(16px,2.2vw,20px);
        box-shadow:var(--shadow);}

    .about__card2{
        display: block;
        background:#fff;
        border:1px solid var(--line);
        border-radius:var(--radius);
        padding:clamp(16px,2.2vw,20px);
        box-shadow:var(--shadow);
        text-align: center;}
        
    .badge{
        border-radius:2px;
        background: #2b534b;
        display:inline-grid;
        place-items:center;
        color:#fff;font-weight:800;
        padding: 8px;}

    /* ========== Logo wall ========== */
    .logos{display:grid;gap:12px;grid-template-columns:repeat(6,minmax(0,1fr))}
    .logos img{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px;aspect-ratio:3/2;object-fit:contain}

    /* ========== Testimonials ========== */
    .quote{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
    .quote__who{display:flex;align-items:center;gap:12px;margin-top:10px}
    .avatar{width:40px;height:40px;border-radius:50%;background:#e2e8f0}

    /* ========== Table (Company profile) ========== */
    .table{width:100%;border-collapse:collapse;border:1px solid var(--line);background:#fff;border-radius:12px;overflow:hidden}
    .table th,.table td{border-top:1px solid var(--line);padding:12px 14px;text-align:left}
    .table th{white-space:nowrap;background:#f3f4f6}

    /* ========== FAQ ========== */
    details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}
    details+details{margin-top:10px}
    summary{cursor:pointer;font-weight:700}
    details[open]{border-color:var(--brand)}
    details[open] summary{color:var(--brand)}



    /* ========== CTA banner ========== */
    .cta{background:linear-gradient(90deg,rgba(14,165,233,.1),rgba(14,165,233,.04));border:1px solid var(--line);border-radius:20px;padding:clamp(16px,2.5vw,24px);display:grid;gap:14px;align-items:center;grid-template-columns:1fr auto}

    /* ========== Footer micro ========== */
    .micro{font-size:.88rem;color:var(--muted)}

    /* ========== Responsive ========== */
    @media (max-width: 960px){
      .hero__wrap{grid-template-columns:1fr}
      .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
      .grid--4{grid-template-columns:repeat(3,minmax(0,1fr))}
      .logos{grid-template-columns:repeat(4,minmax(0,1fr))}
    }
    @media (max-width: 640px){
      .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
      .hero__badges{grid-template-columns:repeat(2,minmax(0,1fr))}
      .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
      .cta{grid-template-columns:1fr}
    }