<!DOCTYPE HTML> 
<html lang=”ja”>
<meta charset=”UTF-8″>

<!-- スタイルシート -->
<style>




/*表*/
.header{
    background: #fff;
    display: flex;
    padding: 60px 20px;
    position: fixed;
    justify-content: space-between;
    width: 100%;
	
}

table#tnomal {border-collapse: collapse;
		margin-bottom: -60px;
		width:96%;
		}
table#tnomal td{
		background-color: #ffffff;
		border: solid 1px;
		padding: 0.3em;
		vertical-align: top;
		width: 25%;
		text-align:center;
		font-size:14px;
		}

/*企画 表*/
table#pnomal {border-collapse: collapse;
	width:96%;
}
table#pnomal td{
	background-color: #ffffff;
	border: solid 1px;
	vertical-align: top;
	width: 50%;
	text-align:center;
	font-size:10px;
}

/*イラスト 表*/
table#illsut {border-collapse: collapse;
		width:96%;
		}
table#illsut td{
		background-color: #ffffff;
		border: solid 1px;
		padding: 0.3em;
		text-align:center;
		vertical-align:middle; 
		width: 30%;
		}


/*ボディ・ヘッダー*/
#body{
	padding: 0px 0px 0px 0px; /* bodyの内側余白を指定する(上:右:下:左) */
	margin: 0;
	padding: 0;
	background-color: #bcdce1;
		}

#header {
	z-index: 9999;
	position: fixed;
	top: 0px;
	width: 100%; /* ヘッダーの横幅を指定する */
	background-color: #ffffff;
}

hr {
		margin:0 0 0px 0;
		border-color:#000000;
		border-style:solid;
		border-width:0 0 1px 0;
		padding:0 0 0px 0;
	}

/*ページタイトル*/
h1 {
padding-left: 1.2em;/*アイコン分のスペース*/
background: #b0dcfa; /*背景色*/
padding: 0.5em;/*文字周りの余白*/
color: white;/*文字を白に*/
border-radius: 0.5em;/*角の丸み*/
}

.titlleicon{
			position: absolute;/*絶対位置*/
left: 0;/*アイコンの位置*/
top: 10%;/*アイコンの位置*/
	height:30px;
	}

/*ページタイトル*/
.home {
    position: relative;
    height: 50px;/*リボンの高さ*/
    line-height: 50px;/*リボンの高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0 50px;/*横の大きさ*/
    font-size: 18px;/*文字の大きさ*/
    background: #ffff84;/*塗りつぶし色*/
    color: #000;/*文字色*/
}
.stamp {
    position: relative;
    height: 50px;/*リボンの高さ*/
    line-height: 50px;/*リボンの高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0 50px;/*横の大きさ*/
    font-size: 18px;/*文字の大きさ*/
    background: #84ff84;/*塗りつぶし色*/
    color: #000;/*文字色*/
}
.illust {
    position: relative;
    height: 50px;/*リボンの高さ*/
    line-height: 50px;/*リボンの高さ*/
    vertical-align: middle;
    text-align: center;
    padding: 0 50px;/*横の大きさ*/
    font-size: 18px;/*文字の大きさ*/
    background: #84c1ff;/*塗りつぶし色*/
    color: #000;/*文字色*/
}
.planning {
	position: relative;
	height: 50px;/*リボンの高さ*/
	line-height: 50px;/*リボンの高さ*/
	vertical-align: middle;
	text-align: center;
	padding: 0 50px;/*横の大きさ*/
	font-size: 18px;/*文字の大きさ*/
	background: #ffa500;/*塗りつぶし色*/
	color: #000;/*文字色*/
}

.ribbon:before, .ribbon:after{
    position: absolute;
    content: '';
    width: 0px;
    height: 0px;
    z-index: 1;
}

.ribbon:before{
    top: 0;
    left: 0;
    border-width: 25px 0px 25px 35px;
    border-color: transparent transparent transparent #bcdce1;
    border-style: solid;
}

.ribbon:after{
    top: 0;
    right: 0;
    border-width: 25px 35px 25px 0px;
    border-color: transparent #bcdce1 transparent transparent;
    border-style: solid;
}

/*タイトル*/
.under_nomal{
		background: rgba(256,256,256,0.5);
		margin:-0.2em 0em;
		}

p#under_red {
		background: rgba(256,256,256,0.5);
		margin:-0.2em 0em;
		}
p#under_red span {color: red;
		}

/*説明ボックス*/
#box{
	border: 3px solid #ff9933;
	border-radius:5px;
	background: #fff;
	font-size:14px;"
	}

/*リンクカラー*/
.blue {color: royalblue;
  text-decoration: none;
  }


/*ジャンプボタン*/
.jump_btn{
	display: inline-block;
	padding: 0.2em 2em;
	text-decoration: none;
	background: #87cefa;/*ボタン色*/
	color: #000;
	border-bottom: solid 4px #36849d;/*影色*/
	border-radius: 10px;
	text-align:center;
	margin:0.5em 0.5em;
	}

.jump_btn:active {/*ボタンを押したとき*/
	-ms-transform: translateY(4px);
	-webkit-transform: translateY(4px);
	transform: translateY(4px);/*下に動く*/
	box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
	border-bottom: none;
	}

#stamp,#emoji{/*ちょうどいい位置に移動*/
	padding-top:83px;
	margin-top:-83spx;
	}

/*メニューボタン*/
#menu {
margin:0px;
padding:0px;
}

#menu li {
float:right;
list-style-type:none;
margin-right: 0.5em;
text-align:center;
margin:3px;
}

/*ピクシブボタン*/
.pixiv_btn {
    position: relative;
    display: inline-block;
    padding: 0.1em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #0096fa;/*色*/
    border: solid 1px #0f9ada;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.square_btn:active {/*押したとき*/
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;
}

/*ツイッターボタン*/
.twitter_btn {
    position: relative;
    display: inline-block;
    padding: 0.1em 0.5em;
    text-decoration: none;
    color: #FFF;
    background: #000000;/*色*/
    border: solid 1px #000000;/*線色*/
    border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.square_btn:active {/*押したとき*/
    border: solid 1px #03A9F4;
    box-shadow: none;
    text-shadow: none;

/*トップボタン*/
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: FontAwesome;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

/*タブ切り替え*/
.tab_wrap{width:96%; margin:0px auto;}
input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.tab_area label{width:28%; height:10px; display:inline-block; padding:10px 0; color:#999; background:#ddd; text-align:center; font-size:13px; cursor:pointer; transition:ease 0.2s  0.2s opacity; border-top-left-radius:10px; border-top-right-radius:10px; vertical-align:bottom; transition:ease 0.2s; margin:5px 5px 0;}

.tab_area label:hover{opacity:0.5;}
.panel_area{background:#ffffff; border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-top:3px solid #d7e9ea;}
.tab_panel{width:100%; padding:10px 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:left; padding-left: 10px;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}

/*フッター*/
.footer{
	position:absolute;
	bottom:0;
	
}

p#under_cope{
		background: rgba(256,256,256,0.8);
		font-size:14px;
		margin:-15px 0px -15px 0px ;
		text-align:center;
		}

/*画像上下の余白消し*/
img { vertical-align: bottom; }


/*ポップアップ用*/
.lock {
	overflow:hidden;
}

.modal-content {
	position:relative;
	display:none;
	width:86%;
	height:76%;
	margin:58px 0px 0px 0px;
	padding:5px 10px;
	border:2px solid #aaa;
	background:#fff;
	overflow:scroll;
	padding-top:30px;
}

.modal-content p {
	margin:0;
	padding:0;
}

.modal-overlay {
	z-index:1;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:120%;
	background-color:rgba(0,0,0,0.75);
}

.modal-wrap {
	z-index:2;
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow:auto;
}

.modal-open {
	color:#00f;
	text-decoration:underline;
}

.modal-open:hover {
	cursor:pointer;
	color:#f00;
}

.modal-close {
	color:#00f;
	text-decoration:underline;
}

.modal-close:hover {
	cursor:pointer;
	color:#f00;
}

/*ポップアップ用閉じるボタン*/
.sclose{
	position: fixed;
	right: 4.5%;
	top: 12.5%;
	background: #000;
	color: #fff;
	padding: 3px;
	margin: 10px;
	width: 25px;
	text-align: center;
	opacity: 0.6;
	border-radius: 30%;
	font-size:20px;
	text-decoration: none;
	}

.sclose2{
	background: #000;
	color: #fff;
	text-align: center;
	opacity: 0.6;
	border-radius: 10%;
	font-size:15px;
	text-decoration: none;
	padding: 3px;
}

</style>