@charset "UTF-8";

/* ==========================================
　	趣味のページ用 CSS
============================================= */
html {
    /* １文字は16pxなので62.5%にすると、1.6remで16px */
	font-size: 62.5%;
}

body{
	width: 1000px;	/* テーブルの幅を指定 */
	margin: 0 auto;	/* auto で画面の両サイドの余白を均等にする */
	padding: 0;
    /* iPhoneで見た時の文字表示のバグを解消する */
	-webkit-text-size-adjust: 100%;
	font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, sans-serif;
    /* １文字を12px、75%ぐらいに落として設定している */
	font-size: 1.2rem;
    /* 下側のメイン画面の文字の大きさの変更は　#main　で行う */
    /* 画面全体を 中央に表示する設定 */
	text-align: center;
    /* 標準文字色を濃いグレー、背景色を白にする */
	color: #000000;	/* #333333; */	
	background-color: #ffffff;
    /* 1行の高さを文字の1.5倍に設定。単位指定が無い時は倍率となる */
	line-height: 1.5;
    /* body以下の全てに影響します */
	word-wrap: break-word;	/* IEやFirefox対応用 折り返して表示 */
	overflow-wrap: break-word;	/* はみ出した文字は折り返して表示 */
}

/* ########################## */
/*           画像の設定     */
/* ########################## */

img{
	border-style: none;
	/* 表示領域やtableの枠を超えて表示されるのを防ぐ */
	/* 画面のレイアウトを変更した時など取り敢えず使える */
	max-width: 100%;
	height: auto;
	margin-right: 4px; /* 画像や文字を並べた時の隙間用 */
}

/* ##################################################
　　　画像に枠線を付ける時
　　　<img src="gazou.jpg" class="wakusen-red">
　　　のように class を追加すれば枠線が描かれる
   ################################################## */
img.wakusen-red {border:3px ridge red;}

img.wakusen-blue {border:3px ridge blue;}

img.wakusen-black {border:3px ridge black;}

/* ##################################################
　　　画像を　左寄せ　右寄せ　にして文字を回り込ませる時
　　　<img src="gazou.jpg" class="hidari-yose">
	左右寄せを終了させる時は　<br style="clear:left;">
   ################################################## */

img.hidari-yose {float: left;}	/* align="left" の代わり */

img.migi-yose {float: right;}	/* align="right" の代わり */

/* ################################################## */
/* アンダーラインに　蛍光ペン風グラデーションを付ける */
/*   使用例　<span class="under-blue">青</span>       */
/* ################################################### */

/* アンダーラインの蛍光ペンの色　水色 */

.under-blue {
	color: #000000;
	text-decoration: none;	/* 下線等の装飾なし */
	/* 蛍光ペンを文字の下半分だけ引く (safari対策の為transparentの代わりに10進数で記入) */
	/* 水色#66ccff=102,204,255　緑#66FFCC=102,255,204　ピンク#E570D0=229,112,208 */
 	background: linear-gradient(rgba(102,204,255,0) 50%, #66ccff 90%);
}

/* アンダーラインの蛍光ペンの色　緑色 */

.under-green {
	color: #000000;
	text-decoration: none;	/* 下線等の装飾なし */
	/* 蛍光ペンを文字の下半分だけ引く (safari対策の為transparentの代わりに10進数で記入) */
	/* 水色#248bf2=36,139,242　緑#66FFCC=102,255,204　ピンク#E570D0=229,112,208 */
 	background: linear-gradient(rgba(102,255,204,0) 50%, #66FFCC 90%);
}

/* アンダーラインの蛍光ペンの色　ピンク */

.under-pink {
	color: #000000;
	text-decoration: none;	/* 下線等の装飾なし */
	/* 蛍光ペンを文字の下半分だけ引く (safari対策の為transparentの代わりに10進数で記入) */
	/* 水色#248bf2=36,139,242　緑#66FFCC=102,255,204　ピンク#E570D0=229,112,208 */
 	background: linear-gradient(rgba(229,112,208,0) 50%, #E570D0 90%);
}

/* ################################# */
/* 　　　全体の　標準リンクの設定 　 */
/* ################################# */

/* リンク設定されたテキストにアンダーバーを付ける */
a:link, a:visited {
  	text-decoration: underline;		/* 文字と同じ色 */
}

/*　リンク設定されたテキストの色 */
a:link {
  	color: red;
}

/* リンク　一度訪問すると文字の色が変わる */
a:visited {
	color: red;
}

/*　カーソルがリンクの上にある時の色 */
a:hover {
  	color: white;			/* 文字の色 */
  	background-color: red;	/* 文字の背景色の色 */
  	display: inline;	  	/* 文字部分の背景色を変える */
  	text-decoration: none;	/* 下線を付けない */
}

/* リンク　クリックされてから離されるまでの状態 */
a:active {
  	color: #000;			/* 文字の色 */
}

/* リンク領域の設定
   （メニューの文字の下に蛍光ペン風グラデーション等に利用）　*/
.link-box a{
    	display: block;		/* リンクの領域を文字を越えて四角い範囲にする */
    	height: 41px;
   	line-height: 41px;	/* 横メニューの高さに合わせる */
}

/* ##################################################
　　★★★★★★　上部全体の設定をする　★★★★★★
   ################################################## */
header {
	width: 100%;
	position: relative;		/* 位置決めは　相対的　にしておくこと */
	margin: 0;
	padding: 0;
	color: white;
	height: 75px;		/* 調整前の値　190px 説明文の為のスペース　*/

    /* 背景の上部にグラデーションの画像
    background-image : url(../image-top/header-menu2.png);
    background-position: top center;
    background-repeat: repeat-x;
     */
}

/* ##################################################
　　トップの「HOME画面」「趣味のページ」「頁のTopへ」の設定
　　　・・・・・画面上部に固定表示する
   ################################################## */

.top-title {
	width: 1000px;	/* 100% にすると実行時幅が広がる */
	margin: 0;
	background-color: #004c98;
	height: 65px;		/* 固定する高さ */
	position: fixed;	/* 固定表示する */
	z-index: 10;		/* 大きいほど表示の上部になる */
	text-align: center;
}

/* 最上段の中央の「趣味のページ」や「ドローン」等の設定 */
.top-logo {
	font-size: 40px;
	font-weight: bold;
}

/* 両側の「総合メニュー」「頁のTopへ」用の設定 */
.top-text {
	font-size: 30px;
}

/* ##################################################
　　リンク設定されたテキストの色
      、一度訪問すると文字の色が変わる
   ################################################## */
.top-logo a:link , .top-logo a:visited {
	color: yellow;	/* 指定しないと文字が黒くなる */
}

.top-text a:link , .top-text a:visited {
	color: white;		/* 指定しないと文字が黒くなる */
}

/* ##################################################
　　トップタイトルの下に「概要」として説明文表示
   ################################################## */
.top-setumei {
	padding: 80px 0 0 0;
	height: 110px;
	font-size: 1.6rem;
	width: 100%;
	color: white;
	font-weight: bold;
}
.top-setumei img {
	padding: 0 50px 0 0;
	height: 110px;
}

/* ############################################################### */
/* 上部タイトルのリンクの文字の下に　蛍光ペン風グラデーションを付ける */
/* ############################################################### */

/* リンクの文字のアンダーラインの蛍光ペンの色　緑色 */

/* 蛍光ペンを文字の下半分だけ引く (safari対策の為transparentの代わりに10進数で記入) */
/* 緑#66FFCC=102,255,204 */
.link-under-green a:link{
	text-decoration: none;	/* 下線等の装飾なし */
 	background: linear-gradient(rgba(102,255,204,0) 50%, #66FFCC 90%);
}

/* リンク　一度訪問すると文字の色が変わるのを防ぐ */
.link-under-green a:visited{
    text-decoration: none;
}

/* リンク　マウスカーソルを乗せた時アンダーラインの色がピンクに変わる */
/* ピンク#E570D0=229,112,208 */
.link-under-green a:hover{
 	background: linear-gradient(rgba(229,112,208,0) 50%, #E570D0 90%);
}

/* リンク　クリックされてから離されるまでの状態 */
.link-under-green a:active{
	color: #E570D0;	/* 文字の色 ピンク */
	text-decoration: none;
	background-color: blue;
}

/* ###################################################### */
/* ★★★★★★★★　Flexbox を使用する　★★★★★★★★ */
/* ###################################################### */

.container {
  	width: 1000px;
	/* position: sticky;　を使用するために必要 */
	display: -ms-flexbox;	/* IE10以下 対応 */
	display: -webkit-box;	/* Safari3.1～6.0 対応 */
  	display: -webkit-flex;	/* Safari6.1 以降 対応 */
  	display: flex;
}

/* =======================================================
　★★★　スマホの時、メインの上にＰＲ表示する為　★★★
========================================================== */
/* 全ページに同期させるため、id属性の#で設定 */
#sumaho-pr {
	width: 700px;
}

/* ===============================================================
　　★★★★★★★★　中央メインの設定をする　★★★★★★★★
================================================================== */

#main {
	width: 685px;
	margin: 0px;
	padding: 0 10px 0 10px;	/* 画面のギリギリ端から隙間をあける */
	letter-spacing: 0.1em;	/* 文字間隔 0.1文字分 */
	font-size: 1.6rem;		/* <p>が無い文字の大きさ */
}

p {
	max-height: 100%;	/* AndroidのChromeで文字が一部拡大される対策 */
    	margin: 1.2rem 0 0 0;		/* 文字の空白 */
    	padding: 0 0 0 0.0rem;
  	text-align: left;
  	background-color: transparent;	  /*　バックカラーは透明　*/
	color : black;
	letter-spacing: 0.1rem;	  	/* 文字間隔 0.1文字分 */
	font-size: 1.6rem;	/* 1.0emで main と同じ文字の大きさ */
}

/* **************************************************
　説明文を見やすくするために
　全体の左側に数文字分空白を入れる -1 -2 は空白数
**************************************************** */
.setumei-2 {
	display: block; 
	margin: 1.6rem;	/* 空白　１＋１文字分 */
	padding: 0.8rem 1.6rem; 	/* 左右の空白　１文字分 */
	border: none;		/* 四角く囲む時は dashed 1px #01bcd8; */
}

/*　枠線を付ける　*/
.setumei-2-waku {
	display: block; 
	margin: 1.6rem;	/* 空白　１＋１文字分 */
	padding: 0.8rem 1.6rem; 	/* 左右の空白　１文字分 */
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;		/* コーナーのＲ */
}

/*　枠線＋背景に色を付ける　*/
.setumei-2-red {
	display: block; 
	margin: 1.6rem;	/* 空白　１＋１文字分 */
	padding: 0.8rem 1.6rem; 	/* 左右の空白　１文字分 */
	background-color: #fff7f8;	/* 背景色 */
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;		/* コーナーのＲ */
}

.setumei-2-blue {
	display: block; 
	margin: 1.6rem;	/* 空白　１＋１文字分 */
	padding: 0.8rem 1.6rem; 	/* 左右の空白　１文字分 */
	background-color: #edfcfe;	/* 背景色 */
	border-style: solid;
	border-width: 1px;
	border-radius: 8px;		/* コーナーのＲ */
}

/*--------------------------------------------------------
  	背景色に色を付けて、ドットで囲む　<div class="back-color">
--------------------------------------------------------*/
.back-color {
	background-color: #edfcfe;	/* 背景色 */
	border-style: dotted;
	border-color: #aac5de;
}

/* --------------------------------------------------
	 全体的な見出しの 標準設定
 --------------------------------------------------　*/

h1 , h2 , h3 {
	color: #ffffff;		/* 文字の色 */
	background-color: blue;	/* 文字の背景色 */
	margin: 10px 0 0 0;		/* 上部にできる隙間 */
	line-height: 2.5;		/* 文字の2倍の高さ */
	font-size: 2.2rem;	/* #main の font-size にここのem をかける */
	padding: 0.36rem 0;	/* line-height = font-size + padding x2 */
	letter-spacing: 0.24rem;	/* 文字間隔　0.3文字分 */
	border-width: medium;
	border-style: none;
	border-color: initial;
	text-align: center;
}

h2 {
	background-color: red;	/* 文字の背景色 */
	line-height: 2.2;		/* 文字の1.7倍の高さ */
}

h3 {
	background-color: green;	/* 文字の背景色 */
	line-height: 1.7;		/* 文字の1.7倍の高さ */
}

h4 , h5 ,h6 {
	margin: 10px 0 0 0;		/* 上部にできる隙間 */
	border-width: 0 0 0.2rem 1.6rem; /* 上、右、下、左 */
	border-style: solid;
	letter-spacing: 0.1em;	/* 文字間隔　0.2文字分 */
	text-align: left;
	line-height: 1.7;		/* 文字の1.7倍の高さ */
	padding: 0.36rem 1.2rem 0.24rem 1.2rem;
	font-size: 1.8rem;
}

h4 {
	background-color: #d5fdca;
	border-color: #004040;
	margin-left: 7px;		/* 左側にできる隙間 */}

h5 {
	line-height: 2.5;		/* 文字の2.5倍の高さ */
	background-color: #fec9d1;
	border-color: red;
}

h6 {
	background-color: white;
	border-color: orange;
	border-width: 0.2rem 0.2rem 0.2rem 1.6rem;
	margin-left: 15px;		/* 左側にできる隙間 */
}

/* --------------------------------------------------
	標準の table の設定
 -------------------------------------------------- */

table {
	width: 100%;
	margin-top: 1rem;
	margin-right: auto;
	margin-bottom: 1rem;
	margin-left: auto;
	border-width: 3px;		/* tableの外枠の線の太さを指定 */
	border-style: solid;		/* tableの外枠の線　実践 */
	border-collapse: collapse;	/* 枠の境界線を重ねる */
	empty-cells: show;		/* 空白セルにもボーダーを表示 */
  	table-layout: fixed;		/* 行の幅を固定する。必要な時は行ごとに指定 */
}

table th, td {
	border-width: 1px;		/* tableの内枠の線の太さを指定 */
	border-style: solid;		/* tableの内枠の線　実践 */
	empty-cells: show;		/* 空白セルにもボーダーを表示 */
	padding: 0.5rem 0.5rem 0.5rem 1.0rem;
  	text-align: center;
}

/* -------------------------------------------------- */
/* 	メインメニュー用の table設定　 */
/* -------------------------------------------------- */

.main-menu table {
	width: 690px;
	margin: 0;
	border-style: none;		/* tableの外枠は表示しない */
	border-collapse: separate;	/* 枠の境界線を離す */
}

.main-menu table td {
	width: 230px;
	padding-top: 1rem;
	border-width: 0px;		/* 枠の線の幅 */
	border-style: solid;
	background-color: #c6e4ff;	/* 背景色 */
	vertical-align: super;	/* セル内の位置を　上にする */
	border-radius: 20px;		/* コーナーのＲ */
}
.main-menu img {
	border-radius: 15px;		/* 画像のコーナーにRを付ける */
}

/* -------------------------------------------------- */
/* 	番号付き、番号無しリストの設定　 */
/* -------------------------------------------------- */
#main ul,ol {
    	margin: 0;		/* 表示領域外側の余白 */
	padding: 0 0 0 3.6rem;	/* 表示領域内側の　右の余白 */
}

#main ul li {
	padding: 1.2rem 0 0 0;	/* 文の　右端の余白 */
	text-align: left;
	color: black;
	letter-spacing: 0.1rem;	/* 文字間隔 0.1文字分 */
	list-style-type: disc;	/* 先頭に●を付ける */
	font-size: 1.6rem;	/* 1.0emで main と同じ文字の大きさ */
	line-height: 2;	/* 行間 */
}

#main ol li {
	padding: 1.2rem 0 0 0;	/* 文の　右端の余白 */
	text-align: left;
	color: black;
	letter-spacing: 0.1rem;	/* 文字間隔 0.1文字分 */
	font-size: 1.6rem;	/* 1.0emで main と同じ文字の大きさ */
	line-height: 2;	/* 行間 */
}

dl {
	margin-left: 0.8rem;
	background-color: #edfcfe;
	font-size: 1.6rem;
}

dt {
	float: left;		/* 日付の右側に文章が来る */
	padding: 1.0rem 0 0 0.8rem;
	text-align: left;
}

dd {
	margin-left: 13rem;	/* 更新の文章の左端の位置 */
	letter-spacing: 0.1rem;	/* 文字間隔　0.1文字分 */
	padding-top: 1.0rem;
	text-align: left;
}

/* ===============================================================
　　★★★★★　中央メニュー画面の設定をする　★★★★★
================================================================== */

/*--------------------------------------------------------
  更新履歴にスクロールバーを付ける<div class="kousin-side">
--------------------------------------------------------*/
.kousin-side {
	height: 200px;		/* 全体の高さを設定 */
	overflow: auto;	/* 上の高さを超えるとスクロールバーが付く */
	text-align: left;
}

/* ----------------------------------------------------------
   ★★★★★★　魚別の釣期と料理用の設定 ★★★★★★
------------------------------------------------------------- */
#turijiki p {
	font-size: 1.4rem;
	line-height: 2;	/* 文字の2倍の高さ */
	border-collapse: collapse;
	position: relative;
	text-align: center;
	margin: 0;
}

#turijiki table {
	position: relative;		/* 位置決めは　相対的　にしておくこと */
	margin: 1.2rem auto;
	width: 98%;			/* テーブルの幅を指定 */
	border-collapse: collapse;
}

#turijiki table td {
	text-align: center;
	line-height: 2;	/* 文字の2倍の高さ */
	border: 1px dotted;
	border-collapse: collapse;
	border-spacing: 0px 0px;
	table-layout: fixed;
	empty-cells: show;		/* 空白セルにもボーダーを表示 */
	padding: 0;
	height: 70px;
}

/* 釣り時期の個別の魚のタイトルや画像を中央配置にした */
.turijiki_sub p {
	text-align: center;
}

/* =============================================== */
/* ★★★★★★　右側サイドメニューの設定　★★★★★★ */
/* =============================================== */

#side-menu-douki {
	/* 注意　margin-top を入れるとスマホ縦の時領域がおかしくなる */
	margin: 0;
    	padding: 5px 5px 0 0;	/* 画面のギリギリ端から隙間をあける */
	width: 300px;
}

.side-pr {
	font-size: 1.8rem;
    	margin: 1rem;
    	padding-top: 1rem;
	border-style: solid;		/*　枠線を付ける　*/
	border-width: 1px;
	border-radius: 8px;		/* コーナーのＲ */
}

/* -----　シンプルな縦並びタイトル一覧表　-------- */

.side-menu {
	font-size: 1.8rem;
	color: black;
	padding: 0 1rem 0 2rem;	/* 両サイドに余白を付ける */
	/* 上下スクロールで、上端・下端で固定される */
	position: -webkit-sticky;	/* Safari対応 */
	position: sticky;
	margin-bottom: 0;
	top: 10px;
	z-index: 1;
}

.side-menu p {
	/* 一覧リストの文字設定 */
	text-align: center;
	font-size: 2rem;
	line-height: 1.7;	/* 行の高さを文字の1.7倍にする */
	letter-spacing: 0.3rem;	/* 文字間隔　0.3文字分 */
	margin: 3px;			/* 行間の隙間 */
	border-width: 2px;
	border-style: solid;
	border-color: #0d73d9;
	border-radius: 18px;		/* コーナーのＲ */
}

.side-menu a {
	text-decoration: none;
	color: blue;		/* リンクされた文字の色 */
    display: block;	/* リンクの領域を文字を越えて四角い範囲にする */
}

/* カーソルを乗せた時、蛍光ペン風グランデーション、緑の下線 */
.side-menu a:hover {
 	background: linear-gradient(rgba(102,255,204,0) 50%, #66FFCC 90%);
	border-radius: 15px;		/* リンク時の下線にもコーナーのＲ */
}

/* リンク　クリックされてから離されるまでの状態 */
.side-menu a:active{
 	background: linear-gradient(rgba(229,112,208,0) 50%, #E570D0 90%);
}

/* =============================================== */
/* ★★　画面下にアフィリエイト　リスト一覧表示　★★ */
/* =============================================== */
.tuhan-kensaku-list {
    	clear: both;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 1rem;
	letter-spacing: 0.1em;	/* 文字間隔 0.1文字分 */
	font-size: 2.0rem;		/* <p>が無い文字の大きさ */
	background-color: #fff7f8;/* 色々追加してテスト */
	position: relative;		/* 位置決めは　相対的　にしておくこと */
	padding: 5px 0 0 0;
	color: blue;
	overflow: hidden;	/* 上部のメインメニューが下に折り返される */
	/* 領域の外側に枠線を引く */
	border-width: 1px;
	border-style: solid;
	border-color: blue;
}

.tuhan-kensaku-list p {
	font-size: 2.0rem;
	color: blue;
}

.tuhan-kensaku-list a {
    display: block;		/* リンクの領域を文字を越えて四角い範囲にする */
    height: 41px;
   	line-height: 41px;		/* 横メニューの高さに合わせる */
	text-decoration: none;
	color: black;
}

/* カーソルを乗せた時、蛍光ペン風グランデーション、緑の下線 */
.tuhan-kensaku-list a:hover {
 	background: linear-gradient(rgba(102,255,204,0) 50%, #66FFCC 90%);
}

/* リンク　クリックされてから離されるまでの状態 */
.tuhan-kensaku-list a:active{
 	background: linear-gradient(rgba(229,112,208,0) 50%, #E570D0 90%);
}

.tuhan-kensaku-list:after {		/* 処理が終わった後の処理　擬似要素 */
    content: ".";
    clear: both;
    height: 0px;
    display: block;
    visibility: hidden;	/* 領域は残すが、非表示にします */
}

.tuhan-kensaku-list ul{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    list-style-type: none;
}

.tuhan-kensaku-list ul:after{		/* ul の処理が終わった後の処理　擬似要素 */
    content: ".";
    clear: both;
    height: 0;
    display: block;
    visibility: hidden;	/* 領域は残すが、非表示にします */
}

.tuhan-kensaku-list li{
	display: inline;	/* リストを横並びで表示する */
	height: 41px;		/* 横メニューの高さを固定する41px */
	width: 230px;
	font-size: 24px;	/* 文字の大きさが変化しないようにpx指定 */
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 4px;	/* ボックス間の隙間 */
	overflow: hidden;	/* 範囲を越えた時は折り返す */
	float: left;
	border-width: 3px;
	border-style: solid;
	border-color: #aaaaaa;
	border-radius: 20px;		/* コーナーのＲ */
}

/* =============================================== */
/* ★★★★★　footer フッターの設定　★★★★★ */
/* =============================================== */

/* footer の位置決めは　相対的　にしないこと */
/* position: relative;を使うと main の下部でリンクが使えなくなる */
footer {
    	clear: both;
	width: 98%;
	margin-top: 5px;
	margin-bottom: 1rem;
    padding-left: 0.5em;		/* 画面のギリギリ端から隙間をあける */
    padding-right: 0.3em;	/* 画面のギリギリ端から隙間をあける */
	letter-spacing: 0.1em;	/* 文字間隔 0.1文字分 */
	font-size: 2.0rem;		/* <p>が無い文字の大きさ */
	background-color: #fff7f8;	/* 色々追加してテスト */
}

/* =============================================== */
/* ★★★★★　スマホの場合は設定を変更　★★★★★ */
/* ★★★★★　画面幅が 700px より狭い時　★★★★★ */
/* =============================================== */

/* 画面幅が 700px より狭い時(スマホの時) */
@media screen and (max-width:700px) {
    html {
	font-size: 90%;
	}
    body , .top-title {
	width: 700px;
	}
    .top-logo {
	font-size: 33px;
	}
    header {
	height: 65px;
    background: none;
    }
    .top-text {
	font-size: 27px;
	}
    .top-setumei {
	display: none;
	}
  /* 中央部分 */
    .container {
	width: 700px;
	flex-wrap: wrap;	/* 画面が狭くなったら折返し */
	}
    #main {
	padding: 0 0 0 1.5rem;
	}
  /* 左側部分　side-menu-douki部分 の設定 */
  /* スマホの場合は main の下に表示される */
    #side-menu-douki {
	width: 100%;
	margin-left: 0px;
	}
    .side-menu {		/* 一覧リストの文字設定 */
	font-size: 2.5rem;
	}
    .side-menu p {		/* 一覧リストの文字設定 */
	font-size: 2.8rem;
	line-height: 2.0;	/* 行の高さを文字の2倍にする */
	}
  /* フッター部分の設定 */
    footer {
	width: 100%;
	margin-bottom: 1rem;
	}
    .tuhan-kensaku-list , .tuhan-kensaku-list p {
	font-size: 2.5rem;
	}
    .tuhan-kensaku-list li{
	width: 330px;		/* リストを横に2個にする */
	height: 50px;		/* リストの高さを固定する */
	font-size: 2.6rem;
	margin: 0 5px 5px 5px;
	padding: 1.5rem 0 0 0;
	}
  /* 右下のトップへ戻る矢印の寸法と位置変更 */
    .pagetop {
    bottom: 120px;
	}
    .pagetop img {
	width: 120px;
	height: auto;	
	}
}

/* =============================================== */
/* ★★★　スマホの画面が横向きの時、★★★ */
/* ★★★　　文字が大きくなりすぎる　★★★ */
/* ============ (縦向き portrait) (横向き landscape)  */

@media (orientation: landscape) and (max-width:700px) {
  /* 「上に戻る」ボタンの寸法と位置変更 */
    .pagetop {
    bottom: 60px;
	}
    .pagetop img {
	width: 60px;
	height: auto;	
	}
  /* 全体のfontsizeを小さくし見やすくする */
    html {
	font-size: 70%;	/* スマホ用設定 90%; パソコン用設定 62.5%;*/
    }
    .top-logo {
	font-size: 25px;
	}
    .top-text {
	font-size: 20px;
	}
    .top-title {
	height: 40px;		/* 固定する高さ */
	}
}

/* ============================================= */
/* ★★★　タブレットやパソコンの画面が　★★★ */
/* ★★★　　　　　縦向きの時　　　　　　★★★ */
/* ========== (縦向き portrait) (横向き landscape)  */

/* PCの横向きと同じ表示になるのでmain画面上部のＰＲを表示しない */
@media (orientation: portrait) and (min-width:701px) {
    #sumaho-pr {
	display: none;
	}
}

/* =============================================== */
/* ★★★★★　画面が横向きの時　★★★★★ */
/* ★★★（スマホも狭いので表示しない）★★★ */
/* ============ (縦向き portrait) (横向き landscape)  */

@media screen and (orientation: landscape) {
  /* 画面が横向きの時は、main上部のＰＲを表示しない */
  /* HPB で編集中は表示、プレビューでは消える  */
    #sumaho-pr {
	display: none;
	}
}