@charset "utf-8";
@import "../../common/css/reset.css";
@import "../../common/css/base.css";

/* トッパングループQQ隊一斉募集2023
----------------------------------------------------------- */

#contents{}
#contents .sectionBox{margin-bottom:20px;}

.hover a{display:block;opacity:1;transition:opacity 0.5s;}
.hover a:hover{opacity:0.7;}


/* title
----------------------------------------------------------------- */
#title{}
#title .ttl-image img{width:100%;height:auto;}


/* main
----------------------------------------------------------------- */
#main .sectionBox:after{content:'';display:block;clear:both;}
#main .sectionBox:last-child{margin-bottom:70px;}
#main h3{margin-bottom:50px;padding:20px 40px 15px;color:#439dea;font-size:200%;/*30px*/font-weight:normal;line-height:1.5;border-bottom:3px solid #439dea;background:#f6f6f6;}
#main img{width:100%;height:auto;}

#main .box{width:87%;max-width:1040px;margin:0 auto;}

.sectionLayout{width:93.334%;max-width:1120px;margin:0 auto 8.928%;}

.pdfbox{width:33.929%;margin:0 auto;}
.pdfbox .image{width:70.264%;margin:0 auto 8.685%;}
.pdfbox .btn{box-shadow: 0px 0px 35px -6px rgb(0 0 0 / 20%);}
.pdfbox .btn a{}


/* topics
----------------------------------------------------------------- */
#topics{background:#ecf5fd;}
#topics .topics{max-width:960px;margin:40px auto 60px;padding-top:40px;}


/* feature
----------------------------------------------------------------- */
#feature{}
#feature .borderbox{margin-bottom:60px;border:3px solid #e4007f;box-sizing:border-box;}
#feature h4{margin:0.5em 0;color:#e4007f;font-size:213%;/*32*/font-weight:bold;text-align:center;}
#feature .image{width:calc((1060 / 1200) * 100%);margin:0 auto 40px;}


/* insurance
----------------------------------------------------------------- */
#insurance{}
#insurance .tab{display:flex;align-items:end;justify-content:space-between;}
#insurance .tab li{width:calc((100% - 10px) / 3);padding-top:3em;color:#fff;font-size:133%;/*20*/line-height:120%;text-align:center;border-bottom:3px solid #fff;position:relative;border-radius:8px 8px 0 0;cursor:pointer;}
#insurance .tab li.act{font-size:173%;/*26*/border-bottom:3px solid transparent;}
#insurance .tab li.no1{background:#09227f;}
#insurance .tab li.no2{background:#be0014;}
#insurance .tab li.no3{background:#df4900;}
#insurance .tab li small{font-size:69%;}
#insurance .tab li span{display:block;width:100%;position:absolute;top:50%;left:0;transform:translateY(-50%);}

#insurance .tab-box{margin-bottom:100px;}
#insurance .tab-box .tab-item{border:3px solid;}
#insurance #tab-no1{border-color:#09227f;background:#eff8fe;}
#insurance #tab-no2{border-color:#be0014;background:#fdf2f7;}
#insurance #tab-no3{border-color:#df4900;background:#fff6e6;}

#insurance .image{width:91.542%;margin:2.681% auto 3.351%;}

#insurance .btnbox{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:5.612%;}
#insurance .btnbox .btn{width:350px;margin:0 30px;box-shadow:0px 0px 35px -6px rgb(0 0 0 / 20%);}

#insurance .txt{font-size:100%;margin:0 1em 1em;}
#insurance .ar{text-align:right;}


/* join
----------------------------------------------------------------- */
#join{}
#join .flowbox{margin-bottom:70px;border:1px solid #d2d2d2;box-sizing:border-box;}
#join .flowbox .head{padding:0.5em 0;font-size:160%;/*24*/line-height:133%;text-align:center;background:#eeea5e;}
#join .flowbox .head small{font-size:75%;}
#join .flowbox .txt{width:93.334%;margin:1.5em auto 0;font-size:106%;/*16*/line-height:175%;text-align:center;}
#join .flowbox .btn{width:350px;margin:20px auto 40px;box-shadow:0px 0px 35px -6px rgb(0 0 0 / 20%);}
#join .flowbox .btn a{display:block;}
#join .flowbox .btn img{width:100%;height:auto;}
#join .flexbox{width:calc((750 / 1200) * 100%);margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;}
#join .flexbox .code{width:46.667%;}
#join .flexbox .sub{padding:0.5em;line-height:100%;color:#fff;font-size:120%;text-align:center;border-radius:20px;}
#join .flexbox .new .sub{background:#79d322;}
#join .flexbox .consider .sub{background:#1d8c1d;}
#join .flexbox .long .sub{background:#be0014;}
#join .flexbox .shotok .sub{background:#df4900;}
#join .flexbox .txt{width:100%;margin-top:0.5em;}


/* qa
----------------------------------------------------------------- */
#qa{}
#qa .session + .session{margin-top:3.572%;}
.session p{width:80.358%;/*900*/padding:1.5em 1.823em 1.5em 5em;font-size:120%;line-height:177%;border-radius:80px;background-repeat:no-repeat;background-position:center left 2.223em;background-size:1.778em auto;box-sizing:border-box;}
.session .que{margin-left:7.59%;background-color:#ecf5fd;background-image:url(../img/icon-q.png);}
.session .ans{margin:1.34% 0 0 12.056%;background-color:#fef4f8;background-image:url(../img/icon-a.png);}


/* document
----------------------------------------------------------------- */
#document{}
#document .sectionLayout{display:flex;flex-wrap:wrap;justify-content:center;}
#document .pdfbox{margin:0 2.679%;}


/* contact
----------------------------------------------------------------- */
#contact{}
#contact .contactbox{display:flex;flex-wrap:wrap;justify-content:space-between;margin-bottom:8.928%;}
#contact .contact{width:49.167%;}
#contact .contact .contactBtn{padding:2.458% 0;background-repeay:no-repeat;background-size:100% auto;}
#contact .contactBtn a{width:45.933%;display:block;margin:0 18.814% 0 auto;}

#contact #conbtn1 .contactBtn{background-image:url(../img/contact_bg1.png);}
#contact #conbtn2 .contactBtn{background-image:url(../img/contact_bg2.png);}


/* schedule
----------------------------------------------------------------- */
#schedule{}
#schedule table{width:80.35%;margin:0 auto;}
#schedule tr{background:url(../img/border.png) repeat-x bottom left;background-size:auto 4px;}
#schedule th{width:9.5em;padding:2.22% 0;color:#439dea;line-height:1.5;font-size:146%;font-weight:bold;}
#schedule td{padding:2.22% 0;font-size:120%;line-height:1.5;}
#schedule td strong.mt{display:inline-block;margin-top:0.5em;}
#schedule td strong.large{font-size:122%;}


/* original
----------------------------------------------------------------- */
#original{}
#original {}

#original .form{width:52.678%;margin:6.25% auto 0;}
#original .form .contactBtn{padding:2.542% 0;background:url(../img/original_bg.png) no-repeat;background-size:100% auto;}
#original .contactBtn a{width:49.49%;display:block;margin:0 16% 0 auto;}


/* etc
----------------------------------------------------------------- */
#etc .etcList{display:flex;flex-wrap:wrap;justify-content:space-between;}
#etc .etc-ins{width:22.322%;}
#etc .etc-ins a{display:block;position:relative;}
#etc .etc-ins .image{}
#etc .etc-ins .text{margin-top:1em;font-size:120%;line-height:111%;text-align:center;}
#etc .etc-ins .char{width:38%;margin:0 -11.2% -16% 0;position:absolute;bottom:0;right:0;}
#etc .red{margin:8.036% auto;color:#e4007f;font-size:133%;line-height:100%;text-align:center;}
#etc .align-r{font-size:106%;line-height:150%;text-align:right;}



@media screen and (max-width: 1200px){
	
#insurance .tab li{font-size:18px;}
#insurance .tab li.act{font-size:20px;}

#insurance .btnbox{display:block;}
#insurance .btnbox .btn{margin:2.5% auto 0;}

#join .flexbox{min-width:700px;}
#join .flowbox .btn{width:100%;max-width:350px;}
}



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


/* title
----------------------------------------------------------------- */
#title .sectionBox{width:100%;}


/* main
----------------------------------------------------------------- */
#main .sectionBox:after{}
#main .sectionBox:last-child{margin-bottom:18.3%;}
#main h3{margin-bottom:6.39%;padding:2.56% 5.12% 1.91%;font-size:133.3%;/*21*/border-width:2px;}

#main .box{width:87%;max-width:1040px;margin:0 auto;}

.sectionLayout{width:93.334%;max-width:1120px;margin:0 auto 8.928%;}

.pdfbox{width:100%;max-width:350px;min-width:190px;}
.pdfbox .image{width:54%;margin-bottom:5%;}


/* topics
----------------------------------------------------------------- */
#topics{width:100%;}
#topics .topics{width:93.334%;margin:5.334vw auto 8vw;padding-top:5.334vw;}


/* feature
----------------------------------------------------------------- */
#feature{}
#feature .borderbox{margin-bottom:8.451%;}
#feature h4{font-size:4.267vw;}
#feature .image{width:calc((623 / 710) * 100%);margin:0 auto 5.334vw;}


/* insurance
----------------------------------------------------------------- */
#insurance .tab li{width:calc((100% - 10px) / 3.5);padding-top:3em;font-size:2.934vw;}
#insurance .tab li.act{font-size:3.467vw;}
#insurance .tab li.no1{width:calc((100% - 10px) / 2.3);}

#insurance .tab-box{margin-bottom:13.334%;}

#insurance .btnbox{display:block;}
#insurance .btnbox .btn{width:90%;max-width:350px;margin:15px auto 0;}
#insurance .txt{font-size:13px;}


/* join
----------------------------------------------------------------- */
#join{}
#join .flowbox{margin-bottom:10%;}
#join .flowbox .head{font-size:20px;}
#join .flowbox .txt{font-size:14px;}
#join .flowbox .btn{width:90%;max-width:350px;}
#join .flexbox{width:90%;min-width:0;display:block;}
#join .flexbox .code{width:100%;max-width:350px;margin:0 auto 20px;}
#join .flexbox .sub{font-size:16px;}
#join .flexbox .btn{width:100%;}


/* qa
----------------------------------------------------------------- */
#qa{}
#qa .session + .session{margin-top:5.358%;}
.session p{width:100%;padding:1.2em 1.523em 1.2em 4em;font-size:16px;border-radius:60px;background-position:center left 1.523em;}
.session .que{margin-left:0;}
.session .ans{margin: 2.68% 0 0 0;}


/* document
----------------------------------------------------------------- */
#document{}
#document .sectionLayout{display:block;}
#document .pdfbox{margin:0 auto;}
#document .pdfbox:last-of-type{margin-top:8%;}


/* contact
----------------------------------------------------------------- */
#contact{}
#contact .contactbox{display:block;margin-bottom:8.928%;}
#contact .contact{width:83.093%;margin:0 auto;}

#contact #conbtn1 .contactBtn{margin-bottom:3%;}


/* schedule
----------------------------------------------------------------- */
#schedule{}
#schedule table{width:100%;}
#schedule tr{background-size:auto 2px;}
#schedule th{display:block;width:100%;padding:2.22% 0;font-size:100%;}
#schedule td{display:block;padding:0 0 2.22% 0;font-size:100%;}
#schedule td strong.mt{}


/* original
----------------------------------------------------------------- */
#original .form{width:83.099%;}


/* etc
----------------------------------------------------------------- */
#etc .etcList{width:100%;max-width:530px;margin:0 auto;}
#etc .etc-ins{width:44.644%;max-width:250px;margin-bottom:10.712%;}
#etc .etc-ins a{}
#etc .etc-ins .image{}
#etc .etc-ins .text{font-size:15px;}
#etc .etc-ins .char{}
#etc .red{margin:4.018% auto 8.036%;font-size:18px;}
#etc .align-r{font-size:14px;}


}