@charset "UTF-8";

.sp-none {
display: none !important;
}

#container {
padding: 10px;
line-height: 1.7;
background: url(/10-8/images/bg-sora.jpg) no-repeat 50% 50%;
background-size: auto 100%;
}

#container-wrap-wrap {
  display: -webkit-flex; /* Safari */
  display: flex;
  -webkit-flex-direction: column-reverse; /* Safari */
  flex-direction:         column-reverse;
}

#main {
margin-bottom: 40px;
padding: 10px;
background-color: #fff;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

/* ------------------------------------------------ */
#mainVisual {
position: relative;
margin-bottom: 20px;
}

#mainVisual #header {
width: 30%;
margin: 10px auto 0;
}


#mainVisual .kumoA {
position:absolute;
top:5px;
left:5px;
width: 30%;
}

#mainVisual .kumoB {
position:absolute;
bottom:10px;
right:20px;
width: 30%;
}

#mainVisual .btn-menu {
position:absolute;
top: -10px;
right: -10px;
width: 80px;
}

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


/* title
------------------------------------------------ */

#main .title {
margin-bottom: 40px;
}

#main.learning .title {
background:url(/10-8/images/side-learning.jpg) no-repeat 50% 50%;
background-size: cover;
}

#main.quiz .title {
background:url(/10-8/images/top-btn-quiz.jpg) no-repeat 80% 80%;
background-size: cover;
}

#main.contest .title {
background:url(/10-8/images/top-btn-contest.jpg) no-repeat 50% 50%;
background-size: cover;
}

#main.download .title {
background:url(/10-8/images/side-learning.jpg) no-repeat 50% 50%;
background-size: cover;
}

#main .title-wrap {
padding: 30px;
background: rgb(74 74 74 / 50%);
font-size: 2rem;
min-height: 140px;
}

#main .title .target {
display: inline-block;
color: #fff;
margin-top: 10px;
padding: 5px 10px;
border-radius: 10px;
-moz-border-radius:
10px;-webkit-border-radius: 10px;
line-height: 1.5;
font-size: 2.5rem;
}

#main.learning  .title .target {
background: #EF4F64;
}

#main.quiz .title .target {
background: #2DBF28;
}

#main.contest .title .target {
background: #A5C128;
}

#main h1 {
font-size: 3.0rem;
line-height: 1.5;
font-weight: bold;
}

#main h2 {
padding: 5px 45px;
font-size: 2.0rem;
margin-bottom: 20px;
background:url(/10-8/images/mark.gif) no-repeat 0 50%;
background-size: auto 50px;
font-weight: bold;
border-bottom: #E3007F solid 2px;
}

#main h3 {
padding: 0 10px;
font-size: 1.8rem;
margin-bottom: 10px;
font-weight: bold;
border-bottom: #E3007F dotted 1px;
}



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

#side .title {
font-size: 3rem;
}

#side .box {
padding: 10px;
margin-bottom: 40px;
border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-webkit-border-radius: 10px 10px 0 0;
color: #fff;
text-align: center;
color: #fff;
font-size: 2rem;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
}

#side .box img {
display:block;
margin-bottom: 10px;
width: 100%;
height: auto;
}

#side #learning.box {
background: #EF4F64;
}

#side #quiz.box {
background: #2DBF28;
}

#side #seminar.box {
background: #F2A31A;
}

#side #contest.box {
background: #A5C128;
}

#side #outline.box {
background: #C95BD3
}

#side #info.box {
background: #C6AD82;
}

#side #learning.box {
background: #EF4F64;
}

#side #quiz.box {
background: #2DBF28;
}


#side ul li {
border-bottom: 1px dotted #fff;
text-align: center;
}

#side ul li:last-child {
border-bottom: none;
}

#side ul li a {
display: block;
color: #fff;
}

#side ul li a:hover {
background: #fff;
color: #333;
text-decoration: none;
}

#side .button-wide {
margin-bottom: 10px;
}

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

#supporter {
padding: 20px 10px 10px 10px;
background: #00819E;
color: #fff;
}

#supporter a {
color: #fff;
}
/* ------------------------ */

#supporter ul {
margin: 0 10px;
text-align: center;
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

#supporter ul.company {
margin: 0 10px 20px;
  display: -webkit-flex; /* Safari */
  display: flex;

}

#supporter ul li {
margin: 0 10px 20px 10px;
border-bottom: 1px dotted #fff;
}

#supporter ul li:last-child {
border-bottom: none;
}


#supporter ul li a {
display:block;
}

#supporter ul.company li {

margin: 0 0 5px 5px;
border-bottom: none;

}

#supporter ul.company li img {
width: 200px;
}

#supporter .title {
paddgin-top: 10px;
margin-bottom: 10px;
color: #fff;
font-weight: bold;
line-height: 1.5;
font-size: 2.5rem;
text-align: center;
border-top: 1px solid #fff;
//border-bottom: 1px solid #fff;
}

#supporter .title.textC {
padding: 10px 0 0 0;
}


#supporter .title span {
display:block;
font-size: 1.6rem;
font-weight: normal;
}

#supporter .title-l {
margin-bottom: 5px;
color: #fff;
font-weight: bold;
line-height: 1.5;
font-size: 2rem;
}

#supporter .title-l span {
display:block;
font-size: 2rem;
}


#supporter a {
color: #fff;
}

#supporter a:hover {
color: #EF4F64;
text-decoration: none;
}


#supporter ul.media {
margin: 0 0 20px 0;
}


#supporter ul.media li {
margin: 0 20px 0 20px;
}

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

#footer {
padding: 20px 10px 160px 10px;
background: #0062A0;
color: #fff;
text-align: center;
}

#footer a {
color: #fff;
}
/* ------------------------------------------------ */

#main .breadcrumb {
overflow: hidden;
margin-bottom: 10px;
padding: 10px 20px;
color: #fff;
}

#main.learning .breadcrumb {
background: #EF7F8C;
}

#main.quiz .breadcrumb {
background: #2DBF28;
}

#main.contest .breadcrumb {
background: #A5C128;
}

#main.download .breadcrumb {
background: #EF92B6;
}

#main .breadcrumb a {
color: #fff;
}

#main .breadcrumb li {
float: left;
}

#main .breadcrumb li::after {
  display: inline-block;
  content: '\00bb';
  margin: 0 1em;
}

#main .breadcrumb li:last-of-type::after {
  display: none;
}

/* entryBody-common
------------------------------------------------ */
#main .entryBody {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: #E3007F solid 2px;
}


#main .entryBody .fig {
text-align: center;
font-weight: bold;
}
#main .entryBody ul {
list-style: disc;
margin: 0 0 1em 0;
padding: 10px 1em 10px 2em;
background: #F4E07C;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}

#main .entryBody ul.nostyle {
list-style: none;
}



#main .entryBody a:link {
color:#004D77;
text-decoration:underline
}

#main .entryBody a:visited {
color:#004D77;
text-decoration:underline
}

#main .entryBody a:hover {
color:#00A0F7;
text-decoration:underline
}

#main .entryBody a:active {
color:#00A0F7;
text-decoration:underline
}

#main .button-wide.toQuiz {
font-size: 2rem;
}

#main .entryBody .lead {
background: #F9E68E;
font-size: 2rem;
padding: 20px;
}

/* contest
------------------------------------------------ */

#main.contest .title .contest-cat {
background: #A5C128;
color: #fff;
padding: 5px 10px;
border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
}

#main .entryBody .button a:link,
#main .entryBody .button-wide a:link,
#main .entryBody .button a:visited,
#main .entryBody .button-wide a:visited,
#main .entryBody .button a:hover,
#main .entryBody .button-wide a:hover,
#main .entryBody .button a:active,
#main .entryBody .button-wide a:active {
color: #fff;
text-decoration: none;
}

#main .entryBody .button-wide.big {
text-align: left;
font-size: 2rem;
}


.contest dl.price {
font-size: 2rem;
margin: 0 3em 1em;
}

.contest dl.price dt {
font-weight: bold;
}

.contest dl.price dd {
padding-left: 3em;
}

.contest .waku {
margin: 0 2em 1em;
}

.contest ul.dm3min {
list-style: none !important;
}

.contest ul.dm3min li {
margin-left: 1em;
}

.contest ul.dm3min li.midashi {
font-weight: bold;
margin-left: 0;
}


/* quiz
------------------------------------------------ */

#main.quiz .box {
padding: 20px;
}

#main.quiz .box.odd{
background: #74DB6B;
}

#main.quiz .box .question {
margin-bottom: 10px;
font-size: 3rem;
line-height: 1.5;
padding-left: 3.7em;
text-indent: -3.7em;
}

#main.quiz .box .flex {
font-size: 4rem;
line-height: 1;
font-weight: bold;
  display: -webkit-flex; /* Safari */
  display: flex;

  -webkit-justify-content: space-between; /* Safari */
  justify-content:         space-between;

  -webkit-justify-content: center; /* Safari */
  justify-content:         center;
}

#main.quiz .box .flex div {
padding: 10px;
margin: 0 10px 10px;
border:1px solid #a9a9a9;
border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
color: #fff;
cursor: pointer;
}

#main.quiz .box .circle {
background: #89BDDE;
}

#main.quiz .box .circle:hover {
background: #fff;
color: #89BDDE;
}

#main.quiz .box .cross {
background: #E8868F;
}

#main.quiz .box .cross:hover {
background: #fff;
color: #E8868F;
}

#main.quiz .box .triangle {
background: #BEDD89;
}

#main.quiz .box .triangle:hover {
background: #fff;
color: #BEDD89;
}


#main.quiz .box .answer {
font-weight: bold;
margin: 20px 0;
text-align: center;
font-size: 2rem;
//line-height: 1;
background: #F7CA7C;
color: #fff;
}

#main.quiz .box .answer span {
font-size: 6rem;
line-height: 1;
}

#main.quiz .description {
display: none;
}


/* seminar
------------------------------------------------ */

#main.seminar .title {
background:url(/10-8/images/top-btn-seminar-r.jpg) no-repeat 50% 50%;
background-size: cover;
}

#main.seminar .breadcrumb {
background: #F2A31A;
}

#main.seminar dl.seminar-outline {
padding: 10px;
background: #F4E07C;
margin-bottom: 1em;
border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
}

#main.seminar dl.seminar-outline dt {
padding-top: 5px;
border-top: 1px dotted #a9a9a9;
font-weight: bold;
font-size: 2rem;
}

#main.seminar dl.seminar-outline dd {


}


#main.seminar dl.seminar-outline dl {
padding: 10px;
background: #fff;
border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;
}

#main.seminar dl.seminar-outline dl dt {
font-size: 1.6rem;
}

#main.seminar dl.seminar-outline ul {
margin: 0 0 1em 0;
padding: 0 0 0 0;
}


/* outLine
------------------------------------------------ */



#main.outLine .title {
background:url(/10-8/images/top-btn-about.jpg) no-repeat 50% 50%;
background-size: cover;
}


#main.outLine .breadcrumb {
background: #C95BD3;
}

#main.outLine .gmap iframe {
width: 100%;
min-height: 300px
}

/* download
------------------------------------------------ */

#main.download .box {
margin: 0 0 20px 0;
}




#main.download .box .lead {
font-size: 1.6rem;
}

#main.download .box p {
margin: 0;
}

#main.download .box .thumbnail {
border: solid 1px #EF92B6;
text-align: center;
}

#main.download .box .lead {
margin-bottom: 20px;
}


/* side download
------------------------------------------------ */

#side #download {
padding: 20px 10px;
background: #F24987;
color: #fff;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
margin-bottom: 40px;
}

#side #download .title {
text-align: center;
}

#side #download p {
margin-bottom: 20px;
}

#side #download .button {
margin-top: 20px;
}

#side #download .button a {
font-size: 2.0rem;
background: #CC165C;
color: #fff;
}

#side #download .button a:hover {
background: #fff;
color: #FF325B;
}

/* contest　作品一覧
------------------------------------------------ */

#main.contest .sakuhin {
//margin: 0 40px;
font-size: 2.0rem;
padding: 10px;
border-top: 5px solid #A5C128;
border-left: 5px solid #A5C128;
}

#main.contest .author {
//margin: 0 40px 20px 40px;
//text-align: right;
padding: 10px;
border-bottom: 5px solid #A5C128;
border-right: 5px solid #A5C128;
}

#main.contest .icon img {
max-width: 300px;
height: auto;
}

#main.contest .theme {
display:block;
background: #A5C128;
font-size: 100%;
margin-top: 10px;
padding: 0 .2em;
}

#main.contest .theme:before {
content: "作品テーマ：";
}

#main.contest .sakuhin .hitokoto {
font-size: 140%;
color: red;
}

/* 20170817
------------------------------------------------ */

#main.contest .punc {
color: red;
font-weight: bold;
}

/* 20171003
------------------------------------------------ */

#main.hakaru .breadcrumb {
background: #F7BE02;
}

#main.hakaru .title {
background:url(/10-8/images/side-hakaru.png) no-repeat 50% 50%;
background-size: cover;
}

#side #hakaru {
background: #F7BE02;
}

#side #hakaru .memo {
text-align: left;
}

.pageNation p {
margin-bottom: 1em;
}

.pageNation p:last-child {
margin-bottom: 0;
}


/* 20180731
------------------------------------------------ */

.entryBody .contest-example {
  margin-bottom: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.entryBody .contest-example div {
margin: 10px;
}


/* 20181101
------------------------------------------------ */

#main.control .breadcrumb {
background: #031fc7;
}

#main.control .title {
background:url(/10-8/images/side-control.png) no-repeat 50% 50%;
background-size: cover;
}

#side #hakaru {
background: #031fc7;
}

#side #control .memo {
text-align: left;
}

.pageNation p {
margin-bottom: 1em;
}

.pageNation p:last-child {
margin-bottom: 0;
}