@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-image05{
background:url(images/contents05.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,
.headline-image05 p{
width:250%;
margin:30px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_words.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:25px 0 20px 30px;
padding:0 0 0 10px;
border-left:8px solid rgba(12,59,75,1);
}
article h4{
margin:0 45px 20px 45px;
}
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.contents07 a{
background:url(images/contents07.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.contents08 a{
background:url(images/contents08.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.contents09 a{
background:url(images/contents09.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.contents10 a{
background:url(images/contents10.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.contents11 a{
background:url(images/contents11.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;
}

#tag-link{
padding:0 0 20px 0;
}
#tag-link li {
display:inline-block;
vertical-align:top;
width:32.5%;
font-size:75%;
line-height:160%;
text-align:center;
}
#tag-link li.contents01 a{
background:url(images/contents12.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);
}
#tag-link li.contents02 a{
background:url(images/contents13.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);
}
#tag-link li.contents03 a{
background:url(images/contents14.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);
}
#tag-link li.contents04 a{
background:url(images/contents15.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);
}
#tag-link li.contents05 a{
background:url(images/contents16.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);
}
#tag-link li.contents06 a{
background:url(images/contents17.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);
}
#tag-link li.contents07 a{
background:url(images/contents18.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);
}
#tag-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 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-image05{
background:url(images/contents05.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,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_words.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:25px 0 20px 30px;
padding:0 0 0 8px;
border-left:8px solid rgba(12,59,75,1);
}
article h4{
margin:0 45px 15px 45px;
}
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.contents07 a{
background:url(images/contents07.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.contents08 a{
background:url(images/contents08.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.contents09 a{
background:url(images/contents09.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.contents10 a{
background:url(images/contents10.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.contents11 a{
background:url(images/contents11.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;
}

#tag-link{
padding:0 0 20px 0;
}
#tag-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:100%;
line-height:160%;
text-align:center;
}
#tag-link li.contents01 a{
background:url(images/contents12.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);
}
#tag-link li.contents02 a{
background:url(images/contents13.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);
}
#tag-link li.contents03 a{
background:url(images/contents14.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);
}
#tag-link li.contents04 a{
background:url(images/contents15.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);
}
#tag-link li.contents05 a{
background:url(images/contents16.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);
}
#tag-link li.contents06 a{
background:url(images/contents17.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);
}
#tag-link li.contents07 a{
background:url(images/contents18.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);
}
#tag-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-image05{
background:url(images/contents05.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,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_words.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:20px 0 15px 30px;
padding:0 0 0 8px;
border-left:6px solid rgba(12,59,75,1);
}
article h4{
margin:0 45px 10px 45px;
}
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.contents07 a{
background:url(images/contents07.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.contents08 a{
background:url(images/contents08.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.contents09 a{
background:url(images/contents09.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.contents10 a{
background:url(images/contents10.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.contents11 a{
background:url(images/contents11.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;
}

#tag-link{
padding:0 0 20px 0;
}
#tag-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#tag-link li.contents01 a{
background:url(images/contents12.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);
}
#tag-link li.contents02 a{
background:url(images/contents13.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);
}
#tag-link li.contents03 a{
background:url(images/contents14.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);
}
#tag-link li.contents04 a{
background:url(images/contents15.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);
}
#tag-link li.contents05 a{
background:url(images/contents16.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);
}
#tag-link li.contents06 a{
background:url(images/contents17.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);
}
#tag-link li.contents07 a{
background:url(images/contents18.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);
}
#tag-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 80px 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 80px 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 80px 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 80px auto;
border-radius: 50px / 50px;
}
.headline-image05{
background:url(images/contents05.jpg)left top no-repeat #111;
background-size:100%;
display:block;
width:90px;
height:10px;
padding:80px 0 0 0;
margin:40px auto 80px auto;
border-radius: 50px / 50px;
}
.headline-image01 p,
.headline-image02 p,
.headline-image03 p,
.headline-image04 p,
.headline-image05 p{
width:250%;
margin:15px -75%;
text-align:center;
font-size:125%;
line-height:145%;
font-weight:bold;
}

#introduction {
background:url(../common/svgicon/bk_words.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:20px 0 10px 15px;
padding:0 0 0 7px;
border-left:5px solid rgba(12,59,75,1);
}
article h4{
margin:0 27px 10px 27px;
}
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.contents07 a{
background:url(images/contents07.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.contents08 a{
background:url(images/contents08.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.contents09 a{
background:url(images/contents09.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.contents10 a{
background:url(images/contents10.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.contents11 a{
background:url(images/contents11.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;
}

#tag-link{
padding:0 0 30px 0;
}
#tag-link li {
display:inline-block;
vertical-align:top;
width:49%;
font-size:90%;
line-height:160%;
text-align:center;
}
#tag-link li.contents01 a{
background:url(images/contents12.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);
}
#tag-link li.contents02 a{
background:url(images/contents13.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);
}
#tag-link li.contents03 a{
background:url(images/contents14.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);
}
#tag-link li.contents04 a{
background:url(images/contents15.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);
}
#tag-link li.contents05 a{
background:url(images/contents16.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);
}
#tag-link li.contents06 a{
background:url(images/contents17.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);
}
#tag-link li.contents07 a{
background:url(images/contents18.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);
}
#tag-link li p{
font-size:90%;
line-height:135%;
text-align:center;
margin:0 10px -10px;
}


}


/*wordscontainer*/

@charset "utf-8";

.accordion-container {
position: relative;
width: 100%;
border-top: none;
outline: 0;
}

.accordion-container .article-title {
display: block;
position: relative;
margin: 10px 6%;
padding:0.75em 3.5em 0.75em 1.25em;
font-size: 115%;
font-weight: bold;
background:  rgba(12,59,75,1);
color: #FFF;
cursor: pointer;
border-radius: 5px / 5px;
}

.accordion-container .article-title:hover,
.accordion-container .article-title:active,
.accordion-container .content-entry.open .article-title {
background-color: #E0DAC5;
color: #111;
}

.accordion-container .article-title:hover i:before,
.accordion-container .article-title:hover i:active,
.accordion-container .content-entry.open i {
color: #111;
}

.article-title{
position: relative;
}

.article-title a{
color:#FFF;
}

.article-title:after {
content: "";
position: absolute;
right: 25px;
top: 32%;
transition: all 0.2s ease-in-out;
display: block;
width: 8px;
height: 8px;
border-top: solid 2px #FFF;
border-right: solid 2px #FFF;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}

.article-title.open:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 45%;
}

.accordion-content {
margin: 10px 6%;
padding:0 1.25em 0.75em 1.25em;
font-size: 100%;
display: none;
cursor: auto;
}
.accordion-content p{
margin:0 0 10px 0!important;
}

/* CSS for CodePen */
.accordion-container {
width: 100%;
margin: 1.875em auto;
}


.accordion-content h4 {
font-size:125%;
margin:20px 0 10px 0;
}





@media screen and (min-width:1025px){
ul.contents,
ul.popular,
ul.relation{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
ul.popular li{background:url(../common/svgicon/bk_words.svg)left 4px no-repeat;
background-size:15px 15px; font-size:80%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.popular li a{font-size:110%; font-weight:bold; color:rgba(12,59,75,1);}
ul.question{margin:30px 0 30px 0;}
ul.question li,
ul.relation li{background:url(../common/svgicon/bk_words.svg)left 4px no-repeat;
background-size:15px 15px; font-size:100%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.tag-contents{margin:0 15px 30px 15px;}
ul.tag-contents li{float:left; margin:0 15px 0 0}
ul.tag-contents li a{display:block; padding:7px 10px; background-color:rgba(12,59,75,0.85); color:#FFF; border-radius: 10px / 10px; font-size:80%;}
.graphscroll p img{width:100%;}
.headlinecontents{background:url(images/bg-images.jpg)left top no-repeat; background-size:100%; position:relative; width:900px; height:280px; margin:0 auto;}
.headlinecontents p{position:absolute; top:100px; display:block; text-align:center; width:100%; font-size:200%; font-weight:bold;}

article dl{margin:0 45px 20px 45px; line-height:1.8em;}
article dl dt{font-weight:bold; display:inline-block; width:calc(40% - 30px); font-size:120%; background:#FCFFCC; border-bottom:1px solid #CCC;  border-right:1px solid #CCC; padding:15px;}
article dl dd{font-weight:bold; display:inline-block; width:calc(59% - 30px); font-size:180%; color:#FFC400; padding:15px; margin:0; border-bottom:1px solid #CCC;}

}

@media screen and (min-width:781px) and ( max-width:1024px){
ul.contents,
ul.popular,
ul.relation{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
ul.popular li{background:url(../common/svgicon/bk_words.svg)left 3px no-repeat;
background-size:15px 15px; font-size:90%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.popular li a{font-size:120%; font-weight:bold; color:rgba(12,59,75,1);}
ul.question{margin:30px 0 30px 0;}
ul.question li,
ul.relation li{background:url(../common/svgicon/bk_words.svg)left 3px no-repeat;
background-size:15px 15px; font-size:100%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.tag-contents{margin:0 15px 30px 15px;}
ul.tag-contents li{float:left; margin:0 15px 0 0}
ul.tag-contents li a{display:block; padding:7px 10px; background-color:rgba(12,59,75,0.85); color:#FFF; border-radius: 10px / 10px; font-size:90%;}
.graphscroll p{overflow-x:scroll; display:block;}
.headlinecontents{background:url(images/bg-images.jpg)left top no-repeat; background-size:100%; position:relative; width:720px; height:220px; margin:0 auto;}
.headlinecontents p{position:absolute; top:80px; display:block; text-align:center; width:100%; font-size:200%; font-weight:bold;}
article dl{margin:0 45px 20px 45px; line-height:1.8em;}
article dl dt{font-weight:bold; display:inline-block; width:calc(40% - 30px); font-size:120%; background:#FCFFCC; border-bottom:1px solid #CCC;  border-right:1px solid #CCC; padding:15px;}
article dl dd{font-weight:bold; display:inline-block; width:calc(59% - 30px); font-size:175%; color:#FFC400; padding:15px; margin:0; border-bottom:1px solid #CCC;}


}

@media screen and (min-width:481px) and ( max-width:780px){
ul.contents,
ul.popular,
ul.relation{margin:0 45px 30px 45px;}
ul.contents li a{color:rgba(12,59,75,1);}
ul.popular li{background:url(../common/svgicon/bk_words.svg)left 2px no-repeat;
background-size:15px 15px; font-size:90%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.popular li a{font-size:120%; font-weight:bold; color:rgba(12,59,75,1);}
ul.question{margin:30px 0 30px 0;}
ul.question li,
ul.relation li{background:url(../common/svgicon/bk_words.svg)left 2px no-repeat;
background-size:15px 15px; font-size:100%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.tag-contents{margin:0 15px 30px 15px;}
ul.tag-contents li{float:left; margin:0 13px 0 0}
ul.tag-contents li a{display:block; padding:7px 10px; background-color:rgba(12,59,75,0.85); color:#FFF; border-radius: 10px / 10px; font-size:90%;}
.graphscroll p{overflow-x:scroll; display:block;}
.headlinecontents{background:url(images/bg-images.jpg)left top no-repeat; background-size:100%; position:relative; width:calc(100% - 80px); height:140px; margin:0 40px;}
.headlinecontents p{position:absolute; top:35%; display:block; text-align:center; width:calc(100% - 80px); font-size:160%; font-weight:bold;}
article dl{margin:0 45px 20px 45px; line-height:1.8em;}
article dl dt{font-weight:bold; display:inline-block; width:calc(40% - 30px); font-size:110%; background:#FCFFCC; border-bottom:1px solid #CCC;  border-right:1px solid #CCC; padding:15px;}
article dl dd{font-weight:bold; display:inline-block; width:calc(58% - 30px); font-size:150%; color:#FFC400; padding:15px; margin:0; border-bottom:1px solid #CCC;}



}

@media screen and (max-width:480px){
ul.contents,
ul.popular,
ul.relation{margin:0 27px 30px 27px;}
ul.contents li a{color:rgba(12,59,75,1);}
ul.popular li{background:url(../common/svgicon/bk_words.svg)left 2px no-repeat;
background-size:15px 15px; font-size:90%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.popular li a{font-size:120%; font-weight:bold; color:rgba(12,59,75,1);}
ul.question{margin:20px 0 30px 0;}
ul.question li,
ul.relation li{background:url(../common/svgicon/bk_words.svg)left 2px no-repeat;
background-size:15px 15px; font-size:100%; padding:0 0 0 20px; margin:0 0 10px 0;}
ul.tag-contents{margin:0 15px 30px 15px;}
ul.tag-contents li{float:left; margin:0 10px 0 0}
ul.tag-contents li a{display:block; padding:7px 10px; background-color:rgba(12,59,75,0.85); color:#FFF; border-radius: 10px / 10px; font-size:90%;}

.graphscroll p{overflow-x:scroll; display:block;}
.headlinecontents{background:url(images/bg-images.jpg)left top no-repeat; background-size:100%; position:relative; width:calc(100% - 40px); height:100px; margin:0 20px;}
.headlinecontents p{position:absolute; top:40%; display:block; text-align:center; width:calc(100% - 40px); font-size:130%; font-weight:bold;}
article dl{margin:0 27px 20px 27px; line-height:1.8em;}
article dl dt{font-weight:bold; display:inline-block; width:calc(40% - 30px); font-size:90%; background:#FCFFCC; border-bottom:1px solid #CCC;  border-right:1px solid #CCC; padding:15px;}
article dl dd{font-weight:bold; display:inline-block; width:calc(58% - 30px); font-size:140%; color:#FFC400; padding:15px; margin:0; border-bottom:1px solid #CCC;}



}



.true{font-weight:bold; color:#FF2232;}