@charset "utf-8";
/* CSS Document */
/* TSC労務監査 --------------------*/

body{
	background: #F1E8CC;
	color: #383837;
	font-family: "Zen Kaku Gothic New", sans-serif;
  	font-weight: 400;
  	font-style: normal;
	margin: 0;
}
ul {
	list-style: none; /* 点を消す */
	padding-left: 0;  /* デフォルトの左側余白を消す場合 */
	margin: 0;        /* 外側余白もリセットする場合 */
}
h2 {
	letter-spacing: 0.1em;
	text-align: center;
	font-size: 34px;
}
a {
	text-decoration: none;
}
.pc {display: block !important;}
.sp {display: none !important;}


/*========= 共通 ===============*/
.main{
	width: 100%;
	letter-spacing: 0.025em;
}
.inner1160{
	max-width: 1160px;
	margin: 0 auto;
	width: 90%;
}
.flex {
	display: flex;
    align-items: center;
    justify-content: space-between;
}


/*========= メイン ===============*/
.romukansa {
	overflow: hidden;
    width: 100%;
}
.romukansa-header {
	padding: 50px 0 60px;
    background-color: #FFF1E4;
}
.romukansa_mv{
	max-width: 1160px;
	margin: 0 auto;
	width: 77%;
}
.rk-title{
	margin-bottom: 20px;
	display: flex;
}
.rk-title img {
	width: 100px;
	object-fit: contain;
	margin-right: 20px;
}
.rk-title p {
	font-size: 20px;
    font-weight: bold;
    color: #616161;
}
h1 {
	font-size: 30px;
    font-weight: bold;
    color: #003E85;
}
em {
	font-family: "Inter", sans-serif;
    font-size: 44px;
    font-style: normal;
    letter-spacing: 0.1em;
    background-image: radial-gradient(circle at center, #FF9148 20%, transparent 20%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: 48.5px 0.3em;
    padding-top: .3em;
    line-height: 85px;
}
.mv-title {
	width: 53%;
}
.mv-title p {
	font-size: 17px;
    line-height: 27px;
    width: 90%;
	font-weight: 500;
}
.mv_img {
	position: relative;
}
.mv_img img {
    width: 550px;	
	position: absolute;
    bottom: -67px;
    right: -80px;
}

/*========= 注目するポイント ===============*/
.check {
	padding: 80px 0;
	text-align: center;
	background-image: url("images/search.png");
	background-repeat: no-repeat;
    background-size: 300px;
}
.kantokusyo {
	font-size: 0.7em;
	color: #383837;
	position: relative;
}
.title-color {
	color: #003E85;
	margin-bottom: 40px;
}
.check p {
	font-size: 15px;
	margin-bottom: 30px;
	font-weight: 500;
}
.kantokusyo::before, .kantokusyo::after {
    width: 2px;
    height: 70px;
    content: "";
    background-color: #FF9148;
}
.kantokusyo::before {
	position: absolute;
    left: -190px;
    top: 20px;
	transform: rotate(-30deg)
}
.kantokusyo::after {
	position: absolute;
    right: -190px;
    top: 20px;
	transform: rotate(30deg)
}
.check-item {
	width: 700px;
	margin: 0 auto;
}
.check-item .flex {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.check-item ul li {
	display: flex; /* 中の .card-body を引き伸ばすために必須 */
}
.card-body {
	width: 130px;
	height: 130px;
	background-color: white;
	border-radius: 50%;
  	display: flex;
  	flex-direction: column;
  	align-items: center;
  	justify-content: center;
	padding: 40px;
}
.check-item ul li img {
	max-width: 45%;
    height: auto;
    margin-bottom: 12px;
}
.check-item ul li p {
	margin: 0;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}

/*========= 可視化するメリット ===============*/
.merit {
	background-color: #FFFCF9;
	padding: 80px 0 40px;
	position: relative;
}
.merit ul {
	width: 610px;
	margin: 0 auto;
}
.merit ul li {
	display: flex;
    align-items: center;
	padding: 25px 0;
}
.merit ul li:first-child {
	border-bottom: solid 1px #D2D7E9;
}
.merit ul li img {
	width: 90px;
	margin-right: 4%;
}
.merit ul li p {
	font-weight: 600;
}
.arrow {
	width: 100%;
    height: 110px;
    background: linear-gradient(to bottom left, #FFFCF9 50%, transparent 50%) top left / 50% 80% no-repeat, linear-gradient(to bottom right, #FFFCF9 50%, transparent 50%) top right / 50% 80% no-repeat;
    position: absolute;
    bottom: -110px;
}

/*========= 取り組んだ結果 ===============*/
.result {
	padding: 80px 0;
	background-image: url("images/yajirushi.png");
	background-repeat: repeat;
}
.result-title {
	text-align: center;
    margin: 80px 0;
    color: #003E85;
    font-size: 70px;
    font-weight: bold;
	letter-spacing: 0.1em;
}
.result-title span {
	font-size: 30px;
}
.result ul {
	justify-content: center;
    margin: 0 auto;
}
.result li {
	background-color: white;
    padding: 10px;
    border-radius: 15px;
    position: relative;
    margin: 10px 30px 70px;
    width: 300px;
}
.result li p {
	font-weight: bold;
    text-align: center;
    letter-spacing: 0.1em;
    font-size: 20px;
}
.result ul li::before {
	content: "";
    display: inline-block;
    width: 60px;
    height: 90px;
    background: url(images/medal.png) no-repeat center center / contain;
    position: absolute;
    top: -35px;
    left: -20px;
}
.result-antei {
	display: flex;
	justify-content: center;
	align-items: center;
    margin: 0 auto;
}
.result-img {
	width: 400px;
    margin-right: 40px;
}
.result-img img {
	width: 100%;
}
.result-text p {
	font-size: 43px;
    font-weight: bold;
    color: #FF9148;
	font-family: "Zen Maru Gothic", sans-serif;
}

/*========= TSC労務監査の実施後 ===============*/
.explain {
	background-color: #FFFCF9;
	padding: 80px 0;
}
.explain-container {
	width: 770px;
	margin: 0 auto;
	justify-content: center;
}
.explain-text {
	margin-right: 70px;
    width: 71%;
}
.explain-text h3 {
	font-size: 26px;
    letter-spacing: 0.1em;
}
.explain-text p {
	line-height: 2em;
	font-weight: 500;
}
.explain-text p span {
	border-bottom: solid 2px #ff9148;
}
.explain-img {
	width: 29%;
}
.explain-img img {
	width: 100%;
}

/*========= TSC労務監査 ===============*/
.romukansa-test {
	padding: 60px 0;
}
.rktest-container {
    width: 90%;
	margin: 0 auto;
}
.rktest-container h2 {
	margin-bottom: 8px;
	
}
/* ==== 会員様特別価格 ==== */
.member_price {
	text-align: center;
}
.member_price p {
	display: inline-block;
    position: relative;
    height: 44px;
    line-height: 44px;
    padding: 0 30px;
    box-sizing: border-box;
    background-color: #003E85;
    color: white;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin: 0 auto;
    width: 230px;
}
.member_price p:before, .member_price p:after {
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 1;
}
.member_price p:before {
  top: 0;
  left: 0;
  border-width: 22px 0px 22px 13px;
  border-color: transparent transparent transparent #F1E8CC;
  border-style: solid;
}

.member_price p:after {
  top: 0;
  right: 0;
  border-width: 22px 13px 22px 0px;
  border-color: transparent #F1E8CC transparent transparent;
  border-style: solid;
}
/* ==== ここまで　会員様特別価格 ==== */

.rktest_btn_wrap {
	width: 90%;
	margin: 40px auto 80px;
	justify-content: center;
    gap: 50px;
	align-items: stretch;
	text-align: center;
}
.rktest_btn_conteiner {
	width: 38%;
}
.rktest_btn_contents {
	background-color: white;
	box-shadow: 3px 3px 5px #808080c4;
	position: relative;
    padding-bottom: 40px;
    height: 100%;
	border-radius: 15px;
}
.rktest_btn_title {
	background-color: #FF4040;
    color: white;
	border-radius: 15px 15px 0 0;
}
.rktest_btn_wrap .rktest_btn_conteiner:nth-of-type(2) .rktest_btn_contents .rktest_btn_title {
	background-color: #C6AF49;
}
h4 {
	padding: 7px 0 19px;
    font-size: 28px;
    letter-spacing: 0.3em;
    margin: 0;
    line-height: 26px;
}
h4 span {
	font-size: 15px;
    letter-spacing: 0.2em;
}
.price {
    font-weight: 800;
	font-size: 17px;
	margin-bottom: 60px;
	position: relative;
}
.price em {
    background-image: none;
    font-size: 3em;
    letter-spacing: 0em;
}
.price > p em:first-child {
	font-size: 4em;
}
.price ::after {
	content: "";
    border-bottom: 4px solid #FF4040;
    position: absolute;
    left: 39%;
    bottom: -20px;
    width: 20%;
    border-radius: 5px;
}
.rktest_btn_wrap .rktest_btn_conteiner:nth-of-type(2) .rktest_btn_contents .price ::after {
	border-bottom: 4px solid #C6AF49;
}
.question_conteiner.pc {
	min-height: 85px;
}
.question_contents.flex {
	justify-content: center;
	gap: 15px;
}
.question p {
	background-color: #B5B5B5;
    padding: 3px 8px;
    color: white;
    font-weight: 600;
    letter-spacing: 0.1em;
}
.question_contents p {
	margin-bottom: 0;
    margin-top: 10px;
}
.question_contents > p:last-child {
	font-weight: 600;
    font-size: 18px;
}
span.list_maru {
	color: #FF4040;
	margin-right: 3px;
}
.rktest_btn_wrap .rktest_btn_conteiner:nth-of-type(2) .rktest_btn_contents .rk_content span.list_maru {
	color: #C6AF49;
}
.rk_content {
	font-weight: 600;
	margin-bottom: 8px;
}
p.rk_content:first-child {
    margin-bottom: 0;
}
p.rk_content.rk_content_syosai {
	margin-top: 40px;
}
.remarks {
	font-size: 14px;
    letter-spacing: 0;
	font-weight: 500;
	margin-top: 15px;
}
.pdf_dl {
	color: #383837;
    display: flex;
    align-items: center;
    letter-spacing: 0;
	justify-content: center;
}
.pdf_dl:hover {
	color: -webkit-link;
}
.pdf_dl img {
	width: 25px;
	margin-right: 5px;
}
.rk_btn_p {
	width: 100%;
	font-size: 13px;
    font-weight: 500;
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
}
.rk_btn {
    background-color: #FF4040;
    color: white;
    font-weight: 800;
    padding: 15px 70px;
	border-radius: 45px;
	position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 34%;
}
.rk_btn:hover {
    background-color: #003E85;
    transition: 0.3s;
}
.caution {
    font-size: 13px;
	margin-top: 5px;
}
.sample {
    background-color: #eeeeee;
    width: 190px;
    margin: 0 auto 50px;
    padding: 1px 10px;
    font-size: 12px;
    font-weight: 500;
}
.syosai_btn {
    background-color: #C6AF49;
}
/*========= TEL & FAX ===============*/
.contact {
	width: 85%;
	margin: 0 auto;
}
.contact-box {
	width: 48%;
    height: 130px;
    background: #6898CF;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    border-radius: 15px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.contact-box img {
	width: 40px;
    margin: -8px 10px 0px 0px;
}
.contact-box p {
	margin: 0;
}
.time {
	font-size: 13px;
    margin-top: -4px;
    display: block;
}
.fax {
	font-size: 20px;
    padding-right: 10px;
}

footer {
    color: #808080;
    text-align: center;
    font-weight: 500;
    margin-bottom: 25px;
    letter-spacing: 0.05em;
}
@media (max-width: 960px){ /*--　タブレット表示　--*/
	/*========= フッター下・空のdiv TOPへ戻るボタン調整===============*/
	.pc {display: none !important;}
	.sp {display: none !important;}
	
	.romukansa-header {
		padding-bottom: 300px;
	}
	.romukansa_mv {
		width: 90%;
	}
	.mv-title {
		width: 100%;
	}
	.mv-title h1 {
		font-size: 2.3em;
		margin-bottom: 0;
	}
	em {
		font-size: 1.5em;
    	background-size: 1.05em 0.3em;
    	letter-spacing: 0.05em;
	}
	.mv-title p {
		width: 60%;
	}
	.mv_img img {
		bottom: -304px;
		width: 450px;
		right: -40px;
	}
	
	/*--　注目するポイント　----------*/
	.check_container {
		width: 90%;
		margin: 0 auto;
	}
	h2 { 
		letter-spacing: 0.05em;
		font-size: 29px;
	}
	.kantokusyo::before {
		left: -160px;
	}
	.kantokusyo::after {
		right: -160px;
	}
	.check_container > p:first-of-type {
		text-align: left;
	}
	.check-item {
		width: 100%;
	}
	.check-item .flex {
		justify-content: center;
		gap: 15px;
	}
	.card-body {
    	padding: 15px;
	}
	.check-item ul li p {
		font-size: 13.5px;
	}
	
	/*--　可視化するメリット　----------*/
	.merit ul {
		width: 90%;
	}
	.merit ul li img {
		width: 14%;
	}
	
	/*--　取り組んだ結果　----------*/
	.result_container {
		width: 90%;
		margin: 0 auto;
	}
	.result-title {
		margin-bottom: 60px;
	}
	.result ul {
		margin-bottom: 60px;
	}
	.result li {
		margin: 0 4%;
    	width: 42%;
	}
	.result ul li::before {
		width: 50px;
		height: 70px;
	}
	.result_container > div.flex {
		display: block;
	}
	.result-img {
		width: 420px;
		margin: 0 auto;
	}
	.result-text p {
		text-align: center;
    	font-size: 3em;
    	margin-top: 20px;
	}
	
	/*--　監査の実施後　----------*/
	.explain {
		padding: 60px 0;
	}
	.explain-container {
		width: 90%;
	}
	.explain > div.flex {
		display: block;
	}
	.explain-text {
		margin-right: 0;
        width: 100%;
	}
	.explain-img {
		width: 170px;
		display: block;
        margin-left: auto;
	}
	
	/*--　TSC労務監査　----------*/
	.rktest_btn_wrap.flex {
		margin-bottom: 150px;
        width: 100%;
        gap: 20px;
	}
	.rktest_btn_conteiner {
		width: 48%;
	}
	.rktest_btn_contents {
		padding-bottom: 20px;
	}
	.price em {
		font-size: 2.7em;
	}
	.rk_btn {
		font-size: 0.8em;
	}
	p.rk_btn_p {
		font-size: 11.5px;
    	letter-spacing: 0;
	}
	.rktest-container > div.flex:last-child {
		display: block;
	}
	.contact-box, .contact-box {
		width: 100%;
	}
	
	.contact {
	width: 100%;
	}
}


@media (max-width: 560px){ /*--　スマホ設定　--*/
	.pc {display: none !important;}
	.sp {display: block !important;}
	
	html, body {
        overflow-x: hidden;
        width: 100%;
    }
	.main {
        overflow-x: hidden;
    }
	.romukansa-header {
        padding-bottom: 0; /* 下部の余白を適正に */
    }
    .mv_img img {
        position: static;   /* 絶対配置を解除して下に流す */
        width: 100%;        /* 画面幅いっぱいに拡大縮小 */
        max-width: 350px;   /* 大きくなりすぎない上限 */
        display: block;
        margin: 20px auto 0;
        right: 0;
    }
	em {
		font-size: 1.2em;
		line-height: 1.7em;
	}
	.mv-title p {
		margin-bottom: 30px;
		width: 100%;
	}
	h2.title-color {
		font-size: 2.2em;
		margin-top: 0;
		line-height: 1.2em;
	}
	.kantokusyo::before, .kantokusyo::after {
		display: none;
	}
	h2 {
		margin-top: 0;
	}
	.check p {
		font-size: 1em;
	}
	.check-item .flex {
        flex-wrap: wrap; /* 画面幅が狭い時に折り返す */
        justify-content: center;
        gap: 10px;
    }
	.check-item ul li p {
		line-height: 1.3em;
	}
	.check-item ul li img {
		width: 50%;
		margin-bottom: 7px;
	}
	.card-body {
		padding: 20px;
        width: 80px;
        height: 80px;
	}
	
	.result-title {
		line-height: 0.9em;
		margin-top: 30px;
	}
	.result {
		padding-bottom: 40px;
	}
	.result .flex {
        flex-wrap: wrap; /* 子要素を折り返せるようにする */
    }
	.result ul.flex {
        display: block; /* 横並びを解除 */
        width: 100%;
    }
	.result li {
		margin: 0 auto 50px !important; /* 中央寄せにして下に余白を作る */
        width: 80% !important;
	}
	.result ul li::before {
		left: 50%;
        transform: translateX(-50%); /* メダルアイコンを中央に */
        top: -40px;
	}
	.result-img {
		width: 90%;
	}
	.result-text p {
		font-size: 2.4em;
	}
	
	.explain > div.flex {
		display: block;
	}
	.explain {
		padding-bottom: 60px;
	}
	.explain-text {
		width: 100%;
		margin-right: 0;
	}
	.explain-img {
		width: 50%;
    	margin: 40px auto 0;
	}

	.rktest_btn_wrap.flex {
		display: block;
		margin-bottom: 100px;
	}
	.rktest_btn_conteiner {
		width: 100%;
	}
	.price em {
		font-size: 3em;
	}
	.rktest_btn_conteiner:first-child {
		margin-bottom: 40px;
	}
	.rktest_btn_contents {
		padding-bottom: 100px;
	}
	.personal-info-content {
		background-color: white;
	}
	.kani_qc {
		margin-bottom: 50px;
	}
	.rktest-btn {
		width: 90%;
	}
	.rk_btn {
        width: 80% !important; /* スマホではボタンを横いっぱいに広げる */
        padding: 15px 0;       /* 左右の固定パディングを無くす */
        text-align: center;
    }

    /* 5. TEL & FAX：100%の幅にパディングや境界線が足されてあふれるのを防ぐ */
    .contact-box {
        box-sizing: border-box; /* 幅の計算を狂わせない */
        font-size: 28px;        /* 文字が大きすぎてはみ出るのを防ぐ */
        padding: 10px;
    }
}
@media (max-width: 430px) { /*--　430px以下の時　--*/
		/*業種別リンク 詳しくはこちら*/
		
	}