/* CSS Document */

/*基本指定*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 0 none;
    font-size: 100%;
	font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Meiryo, "メイリオ", Osaka, "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
    box-sizing: border-box;
}
	
/*画像指定*/
img{ border: none; max-width: 100%; height: auto; }
a img { border: none; }

/* リンク色（ページ全体） */
a { color: #0056b3; text-decoration: underline; }
a:hover { color: #ff4500; text-decoration: none; }

hr{	border-top: 1px solid #CCCCCC; margin: 20px 0; }

/*文字装飾*/
.red { color: #ff0000; }
.b { font-weight: bold; }
.yline { background: linear-gradient(transparent 60%, #ffff66 60%); }

/*コンテンツ指定*/
body {
	text-align: center;
	font-size:16px;
	color: #333;
	background-color: #f0f4f8;
	margin: 0;
}

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

.img_r{
	float:right;
	margin: 0 0 15px 20px;
}

#wrapper{
	width:820px;
	background-color: #ffffff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
	margin: 20px auto;
	padding: 0;
}

/**▼ヘッダー*****/
#header{
	width:100%;
}

#head_img{
	height: 277px;
	background: url(https://images.unsplash.com/photo-1581093450021-4a7360e9a1c8?q=80&w=1740&auto=format&fit=crop) no-repeat center center;
    background-size: cover;
	margin-bottom:30px;
	border-bottom:5px solid #5a9bbf;
}

h1{
	font-size:12px;
	font-weight:normal;
	padding: 5px 15px;
	width: 100%;
	background-color: #336699;
	color: #FFFFFF;
	text-align: right;
}

h1 a{ text-decoration:none; color:#FFFFFF; }

/*メイン記事指定*/
h2{
	font-size: 24px;
	font-weight:bold;
	color: #336699;
    border-bottom: 3px solid #5a9bbf;
    padding-bottom: 10px;
	margin: 10px 15px 25px 15px;
	text-align: left;
    line-height: 1.5;
}

h3{
	font-size: 20px;
	font-weight:bold;
	color: #333;
    background-color: #eaf4fa;
    border-left: 5px solid #5a9bbf;
	margin: 30px 15px 20px 15px;
	padding: 10px 15px;
    text-align: left;
}

h4 {
    font-size: 18px;
    font-weight: bold;
    color: #336699;
    margin: 20px 15px 15px 15px;
    text-align: left;
}

#content{
	width:100%;
	padding: 0 20px;
	text-align: left;
}

.inner{
	margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
}
.inner:last-child {
    border-bottom: none;
}

.inner p{
	margin: 0 15px 15px;
	font-size: 16px;
	line-height: 1.8;
	text-align:justify;
}

.review-box {
    background: #f9f9f9;
    border-left: 5px solid #ccc;
    margin: 0 15px 15px;
    padding: 15px;
}
.review-person {
    font-weight: bold;
    color: #336699;
}


/*フッター*/
#footer{
	text-align: center;
	clear: both;
}

address {
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	background: #336699;
	font-size: 12px;
	padding: 15px 0px;
	width: 100%;
}

#space{
	margin: 0 15px 15px;
	padding: 20px;
    background-color: #eaf4fa;
	font-size:14px;
	line-height: 1.8;
	clear:both;
	text-align: left;
    border-radius: 5px;
}


/*ボタン指定*/
.bt_c{
	text-align:center;
	margin: 30px auto;
}
.btn_action {
    display: inline-block;
    padding: 15px 40px;
    background: linear-gradient(135deg, #ff8c00, #ff4500);
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    border-radius: 50px;
    box-shadow: 0 5px 15px rgba(255, 69, 0, 0.4);
    transition: all 0.3s ease;
}
.btn_action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 69, 0, 0.5);
    color: #fff;
}

}

@media screen and (max-width: 640px){

.img_r{
	float: none;
    display: block;
	margin: 20px auto;
}

#wrapper {
    width: 100%;
    margin: 0;
    box-shadow: none;
}

#header { padding: 0; }

#head_img{
	margin-bottom: 10px;
	border-bottom: 4px solid #5a9bbf;
	height: 180px;
}

h1{
	font-size:10px;
	padding: 5px 8px;
}

h2{
	font-size: 20px;
    padding: 0;
    margin: 10px 0 20px 0;
}

h3{
	font-size: 18px;
	padding: 10px;
    margin: 25px 0 15px 0;
}

#content{ padding: 0 15px; }

#content img { width: 100%; }

.inner p{
	margin: 0 0 15px 0;
	font-size: 15px;
}

.review-box, #space {
    margin-left: 0;
    margin-right: 0;
}

.btn_action {
    font-size: 16px;
    padding: 12px 25px;
}

#footer p {
	margin: 0 15px 15px;
	font-size: 12px;
}

address {
	margin: 20px auto 0px;
	padding: 10px 0px;
}

}