@charset "utf-8";
/* CSS Document */


/*共通レイアウト*/
body {font-family: -apple-system, BlinkMacSystemFont, Roboto, "游ゴシック体", YuGothic, "Yu Gothic Medium", sans-serif;margin:0;animation: fadeIn 1s ease 0s 1 normal;-webkit-animation: fadeIn 1s ease 0s 1 normal;}
p,div,ul,ol,li,h1,h2,h3,h4,h5,h6,section,nav {margin:0; padding:0; list-style:none; display:block; line-height:1.4em;}
@keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
@-webkit-keyframes fadeIn {0% {opacity: 0}100% {opacity: 1}}
/*回りこみ回避*/
.clearfix:after {content:" ";display:block;clear:both;}
/*スクロールバー*/
::-webkit-scrollbar{width: 10px;}
::-webkit-scrollbar-track{background: #fff;border: none;border-radius: 10px;box-shadow: inset 0 0 2px #777;}
::-webkit-scrollbar-thumb{background: #444;border-radius: 10px;box-shadow: none;}
#wrapper {width:100%; position:relative; min-height: 100vh;}

footer {width:100%; padding:5px 0; background:#111;position:absolute;bottom: 0; color:#FFF!important; text-align:center; font-size:70%}
footer ul {margin:0; padding:0 3px:}
footer ul li {display:inline-block; vertical-align:top;}
footer ul li.twitter a{background:url(../svgicon/twitter.svg)left top no-repeat; background-size:100% 100%; width:30px; height:30px; display:block; text-indent:-9987em;}

article h2 {font-size:120%; padding:0 0 7px 0; border-bottom:1px solid #333333; margin:0 0 10px 0;}
article .time {font-size:80%; margin:0 0 15px 0;}
article p {margin:0 0 10px 0;}
article #relation {margin:30px auto 0 auto;padding:20px;background:#E0DAC5;border-radius: 10px / 10px;}
article #relation h3{font-size:115%; padding:0 0 10px 0; border-bottom:1px solid #333; margin:0 0 15px 0;}
article #relation li{width:30%; float:left; margin:0 3% 10px 0;}
article #relation li a{display:block; padding:7px; background:#246647;border-radius: 5px / 5px; color:#FFF;}

main ul#breadcrumblist{width:100%; background:#E0DAC5; border-radius: 5px / 5px; margin:0 0 1% 0;}
main ul#breadcrumblist li{float:left; padding:5px 0 5px 8px; color:#246647; font-size:75%;}
main ul#breadcrumblist li:after{content: '　>';}
main ul#breadcrumblist li:last-child:after{content: '';}
main ul#breadcrumblist li a{color:#246647;}



#contentspage nav ul li:first-child{border-top:1px solid #FFF;}
#contentspage nav ul li{width:100%;border-bottom:1px dashed #FFF; font-weight:bold;}
#contentspage nav ul li a{display:block;padding:10px 15px; color:#FFF;}




main{
width:96%;
margin:2% 2% 0 2%;
}
main h1{
background-color: rgba(12,59,75,0.85);
border-radius: 5px / 5px;
font-size:125%;
color:#FFF;
padding:10px;
margin:0 0 5px 0;
}


/*-------------------------------------------------*/

/*PC版レイアウト*/
@media screen and (min-width:1025px){
body {
background:url(../images/top-image01.jpg)left top no-repeat #111;
background-size:100%;
background-attachment: fixed;
font-size:115%;
}
#contentspage nav ul li a{display:block;padding:10px 15px 10px 45px; color:#FFF; line-height:175%;}
/*icon-images*/
#contentspage nav ul li.home{background:url(../svgicon/home.svg)10px center no-repeat; background-size:25px;}
#contentspage nav ul li.output-analysis{background:url(../svgicon/output-analysis.svg)10px center no-repeat; background-size:25px;}
#contentspage nav ul li.questions{background:url(../svgicon/questions.svg)10px center no-repeat; background-size:25px;}
#contentspage nav ul li.words{background:url(../svgicon/words.svg)10px center no-repeat; background-size:25px;}
#contentspage nav ul li.faq{background:url(../svgicon/faq.svg)10px center no-repeat; background-size:25px;}
#contentspage nav ul li.information{background:url(../svgicon/information.svg)10px center no-repeat; background-size:25px;}

header{
width:100%;
height:60px;
padding:20px 0 0 0;
background-color: rgba(12,59,75,0.85);
color:#FFF;
}
header h1{
background:url(../images/logo.png)left top no-repeat;
background-size:100%;
width:260px;
height:40px;
margin:0 auto;
}
header h1 a{
display:block;
width:260px;
height:40px;
text-indent:-9999em;
}
header #wrap nav{
display:none;
position:absolute;
z-index:9999;
width: 100%;
background-color: rgba(12,59,75,0.95);
left: 0;
top:80px;
}

/*更新ボタン*/
#refresh{
display: block;
position:absolute;
width: 32px;
height: 32px;
left:20px;
top:27px;
}

#refresh img{
width:30px;
}

/*開閉ボタン*/
#nav_toggle{
display: block;
width: 27px;
height: 27px;
float:right;
}
#nav_toggle span{
display: block;
height: 4px;
background: #fff;
position:absolute;
width: 27px;
margin:30px 25px 0 0;
right:0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav_toggle span:nth-child(1){
top:0px;
}
#nav_toggle span:nth-child(2){
top:9px;
}
#nav_toggle span:nth-child(3){
top:18px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 100%;
}
.open #nav_toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}

main{
width:1020px;
margin:2% auto 0 auto;
}
main h1{
background-color: rgba(12,59,75,0.85);
border-radius: 5px / 5px;
font-size:150%;
color:#FFF;
padding:15px;
margin:0 0 20px 0;
}
#main-contents{
height:100%;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
}
#main-contents article{padding:25px;margin-bottom:60px;}
article #relation li a{font-size:100%; text-align:center;}

#create {width:100%; padding:15px 0; background:#111; position:fixed;bottom: 0; color:#FFF!important; text-align:center; font-size:70%}
#create ul{width:80%; margin:0 10%;}
#create li{display:inline-block; margin:0 2%;}
#create li a{display:block; border-radius: 5px/5px; color:#FFF; padding:10px 15px 10px 30px; margin:0; font-size:115%; font-weight:bold; background:url(../svgicon/print.svg)left center no-repeat; background-size:20px 20px;}


}

/*-------------------------------------------------*/



/*TB版よこレイアウト*/
@media screen and (min-width:781px) and ( max-width:1024px){
body {
background:url(../images/top-image01.jpg)left top no-repeat #111;
background-size:100%;
background-attachment: fixed;
font-size:85%;
}
#contentspage nav ul li a{display:block;padding:10px 15px 10px 38px; color:#FFF; line-height:175%;}
/*icon-images*/
#contentspage nav ul li.home{background:url(../svgicon/home.svg)10px center no-repeat; background-size:20px;}
#contentspage nav ul li.output-analysis{background:url(../svgicon/output-analysis.svg)10px center no-repeat; background-size:20px;}
#contentspage nav ul li.questions{background:url(../svgicon/questions.svg)10px center no-repeat; background-size:20px;}
#contentspage nav ul li.words{background:url(../svgicon/words.svg)10px center no-repeat; background-size:20px;}
#contentspage nav ul li.faq{background:url(../svgicon/faq.svg)10px center no-repeat; background-size:20px;}
#contentspage nav ul li.information{background:url(../svgicon/information.svg)10px center no-repeat; background-size:20px;}

header{
width:100%;
height:35px;
padding:10px 0 0 0;
background-color: rgba(12,59,75,0.85);
color:#FFF;
}
header h1{
background:url(../images/logo.png)left top no-repeat;
background-size:100%;
width:195px;
height:30px;
margin:0 auto;
}
header h1 a{
display:block;
width:195px;
height:30px;
text-indent:-9999em;
}
header #wrap nav{
display:none;
position:absolute;
z-index:9999;
width: 100%;
background-color: rgba(12,59,75,0.95);
left: 0;
top:45px;
}

/*更新ボタン*/
#refresh{
display: block;
position:absolute;
width: 22px;
height: 22px;
left:12px;
top:12px;
}

#refresh img{
width:22px;
}

/*開閉ボタン*/
#nav_toggle{
display: block;
width: 18px;
height: 18px;
float:right;
}
#nav_toggle span{
display: block;
height: 3px;
background: #fff;
position:absolute;
width: 18px;
margin:15px 15px 0 0;
right:0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav_toggle span:nth-child(1){
top:0px;
}
#nav_toggle span:nth-child(2){
top:6px;
}
#nav_toggle span:nth-child(3){
top:12px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 100%;
}
.open #nav_toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
main{
width:96%;
margin:2% 2% 0 2%;
}
#main-contents{
height:100%;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:100%; line-height:1.1em!important; text-align:center;}

#create {display:none;}

}

/*-------------------------------------------------*/



/*TB版たてレイアウト*/
@media screen and (min-width:481px) and ( max-width:780px){
body {
background:url(../images/top-image01-tb.jpg)left top no-repeat #111;
background-size:100%;
background-attachment: fixed;
font-size:80%;
}
#contentspage nav ul li a{display:block;padding:10px 15px 10px 35px; color:#FFF; line-height:175%;}
/*icon-images*/
#contentspage nav ul li.home{background:url(../svgicon/home.svg)10px center no-repeat; background-size:18px;}
#contentspage nav ul li.output-analysis{background:url(../svgicon/output-analysis.svg)10px center no-repeat; background-size:18px;}
#contentspage nav ul li.questions{background:url(../svgicon/questions.svg)10px center no-repeat; background-size:18px;}
#contentspage nav ul li.words{background:url(../svgicon/words.svg)10px center no-repeat; background-size:18px;}
#contentspage nav ul li.faq{background:url(../svgicon/faq.svg)10px center no-repeat; background-size:18px;}
#contentspage nav ul li.information{background:url(../svgicon/information.svg)10px center no-repeat; background-size:18px;}

header{
width:100%;
height:35px;
padding:10px 0 0 0;
background-color: rgba(12,59,75,0.85);
color:#FFF;
}
header h1{
background:url(../images/logo.png)left top no-repeat;
background-size:100%;
width:195px;
height:30px;
margin:0 auto;
}
header h1 a{
display:block;
width:195px;
height:30px;
text-indent:-9999em;
}
header #wrap nav{
display:none;
position:absolute;
z-index:9999;
width: 100%;
background-color: rgba(12,59,75,0.95);
left: 0;
top:45px;
}

/*更新ボタン*/
#refresh{
display: block;
position:absolute;
width: 22px;
height: 22px;
left:12px;
top:12px;
}

#refresh img{
width:22px;
}

/*開閉ボタン*/
#nav_toggle{
display: block;
width: 18px;
height: 18px;
float:right;
}
#nav_toggle span{
display: block;
height: 3px;
background: #fff;
position:absolute;
width: 18px;
margin:15px 15px 0 0;
right:0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav_toggle span:nth-child(1){
top:0px;
}
#nav_toggle span:nth-child(2){
top:6px;
}
#nav_toggle span:nth-child(3){
top:12px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 100%;
}
.open #nav_toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
main{
width:96%;
margin:2% 2% 0 2%;
}
#main-contents{
height:100%;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:90%; line-height:1.1em!important; text-align:center;}

#create {display:none;}

}

/*-------------------------------------------------*/


/*スマホ版レイアウト*/
@media screen and (max-width:480px){

body {
background:url(../images/top-image01-sp.jpg)left top no-repeat #111;
background-size:100%;
background-attachment: fixed;
font-size:65%;
}
#contentspage nav ul li a{display:block;padding:10px 15px 10px 32px; color:#FFF; line-height:175%;}
/*icon-images*/
#contentspage nav ul li.home{background:url(../svgicon/home.svg)10px center no-repeat; background-size:16px;}
#contentspage nav ul li.output-analysis{background:url(../svgicon/output-analysis.svg)10px center no-repeat; background-size:16px;}
#contentspage nav ul li.questions{background:url(../svgicon/questions.svg)10px center no-repeat; background-size:16px;}
#contentspage nav ul li.words{background:url(../svgicon/words.svg)10px center no-repeat; background-size:16px;}
#contentspage nav ul li.faq{background:url(../svgicon/faq.svg)10px center no-repeat; background-size:16px;}
#contentspage nav ul li.information{background:url(../svgicon/information.svg)10px center no-repeat; background-size:16px;}

header{
width:100%;
height:30px;
padding:15px 0 0 0;
background-color: rgba(12,59,75,0.85);
color:#FFF;
}
header h1{
background:url(../images/logo.png)left top no-repeat;
background-size:100%;
width:130px;
height:20px;
margin:0 auto;
}
header h1 a{
display:block;
width:195px;
height:30px;
text-indent:-9999em;
}
header #wrap nav{
display:none;
position:absolute;
z-index:9999;
width: 100%;
background-color: rgba(12,59,75,0.95);
left: 0;
top:45px;
}

/*更新ボタン*/
#refresh{
display: block;
position:absolute;
width: 22px;
height: 22px;
left:12px;
top:12px;
}

#refresh img{
width:22px;
}

/*開閉ボタン*/
#nav_toggle{
display: block;
width: 18px;
height: 18px;
float:right;
}
#nav_toggle span{
display: block;
height: 3px;
background: #fff;
position:absolute;
width: 18px;
margin:15px 15px 0 0;
right:0;
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
}
#nav_toggle span:nth-child(1){
top:0px;
}
#nav_toggle span:nth-child(2){
top:6px;
}
#nav_toggle span:nth-child(3){
top:12px;
}

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
top: 6px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.open #nav_toggle span:nth-child(2) {
width: 0;
left: 100%;
}
.open #nav_toggle span:nth-child(3) {
top: 6px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
transform: rotate(-135deg);
}
main{
width:96%;
margin:2% 2% 0 2%;
}
#main-contents{
height:100%;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:90%; line-height:1.1em!important; text-align:center;}

#create {display:none;}

}