@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
  color: inherit;
}

ul, ol {
  list-style: none;
}

html{
    font-size: 100%;
    scroll-behavior: smooth;
}

body {
  font-family: "Playfair Display","Shippori Mincho", serif;
  line-height: 1.8;
  color: #000000;
  padding: 0 1rem;
}


hr{
    color: #C8A45A;
    width: 290px;
    margin: 0 auto;
    margin-top: 2rem;
}

/* menu-span */
.main-nav li{
  list-style: none;
}
nav {
  position: fixed;   /* ← 追加！ */
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: none;
  background: #ffffff;
  z-index: 1200;
  padding-top: 2rem;
}
nav.active {
  display: block;
}
.hamburger {
  display: block;
  cursor: pointer;
  width: 30px;
  height: 22px;
  position: fixed;
  right: 20px;
  top: 20px;
  z-index: 2000;
}
.hamburger span {
  display: block;
  height: 3px;
  background-color: #000000;
  margin: 5px 0;
  transition: .3s;
}
.main-nav a {
  display: block;
  padding: 1rem;
  font-size: 20px;
  color: #4a3b33;
  text-decoration: none;
  font-weight: 600;
  text-align: center;
}

/* オレンジの帯 */
.header-band {
  width: 100%;
  height: 10px; /* 太さ（ゆなが調整してOK） */
  background-color: #FF8A3D; /* オレンジ */
}

/* ヘッダー内の内容 */
.site-header {
  width: 100%;
}

.header-inner {
  padding: 20px 0;
  text-align: center;
}
.header-band {
  animation: slideIn 0.8s ease forwards;
}


@keyframes slideIn {
  from { width: 0; }
  to { width: 100%; }
}

/* fade in */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}
/* h2 */
.h2-line {
  position: relative;
}

.h2-line::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #FF8A3D;
  transition: width 0.6s ease;
}

.h2-line.show::after {
  width: 40px;
}

/* home */
h1{
    font-size: 6rem;
    line-height: 1.3;
    margin-bottom: 2rem;
    display: inline-block;
}
h1:hover{
    transform: scale(1.03);
}
.sub-title{
    text-align: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}
main p{
    text-align: center;
    font-size: 18px;
    margin-bottom: 2rem;
}
.heading-large{
    text-align: center;
    margin-bottom: 1rem;
    font-size: 5rem;;
}
.top-btn{
    text-align: center;
    margin: 0 auto;
    margin: 2rem 0;
}
/* about */
.about h3{
    text-align: center;
    margin-bottom: 1rem;
}
.about p{
    padding: 0 1rem;
}
.about li{
    padding: 0 2rem;
}
.about li::before{
    content: "*";
    color: #FF8A3D;
}
.about{
    margin-bottom: 2rem;
}
.orange{
    color: #FF8A3D;
}
/* service */
.service-card{
    border: 1px solid #000000;
    flex: 0 0 280px;         /* カード幅を固定（大事） */
    scroll-snap-align: start;
    padding: 24px;
}
.service-scroll{
    display: flex;
    gap: 24px;
    overflow-x: auto;        /* 横スクロール可能にする */
    scroll-snap-type: x mandatory; /* カードごとに止まる（おしゃれ） */
    padding: 16px 0;
    justify-content: center;
}
.service-name{
    font-size: 17px;
    font-weight: 800;
}
.service-card li{
    font-size: 15px;
}
.service-card li::before{
    content: "* ";
    color: #FF8A3D;
}
.service{
    margin-bottom: 2rem;
}
/* オレンジの帯 */
.medium-band {
  width: 100%;
  height: 80px; /* 太さ（ゆなが調整してOK） */
  background-color: #FF8A3D; /* オレンジ */
  text-align: center;
  align-items: center;
  font-size: 2rem;
  color: #ffffff;
  padding-top: 10px;
}

.medium-inner {
  padding: 20px 0;
  text-align: center;
}
.medium-btn{
    color: #ffffff;
    width: 300px;
    padding: 4px 40px;
    font-size: 2rem;
      transition: transform 0.2s ease;
      display: inline-block;

}
.medium-btn:hover{
     transform: scale(1.1);
}
/* flow */
.number{
    color: #FF8A3D;
}
.flow-number{
    margin-bottom: 2rem;
}
.flow p{
    font-weight: bold;
}
.flow{
    padding: 0 2rem;
}
/* works */
.works img{
    border: 1px solid #000000;
    margin-bottom: 2rem;;
}
.works-img{
    margin-bottom: 2rem;
    text-align: center;
    font-weight: bold;
}

/* faq */
.faq-q::before{
    content: "Q. ";
    color: #FF8A3D;
}
.faq-a::before{
    content: "A. ";
    color: #FF8A3D;
}
.faq-content{
    padding: 0 2rem;
    margin-bottom: 1.2rem;
}
/* contact */
.contact{
    text-align: center;
}
.contact p{
    margin-bottom: 2rem;
}
.contact-btn{
    background-color:  #FF8A3D;
    color: #ffffff;
    width: 300px;
    padding: 4px 40px;
    font-size: 2rem;
      transition: transform 0.2s ease;
      display: inline-block;
}
.contact-btn:hover{
     transform: scale(1.1);
}
.contact{
    margin-bottom: 3rem;
}
.last{
    font-weight: bold;
    text-align: center;
    padding: 1rem 2rem;
}
.to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  color: #FF8A3D;
  font-family: "Shippori Mincho", serif;
  font-size: 3rem;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  opacity: 0.8;
  transition: 0.3s;
  z-index: 100;
}

.to-top:hover {
  opacity: 1;
  transform: translateY(-5px);
}
/* footer */
footer{
    text-align: center;

}


/* スマホ */
@media (max-width: 768px) {
}



@media (min-width: 769px) {
  .sp-br{
  display: none;
}
h1{
    font-size: 9.2rem;
    width: 100%;
    text-align: center;
}
.sub-title{
    font-size: 3rem;
}
/* about */
.flex{
    display: flex;
    gap: 2rem;
    justify-content: center;
}
.orange{
    text-align: left !important;
    padding-left: 1rem;
}
.about img{
    width: 400px;
    height: auto;
}
.flex li{
    padding: 1rem 2rem;
}
/* works */
.works img{
    width: 600px;
    height: auto;
    margin: 0 auto;
}

.faq,
.works,
.flow{
    text-align: center;
}
}