@charset "UTF-8";
/* =======================================================================
   ゆーかり - レスポンシブスタイルシート

   ブレイクポイント体系:
   - 968px以下: ヘッダー背景調整
   - 768px以下: タブレット
   - 600px以下: スマートフォン
   - 480px以下: スマートフォン小
   ======================================================================= */

/* =======================================================================
   0. ヘッダー背景調整（968px以下）
   ======================================================================= */

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

	header {
		background-size: 100% auto;
		background-position: center top;
	}

	/* ナビゲーション幅調整 */
	nav ul {
		width: 100%;
		padding: 0 10px;
	}

	nav ul li {
		width: 18%;
		margin: 0 0.5%;
	}

	/* キャラクター装飾を非表示 */
	div.kids#b1,
	div.kids#g2 {
		display: none;
	}

}

/* =======================================================================
   1. タブレット（768px以下）
   ======================================================================= */

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

	/* ----- 基本要素 ----- */
	body {
		width: 100%;
	}

	br.sp {
		display: block;
	}

	div#headline .headline-sep {
		display: none;
	}

	/* ----- ヘッダー ----- */
	header {
		height: auto;
		background-size: 100% auto;
		background-position: center 60%;
		margin: 0;
		padding: 30px 0 20px;
	}

	div#headline {
		margin: 0.5em auto 0.8em;
	}

	#top-logo {
		max-width: 280px;
		margin-top: 10px;
	}

	/* ヘッダーライン */
	div#hline {
		display: none;
	}

	div#hline2 {
		display: block !important;
		position: relative;
		top: auto;
		font-size: 85%;
		border-bottom: 1px solid #ddd;
		overflow: hidden;
	}

	/* 電話番号リンク（スマホ用下線） */
	a.tel-link em {
		text-decoration: underline;
	}

	div#hline2 .blue,
	div#hline2 .pink,
	div#hline2 .green {
		font-size: 100%;
	}

	/* ----- ナビゲーション ----- */
	div#container nav {
		margin: 10px 0;
	}

	nav ul {
		width: 100%;
		text-align: center;
		margin: 0 auto;
		padding: 0 5px;
	}

	nav ul li {
		border-radius: 5px;
		width: 18%;
		min-width: auto;
		margin: 0 0.5%;
	}

	nav ul li a {
		font-size: 15px;
		white-space: nowrap;
		letter-spacing: 0;
	}


	/* ----- メインコンテンツ ----- */
	main#main {
		width: 100%;
		min-width: inherit;
		border-radius: 0;
		box-shadow: inherit;
		margin: 0 auto 90px;
		padding: 20px 20px 50px;
	}

	main#main h2 {
		text-align: center;
	}

	main#main h2 img {
		width: 100%;
		max-width: 300px;
		max-height: 151px;
	}

	main#main h3 {
		color: #f2822c;
		text-align: left;
		border-bottom: 1px solid #f2822c;
		padding-bottom: 5px;
		margin: 1.5em auto 0.8em;
	}

	main#main p,
	body[data-page="index"] main#main p {
		text-align: center;
	}

	main#main h4 {
		text-align: left;
	}

	main#main p {
		/*
		text-align: left;
		text-align: justify;
		*/
		margin-bottom: 1em;
		line-height: 1.45em;
	}

	main#main div#ring {
		display: none;
	}

	/* キャラクター非表示 */
	div.kids {
		display: none;
	}

	/* ----- 写真コンテナ ----- */
	.photo-container {
		max-width: 100%;
	}

	/* ----- テーブル ----- */
	table {
		width: 100%;
		border-collapse: collapse;
		margin: 10px 0;
	}

	table th,
	table td {
		border: 1px solid #b0ac99;
		padding: 4px 2px;
		text-align: center;
	}

	table th {
		color: #646157;
		background-color: #dbd4bb;
	}

	/* ----- マップ ----- */
	#map {
		width: 100%;
		height: 400px;
		border: 1px solid #bbb;
		margin: 20px auto;
	}

	/* ----- フッター ----- */
	footer {
		height: auto;
		padding: 30px 15px 70px;
	}

	footer nav ul li {
		margin: 0.5em 0;
		padding: 0 0.5em;
		border-right: none;
	}

	#gotop {
		top: -100px;
	}

	#gotop a img {
		max-width: 150px;
	}

	/* ----- モーダル ----- */
	.featherlight .featherlight-content {
		width: 95vw !important;
		max-width: none !important;
		padding: 20px 15px 0;
	}

	.featherlight iframe {
		min-width: auto !important;
		width: 100% !important;
	}

	div.featherlight-content div.topn * {
		font-size: 13px;
	}

	/* ----- ユーティリティ ----- */
	#sagakko-message {
		max-width: 80%;
	}


	.sp-hide {
		display: block;
		right: -5px !important;
	}

	/* ----- トップページ（index） ----- */
	body[data-page="index"] main#main h3 {
		text-align: center;
		border-bottom: none;
		color: #9b947b;
	}

	body[data-page="index"] main#main p {
		text-align: center;
	}

	/* ----- ニュース ----- */
	ul.news-list li {
		flex-direction: column;
		gap: 0.3em;
	}


	#contact p img {
		max-width: 200px;
	}

	/* ----- 支援プログラムページ ----- */
	section.program-detail {
		padding-bottom: 1em;
		background-image: none !important;
	}


	.program-image {
		display: block;
		text-align: center;
		margin: 1.5em auto 0;
	}

	.program-image img {
		max-width: 210px;
	}

	/* ----- ご利用案内ページ（guide） ----- */
	ul.page-nav {
		gap: 0.5em 0.8em;
		padding: 1em;
	}

	ul.page-nav li a {
		padding: 0.5em 0.8em;
	}

	ol.flow-list {
		padding: 1em 1.5em 0.5em;
		max-width: 100%;
	}

	#main table {
		max-width: 100%;
	}

	#main table td {
		padding: 6px 8px;
	}

	#main table td:first-child {
		width: 45%;
	}

}

/* =======================================================================
   1.5. ナビラベル切り替え（670px以下）
   ======================================================================= */

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

	br.nosp {
		display: none;
	}


	/* ナビラベルをSP用に切り替え */
	.nav-pc {
		display: none;
	}

	.nav-sp {
		display: inline;
	}

}

/* =======================================================================
   2. スマートフォン（600px以下）
   ======================================================================= */

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

	body {
		transform-origin: top left;
		width: 100%;
		min-width: 480px;
	}

	header {
		height: inherit;
	}

	#top-logo {
		display: none;
	}

	#top-logo-sp {
		display: block;
		width: 60%;
		margin: auto;
	}

	#top-title-logo {
		display: none;
	}

	#top-title-logo-sp {
		display: block;
		margin-bottom: 15px;
	}

	div#toiawase img {
		width: 150px;
	}

	.sp-hide {
		display: none;
	}

	/* ----- フォント調整 ----- */
	table th,
	table td {
		font-size: 13px;
	}


	/* ----- 情報リスト ----- */
	dl.info-list dt,
	dl.info-list dd {
		display: block;
		width: 100%;
	}

	dl.info-list dt {
		margin-top: 0.8em;
	}

	dl.info-list dt:first-child {
		margin-top: 0;
	}

	dl.info-list dd {
		margin-top: 0.2em;
	}

	dl.info-list dd.note {
		margin-left: 0;
		padding-left: 1em;
	}

	/* ----- テーブル ----- */
	#main table {
		font-size: 13px;
	}

	#main table td {
		padding: 6px 8px;
	}

}

/* =======================================================================
   3. スマートフォン小（480px以下）
   ======================================================================= */

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


	/* ページナビ */
	ul.page-nav {
		gap: 0.4em 0.5em;
		padding: 0.8em;
	}

	ul.page-nav li a {
		padding: 0.4em 0.6em;
	}

	/* フローリスト */
	ol.flow-list {
		padding: 0.8em 1em 0.5em;
	}

	ol.flow-list .flow-title {
		font-size: 14px;
	}

	ol.flow-list .flow-desc {
		font-size: 13px;
	}
	/* ----- スマホ用固定フッター ----- */
	#sp-fixed-footer {
		display: block;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #cdc6b3;
		padding: 12px 20px;
		text-align: center;
		z-index: 9999;
	}

	#sp-fixed-footer a {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		text-decoration: none;
		font-weight: 600;
		font-size: 16px;
	}

	#sp-fixed-footer .phone-icon {
		font-size: 22px;
		margin-right: 8px;
	}

	#sp-fixed-footer .phone-text {
		letter-spacing: 1px;
	}

}