@charset "utf8";

/* break
===========================================

default
tab：520 @media (min-width: 520px) {...}
pc：960 @media (min-width: 960px) {...}
max：1100 @media (min-width: 1100px) {...}

*/

/* base
=========================================== */

html {
    font-size: 62.5%;
    font-family: 'Hiragino Kaku Gothic ProN','Noto Sans JP','Helvetica Neue',Arial,Meiryo,sans-serif;
}
p {
    color: #333333;
    font-size: 1.6rem;
    line-height: 1.6;
}
a {
    display: block;
    color: #333333;
    font-size: 1.6rem;
    text-decoration: none;
}
ul,
li {
    font-size: 1.6rem;
    list-style: none;
}
img {
    display: block;
    width: 100%;
    height: auto;
}
.sp_none {
    display: none;
}
.pc_none {
    display: block;
}
@media (min-width: 520px) {
    .sp_none {
        display: block;
    }
    .pc_none {
        display: none;
    }
}

/* header
=========================================== */

header {
    padding: 20px;
    align-items: center;
    background: #008555;
}
.site_name {
    display: block;
    width: 100%;
    color: #ffffff;
    text-align: center;
}
.site_name h1 {
    margin-bottom: 10px;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: bold;
}
.site_name h1 a {
    color:white;
    margin-bottom: 10px;
    font-size: 3.2rem;
    line-height: 1.4;
    font-weight: normal;
}
.site_name h1 span{
    white-space: nowrap;
}
.site_name .status {
    font-size: 1.2rem;
}
@media (min-width: 700px) {
    .site_name h1 {
        margin-bottom: 10px;
        font-size: 3.2rem;
        line-height: 1.4;
        font-weight: normal;
    }
    .site_name .status {
        font-size: 1.6rem;
    }
}


.logout {
    width: 100%;
    max-width: 480px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}
.logout a {
    padding: 10px;
    color: #ffffff;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 5px;
    transition: 0.4s;
    margin-top: 10px;
}
.logout a:hover {
    color: #008555;
    background: #ffffff;
    transition: 0.4s;
}
@media (min-width: 700px) {
    header {
        display: flex;
        padding: 30px 20px;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        background: #008555;
    }
    .site_name {
        display: block;
        color: #ffffff;
        text-align: left;
        flex: 1;
    }
    .logout {
        max-width: 480px;
        margin-top: 0;

    }
    .logout a {
        padding: 20px 10px;
        width: 30%;
        display: inline-block;
    }
}

/* main
===================================== */

main {
    padding: 50px 0 120px;
    background: #efefef;
}
.main_wrap {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
}
.con_body {
    display: block;
    width: 100%;
    padding: 20px 20px 40px;
    background: #ffffff;
    opacity: 1;
    transition: 0.4s;
}

section + section {
margin-top: 10px;
}

.sec_label {
    padding: 20px;
    margin-bottom: 10px;
    background: #008555;
    border-radius: 5px;
}
.sec_label h2 {
    color: #ffffff;
    font-size: 2rem;
    line-height: 1.6;
    margin: 0;
}
.btn__style_white {
    display: block;
    padding: 10px;
    color: #ffffff;
    font-size: 1.6rem;
    text-align: center;
    border: 1px solid #ffffff;
    border-radius: 5px;
    transition: 0.4s;
}
.btn__style_white:hover {
    color: #008555;
    background:  #ffffff;
    transition: 0.4s;
}
.btn__style_white:hover.btn_arrow::after {
    border-top: 1px solid #008555;
    border-right: 1px solid #008555;
}
.btn__style_black {
    display: block;
    padding: 20px;
    color: #ffffff;
    font-size: 1.6rem;
    text-align: center;
    background: #3c3c3c;
    transition: 0.4s;
    border-radius: 5px;
    opacity: 1;
}
.btn__style_black:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.btn__style_black2 {
    display: block;
    width: 200px;
    padding: 20px;
    color: #ffffff;
    font-size: 1.6rem;
    text-align: center;
    background: #3c3c3c;
    transition: 0.4s;
    border-radius: 40px;
    opacity: 1;
}
.btn__style_black2:hover {
    opacity: 0.8;
    transition: 0.4s;
}

.btn_arrow {
    position: relative;
    transition: 0.4s;
}
.btn_arrow::after {
    content: '';
    position: absolute;
    display: block;
    height: 8px;
    width: 8px;
    border-top: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    transform: rotate(45deg);
    top: calc(50% - 4px);
    right: 20px;
    transition: 0.4s;
}
.sec_wrap {
    width: 100%;
    padding: 0 20px;
}
@media (min-width: 520px) {
    .flex_inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .con_body {
        padding: 30px 30px 60px;
    }
    .sec_label {
        padding: 10px 30px;
    }
    .sec_wrap {
        width: 100%;
        padding: 0 30px;
    }
}

/* top
======================================= */

#top .con_body {
    display: none;
    opacity: 0;
    transition: 0.4s;
}
#top .con_body.active {
    display: block;
    width: 100%;
    padding: 20px 20px 40px;
    background: #ffffff;
    opacity: 1;
    transition: 0.4s;
}
#top .sec_label h2 {
    color: #ffffff;
    font-size: 2.4rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

#top .sec_label a.accordion_switch{
    width: 100%;
    max-width: none;
}

@media (min-width: 520px) {
    #top .sec_label {
        display: flex;
        padding: 10px 30px 10px 10px;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
    #top .sec_label h2 {
        max-width: 720px;
        margin-bottom: 0;
    }
    #top .sec_label a {
        width: 35%;
        max-width: 210px;
    }

    #top .sec_label a.accordion_switch{
        width: 65%;
        max-width: none;
    }
}

/* tab
======================================= */

.cate_tab__body {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    /*max-width: 720px;

    justify-content: space-between;

     */
}
.cate_tab_item {
    width: 19.6%;
    max-width: 120px;
    padding: 16px 8px;
    color: #ffffff;
    font-size: 1.4rem;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
    background: #7fc3aa;
    cursor: pointer;
    transition: 0.4s;
    margin: 1px 1px -10px 0;
}
.cate_tab_item:hover {
    background: #008555;
    transition: 0.4s;
}
.cate_tab_item.gokaku_tab:hover {
    background: #ed7631;
    transition: 0.4s;
}
.cate_tab_item.active {
    background: #008555;
    transition: 0.4s;
}

/* section
======================================= */

.result {
    margin-bottom: 40px;
}
.test_result,
.judgment {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.judgment {
    margin-top: 32px;
}
.test_result dt,
.judgment dt {
    width: 40%;
    font-size: 1.6rem;
    text-align: center;
    font-weight: normal;
    line-height: 1.4;
}
.test_result dd,
.judgment dd {
    width: 60%;
    padding-left: 24px;
    color: #5c5c5c;
    font-size: 3.0rem;
    font-weight: normal;
    border-left: 1px solid #3c3c3c;
}
.total {
    position: relative;
    margin-top: 80px;
    padding: 40px 0;
    border: 1px solid #9f9f9f;
    border-radius: 5px;
}
.total::after {
    position: absolute;
    content: '総合結果';
    width: 120px;
    height: 18px;
    color: #6c6c6c;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
    background: #ffffff;
    top: -8px;
    left: calc(50% - 60px);
}
.total .test_result dt,
.total .judgment dt {
    width: 44%;
    max-width: 100px;
    font-size: 1.4rem;
    text-align: center;
    font-weight: normal;
}
.total .test_result dd,
.total .judgment dd {
    width: 48%;
    max-width: 140px;
    margin-left: 16px;
    padding-left: 16px;
    color: #5c5c5c;
    font-size: 4.4rem;
    text-align: center;
    font-weight: normal;
    border-left: 1px solid #3c3c3c;
}
.total .issue_btn {
    display: block;
    width: 100%;
    padding: 22px 20px 32px;
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
    background: #d9d9d9;
    opacity: 1;
    transition: 0.4s;
    pointer-events: none;
}
.total .issue_btn.permit {
    background: #c50202;
    opacity: 1;
    transition: 0.4s;
    pointer-events: auto;
}
.total .issue_btn img {
    display: inline-block;
    width: 14px;
    margin: 10px 0 0 5px;
}
.total .issue_btn.permit:hover {
    opacity: 0.5;
    transition: 0.4s;
}
@media (min-width: 520px) {
    .result {
        display: flex;
        width: 100%;
        margin-bottom: 0;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .test_result,
    .judgment {
        width: 50%;
    }
    .judgment {
        margin-top: 0;
    }
    .test_result dt,
    .judgment dt {
        width: auto;
    }
    .test_result dd,
    .judgment dd {
        width: auto;
        margin-left: 16px;
        padding-left: 16px;
        font-size: 5.0rem;
    }
    .total .result {
        display: flex;
    }
    .total .test_result,
    .total .judgment {
        width: 100%;
        justify-content: center;
    }
    .total .judgment {
        margin-top: 40px;
    }
    .btn_wrap {
        width: 100%;
        margin-top: 40px;
    }
    .total .test_result dd,
    .total .judgment dd {
        width: 50%;
        color: #5c5c5c;
        font-size: 4.0rem;
        font-weight: normal;
        border-left: 1px solid #3c3c3c;
    }
    .total .issue_btn {
        margin-top: 40px;
    }
}
@media (min-width: 960px) {
    .result {
        width: 70%;
    }
    .test_result,
    .judgment {
        justify-content: flex-start;
    }
    .total .result {
        display: flex;
        width: 70%;
        flex-wrap: wrap;
        justify-content: center;
    }
    .total .test_result,
    .total .judgment {
        width: 50%;
        justify-content: flex-start;
    }
    .total .judgment {
        margin-top: 0;
    }
    .btn_wrap {
        width: 30%;
        margin-top: 0;
        min-width: 210px;
        max-width: 210px;
    }
    .total .issue_btn {
        width: 30%;
        min-width: 210px;
        max-width: 210px;
        margin-top: 0;
    }
}

/* case
======================================= */

.movie {
    width: 100%;
	padding: 0;
	box-sizing: border-box;
}

.movie_inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.movie_inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.detaile {
    margin-top: 40px;
    border-top: 1px solid #9f9f9f;
    border-bottom: 1px solid #9f9f9f;
}
.detaile_item dt {
    padding: 20px ;
    color: #3c3c3c;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.6;
    background: #f9f9f9;
}
.detaile_item dd {
    padding: 20px ;
    font-size: 1.6rem;
    line-height: 1.6;
    font-weight: normal;
}
.detaile_item + .detaile_item {
    border-top: 1px solid #9f9f9f;
}
.nav_area {
    margin-top: 40px;
}
.nav_area .btn__style_black {
    width: 100%;
}
.nav_area .btn__style_black + .btn__style_black {
    margin-top: 20px;
}
@media (min-width: 520px) {
    .movie {
        width: 80%;
        max-width: 720px;
        margin: 0 auto;
    }
    .detaile_item {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .detaile_item dt {
        width: 20%;
        max-width: 190px;
    }
    .detaile_item dd {
        width: 80%;
    }
    .nav_area {
        display: flex;
        margin-top: 80px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .nav_area .btn__style_black {
        width: 40%;
        max-width: 240px;
    }
    .nav_area.triple .btn__style_black {
        width: 30%;
        max-width: 240px;
    }
    .nav_area .btn__style_black + .btn__style_black {
        margin-top: 0;
        margin-left: 20px;
    }
}

/* exam result
======================================= */

.exam_q__item {
    padding-bottom: 40px;
    border-bottom: 1px solid #9f9f9f;
}
.exam_q__item + .exam_q__item {
    margin-top: 40px;
}
.exam_q__item .exam_q__item_name,
.exam_q__item_ans_correct,
.exam_q__item_ans_your {
    display: block;
    margin-bottom: 24px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
}
.exam_q__item_ans_correct + .exam_q__item_ans_your {
    margin-top: -20px;
}

.exam_q__item .ans_judg {
    font-size: 3.2rem;
}
#result .exam_q__item .exam_q__item_name {
    margin-bottom: 8px;
}
.exam_q__item label {
    display: block;
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1.6;
}
.exam_q__item [type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}
#result .result {
    margin-bottom: 0;
}
#result .total .test_result dt,
#result .total .judgment dt {
    width: 30%;
    max-width: 80px;
    font-size: 1.6rem;
    text-align: center;
    font-weight: normal;
}
#result .total .test_result dd,
#result .total .judgment dd {
    width: 62%;
    max-width: 180px;
    margin-left: 16px;
    padding-left: 16px;
    color: #5c5c5c;
    font-size: 4.4rem;
    font-weight: normal;
    border-left: 1px solid #3c3c3c;
}
#result .total::after {
    content: '採点結果';
}
@media (min-width: 520px) {
    .exam_q__item label {
        display: inline-block;
        margin-right: 32px;
        font-size: 1.6rem;
    }
    .exam_q__item label:last-child {
        margin-right: 0;
    }
}
@media (min-width: 960px) {
    #result .total .result {
        width: 100%;
    }
    #result .total .test_result,
    #result .total .judgment {
        width: 50%;
        max-width: 320px;
    }
}

#exam .ans{
    font-size: 1.8em;
    line-height: 1.4em;
}
#exam #msg{
    font-size: 1.6em;
    line-height: 1.4em;
}

/* entry
======================================= */

#entry input[type="text"],#entry input[type="password"],#login input[type="text"],#login input[type="password"] {
    width: 100%;
    max-width: 560px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid #9c9c9c;
    border-radius: 5px;
}
#entry select {
    width: 80%;
    height: 32px;
    margin-right: 8px;
    padding: 0 10px;
    border: 1px solid #9c9c9c;
    border-radius: 5px;
}
#entry #msg{
    line-height: 1.4em;
    font-size: 1.6em;
}
input::placeholder{
    color:#cccccc;
    font-weight: normal;
    font-size: 80%;
}
#login #reset{
    margin-top: 5px;
    text-align: center;
}
#login #reset a{
    text-decoration: underline;
}
.birth_wrap {
    display: block;
}
.birth_wrap + .birth_wrap {
    margin-top: 16px;
}
.btn__style_black.creat_pass {
    width: 100%;
    max-width: 220px;
    margin-top: 10px;
    padding: 8px;
    font-size: 1.4rem;
    cursor: pointer;
}
@media (min-width: 768px) {
    #entry select {
        width: 80%;
        max-width: 80px;
    }
    .birth_wrap {
        display: inline;
    }
}


/* footer
======================================= */

footer {
    padding: 20px 0;
    text-align: center;
    background: #008555;
}
footer div {
    color: #ffffff;
    font-size: 1.0rem;
}

/* login
======================================= */

@media (min-width: 520px) {
    #login .con_body{
        width: 800px;
        margin: 100px auto;
    }
}

.error{
    padding: 10px;
    font-size: 121%;
}

.privacy_area {
    width: auto;
    margin: 20px 0;
    font-size: 1.3rem;
    text-align: center;
}

.privacy_area .privacy {
    text-align: left;
    display: block;
    width: 100%;
    max-height: 200px;
    margin-bottom: 20px;
    overflow-y: scroll;
    overflow-x: auto;
    font-size: 1.3rem;
    line-height: 1.8rem;
}
.privacy_area .privacy p.ttl{
    font-size: 1.4rem;

}



.loginmsg_area {
    width: auto;
    margin: 40px 0;
    font-size: 1.3rem;
    text-align: center;
}

.loginmsg_area .msg {
    text-align: left;
    display: block;
    width: 100%;

    margin-bottom: 20px;
    font-size: 1.3rem;
    line-height: 2.2rem;
}
.loginmsg_area .msg a{
    display: inline;
    font-size: 1.3rem;
    text-decoration: underline;
}
.loginmsg_area .msg p.ttl{
    font-size: 1.4rem;

}



.privacy_area label {
    font-size: 1.6rem;
}

.nav_area #btn_check:disabled {
    background-color: #dddddd;
}
@media (min-width: 520px) {
    .privacy_area {
        margin: 20px;
    }
}


.accordion{
    text-align: left;
    display: block;
    width: 100%;
    font-size: 1.2rem;
    line-height: 2.2rem;
}
.accordion #ac_ttl{
    margin-bottom: 15px;
}
.accordion span {
    display: inline-block;
    width: 13px;
    height: 13px;
}
.accordion p{
    display: inline-block;
}
.accordion #ac_ttl img{
    width: 100%;
}
.accordion #ac_list{
    display: none;
}
.accordion #ac_list dt{
    margin: 10px 0 0;
}
.accordion #ac_list span{
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    color:#333
}

.gokaku_tab.active{
    background-color: #ed7631;
}
.gokaku_tab{
    background-color: #ffcc80;
}

.icon_gouhi{
    display: inline-block;
    width: 32px;
    margin-bottom: 2px;
}

.accordion_switch img.switch{
    display: inline-block;
    width: 16px;
    margin-bottom: 7px;
    margin-left: -3px;
}
.movie_list{
    display:flex;
    flex-wrap: nowrap;
}
@media (max-width: 520px) {
    .movie_list {
        display:block;
        width: 100%;
    }
}
.movie_list li{
    padding: 10px;
    max-width: 220px;
}
@media (max-width: 520px) {
    .movie_list li {
        max-width: none;
    }
}
div.sec_label.movie_ttl{
    background-color: #efefef;
}
div.sec_label.movie_ttl h2{
    color:#008555;
    font-weight: bold;
    margin: 0;
    width: 100%;
    max-width: none;
}
#top_movie .sec_label.movie_ttl h2{
    font-size: 3rem;
}
#top_movie .nav_area .btn_arrow{
    padding-right: 40px;
}
@media (min-width: 520px){
    #top_movie .nav_area{
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
        justify-content: space-between;
    }
    #top_movie .nav_area .btn__style_black + .btn__style_black{
        margin-left: 0;
    }
    #top_movie .nav_area .btn__style_black{
        width: 49%;
        max-width: 300px;
    }
}
.rank_list li{
    display: inline-block;
    padding: 10px;
}
.rank_list li a{
    font-size: 2rem;
    vertical-align: bottom;
}
.rank_list li:first-child a{
    font-size: 5rem;
}

.rank_list li:nth-child(2) a{
    font-size: 4rem;
}
.rank_list li:nth-child(3) a{
    font-size: 3.3rem;
}
.rank_list li:nth-child(4) a{
    font-size: 3rem;
}

.rank_list li:nth-child(5) a{
    font-size: 2.5rem;
}


.tag_list li{
    float:left;
    display: inline-block;
    padding: 10px;
    font-size: 15px;
}
.tag_list li a{
    font-size: 2rem;
}
.clearfix::after
{
     display: block;
     clear: both;
     content: "";
 }
.green{
    color:#008555;
}

/* seiseki ページ
======================================= */
#seiseki th{
    background-color: #008555;
    color: white;
}
#seiseki .c{
    text-align: center;
}

#seiseki  .grid table td {
    border: 1px #ddd solid;
    text-align: center;
}

#seiseki table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    padding: 12px 8px;
    vertical-align: middle;
}
#seiseki .table-striped>tbody>tr:nth-of-type(odd){
    background-color: #f9f9f9;
}

@media (max-width: 519px){
    #seiseki table.sm_block{
        width: 100%;
    }
    #seiseki table.sm_block th,#seiseki table.sm_block td {
        display: block;
        width: 100%;
    }
    #seiseki table.list th{
        font-weight: normal;
    }
    #seiseki p {
        display: inline;
    }
}