@charset "UTF-8";
/*
    Template: swell
    Theme Name: DSSJ（SWELL子テーマ）
    Description: 旧DSSJオリジナルテーマのデザインをSWELL上で再現する子テーマ
    Version: 1.0.0
    Author: DSSJ

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 色・余白などの基本はカスタマイザーで設定（README.md 参照）。
   ここには SWELL の設定だけでは再現できない部分を書く。 */

:root {
	--dssj-main: #315697;
	--dssj-sub: #c0f0ff;
	--dssj-gothic: "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
	--dssj-mincho: "游明朝", "YuMincho", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "HG明朝E", "ＭＳ Ｐ明朝", serif;
}


/*--------- ヘッダー：電話番号・お問い合わせボタン -------------*/

.dssj-hcontact {
	display: flex;
	align-items: center;
	gap: 40px;
}

.dssj-hcontact img {
	display: block;
	height: 64px;
	width: auto;
}

.dssj-hcontact__btn {
	position: relative;
	display: block;
}

.dssj-hcontact__on {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .2s;
}

.dssj-hcontact__btn:hover .dssj-hcontact__on,
.dssj-hcontact__btn:focus-visible .dssj-hcontact__on {
	opacity: 1;
}

/* スローガン画像は一回り大きく（元画像の高さ 80px をそのまま使う） */
.dssj-hcontact .dssj-hcontact__slogan {
	height: 80px;
}

@media (max-width: 1199px) {
	.dssj-hcontact { gap: 16px; }
	.dssj-hcontact img { height: 48px; }
	.dssj-hcontact .dssj-hcontact__slogan { height: 60px; }
}


/*--------- スマホ下部の固定ボタン（電話・お問い合わせ） -------------*/

.dssj-spcta {
	display: none;
}

@media (max-width: 959px) {
	.dssj-spcta {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		display: flex;
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--dssj-main);
		box-shadow: 0 -2px 8px rgba(0, 0, 0, .15);
	}

	.dssj-spcta__btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 56px;
		color: #fff;
		font-size: 15px;
		font-weight: 700;
		letter-spacing: .05em;
		text-decoration: none;
	}

	.dssj-spcta__btn:hover,
	.dssj-spcta__btn:active {
		color: #fff;
		opacity: .85;
	}

	.dssj-spcta__btn--tel {
		border-right: solid 1px rgba(255, 255, 255, .5);
	}

	.dssj-spcta__btn i {
		font-size: 20px;
	}

	/* 固定ボタンで本文・フッターが隠れないように */
	body {
		padding-bottom: calc(56px + env(safe-area-inset-bottom));
	}

	/* SWELLの「ページトップへ」ボタンを固定ボタンの上に逃がす */
	.p-fixBtnWrap {
		bottom: calc(56px + 1em + env(safe-area-inset-bottom));
	}
}


/*--------- グローバルナビ（白い区切り線） -------------*/

@media (min-width: 960px) {
	.l-header__gnav .c-gnav > .menu-item {
		border-right: solid 1px rgba(255, 255, 255, .8);
	}

	.l-header__gnav .c-gnav > .menu-item:first-child {
		border-left: solid 1px rgba(255, 255, 255, .8);
	}

	.l-header__gnav .c-gnav > .menu-item > a:hover {
		background-color: var(--dssj-sub);
		color: #000;
	}
}


/*--------- 固定ページのタイトル（旧 h1.kt01） -------------*/
/* 旧サイトと同じく、ナビのすぐ下に画面幅いっぱいの帯で表示する */

.page:not(.home) .l-content {
	padding-top: 5px;
}

.page .c-pageTitle {
	margin: 0 calc(50% - 50vw + var(--swl-scrollbar_width, 0px) / 2) 20px;
	padding: 50px 30px;
	background-color: var(--dssj-sub);
	color: var(--dssj-main);
	font-size: 36px;
	letter-spacing: .2em;
	text-align: center;
}

/* サイドバーを表示するページでは、帯を本文の幅に収める */
.-sidebar-on .page .c-pageTitle,
.page.-sidebar-on .c-pageTitle {
	margin-right: 0;
	margin-left: 0;
}

.page .c-pageTitle .c-pageTitle__inner {
	float: none;
	display: block;
}

.page .c-pageTitle::before,
.page .c-pageTitle::after {
	content: none;
}

@media (max-width: 599px) {
	.page .c-pageTitle {
		padding: 30px 16px;
		font-size: 24px;
		letter-spacing: .1em;
	}
}

/* 投稿のタイトル（旧 h1.kt011） */
.single .c-postTitle__ttl {
	color: var(--dssj-main);
	font-size: 24px;
	text-align: center;
}


/*--------- 本文の見出し（旧 .kiji h2〜h6） -------------*/
/* SWELLの見出しデザイン設定より優先させるため body を付けて詳細度を上げている。
   SWELLブロック内の見出し（FAQ・投稿リストなど）は対象外。 */

body .post_content :is(h2, h3, h4, h5, h6):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	clear: both;
	font-family: var(--dssj-gothic);
	background: none;
	border-radius: 0;
}

body .post_content :is(h2, h3, h4, h5, h6):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before,
body .post_content :is(h2, h3, h4, h5, h6):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::after {
	content: none;
}

body .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	margin: 40px 0 25px;
	padding: 10px 0 9px 20px;
	border: none;
	border-top: solid 2px var(--dssj-main);
	border-bottom: solid 2px var(--dssj-main);
	color: var(--dssj-main);
	font-size: 28px;
	letter-spacing: .1em;
}

body .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	margin: 35px 0 25px;
	padding: 10px 0 9px 15px;
	border: double 3px var(--dssj-main);
	color: var(--dssj-main);
	font-size: 22px;
	letter-spacing: .2em;
}

body .post_content :is(h4, h5):where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	margin: 20px 0 25px;
	padding: 12px 10px 8px 20px;
	border: double 4px #fff;
	background-color: var(--dssj-main);
	color: #fff;
	font-size: 18px;
	letter-spacing: .3em;
}

body .post_content h6:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
	margin: 35px 0 15px;
	padding: 10px 10px 8px 20px;
	border: none;
	background-color: var(--dssj-main);
	color: #fff;
	font-size: 18px;
	letter-spacing: .3em;
}

@media (max-width: 599px) {
	body .post_content h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
		padding-left: 21px;
		font-size: 18px;
	}

	body .post_content h3:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)) {
		padding-left: 6px;
		font-size: 18px;
	}
}

/* 本文中のリンク */
.post_content a:not([class]) {
	color: #515151;
}

.post_content a:not([class]):hover {
	background-color: var(--dssj-sub);
}


/*--------- トップページ「お知らせ」（旧 h2.kt02 / .mymenu-news2） -------------*/
/* 見出しブロックの「追加CSSクラス」に kt02 を付けて使う */

body .post_content h2.kt02 {
	margin: 0;
	padding: 10px 10px 9px 16px;
	border: double 3px var(--dssj-main);
	color: var(--dssj-main);
	font-size: 24px;
	letter-spacing: .1em;
}

@media (max-width: 599px) {
	body .post_content h2.kt02 { font-size: 20px; }
}

.post_content .dssj-news {
	margin: 0 0 2em;
	padding: 0;
	list-style: none;
}

.post_content .dssj-news__item {
	margin: 0;
	padding: 0;
	border-bottom: dotted 2px #ddd;
}

.post_content .dssj-news__item::before {
	content: none;
}

.post_content .dssj-news a {
	display: flex;
	gap: 20px;
	padding: 12px 6px;
	color: #000;
	font-size: 14px;
	text-decoration: none;
}

.post_content .dssj-news a:hover {
	background-color: var(--dssj-sub);
}

.post_content .dssj-news time {
	flex-shrink: 0;
	font-size: 12px;
	line-height: 1.7rem;
}

@media (max-width: 599px) {
	.post_content .dssj-news a {
		flex-direction: column;
		gap: 0;
	}
}


/*--------- 既存記事の本文で使われていたクラス -------------*/

.post_content h1.mb01 {
	margin: 0 0 25px;
	padding: 12px 5px 10px 20px;
	border: inset 4px var(--dssj-main);
	color: var(--dssj-main);
	font-family: var(--dssj-mincho);
	font-size: 18px;
	letter-spacing: .1em;
}

.post_content h1.mb02 {
	margin: 0 0 30px;
	padding: 15px 10px;
	border-top: double 2px var(--dssj-main);
	border-bottom: double 2px var(--dssj-main);
	color: #000;
	font-size: 16px;
	letter-spacing: .1em;
}

.post_content table.menulist {
	margin: 0 10px 20px 20px;
}

.kyode01 {
	float: left;
	width: 30%;
	margin: 0;
	padding-bottom: 20px;
}

.kyode02s {
	float: left;
	clear: both;
	width: 30%;
	padding-bottom: 30px;
	font-size: 14px;
}

.kyode02f {
	float: left;
	width: 70%;
	margin: 0;
	padding-bottom: 30px;
}

.mpim { padding-top: 20px; }

.jigyo { padding: 0 0 20px 75px; }

.top3menu { margin: 30px 20px 0 0; }

@media (max-width: 599px) {
	.top3menu { width: 100%; }
	.jigyo { padding-left: 0; }
}

.sekostep {
	margin: 20px 0;
	padding: 30px 50px 40px;
	border-radius: 20px;
	background-color: var(--dssj-main);
	color: #fff;
}

@media (max-width: 599px) {
	.sekostep { padding: 20px; }
}

p.YTleft { float: left; }

p.YTRightt { float: right; }

.wp-block-button a:visited { color: #fff; }

/* Content Views プラグインの「続きを読む」 */
p.pt-cv-rmwrap a.more-link,
p.pt-cv-rmwrap a:visited { color: #fff; }


/*--------- ヘッダー：ロゴ・グローバルナビ（旧テーマの見た目に合わせる） -------------*/
/* カスタマイザー：ヘッダーのレイアウト(PC)「ヘッダーナビを下に」、
   ヘッダーメニューの背景色「色を指定する」= #315697 と組み合わせて使う */

.l-header .c-headLogo.-img {
	height: auto;
}

.l-header .c-headLogo.-img .c-headLogo__img {
	width: auto;
	height: 72px;
}

@media (max-width: 959px) {
	.l-header .c-headLogo.-img .c-headLogo__img { height: 40px; }
}

@media (min-width: 960px) {
	.l-header__inner {
		padding-top: 12px;
		padding-bottom: 0;
	}

	/* ナビの幅をロゴ・お問い合わせボタンと同じ幅（最大1200px）にそろえ、
	   項目を均等幅で並べる。左端の線＝ロゴの左端、右端の線＝ボタンの右端になる */
	.l-header__gnav .c-gnav {
		width: min(1200px, calc(100% - 48px));
		margin: 0 auto;
		justify-content: stretch;
	}

	.l-header__gnav .c-gnav > .menu-item {
		flex: 1 1 0;
	}

	.l-header__gnav .c-gnav > .menu-item > a {
		justify-content: center;
		padding: 0 1em;
		color: #fff;
		font-size: 16px;
		letter-spacing: .05em;
	}

	.l-header__gnav .c-gnav > .menu-item > a .ttl {
		font-size: 16px;
	}
}

/* ロゴ（左）・スローガン（中央）・お問い合わせボタン（右）を1行に並べる */
@media (min-width: 960px) {
	.l-header.-parallel .l-header__inner {
		align-items: center;
	}

	.l-header.-parallel .l-header__logo {
		width: auto;
		padding: 12px 0 12px max(24px, calc((100% - 1200px) / 2));
		text-align: left;
	}

	.l-header.-parallel .w-header {
		flex: 1;
		align-self: center;
		width: auto;
		padding-right: max(24px, calc((100% - 1200px) / 2));
	}

	.l-header.-parallel .w-header__inner {
		width: 100%;
	}

	.l-header.-parallel .dssj-hcontact {
		justify-content: space-between;
		padding-left: 6%;
	}

	.l-header.-parallel #gnav {
		width: 100%;
	}
}


/*--------- トップのメインビジュアル（スライダー）の文字 -------------*/

.p-mainVisual .p-mainVisual__slideTitle {
	font-size: clamp(26px, 3.6vw, 52px);
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.4;
}

.p-mainVisual .p-mainVisual__slideText {
	margin-top: .6em;
	font-size: clamp(15px, 1.6vw, 24px);
	font-weight: 700;
	line-height: 1.6;
}

.p-mainVisual .c-mvBtn__btn {
	font-size: clamp(14px, 1.2vw, 18px);
	font-weight: 700;
}


/*--------- お問い合わせフォーム（Contact Form 7） -------------*/

.wpcf7 form {
	max-width: 760px;
	margin: 2em auto 0;
	padding: 2.5em 2em;
	background-color: #f7f9fc;
	border-top: solid 3px var(--dssj-main);
}

.wpcf7 form > p,
.wpcf7 form label {
	margin: 0 0 1.5em;
}

.wpcf7 label {
	display: block;
	color: var(--dssj-main);
	font-weight: 700;
	letter-spacing: .05em;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	margin-top: .5em;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	width: 100%;
	padding: .8em 1em;
	border: solid 1px #c9d3e3;
	border-radius: 4px;
	background-color: #fff;
	color: #333;
	font-size: 16px; /* スマホで入力時に拡大されないように16px以上 */
	font-weight: 400;
	transition: border-color .2s, box-shadow .2s;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus {
	border-color: var(--dssj-main);
	box-shadow: 0 0 0 3px rgba(49, 86, 151, .15);
	outline: none;
}

.wpcf7 textarea {
	min-height: 12em;
}

/* 同意チェック */
.wpcf7 .wpcf7-acceptance {
	display: block;
	font-size: 14px;
	line-height: 1.7;
}

.wpcf7 .wpcf7-acceptance input {
	width: 18px;
	height: 18px;
	margin-right: .5em;
	vertical-align: -3px;
}

/* 送信ボタン */
.wpcf7 input[type="submit"] {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 2em auto 0;
	padding: 1em;
	border: none;
	border-radius: 40px;
	background-color: var(--dssj-main);
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .3em;
	cursor: pointer;
	transition: opacity .2s;
}

.wpcf7 input[type="submit"]:hover {
	opacity: .85;
}

.wpcf7 input[type="submit"]:disabled {
	background-color: #9aa8c2;
	cursor: not-allowed;
}

.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 1em auto 0;
}

/* エラー・完了メッセージ */
.wpcf7 .wpcf7-not-valid-tip {
	margin-top: .3em;
	font-size: 13px;
	font-weight: 400;
}

.wpcf7 form .wpcf7-response-output {
	margin: 1.5em 0 0;
	padding: 1em;
	border-radius: 4px;
	font-size: 14px;
}

@media (max-width: 599px) {
	.wpcf7 form { padding: 1.5em 1em; }
}