@charset "utf-8";
/* (c) 2017 TOPPAN PRINTING CO., LTD. */
/* ver.20170706 */
/* 180905　解説追加 */

body,div,p,img,span { 
	margin:0px;
	padding:0px;
	line-height:1em;
}

/* テキスト共通設定 */
.toumei,
.toumei2,
.moji {
	position:absolute;
	font-family:serif;
	writing-mode:tb-rl; 
	writing-mode:vertical-rl;
	-moz-writing-mode:vertical-rl;
	-o-writing-mode:vertical-rl;
	-webkit-writing-mode:vertical-rl;
	z-index:4;
}

.toumei::selection,
.toumei2::selection {
background:rgba(0,153,204,0.5);
color:#fff;
}

.toumei::-moz-selection,
.toumei2::-moz-selection {
background:rgba(0,153,204,0.5);
color:#fff;
}

.toumei2:hover{
	color:#fff;
	padding:0 10;
}

.moji_y {
	font-family:serif;
	word-wrap: normal;
	display:block;
	background-color:rgba(255,255,255,0.7);
	padding:1px 3px;
	z-index:4;
}

.toumei,
.toumei2 {
	color:rgba(255,255,255,0);
}

.moji,
.moji_y {
	color:rgba(0,0,255,1);
}

/* 白背景 */
.moji_bg {
	position:absolute;
	background-color:rgba(255,255,255,0.7);
	width: 1em;
	z-index:3;
}

/* リンク */
.link {
	display:inline-block;
	z-index:5;
}

.link:hover{
	background-color:rgba(0,153,204,0.5);
	margin:1px;
	z-index:5;
}

.link2 {
	position:absolute;
	/*text-align:center;
	vertical-align:middle;*/
	display:block;
	/*padding-right:10px;
	margin-left:-10px;*/
	z-index:5;
	line-height:1.4em;
}

.link2:hover{
	background-color:rgba(0,153,204,0.5);
	color:#fff;
	z-index:5;
}

.link2 span{
	display:inline-block;
	margin:auto 0;
}


/* 背景画像 */
.bg_img {
	background-repeat:no-repeat;
	background-position:0 0;
	background-size:100%;
    position: absolute;
    top: 37px;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
	z-index:0;
}

.contents div {
	position: absolute;
	top: 0;
}

/* 切り替えボタン */
#tab{
	position:fixed;
	border-bottom:#06c 2px solid;
	background-color:#FFFFFF;
	z-index: 50;
	width:100%;
	overflow:hidden;
}

#navi {
	width:auto;
}

.left {
	float:left;
}

.right {
	float:right;
}

#tab,#navi {
    margin-top: 0px;
    padding-left: 0px;
    top: 0px;
}

#tab ul {
    margin-top: 0px;
    padding-left: 0px;
    top: 0px;
}

#tab li {
	margin-left:10px;
	margin-top:4px;
	list-style:none;
	float:left;
}

#navi li {
	display:inline-block;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	width:8em;
	margin:9px 15px 0px;
	height:20px;
	line-height:20px;
	padding:0px;
}

.tab a {
	display:block;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	font-weight:bold;
	width:10em;
	height:30px;
	line-height:30px;
	padding:0px;
	border-top:#06c 1px solid;
	border-left:#06c 1px solid;
	border-right:#06c 1px solid;
	background-color:#FFF;
	color:#06c;
	-webkit-border-radius: 5px 5px 0px 0px;
	-moz-border-radius: 5px 5px 0px 0px;
	border-radius: 5px 5px 0px 0px;
}

#navi .btn a {
	width:8em;
    display: block;
    text-decoration: none;
	border:#06c 1px solid;
	background-color:#FFF;
	color:#06c;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#tab li a:hover,
#navi li a:hover {
	background-color:rgba(0,153,204,0.5);
}

#navi .gray{
	border:#AAA 1px solid;
	background-color: #EEE;
	color: #AAA;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.page {
	border: none;
	font-size:14px !important;
    font-weight: normal !important;
    color: #06c;
    width: auto !important;
    margin-right: 10px;
}

/* タブの表示切替の設定 */
.contents div {
	display:none;
	z-index: 1;
}

#tab li.tab:first-child a {
	background: #06c;
	color: #fff;
}

.contents div:first-child {
	display: block;
	z-index: 2;
}

#tab01:target .contents .tab01,
#tab02:target .contents .tab02,
#tab03:target .contents .tab03,
#tab04:target .contents .tab04 {
	display:block;
	z-index: 2;
}

#tab01:target .contents div:not([class="tab01"]),
#tab02:target .contents div:not([class="tab02"]),
#tab03:target .contents div:not([class="tab03"]),
#tab04:target .contents div:not([class="tab04"]) {
	display:none;
	z-index: 1;
}
 
/* tabのアクティブ・非アクティブ設定 */
#tab01:target #tab.tab li a[href$="tab01"],
#tab02:target #tab a[href$="tab02"],
#tab03:target #tab a[href$="tab03"],
#tab04:target #tab a[href$="tab04"] {
	background: #06c;
	color: #fff;
}

/* アクティブ状態の解除 */
:not([id="tab01"]):target #tab li a[href$="tab01"] {
	background: #fff;
	color: #06c;
}

:not([id="tab01"]):target #tab li a[href$="tab01"]:hover {
	background-color:rgba(0,153,204,0.5);
}

.tab02,
.tab03 {
	animation: opa .5s;
}

@keyframes opa {
	0%   { opacity:0; }
	100% { opacity:1; }
}

@-webkit-keyframes opa {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* 解説用 */
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
.hidden_box label {
    padding: 10px;
    font-weight: bold;
    border: solid 2px #06c;
    cursor :pointer;
	color:#06c;
	border-radius:5px;
}

/*ボタンホバー時*/
.hidden_box label:hover {
   	background-color:rgba(0,153,204,0.5);
}

/*消す*/
.hidden_box input {
    display: none;
}

/*表示*/
.hidden_box .hidden_show {
    height: 100%;
    /*padding: 0;
    overflow: hidden;*/
    opacity: 1;
    transition: 0.8s;
	line-height:1.3em;
}

/*クリックで非表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 30px 0 0 0;
    height:  0;
    opacity: 0;
}

.hidden_show p{
	font-weight: bold;
	font-size: large;
	background:#06C;
	color:#FFF;
	padding: 0.5em;
	width:100%;
	margin: 25px 0px 10px;
	box-sizing:border-box;
}

.hidden_show span{
	border-bottom: solid 2px #06c;
	display:block;
	width:100%;
}