@charset "UTF-8";

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

/*================================================
 *  webフォント
 ================================================*/

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+1p:wght@400;500&family=M+PLUS+Rounded+1c:wght@300;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&family=M+PLUS+1p&family=M+PLUS+Rounded+1c:wght@300;500&display=swap');



/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


/*================================================
 *  基本設定
 ================================================*/

	body {
		font-family: "M+PLUS+Rounded+1c","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
		color: black;
		display: flex;
		flex-flow: column;
		min-height: 100vh;
		width: 100%;
		/*margin: 0px;
		padding: 0px;*/
	}

	#header {
		position:fixed;
        z-index: 200000;
	}


/*================================================
 *  文字・フォント設定
 ================================================*/

	/*
		body {
			font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
		}*/

	/* リンク色 ページ全体 */
		a {
			color:#4A24FF;
		}
		a:hover {
			color:#4A24FF;
		}


	/* 文字設定 ページ全体 */

		p {
			margin:0 0 3em 0;
		}


		h1 {
			font-size : 28px;
			line-height : 1.3333;  
			margin: 0 auto;
			margin-bottom: 0px;
			color: #4CABB1;
			text-align: center;
			/* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
		}

		h2 {
			font-size : 28px;
			line-height : 1.3333;  
			margin: 0 auto;
			margin-bottom: 0px;
			color:#FF6600;
			text-align: center;
			/* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
		}
		h3 {
			font-size : 28px;
			line-height : 1.3333;  
			margin: 0 auto;
			margin-bottom: 0px;
			color:#22B373;
			text-align: center;
			/* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
		}
		h4 {
			font-size : 28px;
			line-height : 1.4;
			margin-bottom : 24px;
			/* 要素の高さ：24px（要素を配置するときの高さの基準） */
		}
		h5 {
			font-size: 14px;
			line-height: 0.7;
			font-weight: 50;
			margin-top: 5px;
			margin-bottom : 24px;
		}

		h6 {
			font-size: 13px;
			line-height: 1.5;
			margin-bottom: -3px;
		}
		h7 {
			font-size: 11px;
			line-height: 0.5;
		}
		h8 {
			font-size : 25px;
			line-height : 1.4;
		}

		h9 {
			font-size : 28px;
			line-height : 1.2;
			}
		h10 {
			font-size : 32px;
			line-height : 1.4;
			/* 要素の高さ：24px（要素を配置するときの高さの基準） */
		}


		/*-- 文字周りの白い光彩 --*/
		.kousai {
			font-size : 28px;
			line-height : 1.3333;  
			margin: 0 auto;
			margin-bottom: 0px;
			color: #4CABB1;
			text-align: center;
			/* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
			text-shadow: 
			0px 0px 2px #fff ,
			0px 0px 3px #fff ,
			0px 0px 5px #fff;
		}
        .kousai2 {
			font-size : 28px;
			line-height : 1.3333;  
			margin: 0 auto;
			margin-bottom: 0px;
			color: #FFFFFF;
			text-align: center;
			/* 要素の高さ：48px（要素を配置するときの高さの基準の2倍） */
			text-shadow: 
			0px 0px 5px #fff ,
			0px 0px 6px #fff ,
			0px 0px 7px #fff;
		}

		.section-title {
			text-align: center;
			margin-top: 50px;
			margin-bottom: 40px;
		}
		.title-back {
			width: 250px;
			margin: 0 auto;
			margin-left: 20px;
			z-index: -40000;
		}
		.title-font {
			z-index: 0;
			margin-top: -60px;
			opacity: 1;
		}


/*================================================
 *  社名ロゴ部分
 ================================================*/

	.header-logo-tabletA {
		width: 100%;
		margin: 0 0;
		padding-top: 20px;
		padding-right: 10px;
		background-color: #0065A2;
	}
	.header-logo-pc {
		width: 100%;
		margin: 0 0;
		padding-top: 10px;
		background-color: #0065A2;
	}

/*================================================
 *  追従メニュー用
 ================================================*/

	.site-header{
		display: flex;
		padding: 0px;
		position: absolute;
		justify-content: space-between;
		width: 100%;
		z-index: 100000;
	}

	.site-header.fixed{
		position: fixed;
		top: 0;
	}

	.headB li {
		min-width: 150px;
		text-align: center;
	}


/*================================================
 *  ページトップへの戻るボタン
 ================================================*/
	.totop {
		position:fixed;
		bottom:20px;
		right:15px;
		margin-bottom: 0px;
		z-index: 99999999;
	}
	.totop a {
		text-decoration:none;
	}
	.totop img {
		width: 130px;
		filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.5));
		z-index: 99999999;
	}
	.totop img:hover {
	}


/*================================================
 *  お問い合わせボタン　設定
 ================================================*/

/*.section07 {
	text-align: center;
}*/
	.contact {
		display: flex;
		flex-direction: row; 	/* 右方向に横並び */
		justify-content: center;
		margin-top: 30px;
		margin-bottom: 50px;
		max-width: 1000px;
		text-align: center;
	}

	.contact-tel img{
		width: 400px;
		margin-top: 5px;
		margin-right: 20px;
	}

	.contact-web img{
		width: 400px;
		margin-top: 5px;
	}


/*********** 波背景設定　[パソコン] ******************************************/

		.wave-block {
			/*position: relative;*/
			display: grid;
			height: 200px;
			width:100vw;
			margin:0 calc(50% - 50vw);
		}

		.mask-image {
			--height: 40px;
			mask-image:
				url("../images/top/wave3.svg"),
				linear-gradient(to bottom, transparent 0%, transparent var(--height), #000 var(--height), #000 100%);
			mask-size: 240px;
			margin-top: calc(-1 * var(--height));
            margin-bottom: 0px;
		}





/********* レスポンシブ設定 ヘッダー・フッター　***************************************************************************/
/********* スマートフォンA 最大600px、タブレットA 601px-849px、パソコン 850px- 								  **************/
/********************************************************************************************************************/


/*========================================================================================================
 *  パソコンメニュー用　画面幅850px以上
 ========================================================================================================*/

				@media screen and (min-width: 850px) {
					
					
						body {
							font-size: 17px;
							line-height: 1.5;
							width: 100%;
						}
					
						

					/************** 非表示設定 社名ロゴ　[パソコン 850px-] ********************************/
						.header-logo-tabletA {
							display: none;	
						}
						.header-logo-pc {
							display: block;	
						}

					/*********** 非表示設定 メニューバー　[パソコン 850px--]***************************************************/	
						.menu-box-pc{
							display: block;
						}
						.menu-box-tabletA{
							display: none;
						}
						.menu-box-tabletB{
							display: none;
						}
						.menu-box-phone {
							display: none;
						}


					/*********** メニューバー設定　[パソコン 850px-] ***************************************************/
					
						/* 社名ロゴ　左右振り分け */
					
							.header-logo {
									max-width: 1000px;
									margin: 0 auto;
									margin-top: 12px;
									padding-bottom: 10px;
									padding-left: 15px;
									padding-right: 15px;
							}
					
							.top-flex {
								display: flex;
								justify-content:space-between;
								max-width: 1000px;
								margin: 0 auto;
							}
					
					
							/* topA 社名ロゴ 振り分け左側*/
								.topA {
									white-space: nowrap;
									margin-top: -5px;
								}
								.sunpri-logo {
									width: 100px;
									margin-left: 10px;
									margin-top: 10px;
								}
								.logo-font {
									width: 180px;
									margin-left: 10px;
									margin-top: 10px;
									padding-bottom: 6px;
								}
					
							/* topB 電話・営業時間  振り分け右側*/
								.topB {
									display: flex;
									flex-direction: row;
									padding-left: 10px;
									margin-top: 3px;
									margin-bottom: -5px;
								}
								.phone-block {
									line-height: 15px;
									margin-top: -5px;
									margin-bottom: 10px;
									color: white;
								}
								.phone-logo {
									width: 27px;
									position: relative;
									margin-bottom: -3px;
								}
					
								span.phone-font {
									font-size: 30px;
									position: relative;
									text-align: bottom;
									margin-left: 8px;
									line-height: 1.1;
									padding-bottom: 59px;
								}

								span.top-time {
									font-size: 10px;
								}
					
							/* 問い合わせボタン */
								.contact-button {
									display: block;
									margin-top: -5px;
								}



					/************** メニュー部分設定　[パソコン850px-] ********************************/

						.site-header {
							background-color: rgba(200,220,255,0.80);
							width: 100%;
							margin-top: 0px;
						}

						.menu-box_pc .inner {
							display: flex;
							align-items: center;
							justify-content: space-between;
							justify-content:space-around;
							max-width: 1200px;
							text-align: left;
							vertical-align: middle;
							margin:0 auto;
						}
						.inner {
							height: 32px;
							margin: 0 auto;
						}

						.headB {
							padding-right: 10px;
						}

						.headB ul{
							display: flex;
							margin: 0;
							padding: 0;
							list-style: none;
							justify-content: center;
						}
						.headB a {
							display: block;
							padding-top: 5px;
							padding-right: 15px;
							padding-left: 15px;
							padding-bottom: 5px;
							font-size:15px;
							text-decoration: none;
							letter-spacing: 0.08em;
							list-style: none;
							justify-content: center;
							color: black;
						}
						.headB a:hover {
							background-color: #0065A2; /* 追従メニュー選択時の色 */
							color: white;
						}

						/* 仕切り線 */
						.headB li+ li {
						  border-left: 1px solid #4C7EB1;
						}
					
					

				/*********** フッター　[パソコン 850px-]***********************************************************/

					/* フッター 3列並び順　パソコン用 */
					
						.footer {
							/*position: relative;*/
							background-color: #4C7EB1;
							background-position: center;
							height: auto;
						}
					
						.wave img {
							width:100%;
						}

						.footer-background2 {
							background-color: #4C7EB1;
							z-index: 50;
						}
						.footer-box {
							max-width:800px;
							margin: 0 auto;
							margin-top: 80px;
						}
						.footer-flex{
							display: flex;
							flex-direction: row; /* 右方向に横並び */
							align-items: flex-start; /* 上揃え */
							flex-wrap:nowrap;
							text-align: left;
							margin-top: -8px;
						}

						.footer-flex .box1 {
							align-items: flex-start;
							margin-right: 30px;
							max-width: 250px;
						}
						.footer-flex .box1 img {
							width: 150px;
						}

						.footer-flex .box-wrap {
							display: flex;
							flex-direction: row;
						}

						.footer-flex .box2 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							width: 340px;
						}
						.footer-flex .box3 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							margin-left: 30px;
							width: 300px;
						}
					
					.copyright {
						text-align: center;
						color: white;
						font-size: 8pt;
						padding-bottom: 20px;
						padding-top: 20px;
					}

		}



/*========================================================================================================
 *  タブレット向けデザインB  画面幅600px以上849以下
 ========================================================================================================*/

				@media screen and (min-width: 600px) and (max-width:849px) {	
					
						body {
								font-size: 17px;
								line-height: 1.5;
								width: 100%;
							}

					/*********** 非表示設定　メニューバー　[タブレット 600-849] ***************************************************/
						.menu-box-pc{
							display: none;
						}
						.menu-box-tabletA{
							display: block;
						}
						.menu-box-tabletB{
							display: none;
						}
						.menu-box-phone {
							display: none;
						}
					
					/************** メニュー部分設定　[タブレット 600-849] ********************************/

						.site-header {
							width: 100%;
						}

						.tablet-flex-A {
							display: flex;
							flex-wrap: wrap;
							justify-content: space-between;
							max-width: 834px;
						}
						.tablet-flex-A li {
							background-color: rgba(200,220,255,0.80);
							width: 33%;
							height: 32px;
							margin:0 auto;
							padding-top: 3px;
							padding-bottom: 3px;
							vertical-align: center;
							border-bottom: solid 1px #4C7EB1;
							border-left: solid 1px #4C7EB1;
						}
						.tablet-flex-A li a {
							display: block;
							text-decoration: none;
							align-items: center;
							justify-content: space-between;
							font-size:15px;
							list-style: none;
							text-align: center;
							width:100%;
							height: 100%;
							color:black;
							padding-top: 5px;
						}
						.tablet-flex-A li a:hover {
								background-color: #0065A2; /* 追従メニュー選択時の色 */
								color: white;
						}

					/*********** トップメニュー設定　[タブレット 600-849] ***************************************************/
					
							/* 社名ロゴ左右振り分け */

							.header-logo-tabletA {
								display: block;	
							}
							.header-logo-pc {
								display: none;	
							}

					
							.header-logo {
									max-width: 850px;
									margin: 0 auto;
									margin-top: 12px;
									margin-bottom: 0px;
									padding-left: 10px;
									padding-right: 10px;
							}
					
							.top-flex {
									display: flex;
									justify-content:space-between;
									margin: 0 20;
							}
					

							/* topA 社名ロゴ 振り分け左側*/
								.topA {
									white-space: nowrap;
									margin-top: -13px;
								}
								.sunpri-logo {
									width: 60px;
									margin-left: 10px;
								}
								.logo-font {
									width: 120px;
									margin-top: 0px;
									margin-left: 10px;
									padding-bottom: 3px;
								}
					
							/* topB 電話・営業時間  振り分け右側*/
								.topB {
									display: flex;
									flex-direction: row;
									padding-left: 10px;
									margin-top: -10px;
									margin-bottom: -10px;
								}
								.phone-block {
									line-height: 13px;
									color:white;
									margin-top: 0px;
								}
								.phone-logo {
									width: 25px;
									position: relative;
									margin-bottom: -5px;
								}
					
								span.phone-font {
									font-size: 22px;
									position: relative;
									text-align: bottom;
									margin-left: 8px;
									margin-bottom: 5px;
									line-height: 1.1;
									padding-bottom: 59px;
									margin-top: -10px;
								}

								span.top-time {
									font-size: 9px;
									margin-top: -3px;
								}
					
							/* 問い合わせボタン */
								.contact-button {
									display: block;
									margin-top: -5px;
								}
								.contact-button img {
									width: 200px;
									margin-top: 5px;
								}
				

					
					/*********** フッター　[タブレット 601-849] ***********************************************************/

					/* フッター 3列並び順 */
					
						/*.footer {
							position: relative;
							margin-top: -40px;
						}*/
						.footer {
							position: block;
							margin-top: -30px;
						}
					
						.wave img {
							width:100%;
						}

						.footer-background2 {
							background-color: #4C7EB1;
							z-index: 50;
							padding-top: 120px;
							padding-left: 50px;
							padding-bottom: 20px;
						}
						.footer-box {
							max-width:800px;
							margin: 0 auto;
						}
						/*.footer-flex{
							display: flex;
							flex-direction: column; /* 縦並び *
							align-items: flex-start; /* 上揃え *
							flex-wrap:nowrap;
							text-align: left;
							margin-top: -8px;
							align-items: center;
						}*/
						.footer-flex{
							display: flex;
							flex-direction: row; /* 右方向に横並び */
							align-items: flex-start; /* 上揃え */
							flex-wrap:nowrap;
							text-align: left;
							margin-top: -8px;
						}
					

						.footer-flex .box1 {
							align-items: flex-start;
							margin-right: 30px;
							max-width: 200px;
						}
						.footer-flex .box1 img {
							width: 150px;
						}

						.footer-flex .box-wrap {
							display: flex;
							flex-direction: row;
						}

						.footer-flex .box2 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							width: 340px;
						}
						.footer-flex .box3 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							margin-top: 20px;
							width: 340px;
						}
					
					.copyright {
						text-align: center;
						color: white;
						font-size: 8pt;
						padding-bottom: 20px;
						padding-top: 20px;
					}


		}




/*====================================================================================
 *  画面幅599以下　スマートフォン向けデザイン
  ====================================================================================*/

	/*** メニュー部分はスマートフォン用、内容はunder900、スマートフォン用。共用部分に注意 *********/
				@media screen and (max-width:599px) {


						body {
							font-size: 17px;
							line-height: 1.5;
							width: 100%;
						}

					/************** 非表示設定　社名ロゴ　[スマートフォンB 431-600] ********************************/
						.header-logo-tabletA {
							display: none;	
						}
						.header-logo-pc {
							display: none;	
						}


					/*********** 非表示設定　メニューバー　[スマートフォンB 431-600] ***************************************************/
						.menu-box-pc{
							display: none;
						}
						.menu-box-tabletA{
							display: none;
						}
						.menu-box-tabletB{
							display: none;
						}
						.menu-box-phone {
							display: block;
						}



					/*********** トップメニュー設定　[スマートフォンB 431-600] ***************************************************/

						/*メニューバーの設定は zdo_drawer_menu.cssの中にある*/




					/*********** フッター　[タブレット -600] *****************************/

					/* フッター 3列並び順 */

						.footer {
							/*position: relative;*/
							margin-top: -30px;
							background-color: #4C7EB1;
							padding-bottom: 100px;
							margin-bottom: 0px;
						}

						.wave img {
							width:100%;
						}

						.footer-background2 {
							background-color: #4C7EB1;
							z-index: 50;
							padding-top: 100px;
							padding-left: 20px;
							margin-bottom: 0px;
						}
						.footer-box {
							max-width:85%;
							margin: 0 30;
							background-color: #4C7EB1;
							text-align: center;
						}
						.footer-flex{
							display: flex;
							flex-direction: column; /* 縦並び */
							align-items: flex-start; /* 上揃え */
							flex-wrap:nowrap;
							text-align: left;
							margin-top: -8px;
							align-items: center;
						}

						.footer-flex .box1 {
							align-items: flex-start;
							width: 90%;
						}
						.footer-flex .box1 img {
							width: 150px;
							margin: 0 auto;
							margin-left: 5
						}

						.footer-flex .box-wrap {
							display: flex;
							flex-direction: row;
						}

						.footer-flex .box2 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							width: 90%;
						}
						.footer-flex .box3 {
							color: white;
							line-height: 1.3;
							font-size: 11pt;
							margin-top: 20px;
							width: 90%;
						}

					.copyright {
						text-align: center;
						color: white;
						font-size: 8pt;
						padding-bottom: 20px;
						padding-top: 20px;
						margin-bottom: 0px;
					}


			}