@charset "utf-8";

* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html{
overflow-x: hidden;
scroll-behavior: smooth;
display: block!important;
}

body{
margin: 0px;
min-width: fit-content;
font-family: "Zen Maru Gothic", sans-serif;}


h1{
margin: 0;
}

h2{
font-family: "Zen Maru Gothic", sans-serif;
font-size: 32px;
}

.fa-bars:before{
color: #16A6B8;
}

.pc {
display: none !important;
}


.br-pc {
display: block;
}

.br-tab{
display: none;
}

.br-judge{
display: block;
}

@media (min-width: 480px) {
.pc {
display: block !important;
}
}
.sp {
display: block !important;
}
@media (min-width: 540px) {
.br-tab {
display: block !important;
}
}
.tablet {
display: block !important;
}
@media (min-width: 768px) {
.tablet {
display: none !important;
}
}

.head_logo img{
width:50px;
height:50px;
}

header {
width: 100%;
background: #ffffff;
z-index: 1000;
padding: 0;
font-weight:bold;
}

a {
text-decoration: none;
}

header .container {
position: relative;
}

header .container-small {
display: flex;
align-items: center;
justify-content: flex-start;
}

.headA {
padding-left: 10px;
padding-right: 10px;
}

.headA h1 {
margin: 0;
color: #434343;
padding: 0;
}

.headA p {
font-size: 20px;
color: #636363;
}

.headB ul {
margin: 0;
padding: 0;
list-style: none;
}


.headB a,.headB a:link,.headB a:visited{
display: block;
padding: 5px 20px;
color: #fff;
font-size: 16px;
text-decoration: none;
border-bottom: 3px solid none;
}

.headB a:hover {
background-color: #20c9df;
border-radius: 20px;
transition: .3s;
}

.headB ul li a{
display: inline-block;
background-color: #16A6B8;
border-radius: 20px;
padding: 0 10px;
color: #fff;}

.headD img{
height: 30px;
}

/* PC */
@media(min-width: 1024px) {
.headA {
padding-left: 12%;
}

.headB {
position: absolute;
right: 12%;
top: 5px;
}

.headB ul {
display: flex
}

.headC {
display: none;
}
}

/* SP */
@media(max-width:1023px) {
.headC {
position: absolute;
right: 10px;
padding: 0;
border: none;
outline: none;
background: none;
font-size: 28px;
opacity: 0.8;
cursor: pointer;
color: #636363;
}

.headC:hover {
opacity: 0.3;
}

.headB {
display: none;
}
}


/* PC */
@media (min-width:1024px) {
.pc { display: block !important; }
.sp { display: none !important; }
}

.top_wrapper{
max-width: 100%;
}

.top_inner{
max-width: 100%;
background-image: url(../img/fv_bg.svg);
background-size: cover;
}

.top_inner picture img{
margin: 0 auto;
padding: 0;
width: 100%;
max-width: 1000px;
}

.fv_lead {
margin: 0 auto;
width: 100%;
background-color: #fff;
padding: 50px 0;
}

.fv_lead p{
font-weight: 500;
font-style: normal;
text-align: center;
font-size: 28px;
line-height: 50px;
color: #16A6B8;
}

.fv_lead p span{
color: #FC8C7A;
}

.content_all {
background-color:#fffde9;
/*overflow: hidden*/;
}

.horizon-border{
height: 65px;
background-image: url(../img/horizon.svg);
background-repeat: repeat-x;
background-position: top;
background-size: cover;
}

.content_category {
background-color:#EAF7FB;
background-size: cover;
padding: 0 0 60px 0;
text-align: center;
}

.category_list{
padding: 40px 0;
}

.category_result {
margin: 0 auto;
text-align: center;
padding: 0 50px;
font-size: 28px;
font-weight: 500;
color: #FFF;
box-sizing: border-box;
--r: 20px;
padding-inline: calc(var(--r) + 2.3em);
line-height: 1.8;
clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
background: #FC8C7A; /* the main color */
width: fit-content;
}

.category_result:before, .category_result:after {
position: absolute;
content: '';
width: 0px;
height: 0px;
z-index: 1;
}

.category_result:before {
top: 0;
left: 0;
border-width: 33px 0px 25px 15px;
border-color: transparent transparent transparent #f6fcfd ;
border-style: solid;
}

.category_result:after {
top: 0;
right: 0;
border-width: 33px 15px 25px 0px;
border-color: transparent #f6fcfd  transparent transparent;
border-style: solid;
}

.category_result-box{
padding: 20px;
background-color: #fff;
border: solid 2px #FC8C7A;
border-radius: 20px;
max-width: 1024px;
margin: -25px auto 0 auto;
}

.category_result-ttl{
font-size: 24px;
color: #FC8C7A;
padding: 5px 40px;
border: solid 2px #FC8C7A;
display: inline-block;
border-radius: 40px;
margin-top: 40px;
box-shadow: 2px 3px #FC8C7A;
}


.result_category-disc {
margin-top: 20px;
border-collapse: collapse;
width: 100%;
font-family: "Zen Maru Gothic", sans-serif;
}

.result_category-disc th, .result_category-disc td {
padding:10px 25px;
}

.result_category-disc th {
color: #FC8C7A;
font-weight: bold;
text-align: left;
width: 55%;
font-size: 24px;
position: relative;
text-align: center;
line-height: 30px;
}

.result_category-disc th::after {
content: '';
background-color: #8B8B8B;
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%);
width: 1px;
height: 70%;
}

.result_category-disc td { 
text-align: center;  
font-size: 25px;
color: #8B8B8B;
font-family: "Zen Maru Gothic", sans-serif;
font-weight: 500;
}

.result_category-disc tr:first-child th,
.result_category-disc tr:first-child td {
font-size: 1.1em;
}

.result_category-disc tr:first-child th::after {
content: none;
}

.result_zero{
font-size: 24px;
font-weight: 500;
color: #8B8B8B;
margin: 40px auto;
}


/* PC */
@media(min-width: 1024px) {
.headA {
padding-left: 12%;
}

.headB {
position: absolute;
right: 10%;
top: 10px;
}

.headB ul {
display: flex
}

.sponly {
display: none;
}

}

/* SP */
@media(max-width:1023px) {
.sponly {
display: block;
color: #fff!important;
background-color: #16A6B8;
border-radius: 60px;
width: 280px;
font-size: 16px;
padding: 5px;
font-weight: 600;
margin: 20px auto 0 auto;
}

.category_result-box{
width: 98%;
}

}

@media (max-width:820px) {
.fv_lead p {
font-size: 22px;
line-height: 40px;
}

.br-tab{
display: block;
}
.br-pc {
display: none;
}
}

@media (max-width:767px) {
.fv_lead {
padding: 35px 0;
}
.fv_lead p {
font-size: 20px;
line-height: 32px;  
}


.category_list{
padding: 0 0 40px 0;
}

.content_category{
padding: 0;
}
.category_ttl{
font-size: 32px;
line-height: 47px;
}

.category_ttl img {
max-height: 40px;
}

.category_result {
margin: 0 auto;
}

.result_category-disc tr:first-child th, .result_category-disc tr:first-child td {
font-size: 16px;
}

.result_category-disc th,.result_category-disc td{
font-size: 20px;
}

}

@media(max-width:540px) {

header .container-small{
padding: 5px 0;
}

.br-judge{
display: none;
}
.top_inner picture img{
max-width: 100%;	
}

.headB {
display: none;
}

.fv_lead p{
font-size: 16px;
line-height: 28px;
}

.fv_lead {
margin: 0 auto;
padding: 20px 0;
}

.category_ttl img {
max-height: 30px;
}
.category_ttl {
font-size: 25px;
line-height: 40px;
text-shadow: 1px 1px 0 white, -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 0 0 4px rgb(97, 97, 97);
}
.category_result{
font-size: 20px;
height: 50px;
line-height: 50px;
}
.category_result img {
display: inline;
max-height: 25px;
vertical-align: middle;
margin-top: -7px;
}

.category_result:before{
border-width: 25px 0px 25px 15px;
}

.category_result:after{
border-width: 25px 15px 25px 0px;
}
.category_name {
width: 100%;
}

.category_frame-txt a {
display: block;
max-width: 300px;}

.content_category{
padding: 0 0 40px 0;
}

.category_list{
padding: 0;
margin-bottom: 40px;
}

.category_result {
margin: 0px auto 0 auto;
}

}

@media (max-width: 540px) {
.br-tab {
display: none !important;
}

.category_result-ttl{
padding: 5px 40px;
margin-top: 30px;
font-size: 20px;
}

.category_result-box{
padding: 20px 10px;
}

.result_category-disc tr:first-child th, .result_category-disc tr:first-child td {
font-size: 1em;
}

.result_category-disc th, .result_category-disc td {
padding: 10px;
}

.result_category-disc th{font-size: 20px;}
.result_category-disc td{font-size: 20px;}
}


a.pagetop {
height: 150px;
width: 150px;
position: fixed;
right: 30px;
bottom: 100px;
background: #FC8C7A;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 2;
text-align: center;
color: #fff;
font-size: 22px;
font-weight: 500;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

@media (max-width: 540px) {
a.pagetop {
right: 10px;
bottom: 10px;
height: 90px;
width: 90px;
font-size: 14px;
}
}


/* あとで消す　フッター整形 */

.footer {
background: #f5f5f5;
border-top: 1px solid #e6e6eb;
padding: 32px 4vw 12px
}

@media (min-width: 480px) {
.footer {
padding:40px 4vw 24px
}
}

@media (min-width: 1080px) {
.footer {
padding-bottom:32px
}
}

@media (min-width: 1280px) {
.footer {
padding:40px 0 32px
}
}

.footer__inner {
max-width: 1280px;
margin: 0 auto
}

@media (min-width: 768px) {
.footer__description {
display:flex;
align-items: center;
border-bottom: 1px solid #e6e6eb;
padding-bottom: 40px
}
}

.footer__description .logo {
width: 150px;
margin: 0 auto
}

@media (min-width: 768px) {
.footer__description .logo {
width:170px
}
}

@media (min-width: 1080px) {
.footer__description .logo {
width:220px
}
}

.footer__description-text {
margin-top: 16px;
font-size: 10px;
text-align: center
}

@media (min-width: 321px) {
.footer__description-text {
font-size:11px
}
}

@media (min-width: 480px) {
.footer__description-text {
font-size:12px;
}
}

@media (min-width: 768px) {
.footer__description-text {
margin-top:12px;
text-align: left;
padding-left: 16px;
width: calc(100% - 170px)
}
}

@media (min-width: 1080px) {
.footer__description-text {
width:calc(100% - 220px);
padding-left: 32px
}
}

.footer__nav-area {
padding: 24px 0 0
}

@media (min-width: 480px) {
.footer__nav-area {
padding:32px 0 0
}
}

@media (min-width: 1280px) {
.footer__nav-area {
display:flex;
align-items: center;
justify-content: space-between
}
}

.footer .footer-nav {
margin-bottom: 16px
}

@media (min-width: 480px) {
.footer .footer-nav {
margin-bottom:24px
}
}

@media (min-width: 1280px) {
.footer .footer-nav {
margin-bottom:0
}
}

.footer .footer-nav__list {
border-bottom: 1px solid #e6e6eb;
display: flex;
flex-wrap: wrap
}

@media (min-width: 768px) {
.footer .footer-nav__list {
border-bottom:none;
justify-content: center
}
}

.footer .footer-nav__item {
border-top: 1px solid #e6e6eb;
width: 50%;
padding: 6px 0
}

@media (min-width: 768px) {
.footer .footer-nav__item {
width:auto;
border-top: none;
padding: 0
}
}

.footer .footer-nav__item a {
display: block;
text-align: center;
color: #4a4a4a;
font-size: 12px;;
padding: 6px 0
}

@media (min-width: 480px) {
.footer .footer-nav__item a {
font-size:14px
}
}

@media (min-width: 768px) {
.footer .footer-nav__item a {
padding:0;
text-align: left;
display: flex;
align-items: center
}

.footer .footer-nav__item a:before {
content: "";
display: block;
width: 1px;
height: 12px;
background: #d2d2d6;
margin-left: 20px;
margin-right: 20px
}
}

@media (min-width: 768px) {
.footer .footer-nav__item:first-child a:before {
content:none
}
}

.footer .footer-nav__item:nth-child(odd) a {
border-right: 1px solid #e6e6eb
}

@media (min-width: 768px) {
.footer .footer-nav__item:nth-child(odd) a {
border-right:none
}
}

@media (min-width: 768px) {
.footer .footer-sub-nav {
display:flex;
justify-content: center
}
}

.footer .footer-sub-nav__list {
display: flex;
flex-wrap: wrap;
justify-content: center
}

.footer .footer-sub-nav__list:first-of-type .footer-sub-nav__item:first-child a:before {
content: none
}

.footer .footer-sub-nav__item a {
font-size: 11px;
color: #4a4a4a;
padding: 4px 0;
display: flex;
align-items: center
}

@media (min-width: 480px) {
.footer .footer-sub-nav__item a {
font-size:12px;
}
}

@media (min-width: 768px) {
.footer .footer-sub-nav__item a {
padding:0
}
}

.footer .footer-sub-nav__item a:before {
content: "";
display: block;
width: 1px;
height: 12px;
background: #d2d2d6;
margin-left: 16px;
margin-right: 16px
}

.footer .footer-sub-nav__item:first-child a:before {
content: none
}

@media (min-width: 768px) {
.footer .footer-sub-nav__item:first-child a:before {
content:"";
display: block;
width: 1px;
height: 12px;
background: #d2d2d6;
margin-left: 16px;
margin-right: 16px
}
}

.footer__bottom-area {
border-top: 1px solid #e6e6eb;
margin-top: 20px;
padding-top: 24px
}

@media (min-width: 480px) {
.footer__bottom-area {
margin-top:24px;
padding-top: 20px
}
}

@media (min-width: 768px) {
.footer__bottom-area {
margin-top:32px;
padding-top: 24px
}
}

@media (min-width: 1080px) {
.footer__bottom-area {
display:flex;
align-items: center;
justify-content: space-between
}
}

.footer .editor-dep {
width: 280px;
margin: 0 auto
}

@media (min-width: 480px) {
.footer .editor-dep {
width:auto;
display: flex;
justify-content: center
}
}

@media (min-width: 1080px) {
.footer .editor-dep {
display:block;
margin: 0
}
}

.footer .editor-dep__list {
display: flex;
flex-wrap: wrap;
align-items: center
}

@media (min-width: 480px) {
.footer .editor-dep__list {
justify-content:center
}
}

@media (min-width: 1080px) {
.footer .editor-dep__list {
justify-content:flex-start
}
}

.footer .editor-dep__item {
width: 33.3%;
margin-top: 24px
}

.footer .editor-dep__item:first-child,.footer .editor-dep__item:nth-child(2),.footer .editor-dep__item:nth-child(3) {
margin-top: 0
}

@media (min-width: 480px) {
.footer .editor-dep__item {
width:auto;
margin-right: 24px;
margin-top: 8px;
margin-bottom: 8px
}

.footer .editor-dep__item:first-child,.footer .editor-dep__item:nth-child(2),.footer .editor-dep__item:nth-child(3) {
margin-top: 8px
}

.footer .editor-dep__item:last-child {
margin-right: 0
}
}

.footer .editor-dep__item a {
display: block
}

.footer .editor-dep__item a img {
margin: 0 auto;
display: block
}

.footer .editor-dep__item--ribon a img {
height: 18px
}

@media (min-width: 768px) {
.footer .editor-dep__item--ribon a img {
height:20px
}
}

.footer .editor-dep__item--margaret a img {
height: 18px
}

@media (min-width: 768px) {
.footer .editor-dep__item--margaret a img {
height:20px
}
}

.footer .editor-dep__item--betsuma a img {
height: 18px
}

@media (min-width: 768px) {
.footer .editor-dep__item--betsuma a img {
height:20px
}
}

.footer .editor-dep__item--cookie a img {
height: 16px
}

@media (min-width: 768px) {
.footer .editor-dep__item--cookie a img {
height:18px
}
}

.footer .editor-dep__item--cocohana a img {
height: 20px
}

@media (min-width: 768px) {
.footer .editor-dep__item--cocohana a img {
height:22px
}
}

.footer .editor-dep__item--mangamee a img {
height: 20px
}

@media (min-width: 768px) {
.footer .editor-dep__item--mangamee a img {
height:22px
}
}

.footer .editor-dep__item--themargaret a img {
height: 24px
}

@media (min-width: 768px) {
.footer .editor-dep__item--themargaret a img {
height:26px
}
}

.footer .editor-dep__item--degima a img {
height: 18px
}

@media (min-width: 768px) {
.footer .editor-dep__item--degima a img {
height:20px
}
}

.footer .editor-dep__item--kimikoi a img {
height: 18px
}

@media (min-width: 768px) {
.footer .editor-dep__item--kimikoi a img {
height:20px
}
}

@media (min-width: 480px) and (min-width:768px) {
.footer .editor-dep__item {
margin-right:32px
}

.footer .editor-dep__item:last-child {
margin-right: 0
}
}

@media (min-width: 480px) and (min-width:1080px) {
.footer .editor-dep__item {
margin-right:40px
}

.footer .editor-dep__item:last-child {
margin-right: 0
}
}

.footer .copyright {
text-align: center;
margin-top: 20px;
line-height: 1
}

@media (min-width: 480px) {
.footer .copyright {
margin-top:16px
}
}

@media (min-width: 768px) {
.footer .copyright {
margin-top:22px
}
}

@media (min-width: 1080px) {
.footer .copyright {
text-align:right;
margin-top: 0;
flex-shrink: 0;
padding-left: 40px
}
}

.footer .copyright small {
font-size: 10px;
color: #9b9b9b
}

@media (min-width: 480px) {
.footer .copyright small {
font-size:11px
}
}

.l_content-bottom {
margin-top: 0;
}

@media (min-width: 768px) {
.l_content-bottom {
margin-top: 0;
}
}