@charset "utf-8";

/*イメージング画像*/
/*PC版*/
@media screen and (min-width:1025px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:150px;
height:20px;
padding:130px 0 0 0;
margin:50px auto 120px auto;
border-radius: 75px / 75px;
}

.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p{
width:250%;
margin:30px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 30px 30px;
padding:0 0 0 10px;
border-left:8px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 20px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:32.5%;
font-size:75%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

}
/*TB版よこ*/
@media screen and (min-width:781px) and ( max-width:1024px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 90px auto;
border-radius: 60px / 60px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 90px auto;
border-radius: 60px / 60px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 90px auto;
border-radius: 60px / 60px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 90px auto;
border-radius: 60px / 60px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 20px 30px;
padding:0 0 0 8px;
border-left:8px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 15px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:100%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:150px;
height:0px;
padding:150px 0 0 0;
margin:30px auto;
border-radius: 75px / 75px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

}
/*TB版たて*/
@media screen and (min-width:481px) and ( max-width:780px){

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:120px;
height:10px;
padding:110px 0 0 0;
margin:50px auto 80px auto;
border-radius: 60px / 60px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:80px 80px;
padding:90px 0 0 0;
margin:50px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 15px 30px;
padding:0 0 0 8px;
border-left:6px solid rgba(12,59,75,1);
}
article p{
margin:0 45px 10px 45px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 20px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:130px;
height:0px;
padding:130px 0 0 0;
margin:30px auto;
border-radius: 65px / 65px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
}

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

.headline-image01{
background:url(images/contents01.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 70px auto;
border-radius: 50px / 50px;
}
.headline-image02{
background:url(images/contents02.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 70px auto;
border-radius: 50px / 50px;
}
.headline-image03{
background:url(images/contents03.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 70px auto;
border-radius: 50px / 50px;
}
.headline-image04{
background:url(images/contents04.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 70px auto;
border-radius: 50px / 50px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_output-analysis.svg)center top no-repeat;
background-size:60px 60px;
padding:70px 0 0 0;
margin:40px 0;
}
#introduction p{
text-align:center;
font-weight:bold;
}

article h3{
margin:0 0 10px 15px;
padding:0 0 0 7px;
border-left:5px solid rgba(12,59,75,1);
}
article p{
margin:0 27px 10px 27px;
line-height:1.8em;
}
article p a{
color:rgba(12,59,75,1);
}
#contents-link{
padding:0 0 30px 0;
}
#contents-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#contents-link li.contents01 a{
background:url(images/contents01.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents02 a{
background:url(images/contents02.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents03 a{
background:url(images/contents03.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents04 a{
background:url(images/contents04.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents05 a{
background:url(images/contents05.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li.contents06 a{
background:url(images/contents06.jpg)left top no-repeat #DDD;
background-size:100% 100%;
display:block;
width:120px;
height:0px;
padding:120px 0 0 0;
margin:23px auto;
border-radius: 60px / 60px;
color:rgba(12,59,75,1);
}
#contents-link li p{
font-size:90%;
line-height:135%;
text-align:center;
margin:0 10px -10px;
}

}

span.notice{color:#FF4444; font-weight:bold;}


@media screen and (min-width:1025px){
h3{margin-top:25px!important;}
.lecture {padding:0 0 15px 0; background:url(images/allow.png)center bottom no-repeat;}
.lecture-last {padding:0; background:none;}
.comment h4{padding:55px 0;text-align:center; color:rgba(12,59,75,1); font-size:150%;}
a.buttons{display:block; font-size:100%; font-weight:bold; width:80%; line-height:280%; color:#FFF; text-align:center; margin:0 10% 30px 10%; background-color:rgba(12,59,75,1); border-radius: 5px / 5px;}
ul.contents{margin:0 45px 30px 45px;}
ol{margin:0 45px 30px 45px;}
li{line-height:170%}
ul.contents li a{color:rgba(12,59,75,1);}
.movepage,.movepagefull {margin:0 27px 40px 27px; padding:0 0 40px 0; border-bottom:3px dotted #BBB;}
.movepage a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:39%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
.movepagefull a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:89%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
h4{margin:10px 45px 10px 45px; font-size:120%;}
h5{margin:7px 45px 5px 45px; font-size:100%; color:rgba(12,59,75,1);}
form{margin:0 27px 20px 27px;}
form label{color:#FFF; font-weight:bold; text-decoration:underline; display:inline-block; background-color:rgba(12,59,75,1); width:89%; margin:0 0 10px 0; padding:10px 5%; text-align:center; border-radius:8px/8px; cursor:pointer;}
form label input{display:none;}
}

@media screen and (min-width:781px) and ( max-width:1024px){
h3{margin-top:25px!important;}
.lecture {padding:0 0 15px 0; background:url(images/allow.png)center bottom no-repeat;}
.lecture-last {padding:0; background:none;}
.comment h4{padding:35px 0;text-align:center; color:rgba(12,59,75,1); font-size:150%;}
a.buttons{display:block; font-size:100%; font-weight:bold; width:80%; line-height:280%; color:#FFF; text-align:center; margin:0 10% 30px 10%; background-color:rgba(12,59,75,1); border-radius: 5px / 5px;}
ul.contents{margin:0 45px 30px 45px;}
ol{margin:0 45px 30px 45px;}
li{line-height:170%}
ul.contents li a{color:rgba(12,59,75,1);}
.movepage,.movepagefull {margin:0 27px 40px 27px; padding:0 0 40px 0; border-bottom:3px dotted #BBB;}
.movepage a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:39%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
.movepagefull a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:89%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
h4{margin:10px 45px 10px 45px; font-size:120%;}
h5{margin:7px 45px 5px 45px; font-size:100%; color:rgba(12,59,75,1);}
form{margin:0 27px 15px 27px;}
form label{color:#FFF; font-weight:bold; text-decoration:underline; display:inline-block; background-color:rgba(12,59,75,1); width:89%; margin:0 0 10px 0; padding:10px 5%; text-align:center; border-radius:8px/8px; cursor:pointer;}
form label input{display:none;}
}

@media screen and (min-width:481px) and ( max-width:780px){
h3{margin-top:25px!important;}
.lecture {padding:0 0 15px 0; background:url(images/allow.png)center bottom no-repeat;}
.lecture-last {padding:0; background:none;}
.lecture img,.lecture-last img{width:100%;}
.comment h4{padding:30px 0;text-align:center; color:rgba(12,59,75,1); font-size:150%;}
a.buttons{display:block; font-size:100%; font-weight:bold; width:80%; line-height:280%; color:#FFF; text-align:center; margin:0 10% 30px 10%; background-color:rgba(12,59,75,1); border-radius: 5px / 5px;}
ul.contents{margin:0 45px 30px 45px;}
ol{margin:0 45px 30px 45px;}
li{line-height:170%}
ul.contents li a{color:rgba(12,59,75,1);}
.movepage,.movepagefull {margin:0 27px 40px 27px; padding:0 0 40px 0; border-bottom:3px dotted #BBB;}
.movepage a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:39%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
.movepagefull a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:89%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
h4{margin:10px 45px 10px 45px; font-size:120%;}
h5{margin:7px 45px 5px 45px; font-size:100%; color:rgba(12,59,75,1);}
form{margin:0 27px 15px 27px;}
form label{color:#FFF; font-weight:bold; text-decoration:underline; display:inline-block; background-color:rgba(12,59,75,1); width:89%; margin:0 0 10px 0; padding:10px 5%; text-align:center; border-radius:8px/8px; cursor:pointer;}
form label input{display:none;}
}

@media screen and (max-width:480px){
h3{margin-top:25px!important;}
.lecture {padding:0 0 15px 0; background:url(images/allow.png)center bottom no-repeat;}
.lecture-last {padding:0; background:none;}
.lecture img,.lecture-last img{width:100%;}
.comment h4{padding:20px 0;text-align:center; color:rgba(12,59,75,1); font-size:150%;}
a.buttons{display:block; font-size:100%; font-weight:bold; width:80%; line-height:280%; color:#FFF; text-align:center; margin:0 10% 30px 10%; background-color:rgba(12,59,75,1); border-radius: 5px / 5px;}
ul.contents{margin:0 27px 30px 27px;}
ol{margin:0 27px 30px 27px;}
li{line-height:170%}
ul.contents li a{color:rgba(12,59,75,1);}
.movepage,.movepagefull {margin:0 27px 40px 27px; padding:0 0 40px 0; border-bottom:3px dotted #BBB;}
.movepage a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:38%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
.movepagefull a{color:#FFF; display:inline-block; background-color:rgba(12,59,75,1); width:89%; padding:10px 5%; text-align:center; border-radius:8px/8px;}
h4{margin:10px 27px 10px 27px; font-size:120%;}
h5{margin:7px 27px 5px 27px; font-size:100%; color:rgba(12,59,75,1);}
form{margin:0 27px 15px 27px;}
form label{color:#FFF; font-weight:bold; text-decoration:underline; display:inline-block; background-color:rgba(12,59,75,1); width:89%; margin:0 0 10px 0; padding:10px 5%; text-align:center; border-radius:8px/8px; cursor:pointer;}
form label input{display:none;}
}

/*共通*/
.navi-margin {margin:0 27px 40px 27px!important; padding:0 0 40px 0!important; border-bottom:3px dotted #BBB!important;}