@charset "utf-8";

/************************
	All
************************/
*{
	margin:0;
	padding:0;
}
html{
	overflow:hidden;
	height:100%;
}
body{
	text-align:center;
	font-family:"メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	height:768px !important;
	width: 1024px;
	font-size:90% !important;
	line-height:1.6;
	color:#333;
	margin:0;
	padding:0;
	position:fixed;
	overflow: auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

img{
	width:100%;
	height:auto;
}
a:hover,
input:hover{
	opacity:0.8;
}
.fadeIn2{
 /* ５秒かけてアニメーションする */
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

/**********************
	HEAD
**********************/
#head{
	position: fixed;
	width: 100%;
	height: 60px;
	background:rgba(0,0,0,0.5);
	z-index: 100;
}
#head li{
	display:inline-block;
	float: left;
	width: 14.285%;
}
#head li a{
	display:block;
	line-height: 60px;
	text-decoration: none;
	color:#FFF;
}
#head li a.current{
	display:block;
	background:rgba(0,0,0,0.3);
	line-height: 60px;
	text-decoration: none;
	color:#FFF;
}

/**********************
	History back
**********************/
#hb{
	position: fixed;
	width: 100%;
	bottom:0;
	height: 60px;
	z-index: 110;
}
#hb p a{
	width:60px;
	height:60px;
	line-height:60px;
	display:block;
	color:#000;
	font-weight:bold;
	text-decoration:none;
	background:url("../img/bnt_bk.png") no-repeat center center;
	border-radius:50%;
	margin:0 auto;
}

/**********************
	TOP
**********************/
#top #main #contents{
	width:74%;
	float:right;
	background:url("../img/bk.jpg") no-repeat right top;
	background-size:cover;
	height:768px;
}
#top #main #contents div.mainimage{
	width:100%;
	height: 768px;
	overflow: hidden;
}
#top #main #contents div.mainimage li{
	background-size:cover;
	height:768px;
	width:100%;
}
#top #main #contents div.mainimage li.image1{background:url("../img/top1.jpg") no-repeat left center;}
#top #main #contents div.mainimage li.image2{background:url("../img/top2.jpg") no-repeat left center;}
#top #main #contents div.mainimage li.image3{background:url("../img/top3.jpg") no-repeat left center;}
#top #main #contents div.mainimage li.image4{background:url("../img/top4.jpg") no-repeat left center;}
#top #main #side{
	width:24%;
	float:left;
}
#top #main #side ul{
	width:100%;
	margin-top:10%;
    overflow: hidden;
    padding-bottom: 4px;
}
#top #main #side li{
	display:inline-block;
	width:44%;
	margin-left:4%;
	float:left;
}
#top #main #side li:nth-child(even){
	margin-top:30px;
}
#top #main #side li a{
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	background:linear-gradient(top,#FFFFFF,#F2F2F2,#F4F4F4);
	background: -moz-linear-gradient(top,#FFFFFF,#F2F2F2,#F4F4F4);
	background:-webkit-gradient(linear,left top,left bottom,from(#FFFFFF),color-stop(0.5,#F2F2F2),to(#F4F4F4));
	border:2px solid #CCC;
	height:100px;
	text-decoration:none;
	box-shadow:2px 2px rgba(0,0,0,0.2);
	box-sizing:border-box;
	border-radius:10px;
	color:#333;
	font-weight:bold;
}

/**********************
	CATEGORY
**********************/
#page #main{
	text-align: left;
    position: relative;
}
#page #main .fltL,
#page #main .fltR{
	width: 50%;
	box-sizing: border-box;
	color: #000;
}
#page #main .fltL{
	padding:100px 30px;
	height:768px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size:contain;
}
#page #main #contents .catbox{
	position:relative;
	height:568px;
}
#page #main #contents .cattex{
	position:absolute;
	bottom:0;
}
#page #main #contents .cattex p{
	text-shadow: 1px 1px 3px #CCC;
	-moz-text-shadow: 1px 1px 3px #CCC;
	-webkit-text-shadow: 1px 1px 3px #CCC;
}


#page .history .fltL{
	background-image:url("../img/page1_bk1.jpg");
}
#page .antarctic .fltL{
	background-image:url("../img/page2_bk1.jpg");
}
#page .climbing .fltL{
	background-image:url("../img/page3_bk1.jpg");
}
#page .technology .fltL{
	background-image:url("../img/page4_bk1.jpg");
}
#page .word .fltL{
	background-image:url("../img/page5_bk1.jpg");
}
#page .network .fltL{
	background-image:url("../img/page6_bk1.jpg");
}
#page .comic .fltL{
	background-image:url("../img/page7_bk4.jpg");
}
#page #main.maxims .fltL{
	background-image:url("../img/page6_bk1.jpg");
    background-size: cover;
}
#page #main .fltL dt{
	font-size: 1.75em;
	border-bottom: 1px solid #000;
}
#page #main .fltL dd{
	text-align: right;
	padding-bottom: 20px;
}
#page #main .fltR{
/*	padding:100px 0;*/
    padding:100px 0 0;
}
#page .history .fltR{
    padding: 100px 10px 20px !important;
/*	padding: 100px 10px 0 !important;*/
}
#page .history .fltR #scrl{
	height:640px ;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#page .history .fltR #scrl::-webkit-scrollbar{
	width: 10px;
	background: #EEE;
}
#page .history .fltR #scrl::-webkit-scrollbar-thumb{
	background: #999;
	border-radius:5px;
}
#page .history .fltR #scrl table{
	border-collapse: collapse;
    width: 100%;
}
#page .history .fltR #scrl th{
	text-align: left;
}
#page .history .fltR #scrl th,
#page .history .fltR #scrl td{
	padding:8px 5px;
	vertical-align: top;
	border-bottom: 1px solid #CCC;
}
#page .history .fltR #scrl th{
	text-align: left;
	white-space: nowrap;
}
#page .history .fltR #scrl th.year{
	background:#EEE;
}
#page #main .fltR ul{
	background:#EDF0F2;
	width: 100%;
	padding: 50px 0;
	box-sizing: border-box;
	height:640px ;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
#page #main .fltR ul::-webkit-scrollbar{
	width: 10px;
	background: #EEE;
}
#page #main .fltR ul::-webkit-scrollbar-thumb{
	background: #999;
	border-radius:5px;
}

#page #main .fltR li{
	padding: 15px 30px;
}
#page #main .fltR li a{
	display: block;
	background: #BBB;
	padding:10px;
	text-decoration: none;
	color:#000;
}

/**********************
	DETAIL
**********************/
#detail #main{
	text-align: left;
}
#detail #main .fltL{
	text-align: center;
}
#detail #main .fltL,
#detail #main .fltR{
	width: 46%;
	box-sizing: border-box;
	color: #000;
}
#detail #main .fltL{
	margin-left:2%;
}
#detail #main .fltR{
	margin-right:2%;
}
#detail #main .fltL img{
	width: auto;
	margin:0 auto;
}
#detail #main .fltR #scrl p{
	margin-bottom: 10px;
}
#detail #main .fltR p.tit,
#detail #main .fltR #scrl p.tit{
	font-size: 1.5em;
	border-bottom: 1px solid #000;
	margin-bottom: 20px;
}
#detail #main .fltR #scrl{
	height:600px;
	overflow-y:auto;
/*	-webkit-overflow-scrolling: touch;*/
}
#detail #main .fltR #scrl::-webkit-scrollbar {
	background:#CCC;
	width:10px;
}
#detail #main .fltR #scrl::-webkit-scrollbar-thumb {
	background:#AAA;
}
#detail #main .fltL,
#detail #main .fltR{
	padding:100px 30px 0 !important;
}
#detail #main #section0,
#detail #main #section1{
	background:transparent !important;
}
#detail #main .fltL dt img{
	max-width:100%;
}
#detail #main .fltR li{
	padding: 15px 0;
}
#detail #main .fltR li a{
	display: block;
	background: #BBB;
	padding:10px;
	text-decoration: none;
	color:#000;
}

/* DOWN */
#detail #down{
	width: 100%;
	text-align: center;
}
#detail #up{
	width: 100%;
	text-align: center;
}
#detail #down a{
	width: 100%;
	height: 50px;
	background:rgba(153,153,153,0.5) url("../img/next.png") no-repeat center center;
	display: block;
	margin: 0 auto;
	text-indent: -9999em;
	text-align: left;
}
#detail #up a{
	width: 100%;
	height: 50px;
	background:rgba(153,153,153,0.5) url("../img/back.png") no-repeat center center;
	display: block;
	margin: 0 auto;
	text-indent: -9999em;
	text-align: left;
}
#detail #contents .fp-controlArrow.fp-prev{
	border-right-color: #CCC;
}
#detail #contents .fp-controlArrow.fp-next{
	border-left-color: #CCC;
}
/************************
	LOG
************************/
#aclog{
	display:none !important;
}

/************************
	見出し
************************/
.heading1{font-weight: bold;font-size: 24px;margin-bottom: 8px;}

/************************
	言語切り替えボタン
************************/
.language{position: absolute;left: 30px;bottom: 60px;}
.language a{background-color: #fff;;border: 1px solid #666;display: inline-block;color: #555;padding: 0.5em 2em 0.5em calc(4.4em + 2em);box-sizing: border-box; text-decoration: none;position: relative;box-shadow: 3px 3px 0 rgba(0,0,0,0.2);}
.language a::before{content: "Lang ≫";display: block;background: #666;color: #fff;padding: 0.5em;position: absolute;top: 0;left: 0;}

/************************
	comic
************************/
/*detail*/
.comicwrap{text-align: center;padding: 60px 0;}
.comicwrap img{width: 768px;}
/*TOP banner*/
#top #main #side li.comic_bn a{border: none;border-radius: 0;}

/************************
	西堀かるた
************************/
#page #main.maxims .fltL{width: 25%;}
#page #main.maxims .fltR{width: 75%;padding: 100px 10px 0;}

#page #main.maxims .fltR dt{font-size: 1.75em;border-bottom: 1px solid #000;}
#page #main.maxims .fltR dd{text-align: right;padding-bottom: 20px;}

#page .maxims .fltR #scrl{height:600px;overflow: auto;-webkit-overflow-scrolling: touch;padding-right: 0.5em;}
#page .maxims .fltR #scrl::-webkit-scrollbar{width: 10px;background: #EEE;}
#page .maxims .fltR #scrl::-webkit-scrollbar-thumb{background: #999;border-radius:5px;}

#page .maxims .fltR #scrl table{border-collapse: collapse;width: 100%;}
#page .maxims .fltR #scrl table th{text-align: left;white-space: nowrap;}
#page .maxims .fltR #scrl table th,
#page .maxims .fltR #scrl table td{padding:8px 5px;vertical-align: top;border-bottom: 1px solid #CCC;}
#page .maxims .fltR #scrl table tr:first-child th,
#page .maxims .fltR #scrl table tr:first-child td{border-top: 1px solid #CCC;}