/* =============================

common

============================= */

html{
    scroll-behavior: smooth;
}

body{
     letter-spacing: .75px;
}

p,li,dd,a,h2,h3,dt,dd{
   line-height: 1.9;
    letter-spacing: .2em;
}

:root{
    --margin: clamp(5rem, 3.571rem + 7.14vw, 9.375rem);/* 80px-150px */
    --margin00: clamp(2.125rem, 1.609rem + 3.3vw, 4.5rem);/* 36px-72px */
    --margin01: 60px;
    --margin02: clamp(3.5rem, 3.352rem + 0.74vw, 4rem);/* 56px-64px */
    --margin03: clamp(1.75rem, 1.602rem + 0.74vw, 2.25rem);/* 28px-38px */
    --margin04: clamp(1.5rem, 1.352rem + 0.74vw, 2rem);/* 24px-32px */
    --margin05: 24px;
    --margin06: clamp(0.5rem, 0.391rem + 0.7vw, 1rem); /* 8px-16px */


    --main:#bfa9c3;
    --base:#fafafa;
    --accent:#d8c9b6;
    --gray:#f1f1f1;

    --color:#66636d;


    --font-a:150px;
    --font-b:clamp(2.25rem, 1.435rem + 4.07vw, 5rem); /* 36px-80px */
    --font-c:clamp(1.5rem, 0.907rem + 2.96vw, 3.5rem);/* 24px-56px */
    --font-d:clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);/* 20px-28px */
    --font-e:clamp(0.875rem, 0.838rem + 0.19vw, 1rem);/* 14px-16px */
    --font-f:14px;
    --font-g:12px;
    --font-h:clamp(1.125rem, 0.94rem + 0.93vw, 1.75rem);/* 18px-28px */
    --font-i:clamp(1rem, 0.955rem + 0.23vw, 1.125rem);/* 16px-18px */
}


html{
    color: var(--color);
    line-height: 1.5;
    font-family: "Noto Sans JP", sans-serif;;
}



.sp{
    display: none;
}

.wrap{
    width: 80%;
    margin: 0 auto;
    max-width: 1500px;
}


.box01{
  padding: var(--margin) 0;
}

.box02{
  padding-bottom: var(--margin);
}

.title-font{
    font-family: "Shippori Mincho", serif;
    font-weight: 400;
    font-style: normal;
}

.color-main{
  color: var(--main);
}

h1{
    font-size: var(--font-b);
}

h2{
  font-size: var(--font-c)
}

h3  {
  font-size: var(--font-d)
}

.text-box{
  padding-top: 8%;
}

  
 /* =============================

header

============================= */



.header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  z-index: 100;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin: 0 auto;
  max-width: 1500px;
}

.logo a {
  text-decoration: none;
  font-weight: 700;
  font-size: 20px;
  color: var(--color);
}

.nav ul {
  display: flex;
  margin: 0;
  list-style: none;
  font-size: 14px;
}

.nav a {
text-decoration: none;
    color: var(--color);
    font-weight: 500;
    padding: 16px;
    transition: all 0.3s ease;
    display: block;
}

/* hoverで背景と文字色変化 */
.nav a:hover {
  background: var(--accent);
  color: #fff;
}

.btn-contact {
  background: var(--main);
  color: #fff!important;
  padding: 8px 16px;
  transition: 0.3s;
  width: 150px;
  text-align: center;
}

.btn-contact:hover {
  background: var(--accent);
}

/* ------------------------------
   ハンバーガーメニュー
------------------------------ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 18px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  background: var(--color);
  border-radius: 3px;
  transition: all 0.3s ease;
}

/* ------------------------------
   ナビオーバーレイ（全画面）
------------------------------ */

.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--main);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
}

.nav-overlay ul {
  list-style: none;
  text-align: center;
  padding: 0;
}

.nav-overlay a {
  display: block;
  color: #fff;
  font-size: var(--font-d);
  padding: 15px 0;
  text-decoration: none;
  transition: 0.3s;
}

.nav-overlay a:hover {
  color: var(--main);
}






 /* =============================

FV

============================= */



.FV{
    height:100svh;
    background: url(../img/FV.jpg) no-repeat center / cover;
    width: 100%;
}

.FV-box{
    text-align: center;
    height: 100svh;
    display: flex;
    justify-content: end;
    flex-direction: column;
    padding-bottom: 5%;
    color: #fff;
}


.FV h1, .FV p{
    text-shadow: 0px 0px 25px #55225e;
}

.FV p{
  font-size: var(--font-e);
}


 /* =============================

about

============================= */


.about-box{
  display: flex;
  justify-content: space-between;
}

.about-left,
.about-right{
    width: 48%;
}



.about-right{
   background: url(../img/about_img.png) no-repeat center / contain;
   height: auto;
}


/* =============================

service

============================= */


.service{
  background: url(../img/service_back.jpg) no-repeat center / cover;
  color: #fff;
}

.service-contents{
  padding: 8% 0 0;
}

.service-items{
  display: flex;
  justify-content: space-around;
}


.service-items:last-child{
  flex-direction: row-reverse;
  padding-top: 8%;
}

.service-title{
  display: flex;
}

.service-title h2{
      font-size: var(--font-b)!important;
}

.service-title h2{
  width: 48%;
}

.service-img,
.service-sentences{
  width: 40%;
}


.sim01{
background: url(../img/service_img01.jpg) no-repeat center / cover;
}

.sim02{
background: url(../img/service_img02.jpg) no-repeat center / cover;
}


.service-box-title{
  font-size: var(--font-d);
  
}


  
 /* =============================

company

============================= */



.company{
  background: url(../img/company_img.jpg) no-repeat center / cover;
}

.company-title{
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding-bottom: var(--margin00);
}


.company-items{
      background: #fff;
      padding: 8%;
}

.company-detail{
  display: flex;
  border-bottom: 1px solid var(--gray);
  justify-content: space-between;
  margin-bottom: var(--margin04);
  padding-bottom: var(--margin04);
}

.company-detail:last-child{
margin-bottom: 0;
border-bottom: none;
}

.company-detail dt{
  color: var(--main);
  width: 28%;
}

.company-detail dd{
  width: 70%;
}

  
 /* =============================

footer

============================= */

footer{
    background: var(--color);
    color: #fff;
    padding:  var(--margin02) 0;
}

.footer-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--gray);

}

.footer-box{
    display: flex;
}

.footer-list p{
    font-size: var(--font-g);
}


.footer-box ul li a,
.footer-list h2 a{
    display: flex;
    align-items: center;
}

.footer-box ul li a span,
.footer-list h2 a span{
    padding-right: 10px;
}

.footer-list h2{
        padding-bottom: 3%;
}





.footer-list h2{
    font-size: var(--font-f);
}

.footer-list ul li{
    font-size: var(--font-g);
    line-height: 1.5rem;
}


.footer-list:not(:last-child){
    padding-bottom: var(--margin04);
}


.footer-bottom{
    display: flex;
    justify-content: center;
    padding-top: 48px;
    font-size: var(--font-g);
}






.footer-logo a {
width: 100%;
    display: block;
    font-weight: bold;
}

.footer-logo img{
    width: 100%;
}




/* ========================


animation


======================== */



.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}