table {
    border-collapse: collapse;
    margin-bottom: 20px;
}
th, td {
    border: 1px solid black;
    padding: 8px;
}
img {
    max-width: 100%;
    height: auto;
}
.maru_span {
	display: flex;
	align-items: center;
	justify-content: center;
}
.maru_span p {
	color: #ff5c22;
	font-weight: bold;
}
.maru_span img {
	width: 10%;
	margin: 0 5% 0 0;
}
td:has(.maru_span) {
    background-color: #fff8b0;
}
.time_tr td div {
    margin-top: 20%;
}
.random_table th, .random_table td {
    position: relative;
    text-align: center;
}
.anytime_time,
.friend_time,
.bridge_time,
.arigataya_time,
.yarikuri_time {
	position: absolute;
	content: "";
	background-color: red;
	color: #fff;
	font-weight: bold;
	line-height: 1.1;
	padding: 4px 5px;
	border-radius: 20px;
	right: 50%;
	top: 15%;
	text-align: center;
	transform: translateX(50%);
	white-space: nowrap;
    font-size: 13px;
}
.anytime_time::after,
.friend_time::after,
.bridge_time::after,
.arigataya_time::after,
.yarikuri_time::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	border-top: 10px solid red;
	border-bottom: 0;
	right: 50%;
	bottom: -6px;
	transform: translateX(50%);
}
.rank_ttl {
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.random_table th, .random_table td {
    width: 130px;
    vertical-align: middle;
    border-collapse: collapse;
    border: 1px solid #333;
    font-size: 16px;
}
.random_table {
	width: 100%;
	table-layout: fixed;
    left: -2%;
    position: relative;
}
.grf_div_t {
	background-color: #389eba;
	color: #fff;
	text-align: center;
	padding: 15px 0;
}
.grf_div_t1 {
	background-image: radial-gradient(circle at center, #fff631 15%, #0000 20%);
	background-position: top right;
	background-repeat: repeat-x;
	background-size: 1em 0.5em;
	padding-top: .4em;
	color: #fff631;
	margin-right: 5px;
	font-weight: bold;
}
.grf_div_t2 {
	background-color: #fff;
	color: #f25b29;
	border-radius: 10px;
	padding: 5px 10px;
	margin: 0 1%;
	font-weight: bold;
}
.grf_anytime, .grf_arigataya, .grf_friend, .grf_bridge, .grf_yarikuri {
	text-align: center;
	background-color: #fff;
	border: 2px solid;
	border-radius: 10px;
    padding: 10px;
}
.grf_anytime a, .grf_arigataya a, .grf_friend a, .grf_bridge a, .grf_yarikuri a {
    position: relative;
    text-decoration: none;
}
.grf_anytime a:hover, .grf_arigataya a:hover, .grf_friend a:hover, .grf_bridge a:hover, .grf_yarikuri a:hover {
    opacity: 1;
}
.grf_anytime a p, .grf_arigataya a p, .grf_friend a p, .grf_bridge a p, .grf_yarikuri a p {
	margin-top: 0;
}
.grf_anytime a img, .grf_arigataya a img, .grf_friend a img, .grf_bridge a img, .grf_yarikuri a img {
	position: absolute;
	width: 65%;
	padding: 0 3%;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.grf_anytime a span, .grf_arigataya a span, .grf_friend a span, .grf_bridge a span, .grf_yarikuri a span {
	color: #ff7345;
	font-size: 0.9em;
}
.grf_bridge {
    position: absolute;
    top: 14%;
    left: 0;
	z-index: 100;
}
.grf_friend {
	position: absolute;
	top: 25%;
	right: 0;
	z-index: 99;
}
.grf_anytime {
	position: absolute;
	top: 33%;
	right: 40%;
	z-index: 98;
}
.grf_yarikuri {
	position: absolute;
	top: 52%;
	right: 20%;
}
.grf_arigataya {
	position: absolute;
	top: 52%;
	left: 0;
}

.s_title {
	text-align: center;
}
.st_p-text {
	font-size: 1.2em;
	background-color: #399db9;
	border-radius: 50px;
	width: 85%;
	margin: 0 auto;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.st-text {
	font-size: 1.2em;
	color: #feec00;
}
.dotted-text {
	position: relative;
	display: inline-block;
	color: #3da0bf;
	border: 3px solid;
	padding: 0 10px;
	margin-bottom: 1%;
}
.dotted-text::before {
	content: "・・・・・・";
	position: absolute;
	left: -80%;
	top: 50%;
	transform: translateY(-50%);
}
.dotted-text::after {
	content: "・・・・・・";
	position: absolute;
	right: -80%;
	top: 50%;
	transform: translateY(-50%);
}

.grf_div {
	border: 2px solid #399db9;
	padding: 10px;
	width: 240px;
}

.grf_q {
	background-color: #399db9;
	color: #fff;
	display: inline-flex;;
	justify-content: center;
	width: 38.567px;
	padding-bottom: 4px;
}
.grf_text {
	margin-left: 10px;
	color: #399db9;
	border-bottom: 3px dotted;
}
.grf-scroll {
	overflow: scroll;
	margin-top: 2%;
}
.operation, .employment, .years {
	margin-left: 3%;
}
.years__list.years__list2 .radiobtn_text.years_group, .kodawari__list.kodawari__list .multi-item {
	width: calc(98% / 3);
}
.s_title2 {
	line-height: 1.3em;
	padding: 15px 0;
	font-weight: bold;
}
.s_title2-text {
	font-size: .8em;
}
section.search_bg h2 {
	position: relative;
	background: #399db9;
	text-align: center;
	color: #fff;
  }
.search_bg h2::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-right: 230px solid transparent;
	border-left: 230px solid transparent;
	border-top: 36px solid #399db9;
	border-bottom: 0;
	right: 50%;
	bottom: -30px;
	transform: translateX(50%);
}
.rankbest {
	position: relative;
	color: #fff;
	width: 50%;
	margin: 0 auto;
	font-weight: bold;
}
.ranktitled1 span {
	transform: rotate(90deg);
	display: inline-block;
}
.ranktitled1 span:first-child {
	margin-left: 1%;
}
.ranktitled2 span {
	color: #faef00;
}
.rank_h2 {
	background: #389eba;
	padding: 10px 0;
}
.flow_t {
	background-color: #389eba;
	color: #fff;
	text-align: center;
	font-weight: bold;
	position: relative;
	padding: 45px 0 10px 0;
}
.flow_t span.flow_text {
	background-image: radial-gradient(circle at center, #fff631 15%, #0000 20%);
	background-position: top right;
	background-repeat: repeat-x;
	background-size: 1em 0.5em;
	padding-top: .4em;
	color: #fff631;
	margin-right: 5px;
	font-weight: bold;
	font-size: 1.2em;
}
.fltxt {
	position: absolute;
	content: "";
	background-color: #fff;
	font-weight: bold;
	line-height: 1.1;
	padding: 5px 10px;
	border-radius: 5px;
	right: 50%;
	top: -15%;
	text-align: center;
	transform: translateX(50%);
	white-space: nowrap;
	font-size: 1em;
	border: 2px solid #389eba;
	color: #389eba;
}
.fltxt::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-top: 12px solid #fff;
	border-bottom: 0;
	right: 50%;
	bottom: -21%;
	transform: translateX(50%);
}
.flow_step_area {
	background-color: #fff;
	margin: 3% 5%;
	position: relative;
}
.flow_step_area::after {
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	border-top: 50px solid #389eba;
	border-bottom: 0;
	right: 50%;
	bottom: -20%;
	transform: translateX(50%);
}
.flow_123 {
	background-color: #fff9b0;
	padding: 1%;
}
.flow_step {
	position: relative;
	background: #389cb8;
	color: #fff;
	padding: 0 10px;
}
.flow_step_text {
	display: inline-block;
	margin-left: 2%;
	color: #389eba;
	font-weight: bold;
}
.flow_step_flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
}
.flow_step_left {
	width: 50%;
}
.flow_step_right {
	width: 45%;
	font-size: .6em;
}
.flow_step_area2 {
	margin-top: 10%;
}

.flow_step_area.flow_step_area3::after {
	content: none;
}
.flow {
	margin-bottom: 3%;
}
.Search_reset {
	background-color: #575757;
	color: #fff;
	font-size: 16px;
	padding: 5px 10px;
	cursor: pointer;
}
.search-button.ng-scope {
	color: #fff;
	font-size: 16px;
	padding: 5px 50px;
	background-color: #f25b28;
	cursor: pointer;
}
.footer__links a:nth-child(2)::before {
	position: absolute;
	content: "/";
	transform: translateY(-50%);
	top: 21%;
	right: -9%;
	width: 10px;
	height: 10px;
}






.pc_only {
    display: none;
}
.ip_only {
    display: none;
}

@media screen and (max-width: 650px) {
.ip_only {
    display: block !important;
}
.random_table {
	width: 200%;
}
.grf-scroll2 {
	display: flex;
	width: 200%;
	justify-content: space-between;
}
.positioningMap__name.x {
	position: absolute;
	content: "";
	right: 0;
	bottom: 29%;
}
.grf_bridge {
  position: absolute;
  top: 17%;
  left: 0;
}
.grf_friend {
	position: absolute;
	top: 35%;
	right: 0;
}
.grf_anytime {
	position: absolute;
	top: 54%;
	right: 45%;
}
.grf_arigataya {
	position: absolute;
	top: 82%;
	left: 0;
}
.grf_yarikuri {
	position: absolute;
	top: 82%;
	right: 6%;
}
.grf_anytime a img, .grf_arigataya a img, .grf_friend a img, .grf_bridge a img, .grf_yarikuri a img {
	width: 80%;
}
.grf_anytime a img, .grf_friend a img, .grf_bridge a img {
	top: -110%;
}
.grf_arigataya a img, .grf_yarikuri a img {
	top: -130%;
}
.positioningMap__name.y {
	position: absolute;
	content: "";
	right: 40%;
	top: 4%;
}
.years__list.years__list2 .radiobtn_text.years_group {
	width: calc(98% / 2);
}
.years__list.years__list2 .radiobtn_text.years_group, .kodawari__list.kodawari__list .multi-item {
	width: calc(98% / 2);
}
.rankbest::after {
	background-image: url('../image/best5.png');
	content: "";
	display: block;
	background-repeat: no-repeat;
	position: absolute;
	right: -5%;
	top: -10%;
	width: 100px;
	height: 100px;
	background-size: 100%;
}
.s_title2, .grf_div_t, .s_title {
	font-size: 1.5em;
}
.search_bg h2::after {
	border-right: 130px solid transparent;
	border-left: 130px solid transparent;
}
.dotted-text::before {
	content: "・・・";
	position: absolute;
	left: -45%;
	top: 50%;
	transform: translateY(-50%);
}
.dotted-text::after {
	content: "・・・";
	position: absolute;
	right: -45%;
	top: 50%;
	transform: translateY(-50%);
}
.rankbest {
	position: relative;
	color: #fff;
	width: 90%;
	margin: 0 auto;
	font-weight: bold;
	font-size: 1.5em;
}
.rank_subTtl, .rank_ttl a {
	font-size: 1.5em !important;
}
.rank_ttl {
	display: block;
}
.flow_t {
  font-size: 1.3em;
  padding: 35px 0 10px 0;
}
.fltxt {
  font-size: 1.3em;
}
.flow_step_right {
	font-size: .9em;
}
.flow_step_area::after {
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 25px solid #389eba;
	bottom: -11%;
}
.company_div {
	width: 90%;
	margin: 2% auto;
}
.company_table {
	width: 100%;
	table-layout: fixed;
}
.company_table th {
	width: 85px;
}
.company_table iframe {
	width: 95%;
}
.privacypolicy_div {
	width: 90%;
	margin: 2% auto;
	font-size: 1em;
}
}

@media screen and (min-width: 650px) {
.pc_only {
    display: block !important;
}
.grf_div span {
	font-size: 1vw;
}
.grf-scroll2 {
	display: flex;
	width: 100%;
	justify-content: space-between;
}
.positioningMap__name.x{
	position: absolute;
	content: "";
	right: 0;
	bottom: 33%;
}
.grf_anytime a img, .grf_friend a img, .grf_bridge a img {
	top: -80%;
}
.grf_arigataya a img, .grf_yarikuri a img {
	top: -100%;
}
.positioningMap__name.y{
  position: absolute;
  content: "";
  right: 59%;
  top: 4%;
}
.rankbest::after {
	background-image: url('../image/best5.png');
	content: "";
	display: block;
	background-repeat: no-repeat;
	position: absolute;
	right: -20%;
	top: -5%;
	width: 125px;
	height: 125px;
	background-size: 100%;
}
.company_div {
	width: 35%;
	margin: 2% auto;
	font-size: .5em;
}
.wrap.clearfix {
	width: 40%;
	margin: 0 auto;
}
.privacypolicy_div {
	width: 50%;
	margin: 2% auto;
	font-size: 0.5em;
}
}