@charset "utf-8";


/*keyframes.cssの読み込み
---------------------------------------------------------------------------*/
@import url("keyframes.css");


/*全端末（PC・タブレット・スマホ）共通設定
---------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
body {
	margin: 0px;
	padding: 0px;
	color: #666;	/*全体の文字色*/
	font-family: "Noto Sans JP", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.3;		/*行間*/
	background: #fff url(../images/bg.jpg) no-repeat center top / 100%;	/*背景色、背景画像の読み込み*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;}
ul {list-style-type: none;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
video {max-width: 100%;}
iframe {width: 100%;}

/*body class="bg2"にした場合の背景画像。about.htmlの上部背景に適用されています。*/
body.bg2 {
	background-image: url(../images/bg2.jpg);
}
body.bg111 {
	background-image: url(../images/bg111.jpg);
}


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: #666;		/*リンクテキストの色*/
	transition: 0.5s;	/*マウスオン時の移り変わるまでの時間設定。0.5秒。*/
}
a:hover {
	color: #a7946f;			/*マウスオン時の文字色*/
	text-decoration: none;	/*マウスオン時に下線を消す設定。残したいならこの１行削除。*/
}

/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	padding: 3%;	/*ブロック内の余白*/
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック。ロゴとメニューブロックです。*/
header {
	overflow: auto;height: 100%;
	float: left;	/*左に回り込み*/
	width: 18%;		/*幅*/
	padding: 1% 2%;	/*h2がスイングするので、若干の左右の余白を作っておきます*/
	position: fixed;	/*スクロールしても固定表示させる指定*/
	top: 3%;		/*上からの配置場所指定*/
	left: 1%;		/*左からの配置場所指定*/
}
/*ロゴ画像（Peace & Piece）*/
header #logo img {
	width: 35%;	/*幅*/
	position: absolute;z-index: 1;
	left: 10%;	/*左からの配置場所指定*/
	top: 0px;	/*上からの配置場所指定*/
	border-radius: 50%;	/*丸くする指定*/
}
/*h2タグ設定（ロゴの下に重なった左右にスイングする見出し）*/
header h2 {
	animation-name: rotate1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 8S;		/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-iteration-count: infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-timing-function: linear;		/*アニメーションのパターン。速度を一定に変化させる指定。*/
	background: url(../images/menu1.png) no-repeat center center / 100% 100%;	/*背景画像の読み込み*/
	width: 100%;
	text-align: center;		/*文字をセンタリング*/
	color: #fff;			/*文字色*/
	font-size: 24px;		/*文字サイズ*/
	padding: 30% 0;			/*上下、左右への余白*/
	margin: 20px 0px;		/*上下、左右へのタグの外側へとる余白。ロゴや下のメニューとの余白バランスをとって下さい。*/
}
/*h2タグ内の小文字*/
header h2 span {
	display: block;
	font-size: 13px;	/*文字サイズ*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*メニューブロック全体*/
#menubar {
	font-size: 25px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
	margin-top: 130px;
}
/*メニュー１個あたりの設定*/
#menubar a {
	text-decoration: none;display: block;
	padding: 10px 0;	/*上下、左右へのメニュー内の余白*/
	border-radius: 10px;	/*角丸の指定*/
	margin-bottom: 10px;	/*メニュー間の余白*/
}
/*小文字の指定*/
#menubar li span:last-child {
	display: block;
	font-size: 12px;	/*文字サイズ*/
	color: #a7946f;		/*文字色*/
}
/*マウスオン時*/
#menubar a:hover {
	background: #fff;
}
/*スマホ用メニューを表示させない*/
#menubar-s {display: none;text-indent: -9999px;}
/*３本バーアイコンを表示させない*/
#menubar_hdr {display: none;}

/*facebookやtwitterなどのアイコン
---------------------------------------------------------------------------*/
/*アイコン全体を囲むブロック*/
ul.icon {
	text-align: center;
}
/*アイコン１個あたりの設定*/
ul.icon li {
	display: inline-block;	/*横並びにさせる指定*/
}
/*アイコン画像の設定*/
ul.icon img {
	width: 45px;		/*画像の幅*/
}
ul.icon img:hover {
	opacity: 0.8;
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
/*mainブロック*/
#main {
	float: right;		/*右に回り込み*/
	width: 76%;			/*幅*/
	padding: 230px 0px 50px;	/*上、左右、下へのブロック内の余白*/
	animation-name: opa2;		/*keyframes.cssで使う@keyframesの指定*/
	animation-fill-mode: both;
	animation-duration: 0.8S;	/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-delay: 0.8s;		/*出現するタイミング（秒後）*/
	position: relative;
}
/*メインコンテンツのh2タグ設定*/
#main h2 {
	clear: both;
	color: #b4a078;
	/*文字色*/
	margin-bottom: 40px;	/*見出しの下に空けるスペース*/
	padding: 10px 20px 30px;	/*上、左右、下へのタグ内の余白*/
	font-size: 30px;		/*文字サイズ*/
	font-weight: 500;	/*文字太さ*/
	background: url(../images/line1.png) repeat-x left bottom / 300px;	/*下線の画像の読み込み*/
	text-align: center;	/*テキストをセンタリング*/
}
/*メインコンテンツのh3タグ設定*/
#main h3 {
	clear: both;
	color: #8a7a5a;	/*文字色*/
	padding-left: 50px;		/*左側にあける余白*/
	margin-bottom: 20px;	/*見出しの下に空けるスペース*/
	font-size: 30px;		/*文字サイズ*/
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 5px 5px 15px;	/*上、左右、下への余白*/
}
/*他。微調整。*/
#main p + p {
	margin-top: -5px;
}
#main h2 + p,
#main h3 + p {
	margin-top: 10px;
}
#main section + section {
	margin-top: 50px;
}

/*listブロック（menu.html メニューページで使っています）
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
#main .list {
	overflow: hidden;position: relative;
	float: left;	/*左に回り込み*/
	width: 30%;		/*幅*/
	margin-left: 2%;
	margin-bottom: 30px;
	font-size: 10px;	/*文字サイズ*/
	text-align: center;	/*文字をセンタリング*/
}
/*画像*/
#main .list figure {
	border-radius: 50%;	/*円形にする。角丸四角形にしたいなら、ここを20pxなどにしてみる。角が尖った正方形にしたいなら、この１行を削除する。*/
	overflow: hidden;
	margin-bottom: 10px;
}
/*h4タグ*/
#main .list h4 {
	font-size: 13px;	/*文字サイズ*/
	height: 2em;		/*高さ１行分。冒頭のbody内のline-heightで「2」と指定しているので、この行の2emというのは１文字の高さの事になります。２行表示にしたいならこの行を「4em」にして下さい。*/
	overflow: hidden;	/*上のheightを超えた文字は非表示にする指定*/
}
/*段落タグ*/
#main .list p {
	padding: 0;
	height: 2em;		/*高さ１行分。上のh4と同じ内容の設定です。*/
	overflow: hidden;	/*これもh4と同じです。*/
}
/*左上に配置している価格*/
#main .list p.price {
	text-align: center;
	position: absolute;
	left: 0px;	/*listブロックに対しての左からの配置場所指定*/
	top: 0px;	/*listブロックに対しての上からの配置場所指定*/
	background: #fffdea;	/*背景色*/
	color: #a7946f;		/*文字色*/
	width: 60px;		/*幅*/
	height: 60px;		/*高さ*/
	line-height: 60px;	/*行間*/
	border-radius: 50%;	/*円形にする指定*/
}

/* =========================================================
   Aboutページ
   セクション見出し
   Peace & Piece
   ========================================================= */


/* ---------------------------------------------------------
   共通設定
   --------------------------------------------------------- */

.about-section-title {
  position: relative;

  width: 100%;
  max-width: 100%;

  margin: 0 auto 60px !important;
  padding: 0 0 20px !important;

  box-sizing: border-box;

  text-align: center !important;
  text-indent: 0 !important;

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

  /* PC */
  font-size: 34px;

  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.08em;

  color: #202020;
}


/* ---------------------------------------------------------
   既存テンプレートの影響をリセット
   --------------------------------------------------------- */

.about-section-title span {
  display: inline-block !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  text-align: center !important;

  box-sizing: border-box;
}


.about-section-title span b {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  font-weight: 500;

  color: #202020;
}


/* ---------------------------------------------------------
   英語タイトル
   --------------------------------------------------------- */

.about-section-title::before {
  display: block;

  margin: 0 0 11px;

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

  /* PC */
  font-size: 13px;

  font-weight: 500;
  line-height: 1.4;

  letter-spacing: 0.28em;

  color: #777;

  text-align: center;
}


/* ---------------------------------------------------------
   Peace & Piece とは
   --------------------------------------------------------- */

.about-school-title::before {
  content: "ABOUT THE SCHOOL";
}


/* ---------------------------------------------------------
   代表挨拶
   --------------------------------------------------------- */

.about-message-title::before {
  content: "MESSAGE";
}


/* ---------------------------------------------------------
   下の細いライン
   --------------------------------------------------------- */

.about-section-title::after {
  content: "";

  display: block;

  width: 48px;
  height: 1px;

  margin: 18px auto 0;

  background: #9b9b9b;
}


/* =========================================================
   代表挨拶
   ========================================================= */

.message-letter .about-message-title {
  margin-bottom: 55px !important;
}


/* =========================================================
   タブレット
   1100px以下
   ========================================================= */

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

  .about-section-title {
    margin-bottom: 52px !important;

    padding-bottom: 18px !important;

    /* タブレット */
    font-size: 31px;

    letter-spacing: 0.075em;
  }


  .about-section-title::before {
    margin-bottom: 10px;

    font-size: 12px;

    letter-spacing: 0.25em;
  }


  .about-section-title::after {
    width: 45px;

    margin-top: 17px;
  }


  .message-letter .about-message-title {
    margin-bottom: 48px !important;
  }

}


/* =========================================================
   スマートフォン
   768px以下
   ========================================================= */

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

  .about-section-title {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    margin-bottom: 44px !important;

    /*
      スマホでは左右にしっかり余白を確保
    */
    padding-left: 28px !important;
    padding-right: 28px !important;

    padding-bottom: 16px !important;

    box-sizing: border-box;

    /* スマホ */
    font-size: 25px;

    line-height: 1.6;

    letter-spacing: 0.06em;
  }


  .about-section-title::before {
    margin-bottom: 8px;

    font-size: 10px;

    letter-spacing: 0.21em;
  }


  .about-section-title::after {
    width: 36px;

    margin-top: 14px;
  }


  .message-letter .about-message-title {
    margin-bottom: 42px !important;
  }

}


/* =========================================================
   小型スマートフォン
   480px以下
   ========================================================= */

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

  .about-section-title {
    margin-bottom: 38px !important;

    /*
      小型スマホはさらに左右に余白
    */
    padding-left: 24px !important;
    padding-right: 24px !important;

    padding-bottom: 14px !important;

    /* 小型スマホ */
    font-size: 23px;

    line-height: 1.55;

    letter-spacing: 0.05em;
  }


  .about-section-title::before {
    margin-bottom: 7px;

    font-size: 9px;

    letter-spacing: 0.17em;
  }


  .about-section-title::after {
    width: 32px;

    margin-top: 12px;
  }


  .message-letter .about-message-title {
    margin-bottom: 36px !important;
  }

}

/* ===================================
   PDF資料閲覧ページ（bg2統一）
=================================== */

/* ===== ページフェード ===== */
.fade-page {
  animation: pageFade 0.8s ease;
}

@keyframes pageFade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== グラスモーフィズム本体 ===== */
.glass-box {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.15) 100%
  );
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-radius: 28px;
  box-shadow:
    0 30px 60px rgba(0,0,0,0.08),
    0 10px 25px rgba(0,0,0,0.05);
  padding: 60px 50px;
  max-width: 1100px;
  margin: 80px auto;
}

/* ===== 見出し ===== */
.glass-box h2 {
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: 0.05em;
}

/* ===== 一覧カード ===== */
.materials-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.material-card {
  padding: 22px 28px;
  border-radius: 18px;
  background: rgba(255,255,255,0.4);
  text-decoration: none;
  color: #222;
  font-size: 1.5rem;
  transition: all 0.35s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.material-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.65);
  box-shadow: 0 18px 35px rgba(0,0,0,0.08);
}

/* ===== PDF表示エリア ===== */
.pdf-area {
  display: none;
  animation: fadeInPDF 0.8s ease forwards;
}

@keyframes fadeInPDF {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* iframe */
.pdf-wrapper iframe {
  width: 100%;
  height: 78vh;
  border: none;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* 注意文 */
.pdf-area p {
  margin-top: 25px;
  font-size: 0.9rem;
  color: #555;
  text-align: center;
}

/* ===== 戻るボタン ===== */
.btn-back {
  display: inline-block;
  margin-top: 35px;
  margin-right: 15px;
  padding: 13px 28px;
  border-radius: 40px;
  background: rgba(255,255,255,0.5);
  color: #222;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}

.btn-back:hover {
  background: rgba(255,255,255,0.8);
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

/* ===== スマホ最適化 ===== */
@media screen and (max-width: 768px) {

  .glass-box {
    padding: 40px 20px;
    margin: 50px 15px;
  }

  .materials-list {
    gap: 18px;
  }

  .material-card {
    font-size: 1.2rem;
    padding: 18px 20px;
  }

  .pdf-wrapper iframe {
    height: 65vh;
  }

  .btn-back {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 20px auto 0;
    text-align: center;
  }
}

/* =========================================================
   アクセスページ：テーブル
   ========================================================= */


/* ---------------------------------------------------------
   テーブル１行目に入った見出し部分（caption）
   --------------------------------------------------------- */

.ta1 caption {
	border-top: 1px solid #999;
	font-weight: bold;
	padding: 20px 10px;
	background: #fff;
}

/* アクセスページのロゴ画像：PC */
.ta1 caption img {
	width: 30%;
	height: auto;
	transform: translateX(-20px);
}


/* ---------------------------------------------------------
   テーブル途中に見出しを使いたい場合
   --------------------------------------------------------- */

.ta1 .tamidashi {
	width: auto;
	background: #fff;
	text-align: left;
}


/* ---------------------------------------------------------
   ta1テーブル全体
   --------------------------------------------------------- */

.ta1 {
	border-top: 1px solid #999;
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 30px;
}

.ta1,
.ta1 td,
.ta1 th {
	border-bottom: 1px solid #999;
	padding: 20px 15px;
	word-break: break-word;
	font-size: 20px;
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   ta1 左側ボックス
   --------------------------------------------------------- */

.ta1 th {
	width: 140px;
	text-align: center;
	font-size: 20px;
}


/* ---------------------------------------------------------
   テーブルのフォント設定
   --------------------------------------------------------- */

.ta1 td.font-small {
	font-size: 16px;
}

.ta1 td.font-normal {
	font-size: 20px;
}

.ta1 td.font-large {
	font-size: 24px;
}

.ta1 td.font-xlarge {
	font-size: 28px;
}


/* ---------------------------------------------------------
   太さ
   --------------------------------------------------------- */

.bold {
	font-weight: 700;
}


/* ---------------------------------------------------------
   電話番号
   --------------------------------------------------------- */

.ta1 td.tel-font {
	font-family: "Helvetica", "Arial", sans-serif;
	font-size: 35px;
	font-weight: 700;
	padding-left: 30px;
	line-height: 1.3;
}


/* ---------------------------------------------------------
   郵便番号
   --------------------------------------------------------- */

.ta1 td.zip-font {
	font-size: 25px;
	font-weight: 600;
	padding-left: 30px;
	line-height: 1.5;
}


/* ---------------------------------------------------------
   住所
   --------------------------------------------------------- */

.ta1 td.address-font {
	font-size: 21px;
	font-weight: 600;
	line-height: 1.5;
	padding-left: 30px;
}


/* ---------------------------------------------------------
   電話リンク共通
   --------------------------------------------------------- */

.tel-link {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
	cursor: default;
}


/* スマホだけ電話リンクを有効化 */
@media screen and (max-width: 768px) {

	.tel-link {
		pointer-events: auto;
		cursor: pointer;
	}

}


/* ---------------------------------------------------------
   応対時間
   --------------------------------------------------------- */

.tel-note {
	display: inline-block;
	font-size: 14px;
	font-weight: normal;
	margin-left: 10px;
	color: #666;
	white-space: nowrap;
}


/* ---------------------------------------------------------
   Ｅメール
   --------------------------------------------------------- */

.ta1 td.email-font {
	font-family: "Helvetica", "Arial", sans-serif;
	font-size: 25px;
	font-weight: 700;
	line-height: 1.5;
	padding-left: 30px;
	word-break: break-all;
}


/* ---------------------------------------------------------
   アクセス全体
   --------------------------------------------------------- */

.ta1 td.access-font {
	font-size: 20px;
	line-height: 1.8;
	padding-left: 15px;
}


/* ---------------------------------------------------------
   各交通手段ブロック
   --------------------------------------------------------- */

.access-block {
	margin-bottom: 25px;
}

.access-block:last-child {
	margin-bottom: 0;
}


/* 【電車】【バス】などの見出し */

.access-title {
	font-weight: 700;
	margin-top: 20px;
	margin-bottom: 15px;
}


/* 説明文 */

.access-block p {
	margin-top: 0;
	margin-bottom: 10px;
	padding-left: 15px;
}


/* =========================================================
   タブレット
   769px ～ 1100px
   ========================================================= */

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

	/* テーブル全体 */
	.ta1,
	.ta1 td,
	.ta1 th {
		font-size: 18px;
		padding: 18px 12px;
	}

	/* 左側 */
	.ta1 th {
		width: 120px;
		font-size: 18px;
	}

	/* ロゴ */
	.ta1 caption img {
		width: 40%;
	}

	/* 郵便番号 */
	.ta1 td.zip-font {
		font-size: 22px;
	}

	/* 住所 */
	.ta1 td.address-font {
		font-size: 19px;
	}

	/* 電話 */
	.ta1 td.tel-font {
		font-size: 30px;
		padding-left: 20px;
	}

	/* Eメール */
	.ta1 td.email-font {
		font-size: 21px;
		padding-left: 20px;
	}

	/* アクセス */
	.ta1 td.access-font {
		font-size: 18px;
		line-height: 1.7;
	}

	/* 応対時間 */
	.tel-note {
		font-size: 13px;
	}

}


/* =========================================================
   スマートフォン
   768px以下
   ========================================================= */

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

	/* -----------------------------------------------------
	   テーブル基本文字
	   ----------------------------------------------------- */

	.ta1,
	.ta1 td,
	.ta1 th {
		font-size: 15px;
		padding: 14px 8px;
		line-height: 1.7;
	}

	/* -----------------------------------------------------
	   左側の項目
	   ----------------------------------------------------- */

	.ta1 th {
		width: 80px;
		font-size: 14px;
		padding: 14px 5px;
		word-break: keep-all;
	}

	/* -----------------------------------------------------
	   ロゴ
	   ----------------------------------------------------- */

	.ta1 caption {
		padding: 15px 5px;
	}

	.ta1 caption img {
		width: 60%;
		transform: translateX(-10px);
	}

	/* -----------------------------------------------------
	   郵便番号
	   ----------------------------------------------------- */

	.ta1 td.zip-font {
		font-size: 18px;
		padding-left: 12px;
		line-height: 1.5;
	}

	/* -----------------------------------------------------
	   住所
	   ----------------------------------------------------- */

	.ta1 td.address-font {
		font-size: 16px;
		padding-left: 12px;
		line-height: 1.6;
	}

	/* -----------------------------------------------------
	   電話番号
	   ----------------------------------------------------- */

	.ta1 td.tel-font {
		font-size: 24px;
		padding-left: 12px;
		line-height: 1.3;
	}

	/* -----------------------------------------------------
	   応対時間
	   ----------------------------------------------------- */

	.tel-note {
		display: block;
		margin-left: 0;
		margin-top: 6px;
		font-size: 12px;
		line-height: 1.4;
		white-space: normal;
	}

	/* -----------------------------------------------------
	   Ｅメール
	   ----------------------------------------------------- */

	.ta1 td.email-font {
		font-size: 16px;
		padding-left: 12px;
		line-height: 1.5;
		word-break: break-all;
	}

	/* -----------------------------------------------------
	   アクセス
	   ----------------------------------------------------- */

	.ta1 td.access-font {
		font-size: 14px;
		line-height: 1.7;
		padding-left: 8px;
		white-space: normal;
	}

	/* 【電車】【バス】など */
	.access-title {
		margin-top: 12px;
		margin-bottom: 8px;
		font-size: 20px;
	}

	/* 説明文 */
	.access-block p {
		margin-bottom: 7px;
		padding-left: 1em;
	}

	/* 各ブロック */
	.access-block {
		margin-bottom: 18px;
	}

}


/* =========================================================
   小型スマートフォン
   480px以下
   ========================================================= */

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

	/* -----------------------------------------------------
	   テーブル基本文字
	   ----------------------------------------------------- */

	.ta1,
	.ta1 td,
	.ta1 th {
		font-size: 14px;
		padding: 12px 6px;
	}

	/* -----------------------------------------------------
	   左側
	   ----------------------------------------------------- */

	.ta1 th {
		width: 70px;
		font-size: 13px;
		padding: 12px 4px;
	}

	/* -----------------------------------------------------
	   ロゴ
	   ----------------------------------------------------- */

	.ta1 caption img {
		width: 65%;
		transform: translateX(-5px);
	}

	/* -----------------------------------------------------
	   郵便番号
	   ----------------------------------------------------- */

	.ta1 td.zip-font {
		font-size: 17px;
		padding-left: 8px;
	}

	/* -----------------------------------------------------
	   住所
	   ----------------------------------------------------- */

	.ta1 td.address-font {
		font-size: 15px;
		padding-left: 8px;
		line-height: 1.55;
	}

	/* -----------------------------------------------------
	   電話
	   ----------------------------------------------------- */

	.ta1 td.tel-font {
		font-size: 21px;
		padding-left: 8px;
	}

	/* -----------------------------------------------------
	   Eメール
	   ----------------------------------------------------- */

	.ta1 td.email-font {
		font-size: 14px;
		padding-left: 8px;
	}

	/* -----------------------------------------------------
	   アクセス
	   ----------------------------------------------------- */

	.ta1 td.access-font {
		font-size: 14px;
		line-height: 1.65;
		padding-left: 5px;
	}

	.access-title {
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: 7px;
	}

	.access-block p {
		padding-left: 0.8em;
	}

}

/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*デフォルトでは非表示に*/
body .nav-fix-pos-pagetop a {display: none;}
/*ボタンの設定*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;position: fixed;
	width: 100px;		/*幅*/
	bottom: 30px;		/*下からの配置場所指定*/
	right: 1%;			/*右からの配置場所指定*/
	animation-name: opa1;	/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;		/*アニメーションの実行時間*/
	animation-fill-mode: forwards;	/*アニメーションの完了後、最後のキーフレームを維持する*/
}
/*通常時の透明度。70%色を出す。*/
body.is-fixed-pagetop .nav-fix-pos-pagetop img {
	opacity: 0.7;
}
/*マウスオン時の透明度。100%色を出す。*/
body.is-fixed-pagetop .nav-fix-pos-pagetop img:hover {
	opacity: 1;
}


/*スマホ画面（幅768px以下)の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:768px){

/*全体の設定
---------------------------------------------------------------------------*/
body {
	font-size: 13px;
}

/*ヘッダー
---------------------------------------------------------------------------*/
/*ヘッダーブロック。ロゴとメニューブロックです。*/
header {
	float: none;
	position: static;
	height: auto;
}
/*ロゴ画像（Peace & Piece）*/
header #logo img {
	width: 80px;	/*幅*/
	top: 20px;		/*上からの配置場所指定*/
	left: 20px;		/*左からの配置場所指定*/
	transform: rotate(-15deg);	/*マイナス15度回転する*/
}
/*h2タグ設定（ロゴの下に重なった左右にスイングする見出し）*/
header h2 {
	position: absolute;
	top: 0px;			/*上からの配置場所指定*/
	left: 60px;			/*左からの配置場所指定*/
	width: 200px;		/*幅*/
	padding: 10% 0;		/*上下、左右へのの余白*/
}

/*mainコンテンツ
---------------------------------------------------------------------------*/
#main {
	float: none;
	width: auto;
	padding-top: 45%;	/*上のブロック内の余白の再設定*/
}
/*メインコンテンツのh2タグ設定*/
#main h2 {
	font-size: 25px;		/*文字サイズ*/
}
/*メインコンテンツのh3タグ設定*/
#main h3 {
	font-size: 28px;		/*文字サイズ*/
}
/*mainコンテンツの段落タグ設定*/
#main p {
	padding: 10px 0px 10px;	/*上、左右、下への余白*/
}

/*メインメニュー
---------------------------------------------------------------------------*/
/*スマホ用メニューブロック*/
#menubar-s {
	display: block;text-indent: inherit;
	animation-name: opa1;		/*keyframes.cssで使う@keyframesの指定*/
	animation-duration: 1S;		/*アニメーションの実行時間*/
	animation-fill-mode: both;	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	background: rgba(0,0,0,0.85);	/*背景色。0,0,0は黒の事で、0.85は色が85%出た状態の事。*/
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;
	top: 0px;
	width: 100%;		/*幅。上のpaddingと合わせて100%になるように。*/
	height: 100%;	/*高さ。上のpaddingと合わせて100%になるように。*/
	text-align: center;	/*テキストをセンタリング*/
	font-size: 20px;
}
#menubar-s > ul {
	margin-top: 50100px;	/*メニューの上側にあける余白*/
}
/*メニュー１個あたりの設定*/
#menubar-s li a {
	text-decoration: none;display: block;
	color: #fff;
	padding-bottom: 30px;
}
/*小文字の指定（最後のspanタグ）*/
#menubar-s li span:last-child {
	display: block;
	font-size: 11px;	/*文字サイズ*/
}
/*PC用メニューを非表示にする*/
#menubar {display: none;}

/*３本バーアイコン設定
---------------------------------------------------------------------------*/
/*３本バーブロック*/
#menubar_hdr {
	display: block;
	position: fixed;
	z-index: 100;
	top: 20px;	/*上からの配置場所指定*/
	right: 3%;	/*右からの配置場所指定*/
	border: 1px solid #fff;	/*枠線の幅、線種、色*/
}
/*アイコン共通設定*/
#menubar_hdr.close,
#menubar_hdr.open {
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	border-radius: 50%;
}
/*三本バーアイコン*/
#menubar_hdr.close {
	background: #a7946f url(../images/icon_menu.png) no-repeat center top/50px;
}
/*閉じるアイコン*/
#menubar_hdr.open {
	background: #a7946f url(../images/icon_menu.png) no-repeat center bottom/50px;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル内の余白の変更*/
.ta1 caption,
.ta1, .ta1 td, .ta1 th {
	padding: 5px;
}
/*ta1の左側ボックス*/
.ta1 th {
	width: 100px;
}

/*ul.disc,olタグ
---------------------------------------------------------------------------*/
ul.disc {
	padding: 0 0px 20px 25px;
}
ol {
	padding: 0 0px 20px 25px;
}

/*その他
---------------------------------------------------------------------------*/
.ws {width: 96%;}
.big1 {font-size: 18px;letter-spacing: normal;}

}

/*スマホ画面（幅768px以下）の設定
---------------------------------------------------------------------------*/
@media screen and (max-width:768px){

/*ヘッダー
---------------------------------------------------------------------------*/
/*h2タグ設定（ロゴの下に重なった左右にスイングする見出し）*/
header h2 {
	font-size: 18px;		/*文字サイズ*/
}

/*listブロック（menu.html メニューページで使っています）
---------------------------------------------------------------------------*/
/*ブロック１個あたりの設定*/
#main .list {
	float: none;	/*回り込みの解除*/
	width: 60%;		/*ボックスの幅*/
	margin: 0 auto 30px;
}
/*h4タグと段落タグ。１カラムになるので、文字数により切れてしまうのを解除。*/
#main .list h4,
#main .list p {
	height: auto;
	overflow: auto;
}

}

/* 背景画像の高さを管理できる疑似要素を使う方法 */
body.bg2 {
    position: relative;
}

/* スマホ時の背景高さ */
body.bg2::before {
    content: "";
    display: block;
    width: 100%;
    height: 20px; /* ←スマホ時の背景画像の高さ */
    background-image: url(../images/bg2.jpg);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* PC時の背景高さ */
@media screen and (min-width: 769px) {
    body.bg2::before {
        height: 130px; /* ←PCでの背景高さ。ここを調整すれば重なり解消 */
    }
}


/* サポートメニューページのロゴ全体の配置（基準） */
.page-logo {
	display: flex;
	justify-content: center;
	margin: 20px 0 10px;    /* 上下の余白（ここで調整） */

}

/* サポートメニューページのロゴ画像（PC） */
.page-logo img {
	width: 30%;             /* PCサイズ */
	height: auto;
	transform: translateX(-30px); /* ← ここで微調整が効く */

}

/* サポートメニューページのスマホ用 */
@media screen and (max-width: 768px) {
	.page-logo {
		margin: 10px 0 5px;   /* スマホ時の上下余白 */
	}

	.page-logo img {
		width: 60%;          /* スマホサイズ */	
		transform: translateX(-20px); /* ← ここで微調整が効く */
	}
}


/* =====================================
   サポートページ（list-normal3-parts 基本）
===================================== */
.list-normal3-parts .list-parts * {
  margin: 0;
  padding: 0;
}

/* =====================================
   ボックス（カード）1個あたり
===================================== */
.list-normal3-parts .list-parts {
  position: relative;
  overflow: visible;                 /* ← シャドウを切らせない */
  background: #fff;
  color: #555;

  /* カード化 */
  border-radius: 24px;               /* カード角丸 */
  box-shadow: 10px 12px 30px rgba(0,0,0,0.12); /* カード影 */
  border: none;                      /* 既存枠線を無効化 */

  padding: 2rem;                     /* カード内余白 */
  margin-bottom: 2rem;               /* カード同士の間隔 */

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* =====================================
   figure（画像）
===================================== */
.list-normal3-parts .list-parts figure {
  margin-bottom: 1rem;
}

/* =====================================
   h4 共通（座布団化・サイズ指定なし）
===================================== */
.list-normal3-parts .list-parts h4 {
  display: inline-block;
  padding: 1em 1.3em;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  font-weight: 500;
}

/* =====================================
   メインプラン
===================================== */
.plan-main {
  background-color: #809ba2;
  color: #fff;
  font-weight: 600;
  border-radius: 18px;
}

/* =====================================
   共通設定
===================================== */

/* サブプラン：常に縦並び */
.plan-sub-wrap {
  display: flex;
  flex-direction: column;
}

/* サブプラン見出し */
.plan-sub-wrap .plan-sub {
  display: inline-block;
  padding: 0.35em 0.9em;
  margin-bottom: 0.4rem;
  background: transparent;
  color: #302e2e;
  border: 1.5px solid #000;
  font-weight: 500;
  border-radius: 50px;
}

/* プラン説明文 */
.list-normal3-parts .list-parts .text-parts p {
  line-height: 1.5; /* 行間調整 */
}

/* h3 の左パディング無効化 */
h3.plan-font {
  padding-left: 0 !important;
}

/* =================================================
   スマホ（〜768px）
================================================= */
@media screen and (max-width: 768px) {

  /* メインプラン */
  .plan-main {
    text-align: center;
    font-size: 1.5rem;
    border-radius: 16px;
    margin-bottom: 0.8rem;
  }

  /* サブプラン：中央寄せ */
  .plan-sub-wrap {
    align-items: center;
    text-align: center;
    font-size: 1.3rem;
  }

  /* 基本プラン文字（スマホ） */
  .plan-font {
    font-size: 26px;
    font-weight: 500;
    text-align: center;
  }
}

/* =================================================
   PC・タブレット（769px〜）
================================================= */
@media screen and (min-width: 769px) {

  /* 画像 左 / テキスト 右 */
  .list-normal3-parts .list-parts {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
  }

  /* 画像側 */
  .list-normal3-parts .list-parts figure {
    width: 40%;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .list-normal3-parts .list-parts figure img {
    width: 100%;
    max-width: 480px;
    height: auto;
    display: block;
  }

  /* テキスト側 */
  .list-normal3-parts .list-parts .text-parts {
    flex: 1;
    text-align: left;
  }

  /* メインプラン */
  .plan-main {
    font-size: 1.8rem; /* 基本利用プラン：メイン見出し大きさ */
    text-align: left;
  }

  /* サブプラン */
  .plan-sub-wrap .plan-sub {
    font-size: 1.3rem;      /* サブ見出しサイズ */
    margin-left: 1rem;     /* 左インデント */
    padding: 0.3rem 1.5rem;
  }

  .plan-sub-wrap {
    align-items: flex-start;
  }
}

/* ============================
   追加オプションサポート
============================ */

 /* オプションカード */
.option-card {
	background: #fff;
	border-radius: 24px;
	padding: 20px 35px 30px 35px;
	width: 100%;
	max-width: 100%;
	box-shadow: 10px 12px 30px rgba(0,0,0,0.3);
	box-sizing: border-box;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* オプションカード：コンテナ */
.option-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;   
	gap: 48px;
	max-width: 1200px;
	margin: 0px auto;
	padding: 0 15px;
	box-sizing: border-box;
}

/* PC：2カラム */
@media screen and (min-width: 769px) {
  .option-card {
    flex: 0 0 calc(50% - 48px);
    max-width: calc(45% - 48px);
  }
}

/* スマホ：1カラム */
@media screen and (max-width: 768px) {
  .option-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* メイン見出し */ 
.option-main.has-number { 
	position: relative; 
	text-align: left; /* 左揃え */ 
	font-size: 2.2rem; 
	font-weight: 600; 
	color: #555; 
	margin: 10px 0 5px 0; /* ← 下余白はここで調整 */ 
	letter-spacing: 0.04em; }


/* ============================
   option-main 背景ナンバー
============================ */

.option-main.has-number {
	position: relative; 
	z-index: 1; 
	text-align: left; 
	padding-left: 2.1em; /* 調整ポイント（0.6〜1.2em） */ 
}

/* 薄いナンバー（明示的に色指定） */
.option-main.has-number::before {
	content: attr(data-number);
	position: absolute;
	top: 50%;
	left: 0;                   /* 左基準 */
	transform: translateY(-50%);

	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.05em;

	color: rgba(138, 122, 90, 0.404); /* ← 薄い色 */
	z-index: -1;
	pointer-events: none;
	white-space: nowrap;
}

/* 下線装飾 */
.option-main::after {
	content: "";
	position: absolute;
	left:  0;              
	right: 0;
	bottom: -0.2em;
	width: 100%;          /* 文字幅に合わせる */
	height: 2px;
	background: #c4b28b;
	margin-top: 24px;
}

/* サブ項目 */
.option-sub {
	position: relative;
	text-align: left;           
	font-size: 1.4rem;
	font-weight: 600;
	color: #a7946f;
	margin: 0 0 3px 15px;
	padding-left:0.7em;        /* 見出し右に移動 */
	border-left: 5px solid #8a7a5a;
	line-height: 1.2;
}

/* 説明文 */
.option-detail {
	font-size: 0.95rem;
	line-height: 1.5;
	color: #555;
	margin: 0px 10px 10px 10px;
	text-align: left;
	max-width: 100%;
}


/* スマホ対応 */
@media screen and (max-width: 768px) {

	.option-card {
		padding: 36px 22px;
		border-radius: 18px;		
	}

	.option-main.has-number {
		font-size: 1.6rem;
		padding-left: 1rem;
	}

	.option-main.has-number::before {
		font-size: 1.7rem;
	}

	/* サブ見出し（スマホのみ） */
  	.option-sub {
    	position: relative;
    	font-size: 1.3rem;
    	margin-top: 15px;

    /* 見出し全体を右へ動かす */
    	padding-left: 15px;
	}
	.option-detail {
		font-size: 0.9rem;
		margin: 5px 10px 5px 10px;
	}
}


/*テーブル：時間割表
---------------------------------------------------------------------------*/

/* スマホで横スクロールさせるためのラッパー */
.week2-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 2.5rem;
}

/* テーブル全体 */
.week2-parts {
	width: 100%;
	min-width: 980px;			/* スマホ時は横スクロール */
	border-collapse: collapse;	/* ← rowspan対策：罫線崩れ防止 */
	table-layout: fixed;		/* 幅を均等に */
	background: #fff;			/* テーブル全体の背景色 */
	color: #555;				/* 文字色 */
	border: 1px solid #ccc;		/* 外枠 */
}

/* 共通セル設定 */
.week2-parts th,
.week2-parts td {
	border: 1px solid #ccc;		/* 罫線 */
	padding: 1rem 0.3rem;		/* ボックス内余白 */
	text-align: center;			/* 中央揃え */
	vertical-align: middle;		/* 縦中央 */
}

/* 校時列 */
.week2-parts th:nth-child(1),
.week2-parts td:nth-child(1) {
	width: 4%;
	font-weight: bold;
	background: #f7f7f7;
}


/* 曜日列 */
/* 月〜金（3〜7列目） */
.week2-parts th:nth-child(n+2):nth-child(-n+6),
.week2-parts td:nth-child(n+2):nth-child(-n+6) {
	width: 15%;
	font-weight: bold;
}

/* 土（8列目） */
.week2-parts th:nth-child(7),
.week2-parts td:nth-child(7) {
	width: 8%;
	font-weight: bold;
}

/* 曜日見出し */
.week2-parts th {
	background: #eee;
	font-weight: bold;
}

/* 土曜日だけ薄く（修正版） */
.week2-parts th:nth-child(7),
.week2-parts td:nth-child(7) {
	background: #fafafa;
}

/* 基本プラン文字（ＰＣ） h3 の左パディング無効化 */
h3.schedule-font {
  padding-left: 0 !important;
}

/* 説明文文字（ＰＣ） */
.explanation-font {
	font-size: 20px;
}

/* 登校日選択文字（ＰＣ） */
.selecttype-font {
	font-size: 15px;
	font-weight: 400;
}

/* 時間割表 区切り線（h2直下と同等） */
.schedule-line {
	height: 20px;                     /* 見せたい高さだけ確保 */
	margin: 3rem auto;                /* 上下余白 */
	background: url(../images/line1.png)
	            repeat-x
	            center
	            bottom
	            / 300px;              /* ← h2と同じ */
}

/* 時間割表見出し（h3） */

h3.schedule-font {
	display: flex;
	justify-content: space-between;	/* 左右に分離 */
	align-items: center;
	gap: 1.5rem;
	text-align: left;				/* 見出し文字は左基準 */
	padding-left: 0;
}

/* 見出し（1つ目の要素） */
h3.schedule-font span:first-child {
	text-align: left;
}

/* 年月（最後の要素） */
h3.schedule-font span:last-child {
	font-weight: normal;
	font-size: 0.9em;
	white-space: nowrap;
	text-align: right;
}

/* 時間割表見出し　スマホ対応 */
@media screen and (max-width: 768px) {
	h3.schedule-font {
		flex-direction: column;		/* 縦並び */
		align-items: flex-start;	/* 左揃え */
		gap: 0.4rem;
	}

	h3.schedule-font span:last-child {
		align-self: flex-end;		/* 年月だけ右寄せ */
		text-align: right;
		white-space: normal;
	}

	/* 説明文文字（ＰＣ） */
	.explanation-font {
		font-size: 16px;
	}
}


/* =====================================
   科目名 説明一覧テーブル
   ※ 時間割表（week2-parts）には影響しない
===================================== */

.subject-note {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin-top: 2rem;			/* 時間割表との間隔 */
	border: 1px solid #ccc;		/* 外枠 */
	border-radius: 10px;		/* 角丸 */
	overflow: hidden;			/* 角丸を綺麗に */
	background: #fff;
	color: #555;
	table-layout: fixed;		/* 列幅をCSSで管理 */
}

.pc-only {
	display: table-row;
}

.sp-only {
	display: none;
}

.wide-description {
	text-align: left;
	line-height: 1.6;
}

.subject-note th,
.subject-note td {
	padding: 8px;
}

/* ==========================
   列幅/行高 調整ポイント（PC）
   ========================== */

/* 科目名（1列目・3列目） */
.subject-note td.subject {
	width: 15%;				/* ← PC用調整 */
	background: #fafafa;	/* 科目名のみ背景色 */
	text-align: center;
	font-size: 16px;
	font-weight: 600;
}

/* PC表示時のテーブル行の高さを完全統一 */
@media screen and (min-width: 769px) {
	.subject-note tr {
		height: 80px;   /* ← ここをお好みで調整 */
	}
	.subject-note td {
		height: 100%;
		vertical-align: middle;		/* ← 行ごとに完全に中央寄せ	*/
	}
}


/* 内容説明（2列目・4列目） */
.subject-note td:not(.subject) {
	width: 35%;				/* ← PC用調整 */
	text-align: left;
	line-height: 1.5;
}

/* td 共通 */
.subject-note td {
	padding: 0.8rem 1rem;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	box-sizing: border-box;
	vertical-align: middle;
}

/* 各行の一番右の線を消す */
.subject-note tr td:last-child {
	border-right: none;
}

/* PC用：追加した最終行の下線を消す */
.subject-note tr.pc-only td {
	border-bottom: none;
}

/* 科目名（PC）：改行させる */
.br-sp {
	display: inline;
}

/* =====================================
   スマホ対応：2列×縦並び
===================================== */
@media screen and (max-width: 768px) {

	/* スマホ時のフォントサイズ個別設定 */

	/* 科目名の文字サイズ */
	.subject-note td.subject {
		font-size: 18px;   /* ← 科目名の大きさ */
	}

	/* 内容説明の文字サイズ */
	.subject-note td:not(.subject) {
		font-size: 17px;   /* ← 説明文の大きさ */
	}

	/* trをブロック化 */
	.subject-note tr {
		display: block;
	}

	/* tdを縦積み */
	.subject-note td {
		display: block;
		width: 100% !important;	/* ← 4列指定を強制解除 */
		border-right: none;		/* 縦並びなので右線不要 */
	}

	/* 科目名（上段） */
	.subject-note td.subject {
		text-align: center;
		font-weight: 600;
		background: #f0f0f0;
		border-bottom: none;	/* 説明と一体化 */
	}

	/* 内容説明（下段） */
	.subject-note td:not(.subject) {
		text-align: left;
		padding-top: 0.4rem;
		padding-bottom: 1rem;
	}

	/* 行ごとの区切り線 */
	.subject-note tr:not(:last-child) td:last-child {
		border-bottom: 1px solid #ccc;
	}

	/* 各セットの最後（説明側）だけ下線を消す */
	.subject-note tr td:last-child {
		border-bottom: none;
	}

	/* スマホ用：縦並び 追加*/
	.pc-only {
		display: none;
	}

	.sp-only {
		display: table-row;
	}

	.sp-title {
		background: #f5f5f5;
		font-weight: bold;
		text-align: center;
	}

	.sp-description {
		text-align: left;
		line-height: 1.6;
	}

	/* 科目名（スマホ）：改行させない */
	.br-sp {
		display: none;
	}
}

/*波のアニメーション
---------------------------------------------------------------------------*/
/*波を囲む全体のブロック*/
.wave1-section-parts {
	position: relative;
	padding: calc(80px - 1px) 0px;
}

/*波の色（２つとも揃えておけばOK）*/
.wave1-section-parts .text-parts {
	background: #809ba2;
}
.wave1-section-parts .wave-wrap-parts use {
	fill: #809ba2;
}

/*上下の波（共通）*/
.wave1-section-parts .wave-parts {
	position: absolute;
	left: 0;
	width: 100%;
	height: 80px;	/*波の高さ。ここを変更する場合は上の.wave1-section-partsのpaddingの行にある80の数字も合わせて変更して下さい。*/
}
.wave1-section-parts .wave-parts svg {
	display: block;
	width: 100%;
	height: 100%;
}
.wave1-section-parts .wave-parts .wave-wrap-parts {
	transform-box: fill-box;
	transform-origin: 0 0;
	animation: move-wave 10s linear infinite;	/*ここの10の数字で速度調整できます*/
}

@keyframes move-wave {
0% { transform: translateX(0); }
100%   { transform: translateX(-50%); }
}

/*上の波*/
.wave1-section-parts .wave-top-parts {
	top: 0;
}
/*下の波*/
.wave1-section-parts .wave-bottom-parts {
	bottom: 0;
	transform: rotate(180deg);
}


/* 基本設定（PC用） */
.text-parts {
	padding: 60px 0;
}

.text-parts .reasonable-price {
	font-size: 30px;          /* 文字サイズ */
	font-weight: bold;        /* 太さ */
	color: #ffffff;              /* 文字色 */
	line-height: 1.6;
	text-align: center;       /* 中央寄せ */
	margin: 0 auto;           /* 横位置の安定化 */

	position: relative;
	top: 0px;    /* 上下移動 */
	left: 10px;    /* 左右移動 */
}

/* PCでは横並びにする */
.reasonable-price .line {
    display: inline;
}

.price-text {
	font-size: 25px;
	margin: 0 8px;
}

.free-consultation {
	font-size: 25px;
	text-align: center;       /* 中央寄せ */
	line-height: 1.8; 
}

/* スマホ時の調整 */
@media screen and (max-width: 768px) {
	section.text-parts p.reasonable-price {
        font-size: 26px;   /* ← スマホでは少し大きく */
        line-height: 1.2;  /* 行間もゆったり */
    }

    /* スマホでは縦に並べる */
    section.text-parts p.reasonable-price span.line {
        display: block !important;   /* ← 強制的に縦並び */
    }

    /* 最後の行だけ余白をなくす */
    section.text-parts p.reasonable-price span.line:last-child {
        margin-bottom: 0;
    }

	.price-text {
		font-size: 20px;
	}

	.free-consultation {
		font-size: 22px;
		text-align: center;       /* 中央寄せ */
		line-height: 1.5; 
}
}


/*料金ページリンクボタン
---------------------------------------------------------------------------*/
.btn {
    display: inline-block;
    background: #2f435f;
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
    padding: 14px 28px;
    border-radius: 50px;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.btn:hover {
    background: #eff1f3;
    transform: translateY(-2px);
}


@media (max-width: 768px) {
    .btn {
        font-size: 20px;
        padding: 16px 22px;
        width: 90%;
        text-align: center;
    }
}


/*テーブル：料金表
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta3-parts caption {
	font-weight: bold;
	font-size: 20px;
	padding: 0.2rem 1rem;
	border-radius: 5px;
	background: #555;
	color: #fff;
}

/*テーブルブロック設定*/
.ta3-parts {
	border-collapse: separate;
	border-spacing: 0 1rem;
	table-layout: fixed;
	width: 100%;
	margin-bottom: 2rem;
}

/*th（左側）、td（右側）の共通設定*/
.ta3-parts th,
.ta3-parts td {
	padding: 1rem;
	word-break: break-all;
	vertical-align: middle;
	box-sizing: border-box;
}

/*th（左側）のみの設定（座布団）*/
.ta3-parts th {
	background: #eee;
	border-radius: 18px;
	font-size: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #ccc;
}

/* 基本プラン：座布団強調 */
.plan-basic th {
	background: #dad9d9;	
}

/* 別途費用・割引制度 専用 座布団 */
.plan-others th {
	background: none;
	border: 1px solid #999;
	color: #333;

	width: 28%;

	font-size: 18px;
	border-radius: 20px;
}

/*td（右側：料金）のみの設定*/
.ta3-parts td {
	font-size: 17px;
	line-height: 1.3;
}

/* 料金表示用ラッパー（PCは左寄せのまま） */
.ta3-parts .price-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;	/* PCでは左揃え */
	height: 100%;
	padding-top: 0em;
}

/* =====================================
   テーブル：料金表 レスポンシブ調整
===================================== */

/* ---------- PC表示 ---------- */
@media (min-width: 769px) {

	.ta3-parts tr {
		display: flex;
		margin-bottom: 1rem;
	}

	.ta3-parts tr:last-child {
		margin-bottom: 0;
	}

	.ta3-parts th {
		width: 50%;
		min-height: 96px;
		font-size: 25px;
		text-align: left;
		justify-content: flex-start;
		padding: 1.4rem 2.0rem;
	}

	.ta3-parts td {
		width: 50%;
		font-size: 25px;
		font-weight: 500;
		text-align: left;

		padding-left: 2.5rem;
		padding-right: 1.2rem;
	}
}

@media (min-width: 769px) {
	.plan-others th {
		width: 28%;
	}
}

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

	.ta3-parts tr {
		display: block;
	}

	.ta3-parts th {
		width: 100%;
		min-height: 72px;
		font-size: 22px;
		text-align: center;
		justify-content: center;
		padding: 1.2rem 1rem;
		margin-bottom: 0.5rem;
	}

	.ta3-parts td {
		width: 100%;
		font-size: 23px;
		text-align: center;
		line-height: 1.6;  
		padding: 0.8rem 1rem 1.4rem;
	}

	/* スマホ時のみ中央揃え */
	.ta3-parts .price-wrap {
		text-align: left;
	}
}

@media (max-width: 768px) {
	.plan-others th {
		width: 100%;
		font-size: 22px;
	}
}



/*アクティビティ：ボックス付属アイコン
---------------------------------------------------------------------------*/
/*ボックス１個あたり*/
.list-normal3-parts .list-parts {
	position: relative;
	overflow: hidden;
	background: #fff;		/*背景色*/
	color: #555;			/*文字色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}

/*ボックス内のh4見出し*/
.list-normal3-parts .list-parts h4 {
	font-size: 1.6rem;	/*文字サイズ130%*/
	margin-bottom: 0.5rem;	/*見出しの下に0.5文字分のスペースを空ける*/
}

/*共通*/
.list-normal3-parts .icon-bg1-parts,
.list-normal3-parts .icon-bg2-parts {
	overflow: hidden;
	position: absolute;
	left: 0px;		/*左からの配置場所*/
	top: 0px;		/*上からの配置場所*/
	font-size: 1rem;	/*文字サイズ。70%*/
	font-weight: bold;	/*文字太さ*/
	width: 10rem;		/*幅。10文字分*/
	padding-top: 2rem;	/*テキストの上にとる余白。2文字分。*/
	text-align: center;	/*テキストをセンタリング*/
	transform: rotate(-45deg) translate(-2.4rem,-3rem);	/*反時計回りに45度回転、X軸に-2.4文字分、Y軸に-3文字分移動。*/
}

/*icon-bg1-parts（サンプルだと「NEW」）*/
.list-normal3-parts .icon-bg1-parts {
	background: #ff3535;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*icon-bg2-parts（サンプルだと「UP」）*/
.list-normal3-parts .icon-bg2-parts {
	background: #358bff;	/*背景色*/
	color: #fff;			/*文字色*/
}

/* イベント見出し専用 */
#main h3.event-title {
	padding-left: 0;          /* ← 右ズレ解消 */
	font-size: 25px;          /* 大きさ調整 */
	font-weight: 500;
	color: #8a7a5a;           /* 色変更（例：紺） */
	margin-bottom: 1rem;
}

/* スマホ画面用：イベント見出しを中央寄せ */
@media screen and (max-width: 768px) {

	#main h3.event-title {
		text-align: center;   /* 中央寄せ */
		margin-left: auto;
		margin-right: auto;
	}

}



/*フッター設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: right;	/*テキストを右寄せ*/
	font-size: 12px;	/*文字サイズ*/
}
/*リンクテキスト*/
footer a {text-decoration: none;}

/* フッター：スマホ対応 */
@media screen and (max-width: 768px) {
footer {
	clear: both;
	text-align: center;	/*テキストを右寄せ*/
	font-size: 10px;	/*文字サイズ*/
}
}


/* =========================
   metaverse.html 専用CSS
========================= */

/* 導入エリア */

/* mv-intro の上余白を管理 */
.mv-intro {
  padding-top: 140px;   /* ← PCでの調整値 */
}

/* スマホ */
@media screen and (max-width: 768px) {
  .mv-intro {
    padding-top: 40px;  /* ← スマホ用調整 */
  }
}

.mv-intro {
  text-align: center;
}

.mv-intro .lead {
  max-width: 780px;
  margin: 0 auto 30px;

  padding: 28px 32px;

  background: #f9f9f9;
  border-radius: 20px;

  font-size: 28px;
  line-height: 1.8;
  color: #444;

  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* 強調部分（改行完全対応版） */
.mv-intro .lead strong {
  font-weight: 600;
  color: #6f6248;

  /* 下線風 */
  box-shadow: inset 0 -0.6em 0 #f3ecd8;

  padding: 0 4px;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .mv-intro .lead {
    font-size: 23px;
    padding: 22px;
    margin-bottom: 24px;
  }

  .mv-intro .lead strong {
    font-size: 23px;
  }
}

.concept-img {
  max-width: 600px;
  margin: 0 auto;
}

.concept-img figcaption {
  font-size: 14px;
  color: #777;
  margin-top: 10px;
}


/* ========================= 
   3つの特徴（mv-features）
   やわらかネイビー版
========================= */

:root {
  --accent-navy: #2f3e63;
  --accent-light: #eef1f8;
}

/* セクション全体余白管理 */
.mv-features {
  margin-top: 60px;
  margin-bottom: 80px;
}

/* 見出し */
.mv-features h2 {
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
}

/* 特徴カード配置 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

/* カード */
.feature-card {
  background: linear-gradient(#ffffff, var(--accent-light));
  border-radius: 20px;
  padding: 32px 36px;

  border: 2px solid #d7dcec;

  box-shadow:
    0 8px 18px rgba(47,62,99,0.12),
    0 2px 4px rgba(0,0,0,0.05);

  text-align: left;
}

/* 見出し h3 */
#main .feature-card h3 {
  padding-left: 0;
}

#main .mv-features .feature-card h3 {
  margin-bottom: 20px;
  font-size: 26px;
  font-weight: 600;

  background: linear-gradient(#3d4f7c, #2f3e63);
  color: #fff;

  padding: 12px 16px;
  border-radius: 12px;
}

/* 丸付き番号 */
#main .mv-features .feature-card h3::before {
  content: attr(data-num);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  margin-right: 10px;

  border-radius: 50%;
  background: #fff;
  color: var(--accent-navy);

  font-size: 20px;
  font-weight: bold;
}

/* 本文 */
.mv-features .feature-card p {
  font-size: 20px;
  line-height: 1.6;
  color: #555;
  padding: 0;
  margin: 0;
}

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

  .mv-features {
    margin-top: 40px;
    margin-bottom: 60px;
  }

  #main .mv-features h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .feature-card {
    padding: 24px 35px 20px 35px;
  }

  #main .mv-features .feature-card h3 {
    font-size: 24px;
  }

  .mv-features .feature-card p {
    font-size: 18px;
  }
}


/* =========================
   学びの流れ（mv-flow）
========================= */

/* セクション余白 */
.mv-flow {
  margin-top: 80px;
  margin-bottom: 80px;
}

/* セクション見出し */
.mv-flow h2 {
  font-size: 32px;
  margin-bottom: 40px;
  text-align: center;
}

/* フロー全体 */
.flow-wrapper {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

/* =========================
   STEPカード（やわらかネイビー統一）
========================= */
.flow-step {

  /* mv-features と同じ背景トーン */
  background: linear-gradient(#ffffff, var(--accent-light));

  border-radius: 20px;

  padding: 30px 26px 0px;

  /* ネイビー系枠 */
  border: 2px solid #d7dcec;

  /* 同じ影質感 */
  box-shadow:
    0 8px 18px rgba(47,62,99,0.12),
    0 2px 4px rgba(0,0,0,0.05);

  margin-bottom: 20px;
}

/* STEPラベル */
.flow-step .step {
  display: inline-block;

  background: linear-gradient(#3d4f7c, #2f3e63);
  color: #fff;

  padding: 6px 16px;
  border-radius: 20px;

  font-size: 18px;
  font-weight: 600;

  margin-bottom: 12px;
}

/* STEP見出し */
.mv-flow h4 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--accent-navy);
}

/* 説明文 */
.mv-flow p {
  font-size: 21px;
  line-height: 1.5;
  color: #555;

  /* #main p 対策 */
  padding: 0;
  margin: 0;
}

/* 矢印 */
.flow-arrow {
  font-size: 30px;
  margin: 16px 0;
  color: var(--accent-navy);
  font-weight: bold;
}

/* =========================
   スマホ調整
========================= */
@media screen and (max-width: 768px) {

  .mv-flow {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .mv-flow h2 {
    font-size: 28px;
    margin-bottom: 30px;
  }

  .mv-flow h4 {
    font-size: 24px;
  }

  .mv-flow p {
    font-size: 19px;
  }

  .flow-step {
    padding: 22px 20px;
  }
}

/* =========================
   高級感ネイビー座布団見出し
   ※ mv-features / mv-flow のみ適用
========================= */

#main .mv-features h2,
#main .mv-flow h2 {

  background: linear-gradient(145deg, #2c56a3, #0e2b5c) !important;

  color: #ffffff !important;

  display: inline-block;
  font-size: 28px;
  font-weight: 700;

  margin: 70px auto 40px;
  padding: 18px 48px;

  letter-spacing: 0.08em;
  text-align: center;

  border-radius: 50px;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.25),
    inset 0 1px 0 rgba(255,255,255,0.25);
}

/* 見出し中央固定 */
#main .mv-features,
#main .mv-flow {
  text-align: center;
}

/* スマホ微調整 */
@media screen and (max-width: 768px) {

  #main .mv-features h2,
  #main .mv-flow h2 {

    font-size: 22px;
    padding: 14px 28px;
    margin: 50px auto 30px;
  }

}

/* =========================================================
   Peace & Piece
   Aboutページ専用・最終調整CSS
   ========================================================= */


/* =========================================================
   01. Aboutページ
   「Peace & Piece とは」本文
   ========================================================= */

.about-description {
  width: 100% !important;
  max-width: 1000px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  box-sizing: border-box !important;

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

  font-size: 19px !important;

  font-weight: 400 !important;

  line-height: 2.15 !important;

  letter-spacing: 0.045em !important;

  color: #4b4b4b !important;

  text-align: left !important;
}


/* =========================================================
   02. Aboutページ
   セクション見出し
   ========================================================= */

.about-section-title {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 auto 60px !important;

  padding: 0 0 20px !important;

  box-sizing: border-box !important;

  text-align: center !important;

  text-indent: 0 !important;

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

  font-size: 34px !important;

  font-weight: 500 !important;

  line-height: 1.6 !important;

  letter-spacing: 0.08em !important;

  color: #202020 !important;
}


/* ---------------------------------------------------------
   見出しの文字
   --------------------------------------------------------- */

.about-section-title span {
  display: inline-block !important;

  width: auto !important;

  margin: 0 !important;

  padding: 0 !important;

  text-align: center !important;
}


.about-section-title span b {
  display: inline !important;

  margin: 0 !important;

  padding: 0 !important;

  font-weight: 500 !important;

  color: #202020 !important;
}


/* ---------------------------------------------------------
   英語タイトル
   --------------------------------------------------------- */

.about-section-title::before {
  display: block !important;

  margin: 0 0 11px !important;

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

  font-size: 13px !important;

  font-weight: 500 !important;

  line-height: 1.4 !important;

  letter-spacing: 0.28em !important;

  color: #777 !important;

  text-align: center !important;
}


/* ---------------------------------------------------------
   Peace & Piece とは
   --------------------------------------------------------- */

.about-school-title::before {
  content: "ABOUT THE SCHOOL" !important;
}


/* ---------------------------------------------------------
   代表挨拶
   --------------------------------------------------------- */

.about-message-title::before {
  content: "MESSAGE" !important;
}


/* ---------------------------------------------------------
   見出し下のライン
   --------------------------------------------------------- */

.about-section-title::after {
  content: "" !important;

  display: block !important;

  width: 48px !important;

  height: 1px !important;

  margin: 18px auto 0 !important;

  background: #9b9b9b !important;
}


/* =========================================================
   03. 代表挨拶
   白い紙
   ========================================================= */

.message-letter {
  width: 100% !important;

  margin-top: 100px !important;

  box-sizing: border-box !important;
}


.message-letter .letter-paper {
  position: relative !important;

  width: 100% !important;

  max-width: 1000px !important;

  margin: 0 auto !important;

  padding: 75px 75px 80px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border-radius: 4px !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.10),
    0 3px 8px rgba(0, 0, 0, 0.05) !important;
}


/* ---------------------------------------------------------
   白い紙の上のライン
   --------------------------------------------------------- */

.message-letter .letter-paper::before {
  content: "" !important;

  position: absolute !important;

  top: 28px !important;

  left: 75px !important;

  right: 75px !important;

  height: 1px !important;

  background: rgba(32, 32, 32, 0.15) !important;
}


/* =========================================================
   04. 代表挨拶本文
   ========================================================= */

.message-letter .letter-paper > p {
  width: 100% !important;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box !important;

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

  font-size: 19px !important;

  font-weight: 400 !important;

  line-height: 2.15 !important;

  letter-spacing: 0.045em !important;

  color: #4b4b4b !important;

  text-align: left !important;
}


/* =========================================================
   05. 代表挨拶の署名
   ========================================================= */

.message-letter .letter-signature {
  display: block !important;

  margin-top: 55px !important;

  margin-bottom: 0 !important;

  text-align: right !important;

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

  font-size: 18px !important;

  font-weight: 500 !important;

  line-height: 1.7 !important;

  letter-spacing: 0.06em !important;

  color: #444 !important;
}


/* =========================================================
   06. タブレット
   1100px以下
   ========================================================= */

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


  /* -----------------------------------------
     Peace & Piece とは
     ----------------------------------------- */

  .about-description {
    width: 100% !important;

    padding-left: 35px !important;
    padding-right: 35px !important;

    font-size: 18px !important;

    line-height: 2.1 !important;

    letter-spacing: 0.04em !important;
  }


  /* -----------------------------------------
     見出し
     ----------------------------------------- */

  .about-section-title {
    margin-bottom: 52px !important;

    padding-bottom: 18px !important;

    font-size: 31px !important;

    letter-spacing: 0.075em !important;
  }


  .about-section-title::before {
    margin-bottom: 10px !important;

    font-size: 12px !important;

    letter-spacing: 0.25em !important;
  }


  .about-section-title::after {
    width: 45px !important;

    margin-top: 17px !important;
  }


  /* -----------------------------------------
     代表挨拶
     ----------------------------------------- */

  .message-letter {
    margin-top: 80px !important;
  }


  .message-letter .letter-paper {
    width: calc(100% - 70px) !important;

    padding: 65px 55px 70px !important;
  }


  .message-letter .letter-paper::before {
    left: 55px !important;

    right: 55px !important;
  }


  .message-letter .letter-paper > p {
    font-size: 18px !important;

    line-height: 2.1 !important;

    letter-spacing: 0.04em !important;
  }


  .message-letter .letter-signature {
    margin-top: 48px !important;

    font-size: 17px !important;
  }

}


/* =========================================================
   07. スマートフォン
   768px以下
   ========================================================= */

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


  /* -----------------------------------------
     Peace & Piece とは
     ----------------------------------------- */

  .about-description {

    /*
      ★重要
      スマホ本文の左右に28pxの余白
    */

    width: 100% !important;

    max-width: none !important;

    padding-left: 28px !important;

    padding-right: 28px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    box-sizing: border-box !important;

    font-size: 16px !important;

    line-height: 2.0 !important;

    letter-spacing: 0.025em !important;
  }


  /* -----------------------------------------
     見出し
     ----------------------------------------- */

  .about-section-title {

    width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    margin-bottom: 44px !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

    padding-bottom: 16px !important;

    box-sizing: border-box !important;

    font-size: 25px !important;

    line-height: 1.6 !important;

    letter-spacing: 0.06em !important;
  }


  .about-section-title::before {

    margin-bottom: 8px !important;

    font-size: 10px !important;

    letter-spacing: 0.21em !important;
  }


  .about-section-title::after {

    width: 36px !important;

    margin-top: 14px !important;
  }


  /* -----------------------------------------
     代表挨拶
     ----------------------------------------- */

  .message-letter {

    width: 100% !important;

    margin-top: 65px !important;
  }


  /*
     ★重要
     白い紙を画面いっぱいにしない
  */

  .message-letter .letter-paper {

    width: calc(100% - 32px) !important;

    max-width: none !important;

    margin-left: auto !important;

    margin-right: auto !important;

    padding: 60px 30px 60px !important;

    box-sizing: border-box !important;

    border-radius: 3px !important;
  }


  /* 白い紙の上のライン */

  .message-letter .letter-paper::before {

    top: 23px !important;

    left: 30px !important;

    right: 30px !important;
  }


  /* -----------------------------------------
     代表挨拶本文
     ----------------------------------------- */

  .message-letter .letter-paper > p {

    width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    font-size: 16px !important;

    line-height: 2.0 !important;

    letter-spacing: 0.025em !important;

    box-sizing: border-box !important;
  }


  /* 署名 */

  .message-letter .letter-signature {

    margin-top: 42px !important;

    font-size: 15px !important;

    line-height: 1.7 !important;
  }

}


/* =========================================================
   08. 小型スマートフォン
   480px以下
   ========================================================= */

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


  /* -----------------------------------------
     本文
     ----------------------------------------- */

  .about-description {

    /*
      ★重要
      小型スマホでも左右24px
    */

    padding-left: 24px !important;

    padding-right: 24px !important;

    font-size: 15px !important;

    line-height: 1.95 !important;

    letter-spacing: 0.02em !important;
  }


  /* -----------------------------------------
     見出し
     ----------------------------------------- */

  .about-section-title {

    margin-bottom: 38px !important;

    padding-left: 18px !important;

    padding-right: 18px !important;

    padding-bottom: 14px !important;

    font-size: 23px !important;

    line-height: 1.55 !important;

    letter-spacing: 0.05em !important;
  }


  .about-section-title::before {

    margin-bottom: 7px !important;

    font-size: 9px !important;

    letter-spacing: 0.17em !important;
  }


  .about-section-title::after {

    width: 32px !important;

    margin-top: 12px !important;
  }


  /* -----------------------------------------
     代表挨拶
     ----------------------------------------- */

  .message-letter {

    margin-top: 55px !important;
  }


  /*
     ★重要
     小型スマホでは白い紙を
     画面幅より20px小さくする
  */

  .message-letter .letter-paper {

    width: calc(100% - 20px) !important;

    padding: 55px 24px 55px !important;
  }


  /* ライン */

  .message-letter .letter-paper::before {

    top: 21px !important;

    left: 24px !important;

    right: 24px !important;
  }


  /* 代表挨拶本文 */

  .message-letter .letter-paper > p {

    font-size: 15px !important;

    line-height: 1.95 !important;

    letter-spacing: 0.02em !important;
  }


  /* 署名 */

  .message-letter .letter-signature {

    margin-top: 38px !important;

    font-size: 14px !important;
  }

}