@charset "utf-8";

/* CSS Document */

html {

	scroll-behavior: smooth;

}

body {

  width: 100%;

  font-family: "Noto Sans JP", sans-serif;

  margin: 0;

}

h2, h3, h4, h5, p, span, a {

  font-feature-settings: "palt";

  letter-spacing: 1px;

  box-sizing: border-box;

}

.inner {

  max-width: 1200px;

  width: 100%;

  margin: 0 auto;

  padding: 0 2em;

  box-sizing: border-box;

}

#header, #top, #explanation, #contact {

  width: 100%;

  margin: 0 auto;

}

#top {

  /*	height: auto;

	width: 100%;

	padding-left: 130px;

  margin: 0 auto;

	justify-content: space-between;

  grid-template-columns: 650px 1fr;

  column-gap: 40px;

  align-items: center;

	box-sizing: border-box;*/

}

main {

  width: 100%;

  height: 100%;

  background-image: url("../images/background_top@2x.webp");

  /*  background-size: 100%;

  background-repeat: no-repeat;*/

  background-size: 100%;

  background-repeat: no-repeat;

  background-position: top right;

}

.photo-wrap {

  width: 56%;

  margin: auto;

  min-width: 450px;

  max-width: 650px;

}

.photo-wrap img {

  width: 100%;

}

article{position: relative;}

.modoru-btn{position: fixed;bottom:30px;right:30px;width:80px;}

.modoru-btn img {width:100%;}

@media (max-width: 1400px) {

  #header nav ul {

    gap: 20px;

  }

  #header nav ul li a {

    font-size: 14px;

  }

}

/* ヘッダー全体 */

#header {

  width: 100%;

  margin: 0 auto;

  background: #fff;

  padding: 40px 40px 6vw;

  box-sizing: border-box;

}

#header nav ul {

  list-style: none;

  display: flex;

  justify-content: flex-end;

  gap: 32px;

  margin: 0;

  padding: 0;

  white-space: nowrap;

}

/* リンクの基本スタイル */

#header nav ul li a {

  text-decoration: none; /* 下線を消す */

  color: #000; /* 黒文字 */

  font-size: 16px;

  font-weight: 500;

  transition: color 0.3s ease;

}

/* ホバー時 */

#header nav ul li a:hover {

  color: #f18919; /* オレンジ */

}

/*------トップビュー-----*/

.text-block {

  /*width: 650px;*/

  padding-left: 8vw;

  box-sizing: border-box;

}

.head-copy {

  width: 100%;

  height: auto;

  margin: 0 auto 22px;

  position: relative;

  font-size: 27px;

}

.logo.top {

  width: 406px;

  height: auto;

}

.main-copy {

  margin: 90px auto 25px;

  font-size: 80px;

  font-weight: 700;

  color: #f18919;

  line-height: 1.4;

}

.sub-copy {

  font-size: 18px;

  line-height: 2;

}

/* ===== セクション骨格：左テキスト / 右ビジュアル ===== */

/* 左のテキスト塊（あなたの既存CSSをそのまま併用） */

/* ===== 右側ビジュアル（厳密サイズで固定） ===== */

/*.visual {

  position: relative;

}



/* メイン写真：そのまま表示（はみ出しなし） */

/*.visual .photo {

  margin: 80px 0 0;

  position: absolute;

  inset: 0;                     /* 親の1140×759いっぱいに */

/*  width: 1140px;

  height: 759px;

  display: block;

  object-fit: cover;

  z-index: 1;	

}*/

.visual {

  /*position: absolute;

  top: 650px;

  left: 600px;*/

  text-align: center;

  margin: -140px 0 auto auto;

  width: 90%;

}

/* 図版：写真の左下にかぶせる（数値は微調整用）

.visual .overlay-graphic {

  position: absolute;

  width: 679px;

  height: 395px;

  left: -200px;                  /* ← 左へ少しはみ出す量（調整ポイント） */

/*  bottom: -600px;                /* ← 下へ少しはみ出す量（調整ポイント） */

/*  z-index: 2;

  pointer-events: none;

} */

/*-----説明部分-----*/

.explanation-box {

  width: 100%;

  display: flex;

  justify-content: space-between;

}

.explanation-img {

  max-width: 567px;

  width: 50%;

  height: 100%;

}

.e-text-box {

  max-width: 500px;

  width: 50%;

  padding-left: 20px;

}

.explanation-title span {

  display: inline-block;

}

.explanation-text {

  font-size: 16px;

  line-height: 2;

  text-align: justify;

}

.explanation-title {

  font-family: 'Shippori Mincho B1', serif;

  font-size: 28px; /* カンプに合わせて調整 */

  font-weight: 700;

  line-height: 1.6;

  color: #f18919;

  margin-top: 0;

}

/*-----機能紹介-----*/

.portal-list {

  display: flex;

  flex-direction: column;

  gap: 24px; /* 各項目の間隔 */

  max-width: 1227px;

}

.portal-item {

  display: flex;

  align-items: flex-start; /* ← 上揃え */

}

.portal-title {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 192px;

  height: 45px;

  font-size: 18px;

  font-weight: bold;

  color: #fff;

  border-radius: 6px;

  margin-right: 16px;

  flex-shrink: 0; /* タイトル部分が縮まないように固定 */

}

.portal-title.orange {

  background-color: #f18919;

}

.portal-title.red {

  background-color: #e25b1e;

}

.portal-text {

  font-size: 16px;

  line-height: 1.6;

  margin: 0;

  text-align: justify;

}

.function-box {

  text-align: center;

}

.function-title {

  font-size: 30px;

  font-weight: 600;

  color: #f18919;

  margin: 0;

}

.function-sub {

  font-size: 12px;

  margin: 0;

}

.introduction {

  /*padding: 48px;*/

}

.introduction-img {

  max-width: 1200px;

  margin: 75px auto 0; /* 上に75px、左右はautoで中央寄せ、下は0 */

  display: block;

  height: auto;

  width: 100%;

  box-sizing: border-box;

}

/* PC版：デフォルト画像 */

.introduction-img {

  max-width: 1200px;

  display: block;

  height: auto;

  width: 100%;

  box-sizing: border-box;

  content: url("../images/introduction-img@2x.png"); /* ← PC用画像 */

  margin: 0 0 80px;

}

/*-----料金体系-----*/

.preparation {

  display: inline-block; /* テキストを四角で囲む */

  padding: 15px 80px; /* 内側の余白 */

  border: 1px solid #000; /* 黒い枠線 */

  font-size: 26px; /* 文字サイズ（調整可） */

  font-weight: bold; /* 強調（任意） */

  background-color: #fff; /* 白背景にして四角を強調（任意） */

  margin-top: 12px; /* 上との余白（調整可） */

  margin-bottom: 0;

}

/*-----お問い合わせ-----*/

#contact {

  /*  position: relative;

  padding: 0 1em;



  color: #fff; /* テキスト色は背景に合わせて調整 */

  /* 背景レイヤー */

  background-image:

    linear-gradient(rgba(41, 171, 226, 0.31), /* #29abe2 を31%の透過 */ rgba(41, 171, 226, 0.31)), url("../images/contact_background@2x.png");

  background-blend-mode: soft-light; /* ← 重ね方をソフトライトに */

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  /*	margin-top: 220px;*/

  padding: 120px 0;

  box-sizing: border-box;

}

/*.contact-title1 {

	font-size: 30px;

	font-weight: 600;

	color: #004d92;

	padding-top: 90px;

}*/

.contact-sub {

  font-size: 12px;

  margin-top: -20px;

  color: #004d92;

}

.contact-box {

  max-width: 1200px;

  width: 100%;

  margin: 0 auto;

  display: flex;

  gap: 2vw;

}

.contact-t {

  text-align: center;

}

.c-title {

  font-size: 30px;

  font-weight: 700;

  color: #004d92;

}

.c-text {

  font-size: 16px;

  color: #004d92;

}

/*.contact-box {

  position: relative;

  padding: 80px 120px;

  display: flex;

  justify-content: center;

  gap: 60px; /* 左右の余白 */

/*}*/

/* 左カラム */

.contact-left {

  width: 50%;

  color: #002f5f; /* 濃い青っぽい文字色（調整可） */

}

.contact-title1 {

  font-size: 32px;

  font-weight: 700;

  /*  margin-bottom: 8px;*/

  text-align: center;

  color: #002f5f;

  margin: 0;

}

.contact-sub {

  font-size: 16px;

  text-align: center;

  margin-top: 8px;

  color: #002f5f;

}

/* ボタンを中央にするラッパー */

.contact-left .btn-wrap {

  text-align: center; /* ← この中だけ中央揃え */

}

/* フォームボタン */

.contact-left .form-btn {

  display: inline-block;

  margin-top: 20px;

  padding: 14px 36px;

  border-radius: 25px;

  background: linear-gradient(90deg, #004d92 0%, #007bce 100%);

  color: #fff;

  font-size: 16px;

  font-weight: 500;

  text-decoration: none;

  text-align: center;

  transition: opacity 0.3s;

}

.contact-left .form-btn:hover {

  opacity: 0.85;

}

/* 右カラム */

.contact-right {

  width: 50%;

  height: auto;

  background-color: #004d92;

  color: #fff;

  padding: 30px;

  box-sizing: border-box;

}

.contact-right .contact-title {

  font-weight: 700;

  margin-top: 12px;

  margin-bottom: 4px;

}

.contact-right .contact-text {

  margin-bottom: 4px;

  font-size: 14px;

  line-height: 1.6;

}

.pharumo {

  font-size: 20px;

  font-weight: 500;

  text-align: center;

  /*padding: 32px 0 0;*/

  margin-bottom: 0.5em;

}

.contact-right {

  /*min-height: 369px;

  background: #004d92;

  color: #fff;

  padding: 8px 32px;

  box-sizing: border-box;*/

  /* ラベル＋本文を揃えるための2列グリッド */

  /*display: grid;

  grid-template-columns: 82px 1fr; */ /* 左：ラベル固定 / 右：本文 */

  /*align-items: start;

  row-gap: 4px;

  column-gap: 14px;*/

}

/* 上段タイトル（ファルモサポートセンター）は全幅 */

.contact-right .pharumo {

  grid-column: 1 / -1;

  font-weight: 700;

  font-size: 18px;

}

/* ラベル（白ベタ＋白枠 82×22px） */

.contact-title {

  width: 82px;

  height: 22px;

  border: 1px solid #fff;

  background: #fff;

  color: #004d92;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 12px;

  font-weight: 700;

  margin: 0;

  line-height: 1;

  border-radius: 3px; /* 角丸不要なら削除 */

}

/* ラベルなし行はグリッド2列分を占有 */

.contact-text.full {

  grid-column: 2 / -1; /* 右列だけに広がる */

  margin: 0;

  font-size: 14px;

  line-height: 1.8;

}

/* Shippori Mincho B1 を指定する部分 */

.explanation-title, .c-title {

  font-family: 'Shippori Mincho B1', serif;

}

/* テーブル基礎：行間の“隙間”を作るために separate + row gap */

.contact-table {

  width: 100%;

  border-collapse: separate;

  border-spacing: 0 8px; /* ← 各行の上下間隔（調整可） */

  border: none;

}

/* 既定の枠や余白を消す */

.contact-table th, .contact-table td {

  border: none;

  padding: 0; /* まずゼロにしてから必要分だけ付ける */

  vertical-align: middle;

}

/* ラベル（白ベタ＋白枠、82×22px） */

.contact-table th {

  width: 82px;

  height: 22px;

  background: #fff;

  border: 1px solid #fff;

  color: #004d92;

  text-align: center;

  font-size: 14px;

  font-weight: 700;

  line-height: 22px; /* 高さと一致させて縦中央 */

  white-space: nowrap; /* 改行させない */

  padding: 0 4px;

}

/* 本文（白文字） */

.contact-table td {

  color: #fff;

  font-size: 14px;

  line-height: 1.6;

  padding-left: 12px; /* ラベルとの間隔 */

}

/* td 内に p が入っている行の余白を整える */

.contact-table td p {

  margin: 0; /* 不要な段落余白を消す */

  line-height: 1.6;

}

/* メールアドレスを折り返したくない場合（任意） */

.contact-table td a, .contact-table td {

  /*word-break: keep-all;*/

}

.spacer-large {

  height: 200px;

}

.spacer {

  height: 200px;

}

footer {

  display: flex; /* 中身を縦に積んで中央寄せ */

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;

  margin: 0 auto;

  padding: 40px 20px; /* 上下余白＋スマホで左右も余白 */

}

.footer-logo {

  max-width: 280px; /* スマホで大きすぎないように制限 */

  height: auto;

  margin: 40px 0;

}

footer small {

  font-size: 12px;

  color: #666;

  line-height: 1.6;

}

.footer-logo2 {

  max-width: 320px;

  height: auto;

  margin: 40px 0 40px 40px;

}







/* —— スマホ時（640px以下） —— */

@media (max-width: 640px) {

  #header nav ul {

    justify-content: center; /* 中央寄せ */

    gap: 16px; /* 間隔を狭める */

  }

  #header nav ul li {

    font-size: 16px; /* 小さめに調整 */

  }

}

/* —— スマホ（～640px）: 縦積みレイアウト —— */

@media (max-width: 640px) {

  .portal-list {

    gap: 16px; /* 項目間は少し広めに */

  }

  .portal-item {

    flex-direction: column; /* タイトル→本文の縦並び */

    align-items: stretch; /* 幅いっぱいに */

  }

  .portal-title {

    width: 100%; /* 横幅いっぱいの帯 */

    height: 46px; /* 指定どおり */

    justify-content: flex-start; /* 左寄せ */

    padding: 0 16px; /* 文字の左右余白 */

    margin-right: 0;

    font-size: 16pt; /* 少し抑えめ */

    border-radius: 6px; /* 角丸は維持（好みで増減可） */

    box-sizing: border-box;

  }

  .portal-text {

    margin-top: 8px; /* 帯と本文の間隔 */

    line-height: 1.7; /* 読みやすく */

  }

}

/* PCデフォルト：横並び */

#header nav ul {

  justify-content: flex-end;

  gap: 32px;

}

/* ===== スマホ版 ===== */

@media (max-width: 768px) {

  #header nav ul {

    flex-direction: column; /* 縦並び */

    gap: 16px;

    background: #fff;

    position: absolute;

    top: 60px; /* ヘッダーの下 */

    right: 20px;

    padding: 20px;

    border: 1px solid #ddd;

    z-index: 999;

  }

  #header nav ul.active {

    display: flex; /* ボタン押下で表示 */

  }

}

/* PCデフォ：右寄せの横並び */

#header nav {

  max-width: 1920px;

  margin: 0 auto;

  height: var(--header-h);

  display: flex;

  align-items: center;

}

#header .nav-list {

  list-style: none;

  display: flex;

  gap: 32px;

  margin: 0;

  padding: 0;

  justify-content: flex-end;

  width: 100%;

  height: 100%;

  overflow-y: auto;

}

#header .nav-list a {

  text-decoration: none;

  color: #000;

  font-size: 27px;

  font-weight: 500;

  transition: color .2s;

}

#header .nav-list a:hover {

  color: #f29319;

}

/* ハンバーガーボタン（PCでは非表示） */

.menu-btn {

  display: none;

  margin-left: auto;

  background: none;

  border: 0;

  cursor: pointer;

}

.menu-btn span {

  display: block;

  width: 26px;

  height: 2px;

  background: #f29319;

  margin: 6px 0;

  transition: transform .25s, opacity .25s;

}

/* ===== スマホ（ドロワー） ===== */

@media (max-width: 768px) {

  /* ボタン表示、デフォの横並びは隠してドロワー化 */

  .menu-btn {

    display: block;

  }

  #header .nav-list {

    position: fixed;

    top: var(--header-h);

    right: 0;

    width: min(78vw, 360px);

    height: calc(100dvh - var(--header-h));

    background: #fff;

    /*box-shadow: -12px 0 24px rgba(0, 0, 0, .15);*/

    margin: 0;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    transform: translateX(100%); /* ← 初期は画面外 */

    transition: transform .3s ease;

    z-index: 1001; /* ヘッダーより上 */

  }

  /* オープン時 */

  body.nav-open #header .nav-list {

    transform: translateX(0);

  }

  /* バックドロップ */

  .drawer-backdrop {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .32);

    opacity: 0;

    transition: opacity .25s;

    z-index: 1000;

  }

  body.nav-open .drawer-backdrop {

    opacity: 1;

  }

  body.nav-open .drawer-backdrop[hidden] {

    display: block;

  } /* hidden解除のため */

  /* ボタンを “X” にアニメーション（任意） */

  body.nav-open .menu-btn span:nth-child(1) {

    transform: translateY(8px) rotate(45deg);

  }

  body.nav-open .menu-btn span:nth-child(2) {

    opacity: 0;

  }

  body.nav-open .menu-btn span:nth-child(3) {

    transform: translateY(-8px) rotate(-45deg);

  }

  /* SPではリンク文字少し大きめもアリ */

  #header .nav-list a {

    font-size: 16px;

    color: #000;

  }

}

@media (max-width: 768px) {

  #header .nav-list {

    position: fixed;

    top: var(--header-h);

    right: 0;

    width: min(78vw, 360px);

    height: 65%;                 /* ← 修正！ */

    background: #fff;

    margin: 0;

    padding: 20px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    transform: translateX(100%);

    transition: transform .3s ease;

    z-index: 1001;

  }

}



/* ===== スマホ版（縦並び＆中央寄せ） ===== */

@media (max-width: 768px) {

  /* セクション全体：縦レイアウトに */

  #top {

    display: block; /* grid等を無効化（指定があれば上書き） */

    /*padding: 0 20px;*/ /* 横余白を縮める */

  }

  /* テキスト塊は幅可変＆中央寄せ */

  .text-block {

    width: auto;

    max-width: 680px;

    margin: 0 auto;

    text-align: left;

  }

  .head-copy {

    margin: 24px auto 12px;

    font-size: 15px;

    text-align: center;

  }

  .logo.top {

    width: min(280px, 55vw);

    height: auto;

    margin: auto;

    display: block;

  }

  .main-copy {

    text-align: center;

    margin: 28px 0 20px;

    font-size: clamp(28px, 9vw, 40px);

    line-height: 1.15;

  }

  .sub-copy {

    font-size: 13px;

    line-height: 1.9;

    margin-bottom: 16px;

    text-align: center;

  }

  /* 画像側：はみ出し防止の“安全設計” */

  /*.visual{

    position: relative;      

   margin-top: 250px;

  }*/

  /* ★ PCの絶対配置を解除してブロック中央に */

  /*  .visual .overlay-graphic{

    position: static;        

  display: block;

    width: min(88vw, 360px); 

   height: auto;

    margin: 8px auto 24px;   

 z-index: 1;              

  }*/

  /* もし .photo を使うケースがあれば念のため縮小ルール */

  /*  .visual .photo{

    position: static;       

 width: 100%;

    height: auto;

    margin-top: 16px;

  }*/

}

/* スマホ版（768px以下） */

@media (max-width: 768px) {

  main {

    width: 100%;

    height: 100%;

    background-image: url("../images/nb-main-vis_sp.webp");

    background-size: 100%;

    background-repeat: no-repeat;

  }

  /* トップセクションのレイアウトも縦並びに */

  #top {

    display: block; /* grid解除 */

    /*padding: 0 20px;*/ /* 横余白を縮小 */

  }

}

/* PC版のまま（横並び2カラム）で使っている想定 */

/* スマホ版で縦並びに変換 */

@media (max-width: 768px) {

  #explanation {

    /*padding: 40px 20px;*/

    box-sizing: border-box;

  }

  .explanation-box {

    display: flex;

    flex-direction: column; /* 横並び→縦並び */

    align-items: center; /* 中央寄せ */

    text-align: left; /* テキストは左揃え（中央にしたい場合はcenterへ変更） */

    padding: 0;

  }

  .explanation-img {

    width: 100%; /* 横幅いっぱい */

    max-width: 480px; /* 画像が大きすぎないよう制限 */

    height: auto;

    margin-bottom: 24px; /* 下に余白 */

    margin-top: 24px;

  }

  .e-text-box {

    max-width: 100%;

    /*margin: 0 1em;*/

    width: 100%;

    padding-left: 0px;

  }

  .explanation-title {

    font-size: clamp(20px, 5vw, 26px); /* 可変フォントサイズ */

    line-height: 1.4;

    margin-bottom: 16px;

  }

  .explanation-text {

    font-size: 15px;

    line-height: 1.8;

  }

}

/* スマホ版（768px以下）：専用画像に切替＋両端1em余白 */

@media (max-width: 768px) {

  .introduction-img {

    content: url("../images/sp_introduction-img@2x.png"); /* ← SP用画像 */

    /*width: calc(100% - 2em);*/ /* 両端に1emずつ余白を作る */

    margin: 24px auto 0; /* 中央寄せ */

    display: block;

    max-width: 400px;

  }

  .portal-list {

    max-width: none;

    width: 100%;

    margin: 32px 0 0;

    gap: 20px;

    padding: 0;

  }

  .portal-item {

    flex-direction: column;

    align-items: stretch;

  }

}

/* ===== contact セクション：スマホ版（～768px） ===== */

@media (max-width: 768px) {

  #contact {

    padding: 48px 0; /* 両端1emでOK */

    /*margin-top: 120px;*/ /* 上の空き少し詰める */

    background-size: cover;

    background-position: center;

  }

  .contact-t {

    margin-top: 0;

  }

  .contact-title1 {

    font-size: 30px; /* 30→24 */

    padding-top: 0;

  }

  .contact-sub {

    font-size: 12px;

    margin-top: 6px;

  }

  /* 2カラム→縦並び */

  .contact-box {

    max-width: 100%;

    padding: 24px 0;

    flex-direction: column;

    gap: 24px;

  }

  /* 左カラム */

  .contact-left {

    width: 100%;

    color: #002f5f;

  }

  .c-title {

    font-size: 18px; /* 30→18 */

    line-height: 1.6;

  }

  .c-text {

    font-size: 14px;

    line-height: 1.8;

  }

  .btn-wrap {

    text-align: center;

  }

  .form-btn {

    padding: 12px 28px;

    font-size: 15px;

    border-radius: 24px;

  }

  /* 右の青BOX：grid解除→blockに（テーブル優先） */

  .contact-right {

    width: 100%;

    /*max-width: 540px;*/

    margin: 0 auto;

    padding: 20px;

    display: block; /* ★ ここで grid を無効化 */

    border-radius: 8px; /* 角丸は任意 */

  }

  .pharumo {

    font-size: 16px;

    font-weight: 600;

    text-align: center;

    padding: 8px 0 12px;

  }

  /* テーブル：スマホ向けに詰める */

  .contact-table {

    width: 100%;

    border-spacing: 0 6px; /* 行間少し狭める */

  }

  .contact-table th {

    width: 82px;

    height: 22px; /* ラベル固定サイズ維持 */

    font-size: 12px;

    line-height: 22px;

  }

  .contact-table td {

    font-size: 14px;

    line-height: 1.6;

    padding-left: 10px;

    word-break: break-word; /* メール等のはみ出し防止 */

  }

  .contact-table td p {

    margin: 0;

    line-height: 1.6;

  }

}

@media (max-width: 1400px) {

  .main-copy {

    font-size: 65px;

  }

  .visual {

    margin: -17vw 0 auto auto;

  }

  .photo-wrap {

    margin: 0 0 auto auto;

  }

}

@media (max-width: 1200px) {

  .main-copy {

    font-size: 50px;

  }

  .logo.top {

    width: 25vw;

    /*min-width: 250px;*/

  }

  main {

    background-size: 1200px;

    overflow: hidden;

  }

  .head-copy {

    font-size: 18px;

  }

  .sub-copy {

    font-size: 16px;

    line-height: 2;

  }

  .visual {

    margin: -10vw 0 auto auto;

  }

}

@media (max-width: 1000px) {

  #header .nav-list a {

    font-size: 20px;

  }

  .visual {

    display: none;

  }

  main {

    background-image: url(../images/nb-main-vis_sp.webp);

    background-size: 100%;

  }

  .text-block {

    width: auto;

    max-width: 680px;

    margin: 0 auto;

    text-align: left;

    padding-left: 0;

  }

  .head-copy {

    margin: 24px auto 12px;

    font-size: 15px;

    text-align: center;

  }

  .logo.top {

    width: min(280px, 55vw);

    height: auto;

    margin: auto;

    display: block;

  }

  .main-copy {

    text-align: center;

    margin: 28px 0 20px;

    font-size: clamp(28px, 9vw, 67px);

    line-height: 1.25;

  }

  .sub-copy {

    font-size: 13px;

    line-height: 1.9;

    margin-bottom: 16px;

    text-align: center;

  }

  .spacer-large {

    height: 100vw;

  }

}

@media (max-width: 768px) {

  .footer-logo {

    max-width: 200px;

    margin: 20px 0;

  }

  .footer-logo2{

    max-width: 220px;

    margin: 20px 0 20px 20px;

  }

  footer small {

    font-size: 11px;

  }

  .function-box {

    /*margin-top: 80px;*/

  }

  #introduction {

    /*padding: 16px;*/

    box-sizing: border-box;

  }

  .spacer {

    height: 130px;

  }

  .spacer-large {

    height: 700px;

  }

  .inner {

    padding: 0 1.5em;

  }

  .visual {

    display: none;

  }

  main {

    background-size: 770px;

    background-position-x: center;

  }

  .main-copy {

    text-align: center;

    margin: 15px 0 10px;

    line-height: 1.25;

  }

}

@media (max-width: 500px) {

  main {

    background-size: 500px;

    background-position-y: 3%;

  }

  .spacer-large {

    height: 500px;

  }

.modoru-btn{width:50px;}

}