@charset "UTF-8";

img {
max-width:100%;
}

html {

}

body {
background:#e5eeef;
text-align:center;
font-family: system-ui, sans-serif;
padding:3% 3%;
}

a {
text-decoration:none;
}


/* --- 基本レイアウト ---------------------------------- */
.nav {
  display: flex;                /* 横並び */
  border: 4px solid #1B8CE3;    /* 外枠（太め） */
  background: #1B8CE3;          /* 背景と矢印の色 */
  max-width: 1100px;            /* 任意：全体幅の調整 */
  margin: 0 auto 3%;               /* 任意：中央寄せ */
}

/* --- 各タブ ------------------------------------------- */
.nav__item {
  flex: 1;                      /* 均等幅 */
  position: relative;           /* 擬似要素の基準に */
  text-align: center;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);            /* 文字サイズ */
  color: #fff;
  padding: 0.9rem 0.5rem;       /* 余白 */
  line-height: 1;               /* 文字の垂直位置を揃える */
  border-right: 4px solid #1B8CE3; /* 罫線代わりの間仕切り */
  transition:all .5s ease;
}

/* 最後のタブは右罫線を消す */
.nav__item:last-child {
  border-right: none;
}

/* 内側にひと回り細い枠線を重ねて “額縁” を再現 */
.nav__item::before {
  content: "";
  position: absolute;
  inset: 2px;                  /* 4px外枠 → 2px 内側 */
  border: 2px solid #42A5F5;   /* 明るめの線色 */
  pointer-events: none;        /* 枠線がクリックを邪魔しない */
}

/* 内側にひと回り細い枠線を重ねて “額縁” を再現 */
.nav__item:hover {
  background:#fff;
  color:#1B8CE3;
}

/* --- アクティブ状態 ----------------------------------- */
.is-active::after {
  content: "";
  position: absolute;
  bottom: -12px;               /* 外枠の下に少し突き出す */
  left: 50%;
  transform: translateX(-50%);             /* 水平中央揃え */
  /* ▼ 8×8 の正三角形（↓向き） */
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #1B8CE3; /* nav 背景と同色 */
}

/* --- 見た目を整えるためのリセット --------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}


.container {
width:1300px;
max-width:100%;
min-height:150vh;
margin:0 auto;
background: #fff url(./images/content_bg.webp) center top / contain no-repeat;
border:solid 4px #fff;
box-shadow:0 0 4px rgba(0,0,0,0.3);
padding-bottom:30px;
}


.hero *,
.feature *,
.message_ceo *,
.point3 *,
.example *,
.support *,
.staff * {
font-size:0;
text-indent:-9999px;
}






@media screen and (max-width: 800px) {

.container {
background: #fff url(./images/content_bg_sp.webp) center top / contain no-repeat;
}

}



/* PC用（900px以上） */
.hero {
  background: url("./images/hero.jpg") center / 95% no-repeat;
  width: 100%;
  padding-bottom: 61%;
  margin: 0 auto;

  background-image: -webkit-image-set(
    url("./images/hero.avif") type("image/avif"),
    url("./images/hero.webp") type("image/webp"),
    url("./images/hero.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/hero.avif") type("image/avif"),
    url("./images/hero.webp") type("image/webp"),
    url("./images/hero.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .hero {
    background: url("./images/hero_sp.jpg") center / 95% no-repeat;
    padding-bottom: 83.44%;

    background-image: -webkit-image-set(
      url("./images/hero_sp.avif") type("image/avif"),
      url("./images/hero_sp.webp") type("image/webp"),
      url("./images/hero_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/hero_sp.avif") type("image/avif"),
      url("./images/hero_sp.webp") type("image/webp"),
      url("./images/hero_sp.jpg")  type("image/jpeg")
    );
  }
}


/* PC用（900px以上） */
.feature {
  background: url("./images/feature.jpg") center / 95% no-repeat;
  width: 100%;
  padding-bottom: 30%;
  margin: 0 auto 39px;

  background-image: -webkit-image-set(
    url("./images/feature.avif") type("image/avif"),
    url("./images/feature.webp") type("image/webp"),
    url("./images/feature.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/feature.avif") type("image/avif"),
    url("./images/feature.webp") type("image/webp"),
    url("./images/feature.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .feature {
    background: url("./images/feature_sp.jpg") center / 100% no-repeat;
    padding-bottom: 51.57%;

    background-image: -webkit-image-set(
      url("./images/feature_sp.avif") type("image/avif"),
      url("./images/feature_sp.webp") type("image/webp"),
      url("./images/feature_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/feature_sp.avif") type("image/avif"),
      url("./images/feature_sp.webp") type("image/webp"),
      url("./images/feature_sp.jpg")  type("image/jpeg")
    );
  }
}


/* ① 画像リンク全体を対象にするクラス（任意の名前でOK） */
.btn-zoom {
  display: inline-block;     /* transform を効かせやすく */
  transition: transform .25s ease;  /* 時間とイージングはお好みで */
  transform-origin: center;  /* 拡大縮小の基準点＝中央 */
}

/* ② hover（＋キーボード操作の focus-visible）時に 3 % 拡大 */
.btn-zoom:hover,
.btn-zoom:focus-visible {
  transform: scale(1.03);
}


/* 例：messageセクションの背景 */
.message_ceo {
  /* ―― 完全フォールバック（image-set に非対応な旧ブラウザ向け）―― */
  background: url("./images/message.jpg") center / 95% no-repeat;
  width:100%;
  padding-bottom:41.5%;
  margin:3% auto;

  /* Safari 16.3 以前などプレフィックスが必要な場合に備えて先に書く */
  background-image: -webkit-image-set(
    url("./images/message.avif") type("image/avif"),
    url("./images/message.webp") type("image/webp"),
    url("./images/message.jpg")  type("image/jpeg")
  );

  /* ほとんどのモダンブラウザはこちらを採用（AVIF 優先） */
  background-image: image-set(
    url("./images/message.avif") type("image/avif"),
    url("./images/message.webp") type("image/webp"),
    url("./images/message.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .message_ceo {
    background: url("./images/point3_sp.jpg") center / 100% no-repeat;

    background-image: -webkit-image-set(
      url("./images/message_sp.avif") type("image/avif"),
      url("./images/message_sp.webp") type("image/webp"),
      url("./images/message_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/message_sp.avif") type("image/avif"),
      url("./images/message_sp.webp") type("image/webp"),
      url("./images/message_sp.jpg")  type("image/jpeg")
    );
  }
}


/* PC用（900px以上） */
.point3 {
  background: url("./images/point3.jpg") center / 100% no-repeat;
  width: 100%;
  padding-bottom: 51.7%;
  margin: 3% auto;

  background-image: -webkit-image-set(
    url("./images/point3.avif") type("image/avif"),
    url("./images/point3.webp") type("image/webp"),
    url("./images/point3.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/point3.avif") type("image/avif"),
    url("./images/point3.webp") type("image/webp"),
    url("./images/point3.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .point3 {
    background: url("./images/point3_sp.jpg") center / 100% no-repeat;

    background-image: -webkit-image-set(
      url("./images/point3_sp.avif") type("image/avif"),
      url("./images/point3_sp.webp") type("image/webp"),
      url("./images/point3_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/point3_sp.avif") type("image/avif"),
      url("./images/point3_sp.webp") type("image/webp"),
      url("./images/point3_sp.jpg")  type("image/jpeg")
    );
  }
}



/* PC用（900px以上） */
.example {
  background: url("./images/example.jpg") center / 95% no-repeat;
  width: 100%;
  padding-bottom: 71.5%;
  margin: 0 auto;

  background-image: -webkit-image-set(
    url("./images/example.avif") type("image/avif"),
    url("./images/example.webp") type("image/webp"),
    url("./images/example.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/example.avif") type("image/avif"),
    url("./images/example.webp") type("image/webp"),
    url("./images/example.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .example {
    background: url("./images/example_sp.jpg") center / 95% no-repeat;
    padding-bottom: 155.7%;

    background-image: -webkit-image-set(
      url("./images/example_sp.avif") type("image/avif"),
      url("./images/example_sp.webp") type("image/webp"),
      url("./images/example_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/example_sp.avif") type("image/avif"),
      url("./images/example_sp.webp") type("image/webp"),
      url("./images/example_sp.jpg")  type("image/jpeg")
    );
  }
}



/* PC用（900px以上） */
.support {
  background: url("./images/support.jpg") center / 100% no-repeat;
  width: 100%;
  padding-bottom: 68.3%;
  margin: 3% auto;

  background-image: -webkit-image-set(
    url("./images/support.avif") type("image/avif"),
    url("./images/support.webp") type("image/webp"),
    url("./images/support.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/support.avif") type("image/avif"),
    url("./images/support.webp") type("image/webp"),
    url("./images/support.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .support {
    background: url("./images/support_sp.jpg") center / 100% no-repeat;
    padding-bottom: 107.1%;

    background-image: -webkit-image-set(
      url("./images/support_sp.avif") type("image/avif"),
      url("./images/support_sp.webp") type("image/webp"),
      url("./images/support_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/support_sp.avif") type("image/avif"),
      url("./images/support_sp.webp") type("image/webp"),
      url("./images/support_sp.jpg")  type("image/jpeg")
    );
  }
}



/* PC用（900px以上） */
.staff {
  background: url("./images/staff.jpg") center bottom / 95% no-repeat;
  width: 100%;
  padding-bottom: 52.9%;
  margin: 3% auto 0;

  background-image: -webkit-image-set(
    url("./images/staff.avif") type("image/avif"),
    url("./images/staff.webp") type("image/webp"),
    url("./images/staff.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("./images/staff.avif") type("image/avif"),
    url("./images/staff.webp") type("image/webp"),
    url("./images/staff.jpg")  type("image/jpeg")
  );
}

/* スマホ用（900px以下） */
@media (max-width: 900px) {
  .staff {
    background: url("./images/staff_sp.jpg") center bottom / 95% no-repeat;
    padding-bottom: 136%;

    background-image: -webkit-image-set(
      url("./images/staff_sp.avif") type("image/avif"),
      url("./images/staff_sp.webp") type("image/webp"),
      url("./images/staff_sp.jpg")  type("image/jpeg")
    );
    background-image: image-set(
      url("./images/staff_sp.avif") type("image/avif"),
      url("./images/staff_sp.webp") type("image/webp"),
      url("./images/staff_sp.jpg")  type("image/jpeg")
    );
  }
}




/* 例：staffセクションの背景 */
.outline {
  /* ―― 完全フォールバック（image-set に非対応な旧ブラウザ向け）―― */
  background: url("./images/photo.jpg") right bottom / contain no-repeat;
  width:95%;
  margin:0 auto 30px;

  /* Safari 16.3 以前などプレフィックスが必要な場合に備えて先に書く */
  background-image: -webkit-image-set(
    url("./images/photo.avif") type("image/avif"),
    url("./images/photo.webp") type("image/webp"),
    url("./images/photo.jpg")  type("image/jpeg")
  );

  /* ほとんどのモダンブラウザはこちらを採用（AVIF 優先） */
  background-image: image-set(
    url("./images/photo.avif") type("image/avif"),
    url("./images/photo.webp") type("image/webp"),
    url("./images/photo.jpg")  type("image/jpeg")
  );
  
	padding:30px;
	border:solid 2px #4472c4;
}

.outline h2 {
font-size:2rem;
color:#0070c0;
text-align:left;
}

.outline h3 {
font-size:1.5rem;
text-align:left;
padding:20px 0 15px;
}

.outline table {
line-height:1.51;
}

.outline table th {
text-align:left;
font-size:1.2rem;
padding:0 10px 3px 0;
}

.outline table td {
text-align:left;
font-size:1.2rem;
padding:0 0 3px 0;
}

.outline table td a {
color:#0070c0;
}

.outline table td h4 {
font-size:1.39rem;
}


.copyright {
padding:30px 0 0 0;
color:#5a8185;
font-size:1.2rem;
}


@media screen and (max-width: 1100px) {

.outline {
padding-bottom:50%;
background-position:center bottom;
background-size:70%;
}


}


@media screen and (max-width: 660px) {

.outline h3 {
padding-bottom:20px;
}

.outline table th {
width:100%;
display:block;
padding:0 0 0 0;
}

.outline table td {
width:100%;
display:block;
padding:0 0 10px 0;
}


}



.container_form {
width:1000px;
max-width:100%;
margin:0 auto;
background: #fff;
border:solid 4px #fff;
box-shadow:0 0 4px rgba(0,0,0,0.3);
padding:50px 30px;
}

.container_form h2 {
font-size: clamp(18px, calc(0.875rem + 1.2vw), 36px);
margin-bottom:30px;
}

.step {
padding:0 0 30px;
text-align:center;
}

.step img {
width:800px;
max-width:100%;
}

.container_form table {
width:100%;
border-top:solid 1px #1B8CE3;
border-right:solid 1px #1B8CE3;
}

.container_form table th {
text-align:left;
padding:20px 30px 20px 20px;
border-bottom:solid 1px #1B8CE3;
border-left:solid 1px #1B8CE3;
background:#d1e8f9;
vertical-align:middle;
}

.container_form table td {
text-align:left;
padding:20px 20px 20px 20px;
border-bottom:solid 1px #1B8CE3;
border-left:solid 1px #1B8CE3;
}

@media screen and (max-width: 800px) {

.container_form {
padding:50px 3%;
}

.container_form table {
width:auto;
}

.container_form table th {
text-align:left;
padding:15px 15px 15px 15px;
display:block;
width:100%;
}

.container_form table td {
text-align:left;
display:block;
width:100%;
padding:15px 15px 15px 15px;
}

}

.message {
padding:20px 0 0 0;
}

.message textarea {
width:100%;
max-width:100%;
height:180px;
margin:0;
}

.container_form table * {
font-size:1.15rem;
line-height:1.39;
}

.container_form table th small {
font-size:1rem;
font-weight:400;
}

.bigRed {
color:#ee0000;
font-size:1.3rem !important;
}

.container_form table input[type=text],
.container_form table input[type=email] {
padding:5px;
}

.container_form table textarea {
padding:5px;
}

.container_form h3 {
font-size: clamp(16px, calc(0.8rem + 1.0vw), 18px);
margin-bottom:13px;
}

.container_form h4 {
font-size: clamp(14px, calc(0.7rem + 1.0vw), 15px);
margin-bottom:7px;
font-weight:400;
}


#zip {
width:100px;
}

#add {
width:500px;
max-width:100%;
}

#add2 {
width:500px;
max-width:100%;
}

#company {
width:350px;
max-width:100%;
}

#name {
width:300px;
max-width:100%;
}

#tel {
width:150px;
max-width:100%;
}

#email {
width:300px;
max-width:100%;
}


@media screen and (max-width: 800px) {

/* textarea 自体に box-sizing 指定を明示 */
.container_form textarea {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 180px;
  margin: 0;
  padding: 5px;
  display: block; /* 行間の隙間対策 */
}

/* th のパディングをメディアクエリで除去 */
  .container_form table th {
    display: block;
    width: 100%;
  }

  .container_form table {
    width: 100%; /* auto → 100%に統一（安全策） */
    table-layout:fixed;
  }

  .container_form table td {
    display: block;
    width: 100%;
  }
  
}


span.fcg {
display:block;
}


.buttons {
padding:30px 0 0 0;
display:flex;
justify-content:center;
gap:10px;
}

.buttons input {
font-size:1.3rem;
padding:10px;
}

.buttons input:hover {
cursor:pointer;
}




.pp {
margin:60px 0 0 0;
padding:20px;
border:solid 1px #d4d4d4;
height:250px;
overflow-y:auto;
}

.pp ul {
list-style:none;
margin-bottom:40px;
display:flex;
flex-direction:column;
gap:5px;
line-height:1.39;
text-align:left;
}

.pp h2 {
font-size: clamp(18px, calc(0.875rem + 1.2vw), 24px);
margin-bottom:40px;
line-height:1.39;
}

.pp h3 {
font-size: clamp(17px, calc(0.8rem + 1.1vw), 22px);
margin-bottom:30px;
line-height:1.39;
}

.pp h4 {
font-size: clamp(16px, calc(0.8rem + 1vw), 19px);
margin-bottom:30px;
line-height:1.39;
font-weight:400;
}

.pp h5 {
font-size: clamp(15px, calc(0.7rem + 1vw), 19px);
margin-bottom:20px;
line-height:1.39;
}

.pp p {
margin-bottom:5px;
line-height:1.39;
text-align:left;
}

.errs {
margin:0 0 30px 0;

}

.errs ul {
list-style:none;
display:flex;
flex-direction:column;
gap:5px;
}

.errs ul li {
line-height:1.39;
color:#ee0000;
font-weight:500;
}

.hissu {
color:#ee0000;
}



.formText {
font-size: clamp(16px, calc(0.75rem + 1vw), 18px);
margin-bottom:30px;
line-height:1.59;
}



.container_company {
width:1000px;
max-width:100%;
margin:0 auto;
background: #fff;
border:solid 4px #fff;
box-shadow:0 0 4px rgba(0,0,0,0.3);
padding:50px 30px;
}

.container_company h1 {
font-size: clamp(20px, calc(1rem + 1.5vw), 46px);
margin:0 0 10px 0;
}

.container_company h2 {
font-size: clamp(16px, calc(0.8rem + 1.1vw), 24px);
font-weight:400;
margin:0 0 80px 0;
opacity:0.5;
}

.container_company dl {
line-height:1.39;
}

.container_company dl dt {
font-size: clamp(16px, calc(0.9rem + 1.05vw), 22px);
font-weight:700;
margin:0 0 10px 0;
}

.container_company dl dt:after {
display:block;
content:"―";
color:#1b8ce3;
}

.container_company dl dd {
font-size: clamp(15px, calc(0.8rem + 1vw), 20px);
margin:0 0 60px 0;
}