﻿/*******************************************************/
/*                                                     */
/* トップページコンテンツの編集      　                */
/*                                                     */
/*******************************************************/
/********************************/
/*　パソコン画面サイズ          */
/********************************/
/*******************************************************/
/*                                                     */
/* パソコンフォーマット  		               */
/*                                                     */
/*******************************************************/

@media screen and (min-width: 768px)
{ 
	/**** コンテンツの紹介文 ***/
	.contents-inner
	{
		max-width: 1100px;
		margin: 0 auto;
	}
	.main-contents
	{
/*
		margin: 0 auto;
		padding: 0;
		width: 1100px;
*/
		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto 1fr;
	}
/********************************************************/
/*
/* スライド画像の定義
/*
/********************************************************/
	.head-photo-pc
	{
		
	}
	.head-photo-sm
	{
		display: none;
	}
/********************************************************/
/*
/* 紹介文の定義（パソコン版）
/*
/********************************************************/	
	.main-contents1
	{
		grid-column: 1;
		grid-row: 1;
		margin: 0 auto; 
		padding: 40px 40px 0;
		max-width: 1100px;
/*
		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/


		background: linear-gradient(to bottom,#eef6ff 0%,#ffffff 80%);
		border-radius: 14px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.06);


		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents1-1-pc
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents-1-1-sm h2
	{
		display: none;
	}
	.main-contents-1-1-sm
	{
		display: none;
	}
	.main-contents1-1-pc h2
	{
		font-size: 24px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 24px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
	.main-contents1-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		display: grid;
		grid-template-columns: 55% 45%;
		grid-template-rows:auto 1fr;
		gap 20px;
	}
	.main-contents1-2-1
	{
		grid-column: 1;
		grid-row: 1;
		paddding-left: 15px;
		font-size: 18px;
		text-align: left;
		justify-content: space-between;
		align-items: flex-start; /* ←本文1行目と揃える */
		line-height: 2em;
		color: #124b73;
	}
	.main-contents1-2-2
	{
		grid-column: 2;
		grid-row: 1;
		padding-top: 30px;
		text-align: right;
	}
	.main-contents1-2-2 img
	{
		width: 400px;
		text-align: center;
		border-radius: 10px;
		border-bottom: solid 2px #0d52b1;
	}
/********************************************************/
/*
/* お知らせと営業日カレンダーの定義（パソコン版
/*
/********************************************************/	
	.main-contents2
	{
		grid-column: 1;
		grid-row: 2;
		margin: 0 auto; 
		padding: 40px 40px 20px;
		width: 1100px;

		max-width: 1100px;
/*		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/


		background: #f8f9fb;
		border-radius: 14px;
		box-shadow: 0 8px 22px rgba(0,0,0,0.08);
		border: 1px solid #e1e6ee;


		text-align: center;
		display: grid;
		grid-template-columns: 1fr 350px;
		grid-template-rows: auto 1fr;
		gap: 10px;
	}
/*******INFORMATIONの設定********/
	.main-contents2-1
	{
		grid-column: 1;
		grid-row: 1;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents2-1-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents2-1-1 h2
	{
		font-size: 24px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 24px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
	.main-contents2-1-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.08);
		border-bottom: solid 2px #0d52b1;
	}
		.news-list
		 {
		 	list-style: none;
		 	padding: 0;
		 	margin: 0;
		}
		.news-list li
		{
			display: flex;
			gap: 20px;
			padding: 14px 0;
		   	border-bottom: 1px solid #e5e5e5;
			align-items: top;
			text-align: left;
		}

		.news-list li:last-child
		{
			border-bottom: none;
		}



		.news-list
		{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.news-list time
		{
			font-size: 14px;
			color: #666;
			min-width: 90px;
			padding-left: 20px;
		}

		/* 本文 */
		.news-list p
		{
			margin: 0;
			font-size: 16px;
			color: #222;
		}
/*******カレンダーレイアウトの設定********/
	.main-contents2-2
	{
		grid-column: 2;
		grid-row: 1;
		text-align: right;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents2-2-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents2-2-1 h2
	{
		font-size: 24px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 24px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
	.main-contents2-2-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
	}

		.cal-detail
		{
			background: #fff;
			padding: 50px;
			border-radius: 10px;
			margin: 0;
			border-bottom: solid 2px #0d52b1;
		}
		.cal-header
		{
		 	display: flex;
			justify-content: center;
			align-items: center;
			gap: 20px;
			margin-bottom: 10px;
		}

		table
		{
			width:100%;
			border-collapse:collapse;

			background:#fff !important; 

		}

		th,td
		{
	/*	    border:1px solid #aaa;*/
			padding:1px;
			text-align:center;
			cursor:pointer;
			background:#fff; 
			color:#444;
			font-weight:bold;
		}
		th:nth-child(1)
		{
			color:#f40;
			font-weight:bold;
		}

		th:nth-child(7)
		{
			color:blue;
			font-weight:bold;
		}
		/* 色指定 */
		.sun { color:#f40; }
		.sat { color:blue; }
		.holiday { color:#f40; }

		#calTitle
		{
			color: #234766;
			font-weight: bold;
		}
		#prevMonth,
		#nextMonth
		{
			background:#1d5fd1; /*青系*/
			color:#ffe94d;      /*黄色系*/
			border:none;
			padding:6px 12px;
			cursor:pointer;
			border-radius:4px;
			font-weight:bold;
		}
		.note p
		{	
			text-aligin: right;
			color: #f40;
			font-weight: bold;
		}
/********************************************************/
/*
/* 営業品目の定義
/*
/********************************************************/	
	.main-contents3
	{
		grid-column: 1;
		grid-row: 3;
		margin: 0 auto; 
		padding: 40px 40px;
		max-width: 1100px;
/*
		width: 1100px;
		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/



		background: repeating-linear-gradient(135deg,#f6f7f9,#f6f7f9 12px,#eef1f5 12px,#eef1f5 24px);
		border-radius: 14px;
		box-shadow: 0 10px 26px rgba(0,0,0,0.1);



		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents3-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents3-1 h2
	{
		font-size: 24px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 24px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
/*******営業品目の設定********/
	.main-contents3-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}


		.gallery-grid
		{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px;
		}
		/* 各アイテム */
		.gallery-item
		{
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			cursor: pointer;
			transition: transform .35s ease, box-shadow .3s ease;
		}

		/* タイトル */
		.work-title
		{
			font-size: 1rem;
			font-weight: bold;
			margin-bottom: 8px;
			color: #234766; /* 落ち着いたブルー */
			letter-spacing: 1px;
		}
		.gallery-item
		{
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			cursor: pointer;
			transition: transform .35s ease, box-shadow .3s ease;
		}
		.gallery-item :hover
		{
			color: #7193a1;
/*
			border-bottom: solid 3px #0d52b1;
			transform: translateY(-6px);
*/
			box-shadow: 0 12px 24px rgba(0,0,0,0.18);
		}
		.gallery-item img
		{
			width: 100%;
			height: 200px;
			object-fit: cover;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		}

	.photo
	{
		padding-top: 5px;
		width:250px;
		height:150px;
	}
}
/********************************/
/*　スマホ画面サイズ            */
/********************************/

/*******************************************************/
/*                                                     */
/* スマフォ・タブレットフォーマット	               */
/*                                                     */
/*******************************************************/

@media screen and (max-width: 768px)
{ 
	/**** コンテンツの紹介文 ***/
	.contents-inner
	{
		max-width: 100%;
		margin: 0 auto;
	}
	.main-contents
	{
/*
		margin: 0 auto;
		padding: 0;
		width: 1100px;
*/
		max-width: 100%;
		margin: 0 auto;
		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto 1fr;
	}

/********************************************************/
/*
/* 紹介文の定義（スマホ版）
/*
/********************************************************/	
	.main-contents1
	{
		grid-column: 1;
		grid-row: 1;
		margin: 0 auto; 
/*
		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/
		background: linear-gradient(to bottom,#eef6ff 0%,#ffffff 80%);
		border-radius: 14px;
		box-shadow: 0 6px 18px rgba(0,0,0,0.06);

		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents1-1-pc
	{
		display: none;
	}
	.main-contents1-1-pc h2
	{
		display: none;
	}
	.main-contents1-1-sm
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
		padding: 10px 60px 10px;
	}
	.main-contents1-1-sm h2
	{
		font-size: 18px;
		font-weight: bold;
		display: inline-block;
		margin-bottom: 5px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
		width: 100%;
		height: auto;
		text-align: center;
	}
	.main-contents1-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		padding: 5px 20px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows:　auto auto 1fr;
	}
	.main-contents1-2-1
	{
		grid-column: 1;
		grid-row: 1;
		paddding-left: 5px;
		font-size: 14px;
		text-align: left;
		justify-content: space-between;
		align-items: flex-start; /* ←本文1行目と揃える */
		line-height: 1.9;
		color: #234766;
	}
	.main-contents1-2-2
	{
		grid-column: 1;
		grid-row: 2;
		padding-top: 5px;
		text-align: center;
	}
	.main-contents1-2-2 img
	{
		width: 80%;
		height: auto;
		text-align: center;
		border-radius: 5px;
		border-bottom: solid 2px #0d52b1;
	}
/********************************************************/
/*
/* お知らせと営業日カレンダーの定義（スマホ版）
/*
/********************************************************/	
	.main-contents2
	{
		grid-column: 1;
		grid-row: 2;
		margin: 0 auto; 
		padding: 10px;
/*
		width: 1100px;
		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/


		background: #f8f9fb;
		border-radius: 14px;
		box-shadow: 0 8px 22px rgba(0,0,0,0.08);
		border: 1px solid #e1e6ee;


		width: 100%;
		height: auto;
		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
		gap: 40px;
	}

/*******INFORMATIONの設定********/
	.main-contents2-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
		padding: 10px 20px;
		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents2-1-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents2-1-1 h2
	{
		font-size: 18px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 20px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
	.main-contents2-1-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.08);
		border-bottom: solid 2px #0d52b1;
		margin: 0 20px;
	}
		.news-list
		 {
		 	list-style: none;
		 	padding: 0;
		 	margin: 0;
		}
		.news-list li
		{
			display: flex;
			gap: 10px;
			padding: 14px 10px;
		   	border-bottom: 1px solid #e5e5e5;
			align-items: top;
			text-align: left;
		}

		.news-list li:last-child
		{
			border-bottom: none;
		}



		.news-list
		{
			list-style: none;
			padding: 0;
			margin: 0;
		}
		.news-list time
		{
			font-size: 12px;
			color: #666;
			min-width: 90px;
			padding-left: 20px;
		}

		/* 本文 */
		.news-list p
		{
			margin: 0;
			font-size: 14px;
			color: #222;
		}
/*******カレンダーレイアウトの設定********/
	.main-contents2-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		padding: 10px;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents2-2-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents2-2-1 h2
	{
		font-size: 18px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		margin-bottom: 20px;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
	.main-contents2-2-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		min-width: 0;
		text-align: center;
		padding: 10px 40px;
	}

		.cal-detail
		{
			background: #fff;
			padding: 10px;
			border-radius: 10px;
			margin: 0;
			border-bottom: solid 2px #0d52b1;
		}
		.cal-header
		{
		 	display: flex;
			justify-content: center;
			align-items: center;
			gap: 15px;
			margin-bottom: 10px;
		}

		table
		{
			width:100%;
			border-collapse:collapse;
			table-layout: fixed;
			background:#fff !important; 

		}

		th,td
		{
	/*	    border:1px solid #aaa;*/
			padding: 1px 0;
 			text-align:center;
			cursor:pointer;
			background:#fff; 
			color:#444;
			font-weight:bold;
			font-size: 14px;
		}
		th:nth-child(1)
		{
			color:#f40;
			font-weight:bold;
		}

		th:nth-child(7)
		{
			color:blue;
			font-weight:bold;
		}
		/* 色指定 */
		.sun { color:#f40; }
		.sat { color:blue; }
		.holiday { color:#f40; }

		#calTitle
		{
			color: #234766;
			font-weight: bold;
		}
		#prevMonth,
		#nextMonth
		{
			background:#1d5fd1; /*青系*/
			color:#ffe94d;      /*黄色系*/
			border:none;
			padding:6px 12px;
			cursor:pointer;
			border-radius:4px;
			font-weight:bold;
		}
		.note p
		{	
			text-aligin: right;
			color: #f40;
			font-weight: bold;
			font-size: 14px;
		}
/********************************************************/
/*
/* 営業品目の定義（スマホ版）
/*
/********************************************************/	
	.main-contents3
	{
		grid-column: 1;
		grid-row: 3;
		margin: 0 auto; 
		padding: 10px;
/*
		width: 1100px;
		background: linear-gradient(to bottom,#b7ddff  0%,#d4ecff 50%,#ffffff 100%);
		border-radius: 12px;
		box-shadow: 0 8px 24px rgba(0,0,0,0.08);
*/



		background: repeating-linear-gradient(135deg,#f6f7f9,#f6f7f9 12px,#eef1f5 12px,#eef1f5 24px);
		border-radius: 14px;
		box-shadow: 0 10px 26px rgba(0,0,0,0.1);



		text-align: center;
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto 1fr;
	}
	.main-contents3-1
	{
		grid-column: 1;
		grid-row: 1;
		text-align: center;
	}
	.main-contents3-1 h2
	{
		font-size: 18px;
		font-weight: bold;
		white-space: nowrap;
		display: inline-block;
		color: #124b73;
		border-bottom: solid 3px #0d52b1;
	}
/*******営業品目の設定********/
	.main-contents3-2
	{
		grid-column: 1;
		grid-row: 2;
		text-align: center;
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		gap: 10px;
		padding: 20px 40px;
	}


		.gallery-grid
		{
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 10px;
		}
		/* 各アイテム */
		.gallery-item
		{
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			cursor: pointer;
			transition: transform .35s ease, box-shadow .3s ease;

		}

		/* タイトル */
		.work-title
		{
			font-size: 1rem;
			font-weight: bold;
			margin-bottom: 8px;
			color: #234766; /* 落ち着いたブルー */
			letter-spacing: 1px;
			font-size: 14px;
		}
		.gallery-item
		{
			position: relative;
			border-radius: 12px;
			overflow: hidden;
			cursor: pointer;
			transition: transform .35s ease, box-shadow .3s ease;
		}
		.gallery-item :hover
		{
			color: #7193a1;
/*
			border-bottom: solid 3px #0d52b1;
			transform: translateY(-6px);
*/
			box-shadow: 0 12px 24px rgba(0,0,0,0.18);
		}
		.gallery-item img
		{
			width: auto;
			height: 200px;
			object-fit: cover;
			border-radius: 8px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		}

	.photo
	{
		padding-top: 5px;
		width:100%;
		height:auto;
	}
}
