.-x-richtext ul, .-x-richtext ol {
	list-style-position: inside;
}
[data-legal]{
	position:relative;
	--legal-offset-h:attr(data-legal-offset-h px);
	--legal-offset-v:attr(data-legal-offset-v px);
}
[data-legal][data-legal-safe="1"]::after{
	position: absolute;
	opacity: 0.5;
	color: black;
	content: "墨";
	font-size: 16px;
	display: block;
	height: 24px;
	padding-top: 0px;
	background-image: url(/_lib/lc.png);
	background-size: auto 20px;
	background-repeat: no-repeat;
	padding-left: 50px;
	background-position: left top;
}
[data-legal][data-legal-safe="1"]:hover::after {
    position: absolute;
    opacity: 0.5;
    color: black;
    content: attr(data-legal-check-at);
    white-space:nowrap;
    font-size: 11px;
    display: block;
    height: 24px;
    background-image: url(/_lib/lc.png);
    background-size: auto 20px;
    background-repeat: no-repeat;
    padding-top: 15px;
    padding-left: 0px;
    background-position: left top;
}

[data-legal-position="left-top"]::after{
	left:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="left-bottom"]::after{
	left:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
[data-legal-position="right-top"]::after{
	right:var(--legal-offset-h);
	top:var(--legal-offset-v);
}
[data-legal-position="right-bottom"]::after{
	right:var(--legal-offset-h);
	bottom:var(--legal-offset-v);
}
/*common_css*/

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */

*,
::before,
::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}
body {
  margin: 0;
  background: #fff;
}
main {
  display: block;
}
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dt {
  font-weight: inherit;
}
dd {
  margin-left: 0;
}
hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
address {
  font-style: inherit;
}
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}
abbr[title] {
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted; /* 2 */
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}
[type="checkbox"] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}
[type="radio"] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}
button,
input {
  /* 1 */
  overflow: visible;
}
button,
select {
  /* 1 */
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
button[disabled],
[type="button"][disabled],
[type="reset"][disabled],
[type="submit"][disabled] {
  cursor: default;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
select::-ms-expand {
  display: none;
}
option {
  padding: 0;
}
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  outline-offset: -2px; /* 1 */
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
details {
  display: block;
}
summary {
  display: list-item;
}
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
caption {
  text-align: left;
}
td,
th {
  vertical-align: top;
  padding: 0;
}
th {
  text-align: left;
  font-weight: bold;
}


/* -------------------------------------
BASE
-------------------------------------*/

/** ================================================================================
		Default
================================================================================ **/
html {
	overflow: auto;
}

body {
	font-family: "Avenir", "Helvetica Neue", "Helvetica", "Arial",
		"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo",
		"游ゴシック", "Yu Gothic", "ＭＳ Ｐゴシック", sans-serif;
	line-height: 1.8;
	position: relative;
	overflow: hidden;
	margin: 0 auto;

	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/*リンク*/

p a {
	text-decoration: underline;
}

p a:hover {
	text-decoration: none;
}

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

a:hover {
	-webkit-transition: 0.3s;
	transition: 0.3s;
}

a.td-u,
.td-u a {
	text-decoration: underline;
}

a.td-u:hover,
.td-u a:hover {
	text-decoration: none;
}

/**PC電話ボタン無効**/
a[href^="tel"],
a[href=""] {
	pointer-events: none;
}

@media screen and (max-width: 520px) {
	a[href^="tel"] {
		pointer-events: auto;
	}
}

/*区切り線*/
hr {
	display: block;
	height: 1px;
	margin: 1em 0;
	padding: 0;
	border: 0;
}

.note {
	display: block;
	padding-left: 1em;
	text-indent: -1em;
}

figure img,
picture img {
	max-width: 100%;
}

@media screen and (max-width: 520px) {
	body {
		min-width: 100%;
	}

	/**post制御**/
	p {
		word-break: break-all;
	}

	table {
		width: 100%;
		word-break: break-all;
	}

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

	/**post制御**/
}

/* -------------------------------------
ベーススタイル設定

1.clearfix,clear
2.font
3.float
4.text-align
5.margin
6.padding
-------------------------------------*/
/*0.clock */
.block {
	display: block;
}

.in-block {
	display: inline-block;
}

.flx {
	display: flex;
}

.relative {
	position: relative;
}

.max100 {
	max-width: 100%;
}

/*1. clearfix,clear */

/* For modern browsers */
.cf:before,
.cf:after {
	display: block;
	overflow: hidden;
	content: "";
}

.cf:after {
	clear: both;
}

.clear {
	clear: both;
}

/*2. font 必要なら追加　優先順位：高*/
body .fw-b {
	font-weight: var(--fw-b);
}

body .fw-bb {
	font-weight: var(--fw-bb);
}

body .fz12 {
	font-size: 0.75rem;
}

body .fz14 {
	font-size: 0.87rem;
}

body .fz15 {
	font-size: 0.94rem;
}

body .fz16 {
	font-size: 16px;
}

body .fz17 {
	font-size: 17px;
}

body .fz18 {
	font-size: 18px;
}

body .fz20 {
	font-size: 20px;
}

body .fz22 {
	font-size: 22px;
}

body .fz24 {
	font-size: 24px;
}

body .fz26 {
	font-size: 26px;
}

body .fz28 {
	font-size: 28px;
}

body .fz30 {
	font-size: 30px;
}

body .fz32 {
	font-size: 32px;
}

body .fz35 {
	font-size: 35px;
}

body .fz40 {
	font-size: 40px;
}

body .fz44 {
	font-size: 44px;
}

body .fz46 {
	font-size: 46px;
}

body .fz54 {
	font-size: 54px;
}

body .fz50 {
	font-size: 50px;
}

body .fz60 {
	font-size: 60px;
}

body .fz70 {
	font-size: 70px;
}

@media screen and (max-width: 520px) {
	body .fz16 {
		font-size: 15px;
	}

	body .fz17 {
		font-size: 15px;
	}

	body .fz18 {
		font-size: 16px;
	}

	body .fz20 {
		font-size: 16px;
	}

	body .fz22 {
		font-size: 16px;
	}

	body .fz24 {
		font-size: 18px;
	}

	body .fz26 {
		font-size: min(5vw, 22px);
	}

	body .fz28 {
		font-size: min(5vw, 24px);
	}

	body .fz30 {
		font-size: min(5vw, 26px);
	}

	body .fz32 {
		font-size: min(5.6vw, 28px);
	}

	body .fz35 {
		font-size: min(6.4vw, 30px);
	}

	body .fz40 {
		font-size: min(6.4vw, 36px);
	}

	body .fz44 {
		font-size: min(6.4vw, 36px);
	}

	body .fz46 {
		font-size: min(6.4vw, 40px);
	}

	body .fz50 {
		font-size: min(6.4vw, 42px);
	}

	body .fz54 {
		font-size: min(6.4vw, 42px);
	}

	body .fz60 {
		font-size: min(8vw, 40px);
	}

	body .fz70 {
		font-size: min(8vw, 48px);
	}
}


.lh2 {
	line-height: 2;
}

.lh15 {
	line-height: 1.5;
}

.lh13 {
	line-height: 1.3;
}

.lh1 {
	line-height: 1;
}

/*3. float */
.f_L {
	display: inline;
	float: left;
}

.f_R {
	display: inline;
	float: right;
}

/*4. text-align 優先順位：高 */
/*4. align 優先順位：高 */
body .t_C,
body .t_CL,
body .t_CR {
	text-align: center;
}

body .t_R {
	text-align: right;
}

body .t_L {
	text-align: left;
}

body .ai_c {
	align-items: center;
}

body .ai_fe {
	align-items: flex-end;
}

body .ai_fs {
	align-items: flex-start;
}

body .ai_s {
	align-items: stretch;
}

body .jc_c {
	justify-content: center;
}

body .jc_fs {
	justify-content: flex-start;
}

body .jc_sb {
	justify-content: space-between;
}

body .jc_sa {
	justify-content: space-around;
}

@media screen and (max-width: 520px) {
	body .t_CL {
		text-align: left;
	}

	body .t_CR {
		text-align: right;
	}
}

body .m0 {
	margin: 0;
}

body .mb0 {
	margin-bottom: 0;
}

body .mb5 {
	margin-bottom: 5px;
}

body .mb10 {
	margin-bottom: 10px;
}

body .mb15 {
	margin-bottom: 15px;
}

body .mb20 {
	margin-bottom: 20px;
}

body .mb25 {
	margin-bottom: 25px;
}

body .mb30 {
	margin-bottom: 30px;
}

body .mb35 {
	margin-bottom: 35px;
}

body .mb40 {
	margin-bottom: 40px;
}

body .mb45 {
	margin-bottom: 45px;
}

body .mb50 {
	margin-bottom: 50px;
}

body .mb55 {
	margin-bottom: 55px;
}

body .mb60 {
	margin-bottom: 60px;
}

body .mb65 {
	margin-bottom: 65px;
}

body .mb70 {
	margin-bottom: 70px;
}

body .mb75 {
	margin-bottom: 75px;
}

body .mb80 {
	margin-bottom: 80px;
}

body .mb85 {
	margin-bottom: 85px;
}

body .mb90 {
	margin-bottom: 90px;
}

body .mb95 {
	margin-bottom: 95px;
}

body .mb100 {
	margin-bottom: 100px;
}

body .mb110 {
	margin-bottom: 110px;
}

body .mb120 {
	margin-bottom: 120px;
}

body .mb130 {
	margin-bottom: 130px;
}

body .mb140 {
	margin-bottom: 140px;
}

body .mb150 {
	margin-bottom: 150px;
}

body .mb200 {
	margin-bottom: 200px;
}

body .mb250 {
	margin-bottom: 250px;
}

body .mt0 {
	margin-top: 0;
}

body .mt5 {
	margin-top: 5px;
}

body .mt10 {
	margin-top: 10px;
}

body .mt15 {
	margin-top: 15px;
}

body .mt20 {
	margin-top: 20px;
}

body .mt25 {
	margin-top: 25px;
}

body .mt30 {
	margin-top: 30px;
}

body .mt35 {
	margin-top: 35px;
}

body .mt40 {
	margin-top: 40px;
}

body .mt45 {
	margin-top: 45px;
}

body .mt50 {
	margin-top: 50px;
}

body .mt55 {
	margin-top: 55px;
}

body .mt60 {
	margin-top: 60px;
}

body .mt65 {
	margin-top: 65px;
}

body .mt70 {
	margin-top: 70px;
}

body .mt75 {
	margin-top: 75px;
}

body .mt80 {
	margin-top: 80px;
}

body .mt85 {
	margin-top: 85px;
}

body .mt90 {
	margin-top: 90px;
}

body .mt95 {
	margin-top: 95px;
}

body .mt100 {
	margin-top: 100px;
}

body .mt110 {
	margin-top: 110px;
}

body .mt120 {
	margin-top: 120px;
}

body .mt130 {
	margin-top: 130px;
}

body .mt140 {
	margin-top: 140px;
}

body .mt150 {
	margin-top: 150px;
}

body .mt200 {
	margin-top: 200px;
}

body .mt250 {
	margin-top: 250px;
}

body .ml0 {
	margin-left: 0;
}

body .ml5 {
	margin-left: 5px;
}

body .ml10 {
	margin-left: 10px;
}

body .ml15 {
	margin-left: 15px;
}

body .ml20 {
	margin-left: 20px;
}

body .ml30 {
	margin-left: 30px;
}

body .mr0 {
	margin-right: 0;
}

body .mr5 {
	margin-right: 5px;
}

body .mr10 {
	margin-right: 10px;
}

body .mr15 {
	margin-right: 15px;
}

body .mr20 {
	margin-right: 20px;
}

body .mr30 {
	margin-right: 30px;
}

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

	/*5. margin 30以上は1/2 */
	body .mb20 {
		margin-bottom: 15px;
	}

	body .mb25 {
		margin-bottom: 15px;
	}

	body .mb30 {
		margin-bottom: 20px;
	}

	body .mb35 {
		margin-bottom: 20px;
	}

	body .mb40 {
		margin-bottom: 20px;
	}

	body .mb45 {
		margin-bottom: 20px;
	}

	body .mb50 {
		margin-bottom: 25px;
	}

	body .mb55 {
		margin-bottom: 25px;
	}

	body .mb60 {
		margin-bottom: 30px;
	}

	body .mb65 {
		margin-bottom: 30px;
	}

	body .mb70 {
		margin-bottom: 35px;
	}

	body .mb75 {
		margin-bottom: 35px;
	}

	body .mb80 {
		margin-bottom: 40px;
	}

	body .mb85 {
		margin-bottom: 40px;
	}

	body .mb90 {
		margin-bottom: 45px;
	}

	body .mb95 {
		margin-bottom: 45px;
	}

	body .mb100 {
		margin-bottom: 50px;
	}

	body .mb110 {
		margin-bottom: 50px;
	}

	body .mb120 {
		margin-bottom: 50px;
	}

	body .mb130 {
		margin-bottom: 50px;
	}

	body .mb140 {
		margin-bottom: 50px;
	}

	body .mb150 {
		margin-bottom: 50px;
	}

	body .mb200 {
		margin-bottom: 140px;
	}

	body .mb250 {
		margin-bottom: 170px;
	}

	body .mt20 {
		margin-top: 15px;
	}

	body .mt25 {
		margin-top: 15px;
	}

	body .mt30 {
		margin-top: 20px;
	}

	body .mt35 {
		margin-top: 20px;
	}

	body .mt40 {
		margin-top: 20px;
	}

	body .mt45 {
		margin-top: 20px;
	}

	body .mt50 {
		margin-top: 25px;
	}

	body .mt55 {
		margin-top: 25px;
	}

	body .mt60 {
		margin-top: 30px;
	}

	body .mt65 {
		margin-top: 30px;
	}

	body .mt70 {
		margin-top: 35px;
	}

	body .mt75 {
		margin-top: 35px;
	}

	body .mt80 {
		margin-top: 40px;
	}

	body .mt85 {
		margin-top: 40px;
	}

	body .mt90 {
		margin-top: 45px;
	}

	body .mt95 {
		margin-top: 45px;
	}

	body .mt100 {
		margin-top: 50px;
	}

	body .mt110 {
		margin-top: 50px;
	}

	body .mt120 {
		margin-top: 50px;
	}

	body .mt130 {
		margin-top: 50px;
	}

	body .mt140 {
		margin-top: 50px;
	}

	body .mt150 {
		margin-top: 50px;
	}

	body .mt200 {
		margin-top: 140px;
	}

	body .mt250 {
		margin-top: 170px;
	}
}

/*6. padding 優先順位:高*/
body .p0 {
	padding: 0;
}

body .pb0 {
	padding-bottom: 0;
}

body .pb5 {
	padding-bottom: 5px;
}

body .pb10 {
	padding-bottom: 10px;
}

body .pb15 {
	padding-bottom: 15px;
}

body .pb20 {
	padding-bottom: 20px;
}

body .pb30 {
	padding-bottom: 30px;
}

body .pb40 {
	padding-bottom: 40px;
}

body .pb50 {
	padding-bottom: 50px;
}

body .pb60 {
	padding-bottom: 60px;
}

body .pb70 {
	padding-bottom: 70px;
}

body .pb80 {
	padding-bottom: 80px;
}

body .pb90 {
	padding-bottom: 90px;
}

body .pb100 {
	padding-bottom: 100px;
}

body .pb100 {
	padding-bottom: 100px;
}

body .pb110 {
	padding-bottom: 110px;
}

body .pb120 {
	padding-bottom: 120px;
}

body .pb130 {
	padding-bottom: 130px;
}

body .pb140 {
	padding-bottom: 140px;
}

body .pb150 {
	padding-bottom: 150px;
}

body .pb200 {
	padding-bottom: 200px;
}

body .pb250 {
	padding-bottom: 250px;
}

body .pt0 {
	padding-top: 0;
}

body .pt5 {
	padding-top: 5px;
}

body .pt10 {
	padding-top: 10px;
}

body .pt15 {
	padding-top: 15px;
}

body .pt20 {
	padding-top: 20px;
}

body .pt30 {
	padding-top: 30px;
}

body .pt40 {
	padding-top: 40px;
}

body .pt50 {
	padding-top: 50px;
}

body .pt60 {
	padding-top: 60px;
}

body .pt70 {
	padding-top: 70px;
}

body .pt80 {
	padding-top: 80px;
}

body .pt90 {
	padding-top: 90px;
}

body .pt100 {
	padding-top: 100px;
}

body .pt110 {
	padding-top: 110px;
}

body .pt120 {
	padding-top: 120px;
}

body .pt130 {
	padding-top: 130px;
}

body .pt140 {
	padding-top: 140px;
}

body .pt150 {
	padding-top: 150px;
}

body .pt200 {
	padding-top: 200px;
}

body .pt250 {
	padding-top: 250px;
}

body .pl0 {
	padding-left: 0;
}

body .pl5 {
	padding-left: 5px;
}

body .pl10 {
	padding-left: 10px;
}

body .pl15 {
	padding-left: 15px;
}

body .pl20 {
	padding-left: 20px;
}

body .pl30 {
	padding-left: 30px;
}

body .pr0 {
	padding-right: 0;
}

body .pr5 {
	padding-right: 5px;
}

body .pr10 {
	padding-right: 10px;
}

body .pr15 {
	padding-right: 15px;
}

body .pr20 {
	padding-right: 20px;
}

body .pr30 {
	padding-right: 30px;
}

@media screen and (max-width: 520px) {
	body .pb20 {
		padding-bottom: 15px;
	}

	body .pb30 {
		padding-bottom: 20px;
	}

	body .pb40 {
		padding-bottom: 20px;
	}

	body .pb50 {
		padding-bottom: 25px;
	}

	body .pb60 {
		padding-bottom: 30px;
	}

	body .pb70 {
		padding-bottom: 35px;
	}

	body .pb80 {
		padding-bottom: 40px;
	}

	body .pb90 {
		padding-bottom: 45px;
	}

	body .pb100 {
		padding-bottom: 50px;
	}

	body .pb110 {
		padding-bottom: 50px;
	}

	body .pb120 {
		padding-bottom: 50px;
	}

	body .pb130 {
		padding-bottom: 50px;
	}

	body .pb140 {
		padding-bottom: 50px;
	}

	body .pb150 {
		padding-bottom: 50px;
	}

	body .pb200 {
		padding-bottom: 140px;
	}

	body .pb250 {
		padding-bottom: 170px;
	}

	body .pt20 {
		padding-top: 15px;
	}

	body .pt30 {
		padding-top: 20px;
	}

	body .pt40 {
		padding-top: 20px;
	}

	body .pt50 {
		padding-top: 25px;
	}

	body .pt60 {
		padding-top: 30px;
	}

	body .pt70 {
		padding-top: 35px;
	}

	body .pt80 {
		padding-top: 40px;
	}

	body .pt90 {
		padding-top: 45px;
	}

	body .pt100 {
		padding-top: 50px;
	}

	body .pt110 {
		padding-top: 50px;
	}

	body .pt120 {
		padding-top: 50px;
	}

	body .pt130 {
		padding-top: 50px;
	}

	body .pt140 {
		padding-top: 50px;
	}

	body .pt150 {
		padding-top: 50px;
	}

	body .pt200 {
		padding-top: 140px;
	}

	body .pt250 {
		padding-top: 170px;
	}
}

/* -------------------------------------
幅
-------------------------------------*/
body .w100p,
body .w1100,
body .w1000,
body .w980,
body .w900,
body .w800,
body .w700,
body .w650,
body .w600 {
	margin-right: auto;
	margin-left: auto;
}

body .w100p {
	width: 100%;
}

body .w1100 {
	width: 1100px;
}

body .w1000 {
	width: 1000px;
}

body .w980 {
	width: 980px;
}

body .w900 {
	width: 900px;
}

body .w800 {
	width: 800px;
}

body .w700 {
	width: 700px;
}

body .w650 {
	width: 650px;
}

body .w600 {
	width: 600px;
}

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

	body .w100p,
	body .w1100,
	body .w1000,
	body .w980,
	body .w900,
	body .w800,
	body .w700,
	body .w650,
	body .w600 {
		margin-right: auto;
		margin-left: auto;
	}

	body .w100p {
		width: 100%;
	}

	body .w1100 {
		width: 100%;
	}

	body .w1000 {
		width: 100%;
	}

	body .w980 {
		width: 100%;
	}

	body .w900 {
		width: 100%;
	}

	body .w800 {
		width: 100%;
	}

	body .w700 {
		width: 100%;
	}

	body .w650 {
		width: 100%;
	}

	body .w600 {
		width: 100%;
	}

	body .w100p>*,
	body .w1100>*,
	body .w1000>*,
	body .w980>*,
	body .w900>*,
	body .w800>*,
	body .w700>*,
	body .w650>*,
	body .w600>* {
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}

	body .w100p>.max,
	body .w100p.max,
	body .w1100>.max,
	body .w1100.max,
	body .w1000>.max,
	body .w1000.max,
	body .w980>.max,
	body .w980.max,
	body .w900>.max,
	body .w900.max,
	body .w800>.max,
	body .w800.max,
	body .w700>.max,
	body .w700.max,
	body .w650>.max,
	body .w650.max,
	body .w600>.max,
	body .w600.max {
		width: 100%;
	}
}

body .calc-bw {
	padding-right: max(calc((100% - var(--base-width)) / 2), 2%);
	padding-left: max(calc((100% - var(--base-width)) / 2), 2%);
}

@media screen and (max-width: 520px) {
	body .calc-bw>* {
		width: 90%;
		margin-right: auto;
		margin-left: auto;
	}

	body .calc-bw>.max {
		width: 100%;
	}
}

/* -------------------------------------
文字装飾
-------------------------------------*/
/**黄色マーカー**/
b.liner {
	background: -webkit-linear-gradient(transparent 40%, #fff552 0%);
	background: linear-gradient(transparent 40%, #fff552 0%);
}

/*縁くくり*/
.edge {
	text-shadow: 1px 1px 0 var(--edge-color),
		-1px 1px 0 var(--edge-color),
		1px -1px 0 var(--edge-color),
		-1px -1px 0 var(--edge-color);
}

/*縁 2px以上*/
.edge2 {
	text-shadow: 2px 2px 1px var(--edge2-color),
		-2px 2px 1px var(--edge2-color),
		2px -2px 1px var(--edge2-color),
		-2px -2px 1px var(--edge2-color),
		2px 0 1px var(--edge2-color),
		0 2px 1px var(--edge2-color),
		-2px 0 1px var(--edge2-color),
		0 -2px 1px var(--edge2-color);
}

/*縁 枠*/
.edge3 {
	color: transparent;

	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: var(--edge3-color);
}

/* -------------------------------------
改行
-------------------------------------*/
.pc {}

.sp {
	display: none;
}

.ib {
	display: inline-block;
}

.flex {
	display: flex;
}

.sponly {
	display: none;
}

@media screen and (max-width: 520px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.sp-ib {
		display: inline-block;
	}
}

@media screen and (max-width: 480px) {
	.sponly {
		display: block;
	}
}

/* -------------------------------------
写真のエフェクト
-------------------------------------*/
/**4辺ぼかし：親要素にかける**/
.blur_w {
	position: relative;
	display: inline-block;
}

.blur_w:after {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: rgba(255, 255, 255, 0);
	box-shadow: inset 0 0 40px #ffffff, inset 0 0 40px #ffffff, inset 0 0 40px #ffffff,
		inset 0 0 40px #ffffff;
}

/**角丸：画像に直接かけれる**/
.radius {
	border-radius: 15px;
}

/**hover：透過**/
a:hover img.hv {
	opacity: var(--opacity);
}

/**hover時画像拡大**/
.scale {
	overflow: hidden;
}

.scale img {
	-webkit-transition: -webkit-transform 0.3s linear;
	-moz-transition: -moz-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	transition: transform 0.3s linear;
}

a:hover .scale img {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);
}



/* -------------------------------------
objedt-fit
-------------------------------------*/
.ojf img {
	width: 100%;
	height: 100%;

	-o-object-fit: cover;
	object-fit: cover;
}

.contain img {
	width: 100%;
	height: 100%;

	-o-object-fit: contain;
	object-fit: contain;
}

/* -------------------------------------
アスペクト比
-------------------------------------*/

.aspA {
	display: block;
	aspect-ratio: 520/347;
}

.aspA img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/**-------------------------------------
地図 動画 iframe
-------------------------------------**/
iframe {
	width: 100%;
}

.youtube {
	width: 100%;
	aspect-ratio: 16/9;
}

.youtube iframe {
	width: 100%;
	height: 100%;
}

/* -------------------------------------
gmap
-------------------------------------*/
/**地図**/
.gmap iframe {
	width: 100%;
	height: 480px;
}

@media screen and (max-width: 480px) {
	.gmap iframe {
		height: 45vh;
	}
}

/* -------------------------------------
PDF埋め込み src="URL末尾#view=Fit"を入れる
-------------------------------------*/
.pdf_wrap {
	width: 800px;
	height: 500px;
}

.pdf_wrap iframe {
	display: block;
	width: 100%;
	height: 100%;
	margin: 30px auto;
}

@media screen and (max-width: 520px) {
	.pdf_wrap {
		width: 90%;
		height: 60vw;
	}
}

/* -------------------------------------
パンくず
-------------------------------------*/
#breadcrumb {
	font-size: 13px;
	width: 100%;
	padding: 0;
	color: var(--bread-c);
	background: var(--bread-bg);
}

/*家アイコン*/
#breadcrumb ol {
	display: flex;
	flex-flow: wrap;
	align-items: center;
	gap: 5px;
	max-width: var(--base-width);
	margin: 0 auto;
	padding:10px 30% 10px 0;
}

#breadcrumb ol:before {
	content: "";
	width: 1.5em;
	height: 1.5em;
	background: url(/common/images/pankuzu.png) no-repeat center / contain;
	opacity: 0.5;
}

#breadcrumb ol li {
	padding: 0 5px;
	position: relative;
	display: flex;
	align-items: center;
}

#breadcrumb ol li+li:before {
	content: "";
	width: 8px;
	height: 8px;
	display: block;
	border-top: 1px solid rgba(var(--gray2), 0.7);
	border-right: 1px solid rgba(var(--gray2), 0.7);
	transform: rotate(45deg);
	margin: 0 15px 0 0;
}

#breadcrumb a {
	text-decoration: underline;
}

#breadcrumb a:hover {
	text-decoration: none;
}

@media screen and (max-width: 520px) {
	#breadcrumb {
		font-size: 12px;
	}

	#breadcrumb ol {
		flex-flow: wrap;
		padding: 5px 2%;
		gap: 0 3px;
	}

	#breadcrumb ol li {
		padding: 0 3px;
		height: auto;
	}
}

/* -------------------------------------
ページャー OWLet
-------------------------------------*/
.pagenation {
	margin: 30px auto;
	text-align: center;
}

.pagenation span {
	line-height: 38px;
	display: inline-block;
	width: 40px;
	height: 40px;
	margin: 5px;
	text-align: center;
	color: var(--pgn-c);
	border: 1px solid var(--pgn-c);
	background: var(--pgn-bg);
}

.pagenation span.page {
	color: var(--pgn-bg);
	background: var(--pgn-c);
}

.pagenation span a {
	display: block;
	width: 100%;
	height: 100%;
	color: var(--pgn-c);
	background: var(--pgn-bg);
}

.pagenation span a:hover {
	color: var(--pgn-bg);
	background: var(--pgn-c);
}

@media screen and (max-width: 520px) {
	.pagenation span {
		line-height: 27px;
		width: 30px;
		height: 30px;
		margin: 3px;
	}

	.pagenation span a {
		min-width: 28px;
	}
}

/**================================================== 
 フォーム
================================================== **/

input,
textarea,
select,
button {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	font-size: 100%;
}

form {
	--alert: #bb0033;
}

/**エラー**/
.alert {
	margin: 5px 0;
	color: var(--alert);
}

form input[type="text"],
form textarea,
form select {
	height: 2.4em;
	width: 100%;
	padding: 10px;
	border-radius: 4px;
	border: none;
	box-shadow: 0 0 0 1px #ccc inset;
	background: #fff;
	appearance: auto;
	-webkit-appearance: auto;
	-moz-appearance: auto;
	margin: 0 0 5px;
}

form select {
	padding: 0 30px;
	width: fit-content;
}

form input[type="text"]:focus,
form textarea:focus,
form select:focus {
	outline: 0;
	box-shadow: 0 0 0 2px var(--alert) inset;
}

form label {
	cursor: pointer;
	display: block;
	width: fit-content;
	line-height: 1;
}

form label+label {
	margin-top: 10px;
}

form input[type="radio"],
form input[type="checkbox"] {
	width: 1em;
	height: 1em;
	margin: 0 5px 0 0;
	accent-color: var(--alert);
}

@media screen and (max-width:520px) {
  form select {
	padding: 0 5px;
	width: 100%;
  }
}



[data-lib="14"]{
	border: none;
    font-size: inherit;
    outline: none;
    padding: 0;
	cursor:pointer;
}/*widget:3814a386-94c4-46a6-b696-12ca3699d3bf*/
/*widget:5e5cc7bb-7531-4684-a761-1a30443a057f*/
/*instance:1381*//*instance mediea*/@media screen and (max-width: 520px){}/*widget:0c6ecc6b-00bf-4739-9e3b-004eaf9f5433*/
/*widget:25b6f49a-51a5-4fe5-a6cf-90117ea6abe2*/
/*widget:8a51eac0-5b71-4585-af9f-e464a31579bd*/
/*instance:440*//*instance mediea*/@media screen and (max-width: 520px){}/*widget:26da5ad7-82fd-4072-9f61-f9e32dedc034*/
/*widget:54bb2232-7331-493e-a88b-57b820a685cb*/
/*widget:537be97e-33c7-4edd-a38d-6bc91a9d29bf*/
/*widget:e8732d12-93b6-48dc-a914-869f9b517625*/
[data-lib="663"]{--titAta:center;
	--titAm:0 auto;
	--titBfz:1.6rem;
	--titBta:center;
	--btnAw:380px;
	--btnAm:15px auto;}[data-lib="663"] .table th{background: rgba(var(--white), 0.9);
	color: rgb(var(--black));}[data-lib="663"] .post-detail{padding: 0 0 80px;}[data-lib="663"] .list-cas{--boxNC_m: 0;}[data-lib="663"] .cate{display: flex;
	justify-content: center;
	align-items: center;
	gap:10px;
	margin: 20px auto;}[data-lib="663"] .cate em{min-width: 6em;
	box-shadow: 0 0 0 1px rgb(var(--gray)) inset;
	background: rgb(var(--white));}[data-lib="663"] .cate em:is(.jhs,[data-lib="663"]  .hs,[data-lib="663"]  .all,[data-lib="663"]  .oth){background: rgb(var(--jhs-hs));
	color: rgb(var(--white));
	box-shadow: none;}[data-lib="663"] .sns{display: flex;
	justify-content: flex-end;
	gap: 5px;
	font-size: 14px;
	margin: 30px 0;}[data-lib="663"] .sns a{display: block;
	padding:4px 10px;
	text-align: center;
	min-width: 100px;
	color:#fff;
	border-radius: 3px;}[data-lib="663"] .sns .line{background: #06c152;}[data-lib="663"] .sns .gb{background: #1877f2;}[data-lib="663"] .sns .tw{background: #000;}[data-lib="663"] .entry-content{border:1px solid rgba(var(--jhs-hs),0.1);
	padding:;
	margin:50px 10%;}[data-lib="663"] .entry-content dt{text-align:center;
	font-weight: bold;
	font-size: 1.1em;
	padding:10px 30px;
	border-bottom:1px solid rgba(var(--jhs-hs),0.1);
	color:rgb(var(--jhs-hs));}[data-lib="663"] .entry-content dd{display: flex;
	flex-flow: column;
	gap: 15px;
	padding:15px 50px;}[data-lib="663"] .entry-content dd a{counter-increment: list;
	text-decoration: underline;
	text-indent: -1.2em;}[data-lib="663"] .entry-content a:before{content: counter(list)". ";}[data-lib="663"] .entry-content dd a:hover{text-decoration: none;}[data-lib="663"] .fixnum{margin-bottom: 30px;}[data-lib="663"] figure{border: 1px solid #f1f1f1;
	padding: 20px;
	text-align: center;
	width: 100%;
	margin: 30px 0;}[data-lib="663"] figure img{display: block;
	margin: 0 auto;}[data-lib="663"] .youtube{width: 90%;
	margin: 20px auto;}[data-lib="663"] .richtext{margin: 30px 5%;}[data-lib="663"] .fixnum h3{font-weight: bold;
	font-size: 1.3em;
	text-align: left;
	font-family: var(--webf);
	padding: 20px;
	margin: 20px auto;
	margin: 0 auto;}[data-lib="663"] .container{width: 768px;}[data-lib="663"] .gallery{display: flex;
	flex-wrap: wrap;
	gap:0.2rem;}[data-lib="663"] .gallery img{flex-grow: 1;
	object-fit: cover;
	height: 300px;
	max-width: 450px;}@media screen and (max-width: 520px){[data-lib="663"]{--titBfz:1.3rem;
	--titBta:left;
	--btnAw:90vw;}[data-lib="663"] .post-detail{padding: 0 0 40px;}[data-lib="663"] .table table{margin: 5px auto;}[data-lib="663"] .entry-content{padding:10px 0 15px;
	margin:30px 0;}[data-lib="663"] .entry-content dt{padding:0;}[data-lib="663"] .entry-content dd{gap:8px
    padding:15px 10px 0 2em;}[data-lib="663"] figure{border: 1px solid #f1f1f1;
	padding: 8px;
	text-align: center;
	margin: 10px 0;}[data-lib="663"] .richtext{margin: 20px auto;}[data-lib="663"] .youtube{width: 100%;}[data-lib="663"] .fixnum h3{font-size: 1.2em;
	padding: 20px 0;}[data-lib="663"] .gallery img{height: auto;
	max-width: 100%;}}/*layout:1*//*layout:17*/:root {
	--base-width: 1100px;
	--over-width-half: calc((100vw - var(--base-width)) / 2);
	--ff: 'Noto Sans JP', sans-serif;
	--webf: 'Shippori Mincho', serif;
	--header-height: 80px;
	--white: 255, 255, 255;
	--black: 40, 40, 40;
	/*中高一貫*/
	--blue: 23, 42, 102;
	--blue2: 113, 125, 162;
	/*高校*/
	--red: 146, 47, 68;
	--red2: 190, 130, 143;
	/*総合*/
	--gray: 80, 80, 80;
	--gray2: 161, 161, 161;

	/**グラデーション**/
	--grad: linear-gradient(to right, rgba(var(--black), 1) 0%, rgba(var(--gray), 1) 100%);
	/**テキストシャドウ**/
	--tshadow: 1px 1px 5px rgba(var(--black), 0.5),
		-1px -1px 5px rgba(var(--black), 0.5),
		1px -1px 5px rgba(var(--black), 0.5),
		-1px 1px 5px rgba(var(--black), 0.5);

	/**.fw-b.fw-bb*/
	--fw-b: 700;
	--fw-bb: 900;
	/**.edge**/
	--edge-color: #555555;
	--edge2-color: #555555;
	--edge3-color: #555555;
	/**.pagenation**/
	--pgn-c: #555555;
	--pgn-bg: #ffffff;
	/**#breadcrumb**/
	--bread-c: rgb(var(--gray2));
	--bread-bg: rgba(var(--gray2), 0.1);
}

@media screen and (max-width:520px) {
	:root {
		--base-width: 100%;
		--over-width-half: 5%;
		--header-height: 55px;
		/**.h-text-img**/
		--hti-space-right: 0 0 0 5%;
		--hti-space-left: 0 5% 0 0;
		--hti-space-center: 20px auto;
		--hti-space: 20px auto;
		--hti-w: 100%;
		/**.h-text 見出し横+テキスト**/
		--ht-lr-space: 0;
		--ht-tb-space: 0;
		--ht-w: 100%;
		/**.list-alternate リスト互い違い**/
		--altxt-spflex: column;
		--al-w: 95%;
		--alimg-space: 0 5%;
		--alimg-space-even: 0 5%;
		--altxt-space: 0 5%;
		--altxt-space-even: 0 5%;
	}
}

body {
	font-family: var(--ff);
	min-width: var(--base-width);
}

@media screen and (max-width:520px) {
	body {
		font-size: 14px;
	}
}

/**================================================================================
レイアウト
================================================================================**/

/**------------------------------ 
横並びリスト 均等
box nth column
.boxNC>li
 ------------------------------**/

:root {
	--boxNC_w: 100%;
	--boxNC_m: 30px auto;
	--boxNC_gap: 20px 5%;
	--boxNC_jc: flex-start;
	--boxNC_ai: stretch;
	--boxNC_fflow: wrap;

	--boxNC_child_w: calc(90% / 3);
}

.boxNC {
	display: flex;
	flex-flow: var(--boxNC_fflow);
	justify-content: var(--boxNC_jc);
	align-items: var(--boxNC_ai);
	width: var(--boxNC_w);
	margin: var(--boxNC_m);

	gap: var(--boxNC_gap);
}

.boxNC>* {
	width: var(--boxNC_child_w);
}

/**------------------------------ 
スマホ
 ------------------------------**/
@media screen and (max-width:520px) {
	:root {
		--boxNC_w: 100%;
		--boxNC_m: 20px auto;
		--boxNC_gap: 20px;
		--boxNC_child_w: 100%;
	}
}

/**------------------------------ 
横並びリスト 2カラム不均等
box left right
.boxLR>.left+.right
 ------------------------------**/
:root {
	--boxLR_w: 100%;
	--boxLR_m: 30px auto;
	--boxLR_gap: 50px;
	--boxLR_1_w: 50%;
	--boxLR_2_w: calc((100% - var(--boxLR_1_w)) - var(--boxLR_gap));
	--boxLR_3_w: 0;
	--boxLR_jc: flex-start;
	--boxLR_ai: stretch;
	--boxLR_fflow: wrap;
}

.boxLR {
	display: flex;
	flex-flow: var(--boxLR_fflow);
	justify-content: var(--boxLR_jc);
	align-items: var(--boxLR_ai);
	width: var(--boxLR_w);
	margin: var(--boxLR_m);

	gap: var(--boxLR_gap);
}

.boxLR>.LR1 {
	width: var(--boxLR_1_w);
}

.boxLR>.LR2 {
	width: var(--boxLR_2_w);
}

.boxLR>.LR3 {
	width: var(--boxLR_3_w);
}

@media screen and (max-width:520px) {
	:root {
		--boxLR_w: var(--base-width);
		--boxLR_m: 30px auto;
		--boxLR_gap: 10px;
		--boxLR_1_w: 100%;
		--boxLR_2_w: 100%;
		--boxLR_3_w: 100%;
		--boxLR_1_m: 0;
		--boxLR_2_m: 0;
		--boxLR_3_m: 0;
	}

	.boxLR>.LR1 {
		margin: var(--boxLR_1_m);
	}

	.boxLR>.LR2 {
		margin: var(--boxLR_2_m);
	}

	.boxLR>.LR3 {
		margin: var(--boxLR_3_m);
	}

}

/**------------------------------ 
横並びリスト 2カラム不均等 互い違い
box odd even
boxOE>li>.OE1+.OE2+.OE3
 ------------------------------**/
:root {
	--boxOE_w: var(--base-width);
	--boxOE_m: 30px auto;
	--boxOE_gap: 10px;
	--boxOE_1_w: 60%;
	--boxOE_2_w: calc(100% - var(--boxOE_1_w) - var(--boxOE_gap));
	--boxOE_3_w: 0;
}

.boxOE>* {
	display: flex;
	flex-wrap: wrap;
	width: var(--boxOE_w);
	margin: var(--boxOE_m);

	gap: var(--boxOE_gap);
}

.boxOE>*:nth-child(odd) {
	flex-direction: row;
}

.boxOE>*:nth-child(even) {
	flex-direction: row-reverse;
}

.boxOE>*>.OE1 {
	width: var(--boxOE_1_w);
}

.boxOE>*>.OE2 {
	width: var(--boxOE_2_w);
}

.boxOE>*>.OE3 {
	width: var(--boxOE_3_w);
}

@media screen and (max-width:520px) {
	:root {
		--boxOE_w: var(--base-width);
		--boxOE_m: 20px auto;
		--boxOE_gap: 10px;
		--boxOE_1_w: 100%;
		--boxOE_2_w: 100%;
		--boxOE_3_w: 100%;
	}

	.boxOE>*:nth-child(odd) {
		flex-direction: row;
	}

	.boxOE>*:nth-child(even) {
		flex-direction: row;
	}
}

/**================================================================================
サイトで必ず異なる
================================================================================**/

.webf {
	font-family: var(--webf);
}

.big1 {
	font-size: 1.1em;
	line-height: 1;
}

.big2 {
	font-size: 1.2em;
	line-height: 1;
}

.big3 {
	font-size: 1.3em;
	line-height: 1;
}

.big4 {
	font-size: 1.4em;
	line-height: 1;
}

.big5 {
	font-size: 1.5em;
	line-height: 1;
}

.big6 {
	font-size: 1.6em;
	line-height: 1;
}

.big7 {
	font-size: 1.7em;
	line-height: 1;
}

.tshadow{
  text-shadow: var(--tshadow);
}


.sec-bg01 {
	background: rgb(var(--gray2), 0.1);
}

.sec-bg02 {
	background: rgb(var(--blue), 0.05);
}

.sec-bg03 {
	background: rgb(var(--red), 0.05);
}

.itoakira {
	position: relative;
}

.itoakira:after {
	content: "Photo Akira Ito / aifoto";
	font-size: 9px;
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: rgb(var(--white));
}


.note2 {
	text-indent: -2em;
	padding-left: 2em;
}

/**-------------------------------------
アイコン
-------------------------------------**/
.em em,
em.em {
	font-size: 0.9rem;
	display: inline-block;
	padding: 3px 10px;
	text-align: center;
	font-style: normal;
}

.time {
	font-style: normal;
	font-size: 1rem;
	display: inline-block;
}

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

	.em em,
	em.em {
		font-size: 0.8rem;
		padding: 2px 5px;
	}
}

/**-------------------------------------
見出し
-------------------------------------**/
.titZ {
	height: 250px;
	background: rgb(var(--jhs-hs));
	padding: var(--header-height) 0 0;
	position: relative;
	display: flex;
	align-items: center;
}

.titZ picture {
	position: absolute;
	top: 0;
	right: 0;
	width: clamp(550px, 45vw, 800px);
	height: 400px;

	z-index: 1;
}

.titZ picture:after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	background: rgb(var(--jhs-hs));
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0.1;
}

/**写真家クレジットがあるから右下付きは変更できない**/
.titZ picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right bottom;
}

.titZ>* {
	z-index: 2;
}

.titZ h1 {
	color: rgb(var(--white));
	font-family: var(--webf);
	font-size: 2.5rem;
	display: flex;
	align-items: center;
	gap: 30px;
	text-shadow: 1px 1px 8px rgba(var(--jhs-hs), 0.4),
		-1px -1px 8px rgba(var(--jhs-hs), 0.4),
		1px -1px 8px rgba(var(--jhs-hs), 0.4),
		-1px 1px 8px rgba(var(--jhs-hs), 0.4);
}

.titZ h1:before {
	content: "";
	display: block;
	height: 1px;
	width: var(--over-width-half);
	background: rgb(var(--white));
}

.titZ + #breadcrumb {
	margin-bottom: 80px;
}

@media screen and (max-width:520px) {
	.titZ {
		padding: 0;
		height: auto;
		flex-flow: column-reverse;
		align-items: flex-end;
	}

	.titZ picture {
		position: relative;
		top: auto;
		right: auto;
		width: 95%;
		height: 50vw;
		margin: 18px 0 0;
	}

	.titZ h1 {
		width: 100%;
		font-size: 1.3rem;
		gap: 10px;
		margin: 10px 0 13px;
	}

	.titZ + #breadcrumb {
		margin-bottom: 0;
	}
}

:root {
	--titAc: rgb(var(--black));
	--titAm: 30px 0;
	--titAta: left;
	--titAfz: 1rem;
}

.titA {
	font-family: var(--webf);
	font-size: var(--titAfz);
	margin: var(--titAm);
	text-align: var(--titAta);
	color: var(--titAc);
}

.titA span {
	display: block;
	font-size: 2.5em;
	line-height: 1.3;
}

:root {
	--titBc: rgb(var(--black));
	--titBm: 0;
	--titBta: left;
	--titBfz: 2.25rem;
}

.titB {
	font-family: var(--webf);
	font-size: var(--titBfz);
	margin: var(--titBm);
	text-align: var(--titBta);
	color: var(--titBc);
	line-height: 1.5;
}

:root {
	--titCc: rgb(var(--white));
	--titCm: 0;
	--titCp: 15px 30px;
	--titCta: left;
	--titCfz: 1.3rem;
	--titCbg: rgb(var(--black));
	--titCw: fit-content;
	--titCbr: 3px;
}

.titC {
	width: var(--titCw);
	font-family: var(--webf);
	font-size: var(--titCfz);
	margin: var(--titCm);
	text-align: var(--titCta);
	color: var(--titCc);
	line-height: 1.3;
	background: var(--titCbg);
	padding: var(--titCp);
	border-radius: var(--titCbr);
}

@media screen and (max-width:520px) {
	:root {
		--titAm: 15px 0;
		--titAfz: 0.8rem;
	}

	.titA span {
		font-size: 2.2em;
	}

	:root {
		--titBfz: 1.8rem;
	}

	:root {
		--titCp: 10px 20px;
		--titCfz: 1.1rem;
	}

}

/**-------------------------------------
ボタン hoverスライド動作
-------------------------------------**/
.hv-slide {
	--hvsld: rgb(var(--black));
	--hvc: rgb(var(--white));
}

/**------------------------------ 
ボタン
 ------------------------------**/

:root {
	--btnAw: 100%;
	--btnAta: left;
	--btnAc: rgb(var(--black));
	--btnAbg: rgb(var(--white));
	--btnAbd: rgb(var(--gray));
	--btnAm: 15px 0;
	--btnAfz: 1em;
	--btnAp: 20px;

	--btnAhvbg: rgb(var(--black));
	--btnAhvc: rgb(var(--white));
}

.btnA {
	font-size: var(--btnAfz);
	position: relative;
	display: block;
	width: var(--btnAw);
	margin: var(--btnAm);
	padding: var(--btnAp);
	background: var(--btnAbg);
	color: var(--btnAc);
	cursor: pointer;
	text-align: var(--btnAta);
	border: 1px solid var(--btnAbd);
	position: relative;
	z-index: 1;
	transition: .4s
}

.btnA:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid var(--btnAc);
	border-right: 1px solid var(--btnAc);
	position: absolute;
	top: calc(50% - 4px);
	right: 10px;
	transform: rotate(45deg);
	z-index: 2;
}

.btnA:before {
	background: var(--btnAhvbg);
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}

.btnA:hover {
	color: var(--btnAhvc);
}

.btnA:hover svg {
	fill: var(--btnAhvc);
}

.btnA:hover:after {
	border-top: 1px solid var(--btnAhvc);
	border-right: 1px solid var(--btnAhvc);
}

.btnA:hover:before {
	transform: scale(1, 1);
}


:root {
	--btnBfz: 1.75rem;
	--btnBc: rgb(var(--black));
	--btnBbd: rgb(var(--black));
	--btnBp: 30px;
}

.btnB {
	position: relative;
	display: block;
	color: var(--btnBc);
	font-family: var(--webf);
	font-size: var(--btnBfz);
	padding: var(--btnBp);
	border-bottom: 4px solid var(--btnBbd);
}

.btnB:after {
	content: "";
	width: 14px;
	height: 14px;
	border-top: 2px solid var(--btnBc);
	border-right: 2px solid var(--btnBc);
	position: absolute;
	top: calc(50% - 7px);
	right: 30px;
	transform: rotate(45deg);
	z-index: 2;
}

.btnB small {
	display: block;
	font-size: 0.5em;
}

@media screen and (max-width: 520px) {
	:root {
		--btnAw: clamp(100%, 100%, 90vw);
	}

	.btnA {
		padding: 15px;
	}
}

/**================================================== 
 テーブル
================================================== **/

/* -------------------------------------
テーブル
-------------------------------------*/
.table table {
	width: 100%;
	margin: 30px auto;
	border-spacing: 1px;
	border-collapse: separate;
	background: rgb(var(--gray2));
}

.table th,
.table td {
	padding: 15px;
	text-align: left;
	vertical-align: top;
	background: rgb(var(--white));
}

.table th {
	width: 25%;
	vertical-align: middle;
	background: rgb(var(--black));
	color: rgb(var(--white));
}

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

	.table table,
	.table tbody,
	.table tr,
	.table th,
	.table td {
		display: block;
		border: none;
	}

	.table table {
		border-bottom: 1px solid #aaaaaa;
	}

	.table th,
	.table td {
		padding: 10px;
		border: 1px solid #aaaaaa;
		border-bottom: none;
	}

	.table th {
		width: 100%;
	}
	
	.table td:empty{
	  display: none;
	}
}


/* -------------------------------------
テーブル
-------------------------------------*/
.tableA table {
	width: 100%;
	margin: 30px auto;
	border-spacing: 1px;
	border-collapse: separate;
	background: rgb(var(--gray2));
}

.tableA :is(th, td) {
	padding: 15px;
	text-align: left;
	vertical-align: top;
	background: rgb(var(--white));
}

.tableA th {
	width: 25%;
	vertical-align: middle;
	background: rgb(var(--black));
	color: rgb(var(--white));
}

.tableA tr td:first-of-type {
	font-weight: bold;
}

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

	.tableA table {
		margin: 15px auto;
	}

	.tableA :is(table, tbody, tr, th, td) {
		display: block;
		border: none;
		background: rgb(var(--white));
	}

	.tableA :is(th, td) {
		padding: 10px;
		border: none;
		border-bottom: none;
	}

	.tableA th {
		width: auto;
		padding: 10px 5px;
		border-left: 1px solid rgba(var(--white), 0.2);
		background: rgb(var(--black));
	}

	.tableA td {
		padding: 3px;
	}

	.tableA td+td {
		border-top: 1px dotted rgba(var(--gray), 0.2);
	}

	.tableA tr {
		border-bottom: 1px solid rgb(var(--gray2));
		padding: 5px;
	}

	.tableA tr:first-of-type {
		padding: 0;
		display: flex;
		justify-content: space-between;
		width: 100%;
		white-space: nowrap;
		background: rgb(var(--black));
	}

}

/**------------------------------ 
 ------------------------------**/

.tableB table {
	font-size: 0.9rem;
	width: 100%;
	margin: 30px auto;
	border-spacing: 1px;
	border-collapse: separate;
	background: rgb(var(--gray2));
}

.tableB :is(th, td) {
	padding: 8px;
	text-align: left;
	vertical-align: top;
	background: rgb(var(--white));
}

.tableB th {
	vertical-align: middle;
	background: rgb(var(--black));
	color: rgb(var(--white));
}

@media screen and (max-width: 520px) {
	.tableB table {
		margin: 15px auto;
		background: none;
	}

	.tableB :is(table, tbody, tr, th, td) {
		display: block;
	}

	.tableB tbody {
		display: grid;
		grid-template-columns: auto auto;
		grid-auto-rows: auto;
	}

	.tableB tr {
		display: grid;
		grid-template-columns: auto;
		grid-auto-rows: auto;
		margin: 0 0 10px;
		border-top: 1px solid rgb(var(--gray2));
		border-right: 1px solid rgb(var(--gray2));
	}

	.tableB :is(th, td) {
		padding: 5px;
		border-bottom: 1px solid rgb(var(--gray2));
	}
}


.tableC table {
	width: 100%;
	margin: 30px auto;
	border-spacing: 1px;
	border-collapse: separate;
	background: rgb(var(--gray2));
}

.tableC th,
.tableC td {
	padding: 15px;
	text-align: left;
	vertical-align: top;
	background: rgb(var(--white));
}

.tableC th {
	vertical-align: middle;
	background: rgb(var(--black));
	color: rgb(var(--white));
}

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

	.tableC th,
	.tableC td {
		font-size: 0.8rem;
		width: auto;
		padding: 5px;
	}
}


/**================================================== 
 スライド
	  <div class="sw1_btn"><div class="sw1-prev"></div><div class="sw1-pagination"></div><div class="sw1-next"></div></div>
================================================== **/
.sw1_btn {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 80px;
	margin: 25px auto;
}

.sw1-prev,
.sw1-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 1px solid rgba(var(--gray2), 0.1);
	background: rgba(var(--gray2), 0.1);
	cursor: pointer;
}

.sw1-prev:before,
.sw1-next:after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid rgb(var(--gray2));
	border-left: 1px solid rgb(var(--gray2));
	transform: rotate(-45deg);
}

.sw1-prev:before {
	transform: rotate(-45deg);
}

.sw1-next:after {
	transform: rotate(135deg);
}

.sw1-pagination.swiper-horizontal>.swiper-pagination-bullets,
.sw1-pagination.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	width: auto;
}

.sw1-pagination {
	width: auto;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.sw1-pagination .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	border-radius: 50px;
	border: 1px solid rgba(var(--gray2), 1);
	background: rgb(var(--white));
}

.sw1-pagination .swiper-pagination-bullet-active {
	background: rgba(var(--gray2), 1);
}

@media screen and (max-width:520px) {
	.sw1_btn {
		gap: 40px;
		margin: 5px auto;
	}

	.sw1-prev,
	.sw1-next {
		width: 32px;
		height: 32px;
	}

	.sw1-prev:before,
	.sw1-next:after {
		width: 6px;
		height: 6px;
	}

	.sw1-pagination .swiper-pagination-bullet {
		width: 8px;
		height: 8px;
	}
}

.sw2_btn {
	width: 50%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0 auto;
	font-family: var(--webf);
	letter-spacing: 5px;
}

.sw2_btn .swiper-pagination-current {
	color: rgb(var(--jhs-hs));
	font-size: 1.1rem;
}

.sw2-prev,
.sw2-next {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	cursor: pointer;
}

.sw2-prev:before,
.sw2-next:after {
	content: "";
	display: block;
	width: 8px;
	height: 8px;
	border-top: 1px solid rgb(var(--gray2));
	border-left: 1px solid rgb(var(--gray2));
	transform: rotate(-45deg);
}

.sw2-prev:before {
	transform: rotate(-45deg);
}

.sw2-next:after {
	transform: rotate(135deg);
}

.sw2-pagination {
	width: auto;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (max-width:520px) {
	.sw2_btn {
		gap: 40px;
		margin: 5px auto;
	}

	.sw2-prev,
	.sw2-next {
		width: 32px;
		height: 32px;
	}

	.sw2-prev:before,
	.sw2-next:after {
		width: 6px;
		height: 6px;
	}

}

/**================================================================================
フォーム周り
form table
form table th .require
form .form_button button or input = submit
================================================================================**/

.owlet-input-sample {
	color: rgba(var(--black), 0.5);
}

.-w-rules-body {
	width: 100%;
	/*margin: 20px auto;*/
	text-align: center;

	/*border: 1px solid rgba(var(--black), 0.2);
	height: 200px;*/
	/*padding: 15px;*/
	overflow-y: auto;
}

.-w-rules-agree{
  font-size: 1rem;
	margin: 50px auto;
	color: var(--alert);
	font-family: var(--ff);
}

.-w-rules-agree label {
	width: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	margin:0 auto 20px;
	color: rgb(var(--black));
}

.-w-rules-agree .require {
	position: static;
	margin-left: 15px;
}

.-w-back-btn,
.-w-form-btn {
	--btnAw: 50%;
	--btnAm: 20px auto;
	--btnAta: center;
}


/**アウレットフォーム用**/
form input.owlet-input-name-mei,
form input.owlet-input-name-sei {
	width: 10em;
	margin: 0 5px 5px;
}

form input.zip1,
form input.zip2,
form input.zip3 {
	width: 5em;
	margin: 0 5px 5px;
}

form input.zip2addr {
	height: 2.4em;
	padding: 0 15px;
	border-radius: 4px;
	border: none;
	box-shadow: 0 0 0 1px #ccc inset;
	margin: 0 5px 5px;
	background: rgba(var(--black), 0.1);
}

form input.address1 {
	width: calc(100% - 8em);
}

form input.owlet-input-tel1,
form input.owlet-input-tel2,
form input.owlet-input-tel3 {
	width: 5em;
	margin: 0 5px 5px;
}

/**必須**/
.require {
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 2em;
	position: absolute;
	top: 20px;
	right: 10px;
	display: inline-block;
	width: 3em;
	height: 2em;
	text-align: center;
	color: #ffffff;
	border-radius: 3px;
	background: #cc0000;
}

@media screen and (max-width:520px) {
	.-w-rules-body {
		width: 100%;
		padding: 0;
		font-size: 0.9rem;
	}
	
	.-w-rules-agree{
		margin: 30px auto 50px;
		font-size: 0.9rem;
	}

	.-w-rules-agree label {
		width: 100%;
	}

  .-w-back-btn,
	.-w-form-btn {
		--btnAw: 100%;
	}

	form input.owlet-input-name-mei,
	form input.owlet-input-name-sei {
		width: 7em;
		margin: 0 5px 5px;
	}

	form input.zip1,
	form input.zip2,
	form input.zip3 {
		width: 5em;
		margin: 0 0px 5px;
	}

	form input.zip2addr {
		height: 2.4em;
		padding: 0 15px;
		border-radius: 4px;
		border: none;
		box-shadow: 0 0 0 1px #ccc inset;
		margin: 0 5px 5px;
		background: rgba(var(--black), 0.1);
	}

	form input.address1 {
		width: 100%;
	}
}

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

.sec-contact-01 {
	width: var(--base-width);
	margin: 0 auto 80px;

	--titBm: 0 0 30px;
	--titBfz: 2rem;
}

.tel {
	display: block;
	font-family: var(--webf);
	font-size: 2.4rem;
	margin: 5px 0;
}

.form {
	font-family: var(--webf);
	padding: 30px 0 50px;
	font-size: 1.2rem;
}

.form table {
	font-family: var(--ff);
	font-size: 1rem;
	width: 100%;
	margin: 30px auto;
	border: 1px dotted rgb(var(--black), 0.5);
}

.form table th,
.form table td {
	padding: 20px;
	font-weight: normal;
}

.form table th {
	width: 25%;
	position: relative;
	font-weight: bold;
}

.form table tr:nth-child(odd) {
	background: rgba(var(--gray2), 0.1);
}

@media screen and (max-width:520px) {
	.sec-contact-01 {
		width: 90%;
		margin: 40px auto;

		--titBm: 0 0 20px;
		--titBfz: 1.6rem;
	}

	.tel {
		display: block;
		font-family: var(--webf);
		font-size: 1.9rem;
		margin: 5px 0;
	}

	.form {
		padding: 0;
		font-size: 1rem;

	}

	.form table,
	.form tbody,
	.form tr {
		display: block;
		width: 100%;
	}

	.form table {
		margin: 30px -6%;
		width: 112%;
	}

	.form table th,
	.form table td {
		display: block;
		width: 100%;
	}

	.form table th {
		padding-bottom: 0;
	}

}

/**================================================== 
header
================================================== **/
header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: var(--header-height);
	z-index: 90;
}

header .logo {
	width: 300px;
	height: var(--header-height);
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(var(--white));
}

header .logo svg {
	width: 80%;
	aspect-ratio: 310/32;
	fill: rgb(var(--black));
}

header .btn-seito,
header .btn-sotu {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 80px;
	height: var(--header-height);
	position: fixed;
	top: 0;
	font-size: 0.68rem;
}

header .btn-seito {
	right: 160px;
	background: rgb(var(--white));
	border: 1px solid rgb(var(--gray));
	border-top: none;
}

header .btn-sotu {
	right: 80px;
	background: rgb(var(--gray));
	color: rgb(var(--white));
}

header .btn-seito svg,
header .btn-sotu svg {
	display: block;
	width: 46px;
	aspect-ratio: 50/36;
}

header .btn-seito svg {
	fill: rgb(var(--black));
}

header .btn-sotu svg {
	fill: rgb(var(--white));
}

/**------------------------------ 
ハンバーガーjqueryなし
 ------------------------------**/
.hamburger {
	position: fixed;
	top: 0;
	right: 0;
	display: flex;
	height: 80px;
	width: 80px;
	justify-content: center;
	align-items: center;
	z-index: 90;
	background: rgba(var(--black), 1);
}

#hamburger-check {
	display: none;
}

/**タップされる前 open**/
.hamburger span,
.hamburger span:before,
.hamburger span:after {
	content: '';
	display: block;
	height: 3px;
	width: 32px;
	border-radius: 1px;
	background-color: #ffffff;
	position: absolute;
}

.hamburger span:before {
	bottom: 10px;
}

.hamburger span:after {
	top: 10px;
}

/**タップされたとき close**/
#hamburger-check:checked~.hamburger span {
	background-color: rgba(255, 255, 255, 0);
}

#hamburger-check:checked~.hamburger span::before {
	bottom: 0;
	transform: rotate(45deg);
}

#hamburger-check:checked~.hamburger span::after {
	top: 0;
	transform: rotate(-45deg);
}

/**------------------------------ 
	 グローバルナビ
 ------------------------------**/
header nav .gnav {
	width: 100%;
	height: auto;
	overflow-y: auto;
	position: fixed;
	top: 80px;
	right: -100%;
	/*leftの値を変更してメニューを画面外へ*/
	z-index: 80;
	background-color: rgba(var(--white), 1);
	transition: all 0.5s;
	/*アニメーション設定*/
	padding: 30px;
	display: flex;
}

#hamburger-check:checked~.gnav {
	right: 0;
	/*メニューを画面内へ*/
}

header nav .gnav li {
	width: 28%;
}

header nav .gnav li.sogo {
	width: 44%;
}

/**------------------------------ 
 トグル動作
 ------------------------------**/
.toggle {
	display: none;
}

header .Label {
	padding: 0.5em 1em 0.5em 1.7em;
	display: block;
	color: rgb(var(--white));
	font-family: var(--webf);
	font-size: 1.2rem;
	position: relative;
	border-left: 2px solid rgb(var(--white));
}

.nav01 {
	background: rgb(var(--gray));
}

.nav02 {
	background: rgb(var(--blue));
}

.nav03 {
	background: rgb(var(--red));
}

header .content {
	padding: 20px;
	display: flex;
	flex-flow: wrap;
	align-items: flex-start;
	gap: 10px 20px;
	margin: 0 0 10px;
}

header .content a {
	position: relative;
	padding: 0 0 0 20px;
	width: calc((100% - 20px) / 2);
	line-height: 1.5;
}

header .content a::before {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid rgb(var(--white));
	border-right: 2px solid rgb(var(--white));
	position: absolute;
	top: calc(50% - 3px);
	left: 0;
	transform: rotate(45deg);
}

header .content .sec{
  margin-top:-10px;
}
header .content .sec a{
  display:block;
  margin: 8px 0 0;
}
header .content .sec a:before{
  content: "- ";
	width:auto;
	height: auto;
	border:none;
	position:static;
	transform:none;
}

header .content a:hover {
	text-decoration: underline;
}

.nav01+.content {
	color: rgb(var(--gray));
}

.nav01+.content a::before {
	border-color: rgb(var(--gray));
}

.nav02+.content a {
	color: rgb(var(--blue));
	width: 100%;
}

.nav02+.content a::before {
	border-color: rgb(var(--blue));
}

.nav03+.content a {
	color: rgb(var(--red));
	width: 100%;
}

.nav03+.content a::before {
	border-color: rgb(var(--red));
}

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

	header {
		position: relative;
		width: 100%;
	}

	header .logo {
		width: calc(100% - (55px * 3) - 10px);
	}

	header .btn-seito,
	header .btn-sotu {
		gap: 3px;
		width: 60px;
		font-size: 0.4rem;
		letter-spacing: -1px;
	}

	header .btn-seito {
		right: 115px;
	}

	header .btn-sotu {
		right: 55px;
	}

	header .btn-seito svg,
	header .btn-sotu svg {
		width: 40px;
	}
	


	/**------------------------------ 
	 ハンバーガーメニュー
 ------------------------------**/
	.hamburger {
		height: 55px;
		width: 55px;
	}

	.hamburger span,
	.hamburger span:before,
	.hamburger span:after {
		content: '';
		display: block;
		width: 22px;
	}

	.hamburger span:before {
		bottom: 8px;
	}

	.hamburger span:after {
		top: 8px;
	}

	/**------------------------------ 
	 グローバルナビ
 ------------------------------**/

	header nav .gnav {
		width: 100%;
		height: calc(100vh - 55px);
		overflow-y: auto;
		padding: 15px 15px 5px;
		display: block;
		top: 55px;
	}

	header nav .gnav li {
		width: 100%;
	}

	header nav .gnav li.sogo {
	  width: 100%;
  }

	/**------------------------------ 
	 トグル動作
 ------------------------------**/
	header .Label::before {
		/*タイトル横の矢印*/
		content: "";
		width: 16px;
		height: 2px;
		background: rgb(var(--white));
		position: absolute;
		top: calc(50% - 1px);
		right: 10px;
		border-radius: 2px;
	}

	header .Label::after {
		content: "";
		width: 2px;
		height: 16px;
		background: rgb(var(--white));
		position: absolute;
		top: calc(50% - 8px);
		right: 17px;
		border-radius: 2px;
	}

	header .Label,
	header .content {
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		transform: translateZ(0);
		transition: all 0.3s;
	}

	header .content {
		height: 0;
		margin-bottom: 10px;
		padding: 0 5px;
		overflow: hidden;
		display: block;
	}

	header .content a {
		display: block;
		width: 100%;
		padding: 8px 0 8px 15px;
	}

	.toggle:checked+.Label+.content {
		/*開閉時*/
		height: auto;
		padding: 5px;
		transition: all .3s;
	}

	.toggle:checked+.Label::after {
		display: none;
	}
}

/**================================================== 
 フッター固定ボタン
================================================== **/
.fix {
	position: fixed;
	z-index: 80;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: flex-end;
	background: rgb(var(--white));
}

.fix a {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	height: 55px;
	line-height: 1;
	color: rgb(var(--white));
	padding: 0 20px;
	font-size: 1.1rem;
	position: relative;
	z-index: 1;
	background: var(--fixbg);
	border: 1px solid var(--fixbg);
}

.fix a svg,
.fix a img {
	aspect-ratio: 40 / 27;
	width: 42px;
	object-fit: contain;
}

.fix a svg {
	fill: rgb(var(--white));
}

.fix a:hover {
	background: rgb(var(--white));
	color: var(--fixbg);
}

.fix a:hover svg {
	fill: var(--fixbg);
}

.fix .link_ops {
	--fixbg: rgb(var(--gray));
}

.fix .link_mail {
	--fixbg: rgb(var(--black));
}

.fix .link_line {
	--fixbg: #06c755;
}

.fix .link_line + .link_line{
  border-left:1px solid rgb(var(--white));
}

@media screen and (max-width:520px) {
	.fix {
		width: 100%;
	}

	.fix a {
		flex: 1;
		font-size: 0.78rem;
		padding: 0 5px;
		white-space: nowrap;

		gap: 0;
		height: 40px;
	}

	.fix a svg,
	.fix a img {
		width: 25px;
	}
}

/**================================================== 
 フッター
================================================== **/
:is(.pagetop,.pagetop2,.pagetop3) {
	display: block;
	background: rgb(var(--gray));
	color: rgb(var(--white));
	text-align: center;
	font-weight: normal;
	padding: 20px 0;
	line-height: 1;
}
.pagetop2{
  background: rgba(var(--blue),0.8);
}
.pagetop3{
  background: rgba(var(--red),0.8);
}

:is(.pagetop,.pagetop2,.pagetop3):before {
	content: "";
	content: "";
	width: 12px;
	height: 12px;
	border-top: 2px solid rgb(var(--white));
	border-right: 2px solid rgb(var(--white));
	transform: rotate(-45deg);
	z-index: 2;
	display: block;
	margin: 0 auto;
}

footer {
	background: rgb(var(--black));
	color: rgb(var(--white));
	padding: 90px var(--over-width-half) 220px;
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	grid-template-columns: 380px 2fr;
}

footer i {
	font-style: normal;
	font-family: var(--webf);
	font-size: clamp(3rem, 5vw, 5rem);
	opacity: 0.2;
	position: absolute;
	bottom: 80px;
	right: 10px;
	line-height: 1;
}

footer .logo {
	margin: 0 0 50px;
}

footer .logo svg {
	width: 310px;
	aspect-ratio: 310/32;
	fill: rgb(var(--white));
}

footer .address {
	grid-row: 2/3;
	grid-column: 1/2;
	font-family: var(--webf);
}

footer .sns {
	grid-row: 4/5;
	grid-column: 1/2;
	display: flex;
	gap: 15px;
	margin: 0 0 25px;
	text-align: center;
}

footer .sns svg {
	fill: rgb(var(--white));
	aspect-ratio: 30/34;
	width: 32px;
}

footer .sns p{
  font-size:12px;
  text-align: center;
  white-space:nowrap;
  color:rgb(var(--white));
  margin: -10px 0 0;
}

footer .copyright {
	grid-row: 5/6;
	grid-column: 1/2;
	color: rgba(var(--white), 0.4);
	font-size: 0.8rem;
}

footer nav {
	padding: 0 0 0 140px;
	grid-row: 1/6;
	grid-column: 2/3;
	gap: 20px;

	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;
}

footer nav .sitemap {
	grid-row: 1/3;
	grid-column: 1/2;
}

footer nav .sitemap-jhs {
	grid-row: 1/2;
	grid-column: 2/3;
}

footer nav .sitemap-hs {
	grid-row: 2/3;
	grid-column: 2/3;
}

footer nav ul {
	font-size: 0.9rem;
}

footer nav ul li {
	border-left: 1px dotted rgba(var(--gray2), 1);
	padding: 0 0 0 40px;
}

footer nav ul a {
	display: block;
	padding: 5px 0;
	white-space: nowrap;
}

footer nav ul li .sec a{
  padding:2px 1em;
  font-size: 0.9em;
}
footer nav ul li .sec a:before{
  content:"- ";
}
footer nav ul a:hover {
	text-decoration: underline;
}

@media screen and (max-width:520px) {
	footer {
		padding: 40px var(--over-width-half) 130px;
		display: flex;
		flex-flow: column;
	}

	footer i {
		font-size: 1.3rem;
	}

	footer .logo {
		display: block;
		margin: 0 0 30px;
	}

	footer .address {
		margin: 0 0 15px;
	}

	footer .copyright {
		margin: 15px 0;
		text-align: center;
	}

	footer nav {
		padding: 0 0 15px;
		display: block;
	}

	footer nav .sitemap {
		grid-row: 1/3;
		grid-column: 1/2;
	}

	footer nav .sitemap-jhs {
		grid-row: 1/2;
		grid-column: 2/3;
	}

	footer nav .sitemap-hs {
		grid-row: 2/3;
		grid-column: 2/3;
	}

	footer nav ul {
		font-size: 0.9rem;
		border: 1px dotted rgb(var(--gray2));
		margin-bottom: -1px;
		padding: 15px;
	}

	footer nav ul li {
		border-left: none;
		padding: 0;
	}

}

/**================================================== 
 中学の色、高校の色
================================================== **/
/**総合**/
.all {
	--jhs-hs: var(--black);
}

/**中学**/
.jhs {
	--jhs-hs: var(--blue);
}

/**高校**/
.hs {
	--jhs-hs: var(--red);
}

/**その他**/
.oth {
	--jhs-hs: var(--gray);
}

/**================================================== 
 HERO
================================================== **/
.hero {
	position: relative;
	--jhs-hs: rgb(var(--black));
}

.hero .text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgb(var(--white));
	font-family: var(--webf);
	z-index: 10;
	text-align: center;
	font-size: 1.25rem;
	padding: 25px;
}

.hero .text .h1 {
	font-size: 4rem;
	white-space: nowrap;
	line-height: 1.3;
	letter-spacing: -4px;
  background: rgba(var(--black), 0.45);
  padding:15px 25px;
}

.hero .text p{
  background: rgba(var(--black), 0.45);
  padding:15px 25px;
}

.hero .text .h1 + p{
  padding-top:0;
}

.hero .h2 {
	writing-mode: vertical-rl;
	color: rgb(var(--white));
	font-family: var(--webf);
	position: absolute;
	text-align: right;
	top: 0;
	left: 0;
	height: 100%;
	padding: 20px 35px 20px 10px;
	font-size: 1.37rem;
	background: rgb(var(--jhs-hs));
}

.hero img {
	width: 100%;
	height: auto;
}

@media screen and (max-width:520px) {
	.hero .text {
		left: auto;
		right: 0;
		transform: translateY(-50%);
		font-size: 0.85rem;
		padding: 10px 15px 10px 5px;
	}

	.hero .text .h1 {
		font-size: 1.5rem;
		white-space: nowrap;
		line-height: 1.3;
	}

	.hero .h2 {
		padding: 10px 2px;
		font-size: 0.8rem;
	}
}


/**================================================== 
 TOP
--jhs-hs:中学色、高校色一番最初に定義
================================================== **/
/**中学 ・ 高等 リンク**/
.sec-top-link {
	display: flex;
}

.sec-top-link .top-link {
	flex: 1;
	/**孫要素の背景高さを合わせるためにgrid**/
	display: grid;
	grid-template-rows: 125px auto;

	--btnBbd: rgb(var(--jhs-hs));
}

.sec-top-link .top-link:hover {
	--btnBc: rgb(var(--jhs-hs));
}

.top-link{
  position: relative;
  --btnAbd: rgb(var(--white));
  --btnAhvbg: rgb(var(--jhs-hs));
}
/**各ページリスト**/
.top-link dl {
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	min-height: 620px;
	padding: 20px 10%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	color: rgb(var(--white));
}

.top-link dl>* {
	max-width: 520px;
}

.top-link dl dt {
	display: flex;
	justify-content: center;
	gap: 20px;
}

.top-link dl dt i {
	display: flex;
	align-items: center;
	gap: 8px;
	font-style: normal;
	text-align: center;
	line-height: 1.5;
}

.top-link dl dt i:before,
.top-link dl dt i:after {
	content: "";
	width: 36px;
	height: 80px;
}

.top-link dl dt i:before {
	background: url(/common/images/leaf_left.png) no-repeat center / contain;
}

.top-link dl dt i:after {
	background: url(/common/images/leaf_right.png) no-repeat center / contain;
}

.top-link dl dd {
	font-family: var(--webf);
	width: 100%;
	margin: 1em 0 0;
}

.top-link .note {
	font-size: 0.8rem;
	font-family: var(--ff);
	position: absolute;
	bottom: 10px;
	right: 10px;
	color: rgb(var(--white));
}

@media screen and (max-width:520px) {
	.sec-top-link {
		display: flex;
		flex-flow: column;

		--btnBp: 10px 15px;
		--btnBfz: 1.3rem;
	}

	.sec-top-link .top-link {
		flex: 1;
		/**孫要素の背景高さを合わせるためにgrid**/
		display: flex;
		flex-flow: column;
	}

	/**各ページリスト**/
	.top-link dl {
		min-height: auto;
		padding: 30px 5%;
	}

	.top-link dl>* {
		max-width: none;
	}

	.top-link dl dt {
		gap: 3px;
	}

	.top-link dl dt i {
		gap: 0;
		font-size: 0.75rem;
	}

	.top-link dl dt i:before,
	.top-link dl dt i:after {
		content: "";
		width: 25px;
		height: 55px;
	}
}

/**------------------------------ 
	bnr
	 ------------------------------**/
.sec-top-bnr {
	padding: 70px 0 45px;
}

.sec-top-bnr a img {
	width: 100%;
	height: auto;
}

.sec-top-bnr a:hover img {
	opacity: 0.8;
}

@media screen and (max-width:520px) {
	.sec-top-bnr {
		padding: 20px 0;
	}
}

/**------------------------------
イベント一覧
 --jhs-hs:中学色、高校色一番最初に定義
 ------------------------------**/
.sec-top-event {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: 100% auto;

	padding: 0 var(--over-width-half) 150px;

	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	gap: 30px;

	--titAm: 0;

	--btnAw: calc(100% - 60px);
	--btnAm: 20px auto 0;
}

.sec-top-event .titA {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.top-event {
	--btnAhvbg: rgb(var(--jhs-hs));
}

.top-event h3 {
	display: flex;
	align-items: flex-end;
	font-size: 1.6rem;
	font-family: var(--webf);
	padding: 5px 0;
	background-repeat: no-repeat;
	background-position: right 35px bottom;
	background-size: auto 123px;
	min-height: 123px;
	border-bottom: 4px solid rgb(var(--jhs-hs));
}

.top-list-event {
	padding: 0 30px 30px 30px;
}

.top-list-event li {
	margin: 30px 0 0;
}

.top-list-event li a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 25px;
}

.top-list-event li .title {
	font-size: 1.1rem;
	padding: 10px;
	border-bottom: 1px solid rgb(var(--black));
	width: 250px;
	text-align: center;
}

.top-list-event li .date .month,
.top-list-event li .date .day {
	font-family: var(--webf);
	display: inline-block;
}

.top-list-event li .date .month {
	font-size: 2.5rem;
	vertical-align: top;
	line-height: 1;
}

.top-list-event li .date .month:after {
	content: "/";
	font-size: 2rem;
}

.top-list-event li .date .day {
	width: 1.2em;
	font-size: 3.7rem;
	line-height: 1;
}

/***hover**/
.top-list-event li a:hover {
	color: rgb(var(--jhs-hs));
}

.top-list-event li a:hover .title {
	border-color: rgb(var(--jhs-hs));
}

@media screen and (max-width:520px) {
	.sec-top-event {
		padding: 0 0 40px;

		display: flex;
		flex-flow: column;
		gap: 15px;

		--titAm: 0 5%;

		--btnAw: 85%;
		--btnAm: 20px auto 0;
	}

	.top-event h3 {
		font-size: 1.2rem;
		padding: 5px 5%;
		background-position: right 10px bottom;
		background-size: auto 85px;
		min-height: 85px;
	}

	.top-list-event {
		padding: 0 5% 20px;
	}

	.top-list-event li {
		margin: 20px 0 0;
	}

	.top-list-event li a {
		gap: 15px;
	}

	.top-list-event li .title {
		font-size: 1rem;
		padding: 8px 0;
		width: 58%;
	}

	.top-list-event li .date .month {
		font-size: 1.5rem;
	}

	.top-list-event li .date .month:after {
		font-size: 1.3rem;
		letter-spacing: -1px;
	}

	.top-list-event li .date .day {
		font-size: 2.5rem;
	}
}


/**ページ**/
.sec-page-event{
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 100% auto;
  padding: 0 var(--over-width-half) 150px;
  --titAm: 0;
  --btnAw: 600px;
  --btnAm: 20px auto 0;
}

.sec-page-event .top-list-event{
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  gap: 20px;
}

@media screen and (max-width:520px) {
	.sec-page-event {
		padding: 0 0 40px;

		--titAm: 0 5%;

		--btnAw: 85%;
		--btnAm: 20px auto 0;
	}
	
	.sec-page-event .top-list-event {
    display: block;
    padding: 0 5% 20px;
  }
}


/**------------------------------ 
お知らせ
 ------------------------------**/
.sec-top-news {
	padding: 85px var(--over-width-half);

	--titAm: 0;

	--btnAw: 600px;
	--btnAm: 20px auto;
}

.list-news {
	margin: 60px auto;
}

.list-news li {
	margin: 0 0 35px;
}

.list-news a {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 123px auto;
}

.list-news a:hover h3 {
	text-decoration: underline;
}

.list-news time {
	grid-row: 1/3;
	grid-column: 1/2;
	font-style: normal;
}

.list-news a em {
	min-width: 6em;
	box-shadow: 0 0 0 1px rgb(var(--gray)) inset;
	background: rgb(var(--white));
	margin: 0 10px 0 0;
}

.list-news a em.jhs,
.list-news a em.hs,
.list-news a em.all,
.list-news a em.oth {
	background: rgb(var(--jhs-hs));
	color: rgb(var(--white));
	box-shadow: none;
}

.list-news h3 {
	margin: 8px 0 0;
}

@media screen and (max-width:520px) {
	.sec-top-news {
		padding: 30px var(--over-width-half);

		--titAm: 0;

		--btnAw: 90%;
		--btnAm: 30px auto;
	}

	.list-news {
		margin: 25px auto;
	}

	.list-news li {
		margin: 0 0 20px;
	}

	.list-news a {
		grid-template-columns: 6em auto;
		gap: 0 8px;
	}

	.list-news time {
		white-space: nowrap;
	}

	.list-news a em {
		margin: 0;
	}
	
	.list-news a .em{
	  display: flex;
	  flex-wrap: wrap;
	  gap: 3px;
	}

}

/**================================================== 
 コース
 --jhs-hs:中学色、高校色一番最初に定義
================================================== **/
.sec-top-course {
	padding: 100px 0 50px;
	background: linear-gradient(to bottom, transparent 30%, rgb(var(--white)) 30%, rgb(var(--white)) 100%), linear-gradient(to left, rgb(var(--blue)) 33%, rgb(var(--white)) 33%, rgb(var(--white)) 100%);
	--titAta: center;
	--titAm: 0 auto;

	--btnAta: center;
	--btnAw: 600px;
	--btnAm: 40px auto 70px;
}

.top-course {
	--btnAhvbg: rgb(var(--jhs-hs));
}

.list-course {
	padding: 80px 5% 60px;
	position: relative;
	background: linear-gradient(to right, rgb(var(--jhs-hs)) 33%, rgb(var(--white)) 33%, rgb(var(--white)) 100%);

	--titBfz: 2.5rem;
	--titBm: 0 0 15px;
	
	--btnAw:100%;
	--btnAm:0 auto 50px;
	--btnAp:15px 20px;
	--btnAta:left;
}

.list-course:after {
	opacity: 0.3;
	font-family: var(--webf);
	color: rgb(var(--white));
	writing-mode: vertical-rl;
	position: absolute;
	top: 80px;
	font-size: 1.75rem;
}

.list-course a {
	display: grid;
	grid-template-rows: auto auto auto auto;
	gap: 20px 60px;
}

.list-course em {
	font-size: 1.25rem;
	font-family: var(--webf);
	font-style: normal;
	color: rgb(var(--jhs-hs));
}

/**中学**/
.top-course.jhs .list-course {
	background: linear-gradient(to left, rgb(var(--jhs-hs)) 33%, rgb(var(--white)) 33%, rgb(var(--white)) 100%);
}

.top-course.jhs .list-course:after {
	content: "Junior High school";
	right: calc(5% - 2em);
}

.top-course.jhs .list-course a {
	grid-template-columns: 1fr auto;
}

.top-course.jhs .list-course picture {
	grid-column: 2/3;
	grid-row: 1/5;
	width:clamp(320px , 53vw, 780px);
}

/**高校**/
.top-course.hs .list-course:after {
	content: "Senior High school";
	left: calc(5% - 2em);
}

.top-course.hs .list-course a {
	grid-template-columns: auto 1fr;
}

.top-course.hs .list-course picture {
	grid-column: 1/2;
	grid-row: 1/5;
	width: clamp(320px,50vw,780px);
}

@media screen and (max-width:520px) {
	.sec-top-course {
		padding: 30px 0 1px;
		background: linear-gradient(to bottom, transparent 15%, rgb(var(--white)) 15%, rgb(var(--white)) 100%), linear-gradient(to left, rgb(var(--blue)) 15%, rgb(var(--white)) 15%, rgb(var(--white)) 100%);
		--titAta: center;
		--titAm: 0 auto;

		--btnAta: center;
		--btnAw: 85%;
		--btnAm: 20px auto 35px;
	}

	.list-course {
		padding: 25px 5% 1px;
		position: relative;
		background: linear-gradient(to right, rgb(var(--jhs-hs)) 15%, rgb(var(--white)) 15%, rgb(var(--white)) 100%);

	  --btnAm:0 auto;
		--titBfz: 1.5rem;
		--titBm: 0;
	}

	.list-course:after {
		top: 40px;
		font-size: 1rem;
	}

	.list-course li {
		margin: 0 0 40px;
		--btnAw:70vw;
	}

	.list-course a {
		display: flex;
		flex-flow: column;
		gap: 15px;
	}

	.list-course a > * {
		max-width: 80%;
	}

	.list-course a picture,
	.list-course a picture img {
		max-width: 100%;
	}
	
	.top-course.jhs .list-course picture{
	 width: 100%;
	}

	/**中学**/
	.top-course.jhs .list-course {
		background: linear-gradient(to left, rgb(var(--jhs-hs)) 15%, rgb(var(--white)) 15%, rgb(var(--white)) 100%);
	}

	.top-course.jhs .list-course:after {
		right: 8px;
	}

	/**高校**/
	.top-course.hs .list-course:after {
		left: 8px;
	}

	.top-course.hs .list-course a {
		align-items: flex-end;
	}


}

/**------------------------------ 
学校生活・クラブ活動
 --jhs-hs:中学色、高校色一番最初に定義
 ------------------------------**/
.sec-top-sclife {
	padding: 50px 0 100px;

	--titAta: center;
}

.sec-top-sclife h3 {
	font-family: var(--webf);
	text-align: center;
	padding: 15px;
	font-size: 1.6rem;
	border-bottom: 4px solid rgb(var(--jhs-hs));
}


.list-sclife {
	display: flex;
	margin: 0 0 80px;
}

.list-sclife li {
	flex: 1;
	overflow: hidden;
}

.list-sclife a {
	position: relative;
	width: 100%;
}

.list-sclife a:hover {
	color: rgb(var(--jhs-hs));
}

.list-sclife a img {
	display: block;
	aspect-ratio: 468/350;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-sclife span {
	display: block;
	background: rgb(var(--white));
	position: absolute;
	bottom: 0;
	left: 0;
	width: 180px;
	text-align: center;
	font-family: var(--webf);
	padding: 10px 0;
	font-size: 1.35rem;
	line-height: 1.3;
}

.list-sclife span:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid rgb(var(--white));
	border-right: 1px solid rgb(var(--white));
	position: absolute;
	top: calc(50% - 4px);
	right: -18px;
	transform: rotate(45deg);
	z-index: 2;
}

.list-sclife span:before {
	content: "";
	width: 36px;
	height: 100%;
	position: absolute;
	top: 0;
	right: -36px;
	background: rgb(var(--jhs-hs));
}

.list-sclife em {
	display: block;
	font-style: normal;
	font-size: 0.6em;
}

@media screen and (max-width:520px) {
	.sec-top-sclife {
		padding: 30px 0;
	}

	.sec-top-sclife h3 {
		font-size: 1.3rem;
	}

	.list-sclife {
		display: flex;
		flex-flow: column;
		margin: 0 0 20px;
	}

	.list-sclife li {
		overflow: hidden;
	}

	.list-sclife a {
		display: flex;
		gap: 0;
	}

	.list-sclife a picture {
		width: 50%;
	}

	.list-sclife a img {
		width: 100%;
		height: auto;
	}

	.list-sclife span {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		position: relative;
		top: auto;
		left: auto;
		width: 50%;
		padding: 0 40px 0 0;
		font-size: 1.35rem;
		line-height: 1.3;
	}

	.list-sclife span:after {
		right: 15px;
	}

	.list-sclife span:before {
		right: 0;
	}

	.list-sclife em {
		display: block;
		font-style: normal;
		font-size: 0.6em;
	}
}

/**------------------------------ 
本校について
 ------------------------------**/
.sec-top-about {
	/**!背景：写真家の名前記載必須なので必ず右下付きであること！**/
			background-repeat: no-repeat;
		background-position: right bottom;
		background-size: cover;
	padding: 70px var(--over-width-half);

	--titAc: rgb(var(--white));

	--btnAm: 0;
	--btnAp: 15px;
}

.list-about li {
	display: grid;
	grid-template-columns: 250px auto;
	grid-template-rows: auto auto auto;
	gap: 25px 80px;
	padding: 60px 40px;
	background: rgba(var(--white), 0.85);
	margin: 0 0 15px;
}

.list-about li a {
	grid-row: 2/3;
	grid-column: 1/2;
}

.list-about li p {
	grid-row: 1/4;
	grid-column: 2/3;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.sec-top-photos {
	padding: 60px 0;
	background: rgb(var(--gray2), 0.1);

	--btnAw: 600px;
	--btnAm: 0 auto;
	--btnAta: center;
}

.sec-top-photos .swiper,
.sec-event-02 .swiper {
	margin: 0 auto 40px;
}

.sec-top-photos .swiper-wrapper,
.sec-event-02 .swiper-wrapper {
	/**スライドの横スクロール速度を一定にする**/
	transition-timing-function: linear;
}

.sec-top-photos .swiper a,
.sec-event-02 .swiper a {
	aspect-ratio: 3/2;
}

.sec-top-photos .swiper img,
.sec-event-02 .swiper img {

	width: 100%;
	height: 100%;
	object-fit: contain;
	/**!背景：写真家の名前記載必須なので必ず全部見せにすること！**/
	object-position: top center;
}

@media screen and (max-width:520px) {
	.sec-top-about {
		/**!背景：写真家の名前記載必須なので必ず右下付きであること！**/
		padding: 20px var(--over-width-half);

		--btnAm: 0;
		--btnAp: 15px;
		
		--titBfz:1.5rem;
	}

	.list-about li {
		display: flex;
		flex-flow: column;
		gap: 15px;
		padding: 30px 15px;
		margin: 0 0 15px;
	}


	.sec-top-photos,
	.sec-event-02 {
		padding: 20px 0;

		--btnAw: 90%;
	}

	.sec-top-photos .swiper,
	.sec-event-02 .swiper {
		margin: 0 auto 20px;
	}
}

/**------------------------------ 
アクセス
 ------------------------------**/
.sec-top-access {
	background: rgb(var(--gray2), 0.1);
	padding: 60px var(--over-width-half) 100px;

	display: grid;
	grid-template-rows: 1fr auto auto auto;
	grid-template-columns: 300px auto;
	gap: 0 60px;


	--titAm: 0;

	--titBfz: 1.3rem;
	--titBm: 0 0 10px;

	--btnAm: 50px 0 0;
}

.sec-top-access p {
	font-family: var(--webf);
}

.sec-top-access .map {
	grid-row: 1/5;
	grid-column: 2/3;
}

@media screen and (max-width:520px) {
	.sec-top-access {
		padding: 30px var(--over-width-half);

		display: flex;
		flex-flow: column;
		gap: 15px;


		--titAm: 0;

		--titBfz: 1.3rem;
		--titBm: 0 0 10px;

		--btnAm: 0 0 20px;
	}

	.sec-top-access p {
		font-family: var(--webf);
	}

	.sec-top-access .map {
		grid-row: 1/5;
		grid-column: 2/3;
	}
}

/**------------------------------ 
関係者様へ
 ------------------------------**/
.sec-top-inv {
	padding: 60px var(--over-width-half);

	--titAm: 30px 0;
}

.list-inv {
	display: flex;
	gap: 30px;

	--titBfz: 1.1rem;
}

.list-inv li a {
	display: block;
}

.list-inv li a picture {
	position: relative;
	display: block;
	margin: 0 0 10px;
}

.list-inv li a picture:before {
	content: "";
	display: block;
	width: 36px;
	height: 36px;
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgb(var(--black));
	z-index: 10;
}

.list-inv li a picture:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid rgb(var(--white));
	border-right: 1px solid rgb(var(--white));
	position: absolute;
	bottom: 13px;
	right: 18px;
	transform: rotate(45deg);
	z-index: 2;
	z-index: 11;
}

.list-inv small {
	display: block;
	line-height: 1.3;
	margin: 10px 0;
}

@media screen and (max-width:520px) {
	.sec-top-inv {
		padding: 20px var(--over-width-half) 40px;

		--titAm: 20px 0;
	}

	.list-inv {
		display: flex;
		flex-flow: wrap;
		gap: 15px;

		--titBfz: 1.1rem;
	}

	.list-inv li {
		width: calc((100% - 15px) / 2);
	}
}


/**================================================== 
中ページ  特設
================================================== **/
.page-hero {
	position: relative;
}

.page-hero picture {
	display: block;
	width: 100%;
	aspect-ratio: 1400/ 640;
}

.page-hero picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.zen-hero h1 {
	font-family: var(--webf);
	position: absolute;
	top: 50%;
	left: calc((100% - 900px) / 2);
	transform: translateY(-60%);
	z-index: 10;
	text-align: center;
	letter-spacing: 0.1em;
	line-height: 2;
	font-size: 2.3rem;
	color: rgb(var(--white));
	text-shadow: var(--tshadow);
}

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

	.page-hero picture {
		aspect-ratio: 1/ 1;
	}

	.zen-hero h1 {
		letter-spacing: 0;
		font-size: 1.4rem;
		top: 25px;
		left: 10px;
		transform: none;

		line-height: 1.9;
	}
}

/**------------------------------ 
 ------------------------------**/
.sec-zen-01 {
	font-family: var(--webf);
	font-size: 1.5rem;
	width: var(--base-width);
	margin: 80px auto;
	text-align: center;
	line-height: 2.2;

	--titBfz: 3.3rem;
	--titBta: center;
	--titBm: 0 auto 50px;
}

.sec-zen-02 {
	padding: 80px 0 10px;
}

.list-zen dl {
	padding: 1px 0 80px;

	--titBfz: 1.5rem;
	--titBm: 0 0 20px;
}

.list-zen dl dt {
	text-align: right;
	background: rgb(var(--black), 0.9);
	color: rgb(var(--white));
	padding: 15px 30px;
	font-family: var(--webf);
	font-size: 1.7rem;
	margin: 0 auto 0 0;
	max-width: 90%;
}

.list-zen:nth-child(even) dt {
	margin: 0 0 0 auto;
	text-align: left;
}

.list-zen dl dd {
	width: 100%;
	margin: 0 auto;
	display: flex;
	gap: 40px;
	padding: 30px var(--over-width-half) 0;
}

.list-zen dl picture {
	flex: none;
	width: 520px;
	height: 100%;
}

.list-zen dl picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.list-zen dl dd>div {
	flex: 1;
	margin: 15px 0 0;
}

.sec-zen-03 {
	padding: 80px var(--over-width-half);
	--titAm: 0 auto 60px;

	--titBm: 0 auto 25px;
}

.list-hgz {
	margin: 60px 0 0;
	--titCm: 0 0 30px;
}

.list-hgz li {
	padding: 50px;
	border: 1px dotted rgba(var(--black));
	margin: -1px 0 0;
}

.list-hgz li picture {
	display: block;
	margin: 25px 0 0;
}


.sec-zen-04 {
	padding: 80px var(--over-width-half) 100px;
	--titAm: 0 auto 90px;
}

.list-efiu {
	background: rgba(var(--white), 0.85);
	box-shadow: 0 0 0 40px rgba(var(--white), 0.85);
	--boxNC_gap: 20px 5%;
	--boxNC_child_w: calc(95% / 2);
}

@media screen and (max-width:520px) {
	.sec-zen-01 {
		font-size: 1.1rem;
		width: 90%;
		margin: 40px 5%;
		text-align: left;
		line-height: 1.9;

		--titBfz: 2.2rem;
		--titBm: 0 auto 30px;
	}


	.sec-zen-02 {
		padding: 40px 0 10px;
	}

	.list-zen dl {
		padding: 1px 0 40px;

		--titBfz: 1.3rem;
		--titBm: 0 0 15px;
	}

	.list-zen dl dt {
		padding: 15px 20px;
		font-size: 1.2rem;
		margin: 0 5% 0 0;
	}

	.list-zen:nth-child(even) dt {
		margin: 0 0 0 5%;
	}

	.list-zen dl dd {
		display: flex;
		flex-flow: column;
		gap: 15px;
		padding: 20px 5% 0;
	}

	.list-zen dl picture {
		flex: none;
		width: 100%;
		height: 100%;
	}

	.list-zen dl dd>div {
		margin: 0;
	}

	.sec-zen-03 {
		padding: 40px var(--over-width-half);
		--titAm: 0 auto 35px;

		--titBm: 0 auto 20px;
	}

	.list-hgz {
		margin: 35px 0 0;
		--titCm: 0 0 15px;

		--boxLR_m: 0;
		--boxLR_gap: 15px;
		--boxLR_1_w: 100%;
	}

	.list-hgz li {
		padding: 15px;
	}

	.sec-zen-04 {
		padding: 40px 0 50px;
		--titAm: 0 5% 30px;
	}

	.list-efiu {
		padding: 5%;
		box-shadow: none;
		--boxNC_gap: 30px;
		--boxNC_child_w: 100%;
	}
}

.sec-school-01,
.sec-graduate-04{
	position: relative;
	margin: 80px 0 0;
	padding: 80px var(--over-width-half) 80px 5%;
	background: linear-gradient(to right, rgba(var(--gray), 1) 0%, rgba(var(--gray), 1) 25%, rgba(var(--white), 1) 25%);

	--boxLR_w: 100%;
	--boxLR_m: 0 auto;
	--boxLR_gap: 50px;
	--boxLR_1_w: 520px;
	--boxLR_2_w: calc((100% - var(--boxLR_1_w)) - var(--boxLR_gap));
	--boxLR_jc: flex-start;
	--boxLR_ai: stretch;
	--boxLR_fflow: wrap;
}

.sec-graduate-04{
  margin: 0;
  padding: 120px var(--over-width-half) 80px 5%;
}

.sec-school-01:after {
	content: "HANAZONO Junior & Senior High school";
	writing-mode: vertical-rl;
	color: rgb(var(--white));
	font-family: var(--webf);
	position: absolute;
	text-align: right;
	top: 0;
	left: 0;
	height: 100%;
	padding: 20px 35px 20px 10px;
	font-size: 1.37rem;
	background: rgb(var(--jhs-hs));
	opacity: 0.3;
}

@media screen and (max-width:520px) {
	.sec-school-01,
	.sec-graduate-04{
		margin: 40px 0 0;
		padding: 40px var(--over-width-half);
		background: linear-gradient(to right, rgba(var(--gray), 1) 0%, rgba(var(--gray), 1) 15%, rgba(var(--white), 1) 15%);

		--boxLR_gap: 15px;
		--boxLR_1_w: 100%;
		--boxLR_2_w: 83%;
		--boxLR_jc: flex-end;
	}
	
	.sec-graduate-04{
    margin: 0;
  }

	.sec-school-01:after {
		font-size: 1rem;
	}
}

.sec-school-02 {
	padding: 40px var(--over-width-half) 80px;
	--titAta: center;
}

.school-02-boxinner {
	position: relative;
	z-index: 2;
	background: rgba(var(--white));
	padding: 50px;
	margin: -80px 5% 0;
}

@media screen and (max-width:520px) {
	.sec-school-02 {
		padding: 20px 0 40px;
	}

	.school-02-boxinner {
		position: relative;
		z-index: 2;
		background: rgba(var(--white));
		padding: 20px;
		margin: -40px 5% 0;
	}
}

.sec-school-03 {
	padding: 80px var(--over-width-half) 80px;
	--titAm: 0 auto 40px;

	--titBm: 60px auto 30px;

	--boxLR_gap: 30px;
	--boxLR_1_w: 450px;
	--boxLR_2_w: calc((100% - var(--boxLR_1_w)) - var(--boxLR_gap));
}

.list-housin {
	margin: 0;
	background: rgba(var(--white));
	--titCm: 0 0 15px;
}

.list-housin li {
	padding: 30px;
	border: 1px dotted rgba(var(--black));
	margin: -1px 0 0;
	font-family: var(--webf);
	font-size: 1.2rem;
}

@media screen and (max-width:520px) {
	.sec-school-03 {
		padding: 40px var(--over-width-half);
		--titAm: 0 auto 20px;

		--titBm: 40px auto 20px;
		--titBfz: 1.6rem;


		--boxLR_gap: 15px;
		--boxLR_1_w: 100%;
		--boxLR_2_w: 100%;
	}

	.list-housin {
		--titCm: 0 0 10px;
	}

	.list-housin li {
		padding: 15px;
		font-size: 1.1rem;
	}
}

.sec-school-04 {
	padding: 80px var(--over-width-half);
	--titAm: 0 auto 30px;
}

.history-table {
	margin: 0;
	width: 100%;
}

.history-table dl:nth-child(even) {
	background: rgba(var(--red), 0.05);
}

.history-table dl {
	display: table;
	margin: 0;
	padding: 0;
	width: 100%;
}

.history-table dl dt {
	display: table-cell;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.08em;
	padding: 15px 0 15px 35px;
	position: relative;
	vertical-align: top;
	width: 250px;
	font-size: 1.2rem;
	font-weight: bold;
}

.history-table dl dt:before {
	background: rgb(var(--black));
	border-radius: 50%;
	content: "";
	display: block;
	height: 11px;
	width: 11px;
	margin-top: -5px;
	position: absolute;
	top: 35px;
	right: -5px;

}

.history-table dl dt:after {
	border-right: 1px solid rgb(var(--black));
	content: "";
	display: block;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
}

.history-table dl:nth-child(1) dt:after {
	height: calc(100% - 35px);
	top: 35px;
}

.history-table dl:nth-last-of-type(1) dt:after {
	height: 35px;
}

.history-table dl dd {
	display: table-cell;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.4;
	margin: 0;
	padding: 20px 0 30px 45px;
	vertical-align: middle;
}

.history-table dl dd strong {
	display: block;
	margin: 0 0 5px;
}

.history-table dl dd picture {
	display: block;
	margin: 10px 0 0;
	max-width: 300px;
	box-shadow: 0 0 0 3px rgba(var(--white));
}

@media screen and (max-width:520px) {
	.sec-school-04 {
		padding: 40px 0;
		--titAm: 0 5% 30px;
	}

	.history-table {
		margin: 0;
		width: 100%;
	}

	.history-table dl dt {
		font-size: 13px;
		line-height: 1.4;
		padding: 15px 0 15px 15px;
		vertical-align: top;
		width: 104px;
	}

	.history-table dl dt:before {
		height: 8px;
		width: 8px;
		margin-top: -8px;
		top: 30px;
		right: -4px;
	}

	.history-table dl:nth-child(1) dt:after {
		height: calc(100% - 30px);
		top: 30px;
	}

	.history-table dl:nth-last-of-type(1) dt:after {
		height: 30px;
	}

	.history-table dl dd {
		font-size: 15px;
		padding: 15px 15px 15px 22px;
		vertical-align: top;
	}
}

.sec-school-05 {
	padding: 0 var(--over-width-half) 80px;
	--titAm: 0 auto 60px;

	--titBfz: 2rem;
	--titBm: 0 auto 20px;
}

.school-05-boxinner {
	padding: 50px;
	border-radius: 3px;
	border: 1px solid rgb(var(--black));

	--titBta: center;
}

.list-emblem {
	--boxNC_w: 100%;
	--boxNC_m: 0 auto 30px;
	--boxNC_gap: 20px 5%;
	--boxNC_jc: center;
	--boxNC_child_w: calc(90% / 3);
}

.list-emblem li {
	text-align: center;
	--titCm: 0 auto 20px;
	--titCbg: rgb(var(--jhs-hs));
}

.school-05-boxinner2 {
	margin: 60px auto;


	--boxNC_child_w: calc(95% / 2);
}

.school-05-boxinner2 .titC {
	--titCfz: 1.5rem;
	--titCbg: rgba(var(--white));
	--titCc: rgb(var(--jhs-hs));
	--titCw: 100%;
	border-bottom: 3px solid rgb(var(--jhs-hs));
}

.lyrics {
	text-indent: -2em;
	padding-left: 2em;
	font-family: var(--webf);
	margin: 1em 30px;
}

@media screen and (max-width:520px) {
	.sec-school-05 {
		padding: 0 var(--over-width-half) 40px;
		--titAm: 0 auto 30px;

		--titBfz: 1.6rem;
		--titBm: 0 auto 20px;
	}

	.school-05-boxinner {
		padding: 20px;
	}

	.list-emblem {
		--boxNC_w: 100%;
		--boxNC_m: 0 auto 30px;
		--boxNC_gap: 20px 5%;
		--boxNC_child_w: calc(95% / 2);
	}

	.list-emblem li {
		--titCfz: 1rem;
		--titCm: 0 auto 15px;
	}

	.school-05-boxinner2 {
		margin: 30px auto;

		--boxNC_child_w: 100%;
	}

	.lyrics {
		margin: 1em 0;
		font-size: 1rem;
	}
}

/**================================================== 
 施設紹介
================================================== **/
.sec-fac-01 {
	position: relative;
	display: flex;
	align-items: center;
	padding: 60px 0;
	gap: 50px;
	background: linear-gradient(to bottom, rgba(var(--white), 1) 0%, rgba(var(--white), 1) 20%, rgba(var(--gray2), 0.1) 20%);
}

.sec-fac-01 .text {
	flex: 1;
	padding: 0 5% 0 0;

	--titBm: 0 0 30px;
}

.sec-fac-01 .swiper {
	width: 60%;
	position: relative;
}

.sec-fac-01 .swiper a,
.sec-fac-01 .swiper a img {
	width: 100%;
	height: auto;
	display: block;
}

@media screen and (max-width:520px) {
	.sec-fac-01 {
		position: relative;
		display: flex;
		flex-flow: column-reverse;
		align-items: center;
		padding: 30px 5%;
		gap: 30px;
		background: linear-gradient(to bottom, rgba(var(--white), 1) 0%, rgba(var(--white), 1) 60%, rgba(var(--gray2), 0.1) 60%);
	}

	.sec-fac-01 .text {
		padding: 0;

		--titBm: 0 0 20px;
	}

	.sec-fac-01 .swiper {
		width: 100%;
	}

	.sec-fac-01 .swiper a,
	.sec-fac-01 .swiper a img {
		width: 100%;
		height: auto;
		display: block;
	}
}


.sec-fac-02 {
	padding: 80px var(--over-width-half);
}

.list-facility {
	margin: 60px auto;
	--titBfz: 1.4rem;
	--titBm: 15px 0;

	--boxNC_gap: 50px 5%;
	--boxNC_child_w: calc(95% / 2);
}

.list-facility.PCbox3 {
	--boxNC_child_w: calc(90% / 3);
}

@media screen and (max-width:520px) {
	.sec-fac-02 {
		padding: 30px var(--over-width-half);
		--titAm: 0 auto 30px;
	}

	.sec-fac-02 iframe {
		height: 450px;
	}

	.list-facility {
		margin: 30px auto;
		--titBfz: 1.1rem;
		--titBm: 10px 0;

		--boxNC_gap: 30px 5%;
		--boxNC_child_w: calc(95% / 2);
	}

	.list-facility.PCbox3 {
		--boxNC_child_w: calc(95% / 2);
	}
}

/**================================================== 
 交通アクセス
================================================== **/
.sec-acc-01 {
	--titAm: 0 0 30px;

	--titBta: center;
	--titBm: 20px auto;
	--titBfz: 1.5rem;

	--titCw: 100%;
	--titCta: center;
	--titCm: 60px auto 20px;
	--titCfz: 1.8rem;
}

.acc-01-inner {
	width: var(--base-width);
	margin: 0 auto;
}

.sec-acc-01 .gmap {
	margin: 40px 0;
}

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

	.sec-acc-01 {
		--titBm: 15px auto;

		--titCm: 30px auto 20px;
		--titCfz: 1.3rem;
	}

	.acc-01-inner {
		width: 90%;
		margin: 40px auto 0;
	}

	.sec-acc-01 .gmap {
		margin: 20px 0;
	}
}

.sec-acc-02 {
	padding: 80px var(--over-width-half);

	--titCw: 100%;
	--titCta: center;
	--titCm: 0 auto 20px;
	--titCbg: rgb(var(--red));
	--titCfz: 1.8rem;
}

@media screen and (max-width:520px) {
	.sec-acc-02 {
		padding: 40px var(--over-width-half);

		--titCw: 100%;
		--titCta: center;
		--titCm: 0 auto 20px;
		--titCfz: 1.3rem;
	}
}

/**================================================== 
 在校生
================================================== **/
.sec-students-01 {
	padding: 80px var(--over-width-half) 0;
}

.list-btn {
	--boxNC_w: 100%;
	--boxNC_m: 0 auto;
	--boxNC_gap: 20px 5%;
	--boxNC_jc: flex-start;
	--boxNC_ai: stretch;
	--boxNC_fflow: wrap;

	--boxNC_child_w: calc(90% / 2);
}

.sec-students-02 {
	padding: 80px var(--over-width-half);
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	gap: 30px;

	--titAm: 0;
}

.sec-students-02 .titA {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.students-dl h3 {
	font-size: 1.6rem;
	font-family: var(--webf);
	padding: 0 0 20px;
	border-bottom: 4px solid rgb(var(--jhs-hs));
}

.list-dl {
	padding: 0 30px 30px;
}

.list-dl li {
	margin: 0 0 10px;
}

.list-dl h4 {
	font-size: 1.4rem;
	font-family: var(--webf);
	padding: 20px 0 15px;
	color: rgb(var(--jhs-hs));
}

.list-dl dt {
	font-size: 1em;
	padding: 10px 15px;
	background: rgb(var(--jhs-hs));
	color: rgb(var(--white));
}

.list-dl dd {
	border-bottom: 1px solid rgb(var(--jhs-hs));
}

.list-dl dd a {
	display: block;
	padding: 10px 15px;
	border: 1px solid rgb(var(--jhs-hs));
	border-bottom: none;
	position: relative;
}

.list-dl dd a:after {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1px solid rgb(var(--jhs-hs));
	border-right: 1px solid rgb(var(--jhs-hs));
	position: absolute;
	top: calc(50% - 3px);
	right: 10px;
	transform: rotate(45deg);
	z-index: 2;
}

.list-dl dd a:hover {
	background: rgb(var(--jhs-hs), 0.1);
}

.sec-students-03 {
	padding: 80px var(--over-width-half);
	--titAm: 0 auto 30px;

	--titBfz: 1.8rem;
	--titBm: 80px 0 30px;

	--btnAw: 600px;
	--btnAm: 40px auto 0;
}

.list-hour {
	margin: 40px auto;
	background: rgba(var(--white));
	--titCm: 0 0 15px;
}

.list-hour li {
	padding: 30px;
	border: 1px dotted rgba(var(--black));
	margin: -1px 0 0;
	font-family: var(--webf);
}

.list-hour li .note {
	font-size: 0.9rem;
}

.sec-students-04 {
	padding: 80px var(--over-width-half) 80px;
	--titAm: 0 auto;

	--titCm: 0 0 20px;

	--btnAw: 320px;
	--btnAm: 30px 0 60px;

	--boxNC_m: 0 auto;
	--boxNC_child_w: calc(95% / 2);
}

.icon-title {
	display: flex;
	align-items: center;
	margin: 60px 0 30px;
	gap: 10px;

	--titBfz: 1.8rem;
	--titBm: 0;
}

.icon-title .icon {
	display: block;
	width: 50px;
	flex: none;
}

.icon-title .icon img {
	width: 100%;
}

/***数字リスト**/
:is(.decimal, .lower-alpha) {
	counter-reset: number 0;
}

:is(.decimal, .lower-alpha) > li {
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin: 0.2em 0 0.2em 2em;
}

.decimal > li:before {
	counter-increment: number 1;
	content: "(" counter(number, decimal) ")";
	display: inline-block;
	margin-right: 0.7em;
	letter-spacing: 3px;
}

/**小文字ABCリスト***/
.lower-alpha > li:before {
	counter-increment: number 1;
	content: counter(number, lower-latin) ")";
	display: inline-block;
	margin-right: 0.9em;
	letter-spacing: 3px;
}

/**数字デフォルトリスト**/
.decimal2 {
	list-style-type: decimal;
	margin-left: 1em;
}

.decimal2 > li {
	margin: 0.2em 0;
	padding: 0;
	text-indent: 0;
}

.decimal2 > li:before {
	display: none;
}



.list-sick {
	margin: 20px auto 40px;
	display: flex;
	flex-flow: wrap;
	gap: 5px 15px;
}

.list-sick li {
	position: relative;
	padding-left: 25px;
}

.list-sick li:before {
	content: "";
	border: 1px solid rgba(var(--red));
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 2px;
	position: absolute;
	top: 0.5em;
	left: 0;
}

.list-sick li:after {
	content: "";
	display: block;
	width: 16px;
	height: 8px;
	border-left: 3px solid rgba(var(--red));
	border-bottom: 3px solid rgba(var(--red));
	transform: rotate(-45deg);
	position: absolute;
	top: 7px;
	left: 2px;
}

.emergency-table table {
	width: 100%;
	border-top: 1px solid rgba(var(--gray2), 0.5);
	margin: 15px auto 40px;
}

.emergency-table :is(th, td) {
	padding: 10px 15px;
	font-size: 1rem;
	border-bottom: 1px solid rgba(var(--gray2), 0.5);
}

.emergency-table th {
	background: rgba(var(--gray2), 0.1);
}

.emergency-table th span {
	font-size: 0.8em;
	display: block;
	font-weight: normal;
}

.emergency-table td span {
	text-decoration: underline;
}

@media screen and (max-width:520px) {
	.sec-students-01 {
		padding: 30px var(--over-width-half) 0;
	}

	.list-btn {
		--boxNC_w: 100%;
		--boxNC_m: 0;
		--boxNC_gap: 15px;
		--boxNC_jc: space-between;
		--boxNC_ai: stretch;
		--boxNC_fflow: nowrap;

		--boxNC_child_w: calc((100% - 15px) / 2);
	}

	.sec-students-02 {
		padding: 40px var(--over-width-half);
		display: block;

		--titAm: 0 0 20px;
	}

	.students-dl h3 {
		font-size: 1.4rem;
		padding: 0 0 5px;
	}

	.list-dl {
		padding: 0 0 15px;
	}

	.list-dl li {
		margin: 0 0 10px;
	}

	.list-dl h4 {
		font-size: 1.2rem;
		padding: 20px 0 10px;
	}

	.sec-students-03 {
		padding: 40px var(--over-width-half);
		--titAm: 0 auto 30px;

		--titBfz: 1.4rem;
		--titBm: 80px 0 30px;

		--btnAw: 100%;
		--btnAm: 30px auto 0;

	}

	.list-hour {
		margin: 20px auto;
		--titCfz: 1.1rem;
	}

	.list-hour li {
		padding: 15px;
	}

	.sec-students-04 {
		padding: 40px var(--over-width-half);
		--titAm: 0 auto;

		--titCm: 0 0 20px;

		--btnAw: 100%;
		--btnAm: 20px 0 40px;

		--boxNC_m: 0 auto;
		--boxNC_child_w: 100%;
	}

	.icon-title {
		display: flex;
		align-items: flex-start;
		margin: 25px 0 20px;
		gap: 8px;

		--titBfz: 1.2rem;
		--titBm: 0;
	}

	.icon-title .icon {
		width: 40px;
	}

	/***数字リスト**/
	:is(.decimal, .lower-alpha) {
		counter-reset: number 0;
	}

	:is(.decimal, .lower-alpha)>li {
		text-indent: -1.3em;
		padding-left: 1.3em;
		margin: 0.2em 0 0.2em 1em;
	}

	.emergency-table :is(th, td) {
		padding: 5px;
		font-size: 0.9rem;
	}

	.emergency-table th {
		width: 30%;
	}
}

/**================================================== 
 保護者の方へ
================================================== **/
.sec-others-01 {
	padding: 0 var(--over-width-half) 1px;

	--titCm: 0 0 20px;

	--titBfz: 1.8rem;
	--titBm: 60px 0 0;
}

.list-others,
.list-others2 {
	margin: 30px auto 80px;
	--titBfz: 1.4rem;
	--titBm: 15px 0;

	--boxNC_gap: 50px 5%;
	--boxNC_child_w: calc(95% / 2);
}

.sec-other-02 {
	padding: 80px var(--over-width-half);
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 350px auto auto;

	--titAm: 0 0 30px;
}

.sec-other-02 .titA {
	grid-row: 1/2;
	grid-column: 1/2;
}

.sec-other-02 .other-02-inner {
	grid-row: 1/2;
	grid-column: 2/4;
}

.faq {
	margin: 0 auto 40px;
	border: 1px solid rgba(var(--gray2), 0.5);
}

.faq dt {
	font-family: var(--webf);
	font-size: 20px;
	font-weight: bold;
	position: relative;
	min-height: 60px;
	margin: 0;
	margin-top: 0;
	padding: 25px 30px 25px 110px;
	border-bottom: 1px solid rgba(var(--gray2), 0.5);
	font-weight: normal;
	background: rgba(var(--gray2), 0.1);
}

.faq dt:before {
	font-family: var(--webf);
	font-size: 22px;
	font-weight: bold;
	position: absolute;
	top: 20px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	content: "Q";
	color: rgba(var(--black), 1);
	border: 1px solid rgba(var(--black), 1);
	border-radius: 50%;
	font-weight: normal;
	background: rgb(var(--white));
}

.faq dd {
	position: relative;
	min-height: 60px;
	padding: 25px 30px 25px 110px;
	color: #2e2828;
}

.faq dd:before {
	font-family: var(--webf);
	font-size: 18px;
	font-weight: bold;
	position: absolute;
	top: 15px;
	left: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 50px;
	height: 50px;
	content: "A";
	color: rgba(var(--white), 1);
	border: 1px solid rgba(var(--black), 1);
	border-radius: 25px;
	background: rgba(var(--black), 1);
	font-weight: normal;
}

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

	.sec-others-01 {
		padding: 0 var(--over-width-half) 1px;

		--titCm: 0 0 15px;

		--titBfz: 1.4rem;
		--titBm: 30px 0 0;
	}

	.list-others,
	.list-others2 {
		margin: 20px auto 40px;
		--titBfz: 1rem;
		--titBm: 10px 0;

		--boxNC_gap: 30px 5%;
		--boxNC_child_w: calc(95% / 2);
	}

	.list-others2 {
		--boxNC_gap: 20px;
		--boxNC_child_w: 100%;
	}

	.sec-other-02 {
		padding: 40px var(--over-width-half);
		display: block;

		--titAm: 0 auto 30px;
	}


	.faq {
		margin: 0 auto 20px;
		border-radius: 10px;
	}

	.faq dt {
		font-size: 15px;
		min-height: 60px;
		padding: 20px 15px 20px 50px;
	}

	.faq dt:before {
		font-size: 17px;
		top: 20px;
		left: 10px;
		width: 30px;
		height: 30px;
	}

	.faq dd {
		min-height: 60px;
		padding: 20px 15px 20px 50px;
	}

	.faq dd:before {
		font-size: 17px;
		top: 15px;
		left: 10px;
		width: 30px;
		height: 30px;
	}
}

.sec-graduate-01 {
	padding: 0 var(--over-width-half) 80px;
}

.table-graduate :is(th, td) {
	vertical-align: middle;
}

.table-graduate th {
	white-space: nowrap;
}

.table-graduate tr td:first-of-type {
	font-weight: bold;
	white-space: nowrap;
}

.table-graduate tr td:nth-child(4),
.table-graduate tr td:nth-child(5) {
	text-align: center;
}

.sec-graduate-02 {
	padding: 1px var(--over-width-half) 80px;

  --titAm:0 auto 30px;

	--titBfz: 1.8rem;
	--titBm: 0 0 30px;
}


.sec-graduate-03{
  	padding: 0 var(--over-width-half) 100px;
  	
  	--titAm:0 auto 30px;
}

@media screen and (max-width:520px) {
	.sec-graduate-01 {
		padding: 0 var(--over-width-half) 40px;
	}

	.table-graduate tbody {
		display: grid;
		grid-template-columns: 120px auto;
	}

	.table-graduate th {
		font-size: 0.8rem;
	}

	.table-graduate th,
	.table-graduate td {
		display: flex;
		align-items: center;
		min-height: 5em;
		white-space: unset;
		font-size: 0.7rem;
		line-height: 1.3;
	}

	.table-graduate tr td:last-of-type,
	.table-graduate tr th:last-of-type {
		min-height: 6em;
	}

	.sec-graduate-02 {
		padding: 0 var(--over-width-half) 40px;

		--titBfz: 1.4rem;
		--titBm: 0 0 20px;
	}
	
	.sec-graduate-03{
    	padding: 30px var(--over-width-half) ;
  }
}

/**================================================== 
 職員採用
================================================== **/
.post0:before{
  content: "現在募集がありません";
  display: block;
  padding:80px 5%;
  text-align: center;
  font-family: var(--webf);
  font-size: 1.3rem;
}

.sec-recruit-01 {
	padding: 30px 5% 60px;
	background: linear-gradient(to right, rgba(var(--gray), 1) 0%, rgba(var(--gray), 1) 25%, rgba(var(--white), 1) 25%);
	margin-bottom: 30px;
}

.no-post-recruit {
	margin: 200px auto;
	text-align: center;
	font-size: 1.4rem;
}

.detail-recruit {
	--boxLR_w: 100%;
	--boxLR_m: 30px 0;
	--boxLR_gap: 50px;
	--boxLR_1_w: 45%;
	--boxLR_2_w: calc((100% - var(--boxLR_1_w)) - var(--boxLR_gap));
	--boxLR_jc: flex-start;
	--boxLR_ai: flex-start;
	--boxLR_fflow: wrap;

	--titBfz: 1.7rem;
	--titBm: 80px 0 30px;
}
.detail-recruit .LR2{
  --boxLR_2_w: calc( var(--base-width) - 30%);
  margin: 0 auto 0 30% ;
}
.detail-recruit .LR1 + .LR2{
  --boxLR_2_w: calc((100% - var(--boxLR_1_w)) - var(--boxLR_gap));
  margin:0;
}

.sec-recruit-02 {
	padding: 80px var(--over-width-half);

	--titAta: center;
	--titAm: 0 auto 40px;

	--titBta: center;
	--titBm: 60px auto 30px;

	--btnAta: center;
	--btnAw: 600px;
	--btnAm: 15px auto;
}

.sec-recruit-03 {
	padding: 60px var(--over-width-half);

	--titBta: center;
	--titBm: 0 auto 30px;
}

.sec-recruit-03 .list-housin {
	text-align: center;
}

.sec-recruit-04 {
	padding: 0 var(--over-width-half) 80px;

	--titAta: center;
	--titAm: 0 auto 40px;

	--titBta: center;
	--titBm: 60px auto 30px;

	--btnAta: center;
	--btnAw: 600px;
	--btnAm: 15px auto;
}

@media screen and (max-width:520px) {
  .post0:before{
    padding:40px 5%;
  }
  
	.sec-recruit-01 {
		padding: 20px 5% 30px;
		background: linear-gradient(to right, rgba(var(--gray), 1) 0%, rgba(var(--gray), 1) 15%, rgba(var(--white), 1) 15%);
	}

	.no-post-recruit {
		margin: 50px auto;
	}

	.detail-recruit {
		--boxLR_w: 100%;
		--boxLR_m: 20px 0 0;
		--boxLR_gap: 20px;
		--boxLR_1_w: 100%;
		--boxLR_2_w: 83%;
		--boxLR_jc: flex-end;
		--boxLR_ai: flex-start;
		--boxLR_fflow: wrap;

		--titBfz: 1.2rem;
		--titBm: 0 0 20px;
	}
	
	.detail-recruit .LR2{
    --boxLR_2_w: 83%;
    margin: 0 ;
  }
  .detail-recruit .LR1 + .LR2{
    --boxLR_2_w: 83%;
    margin:0;
  }

	.sec-recruit-02 {
		padding: 30px var(--over-width-half);

		--titAm: 0 auto 20px;

		--titBfz: 1.3rem;
		--titBta: center;
		--titBm: 40px auto 20px;

		--btnAta: center;
		--btnAw: 100%;
		--btnAm: 15px auto;
	}

	.sec-recruit-03 {
		padding: 30px var(--over-width-half);

		--titBfz: 1.3rem;
		--titBta: center;
		--titBm: 0 auto 20px;
	}
	
	.sec-recruit-04 {
		padding: 0 var(--over-width-half) 30px;

		--titAm: 0 auto 20px;

		--titBfz: 1.3rem;
		--titBta: center;
		--titBm: 40px auto 20px;

		--btnAta: center;
		--btnAw: 100%;
		--btnAm: 15px auto;
	}
}


/**================================================== 
 カテゴリボタン
================================================== **/

.catBtn {
	position: relative;
	display: flex;
	gap: 10px;
	border-bottom: 1px solid rgba(var(--gray));
}

.catBtn a {
	min-width: 150px;
	text-align: center;
	padding: 5px 25px;
	border: 1px solid rgba(var(--jhs-hs), 0.5);
	color: rgba(var(--jhs-hs), 0.5);
	margin-bottom: -1px;
}

.catBtn a:hover,
.catBtn a.current {
	border: 1px solid rgba(var(--jhs-hs));
	background: rgba(var(--jhs-hs));
	color: rgb(var(--white));
}

.catBtn2 {
	margin: 20px 0 0;
	position: relative;
	display: flex;
	gap: 10px;
	font-size: 0.9rem;
}

.catBtn2 a {
	text-align: center;
	padding: 3px 25px;
	border: 1px solid rgba(var(--jhs-hs), 1);
	color: rgba(var(--jhs-hs), 1);
	opacity: 0.4;
}

.catBtn2 a:hover,
.catBtn2 a.current {
	opacity: 1;
}

.catBtn3 {
	margin: 20px 0 0;
	position: relative;
	display: flex;
	gap: 10px;
	font-size: 0.9rem;
}

.catBtn3 a {
	text-align: center;
	padding: 3px 25px;
	border: 1px solid rgba(var(--jhs-hs), 1);
	color: rgba(var(--jhs-hs), 1);
	background: rgb(var(--white));
	position: relative;
}

.catBtn3 a:after {
	content: "";
	width: 4px;
	height: 4px;
	border-top: 1px solid rgb(var(--jhs-hs));
	border-right: 1px solid rgb(var(--jhs-hs));
	position: absolute;
	top: calc(50% - 2px);
	right: 10px;
	transform: rotate(45deg);
	z-index: 2;
}

.catBtn3 a:hover,
.catBtn3 a.current {
	background: rgba(var(--jhs-hs));
	color: rgb(var(--white));
}

.catBtn3 a:hover:after {
	border-top: 1px solid rgb(var(--white));
	border-right: 1px solid rgb(var(--white));
}

@media screen and (max-width:520px) {
	.catBtn {
		overflow-x: auto;
		overflow-y: hidden;
		position: relative;
		display: flex;
		gap: 5px;
		padding: 0 1px;
		font-size: 0.9rem;
	}

	.catBtn a {
		white-space: nowrap;
		min-width: auto;
		padding: 5px 10px 10px;
	}

	.catBtn2 {
		margin: 20px 0 0;
		position: relative;
		display: flex;
		flex-flow: wrap;
		gap: 5px;
		font-size: 0.9rem;
	}

	.catBtn2 a {
		padding: 3px 15px;
	}
	
	.catBtn3 {
		margin: 20px 0 0;
		position: relative;
		display: flex;
		flex-flow: wrap;
		gap: 8px;
		font-size: 0.9rem;
	}

	.catBtn3 a {
		padding: 3px 15px;
	}
}




/**================================================== 
 各種一覧
================================================== **/
.list-page {
	padding: 60px var(--over-width-half) 80px;
}

.list-blog {
	--boxNC_w: 100%;
	--boxNC_m: 80px auto;
	--boxNC_gap: 40px 5%;
	--boxNC_jc: flex-start;
	--boxNC_ai: stretch;
	--boxNC_fflow: wrap;

	--boxNC_child_w: calc(90% / 3);
}

.list-blog picture,
.list-voice picture,
.list-cas picture {
	display: block;
	aspect-ratio: 4/3;
	width: 100%;
}
/*
.list-blog .cate {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: wrap;
}
*/

.list-blog .em,
.list-voice .em {
	margin: 5px 0;
	display: flex;
	flex-flow: wrap;
	gap: 5px;
}

.list-blog em,
.list-voice em {
	min-width: 6em;
	box-shadow: 0 0 0 1px rgb(var(--gray)) inset;
	background: rgb(var(--white));
}

.list-blog em:is(.jhs, .hs, .all, .oth),
.list-voice em:is(.jhs, .hs, .all, .oth),
.list-cas em:is(.jhs, .hs, .all, .oth) {
	background: rgb(var(--jhs-hs));
	color: rgb(var(--white));
	box-shadow: none;
}

.list-blog h3,
.list-voice h3 {
	margin: 10px 0 15px;
	font-family: var(--webf);
	font-size: 1.1rem;
	line-height: 1.5;
}

.list-blog p,
.list-voice p {
	font-size: 0.9em;
}

.list-voice {
	--boxNC_w: 100%;
	--boxNC_m: 80px auto;
	--boxNC_gap: 40px 5%;
	--boxNC_jc: flex-start;
	--boxNC_ai: stretch;
	--boxNC_fflow: wrap;

	--boxNC_child_w: calc(95% / 2);
}

.list-voice li a {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 200px auto;
	gap: 5px 15px;
}

.list-voice picture {
	grid-row: 1/3;
	grid-column: 1/2;
}

.list-voice .em {
	grid-row: 1/2;
	grid-column: 2/3;
}

.list-voice h3 {
	grid-row: 2/3;
	grid-column: 2/3;
	margin: 0;
}

.list-voice p {
	grid-row: 3/4;
	grid-column: 1/3;
}

.list-cas {
	--boxNC_w: 100%;
	--boxNC_m: 30px auto 80px;
	--boxNC_gap: 35px 3%;
	--boxNC_jc: flex-start;
	--boxNC_ai: stretch;
	--boxNC_fflow: wrap;

	--boxNC_child_w: calc((100% - (3% * 2)) / 3);
}

.list-cas li {
	border: 1px dotted rgba(var(--gray2), 1);
	padding: 5px;
}

.list-cas li a {
	display: block;
	position: relative;
}

.list-cas .em {
	position: absolute;
	top: 0;
	left: 0;
}

.list-cas picture {
	position: relative;
}

.list-cas h3:before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background: rgb(var(--jhs-hs));
	z-index: 10;
	flex: none;
}

.list-cas h3:after {
	content: "";
	width: 6px;
	height: 6px;
	border-top: 1px solid rgb(var(--white));
	border-right: 1px solid rgb(var(--white));
	position: absolute;
	top: 7px;
	left: 7px;
	transform: rotate(45deg);
	z-index: 2;
	z-index: 11;
}

.list-cas h3 {
	width: 100%;
	position: relative;
	color: rgb(var(--jhs-hs));
	font-weight: bold;
	font-size: 1.2rem;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 15px;
	line-height: 1;
}

.list-cas p {
	margin: 0 15px 15px;
	line-height: 1.5;
}

@media screen and (max-width:520px) {
	.list-page {
		padding: 30px 5% 40px;
	}

	.list-blog {
		--boxNC_w: 100%;
		--boxNC_m: 40px auto;
		--boxNC_gap: 40px 5%;

		--boxNC_child_w: calc(95% / 2);
	}

	.list-blog .cate {
		display: block;
	}

	.list-blog em,
	.list-voice em {
		min-width: auto;
	}


	.list-blog h3,
	.list-voice h3 {
		font-size: 1rem;
	}

	.list-voice {
		--boxNC_w: 100%;
		--boxNC_m: 40px auto;
		--boxNC_gap: 40px 5%;

		--boxNC_child_w: 100%;
	}

	.list-voice li a {
		display: grid;
		grid-template-rows: auto 1fr auto;
		grid-template-columns: 130px auto;
		gap: 5px 10px;
	}

	.list-cas {
		--boxNC_w: 100%;
		--boxNC_m: 30px auto 40px;
		--boxNC_gap: 35px 3%;

		--boxNC_child_w: calc((100% - (3% * 1)) / 2);
	}

	.list-cas .em {
		position: absolute;
		top: 0;
		left: 0;
	}

	.list-cas picture {
		position: relative;
	}

	.list-cas h3 {
		font-size: 1.1rem;
		margin: 15px 0 10px;
		gap: 5px;
	}

	.list-cas p {
		margin: 0 0 15px;
		line-height: 1.5;
	}
}

/**================================================== 
詳細ページ
================================================== **/
.detail-page {
	padding: 60px var(--over-width-half) 80px;
}

@media screen and (max-width:520px) {
	.detail-page {
		padding: 30px 5% 40px;
	}
}

/**================================================== 
入試イベント 
================================================== **/

.sec-event-01 {
	padding: 0 var(--over-width-half);

	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr 1fr;
	gap: 30px;

	--titAm: 0;

	--btnAw: calc(100% - 60px);
	--btnAm: 20px auto 0;
}

.sec-event-01 .titA {
	grid-row: 1 / 2;
	grid-column: 1 / 3;
}

.sec-event-02 {
	--btnAw: 600px;
	--btnAm: 0 auto;
	--btnAta: center;
}

.event-02-inner {
	width: var(--base-width);
	margin: 50px auto;
}

.sec-event-03 {
	padding: 80px var(--over-width-half);
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 300px 1fr;
	gap: 0 60px;
	--titAm: 0;
	margin: 80px auto 0;
}

.sec-event-04 {
	width: var(--base-width);
	margin: 60px auto;

	--btnAw: 600px;
	--btnAm: 30px auto 80px;
	--btnAta: center;
}

.detail-event {
	margin: 0 0 80px;
	--titCm: 60px 0 40px;
	--titCbg: rgb(var(--jhs-hs));
	--titCw: 100%;
}

.sec-event-04 .school-tit {
	display: flex;
	align-items: flex-end;
	font-size: 1.6rem;
	font-family: var(--webf);
	padding: 5px 0;
	background-repeat: no-repeat;
	background-position: right 35px bottom;
	background-size: auto 123px;
	min-height: 123px;
	border-bottom: 4px solid rgb(var(--jhs-hs));
}

.sec-event-04 .btnA {
	--btnAhvbg: rgb(var(--jhs-hs));
}

.sec-event-04 .top-list-event {
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
	gap: 20px;
}

.sec-event-04 .table th {
	background: rgba(var(--white), 0.9);
	color: rgb(var(--black));
}

.pagelink {
	display: flex;
	gap: 30px;
	margin: 0 30px 50px;
}

.pagelink a {
	flex: 1;
	display: block;
	padding: 20px 25px;
	border: 1px solid rgb(var(--jhs-hs));
	color: rgb(var(--jhs-hs));
	text-align: center;
	position: relative;
}

.pagelink a:after {
	content: "";
	width: 8px;
	height: 8px;
	border-top: 1px solid rgb(var(--jhs-hs));
	border-right: 1px solid rgb(var(--jhs-hs));
	position: absolute;
	top: calc(50% - 4px);
	right: 20px;
	transform: rotate(135deg);
	z-index: 2;
}

.pagelink a:before {
	background: rgb(var(--jhs-hs));
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 100%;
	height: 100%;
	transform: scale(0, 1);
	transform-origin: left top;
	transition: .4s cubic-bezier(0.45, 0, 0.55, 1);
	z-index: -1;
}

.pagelink a:hover {
	color: rgb(var(--white));
}

.pagelink a:hover:before {
	transform: scale(1, 1);
}

.pagelink a:hover:after {
	border-top: 1px solid rgb(var(--white));
	border-right: 1px solid rgb(var(--white));
}

.event-04-inner {
	display: flex;

	--boxNC_w: 100%;
	--boxNC_m: 0 auto;
	--boxNC_gap: 20px 5%;
	--boxNC_child_w: calc(95% / 2);

	--btnAw: 50%;
	--btnAm: 0 auto;
}

@media screen and (max-width:520px) {
	.sec-event-01 {
		padding: 40px 0 0;

		display: flex;
		flex-flow: column;
		gap: 15px;

		--titAm: 0 5%;

		--btnAw: 85%;
		--btnAm: 20px auto 0;
	}

	.sec-event-02 {
		--btnAw: 90%;
	}

	.event-02-inner {
		width: 90%;
		margin: 0 auto 20px;
	}

	.sec-event-03 {
		padding: 30px var(--over-width-half);
		display: block;
		--titAm: 0 0 20px;
		;
		margin: 30px auto 0;
	}

	.sec-event-04 {
		width: 90%;
		margin: 30px auto;

		--btnAw: 100%;
		--btnAm: 20px auto;
		--btnAta: center;
	}

	.detail-event {
		margin: 0 0 40px;
		--titCm: 30px 0 20px;
		--titCbg: rgb(var(--jhs-hs));
		--titCw: 100%;
	}

	.sec-event-04 .school-tit {
		font-size: 1.2rem;
		padding: 5px 5%;
		background-position: right 10px bottom;
		background-size: auto 85px;
		min-height: 85px;
	}

	.sec-event-04 .top-list-event {
		display: block;
		padding: 0 0 20px;
	}

	.pagelink {
		gap: 10px;
		margin: 0 0 50px;
	}

	.pagelink a {
		padding: 15px 5px;
	}

	.pagelink a:after {
		width: 6px;
		height: 6px;
		right: 5px;
	}

	.event-04-inner {
		display: flex;

		--boxNC_w: 100%;
		--boxNC_m: 0 auto;
		--boxNC_gap: 20px 5%;
		--boxNC_child_w: 100%;

		--btnAw: 100%;
		--btnAm: 0 auto;
	}
}


.sec-prv-01{
  padding:0 var(--over-width-half) 80px;
  --titBfz:1.6rem;
  --titBm:60px 0 20px;
}

@media screen and (max-width:520px) {
  .sec-prv-01{
    padding:0 var(--over-width-half) 40px;
    --titBfz:1.3rem;
    --titBm:30px 0 20px;
  }
}


/*layout:2*//*layout:9*/