@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:140%; padding:0 0 7px 0; border-bottom:1px solid #333333; margin:0 0 20px 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;}

article div.adcontents {margin:10px 30px 30px 30px!important;}

#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;}

main h1{
background-color: rgba(12,59,75,0.85);
border-radius: 5px / 5px;
font-size:150%;
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;
}

#wrap {
width:1020px;
margin:0 auto;
}

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{
display: block;
position:absolute;
width: 27px;
height: 27px;
right:0px;
top:0px;
}

#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:65vh;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
overflow-x: hidden;
overflow-y: scroll;
}
#main-contents article{padding:25px;}
article #relation li a{font-size:100%; text-align:center;}

#other-contents{margin-top:70px;}

a.backbutton,
a.morelink{
display:block;
width:86%;
margin:0 7% 50px 7%;
padding:10px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background-color:rgba(12,59,75,1);
border-radius:8px/8px;
}

#category-link{
padding:0 0 20px 0;
}
#category-link li {
display:inline-block;
vertical-align:top;
width:24.5%;
font-size:75%;
line-height:160%;
text-align:center;
}
#category-link li.contents01 a{
background:url(../svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents02 a{
background:url(../svgicon/bk_questions.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents03 a{
background:url(../svgicon/bk_words.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents04 a{
background:url(../svgicon/bk_faq.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents05 a{
background:url(../svgicon/bk_information.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents06 a{
background:url(../svgicon/bk_news.svg)center top no-repeat;
background-size:70px 70px;
display:block;
width:150px;
height:0px;
padding:90px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}


.socialstyle{
width:900px;
height:425px;
margin:0 auto 40px auto;
position:relative;
background:url(../images/ssbg.jpg)no-repeat;
background-size:100%;
border-radius:25px;
}

.socialstyle strong{
display:block;
text-align:center;
width:600px;
font-size:220%;
font-weight:bold;
line-height:1.1em;
color:#FFF;
text-shadow: 0 0 10px #0c3b4b;
position:absolute;
left:150px;
top:50px;
}

.socialstyle p{
display:block;
width:730px;
position:absolute;
color:#FFF;
text-shadow: 0 0 6px #0c3b4b;
font-weight:bold;
left:40px;
top:170px;
}

.socialstyle a{
text-decoration:none;
display:block; width:600px; padding:20px 0px; text-align:center; border-radius:30px; margin:0 auto; font-size:140%; color:#FFF; font-weight:bold; text-shadow: 0 0 3px #0c3b4b; position:absolute;
background-image:radial-gradient(at 0% -75%, #59ff9f, transparent),radial-gradient(at 100% -75%, #2e95ff, transparent),radial-gradient(at 100% 75%, #ff1111, transparent),radial-gradient(at 25% 60%, #ffff1c, transparent); box-shadow: 0 0 8px #222; border:0;
left:180px;
top:300px;
}
.socialstyle a:hover{
opacity:0.7;
}


}

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



/*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{
display: block;
position:absolute;
width: 18px;
height: 18px;
right:0px;
top:0px;
}
#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:67vh;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
overflow-x: hidden;
overflow-y: scroll;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:100%; line-height:1.1em!important; text-align:center;}

#other-contents{margin-top:60px;}

a.backbutton,
a.morelink{
display:block;
width:86%;
margin:0 7% 50px 7%;
padding:10px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background-color:rgba(12,59,75,1);
border-radius:8px/8px;
}

#category-link{
padding:0 0 20px 0;
}
#category-link li {
display:inline-block;
vertical-align:top;
width:32.5%;
font-size:100%;
line-height:160%;
text-align:center;
}
#category-link li.contents01 a{
background:url(../svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents02 a{
background:url(../svgicon/bk_questions.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents03 a{
background:url(../svgicon/bk_words.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents04 a{
background:url(../svgicon/bk_faq.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents05 a{
background:url(../svgicon/bk_information.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents06 a{
background:url(../svgicon/bk_news.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:150px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

.socialstyle{
width:900px;
height:425px;
margin:0 auto 40px auto;
position:relative;
background:url(../images/ssbg.jpg)no-repeat;
background-size:100%;
border-radius:25px;
}

.socialstyle strong{
display:block;
text-align:center;
width:600px;
font-size:320%;
font-weight:bold;
line-height:1.1em;
color:#FFF;
text-shadow: 0 0 10px #0c3b4b;
position:absolute;
left:150px;
top:50px;
}

.socialstyle p{
display:block;
width:730px;
position:absolute;
font-size:130%;
color:#FFF;
text-shadow: 0 0 6px #0c3b4b;
font-weight:bold;
left:40px;
top:170px;
}

.socialstyle a{
text-decoration:none;
display:block; width:600px; padding:24px 0px; text-align:center; border-radius:30px; margin:0 auto; font-size:170%; color:#FFF; font-weight:bold; text-shadow: 0 0 3px #0c3b4b; position:absolute;
background-image:radial-gradient(at 0% -75%, #59ff9f, transparent),radial-gradient(at 100% -75%, #2e95ff, transparent),radial-gradient(at 100% 75%, #ff1111, transparent),radial-gradient(at 25% 60%, #ffff1c, transparent); box-shadow: 0 0 8px #222; border:0;
left:180px;
top:300px;
}
.socialstyle a:hover{
opacity:0.7;
}

}

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



/*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{
display: block;
position:absolute;
width: 18px;
height: 18px;
right:0px;
top:0px;
}
#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:74vh;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
overflow-x: hidden;
overflow-y: scroll;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:90%; line-height:1.1em!important; text-align:center;}

#other-contents{margin-top:50px;}

a.backbutton,
a.morelink{
display:block;
width:86%;
margin:0 7% 40px 7%;
padding:10px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background-color:rgba(12,59,75,1);
border-radius:8px/8px;
}

#category-link{
padding:0 0 20px 0;
}
#category-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#category-link li.contents01 a{
background:url(../svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents02 a{
background:url(../svgicon/bk_questions.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents03 a{
background:url(../svgicon/bk_words.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents04 a{
background:url(../svgicon/bk_faq.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents05 a{
background:url(../svgicon/bk_information.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents06 a{
background:url(../svgicon/bk_news.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:130px;
height:0px;
padding:80px 0 0 0;
margin:30px auto;
color:rgba(12,59,75,1);
}
#category-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

.socialstyle{
width:680px;
height:320px;
margin:0 auto 40px auto;
position:relative;
background:url(../images/ssbg.jpg)no-repeat;
background-size:100%;
border-radius:20px;
}

.socialstyle strong{
display:block;
text-align:center;
width:680px;
font-size:260%;
font-weight:bold;
line-height:1.25em;
color:#FFF;
text-shadow: 0 0 10px #0c3b4b;
position:absolute;
left:0px;
top:30px;
}

.socialstyle p{
display:block;
width:600px;
position:absolute;
font-size:120%;
color:#FFF;
text-shadow: 0 0 6px #0c3b4b;
font-weight:bold;
left:0px;
top:130px;
}

.socialstyle a{
text-decoration:none;
display:block; width:560px; padding:20px 0px; text-align:center; border-radius:30px; margin:0 auto; font-size:180%; color:#FFF; font-weight:bold; text-shadow: 0 0 3px #0c3b4b; position:absolute;
background-image:radial-gradient(at 0% -75%, #59ff9f, transparent),radial-gradient(at 100% -75%, #2e95ff, transparent),radial-gradient(at 100% 75%, #ff1111, transparent),radial-gradient(at 25% 60%, #ffff1c, transparent); box-shadow: 0 0 8px #222; border:0;
left:60px;
top:230px;
}
.socialstyle a:hover{
opacity:0.7;
}




}

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


/*スマホ版レイアウト*/
@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:75%;
}
#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{
display: block;
position:absolute;
width: 18px;
height: 18px;
right:0px;
top:0px;
}
#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:67vh;
background-color: rgba(255,255,255,0.93);
border-radius: 5px / 5px;
overflow-x: hidden;
overflow-y: scroll;
}
#main-contents article{padding:10px;}
article #relation li a{font-size:90%; line-height:1.1em!important; text-align:center;}

#other-contents{margin-top:40px; margin-bottom:0!important;}

a.backbutton,
a.morelink{
display:block;
width:86%;
margin:0 7% 40px 7%;
padding:10px 0;
color:#FFF;
font-weight:bold;
text-align:center;
background-color:rgba(12,59,75,1);
border-radius:8px/8px;
}

#category-link{
padding:0 0 30px 0;
}
#category-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#category-link li.contents01 a{
background:url(../svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents02 a{
background:url(../svgicon/bk_questions.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents03 a{
background:url(../svgicon/bk_words.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents04 a{
background:url(../svgicon/bk_faq.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents05 a{
background:url(../svgicon/bk_information.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li.contents06 a{
background:url(../svgicon/bk_news.svg)center top no-repeat;
background-size:60px 60px;
display:block;
width:120px;
height:0px;
padding:70px 0 0 0;
margin:23px auto;
color:rgba(12,59,75,1);
}
#category-link li p{
font-size:90%;
line-height:135%;
text-align:center;
margin:0 10px -10px;
}


.socialstyle{
width:400px;
height:520px;
margin:30px auto;
position:relative;
background:url(../images/ssbg-sp.jpg)no-repeat;
background-size:100%;
border-radius:20px;
}

.socialstyle strong{
display:block;
text-align:center;
width:400px;
font-size:280%;
font-weight:bold;
line-height:1.4em;
color:#FFF;
text-shadow: 0 0 10px #0c3b4b;
position:absolute;
left:0px;
top:50px;
}

.socialstyle p{
display:block;
width:340px;
position:absolute;
text-align:center;
font-size:110%;
line-height:2.1em;
color:#FFF;
text-shadow: 0 0 6px #0c3b4b;
font-weight:bold;
left:0;
top:180px;
}

.socialstyle a{
text-decoration:none;
display:block; width:340px; letter-spacing:-0.04em; padding:20px 0px; text-align:center; border-radius:30px; margin:0 auto; font-size:150%; color:#FFF; font-weight:bold; text-shadow: 0 0 3px #0c3b4b; position:absolute;
background-image:radial-gradient(at 0% -75%, #59ff9f, transparent),radial-gradient(at 100% -75%, #2e95ff, transparent),radial-gradient(at 100% 75%, #ff1111, transparent),radial-gradient(at 25% 60%, #ffff1c, transparent); box-shadow: 0 0 8px #222; border:0;
left:30px;
top:380px;
}
.socialstyle a:hover{
opacity:0.7;
}



}