/*!
Theme Name: meta-recruit
Text Domain: meta-recruit
*/

body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.75em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 600;
	line-height: 1.2em;
}

.sp_only {
	display: none;
}

.txt_blue {
	color: #174698;
}

.marker {
	background: linear-gradient(90deg, #FD7431 0%, #DA113E 103.28%);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% 40%;
}

.marker2 {
	background: linear-gradient(transparent 60%, #fffb13 60%);
	/* font-weight: 600; */
}

.marker3 {
	background: linear-gradient(transparent 60%, #fffb13 60%);
	font-weight: 600;
}

.elementor .cv_btn a, 
.cv_btn a {
	display: block;
    text-decoration: none;
    font-weight: 700;
    font-size: 20px;
    line-height: 29px;
    letter-spacing: 0.12em;
    color: #FFFFFF;
    text-shadow: 2px 2px 2px rgb(0 0 0 / 25%);
    background: linear-gradient(90deg, #FF7831 0%, #D80B3E 97.28%);
    box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);
    border-radius: 51px;
    padding: 17px 57px;
	width: 500px;
}

.check_list {
	position: relative;
	display: block;
	padding-left: 1.2em;
}

.check_list::before {
	position: absolute;
	content: '\f00c';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	color: #ab1111;
	left: 0;
}

.h2_reason::after {
	display: block;
    content: "";
    position: absolute;
    bottom: 0;
	right: calc(50% - 25px);
    transform: translateY(100%);
    width: 0;
    height: 0;
    border-left: 27.5px solid transparent;
    border-right: 27.5px solid transparent;
    border-top: 24px solid var(--e-global-color-004421b );
    z-index: 10;
}

.solution,
.works,
.contact {
	position: relative;
}
.solution::before,
.works::before,
.contact::before {
	position: absolute;
	top: -30px;
	left: 0;
	font-family: 'Kaushan Script', cursive;
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    line-height: 118px;
    color: #FFFFFF;
    opacity: 0.2;
    transform: rotate(-15.46deg);
	z-index: 1;
}
.solution::before {
	content: 'Solution';
}
.works::before {
	content: 'Works';
	left: calc(50% - 120px);
    line-height: 1em;
}
.contact::before {
	content: 'Contact form';
	left: calc(50% - 250px);
    line-height: 1em;
}

.font_l {
	font-size: 1.4em;
}

.font_s {
	font-size: 0.8em;
}

/* 大かっこ風装飾 */
.enph-brackets {
	text-align: center;
}

.enph-brackets>div {
	position: relative;
	display: inline-block;
	padding: 0 20px;
}

.enph-brackets>div::before {
	position: absolute;
	content: '';
	top: 0;
	right: 5px;
	width: 15px;
	height: 100%;
	border: 5px solid rgb(255 79 123);
	border-left: none;
}

.enph-brackets>div::after {
	position: absolute;
	content: '';
	top: 0;
	left: 5px;
	width: 15px;
	height: 100%;
	border: 5px solid rgb(255 79 123);
	border-right: none;
}

/*  */



table.price_table {
	color: #111;
	border: 1px solid #ddd;
}

table.price_table th,
table.price_table td {
	padding: 20px;
	font-size: 20px;
	line-height: 1.5em;
	border-bottom: 1px solid #ddd;
}

table.price_table td {
	font-size: 16px;
	background-color: #fff;
}

table.price_table th {
	width: 24%;
	font-family: "Noto Sans JP", sans-serif;
	background-color: #ab1111;
	color: #fff;
}

table.price_table.s_202303 th {
	background-color: #E88127;
}

.td_product {
	width: 20%;
}

.td_detail {
	width: 30%;
}

.td_price_1 {
	width: 25%;
	text-align: center;
}

.td_price_2 {
	width: 25%;
	text-align: center;
}

.hukidashi {
	position: relative;
}

.hukidashi::after {
	position: absolute;
	content: '';
	top: calc(50% - 11px);
	left: 100%;
	border: 15px solid transparent;
	border-top: 15px solid #313131;
	width: 0;
	height: 0;
	transform: rotate(270deg);
}

.post-password-form {
	max-width: 900px;
	margin: 100px auto;
	height: 30vw;
	padding: 10px;
}

.post-password-form input {
	font-size: 16px;
}

.elementor-widget-form .elementor-form input,
.elementor-widget-form .elementor-form textarea {
	font-family: "Noto Sans JP", sans-serif;
}
/* 料金プラン */
/* 	 */
/*タブ切り替え全体のスタイル*/
.tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: #fff;
	width: 700px;
	margin: 0 auto;
}

/*タブのスタイル*/
.tab_item {
	width: calc(100%/3);
	height: 80px;
	border: 1px solid #DFDFDF;
	background-color: #F1F1F1;
	text-align: center;
	color: #BBBBBB;
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	padding-top: 10px;
	padding-bottom: 10px;
	transition: all 0.2s ease;
}

div.tab_content {
	border: 1px solid #FAEBE9;
	box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
	border-radius: 2px;
	padding-bottom: 53px;
}

.tab_item:hover {
	opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 40px 40px 0;
	clear: both;
	overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content, #programming:checked ~ #programming_content, #design:checked ~ #design_content {
	display: block;
}

span.tab-name-en {
	font-size: 18px;
	display: block;
}

span.tab-name-jp {
	font-size: 12px;
	display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item.standard {
	position: relative;
	background: linear-gradient(179.92deg, #FA4945 0.14%, #1A1B46 276.5%);
	color: #fff;
	text-shadow: 0px 2px 2px rgba(52, 13, 17, 0.5);
}

.tabs input:checked + .tab_item.premium {
	position: relative;
	background: linear-gradient(179.87deg, #1A1B46 0.11%, #EA221D 290.61%);
	color: #fff;
	text-shadow: 0px 2px 2px rgba(52, 13, 17, 0.5);
}

.tabs input:checked + .tab_item.ultimate {
	position: relative;
	background: linear-gradient(179.86deg, #123406 0.12%, #1E6EB8 323.22%);
	color: #fff;
	text-shadow: 0px 2px 2px rgba(52, 13, 17, 0.5);
}

.tabs input:checked + .tab_item.standard:after {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	right: 50%;
	transform: translateY(100%);
	transform: translate(50%, 100%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #AF3B46;
	z-index: 10;
}

.tabs input:checked + .tab_item.premium:after {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	right: 50%;
	transform: translateY(100%);
	transform: translate(50%, 100%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #5c1d3a;
	z-index: 10;
}

.tabs input:checked + .tab_item.ultimate:after {
	display: block;
	content: "";
	position: absolute;
	bottom: 0;
	right: 50%;
	transform: translateY(100%);
	transform: translate(50%, 100%);
	width: 0;
	height: 0;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #154539;
	z-index: 10;
}

.tabs input + .tab_item.standard span.tab-name-en:before {
	display: block;
	content: "";
	width: 16px;
	height: 10px;
	background: url(http://lp01.lighten-meo.com/wp-content/uploads/2023/01/Vector-1.png);
	background-size: contain;
	margin: 0 auto;
}

.tabs input:checked + .tab_item.standard span.tab-name-en:before {
	display: block;
	content: "";
	width: 16px;
	height: 10px;
	background: url(http://lp01.lighten-meo.com/wp-content/uploads/2023/01/Vector.png);
	background-size: contain;
	margin: 0 auto;
}

.plan-tabs {
	max-width: 100%;
}

.plan-tabs button.smb-tabs__tab {
	max-width: 111px;
}

.plan-tabs .smb-tabs__tab-wrapper:nth-child(1) button.smb-tabs__tab {
	background: linear-gradient(179.83deg, #FA4945 0.15%, #1A1B46 267.05%);
	border-radius: 2px 2px 0px 0px;
}

p.plan-tab-headline {
	font-weight: 900;
	font-size: 16px;
	line-height: 23px;
	color: #1A1B46;
	text-align: center;
	margin: 0;
}

p.tab-campaign-text {
	font-family: 'Hind';
	font-style: normal;
	font-weight: 700;
	font-size: 14px;
	line-height: 22px;
	color: #D83C2E;
	margin-top: 6px;
	text-align: center;
}

p.plan-tab-price {
	font-style: normal;
	font-weight: 700;
	font-size: 60px;
	line-height: 96px;
	color: #D83C2E;
	margin-top: 3px;
	text-align: center;
	margin-bottom: 0;
}

p.plan-normal-price {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 19px;
	color: #1A1B46;
	margin-top: 0;
	text-align: center;
	margin-bottom: 50px;
}
p.tab-otameshi-text {
    color: #D83C2E;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    margin-top: 3rem;
}
p.plan-caution-bottom {
    font-family: 'Noto Sans JP';
    font-style: normal;
    font-weight: 400;
    font-size: 9px;
    line-height: 13px;
    text-align: right;
    color: #333333;
    margin-top: 8px;
}
.tab_badge {
	width: 60px;
    margin: 0 0px -30px 15px;
}


@media (max-width:1024px) and (min-width:767px){
	.elementor .cv_btn a, 
	.cv_btn a {
		font-size: 18px;
		line-height: 20px;
		padding: 20px 15px;
		width: 400px;
	}
}
@media (max-width:767px) {
	.sp_only {
		display: inline-block;
	}

	.pc_only {
		display: none;
	}
	.elementor .cv_btn a, 
	.cv_btn a {
		font-size: 16px;
		line-height: 20px;
		padding: 20px 15px;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.solution.s1::after,
	.solution.s2::after,
	.solution.s3::after {
		position: absolute;
		bottom: 10px;
		right: 10px;
		font-family: 'Kaushan Script', cursive;
		font-style: normal;
		font-weight: 400;
		font-size: 60px;
		line-height: 1em;
		color: #FFFFFF;
		text-shadow: 0px 7.53324px 7.53324px rgb(0 0 0 / 25%);
		transform: matrix(0.96, 0, -0.29, 1, 0, 0);
		opacity: 0.2;
		z-index: 1;
	}
	.solution.s1::after {
		content: '01.';
	}
	.solution.s2::after {
		content: '02.';
	}
	.solution.s3::after {
		content: '03.';
	}
	.contact::before {
		left: calc(50% - 165px);
		font-size: 24px;
	}
	

	table.price_table th,
	table.price_table td {
		line-height: 1.75em;
		;
		font-size: 16px;
		display: block;
		padding: 15px;
	}

	table.price_table th {
		width: auto;
		font-size: 20px;
	}

	table.price_table td.font_s {
		font-size: 13px;
	}

	.hukidashi::after {
		top: calc(100% - 20px);
		left: 30px;
		transform: rotate(0deg);
	}

	.post-password-form {
		margin: 50px auto;
		height: 40vw;
		padding: 10px;
	}
}