@charset "utf-8";

body {
	font-family: "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka,
		"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 18px;
	color: #000;
	background-color: #fff;
	line-height: 1.7;
	text-align: justify;
}

body .sp-item {
	display: none !important;
}

body .pc-item {
	display: block !important;
}

@media screen and (max-width: 640px) {
	body {
		font-size: 16px;
		line-height: 1.5;
	}


	body .sp-item {
		display: block !important;
	}

	body .pc-item {
		display: none !important;
	}
}

h2 {
	text-align: center;
	padding-bottom: 1em;
}

img {
	width: auto;
	max-width: 100%;
	height: auto;
}

section {
	padding: 1.5em 0 2em;
}
@media screen and (min-width: 641px) {
section {
	padding: 2.5em 0 3em;
}
}

.wrap {
	width: 89%;
	text-align: justify;
	margin: 0 auto;
}
@media screen and (min-width: 641px) {
.wrap {
	max-width: 850px;
	}
}

.txt {
	padding: 1.2em 0;
}

.b {
	font-weight: bold;
}

.red {
	color: #F30000;
}

.hl {
	background: linear-gradient(transparent 60%, #FFFF00 60%);
}

.ul-red {
text-decoration: underline;
text-decoration-color: #F30000;
}

.font-s {
	font-size: 0.8em;
}

.font-ss {
	font-size: 0.6em;
}

p + p {
	margin-top: 0.7em;
}

picture + p {
	padding-top: 1em;
}

.alc {
	text-align: center;
}

.flr {
	float: right;
}

@media screen and (min-width: 768px) {
.pc-center {
	text-align: center;
}
}

/******************************
 header
******************************/
.bg-light {
	background-color: #F7F7F7 !important;
}

.navbar {
 padding-top: 0;
 padding-bottom: 0;
	box-shadow: 0 0 4px rgba(0,0,0,0.2);
}

@media screen and (min-width: 768px) {
.navbar-nav {
	width: 100%;
 max-width: 850px;
	justify-content: space-between;
}
}

.navbar-light .navbar-nav .nav-link {
 color: #171717;
}

@media screen and (max-width: 767px) {
.navbar > .container {
	justify-content: right;
}
}

@media screen and (min-width: 768px) {
.navbar-expand-md .navbar-collapse {
 justify-content: center;
}
}

.navbar-toggler {
 border: none;
}
.navbar-toggler:focus {
 box-shadow: none;
}

.nav-link {
	font-size: 14px;
}


/******************************
 ボタン
******************************/

.btn-area {
	margin: 0 auto;
}

.tokucho .btn-area {
	width: 80%;
	max-width: 516px;
}

.search .btn-area {
	width: 94%;
	max-width: 462px;
}

.btn {
	display: block;
}

.btn img:hover,
.btn-area:hover,
.cta-btn-area img:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

/******************************
 contents
******************************/

.main {
	padding-top: 38px;
	padding-bottom: 0;
}
@media screen and (min-width: 641px) {
.main {
	padding-top: 40px;
}
}

.main img {
	width: 100%;
	max-width: 950px;
	display: block;
	margin: 0 auto;
}

.prehead {
	background: #005C34;
}

@media screen and (min-width: 641px) {
h1.top-page {
	background: url(../images/main_pc_bg.png) no-repeat center top;
	background-size: cover;
}
}

.rank_area {
	width: 94%;
	max-width: 850px;
	margin: 0 auto;
}

@media screen and (min-width: 768px) {
.rank_area {
	display: flex;
	justify-content: space-between;
}
}

.rank_area img {
	max-width: 100%;
	margin: 0 auto;
	display: block;
}

.rank_area .box {
	border: 1px solid #ababab;
}

@media screen and (max-width: 767px) {
.rank_area .box {
	margin-bottom: 1em;
}
}

@media screen and (min-width: 768px) {
.rank_area .box {
	width: 32.5%;
}
}

.rank_area .box h3 {
	background: #005c34;
}

.rank_area .box .inner {
	padding: 1em;
}

.rbox1 p.alc {
	font-weight: bold;
}
@media screen and (max-width: 640px) {
.rbox1 p.alc {
	font-size: 1.2em;
}
}

.rbox1 .inner	p + p {
	margin-top: 0;
}

.rank-logo {
	width: 85%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	column-gap: 20px;
	padding: 16px;
	border-bottom: 1px solid #ababab;
}
@media screen and (min-width: 768px) {
.rank-logo {
	width: 95%;
	column-gap: 10px;
	padding: 20px 0;
}
}

.rank-logo:last-child {
	border-bottom: none;
}

.rank-logo-l {
	width: 25%;
}

.cta {
	background: #ebf7f1;
	padding: 3em 0;
}

.cta-box {
	width: 94%;
	max-width: 850px;
	margin: 0 auto;
	background: #fdffd9;
	border: 3px solid #c9ad62;
	padding: 1em 0;
}
@media screen and (min-width: 641px) {
.cta-box {
	padding: 1.5em 0;
}
}

.cta-btn-area {
	padding: 0 1em 1em 1em;
}

@media screen and (min-width: 641px) {
.cta-btn-area {
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding: 0 1em 1em 1em;
}

.cta-btn-area p {
	width: 48%;
	text-align: center;
}

.cta-btn-area p img {
	max-width: 100%;
}

.cta-btn-area p + p {
	margin-top: 0;
}
}

.teigi {
	background: #F3F5F4;
}

#faq {
		background-color: #f3f4f5;
}

.faq {
		width: 80%;
		margin: 24px auto;
}

.accordion-flush,
.accordion-item,
.faq-box {
		overflow: hidden;
		border-radius: 12px;
}

.accordion-flush .accordion-item.faq-box {
		border-radius: 12px;
}

.accordion-header {
		border-radius: 24px;
}

.accordion-item {
		margin: 24px 0px;
		border-radius: 12px;
}

.accordion {
		border-radius: 12px;
}

.faq-mark {
		margin-right: 8px;
}

.faq-box .accordion-button:not(.collapsed)::after {
		background-image: url(images/plus.svg);
		transform: rotate(-135deg);
}

.faq-box .accordion-button::after {
		background-image: url(images/plus.svg);
}

.search {
	background: #005C34;
}

.search .wrap {
	background: #FFF;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.7);
}

@media screen and (max-width: 640px) {
.search .wrap {
	width: 97%;
}
}

.search .wrap .inner {
	width: 94%;
	max-width: 790px;
	margin: 0 auto;
	padding: 1em 0 1.5em;
}

.search h3 {
	padding: 0.5em 0 1em;
	text-align: center;
}

.search-area {
	display: flex;
	flex-wrap: wrap;	justify-content:space-between;
	column-gap: 0.5em;
}
.search-area.b-type {
	justify-content: center;
}

.radio-area {
	background: #F2F2F2;
	border-radius: 0.25rem;
	padding: 0.8em 0.8em 0.5em;
	margin-bottom: 1em;
}
@media screen and (max-width: 767px) {
.radio-area {
	width: 48%;
}
}
@media screen and (min-width: 768px) {
.search-area.b-type .radio-area {
	width: 200px;
}
}

.radio-area:has(input:checked) {
	color: #FFF;
	background: #05BF52;
}

.radio-area .form-check label {
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1;
}
@media screen and (max-width: 767px) {
.radio-area .form-check label {
	font-size: 4.2vw;
}
}

/******************************
 footer
******************************/

footer {
	background: #005C34;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	padding: 1em 0 1.5em;
}

ul.footer-nav {
 max-width: 950px;
	margin: 0 auto;
	display: flex;
 flex-wrap: wrap;
 justify-content: center;
 padding-left: 0;
}

.footer-nav li {
	padding: 0.5em 2em;
}

.footer-nav li a:hover,
.footer-nav li a:focus {
color: #fff;
}

footer a {
	color: #fff;
	text-decoration: none;
}

p.copy {
	font-size: 0.9em;
	margin-top: 1.5em;
}


/******************************
 個人事業主・法人ページ
******************************/

body.corporation,
body.sole {
	background: #F3F5F4;
}

@media screen and (min-width: 951px) {
	.main.solo_co h1 {
		background: url(../images/solo_co_main_bg.png) repeat-x top;
	}
	}

.introduction {
	padding: 1em 0 0;
}

.introduction .box {
	width: 94%;
	max-width: 850px;
	margin: 0 auto;
	background: #fff;
	padding: 2em;
}

.introduction .box .inner {
	width: 90%;
	max-width: 750px;
	margin: 0 auto;
}

.tokucho {
	padding-bottom: 1em;
}

.tokucho .box {
	width: 100%;
	max-width: 850px;
	margin: 0 auto 2.5em;
	border: 1px solid #B5B5B5;
	background: #fff;
}

.tokucho .box .inner {
	width: 91%;
	margin: 1.5em auto;
}

.tokucho .box img {
	display: block;
	margin: 0 auto;
}

.tokucho-flex {
	margin-bottom: 1em;
}

@media screen and (max-width: 767px) {
.tokucho .thumbnail {
	width: 75%;
	margin: 0 auto;
}
}

.tokucho h4 {
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin: 0.75em 0 0.25em;
}

.tokucho ul {
	padding-left: 0;
}

.tokucho ul li {
	padding-left: 28px;
}

.tokucho ul li.ol1 {
	background: url(../images/ol1.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol2 {
	background: url(../images/ol2.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol3 {
	background: url(../images/ol3.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol4 {
	background: url(../images/ol4.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol5 {
	background: url(../images/ol5.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol6 {
	background: url(../images/ol6.png) no-repeat 0px 2px;
	background-size: 22px;
}
.tokucho ul li.ol7 {
	background: url(../images/ol7.png) no-repeat 0px 2px;
	background-size: 22px;
}

.tokucho ul li + li {
	margin-top: 0.75em;
}

@media screen and (min-width: 768px) {
.tokucho .tokucho-flex {
	display: flex;
	justify-content: space-between;
}

.tokucho-l {
	width: 35%;
}
.tokucho-r {
	width: 62%;
}

.tokucho-l img {
	padding-top: 0.25em;
}

.tokucho .tokucho-r ul li {
	margin-left: 0;
	margin-right: 0;
	width: 100%;
}

.tokucho .tokucho-flex h4 {
	text-align: left;
	margin-top: 0;
 margin-left: -16px;
	padding-left: 16px;
}

.tokucho ul li {
	font-size: 17px;
}
}

.tokucho .table {
	border: 1px solid #ababab;
	text-align: center;
	margin: 2em 0 2.5em;
}

.tokucho .table thead {
	color: #FFF;
	background: #005C34;
}

.tokucho .table > :not(:last-child) > :last-child > * {
		border: none;
}

.tokucho .table th,
.tokucho .table td {
	vertical-align: middle;
}

@media screen and (max-width: 767px) {
.tokucho .table th,
.tokucho .table td {
	font-size: 4vw;
}
}

@media screen and (min-width: 768px) {
.tokucho .table th,
.tokucho .table td {
	padding: 0.8em;
}
}

.tokucho .comment {
	margin-bottom: 1em;
}

.kuchikomi h4,
.comment h4 {
	margin-bottom: 1em;
}

.kuchikomi-cont {
	display: grid;
	column-gap: 2%;
 grid-template-rows: auto auto;
	margin-bottom: 2em;
}
@media screen and (min-width: 768px) {
.kuchikomi-cont {
	column-gap: 3%;
}
}

.kuchikomi-cont.i-left {
	grid-template-columns: 26% 72%;
}
.kuchikomi-cont.i-right {
	grid-template-columns: 72% 26%;
}
@media screen and (min-width: 768px) {
.kuchikomi-cont.i-left {
	grid-template-columns: 15% 82%;
}
.kuchikomi-cont.i-right {
	grid-template-columns: 82% 15%;
}
}

.kuchikomi-txt {
	grid-column: 1 / 3;
}

@media screen and (min-width: 768px) {
.kuchikomi-img {
	grid-row: 1 / 3;
	}
.kuchikomi-cont.i-left .kuchikomi-txt {
	grid-column: 2 / 3;
}
.kuchikomi-cont.i-right .kuchikomi-txt {
	grid-column: 1 / 2;
}
}

.kuchikomi-cont.i-right .kuchikomi-img {
	grid-column: 2 / 3;
}

.kuchikomi-cont.i-right .kuchikomi-midashi {
	grid-column: 1 / 2;
}

@media screen and (max-width: 767px) {
.kuchikomi-cont {
	align-items: center;
}
}

.kuchikomi-midashi {
	font-size: 1.1em;
	font-weight: bold;
}

.kuchikomi-txt {
	margin-top: 0.5em;
}

/******************************
 terms,company,privacy
******************************/
.terms .main,
.company .main,
.privacy .main {
	width: 91%;
	max-width: 750px;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 2em;
	font-size: 14px;
}

.terms h1,
.company h1,
.privacy h1 {
	color: #005C34;
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 1em;
}

.terms h2 {
	font-size: 1.1em;
	font-weight: bold;
	text-align: left;
	margin-top: 1.5em;
	padding-bottom: 0.5em;
}

.company .table > :not(caption) > * > * {
    padding: 1.5rem 1rem;
}

.company th {
	background: #F7F7F7;
}

.link-none {
	pointer-events: none;
}

/******************************
 footer最下部固定
******************************/
html {
	height: 100%;
}
body {
	height: 100%;
}
footer {
	position: sticky;
	top: 100vh;
}
