@charset "UTF-8" ;/*文字のコード指定*/


/*============================================
ヘッダーのスタイル
============================================*/
/* ヘッター部の設定 */
.header
{
	border-bottom: none ;	/* 枠線 */
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	padding:  0 ;	/* 上下の余白 */
	margin-bottom: 0;	/* 他のブロックとのスペース */
	background: #f0f8ff ;	/* 背景色(確認用) */
}

/* .logo1=ロゴ画像。 */
.logo1 {
width:930px;
max-width: 100%;
height: auto;
}
/*.logo1=スマホだけに適用するCSSレシポンシブ対応。 */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo1
	{
		width: 350px ;
	}
}
/* .logo1=スマホだけに適用するCSSレシポンシブ対応。終わり。*/



/* 以前1枚もの。.logo1=top-phot1.jpg画像。レシポンシブ対応。*/ 
.logo2 {
width:930px;
max-width: 100%;
height: auto;
}
/* logo2=TOPの写真=TOP画像スマホだけに適用するCSS。レシポンシブ対応。 */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo2
	{
		width: 350px ;
	}
}
/* logo2=TOPの写真=TOP画像スマホだけに適用するCSSレシポンシブ対応。終わり。*/



  .logo3
{
	margin: 0 ;
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	padding: 10px ; /* 上下の余白 */
	color:  #80989b ;/* 文字色 */
	font-size:15px;  /* 文字サイズ */
	font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
}
/*  .logo3=キャッチコピー。スマホだけに適用するCSSレシポンシブ対応。 */
@media screen and (max-width:479px)
{
	/* .logo3=キャッチコピー */
	.logo3
	{
      font-size:10px;  /* 文字サイズ */
	}
}
/*  .logo3=キャッチコピー。スマホだけに適用するCSSレシポンシブ対応。終わり。 */



/*  2021-1-19 swiperのスライダー追加。*/ 	 
.swiper-container {
  max-width: 930px;
  margin: 30px 0;
}






/*============================================
上部グローバルメニュー覧 スタイル
============================================*/

.globalNav {	
	width: 960px ;
	margin: 0 auto 50px ;	/* 左右に[auto]を指定することで、真ん中に寄る。下を50pxの空きにした。*/
	padding: 0 0 0 0 ;	/* 4つ設定の場合(1つめの数値が上になり、次に右、下、左と時計回りの順番で適用されます。) */
    font-size:17.7px;  /* 文字サイズ */
}
/*　2025-09-01 タブレットサイズも追加。　*/
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。*/
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
	.globalNav
	{
		width: 100% ;
		float: center;
        list-style: none;   /* 黒丸を取る。 */
		padding: 0 10px ;
		font-size:15px;  /* 文字サイズ */
	}		
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.globalNav
	{
		width: 100% ;
		float: center;
        list-style: none;   /* 黒丸を取る。 */
		padding: 0 10px ;
		font-size:13px;  /* 文字サイズ */
	}	
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/
/*　2025-09-01 タブレットサイズも追加。　終わり。*/



.globalNav li {
    float: left;
    list-style: none;   /* 黒丸を取る。 */
}
 
.globalNav li a {
    display: block;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    /* 文字#87ceebから#000000(黒)にした。 */
    color: #000000;
    font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
}
/* スマホだけに適用するCSS */
@media screen and (min-width:360px) and (max-width:479px)
{
	.globalNav
	{
		width: 100% ;
		float: center;
        list-style: none;   /* 黒丸を取る。 */
		padding: 0 10px ;
		font-size:13px;  /* 文字サイズ */
	}	
}

.globalNav li a:hover {
    background: #CECEF6;
}
/*　グローバルメニュー覧 スタイル終わり　*/




/*============================================
全体のボディの文字設定
============================================*/

/* 全体のボディ。リードコピー及びサイドタイトルの設定 */
body
{
    margin:0px0px 0px 0px;  /* 外側。上、右、下、左。 */
	padding: 0px 0px 0px 0px;		/* 内側。上、右、下、左。 */
	font-size: 15px ;	/* 文字サイズ */
	line-height:1.4 ;	/* 行の高さ */
	color: #222222 ;
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /*明朝体フォントの種類*/
}
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。*/
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
	.globalNav
	{
		width: 100% ;
		padding: 0 10px ;
		font-size:10px;  /* 文字サイズ10*/
	}		
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.globalNav
	{
		width: 100% ;
		padding: 0 10px ;
		font-size:10px;  /* 文字サイズ10*/
	}		
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/

.p-box {
 padding : 20px ; 
 }

/* 全体のボディの設定終わり */



/*========================================================
本文全体の位置レイアウト　wrapper　（中央全体　width:960px）
=========================================================*/
/* 本文全体wrapper(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 960px ;
	margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;	/* 上下左右の余白を0にしておく */
}
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（768px以下のときタブレットやスマホの場合）のデバイス用のCSS記述。*/
@media screen and (max-width: 768px) {
	/* 768px以下に適用されるCSS（タブレット用） */
	.wrapper
	{
		width:100%; /* 幅を全幅にする */ 
        height:auto;
		padding: 0px ;
	}
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.wrapper
	{
		width:100%;  
        height:auto;
		padding: 0px ;
	}	
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/


/*=========================================================
TOP画面の本文右面width: 630px設定　（中央全体　width:630px）　(共通)　
==========================================================*/
/* 本文左面width: 630px全体main(デスクトップPCとスマホ)に適用するCSS */
/* margin：要素の外側の余白。margin（上）（右）（下）（左）。padding：要素の内側の余白。*/

.main
{
	width: 630px ;
	background: #f0f8ff ;	/* 背景色(薄いブルーグレー色) */
    padding: 0 ;	/* 上下左右に0の余白 */
	border: none ;	/* 枠線無し */
	h1:#164a84;
}


.main2
{
	width: 630px ;
	background: white ;	/* 背景色(白色) */
    padding: 0 ;	/* 上下左右に0の余白 */
	border: none ;	/* 枠線無し */
}


h2 {
  font-size:h2;/*文字の大きさはh2*/
  color: #000000;/*文字色(黒色)*/
  text-align: center ;	/* テキスト、真ん中寄せ */
  border: none 0px #b0c4de;/*線色を消した*/
  padding:  0.2em;/*文字周りの余白*/
  border-radius: 0.3em;/*角丸*/
}
.newlist
	/* h4 */
h4 {
  font-size:h4;/*文字の大きさはh4*/
  color: #008080;/*文字色*/
  text-align: center ;	/* テキスト、真ん中寄せ */
  border: solid 3px #008080;/*線色*/
  padding: 0.2em;/*文字周りの余白*/
  border-radius: 0.3em;/*角丸*/
}


/* 本文写真 */
.img-a
 {
    text-align:center; /*iimgを囲っているdivタグをセンターに指定する。*/
    padding: 0 ;	/* 上下左右に0の余白 */
    margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
    }
    
    
/* 本文説明文。 */
.setumei
{
    margin:0px0px 0px 0px;  /* 外側。上、右、下、左。 */
	padding: 0px 30px 0px 30px;		/* 内側。上、右、下、左。 */
	font-size: 17px ;	/* 文字サイズ */
	line-height:1.4 ;	/* 行の高さ */
	color: #000000 ;  /* 文字色#6495edを#000000(黒) にさせられた*/
	font-family:"MSゴシック",  "メイリオ", "游ゴシック", "ヒラギノ角ゴシック", "Osaka"; /*ゴシックフォントの種類*/
}
/*　2025-09-01 タブレットサイズも追加。　*/
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。*/
@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
	.setumei
	{
		width: 100% ;
		float: center;
        list-style: none;   /* 黒丸を取る。 */
		padding: 0 10px ;
		font-size:15px;  /* 文字サイズ */
	}		
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.setumei
	{
		width: 100% ;
		float: center;
        list-style: none;   /* 黒丸を取る。 */
		padding: 0 10px ;
		font-size:13px;  /* 文字サイズ */
	}	
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/
/*　2025-09-01 タブレットサイズも追加。　終わり。*/



.newlist
{
   margin:0px20px 0px 20px;  /*  外側。上、右、下、左。 */
	padding:0px 10px 0px 10px ;		/* 内側。上、右、下、左。 */
	font-size: 15px ;	/* 文字サイズ */
	line-height:1.4 ;	/* 行の高さ */
	color: #222222 ;
	font-family:"游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; /*明朝体フォントの種類*/
}



/*===================================================================
✳︎✳︎✳︎✳︎✳︎✳︎second-screen本文width: 630px設定　（中央全体　width:630px）　(共通)　
====================================================================*/
 /*レシポンシブーテーブル追加。★★★★★★★★★★★★★★★★★★。*/
  .responsive-table {
    width: 100%; /* テーブルの幅を親要素に合わせる */
    border-collapse: collapse; /* セルの境界線を結合 */
  }

  .responsive-table td {
    padding: 10px;
    border: 0px 
      }

  .responsive-table img {
    display: block; /* 画像をブロック要素にする */
    max-width: 100%; /* 親要素の幅に収まるように縮小 */
    height: auto;    /* 縦横比を保つ */
  }
</style>
<table class="responsive-table">
/*レシポンシブーテーブル追加。★★★★★★★★★★★★★★★★★★。終わり。*/






/*以前からある設定　★★★★★★★★★★★★★★★★★★★★★★★★★★★★★*/

.second-wrapper
{
	width: 630px ;
	margin: 0 auto ;	/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;	/* 上下左右の余白を0にしておく */
}
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（768px以下のときタブレットやスマホの場合）のデバイス用のCSS記述。*/
@media screen and (max-width: 768px) {
	/* 768px以下に適用されるCSS（タブレット用） */
	.wrapper
	{
		width:100%; /* 幅を全幅にする */ 
        height:auto;
		padding: 0px ;
	}
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.wrapper
	{
		width:100%;  
        height:auto;
		padding: 0px ;
	}	
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/

.second-main    
{
	width: 630px ;
	background: #f0f8ff ;	/* 背景色(薄いブルーグレー色) */
    padding: 0 ;	/* 上下左右に0の余白 */
	border: none ;	/* 枠線無し */
	h1:#164a84;
}
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（768px以下のときタブレットやスマホの場合）のデバイス用のCSS記述。*/
@media screen and (max-width: 768px) {
	/* 768px以下に適用されるCSS（タブレット用） */
	.wrapper
	{
		width:100%; /* 幅を全幅にする */ 
        height:auto;
		padding: 0px ;
	}
}		
@media screen and (max-width: 479px) {
	/* 480px以下に適用されるCSS（スマホ用） */
	.wrapper
	{
		width:100%;  
        height:auto;
		padding: 0px ;
	}	
}		
/*メディアクエリの書き方=PCファースト方式=最初にPC用のCSSを記述。その後メディアクエリで表示領域が960px未満（959px以下）のデバイス用のCSS、480px以下のデバイス用のCSSの順に記述。終わり。*/

/*以前からある設定　★★★★★★★★★★★★★★★★★★★★★★★★★★★★★* おわり。/



/* ======================================================================================
本文右width: 300pxサイド………………………………………………………………………………………左(300px)
======================================================================================= */
/* 本文右width: 300pxサイドバック(デスクトップPCとスマホ)に適用するCSS */
.side
{
	border-top: none ;	/* 枠線 */
	text-align: center ;	/* テキスト、画像の真ん中寄せ */
	width: 300px ;
	margin-top: 0 ; /* 他のブロックとのスペース */
	padding: 0 ; /* 上下の余白 */
	background: #ebefef ;　/* 薄いグレー*/
}

/* 本文左面と右面スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main
	{
		width: auto ;
		padding: 0 ;		/* 余白 */
		border: none ;		/* 枠線 */
	}


	.side
	{
		width: auto ;
	}
}
/* 本文左面と右面スマホだけに適用するCSS 終わり*/


/* 本文全体(デスクトップPCとスマホ)に位置を設定するCSS */
.main
{
	float: left ;		/* 左に寄せる */
}

.side
{
	float: right ;	/* 右に寄せる */
}

/* 本文右と左サイドスマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.main , .side
	{
		float: none ;
	}
}

.wrapper
{
	overflow: hidden ;
}
/* 本文全体(デスクトップPCとスマホ)に位置を設定するCSS終わり */




/*　本文左 7個のアイコンスタート　*/
/* 本文左全体width: 630pxの上の4つのリンク用アイコン・段落・水平線のスタイル指定 */
ul.foo {
list-style-type: none;
  width: 630px; 
  margin:10px 0px 10px 0px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
  text-align:center; 
  border:0px solid black;  /* ボックスに線追加 */
  padding:0;
  font-size:0px;
}

/* 本文左の下の3つのアイコンを横に並べる設定 */
ul.foo li {		
list-style-type: none;
  width:150px;
  border: none solid black;  /* ボックスに線追加 */
  display: inline-block; /* リストを横に並べる設定 */
  padding-left: 0;
  margin: 3px ;	/* 左右に[auto]を指定することで、真ん中に寄る */
}

 /* カーソルを重ねると半透明になる*/
ul.foo li a:hover img  {   /* リンク画像にカーソルを重ねると半透明になる*/
 opacity: 0.5;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
ul.foo  {	
    float:none;
    width:100%;  
    height:auto;
}
}
/* 本文左のリンク用7個のアイコン・段落・水平線のスタイル指定終わり*/




/* .mainと.sideに適用するタイトルCSS。メインの見出し部分。 */	
h2 {
  font-size:h2;/*文字の大きさはh2*/
  color: #4682b4;/*文字色(ブルーグレイ)*/
  text-align: center ;	/* テキスト、真ん中寄せ */
  border: solid 3px #b0c4de;/*線色(薄いブルーグレイ)*/
  margin:0px 20px 0px 20px; /*外側周りの余白。上、右、下、左。*/
  padding: 0.2em;/*文字周りの余白*/
  border-radius: 0.3em;/*角丸*/
}
h3{
  font-size:h3;/*文字の大きさはh3*/
  color: #4169e1;/*文字色*/
  text-align: left ;	/* テキスト、左寄せ */
  border: solid 0 ;/*無色*/
  margin:0px 0px 0px 10px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
  padding:0px;/*文字周りの余白無し*/
 }
/* .sideボディの本文文章設定 */
.side
p{
	text-align: left ;	/* テキスト、左寄せ */
    margin:0px0px 0px 5px;  /* 左右のサイズ、幅を指定 天地にマージンを指定 */
	padding: 0 ;		/* 余白 */
	font-size: 13px ;	/* 文字サイズ */
	line-height:1.7 ;	/* 行の高さ */
	color: #222222 ;
	font-family: 'メイリオ', 'Meiryo','YuGothic','Yu Gothic','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ＭＳ ゴシック',sans-serif; /*フォントの種類*/
	}
.author
p{
	 text-align:center; /*写真(author)とフォントを中央に*/
	 }

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
.side {	
    float:none;
    width:100%;  
    height:auto;
    }
}
/* .side本文右に適用するCSS 終わり*/	



/*============================================
フッタ
============================================*/
.footer
{
	border-top: none ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 2em 0 ;			/* 上下の余白 */
	background: #ebefef ;
	font-size: 12px ;	/* 文字サイズ */
	line-height: 5px
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* フッター */
	.footer
	{
		font-size: 8px ;	/* 文字サイズ */
	}
}