@charset "UTF-8";
:root {
	--main-width: 1000px;
}

h2,p,figure,ul,img {padding: 0; margin:0;}
img {max-width: 100%; height: auto; display: block;}
ul {list-style-type: none;}
a {text-decoration: none;}
h1 {font-size: 1rem;}
h2 {font-weight: normal;}
header {background-color: #fff; padding: 5px 10px;}
body {background-color: #f3f3f3; margin:0;}
footer {background-color: #006DF1;}

@media screen and (max-width:480px) {
   body {padding: 0;}
}


/******fvの部分******/
.fv-container {background-color: #D8E4F2; max-width: 100%; margin-bottom: 30px; padding: 30px;}
.fv-pc {max-width: 100%; height: auto; display: block; margin: auto;}
.fv-sp {display: none;}

@media screen and (max-width:480px) {
	.fv-container {padding:0;}
	.fv-pc {display: none;}
	.fv-sp {max-width: 100%; height: auto; display: block; margin: auto;}
}

/******ランキング部分******/
.ranking-container {max-width: var(--main-width); margin: auto; margin-bottom: 60px;}
.ranking-container h2 {font-size: 1.8rem; font-weight: bold; text-align: center; margin-bottom: 20px;}
.company-container {max-width: 100%; background-color: #fff; border-radius: 5px; margin-bottom: 50px;}
.company-container:last-child {margin:0;}
.company-name-sp {display:none;}
.fa-star,.fa-star-half-stroke {color:#ffd11e;}
.company-fee {font-weight: bold; font-size: 1.4rem;}
.conmpany-induction {border-top: 1px solid #006DF1; padding: 1.2rem 0; background-color: #fff;}
.induction-one-word {text-align: center; color: #15C50C; font-weight: bold; margin-bottom: 0.2rem; font-size: 1rem;}
.induction-btn {max-width: 500px; padding: 1rem 0;  background: linear-gradient(180deg, #15C50C, #109A09); display: flex; align-items: center; justify-content: center; border-bottom: 3px solid  #0D7807; text-decoration: none; border-radius: 5px; color: #fff; font-weight:bold; margin: auto; font-size: 1.5rem;}
 .gold {background-image: linear-gradient(180deg, rgba(255, 203, 31, 1), rgba(203, 161, 24, 1));}
 .silver {background-image: linear-gradient(180deg, rgba(213, 213, 213, 1), rgba(140, 140, 140, 1));}
 .bronze {background-image: linear-gradient(180deg, rgba(255, 197, 143, 1), rgba(162, 83, 0, 1));}
 .blue {background-color: #006DF1;}

.company-table {width: 100%; border-collapse:collapse; background-color: #fff;table-layout:fixed;}
.company-table-th {background-color: #006DF1; color: #fff; padding: 10px; border-right: 2px solid #fff;}
.company-table-th:last-child,.company-table-td:last-child {border: none;}
.company-table-td {border-right: 2px solid #006DF1; padding: 10px; text-align: center;}
.company-table-name a {text-decoration: underline;}
.company-table-name a img {display: block; max-width: 100%; height: auto; margin: auto; margin-bottom:0.4rem;}
.company-table-name a p {text-align: center; font-size: 0.8rem;}
.company-table-star p {text-align: center; font-weight: bold; color: #FF471C; font-size: 1.6rem;}
.company-table-fee {font-weight: bold; font-size: 1.4rem;}

@media screen and (max-width:480px) {
 .ranking-container {padding: 0 5px;}
 .ranking-container h2 {margin-bottom: 15px;}
 .company-container {border-radius: 0;}
 .company-name-sp {display: flex; align-items: center; justify-content: center; padding: 10px; background-color: #fff; position: relative; }
 .company-name-sp div a img {display: block; max-width: 100%; height: auto; margin-bottom: 0.4rem;}
 .company-name-sp div a p {text-align: center; font-size: 0.8rem; text-decoration: underline;}
 .conmpany-induction {border: none;}
 .induction-btn {max-width: 80%;}
 .sp-rank {position: absolute; top: 0; left: 0; padding: 3px 7px; color: #fff; border-bottom-right-radius: 10px;}

 .company-table-th:first-child,.company-table-td:first-child {display: none;}
 .company-table-td,.company-table-td:last-child {border-bottom: 2px solid #006DF1;}
 .company-table-star,.company-table-features {font-size: 0.9rem; padding: 1rem;}
 .company-table-fee{font-size:1.2rem;}
}

/*******比較表部分********/
.chart-container {max-width: var(--main-width); margin: auto; margin-bottom: 60px;}
.chart-container h2 {text-align: center; font-size: 1.8rem; margin-bottom: 20px;}
.chart-table {width: 100%; border-collapse:collapse; background-color: #fff;}
.chart-table tbody th,.chart-table tbody td {padding: 15px 0;}
.chart-table tbody th {font-weight: normal;}
.chart-table tbody th:first-child {background-color: #006DF1; color: #fff; width: 15%;}
.chart-table tbody td {text-align: center; width: 28%; padding: 10px; font-size: 0.9rem;}
.chart-table-link {color: #006DF1; text-decoration: underline;}
.chart-table-link img {display: block; max-width: 100%; height:auto; margin: auto; margin-bottom: 0.6rem;}
.chart-table-payment {text-align: left;}
.chart-table-payment li {color:#006DF1; background-color:#E0EEFF; margin-bottom: 0.3rem; padding: 5px; border-radius: 5px;}
.chart-table-price {font-weight: bold; font-size: 1.2rem;}
.chart-table-payment li:last-child {margin-bottom: 0;}
.chart-table-btn {background: linear-gradient(180deg, #15C50C, #109A09);  display: flex; align-items: center; color: #fff; font-weight:bold; justify-content: center; padding: 8px 0; border-radius: 5px; border-bottom: 3px solid #0D7807;font-size:1rem;}
.fa-building,.fa-medal,.fa-sack-dollar,.fa-hand-holding-dollar,.fa-person-running {font-size: 1.8rem; margin-bottom: 5px;}
.maru-sankaku {max-width: 50px; height: auto; margin: auto; margin-bottom: 0.5rem;}

@media screen and (max-width:480px) {
 .chart-container {margin: 0 5px; margin-bottom: 40px;}
 .chart-table tbody th,.chart-table tbody td {padding: 25px 0;}
 .chart-table tbody th {font-size: 0.8rem; width: 25%;}
 .chart-table tbody th:first-child {width: 16%;}
 .chart-table tbody td {width: 28%; padding: 25px 10px; font-size: 0.8rem;}
 .chart-table-link img {margin-bottom: 0.4rem;}
 .chart-table-payment li {padding: 3px; margin-bottom: 0.2rem; border-radius: 3px;}
 .chart-table-payment li:last-child {margin-bottom: 0;}
 .chart-table-price {font-size: 0.9rem;}
 .chart-table-btn {padding: 10px 0; border-radius: 5px;}
 .maru-sankaku {max-width: 30px;}
}

/*********失敗しないポイント部分**********/
.point-container {max-width: var(--main-width); margin: auto; margin-bottom: 50px;}
.point-container h2 {text-align: center; font-size: 1.8rem; margin-bottom: 20px;}
.point-item {background-color: #fff; border-radius: 5px; padding: 25px 20px; margin-bottom: 20px;}
.point-item-head {display: flex; margin-bottom: 20px;}
.point-item:last-child {margin-bottom: 0;}
.point-tag {background-color: #006DF1; display: inline-block; padding: 7px 10px; border-radius: 18px; color: #fff; margin-right: 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.point-title {color: #006DF1; font-weight: bold; font-size: 1.6rem;padding:0.5em 0;line-height:1.4;}
.point-text {text-align: justify; font-size: 1rem; line-height: 1.8;}
@media screen and (max-width:480px) {
 .point-container {margin-bottom: 40px; padding: 0 5px;}
 .point-container h2 {text-align: center; font-size: 1.3rem; margin-bottom: 15px;}
 .point-item {padding: 15px; margin-bottom: 20px;}
 .point-item-head {margin-bottom: 10px;}
 .point-tag {margin-right: 20px;}
 .point-title {font-size: 1.2rem;}
 .point-text {font-size: 1rem; line-height:2;}
}

/***********Q&A(よくある質問)*************/
.question-container {max-width: var(--main-width); margin: auto; margin-bottom: 5rem; padding: 0 5px;}
.question-container h2 {text-align: center; font-size: 1.8rem; margin-bottom: 20px;}
.question-box {background-color: #fff; font-size: 1.4rem; margin-bottom: 0.8rem;}
.question-box:last-child {margin-bottom:0;}
.question-text {padding: 15px 15px 15px 5%; cursor: pointer; background-color: #006DF1; display: block; font-weight: bold; color: #fff; position: relative;}
#question-toggle,#question-toggle2,#question-toggle3,#question-toggle4,#question-toggle5 {display: none;}
.checked1,.checked2,.checked3,.checked4,.checked5 {display:none; padding:0;}
#question-toggle:checked ~ * .checked1,#question-toggle2:checked ~ * .checked2,#question-toggle3:checked ~ * .checked3,#question-toggle4:checked ~ * .checked4,#question-toggle5:checked ~ * .checked5 {display:block; padding: 15px 5%; font-size: 1rem; text-align: justify; line-height: 1.8;}
.list-icon {position: absolute; right: 2%; top: 33%;}

@media screen and (max-width:480px){
.question-container {margin-bottom: 4rem;}
.question-text {font-size: 1rem;}
.answer-text {font-size: 0.8rem;}
#question-toggle:checked ~ * .checked1,#question-toggle2:checked ~ * .checked2,#question-toggle3:checked ~ * .checked3,#question-toggle4:checked~*.checked4,#question-toggle5:checked~*.checked5 {display:block; padding: 5%;}
.list-icon {right: 6%;}
}

/*************footerの部分***************/
.footer-list {max-width: var(--main-width); padding: 30px; margin: auto;}
.footer-list ul {display: flex; align-items: center; justify-content: center;}
.footer-list ul li {padding-right: 20px; margin-right: 20px;}
.footer-list ul li:last-child {padding:0; margin:0;}
.footer-list ul li a {text-indent: none; color: #fff; font-weight: bold;}

@media screen and (max-width:480px) {
 .footer-list {padding: 20px 10px; font-size: 0.8rem;}
 .footer-list ul li {padding-right: 5px; margin-right: 5px;}
}

.fv-container{position:relative;}
.fv-container::after{content:"ＰＲ";width:2.5em;text-align:center;font-weight:bold;font-size:20px;position:absolute;right:5px;top:5px;line-height:1;padding:5px;border:1px solid #333;color:#333;}


.midashi{background-color:#fff;margin-top:-30px;}
@media screen and (max-width:480px) {
.midashi{margin-top:0;}
}
.midashi>img{margin:0 auto;}

.mainContents p{margin:1em 20px;line-height:1.5em;font-size:18px;}
.maincontents>img{width:calc(100% - 10px);margin:auto;box-sizing:border-box;}
#RANKING_BOTTOM{background-color:#fff;margin:50px auto;padding:50px 0;}
#RANKING_BOTTOM>*{width:100%;max-width:1000px;margin:auto;}
#RANKING_BOTTOM>.rankingDetail:nth-of-type(n+2){margin-top:50px;}
.rankingDetail>table{width:calc(100% - 10px);margin:auto;border-collapse:collapse;border:1px solid #006df1;}
.rankingDetail>table>tbody>tr>th,.rankingDetail>table>tbody>tr>td{padding:10px 0;border:1px solid #006df1;}
.rankingDetail>table>tbody>tr>th{width:50%;background-color:#006df1;color:#fff;}
.rankingDetail>table>tbody>tr>td{text-align:center;}


/***********退職代行サービスとは*************/
.toha-container {max-width: var(--main-width); margin: auto;background-color: #006DF1;}
.toha-tittle {font-size: 2.4rem; font-weight: bold; padding-top: 2.5rem; text-align: center;letter-spacing: 3px; color: #fff;}
.toha-tittle span {font-size: 2.8rem;}
.toha-midasi {margin: auto auto 1.3rem auto;}
.toha-textarea {padding: 25px 25px 45px 25px;}
.toha-main-text {font-size: 2.8rem; letter-spacing: 1.8px; line-height: 1.6; font-weight: bold; text-align: center;}
.toha-textarea img {max-width: 80%; margin: auto;}
.toha-textarea p {color: #fff;}
.toha-textarea p:last-child {margin-bottom:0;}
.toha-textarea p span {background: #deba5a; color:#001f45; padding: 0.2rem 0.5rem; margin-right: 5px;}
.yellow-underline {background: linear-gradient(transparent 60%, yellow 30%); display: inline;}
.toha-sub-text {line-height: 2; letter-spacing: 1.3; font-size: 1.2rem; padding: 0 3rem;}
.toha-sub-text-last {margin-bottom: 2rem;}
@media screen and (max-width:480px){
	.toha-midasi {margin-bottom: 0.5rem;}
	.toha-tittle {font-size: 1.6rem;}
	.toha-tittle span {font-size: 2rem;}
	.toha-textarea {max-width: 100%; padding: 0.6rem 0.6rem 2rem 0.6rem; margin: auto;}
	.toha-main-text {font-size: 1.1rem; line-height: 1.8}
	.toha-textarea img {max-width: 100%; margin: 0.5rem 0;}
    .toha-sub-text {line-height: 1.8; letter-spacing: 1.3; margin-bottom: 0.1rem; font-size: 0.9rem; padding: 0 0.5rem;}
    .toha-sub-text-last {margin-bottom: 0.9rem;}
}

/**********年々利用している人の部分*********/
.users-container {max-width: var(--main-width); margin: auto; background: #fff; padding-top: 2rem;}
.users-midasi {max-width: 80%; height: auto; margin: auto;}
.users-textarea {padding: 25px 25px 45px 25px;}
.users-main-text {text-align: center; font-weight: bold; font-size: 2.4rem; line-height: 2; letter-spacing: 3; margin-bottom: 1rem;}
.users-title {font-weight:bold;}
.graph-img {max-width: 75%; height: auto; margin: auto; margin-bottom: 2.5rem;}
.users-sub-text {padding: 0 3rem; font-size: 1.3rem; letter-spacing: 3; line-height: 2;}
.users-one-word {font-weight: bold; color:#001f45; text-align: center; font-size: 1.8rem; margin: 2rem;}
.users-one-word span {border-bottom: 2px solid #001f45;}
.users-yellow-underline {background: linear-gradient(transparent 60%, yellow 30%); display: inline;}
@media screen and (max-width:480px) {
 .users-title {font-size: 1.2rem; text-align: center; margin-bottom: 1.5rem;}
 .users-textarea {padding: 2rem 0.6rem 2rem 0.6rem;}
 .users-main-text {font-size: 1.1rem; margin-bottom: 0.6rem; letter-spacing: 1.5; line-height:2;}
 .users-midasi {margin-bottom: 1rem;}
 .graph-img {margin-bottom: 0.9rem;}
 .users-sub-text {letter-spacing: 3; line-height: 1.8; font-size: 0.9rem; padding: 0 0.5rem; margin-bottom: 1.5rem;}
 .users-second-text {text-align: center; font-size: 2rem; font-weight: bold; color: #006DF1; margin: 1rem 0; letter-spacing: 3;}
 .users-one-word {margin: 1rem 0 1.5rem 0; font-size: 1.1rem;}
}

/*************メリット・デメリットの部分*********/
.procon-container {max-width: var(--main-width); margin: auto; margin-bottom: 5rem;}
.procon-box {background:#D4E1F1; color: #000; padding: 45px 25px 45px 25px;}
.procon-img-pc {display: block;}
.procon-img-sp {display: none;}
.merit-head,.demerit-head {background: #DEBA5A; font-weight: bold; color: #fff; text-align: center; position: relative; font-size: 1.7rem; padding: 0.9rem; border-radius: 45px; margin-bottom: 3.3rem; letter-spacing: 2;}
.merit-head:before,.demerit-head:before {position: absolute; content: ""; top: 100%; left: 50%; margin-left: -30px; border: 30px solid transparent; border-top: 30px solid #DEBA5A;}
.merit-box,.demerit-box {margin-bottom: 2.7rem;}
.demerit-area .demerit-box:last-child {margin-bottom: 0;}
.merit-title,.demerit-title {font-weight: bold; font-size: 1.7rem; margin-bottom: 1.5rem; letter-spacing: 2;}
.merit-title img,.demerit-title img {display: inline-block; max-width: 40px; max-height: 40px; vertical-align: middle; margin-right: 1rem;}
.merit-textarea,.demerit-textarea {background: #fff; color: #000; padding: 1.8rem; line-height: 2; letter-spacing: 2.6; font-size: 1.2rem;}
@media screen and (max-width:480px) {
.procon-box {padding: 25px 25px 40px 25px;}
.procon-img-pc {display: none;}
.procon-img-sp {display: block;}
.merit-head,.demerit-head {font-size: 1.4rem; padding: 0.3rem; border-radius: 45px; margin-bottom: 2.3rem; letter-spacing: 2;}
.merit-head:before,.demerit-head:before {position: absolute; content: ""; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #DEBA5A;}
.merit-box,.demerit-box {margin-bottom: 2.7rem;}
.merit-title,.demerit-title {font-size: 1.4rem; letter-spacing: 1.3; margin-bottom: 1.2rem;}
.merit-title img,.demerit-title img {display: inline-block; max-width: 35px; max-height: 35px; margin-right: 0.5rem;}
.merit-textarea,.demerit-textarea {padding: 1.5rem; letter-spacing: 2.2; line-height: 1.8; font-size: 0.9rem;}
.demerit-area .demerit-box:last-child {margin-bottom: 0;}
}