@charset "utf-8";
/*社標説明　経営理念
---------------------------------------------------------------------------*/
.rinen-container{
	border: 1px solid #ccc;				    /*境界線*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);  /*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
padding: 0;
}

/*新旧２つの社標の上にある説明文の高さを揃えます。*/
/*少し大きめの高さの要素内に説明文を格納することで、行数が変わっても下にある社標の上下がズレない。*/
/*ただし、文章を長くし過ぎた場合は調整が必要*/
.old-new{
	display: inline-block;
	height: 130px;		/*調整が必要*/
	/*border: dashed red;*/
}

/*list3ボックス。col1とcol2　を囲むボックス*/
.list3 {
	display: flex;				/*flexボックス（横並び）を使う指定*/
	padding: 25x 2px;			/*上下、左右へのボックス内の余白*/
}

/*経営の基本理念の左側（画像ががる方）*/
.list3 .col1 {
	flex: 2;	/*２:３の２の方*/
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}

/*経営の基本理念の右側（文字がある方）*/
.list3 .col2 {
	flex: 3;	/*２:３の３の方*/
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}	

.list3 .col2 .inner {
	width: auto;
	margin: 15px 15px 25px 15px;
	padding: 0 2px;
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
	/*background-color: #eee;  /*←レイアウトの確認時に使う*/
}

/*常に創意工夫をして・・・*/
.list3 .col2 p {
	font-family: 'Yuji Syuku', serif;
	width: 70%;
	margin-top: 20px;
	margin-left: 50px;
	/*border: 1px solid #666;　/*←レイアウトの確認時に使う*/
}

.list3 .col1 figure {
	margin-top: 0;
	width: 70%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 15%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 5%;	/*画像の右側に空けるスペース*/
}

.rinen-container h3 {
	margin: 0;				/*.rinen-containerにh3の上辺を付ける*/
	margin-bottom: 10px;	/*下には少し余白を作る*/
}

.list3 .large {
	font-size: 1.3em;
	line-height: 1.5em;
}

/*グリッドレイアウト　2023/3/21追記：暖簾、看板、ラベル、算盤などに見る丸忠マークなどのページに採用）
---------------------------------------------------------------------------*/
.grid-container {
	display: grid;								/*グリッドレイアウトを採用*/
	/*flex-wrap: wrap;							/*折り返す*/
	grid-template-columns: repeat(3, 1fr);		/*３列*/
	grid-template-rows: repeat(2, 1fr);		/*最大３行*/
	/*justify-items: center;					/*中央寄せ*/
	/*align-self: start;*/
	column-gap: 10px;							/*列間*/
	row-gap: 20px;								/*行間*/
	margin-bottom: 10px;						/*コンテナの下に余白*/
	/*padding: 8px;				 				/*内側の余白*/
	/*border: 2px solid #ccc;				    /*境界線*/
	/*box-shadow: 2px 2px 5px rgba(0,0,0,0.1);  /*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

.grid-item {
	display: block;				 /*子要素を縦並び*/
	padding: 5px;				 /*内側の余白*/
	border: 2px solid #ccc;	/*境界線*/
	box-shadow: 2px 2px 5px rgba(0,0,0,0.1);/*ボックスの影。右へ、下へ、ぼかし幅の順。0,0,0は黒の事で0.1は色が10%出た状態。*/
}

.grid-item .row1{
	text-align: center;		/*画像はインライン要素なのでこれで中央寄せ*/
}

.grid-item img {
	width: 90%;
}

.grid-item dl {
	margin-top: 30px;	/*定義リストの上に余白*/
}
.grid-item dt {
	font-weight: bold;	/*タイトルを太字に*/
}

.grid-item dd {
	line-height: 1.5em;	/*文字の行間*/
	font-size: 0.8em;	/*説明文の文字サイズ*/
}

.list3 figure a {
	display: block;
	transition-duration: 1.2s;
}

.list3 figure a:hover {   
	transform: scale(1.03);
}

.grid-container .grid-item .row1 {
	transition-duration: 0.6s;
	transform: scale(1.00);
}

.grid-container .grid-item .row1:hover {   
	transform: scale(1.03);
}


/*---------------------------------------------------------------------------
ここから下は画面幅376px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:376px) {

/*list3ボックス。col1とcol2　を囲むボックス*/
.list3 {
	display: block;			/*flexボックス（横並び）からblock（縦並び）に変更*/
	padding: 25x 0;			/*上下、左右へのボックス内の余白*/
}
	
.list3 .col1 figure{
	margin: 0 auto;			/*中央寄せにする*/
	width: 70%;				/*画像の幅*/
	margin-bottom: 20px;	/*画像の上の余白*/
}
	
.list3 .col2 p{
	font-size: 1em;		/*常に創意工夫をして*/
	margin-left: 25%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
	/*text-align: center;	/*常に創意工夫をして・・・なるべく中央寄せにする*/
}
	
.grid-container {
	grid-template-columns: repeat(2, 1fr);		/*３列*/
	grid-template-rows: repeat(3, 1fr);		/*最大３行*/
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
	
}


/*---------------------------------------------------------------------------
ここから下は画面幅415px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (max-width:415px) {

/*list3ボックス。col1とcol2　を囲むボックス*/
.list3 {
	display: block;			/*flexボックス（横並び）からblock（縦並び）に変更*/
	padding: 25x 0;			/*上下、左右へのボックス内の余白*/
}

.list3 .col1 figure{
	margin: 0 auto;			/*中央寄せにする*/
	width: 70%;				/*画像の幅*/
	margin-bottom: 20px;	/*画像の上の余白*/
}

.list3 .col2 p{
	font-size: 1.27em;		/*常に創意工夫をして*/
	margin-left: 23%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
	/*text-align: center;	/*常に創意工夫をして・・・なるべく中央寄せにする*/
}


.grid-container {
	grid-template-columns: repeat(2, 1fr);		/*３列*/
	grid-template-rows: repeat(3, 1fr);		/*最大３行*/
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
	
}


/*---------------------------------------------------------------------------
ここから下は画面幅415px以上650px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:415px) and (max-width:650px){
	
/*list3ボックス。col1とcol2　を囲むボックス*/
.list3 {
	display: block;			/*flexボックス（横並び）からblock（縦並び）に変更*/
	padding: 25x 0;			/*上下、左右へのボックス内の余白*/
}
		
.list3 .col1 figure{
	margin: 0 auto;			/*中央寄せにする*/
	width: 70%;				/*画像の幅*/
	margin-bottom: 20px;	/*画像の上の余白*/
}
		
.list3 .col2 p{
	font-size: 1.5em;		/*常に創意工夫をして*/
	margin-left: 24%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
	/*text-align: center;	/*常に創意工夫をして・・・なるべく中央寄せにする*/
}	

.grid-container {
	grid-template-columns: repeat(2, 1fr);		/*３列*/
	grid-template-rows: repeat(3, 1fr);		/*最大３行*/
}


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
		
}


	
/*---------------------------------------------------------------------------
ここから下は画面幅650px以上1000px以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:650px) and (max-width:1000px){

.grid-container{
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));	/*auto-fitにより幅の狭いブラウザで折り返す*/
	grid-template-rows: repeat(3, 1fr);	
	column-gap: 10px;								/*列間*/
	row-gap: 10px;									/*行間*/
}	

.list3 .col1 figure {
	margin-top: 0;
	width: 90%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 8%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 5%;	/*画像の右側に空けるスペース*/
}

.list3 .col2 p{
	font-size: 1.5em;		/*常に創意工夫をして*/
	margin-top: 0;			/*上の間隔*/
	margin-left: 24%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
	/*text-align: center;	/*常に創意工夫をして・・・なるべく中央寄せにする*/
}	


/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
		
}
	


/*---------------------------------------------------------------------------
ここから下は画面幅1000px以上1100以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1000px) and (max-width:1350px){

.list3 .col1 figure {
	margin-top: 0;
	width: 94%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 3%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 8%;	/*画像の右側に空けるスペース*/
}

.list3 .col2 p {
	font-size: 1.6em;		/*常に創意工夫をして＝PCなどでは大きく表示*/
	/*line-height: 2em;		/*行間*/
	margin-left: 22%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
}

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
		
}

/*---------------------------------------------------------------------------
ここから下は画面幅1100px以上1350以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1100px) and (max-width:1350px){

.list3 .col1 figure {
	margin-top: 0;
	width: 94%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 2%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 0%;	/*画像の右側に空けるスペース*/
}

.list3 .col2 p {
	font-size: 1.7em;		/*常に創意工夫をして＝PCなどでは大きく表示*/
	margin-left: 18%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
}

/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
		
}
	
/*---------------------------------------------------------------------------
ここから下は画面幅1350px以上1500以下の追加指定
---------------------------------------------------------------------------*/
@media screen and (min-width:1350px) and (max-width:1500px){

.list3 .col1 figure {
	margin-top: 0;
	width: 98%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 3%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 8%;	/*画像の右側に空けるスペース*/
}
	
.list3 .col2 .inner {
	width: auto;
	margin: 0px 15px 25px 50px;
}

.list3 .col2 p {
	font-size: 2.2em;	/*常に創意工夫をして*/
	margin-left: 18%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
}
	
/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
				
}
	
/*---------------------------------------------------------------------------
ここから下は画面幅1500px以上
---------------------------------------------------------------------------*/
@media screen and (min-width:1500px) {

.list3 .col1 figure {
	margin-top: 0;
	width: 98%;			/*画像の幅*/
	margin-top: 0;		/*画像の上の余白*/
	margin-left: 3%;	/*画像の左側に空けるスペース(少し中央寄りに)*/
	margin-right: 8%;	/*画像の右側に空けるスペース*/
}
	
.list3 .col2 .inner {
	width: auto;
	margin: 0px 15px 25px 95px;
}

.list3 .col2 p {
	font-size: 2.5em;	/*常に創意工夫をして*/
	margin-left: 15%;		/*常に創意工夫をして・・・なるべく中央寄せにする*/
}
	
	
/*　※注意！　下の閉じカッコ　}　はこのブロックに必要なので、削除しないで下さい。　*/
				
}