@charset "UTF-8" ;

body
{
	margin: 0 ;		/* スペース */
	padding: 0 ;		/* 余白 */
	font-family: メイリオ,"ヒラギノ角ゴ Pro W3",Osaka,Arial,Verdana,"ＭＳ Ｐゴシック",sans-serif;
	font-size: 18px ;	/* 文字サイズ */
	line-height: 1.7 ;	/* 行の高さ */
}

.red {
	color:red;
}

H1 { 
font-family: 
　"メイリオ", 
　"Meiryo", 
　"ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
　"ＭＳ Ｐゴシック", 
　"MS P Gothic", 
　Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 140%;
}

h2 {
  padding: .5em .75em;
  background-color: #DB394C;
  border-radius: 6px;
  color: #FFFFFF;
font-family: 
　"メイリオ", 
　"Meiryo", 
　"ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
　"ＭＳ Ｐゴシック", 
　"MS P Gothic", 
　Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 110%;
}


h3 {
  padding: .2em .75em;
  background-color: #FD5200;
  border-radius: 6px;
  color: #FFFFFF;
font-family: 
　"メイリオ", 
　"Meiryo", 
　"ヒラギノ角ゴ ProN W3",
  "Hiragino Kaku Gothic ProN",
　"ＭＳ Ｐゴシック", 
　"MS P Gothic", 
　Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 100%;
}


@media screen and (min-width:480px) { 

.guide {
width:65%;
    overflow: hidden;
	margin: 0px auto -5px;
}
.thum {
    float: left;
    margin-right: 10px;
}
.thum_summary {
    overflow: hidden;
text-align:left;
}
}


.square_btn {
    display: inline-block;
    padding: 0.1em 1em;
    text-decoration: none;
    font-size: 90% ;
    color: #67c5ff;
    border: solid 2px #67c5ff;
    border-radius: 3px;
    transition: .4s;
}

.square_btn:hover {
    background: #67c5ff;
    color: white;
}

p.prof {
font-size: 90% ;
}

#page{
    margin-top:10px;
    text-align:center;
}

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
}

ul.pagination li a:hover:not(.active) {background-color: #ddd;}


a.bl:link,a.bl:visited,a.bl:active{color: #000000;
  text-decoration: none;
}

a.w:link,a.w:visited,a.w:active{color: #FFFFFF;
  text-decoration: none;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ボディ */
	body
	{
		font-size: 16px ;	/* 文字サイズ */
		line-height: 1.6 ;	/* 行の高さ */
	}

H1 {

		font-size: 110% ;	/* 文字サイズ */
		text-align: left ;	/* 文字サイズ */

}
H2 {

		font-size: 120% ;	/* 文字サイズ */
		color:#ffffff;

}

.thum_summary {
width:60%;
text-align:left;
}

}

/* ヘッダー */
.header
{
	border-bottom: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	padding: 1em 0 ;			/* 上下の余白 */
	margin-bottom: 2em ;			/* 他のブロックとのスペース */
	background: #FFFFFF ;			/* 背景色(確認用) */
}

/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: 0 ;
	padding: 0 ;
	line-height: 1 ;
}

/* ロゴ画像 */
.logo
{
	width: 1000px ;
	height: auto ;
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo
	{
		width: 350px ;
	}
}

/* フッター */
.footer
{
	border-top: 3px solid #888 ;		/* 枠線 */
	text-align: center ;			/* テキスト、画像の真ん中寄せ */
	margin-top: 2em ;			/* 他のブロックとのスペース */
	padding: 1em 0 ;			/* 上下の余白 */
	background: #DB394C ;
	color:#ffffff;
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.wrapper
{
	width: 1000px ;
	margin: 0 auto ;		/* 左右に[auto]を指定することで、真ん中に寄る */
	padding: 0 ;			/* 上下左右の余白を0にしておく */
}

/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	.wrapper
	{
		margin-top:-30px;
		width: auto ;
		padding: 0 10px ;
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	width: 618px ;
	padding: 20px ;					/* 上下左右に20pxの余白 */
	border: 1px solid rgba(0,0,0,.1) ;		/* 枠線 */
}

.side
{
	width: 320px ;
}

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

	.side
	{
		width: auto ;
	}
}

/* 全体(デスクトップPCとスマホ)に適用するCSS */
.main
{
	float: left ;		/* 左に寄せる */
}

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

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

.wrapper
{
	overflow: hidden ;
}