/* ========================================
1 Base
======================================== */

body{

  font-family:
    'Inter',
    sans-serif;

  color:#111827;

  background:#fff;

  --main-color:#2563eb;

}

/* ========================================
2 Theme Color
======================================== */

body[data-color="blue"]{
  --main-color:#2563eb;
}

body[data-color="orange"]{
  --main-color:#f59e0b;
}

body[data-color="green"]{
  --main-color:#16a34a;
}

body[data-color="red"]{
  --main-color:#dc2626;
}

body[data-color="black"]{
  --main-color:#111827;
}

/* ========================================
3 Font Theme
======================================== */

body[data-font="modern"]{
  font-family:'Inter',sans-serif;
}

body[data-font="simple"]{
  font-family:'Noto Sans JP',sans-serif;
}

body[data-font="elegant"]{
  font-family:'Playfair Display',serif;
}

body[data-font="luxury"]{
  font-family:'Cormorant Garamond',serif;
}

body[data-font="soft"]{
  font-family:'Poppins',sans-serif;
}

/* ========================================
4 Layout
======================================== */

.section-space{
  padding:140px 0;
}

.section-head{

  margin-bottom:70px;

  text-align:center;

}

/* ========================================
5 Navbar
======================================== */

.navbar{

  background:#fff;

  min-height:84px;

  padding:18px 0;

  box-shadow:
    0 2px 20px rgba(0,0,0,0.04);

}

.navbar-brand{

  display:flex;

  align-items:center;

}

.logo-image{

  height:42px;

  width:auto;

  display:block;

}

.navbar-nav{

  display:flex;

  align-items:center;

  gap:32px;

}

.navbar-nav .nav-item{

  display:flex;

  align-items:center;

}

.nav-link{

  color:#111827;

  font-weight:500;

  text-decoration:none;

}

/* ========================================
6 Buttons
======================================== */

.btn-main,
.hero-btn,
.content-btn,
.nav-btn{

  display:inline-flex;

  align-items:center;

  justify-content:center;

  min-height:54px;

  padding:0 28px;

  border-radius:14px;

  background:var(--main-color);

  color:#fff;

  text-decoration:none;

  font-weight:600;

  transition:0.25s;

}

.btn-main:hover,
.hero-btn:hover,
.content-btn:hover,
.nav-btn:hover{

  opacity:0.9;

  color:#fff;

  transform:translateY(-2px);

}

.btn-main,
.btn-main:hover,
.btn-main:focus,
.btn-main:active{

  appearance:none;
  -webkit-appearance:none;

  border:none !important;

  box-shadow:none !important;

  outline:none !important;

}

/* ========================================
7 Hero
======================================== */

.hero{

  min-height:100vh;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:0;

  color:#fff;

  position:relative;

}

.hero-inner{

  width:100%;

  display:flex;

  align-items:center;

  justify-content:center;

}

.hero-content{

  width:100%;

  max-width:900px;

  transform:
    translateY(60px);

}

.hero-title{

  font-size:5.5rem;

  line-height:1.05;

  font-weight:700;

  margin-bottom:28px;

}

.hero-text{

  font-size:1.15rem;

  line-height:2;

  color:rgba(255,255,255,0.82);

  margin-bottom:40px;

}

/* ========================================
8 Hero Align
======================================== */

.hero-left{
  text-align:left;
}

.hero-center{
  text-align:center;
}

.hero-right{
  text-align:right;
}
/* ========================================
Gallery
======================================== */

.gallery-section{

  background:linear-gradient(
    180deg,
    #07111f 0%,
    #0d1b2a 100%
  );

}

.gallery-section .section-label{

  color:rgba(255,255,255,.5);

}

.gallery-section .section-title{

  color:#fff;

}

.gallery-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(280px,1fr)
    );

  gap:32px;

  margin-top:60px;

}

.gallery-item{

  border-radius:24px;

  overflow:hidden;

  background:#111827;

  aspect-ratio:1/1;

}

.gallery-item img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:.4s;

}

.gallery-item:hover img{

  transform:scale(1.05);

}
/* タイトル */

.gallery-section .section-head{

  text-align:center;

  margin-bottom:60px;

}

.gallery-section .section-label{

  color:#999;

  font-size:14px;

  letter-spacing:.2em;

  margin-bottom:12px;

}

.gallery-section .section-title{

  font-size:48px;

  font-weight:700;

}

/* SP */

@media(max-width:768px){

  .gallery-grid{

    grid-template-columns:
      repeat(2,1fr);

    gap:16px;

  }

  .gallery-section .section-title{

    font-size:32px;

  }

}

/* ========================================
Responsive
======================================== */

@media(max-width:1200px){

  .gallery-grid{

    grid-template-columns:
      repeat(3,1fr);

  }

}

@media(max-width:991px){

  .gallery-grid{

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media(max-width:640px){

  .gallery-grid{

    grid-template-columns:1fr;

  }

}

.gallery-section .section-title{

  color:#fff;

}

.gallery-section .section-label{

  background:
    rgba(255,255,255,0.08);

  color:#fff;

}

/* ========================================
Responsive
======================================== */

@media(max-width:1400px){

  .gallery-grid{

    column-count:4;

  }

}

@media(max-width:991px){

  .gallery-grid{

    column-count:2;

  }

}

@media(max-width:640px){

  .gallery-grid{

    column-count:1;

  }

}

/* ========================================
Responsive
======================================== */

@media(max-width:991px){

  .gallery-grid{

    grid-template-columns:1fr;

  }

  .gallery-item{

    grid-column:auto !important;

    height:260px !important;

  }

}

/* ========================================
Responsive
======================================== */

@media(max-width:991px){

  .gallery-grid{

    grid-template-columns:1fr;

  }

  .gallery-item{

    grid-column:auto !important;

    height:260px;

  }

}

/* ========================================
10 Feature
======================================== */

.content-section{
  padding:140px 0;
}

.content-image{
  position:relative;
}

.feature-image{

  width:100%;

  border-radius:28px;

  display:block;

  object-fit:cover;

}

.content-text{
  max-width:480px;
}

.section-label{

  display:inline-flex;

  align-items:center;

  height:34px;

  padding:0 16px;

  border-radius:999px;

  background:
    rgba(0,0,0,0.04);

  color:var(--main-color);

  font-size:0.82rem;

  font-weight:700;

  letter-spacing:0.08em;

  margin-bottom:24px;

}

.feature-title{

  font-size:3rem;

  line-height:1.2;

  margin-bottom:28px;

}

.feature-text{

  font-size:1.05rem;

  line-height:2;

  color:#6b7280;

  margin-bottom:40px;

}

/* ========================================
11 Service
======================================== */

.section{
  padding:140px 0;
}

.bg-light-custom{
  background:#f8fafc;
}

.service-list{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(320px,1fr)
    );

  gap:32px;

  align-items:stretch;

}

.service-card{

  width:100%;

  height:100%;

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

  transition:0.3s;

}

.service-card:hover{

  transform:translateY(-6px);

  border-color:
    var(--main-color);

}

.service-image{

  width:100%;

  height:240px;

  object-fit:cover;

  display:block;

}

.service-body{
  padding:32px;
}

.service-title{

  font-size:1.5rem;

  margin-bottom:18px;

}

.service-text{

  color:#6b7280;

  line-height:2;

}

/* ========================================
12 About
======================================== */

.about-section{
  padding:140px 0;
}

.about-content{
  max-width:420px;
}

.about-title{

  font-size:2.2rem;

  margin-bottom:28px;

}

.about-text{

  line-height:2;

  color:#6b7280;

}

.about-table-wrap{

  background:#fff;

  border-radius:28px;

  overflow:hidden;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.05);

}

.about-table{

  width:100%;

  border-collapse:collapse;

}

.about-table tr{

  border-bottom:
    1px solid #e5e7eb;

}

.about-table tr:last-child{
  border-bottom:none;
}

.about-table th{

  width:180px;

  padding:28px;

  background:#f8fafc;

  font-weight:700;

  vertical-align:top;

}

.about-table td{

  padding:28px;

  line-height:2;

}

/* ========================================
CTA
======================================== */

.cta-section{

  padding:140px 0;

}

.cta-box{

  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      135deg,
      var(--main-color),
      color-mix(
        in srgb,
        var(--main-color) 75%,
        #000
      )
    );

  border-radius:40px;

  padding:120px 80px;

  text-align:center;

  color:#fff;

}

.cta-box::before{

  content:'';

  position:absolute;

  inset:0;

  background:

    radial-gradient(
      circle at top right,
      rgba(255,255,255,0.12),
      transparent 40%
    );

  pointer-events:none;

}

.cta-box .section-label{

  background:
    rgba(255,255,255,0.12);

  color:#fff;

}

.cta-title{

  font-size:3.5rem;

  line-height:1.2;

  margin-bottom:24px;

  color:#fff;

}

.cta-text{

  max-width:720px;

  margin:
    0 auto 48px;

  font-size:1.1rem;

  line-height:2;

  color:
    rgba(255,255,255,0.82);

}

.cta-box .btn-main{

  background:#fff;

  color:var(--main-color);

  min-width:220px;

}

@media(max-width:991px){

  .cta-box{

    padding:80px 32px;

    border-radius:28px;

  }

  .cta-title{

    font-size:2.2rem;

  }

}

/* ========================================
13 Map
======================================== */

.map-section{
  padding:140px 0;
}

.map-wrap{

  border-radius:24px;

  overflow:hidden;

}

.map-wrap iframe{

  width:100%;

  height:500px;

  border:0;

  display:block;

}

/* ========================================
14 Footer
======================================== */

.footer{

  padding:60px 0;

  border-top:1px solid #e5e7eb;

}

.footer-copy{

  text-align:center;

  color:#6b7280;

}

/* ========================================
15 Form
======================================== */

.form-control::placeholder{

  color:#9ca3af;

  opacity:1;

}

/* ========================================
16 Alt Section
======================================== */

body[data-color="blue"]
.section-alt{

  background:
    rgba(37,99,235,0.04);

}

body[data-color="green"]
.section-alt{

  background:
    rgba(22,163,74,0.04);

}

body[data-color="orange"]
.section-alt{

  background:
    rgba(245,158,11,0.05);

}

body[data-color="red"]
.section-alt{

  background:
    rgba(220,38,38,0.04);

}

body[data-color="black"]
.section-alt{

  background:
    rgba(17,24,39,0.04);

}

/* ========================================
17 Responsive
======================================== */

@media(max-width:991px){

  .hero{

    min-height:auto;

    padding:120px 0 80px;

    text-align:center;

  }

  .hero-title{
    font-size:2.5rem;
  }

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

  .logo-image{
    height:34px;
  }

  .content-section{
    padding:100px 0;
  }

  .feature-title{
    font-size:2.2rem;
  }

  .about-title{
    font-size:2.2rem;
  }

  .about-table th{
    width:120px;
  }

}
/* ========================================
Embed
======================================== */

.embed-section{

  padding:80px 0;

}

.embed-wrap{

  width:100%;

}

.embed-wrap iframe{

  width:100% !important;

  height:auto !important;

  aspect-ratio:16/9 !important;

  border:0;

  border-radius:20px;

  display:block;

}

/* 16:9 */

.ratio-16-9 iframe{

  aspect-ratio:16/9;

}

/* 4:3 */

.ratio-4-3 iframe{

  aspect-ratio:4/3;

}

/* 1:1 */

.ratio-1-1 iframe{

  aspect-ratio:1/1;

}


/* ========================================
News
======================================== */

.news-section{

  padding:80px 0;

}

.news-list{

  display:flex;

  flex-direction:column;

  gap:20px;

}

.news-item{

  display:flex;

  gap:24px;

  align-items:flex-start;

  padding:24px;

  border:1px solid #eee;

  border-radius:20px;

}

.news-thumb{

  width:140px;

  flex-shrink:0;

}

.news-thumb img{

  width:100%;

  aspect-ratio:1/1;

  object-fit:cover;

  border-radius:12px;

  display:block;

}

.news-body{

  flex:1;

}

.news-date{

  font-size:13px;

  color:#999;

  margin-bottom:8px;

}

.news-title{

  font-size:22px;

  font-weight:700;

  margin-bottom:12px;

}

.news-text{

  color:#666;

  line-height:1.8;

}
@media(max-width:768px){

  .news-item{

    flex-direction:column;

  }

  .news-thumb{

    width:100%;

  }

}

.news-body{
  flex:1;
}

.news-more-btn{
  border:0;
  background:none;
  color:var(--theme-color);
  cursor:pointer;
  margin-left:8px;
  font-weight:600;
}

.news-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}

.news-modal.show{
  display:block;
}

.news-modal-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.news-modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:
    translate(-50%,-50%);
  width:min(
    800px,
    calc(100% - 40px)
  );
  max-height:80vh;
  overflow:auto;
  background:#fff;
  border-radius:20px;
  padding:40px;
}

.news-modal-close{
  position:absolute;
  top:15px;
  right:15px;
  border:0;
  background:none;
  font-size:30px;
  cursor:pointer;
}

.news-modal-image{
  width:100%;
  border-radius:12px;
  margin-bottom:20px;
}

.news-modal-date{
  color:#999;
  margin-bottom:10px;
}

.news-modal-title{
  margin-bottom:20px;
}

.news-modal-text{
  line-height:1.9;
}


.faq-section{

  padding:80px 0;

}

.faq-list{

  display:flex;

  flex-direction:column;

  gap:12px;

}

.faq-item{

  border:1px solid #eee;

  border-radius:16px;

  overflow:hidden;

}

.faq-question{

  width:100%;

  text-align:left;

  border:0;

  background:#fff;

  padding:20px;

  font-size:18px;

  font-weight:600;

  cursor:pointer;

}

.faq-answer{

  display:none;

  padding:20px;

  border-top:1px solid #eee;

  line-height:1.8;

}

.faq-item.open
.faq-answer{

  display:block;

}


/* ========================================
Table
======================================== */

.table-section{

  padding:80px 0;

}

.content-table{

  width:100%;

  border-collapse:collapse;

  background:#fff;

  border-radius:20px;

  overflow:hidden;

}

.content-table th{

  width:30%;

  background:#f8fafc;

  text-align:left;

  padding:20px;

  border-bottom:
    1px solid #eee;

}

.content-table td{

  padding:20px;

  border-bottom:
    1px solid #eee;

}

.content-table tr:last-child th,
.content-table tr:last-child td{

  border-bottom:0;

}

/* ========================================
Image
======================================== */

.image-margin-normal{

  padding:80px 0;

}

.image-margin-none{

  padding:0;

}

.image-file{

  width:100%;

  display:block;

}

/* fit */

.image-fit-cover{

  object-fit:cover;

}

.image-fit-contain{

  height:auto !important;

  object-fit:contain;

}

/* height */

.image-small{

  height:300px;

}

.image-medium{

  height:500px;

}

.image-large{

  height:700px;

}

/* radius */

.image-radius-none{

  border-radius:0;

}

.image-radius-small{

  border-radius:8px;

}

.image-radius-medium{

  border-radius:20px;

}

.image-radius-large{

  border-radius:40px;

}

@media(max-width:768px){

  .image-small{

    height:200px;

  }

  .image-medium{

    height:300px;

  }

  .image-large{

    height:400px;

  }

}

.pricing-section{

  padding:80px 0;

}

.pricing-grid{

  display:grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        280px,
        1fr
      )
    );

  gap:30px;

}

.pricing-card{

  padding:40px;

  border-radius:24px;

  background:#fff;

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .05
    );

}

.pricing-price{

  font-size:42px;

  font-weight:700;

  margin:20px 0;

}

.pricing-card ul{

  margin:20px 0;

  padding-left:20px;

}

.banner-section{

  padding:80px 0;

}

.banner-grid{

  display:grid;

  gap:24px;

}

.cols-1{

  grid-template-columns:
    1fr;

}

.cols-2{

  grid-template-columns:
    repeat(2,1fr);

}

.cols-3{

  grid-template-columns:
    repeat(3,1fr);

}

.banner-item{

  display:block;

}

.banner-item img{

  width:100%;

  display:block;

}

.radius-none img{

  border-radius:0;

}

.radius-small img{

  border-radius:8px;

}

.radius-medium img{

  border-radius:20px;

}

.radius-large img{

  border-radius:40px;

}

@media(max-width:768px){

  .banner-grid{

    grid-template-columns:
      1fr !important;

  }

}

/* ========================================
Team
======================================== */

.team-section{

  padding:80px 0;

}

.team-grid{

  display:grid;

  gap:30px;

  justify-content:center;

}

/* columns */

.team-grid.cols-2{

  grid-template-columns:
    repeat(
      2,
      minmax(
        280px,
        400px
      )
    );

}

.team-grid.cols-3{

  grid-template-columns:
    repeat(
      3,
      minmax(
        280px,
        400px
      )
    );

}

.team-grid.cols-4{

  grid-template-columns:
    repeat(
      4,
      minmax(
        240px,
        320px
      )
    );

}

/* card */

.team-card{

  text-align:center;

  max-width:400px;
	
	
  background:#fff;

  border-radius:24px;

  padding:20px;

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .05
    );


}

/* image */

.team-card img{

  width:100%;

  aspect-ratio:3/4;

  object-fit:cover;

  border-radius:20px;

  display:block;

}

/* name */

.team-name{

  margin-top:20px;

  font-size:24px;

  font-weight:700;

  line-height:1.4;

}

/* position */

.team-position{

  margin-top:6px;

  font-size:14px;

  opacity:.7;

}

/* description */

.team-description{

  margin-top:16px;

  line-height:1.8;

  font-size:15px;

}

/* sns */

.team-sns{

  margin-top:20px;

  display:flex;

  justify-content:center;

  gap:18px;

}

.team-sns-link{

  font-size:22px;

  color:inherit;

  text-decoration:none;

  transition:.2s;

}

.team-sns-link:hover{

  opacity:.6;

  transform:translateY(-2px);

}

/* mobile */

@media(max-width:768px){

  .team-grid{

    grid-template-columns:
      1fr !important;

  }

  .team-card{

    max-width:500px;

    margin:0 auto;

  }

  .team-name{

    font-size:22px;

  }

}

/* ========================================
Voice
======================================== */

.voice-section{

  padding:80px 0;

}

.voice-grid{

  display:grid;

  gap:30px;

  justify-content:center;

}

.voice-grid.cols-2{

  grid-template-columns:
    repeat(
      2,
      minmax(
        280px,
        420px
      )
    );

}

.voice-grid.cols-3{

  grid-template-columns:
    repeat(
      3,
      minmax(
        280px,
        420px
      )
    );

}

.voice-card{

  background:#fff;

  border-radius:24px;

  padding:30px;

  box-shadow:
    0 10px 30px
    rgba(
      0,
      0,
      0,
      .05
    );

}

/* header */

.voice-header{

  display:flex;

  align-items:center;

  gap:16px;

}

.voice-header img{

  width:72px;

  height:72px;

  border-radius:50%;

  object-fit:cover;

  flex-shrink:0;

}

/* text */

.voice-name{

  font-size:18px;

  font-weight:700;

}

.voice-company{

  margin-top:4px;

  font-size:14px;

  opacity:.7;

}

.voice-stars{

  margin-top:20px;

  color:#f5b301;

  font-size:20px;

}

.voice-comment{

  margin-top:16px;

  line-height:1.8;

}

@media(max-width:768px){

  .voice-grid{

    grid-template-columns:
      1fr !important;

  }

}