/* 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, メイリオ, sans-serif;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}

/*画像指定*/
img{ border: none; }
a img { border: none; }

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

hr{ color:#CCCCCC; margin: 10px 20px; }

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

/*文字列右寄せ*/
.link_r { text-align: right; margin-right:10px; }
#content .to-center {text-align:center;}

/*コンテンツ指定*/
body {
	text-align: center;
	font-size:14px;
	background-color: #f0f2f1; /* サイト全体の背景色を少し上品な色に */
	margin-right: auto;
	margin-left: auto;
}

@media screen and (min-width: 641px){
/*画像指定*/
.img_l{ float:left; background:#fff; margin: 0 10px 0 15px; padding: 0 10px 5px 15; }
.img_r{ float:right; padding-left:10px; margin: 0 15px 0 10px; }

#wrapper{
	width:820px;
	background-color: #ffffff; /* 本体背景は白 */
	margin-right: auto;
	margin-left: auto;
	padding: 0px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* 影をつけて立体感を出す */
}

/**▼ヘッダー*****/
#header{ width:800px; margin:0 auto; }
#head_img{
	height: 244px; /* 高さは画像に合わせて調整してください */
	margin-bottom:30px;
	border-bottom:4px solid #004d40; /* 深緑 */
}
h1{
	font-size:10px;
	font-weight:bold;
	padding: 2px 0;
	width: 800px;
	background-color: #004d40; /* 深緑 */
	margin: 0 auto;
	text-align: right;
	color: #FFFFFF;
}

/*メイン記事指定*/
h2{
	background-color: #004d40; /* 深緑 */
    border-left: 10px solid #d4af37; /* ゴールド */
	line-height: 1.5;
	font-size: 22px;
	font-weight:bold;
	clear:both;
	color: #FFFFFF;
	padding: 10px 20px;
	margin: 1px 1px 20px 1px;
	text-align: left;
}
h3{
	font-size: 18px;
	font-weight:bold;
	border-bottom: 2px solid #004d40; /* 深緑 */
    border-left: 5px solid #d4af37; /* ゴールド */
	margin: 20px 15px 15px;
	padding: 5px 10px;
    color: #004d40;
}
#content{
	width:760px;
	margin: 0px auto;
	padding: 0 20px;
	text-align: left;
}
.inner{
	margin: 10px 15px 30px 15px;
	border: 1px solid #d4af37; /* ゴールド */
	padding: 1px 1px 20px 1px;
    background-color: #fafafa;
}
.inner p{
	margin:0 15px 15px;
	font-size: 16px; /* 文字を少し大きく */
	line-height: 1.8; /* 行間を広げる */
	text-align:justify;
}

/*フッター*/
#footer{ text-align: center; clear: both; overflow:hidden; }
#footer p { margin: 0 30px; text-align: left; }
address {
	font-style: normal;
	color: #FFFFFF;
	text-align: center;
	display: block;
	background: #004d40; /* 深緑 */
	font-size: 12px;
	margin: 30px auto 0px auto;
	padding: 10px 0; /* 少し高さを出す */
	width: 800px;
}
/*フリースペース*/
#space{
	margin: 0 15px 15px;
	padding:15px;
	font-size:14px;
	border: 1px dashed #d4af37; /* ゴールド */
	clear:both;
	text-align: left;
    background-color: #f9f6f0; /* 少し色味のある背景 */
}
/*ボタン指定*/
.bt_c{ text-align:center; clear:both; margin: 20px auto; }
.bt_c a img:hover { opacity: 0.8; } /* ホバー効果 */
}

@media screen and (max-width: 640px){
/* SP用の調整は元のCSSを参考にしつつ、上記デザインに合わせてください */
.link_r { display: none; }
.img_l, .img_r { float: none; display: block; margin: 10px auto; text-align: center; }
#header { margin:0 auto; padding: 0; }
#header img { width: 100%; height: auto; }
#head_img{ margin-bottom: 10px; border-bottom: 4px solid #004d40; height: auto; }
h1{ font-size:10px; font-weight:bold; padding: 5px 8px; background-color: #004d40; text-align: right; color: #FFFFFF; }
h2{ background: #004d40; font-size: 18px; padding: 10px; border-left: 8px solid #d4af37; }
h3{ font-size: 16px; border-bottom: 2px solid #004d40; border-left: 5px solid #d4af37; padding: 8px; margin: 15px 10px; }
#content{ margin: 0 auto; padding: 0 10px; text-align: left; }
#content img { max-width: 100%; height: auto; }
.inner{ margin: 10px auto 20px; border: 1px solid #d4af37; padding: 1px 1px 10px 1px; }
.inner p{ margin: 10px; font-size: 15px; line-height: 1.7; }
.bt_c { text-align: center; }
#footer p { margin: 0 10px; font-size: 12px; }
address { font-size: 12px; margin: 20px auto 0px; padding: 8px 0; background: #004d40;}
}

/* アコーディオン */
.accordion-section { padding: 10px 15px; }
.accordion-header {
    background-color: #f1f1f1;
    padding: 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    margin-top: 5px;
    position: relative;
    font-weight: bold;
    color: #004d40;
}
.accordion-header:hover { background-color: #e8e8e8; }
.accordion-content {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border: 1px solid #ddd;
    border-top: none;
}
.accordion-content p { font-size: 15px; }
.accordion-q, .accordion-a {
    font-weight: bold;
    font-size: 18px;
}
.accordion-q { color: #d4af37; margin-right: 10px; }
.accordion-a { color: #004d40; margin-right: 10px; }
.accordion-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    color: #004d40;
}