@charset "shift_jis";

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* 全体 ---------------------------------------------- */
html { -webkit-text-size-adjust:none; overflow-x:hidden; overflow-y : auto;}
body { width: 100%; border: none; font-size: 1.2em; line-height: 1.5em; font-family: 'ヒラギノ角ゴ Pro W8', "メイリオ", "ＭＳ Ｐゴシック", sans-serif;}
body, footer, div, p, span, ul, li, h1, h2, h3, h4, h5 { margin: 0; padding: 0;}
header { padding:0.6em; margin: 0 auto; width: 100%; height: 4em; text-align: center; background-color:#333; border-bottom:#cb67ff 4px solid;}

#wrap, #page-footer { width:1300px; margin: 0 auto; font-size:0.8em;} 
#wrap { margin:0 auto; clear:both; display:block; overflow:hidden; _zoom:1; padding-top:1.5em;}

h1 { font-size:1.6em; text-align:center; color:#FFF; letter-spacing: 0.05em;}
h2 { font-size:1.5em; font-weight:bold; background-color:#FFF; color:#212121; text-align:left; padding:15px 25px;}
h3 { width: 100%; color:#3ea9be; font-weight:bold; font-size:1.5em; display: block; padding-bottom:0.1em;}
h4 { color:#3ea9be; font-size:1.5em; line-height:1.8em; font-weight:bold;}

h4.more-site { clear:both; width:100%; font-size:1.5em; font-weight:bold; background-color:#595959; color:#FFF; text-align:left; padding:0.5em;}

img { border: none; max-width: 100%; height: auto;}

h1 img { vertical-align:-0.4em; height: 50px;}


/* リスト ---------------------------------------------- */
ul { list-style: none;}

/* リンク ---------------------------------------------- */
a { text-decoration:none; color:#333333;}
a:hover { text-decoration:none; color:#333333;}

.category a { color:#3ea9be;}
.category a:hover { color:#3ea9be; text-decoration:underline;}

#footer-wrap a { color:#d5f2f7;}
#footer-wrap a:hover { color:#3ea9be;}

.pr a:hover { text-decoration:underline;}

.site-link {
	display:inline-block;
	text-align:center;
	width:100%;
	text-decoration: none;
	font-size:1.2em;
	font-weight: bold;
	padding:0.8em;
	background-color:#3ea9be;
	border: 2px solid #3ea9be;
	margin-top:10px;
	color:#FFF;
}
.site-link::before,
.site-link::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.site-link,
.site-link::before,
.site-link::after {
	-webkit-transition: all .3s;
	transition: all .3s;
}
.site-link:hover {
	background-color: #fff;
	border-color: #3ea9be;
	color: #3ea9be;
}

.left-box, .right-box { display:inline-block; text-decoration:none; width:50%; margin:0; padding:20px; border:#FFF 4px solid;}
.left-box::before,
.left-box::after,
.right-box::before,
.right-box::after { position:absolute; z-index:-1; display:block; content:'';}
.left-box,
.left-box::before,
.left-box::after,
.right-box,
.right-box::before,
.right-box::after { -webkit-transition:all .3s; transition:all .3s;}
.left-box:hover, .right-box:hover { background-color:#eee; color:#3ea9be; border:#CCC 4px solid;}

.site_no_01, .site_no_04 {
	background-color:#CCC;
	border:#CCC 4px solid;
}

.site_no_01:hover, .site_no_04:hover {
	background-color: #FFF;
	border:#CCC 4px solid;
}

.site_no_02, .site_no_03 {
	background-color:#eee;
	border:#eee 4px solid;
}

.site_no_02:hover, .site_no_03:hover {
	background-color: #FFF;
	border:#eee 4px solid;
}

#page-top { position:fixed; bottom:0; right:30px; line-height: 0em;}

/* 左コラム ---------------------------------------------- */
#container-left { width:66%; display:inline-block;}
.contents-box { display:table; width:100%; margin:0; padding:0; overflow: hidden; table-layout: fixed;}
.contents-box img { padding-bottom:10px;}
.info-text { text-align:left;}
.left-box, .right-box { display:table-cell;}
.genre { font-size:0.7em; line-height:1.5em; padding-bottom:0.8em;}
.genre-icon { width:1.2em; vertical-align:-1em;}

/* 右コラム ---------------------------------------------- */
#container-right { width:33%; float:right;}
.d2pass-article { background-color:#1c4c55; padding:15px; color:#FFF; margin-bottom:10px;}

.reason { font-size:1.2em; color:#FFF; background-color:#df79a6; text-align:center; padding:20px; margin-bottom:10px;}
.number { font-size:2em; display:block; padding:0.4em;}
h5.reason-title { background-color:#df79a6; font-size:1.4em; padding:0.2em 0; text-align:center;}
.reason-text { font-size:0.8em;}

.more-outline { display: block; margin: 0;}
.category { display: block; border: #eee 4px solid; padding: 10px 15px 15px 15px; margin-top:10px;}
.category-list { border-bottom:#CCC 1px dotted; padding:10px;}
.category-list2 { padding:10px 10px 0 10px;}
h5.category-list { font-size:1em; font-weight:normal;}
.check-mark { vertical-align:top;}
.gray { color:#999; text-decoration:none; display:inline;}

.pr { padding:20px 0 0 0;}
.ad_banner { margin: 0; padding:0; vertical-align:bottom; display:block;}
.ad_banner2 { margin: 0; padding:10px 0 0 0; vertical-align:bottom; display:block;}
.icon { padding-right:5px; vertical-align:sub;}

/* フッター ---------------------------------------------- */
#footer-wrap { width:100%; background-color:#212121; border-top:#cb67ff 4px solid; padding:35px 0; color:#d5f2f7;}
#page-footer { -js-display: flex; display: -webkit-flex; display: flex; padding-top:10px;}
.footer-item { -webkit-flex: 1; flex: 1;}
#copyright { font-size: 0.7em; text-align:center; padding-top:50px; color:#666666;}


/* 1024pxより小さいデバイスの場合 */
@media screen and (max-width: 1024px) {

/* 全体 ---------------------------------------------- */
#wrap, #page-footer { width:100%;}

h3 { font-size:1.3em; line-height:1em; padding-bottom:0.5em;}
h4 { font-size:1.2em; line-height:1.7em;}


/* 右コラム ---------------------------------------------- */
#container-left { padding:0;}
#container-right { width:33%; padding:0;}

}

/* 769pxより小さいデバイスの場合 */
@media screen and (max-width: 768px) {

/* 全体 ---------------------------------------------- */	
#wrap, #page-footer { font-size:1em;}
#wrap { padding-top:0.8em;} 

header { height:3.6em; position: static;}
footer { padding:4% 2%; }

h1 { font-size:1.4em;}
h2 { font-size:1.2em; padding-bottom:0.2em;}
h3, h4#d2pass-article, h5.reason-title { line-height: 1.5em; padding-bottom:0;}

h1 img { vertical-align:-0.4em; height: 1.6em;}

#container-left { width:100%;}
#container-right { width:100%; padding:10px 0;}

.more-outline { margin: 0 0.5em;}

.d2pass-article { padding:1.2em;}
.reason { padding:3em;}
.reason-text { font-size:0.85em;} 

.pr { padding:20px;}

/* フッター ---------------------------------------------- */
#footer-wrap { padding-top:0; padding-left:15px;}
#page-footer { -webkit-flex-direction: column; flex-direction: column;}
.footer-item { display:block; padding-top:2em;}

}

/* 481pxより小さいデバイスの場合 */
@media screen and (max-width: 480px) {

/* 全体 ---------------------------------------------- */
#wrap { padding-top:1.2em;} 
header { height:2.8em;}
.footer_inner { padding:10px;}

h1 { font-size:1em;}
h2 { font-size:1.2em; padding:6px 10px;}

.reason { padding:2em 1em;}

/* フッター ---------------------------------------------- */
#footer-wrap { padding-top:0; padding-left:15px;}
#page-footer { -webkit-flex-direction: column; flex-direction: column;}
.footer-item { display:block; padding-top:2em;}

#page-top { right:10px;}

/* リンク ---------------------------------------------- */

.left-box, .right-box { display:inline-block; width:100%; margin:0; padding:20px;}
.left-box { border:#EEE 4px solid;}
.right-box { border:#FFF 4px solid;}
.recommend_site .left-box { background-color:#EEE;}
.recommend_site .right-box { background-color:#FFF;}

.site_no_01, .site_no_03 {
	background-color:#CCC;
	border:#CCC 4px solid;
}

.site_no_01:hover, .site_no_03:hover {
	background-color: #FFF;
}

.site_no_02, .site_no_04 {
	background-color:#eee;
	border:#eee 4px solid;
}

.site_no_02:hover, .site_no_04:hover {
	background-color: #FFF;
}


}