@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================
   Common: Header (PC first)
========================= */

/* Adjust body padding for fixed header */
body {
  padding-top: 120px;
}

body.admin-bar {
  padding-top: 152px;
  /* 120 + 32 */
}

@media (max-width: 782px) {
  body.admin-bar {
    padding-top: 166px;
    /* 120 + 46 */
  }
}

/* Business Section Styles moved to assets/css/dreseo-home.css */



.siteHeader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 120px;
  /* Fixed height from React */
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  /* Vertical center */
}

/* Admin bar adjustment for logged-in users */
body.admin-bar .siteHeader {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .siteHeader {
    top: 46px;
  }
}

.siteHeader__inner {
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.siteHeader__logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  margin-right: auto;
  height: 100%;
}

.siteHeader__logoIcon {
  width: 45px;
  height: 45px;
  flex-shrink: 0;
  margin-right: -18px;
}

.siteHeader__logoImg {
  height: 64px;
  width: auto;
  display: block;
}

.siteHeader__nav {
  display: block;
  margin-left: auto;
  margin-right: 60px;
}

.siteHeader__nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 40px;
  /* React Metric */
}

.siteHeader__nav a {
  color: #1a1a1a;
  /* React Metric */
  text-decoration: none;
  font-size: 16px;
  /* React Metric */
  font-weight: 500;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.3s;
}

.siteHeader__nav a:hover {
  opacity: .7;
  text-decoration: none;
}

.siteHeader__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  /* React Metric */
}

.siteHeader__cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  /* Default padding, right override for arrow below */
  padding-right: 40px;
  /* Space for arrow */
  border-radius: 9999px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  /* Increased to match FV */
  line-height: 1;
  transition: all 0.3s ease;
  white-space: nowrap;
  position: relative;
  height: 48px;
  /* Explicit height */
}

/* Arrow Icon */
.siteHeader__cta a::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
  transition: transform 0.3s ease;
}

.siteHeader__cta a:hover::after {
  transform: translateY(-50%) rotate(45deg) translateX(2px);
}

/* White Button (Contact) */
.siteHeader__btn--contact {
  background: transparent;
  color: #111;
  border: 1px solid #111;
  /* Removed margin-right, using gap on parent */
}

.siteHeader__btn--contact:hover {
  background: #f5f5f5;
  color: #000;
}

/* Black Button (Download) */
.siteHeader__btn--download {
  background: #111;
  color: #fff;
  border: 1px solid #111;
  /* Keep border for sizing consistency */
}

.siteHeader__btn--download:hover {
  background: #333;
  border-color: #333;
  opacity: 1;
}

/* PCではハンバーガー非表示（あなたの追加案はOK） */
.dreseo-header__menuBtn {
  display: none;
}

/* =========================
   Common: Footer
========================= */

.siteFooter {
  background: #0f1220;
  color: rgba(255, 255, 255, .86);
  margin-top: 40px;
}

.siteFooter__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 16px;
}

.siteFooter__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 22px;
}

.siteFooter__brand {
  display: grid;
  gap: 10px;
}

.siteFooter__brandName {
  margin: 0;
  line-height: 1;
  /* Reset line height for image */
}

.siteFooter__logoLink {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.3s;
}

.siteFooter__logoLink:hover {
  opacity: 0.8;
}

.siteFooter__logoImg {
  height: 50px;
  /* Increased from 24px to better show the logo */
  width: auto;
  display: block;
  /* Filter: brightness(0) invert(1) makes it white */
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

.siteFooter__desc {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  opacity: .85;
}

.siteFooter__colTitle {
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #fff;
}

.siteFooter__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.siteFooter__links a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 13px;
}

.siteFooter__links a:hover {
  color: #fff;
  text-decoration: none;
}

.siteFooter__bottom {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .10);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  opacity: .78;
}

/* =========================
   Responsive (SP)
========================= */

@media (max-width: 768px) {
  /* Adjust body padding for mobile header height (if different, e.g. 70px)
     Assuming mobile header is smaller or same. If same 120px, no change needed.
     If header height changes in mobile, override padding-top here. 
     Currently header height is not explicitly changed in media query, so keeping 120px is fine unless we add mobile heigth rule.
  */

  body {
    padding-top: 80px;
  }

  .siteHeader {
    height: 80px;
  }

  .siteHeader__inner {
    padding: 10px 14px;
    gap: 10px;
    height: 100%;
  }

  .siteHeader__logoImg {
    height: 60px;
  }

  /* SPではナビとCTAボタンを隠し、ロゴ＋ハンバーガーのみ */
  .dreseo-header__nav,
  .siteHeader__btn--contact,
  .siteHeader__btn--download {
    display: none !important;
  }

  .dreseo-header__menuBtn {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: #2d2d2d;
    border-radius: 8px;
    border: none;
    color: #fff;
    padding: 0;
  }

  .dreseo-header__menuBtn span {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
    font-size: 0;
    line-height: 0;
  }

  /* SP Menu Drawer */
  .dreseo-spMenu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
  }

  .dreseo-spMenu[hidden] {
    display: none;
  }

  .dreseo-spMenu__inner {
    width: 100%;
    max-width: none;
    background: #fff;
    height: 100%;
    padding: 20px 18px 28px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .dreseo-spMenu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dreseo-spMenu__close {
    width: 44px;
    height: 44px;
    border: none;
    background: #2d2d2d;
    color: #fff;
    border-radius: 8px;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dreseo-spMenu__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 0;
  }

  .dreseo-spMenu__label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1b1f5f;
    margin: 0 0 2px;
  }

  .dreseo-spMenu__label-link {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1b1f5f;
    text-decoration: none;
    margin: 0 0 2px;
  }

  .dreseo-spMenu__col a {
    display: block;
    font-size: 1rem;
    color: #111;
    text-decoration: none;
    padding: 2px 0;
  }

  .dreseo-spMenu__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }

  .dreseo-spMenu__list a {
    font-size: 1rem;
    color: #111;
    text-decoration: none;
    padding-left: 10px;
    position: relative;
  }

  .dreseo-spMenu__list a::before {
    content: '–';
    position: absolute;
    left: 0;
    color: #3b82f6;
  }

  /* Business submenu - pentagon number badges */
  .dreseo-spMenu__list--business {
    counter-reset: business-item;
  }

  .dreseo-spMenu__list--business a {
    padding-left: 36px !important;
    position: relative;
    counter-increment: business-item;
  }

  .dreseo-spMenu__list--business a::before {
    content: counter(business-item) !important;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff !important;
    background: #CE93D8;
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  }

  /* Color by order */
  .dreseo-spMenu__list--business a:nth-child(1)::before {
    background: #E1BEE7;
    /* soft purple */
    color: #111 !important;
  }

  .dreseo-spMenu__list--business a:nth-child(2)::before {
    background: #BBDEFB;
    /* soft blue */
    color: #111 !important;
  }

  .dreseo-spMenu__list--business a:nth-child(3)::before {
    background: #C8E6C9 !important;
    /* soft green */
    color: #111 !important;
  }

  .dreseo-spMenu__cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
  }

  .dreseo-spMenu__cta .dreseo-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    padding: 14px 20px;
    border-radius: 12px;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    position: relative;
    text-decoration: none;
  }

  .dreseo-spMenu__cta .dreseo-btn-primary {
    background: #000;
    color: #fff;
    border: 1px solid #000;
  }

  .dreseo-spMenu__cta .dreseo-btn-secondary {
    background: transparent;
    color: #000;
    border: 1px solid #000;
  }

  .dreseo-spMenu__link-sub {
    display: inline-block;
    font-size: 0.95rem;
    color: #555;
    text-decoration: none;
    margin-top: 4px;
  }

  .dreseo-spMenu__cta .dreseo-btn-with-arrow::after {
    content: '';
    position: absolute;
    right: 18px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }

  .dreseo-spMenu__cta .dreseo-btn {
    width: 100%;
    max-width: 340px;
    align-self: center;
  }

  .siteFooter__grid {
    grid-template-columns: 1fr;
  }

  .siteFooter__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =======================================================
   Top Page Specific: Remove SWELL default top spacing
   Wrapper: #content / .l-main etc.
   Scope: .home (Front Page only)
======================================================= */
.home #content,
.home .l-main,
.home .l-container,
.home .l-content,
.home .p-main,
.home .c-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ensure first child of content doesn't add margin */
.home #content>*:first-child {
  margin-top: 0 !important;
}

/* Hero section specific reset */
.home .dreseo-hero {
  margin-top: 0 !important;
  padding-top: 0 !important;
}