@charset "UTF-8";

.inner .recommendArea,
.inner .recommendOnly,
.inner .recommendColumn{
    padding: 0 0px;
}

.recommendColumn{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 30px;
}

.recommendArea {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 30px;
}
.recommendArea li {
    box-sizing: border-box;
    display: block;
    width: 33%;
    margin: 0;
    list-style: none;
    padding: 20px;
}
.recommendArea li a {
    border: 1px solid #DFDFDF;
    display: block;
    color: #000000;
    padding: 15px;
    position: relative;
}
.recommendArea .cardTitle{
    position: relative;
    padding: 20px 18px 0 0
}
.recommendArea .cardTitle::after{
    content: "";
    position: absolute;
    top: 60%;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #737373;
    border-right: 1px solid #737373;
    transform: rotate(45deg);
    margin-top: -3px;
}
body .recommendArea .area {
    position: absolute;
    top: -16px;
    left: -16px;
    font-size: 16px;
    background-color: #16428f;
    color: #FFF;
    padding: 2px 5px 1px;
    margin: 0 3px 0 0;
    vertical-align: text-bottom;
    right: -19px;
}
.recommendOnly {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 30px;
}
.recommendOnly li {
    box-sizing: border-box;
    display: block;
    width: 33%;
    margin: 0;
    list-style: none;
    padding: 20px;
}
.recommendOnly li a {
    border: 1px solid #DFDFDF;
    display: block;
    color: #000000;
    padding: 15px;
    position: relative;
}
.recommendOnly figure {
    width: 100%;
    height: 91px;
    margin: 20px auto 5px auto;
    padding: 0;
    background: #efefef;
    text-align: center;
    overflow: hidden;
}
.recommendOnly img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
body .recommendOnly .area {
    position: absolute;
    top: 3px;
    left: -16px;
    font-size: 16px;
    font-weight: 400;
    background-color: #16428f;
    color: #FFF;
    padding: 4px 0 2px 5px ;
    margin: 0 3px 0 0;
    vertical-align: text-bottom;
    right: -16px;
}
.recommendOnly .area::before{
    content: "";
    width: 0;
    height: 0;
    border: 8px solid #d39b4c;
    border-bottom-color: transparent;
    border-left-color: transparent;
    position: absolute;
    bottom: -16px;
    left: 0;

}
@media only screen and (max-width: 768px) {
    .recommendColumn,
    .recommendOnly{
        display: block;
        padding: 10px;
    }
    .recommendArea{
        padding: 10px;}
    body .recommendColumn .linkCard,
    .recommendArea li,
    .recommendOnly li{
        width: 100%;
        padding: 10px 0 10px;
    }
    .recommendOnly figure {
        background: #FFFFFF;
        height: 23vw;
    }
    .recommendOnly img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        margin: 0 auto;
    }

}
/* トップMV
----------------------------------------------------*/

.topMv{
width:100%;
margin:0 0 0 0;
padding:0;


background-image: url(../img/top_bg.png);
background-size: 22%;
background-position: center bottom;
background-color: #c6e8ff;
background-repeat:repeat no-repeat;
box-shadow: 0 27px 86px -40px #4cdeff inset;
}
.topMv_box{
width:1150px;
margin:0 auto;
padding:0;
display:flex;
justify-content: space-between;
}
@media only screen and (max-width: 768px) {
.topMv{
box-shadow: none;
padding:0px 0;background-size: 40%;
background-position: center bottom 57px;

}
.topMv_box{
width:100%;
margin:0 auto;
padding:0;
display:block;
}
}
.topMv_box .mainMenu{
width:830px;
margin:25px 0 20px 0;
padding:0;
display:flex;
justify-content: space-between;
background: linear-gradient(to bottom, #3668cd, #173c8fc4);
border-radius: 10px;
}
.topMv_box .mainMenu .btnBox{
width:33.33%;
margin:0;
padding:15px 0;
}
.topMv_box .mainMenuSP{
display:none;
}
@media only screen and (max-width: 768px) {
.topMv_box .mainMenu{
display:none;
}
.topMv_box .mainMenuSP{
width:100%;
margin:0;
padding:0 10px;
display:flex;
justify-content: space-between;
background:linear-gradient(180deg, rgba(54,104,205,1) 65%, rgba(23,60,143,0) 100%);

}
.topMv_box .mainMenuSP .btnBox{
width:48%;
margin:0;
padding:15px 0 10px 0;
font-size:4vw;
}
}
.topMv_box .mainMenu  > .btnBox > .title01{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:18px;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon01.png")100px 3px no-repeat;
background-size:20px auto;
}
.topMv_box .mainMenu  > .btnBox > .title02{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:18px;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon02.png")75px 3px no-repeat;
background-size:25px auto;
}
.topMv_box .mainMenu  > .btnBox > .box02 > .title03{
margin:30px 0 10px 0;
padding:0 0 0 30px;
font-size:18px;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon03.png")60px 3px no-repeat;
background-size:20px auto;
}
.topMv_box .mainMenu  > .btnBox > .title04{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:18px;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon04.png")65px 3px no-repeat;
background-size:20px auto;
}
@media only screen and (max-width: 768px) {
.topMv_box .mainMenuSP  > .btnBox > .title01{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:4.2vw;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon01.png")50px 3px no-repeat;
background-size:20px auto;
}
.topMv_box .mainMenuSP  > .btnBox > .title02{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:4.2vw;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon02.png")20px 3px no-repeat;
background-size:25px auto;
}
.topMv_box .mainMenuSP  > .btnBox > .title03{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:4.2vw;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon03.png")20px 3px no-repeat;
background-size:20px auto;
}
.topMv_box .mainMenuSP  > .btnBox > .title04{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:4.2vw;
font-weight:400;
color:#FFFFFF;
text-align:center;
background:url("../img/topMv_icon04.png")25px 3px no-repeat;
background-size:20px auto;
}
}
.topMv_box .mainMenu  > .btnBox > .box01{
border-right:1px solid #5583E1;
padding:0 15px;
}
.topMv_box .mainMenu  > .btnBox > .box02{
height:380px;
border-right:1px solid #5583E1;
padding:0 15px;
}
.topMv_box .mainMenu  > .btnBox > .box03{
padding:0 15px;
}
.topMv_box a.btnParent {
width: 100%;
margin: 10px auto;
padding: 8px 10px;
color: #000000;
text-align: center;
background: #FFFFFF;
border: 1px solid #65A5FF;
display: block;
box-shadow: 2px 2px #243d66;
transition: .2s;
position: relative;
border-radius: 3px;
}
.topMv_box a.btnParent:hover {
box-shadow:none;
transform: translate3d(0, 2px, 0);
opacity:1;
}
.topMv_box a.btnParent::after{
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
border-top: 1px solid #173C8D;
border-right: 1px solid #173C8D;
transform: rotate(45deg);
margin-top: -3px;
}
.topMv_box a.btnChild {
width: 94%;
margin: 10px 0 10px 6%;
padding: 10px;
color: #000000;
text-align: center;
background:#E4F8FF;
display: block;
box-shadow: 2px 2px #243d66;
transition: .2s;
position: relative;
border-radius: 3px;
}
.topMv_box a.btnChild:hover {
box-shadow:none;
transform: translate3d(0, 2px, 0);
opacity:1;
}
.topMv_box a.btnChild::after{
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 7px;
height: 7px;
border-top: 1px solid #173C8D;
border-right: 1px solid #173C8D;
transform: rotate(45deg);
margin-top: -3px;
}
.topMv_box a.btnChild::before{
content: "\25b8";/*▸*/
color:#173B91;
position: absolute;
top: 10px;
left: 10px;
width: 7px;
height: 7px;
}
.topMv_box .bannerright_Box{
width:300px;
margin:35px 0 0 0;
padding:0;
display:flex;
justify-content: space-between;
flex-flow: column;
position:relative;
}
.topMv_box .bannerright_Box .topMedal_txt{
position:absolute;
left:10px;
top:125px;
font-size:12px;
font-weight:600;
text-align:center;
}
.topMv_box .bannerright_Box .topMenoumi_name{
position:absolute;
right:0;
bottom:0;
font-size:14px;
font-weight:600;
text-align:center;
text-shadow:
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,
0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
}
.topMv_box .bannerright_Box .topMenoumi_name span{
font-size:9px;
}
.topMv_box .top_medal{
width:100%;
height:123px;
margin:15px auto 0 auto;
display:block;
}
.topMv_box .top_mainoumi{
width:300px;
margin:0 auto 0 auto;
padding:0;
display:block;
}
.topMv_box .bannerBoxSP,
.tosyoBoxSP {
display:none;
}
@media only screen and (max-width: 768px) {
.topMv_box .top_mainoumi{
width:50%;
margin:0 auto 0 auto;
padding:0;
display:block;
}
.topMv_box .bannerright_Box{
display:none;
}
.topMv_box .bannerBoxSP{
width:100%;
margin:15px 0 0 0;
padding:0 10px;
display:flex;
justify-content: space-between;
flex-wrap: wrap;
}
.topMv_box .bannerBoxSP > .medalBox{
width:50%;
margin:0 0 0 0;
padding:0;
}
.topMv_box .bannerBoxSP > .medalBox img{
width:100%;
height: auto;
margin:0 10px 0 0;
padding:0 0 0 0;
    vertical-align: bottom;
}
.topMv_box .bannerBoxSP > .mainoumiBox{
width:46%;
margin:0 0 0 0;
padding:0;
}
.topMv_box .bannerBoxSP > .mainoumiBox img{
    display: block;
    width:100%;
    height: auto;
    margin:0 10px 0 0;
    padding:0 0 0 0;
    vertical-align: bottom;
}
.tosyoBoxSP {
width:100%;
margin: 0 0 5px 0;
padding: 10px 20px;
font-size: 2.5vw;
line-height: 1.8;
background:#FFFFFF;
display:block;
}
.tosyoBoxSP img{
width: 32px;
margin: 0 10px 0 0;
padding: 0 0 0 0;
float: left;
}
}
/* コンテンツ
----------------------------------------------------*/
.secBox01 .topMainoumi{
width:180px;
margin:0 20px 0 40px;
float:right;
}
.secBox01 p{
    font-size: 18px;
margin:0;
}
.secBox02 p{
    font-size: 18px;
margin:0 ;
}
.secBox01 .erabareru{
display: flex;
justify-content: space-around;
}
.secBox01 .erabareru img{
width:180px;
height:231px;
}
@media only screen and (max-width: 768px) {
.secBox01 .topMainoumi{
width:40%;
margin:0 20px 0 20px;
float:right;
}
.secBox01 .erabareru{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
}
.secBox01 .erabareru img{
width:45%;
height:auto;
margin:0 0 20px 0;
}
}
.secBox01 .topVoiceBox{
width:48%;
margin:30px 0 15px 0;
padding:20px 30px;
background:#F8F8F8;
}
@media only screen and (max-width: 768px) {
.secBox01 .topVoiceBox{
width:100%;
padding:20px 15px;
align-items: flex-start;
}
}
.secBox01 .topVoiceBox .prof{
margin:0;
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.secBox01 .topVoiceBox .prof img{
width:80px;
margin:0 20px 15px 0;
}
.secBox01 .topVoiceBox .prof div{
width:auto;
}
.secBox01 .topVoiceBox .todoufuken{
margin:0 12px 10px 0;
padding:2px 20px 4px 20px;
font-size:14px;
color:#FFFFFF;
background:#009966;
display:inline-block;
}
.secBox01 .topVoiceBox .ms{
margin:0 12px 10px 0;
padding:2px 20px 2px 20px;
font-size:14px;
color:#FFFFFF;
background:#3399CC;
display:inline-block;
}
.secBox01 .topVoiceBox .kodate{
margin:0 12px 10px 0;
padding:2px 20px 2px 20px;
font-size:14px;
color:#FFFFFF;
background:#66CCCC;
display:inline-block;
}
@media only screen and (max-width: 768px) {
.secBox01 .topVoiceBox .todoufuken{
margin:0 10px 5px 0;
padding:2px 10px 4px 10px;
font-size:2.5vw;
}
.secBox01 .topVoiceBox .ms{
margin:0 10px 5px 0;
padding:2px 10px 4px 10px;
font-size:2.5vw;
}
.secBox01 .topVoiceBox .kodate{
margin:0 10px 5px 0;
padding:2px 10px 4px 10px;
font-size:2.5vw;
}
}
.topFaqQ {
    margin: 5px 0 0 !important;
    padding-left: 2.8em;
    text-indent: -2.8em;
    color: #bf4f00;
    font-weight: 400;
    font-weight: bold;
    line-height: 1.3;
}
.topFaqQ:before {
    margin: 0 14px 0 0;
    padding: 0 10px 3px;
    content: "Q";
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    font-family: 'Noto Serif JP',serif;
    background: var(--themeColor);
    border-radius: 5px;
}
@media only screen and (max-width: 768px) {
.topFaqQ {
padding-left: 9.5vw;
text-indent: -9.5vw;
}
.topFaqQ:before {
font-size:3vw;
}
}
.topFaqA {
margin:15px 0 !important;
padding-left: 2.8em;
text-indent: -2.8em;
color:#2e2e2e;
line-height:1.3;
}
.topFaqA:before {
    margin: 0 20px 0 0;
    padding: 0 10px 1px;
    content: "A";
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    font-family: 'Noto Serif JP',serif;
    background: #2e2e2e;
    border-radius: 5px;
}
@media only screen and (max-width: 768px) {
.topFaqA {
padding-left: 9.5vw;
text-indent: -9.5vw;
}
.topFaqA:before {
font-size:3vw;
}
}
a.topFaqBtn {
width:80%;
margin:50px auto 30px auto;
padding:10px;
color:#FF8C00 !important;
text-align:center;
background:#FFFFFF;
border:1px solid #FF8C00;
display:block;
transition: .3s;
}
a.topFaqBtn:hover {
color:#FFFFFF !important;
background:#FF8C00;
border:1px solid #FF8C00;
opacity: 1;
}
@media only screen and (max-width: 768px) {
a.topFaqBtn {
width:88%;
margin:30px auto 15px auto;
}
}
.secBox02 {
width:49%;
margin:0;
padding:0;
border:1px solid #fff;
position:relative;
}
.secBox02 > .inner01{
width:90%;
margin:0 auto;
padding:10px 0 15px 0;
line-height:1.8;
border-bottom:1px solid #f3d6a9;
}
.secBox02 > .inner01:last-child{
margin:0 auto 20px auto;
border-bottom:none;
}
@media only screen and (max-width: 768px) {
.secBox02 {
width:100%;
margin:0 auto 20px auto;
}
.secBox02 > .inner01{
width:95%;
margin:0 auto;
padding:10px 0 15px 0;
font-size:4vw;
line-height:1.8;
border-bottom:1px solid #f3d6a9;
}
}
.secBox01,
.secBox02 {
    counter-reset: number 0;
}
.topNumber {
margin:10px 0 2px 0;
line-height:1.3;
font-size:18px;
font-weight:bold;
display: flex;
align-items: center;
}
.topNumber::before {
width:60px;
margin:0 0.5em 0 0;
padding:0;
font-size: 50px;
color: #f3d8ad;
font-weight: bolder;
text-shadow: 2px 2px 1px #f3d8ad, 2px -2px 2px #f3d8ad, -2px 2px 1px #f3d8ad, 2px 1px 2px #f3d8ad, 2px -1px 1px #f3d8ad, -1px 2px 2px #f3d8ad;
}
.secBox02 + .secBox02 .topNumber::before{
    color: #9ce6e6;
    text-shadow: 2px 2px 1px #9ce6e6, 2px -2px 2px #9ce6e6, -2px 2px 1px #9ce6e6, 2px 1px 2px #9ce6e6, 2px -1px 1px #9ce6e6, -1px 2px 2px #9ce6e6;
}
.topNumber::before {
    counter-increment: number 1;
    content: counter(number, decimal-leading-zero) " ";
}
.topNumber > span img{
width:100%;
padding:0;
}
@media only screen and (max-width: 768px) {
.topNumber {
width:100%;
font-size:calc(3vw + 6px);
white-space: nowrap;
}
.topNumber > span {
width:8.5vw;
margin:0 5px 0 0;
}
}
.secBox02 > .inner02{
width:90%;
margin:0 auto;
padding:10px 0 15px 0;
line-height:1.8;
border-bottom:1px solid #99E5E5;
}
@media only screen and (max-width: 768px) {
.secBox02 > .inner02{
width:95%;
margin:0 auto;
padding:10px 0 15px 0;
font-size:4vw;
line-height:1.8;
border-bottom:1px solid #99E5E5;
}
}
.secBox02 > .inner02:last-child{
margin:0 auto 20px auto;
border-bottom:none;
}
.secBox02 > .innerCopy{
width:90%;
margin:30px auto 15px auto;
padding:15px 30px;
font-size:18px;
color:#FF8C00;
background:#FEF6E2;
border-radius: 10px;
}
@media only screen and (max-width: 768px) {
.secBox02 > .innerCopy{
width:95%;
margin:15px auto;
padding:10px 15px;
font-size:3.5vw;
}
}
.topNumber02 {
margin:0 0 0 0;
line-height:1.3;
font-size:18px;
font-weight:500;
display: flex;
align-items: center;
}
@-moz-document url-prefix() {
.topNumber02 > span {
width:65px;
}
}
.topNumber02 > span {
margin:0 10px 0 0;
padding:0;
color:#99E5E5;
font-size:50px;
font-weight:700;
font-family: 'Rubik', sans-serif;
letter-spacing:-0.05em;
display:inline-block;
}
@media only screen and (max-width: 768px) {
.topNumber02 {
width:100%;
font-size:4vw;
white-space: nowrap;
}
.topNumber02 > span {
font-size:8vw;
}
}
.secBox02 > .inner01 a:link,
.secBox02 > .inner02 a:link{
margin:10px 0;
text-decoration:none;
display:block;
}
.ctaArea_top .custom_cta{
    margin: 0 auto;
}

.users_voice {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
padding: 1em;
margin-bottom: 3em;
}
.t_center{
    
text-align:center;
}

.users_voice h3,
.users_voice h4{
    margin: 0;
}
.users_voice h3{
    color:#008383;
}

.users_voice h4
{
    padding-left:0.5em;
    border-left: #008383 solid 6px;
    margin-bottom: 0.5em;
}

.value_list{
    font-size: 0.8em;
}
.users_voice ul{
    margin: 0;
}
.users_voice a{
    border-top: 10px solid #4ec3dd;
    color: #000000;
    background: #ffffff;
    box-shadow: 0 0 15px rgba(0,0,0,0.08);
    border-radius:10px;
    padding: 1em;
    transition: all 300ms 0s ease;
}
.users_voice a:hover{
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}


.users_voice li{
    list-style: none;
}
.users_voice .label{
    width: 13em;
    font-weight: bold;
    display: inline-block;
}
.users_voice .overview{
    text-align: center;
    font-weight: bold;
}
.users_voice .overview .overview_img{
    width: 100%;
    display: inline-block;
    aspect-ratio: 1 / 1;
    padding: 10%;
}
.users_voice .overview .overview_img img{
    width: 100%;
    height: auto;
    border-radius: 50%;
}

.users_voice .overview p{
    font-size: 0.8em;
}
.users_voice small {
    padding: 0;
    font-size: 80%;
    color: initial;
    text-align:initial;
    display: initial;
    background-color:unset;
}
.users_voice p{
    margin-bottom: 1em;
}
.users_voice h4 + p{
    height: 7em;
    overflow: hidden;
}
.users_voice h4 + p.height3line{
    height: 5em;
    overflow: hidden;
}
.users_voice h4 + p.height2line{
    height: 3.5em;
    overflow: hidden;
}
.users_voice h4 + p.height0{
    height: auto;
    overflow: inherit;
}
.users_voice .link{
    text-align: center; 
        background: #008383;
        padding: 0 1em;
        color: #fff;
        border-radius: 5px;
}
.users_voice a ul.users_voice_inner{
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}
.value_list{
    padding: 1em;
    border: 2px solid #000000;
    border-radius:7px;
    position: relative;
}
  .value_list::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 30%;
    left: -12px;
    border: 8px solid transparent;
    border-right: 11px solid #000;
    -webkit-transform: rotate(123deg);
    transform: rotate(123deg);
    }
.value_list:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 30%;
    left: -9px;
    border: 8px solid transparent;
    border-right: 11px solid #fff;
    -webkit-transform: rotate(123deg);
    transform: rotate(123deg);
  }
.users_voice a ul .grid-row_none{
    grid-column: 1 / -1;}

    @media only screen and (max-width: 768px) {

        .users_voice {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
            padding: 0.5em;
            }
            .users_voice .label {
                width: auto;
                padding-right: 1em;
                display: inline-block;
            }
            .value_list {
                padding: 0.5em;}
    }