/*
Theme Name: Eclo
Author: elegirl
*/

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap');

:root {
	--font-basic: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-headline:"Rajdhani", sans-serif;
	--color-text: #202226;
	--color-gray: #666;
	--color-white: #FFF;
	--color-litegray: #f4f2f2;
	--color-main: rgb(31, 51, 174);
	--color-main-grad: linear-gradient(270deg, #003e88, #016db2 60%, #0197d7);
	--color-main-liter: rgb(243, 243, 251);
	--color-accent: rgb(221, 110, 121);
	--box-shadow:0 2px 20px rgba(26,48,172,.3);
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, main, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
html {
	font-size: 10px;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 2;
	font-style: normal;
	font-family: var(--font-basic);
	font-feature-settings: "palt";
	font-style: normal;
	letter-spacing: 0;
	position: relative;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	max-width: 100%;
	vertical-align: bottom;
	height: auto;
}
a {
	color: var(--color-gray);
}
summary::-webkit-details-marker {
	display: none;
}
p {
	line-height: 2.0;
	font-size: 1.55rem;
}
li {
	font-size: 1.6rem;
}
a {
	text-decoration: none;
	transition: 0.5s;
	color: var(--color-text);
}
a:hover {
	opacity: 0.3;
}
table {
	font-size: 1.6rem;
	width: 100%;
	border-collapse: collapse;
}
.time, time {
	font-family: var(--font-headline);
	font-size: 17px;
	font-weight: 400;
}

.headline-text{
	font-family: var(--font-headline);
}

section {
	padding: 72px 0;
}
iframe {
	max-width: 100%;
}
.container {
	width: 120rem;
	margin: 0 auto;
}
h1 {
	font-size: 4rem;
	margin-bottom: 0rem;
	line-height: 1;
}
h2 {
	font-size: 4.5rem;
	margin-bottom: 0rem;
	font-weight: 600;
	line-height: 1.4;
}
h3 {
	font-size: 2rem;
	margin-bottom: 0rem;
	font-weight: 600;
	line-height: 1.4;
}
@media (max-width: 768px) {
	.container {
		width: 100%;
		padding: 0 24px;
	}
}
.flexbox {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.mincho {
	font-family: YuMincho, "Yu Mincho", serif;
	font-weight: 400;
}
.pc_only {
	display: block;
}
@media (max-width: 768px) {
	.pc_only {
		display: none;
	}
}
.sp_only {
	display: none;
}
@media (max-width: 768px) {
	.sp_only {
		display: block;
	}
}
code {
	direction: ltr;
	display: block;
	font-family: inherit;
	overflow-wrap: break-word;
	text-align: initial;
	white-space: pre-wrap/*!rtl:end:ignore*/
	;
	background: #333;
	color: #FFF;
	padding: 20px;
	font-size: 1.5rem;
}
.title_section {
	margin-bottom: 3rem;
}
.title_section p {
	font-size: 4.5rem;
	margin-bottom: 6px;
	font-weight: 300;
	display: flex;
	align-items: center;
	text-align: left;
	color: var(--color-main);
	font-family: var(--font-headline);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
}
.title_section h2 {
	line-height: 1;
	font-size: 1.45rem;
	display: block;
	margin: 0;
	letter-spacing: 0.1em;
	font-weight: 600;
	color: var(--color-main);
}
.wp-block-post-title {
	font-weight: 500;
	font-size: 1.64rem;
}
.wp-block-post-excerpt__excerpt {
	font-size: 1.4rem;
	line-height: 1.4;
	margin-bottom: 0;
}
/* テーブル */

.link-card{
	position:relative;
	cursor: pointer;
	transition: all 0.4s;
	border-radius:8px;
	border:1px solid transparent;
}

.link-card a{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	display:block;
	z-index:10;
	margin:0;
	opacity:0;
	background-color: #FFF;
	transition: all 0.4s;
}

.link-card:hover {
	transform:translateY(-10px);
	box-shadow:5px 5px 10px #CCCCCC22;
	border:1px solid #167F92;
}
.link-card:hover a{
	opacity:0.2;
}


.entry-content table {
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0;
	table-layout: fixed;
}
.entry-content table tr {
	background-color: #e6f2f5;
	padding: .35em;
	border-bottom: 2px solid #fff;
}
.entry-content table th, .entry-content table td {
	padding: 1em 10px 1em 1em;
	border: none;
	border-right: 2px solid #fff;
}
.entry-content table th {
	font-size: .85em;
}
.entry-content table thead tr {
	background:var(--color-main-liter);
}
.entry-content table tbody th {
	background:var(--color-main);
	color: #fff;
}
.entry-content .txt {
	text-align: left;
	font-size: .85em;
}
.entry-content .price {
	text-align: right;
	color: #167F92;
	font-weight: bold;
}
.entry-content .non {
	background: #fff
}
@media (max-width: 768px) {
	.entry-content table {
		border: 0;
		width: 100%
	}
	.entry-content table th {
		background-color: #167F92;
		display: block;
		border-right: none;
	}
	.entry-content table thead {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	.entry-content table tr {
		display: block;
		margin-bottom: .625em;
	}
	.entry-content table td {
		border-bottom: 1px solid #bbb;
		display: block;
		font-size: .8em;
		text-align: right;
		position: relative;
		padding: .625em .625em .625em 4em;
		border-right: none;
	}
	.entry-content table td::before {
		content: attr(data-label);
		font-weight: bold;
		position: absolute;
		left: 10px;
		color: #167F92;
	}
	.entry-content table td:last-child {
		border-bottom: 0;
	}
	table tbody th {
		color: #fff;
	}
	.title_section {
		font-size: 20px;
	}
	.title_section h2 br {
		display: none;
	}
}
.btn_contact {
	margin-top: 3rem;
	line-height: 1;
}
.btn_contact a {
	background: var(--color-text);
	color: var(--color-white);
	font-size: 1.3rem;
	padding: 1rem 2rem;
	text-decoration: none;
	display: inline-block;
}
.btn_contact.btn_contact_center {
	text-align: center;
	margin: 0 0 10rem;
}
.site-header {
	width: 100%;
	padding: 2rem 0 5rem;
    background: var(--color-main);
}
.site-header .container {
	align-items: center;
	width: 130rem;
	margin: 0 auto;
}
.site-header .container .social_btn {
	width: 100%;
	display: flex;
	margin-bottom: 20px;
}
.site-header .container .social_btn li {
	margin-left: 10px;
	width: 25px;
}
.site-header .container .social_btn li a {
	font-size: 25px;
	color: var(--color-text);
}
.site-header .container .site-branding {
	display: flex;
	align-items: center;
}
.site-header .container .site-branding .site-title {
	width: 150px;
	text-align: center;
}
.site-header .container .site-branding .site-title svg {
	display: block;
	fill: var(--color-white);
	width: 130px;
	margin-top: 1rem;
	height: 70px;
}
.site-header .container .site-branding .site-description {
	width: 230px;
	line-height: 1.5;
	margin-left: 30px;
	font-size: 13px;
	color: #fff;
}
.site-header .container .main-navigation {
	background-color: var(--color-white);
	display: flex;
	left: 0px;
	padding: 12px 48px;
	position: relative;
	top: 0px;
	border-radius: 4px;
	transition: 0.15s cubic-bezier(0.79, 0.17, 0.15, 0.96);
	align-items: center;
	flex-wrap: wrap;
}
.menu-card.has-submenu:hover .menu-card__submenu-panel {
	position: absolute;
	height: 0;
	opacity: 0;
}
.site-header .container .main-navigation>ul {
	display: flex;
	gap: 24px;
	align-items: center;
}
.site-header .container .main-navigation ul li .menu-card__title {
	margin-bottom: 0;
}
.site-header .container .main-navigation>ul li a {
	font-size: 15px;
	padding: 12px 0;
	font-style: normal;
	color: var(--color-text);
}
.site-header .container .main-navigation .header_btn {
	display: flex;
	margin-left: 30px;
	align-items: center;
}
.site-header .container .main-navigation .header_btn li a {
	background: var(--color-litegray);
	font-size: 15px;
	display: inline-block;
	width: 150px;
	text-align: center;
	padding: 10px;
}
.site-header .container .main-navigation .header_btn li.btn_register a {
	background: var(--color-text);
	color: var(--color-white);
}
.menu-card__title, .menu-card {
	cursor: pointer;
}
.menu-main-container>ul {
	display: flex;
	gap: 24px;
}
.menu-card.has-submenu .submenu-cards-list {
	opacity: 0;
	height: 0;
	position: absolute;
	left: 0;
	background: #FFF;
	width: 100%;
	top: 77px;
	border-radius: 4px;
	z-index: 300;
	pointer-events: none;
	transition: all 0.3s;
}
.menu-card.has-submenu:hover>.submenu-cards-list {
	opacity: 1;
	height: auto;
	visibility: visible;
	pointer-events: auto;
	box-shadow: 0px 0px 10px 0px #8c96e0;
}
.submenu-cards-list:hover {
	opacity: 1;
	height: auto;
	visibility: visible;
}
.menu-card__submenu-panel {
	position: absolute;
	top: 100%;
	left: 0;
	background: white;
	border: 1px solid #ddd;
	border-radius: 8px;
	padding: 12px;
	margin-top: 8px;
	min-width: 300px;
	max-height: 500px;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
	pointer-events: none;
	z-index: 999;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.submenu-card {
	display: flex;
	gap: 12px;
	padding: 12px;
	border-bottom: 1px solid #f0f0f0;
	position: relative;
	transition: 0.3s;
}
.submenu-card:hover {
	background: var(--color-main-liter);
}
.submenu-card:last-child {
	border-bottom: none;
}
.submenu-card__figure {
	flex-shrink: 0;
	width: 80px;
	height: 45px;
	overflow: hidden;
	border-radius: 4px;
}
.submenu-card__title {
	font-size: 18px;
	font-weight: 400;
	margin: 0;
	font-family: var(--font-headline);
}
.submenu-card__excerpt {
	font-size: 14px;
	margin: 0;
	line-height: 1.4;
}
.menu-card__link {
	position: absolute;
	top: 0;
	width: 70px;
	height: 74px;
}
.submenu-card__link {
	position: absolute;
	inset: 0;
}
.nav-toggle {
	position: fixed;
	left: -9999px;
	top: 0;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.nav-hamburger, .nav-toggle {
	display: none;
}
@media (max-width: 768px) {
	.site-header {
		width: 100%;
		padding: 1rem 0;
		top: 0;
		z-index: 1000;
	}
	.site-header .container .site-branding {
		gap: 12px;
	}
	.site-header .container .site-branding h1 {
		width: 8rem;
	}
	.site-header .container .site-branding .site-description {
		width: auto;
		margin: 0;
	}
	.nav-toggle {
		display: block;
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.nav-hamburger {
		width: 44px;
		height: 44px;
		display: inline-block;
		position: relative;
		cursor: pointer;
		margin-left: auto;
		z-index: 10000;
		border-radius: 50%;
		background: #000;
	}
	.nav-hamburger::before, .nav-hamburger::after {
		content: "";
		position: absolute;
		left: 10px;
		right: 10px;
		height: 2px;
		top: 50%;
		transform: translateY(-50%);
		background: #fff;
		transition: 0.4s;
	}
	.nav-hamburger::before {
		transform: translateY(-5px);
	}
	.nav-hamburger::after {
		transform: translateY( 5px);
	}
	.site-header .container .main-navigation {
		position: fixed;
		top: 0;
		flex-direction: column;
		right: 0;
		left: 0;
		width: 100vw;
		height: 100dvh;
		background: #fff;
		border-left: 1px solid rgba(0, 0, 0, .08);
		box-shadow: -12px 0 30px rgba(0, 0, 0, .12);
		transform: translateX(100vw);
		transition: transform .2s ease;
		z-index: 9999;
		padding: 16px;
		/* 上に余白 */
		overflow: auto;
	}
	.site-header::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, .35);
		opacity: 0;
		visibility: hidden;
		transition: .2s ease;
		z-index: 9998;
	}
	.nav-toggle:checked~.nav-hamburger::before {
		transform: rotate(45deg);
	}
	.nav-toggle:checked~.nav-hamburger::after {
		transform: rotate(-45deg);
	}
	.nav-toggle:checked~#site-navigation {
		transform: translateX(0);
	}
	.nav-toggle:checked~#site-navigation+* {}
	/* 何もなし（保険） */
	.menu-main-container {
		width: 100%;
	}
	/* overlay 表示（checkboxがONなら） */
	.nav-toggle:checked~#site-navigation, .nav-toggle:checked~#site-navigation * {
		pointer-events: auto;
	}
	.nav-toggle:checked~#site-navigation {
		width: 100vw;
	}
	#primary-menu {
		display: grid;
		gap: 10px;
		margin: 0;
		padding: 0;
	}
	#primary-menu>li.menu-card {
		list-style: none;
	}
	.menu-card__inner {
		position: relative;
		padding: 12px 0;
		width: 100%;
	}
	.site-header .container {
		width: auto;
		padding: 12px;
	}
}

footer {
	margin-top: 72px;
	padding: 48px 0 0;
	text-align: center;
	background: var(--color-main-liter);
}

.site-footer .block ul {
	margin-top:24px;
}
.site-footer .block ul > li{
	font-size:14px;
}

.site-footer .block ul > li:before{
	content:"・";
	margin-right:10px;
}



.site-info-container {
	padding: 24px 0;
}
.site-info-container ul {
	width: 110rem;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}
.site-info-container ul li a {
	font-size: 14px;
}
footer .container {
	width: 120rem;
	margin-bottom: 48px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
}
footer .container .block {
	text-align: left;
}
footer .container address p {
	font-size: 1.5rem;
}
@media (max-width: 768px) {
	.site-info-container ul {
		width: 100%;
		flex-direction: column;
	}
	.site-info-container ul li {
		margin-bottom: 20px;
	}
	.site-info-container ul li a {
		display: block;
		padding: 10px;
	}
	footer .container {
		width: 100%;
		grid-template-columns: 1fr;
	}
}
footer .site-info {
	text-align: center;
	padding: 3rem 0;
	font-size: 14px;
	background: var(--color-main);
	color: var(--color-white);
}
@media (max-width: 768px) {
	footer {
		padding: 30px 0 0;
		margin-top: 0;
	}
	footer .site-info {
		margin: 0;
		font-size: 12px;
	}
}

#sec_vis{
	background: var(--color-main);
}
#sec_vis .container{
	width:1200px;
}


#sec_recommend {
	padding: 36px;
	background: #FFF;
	border-radius:8px;
}
#sec_recommend h3 {
	font-size: 2rem;
}
#sec_service .title_section>* {
	color:#fff;

}
#sec_service ul li {
	position: relative;
	border-radius:  8px;
}

#sec_service ul li .wp-block-post-excerpt__excerpt {
}
#sec_service ul li h3 {
	color: var(--color-main);
	font-family: var(--font-headline);
	font-size:20px;
}
#sec_service ul li figure {
    padding: 0;
    border-radius: 8px;
    overflow: visible;
}

#sec_service ul li a {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	display: block;
}
#sec_popular {
	padding-top: 0;
}
#sec_popular .container h2 {
	width: 200px;
	flex-wrap: wrap;
}
#sec_popular .container h2 span {
	display: block;
	width: 100%;
	margin: 20px 0 0 0;
}
#sec_popular .container ul {
	width: 890px;
}
#sec_popular .container ul li {
	width: 31%;
	display: block;
	margin-bottom: 0;
}
#sec_popular .container ul li figure {
	margin-bottom: 20px;
	border: 1px solid var(--color-litegray);
}
#sec_popular .container ul li figure a {
	display: block;
}
#sec_popular .container ul li figure img {
	height: 184px;
	margin-right: 0;
	float: none;
	object-fit: cover;
}
#sec_popular .container ul li figcaption h3 {
	font-size: 15px;
	margin-bottom: 20px;
	line-height: 1.4;
}
#sec_popular .container ul li figcaption .list_tags {
	justify-content: flex-start;
	margin-top: 20px;
	width: auto;
}
#sec_popular .container ul li figcaption .list_tags li {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	padding: 2px 5px;
	width: auto;
	margin-bottom: 0;
}
.box_title span {
	font-size: 1.2rem;
	display: block;
	margin: 0;
	font-weight: 500;
}
@media (max-width: 768px) {
	#sec_vis .container{
	width:auto;
}

	#sec_recommend {
		padding:24px;
	}
	.box_title span {
		width: 100%;
		margin-left: 20px;
	}
	#sec_popular .container ul {
		width: 100%;
		flex-direction: column;
	}
	#sec_popular .container ul li {
		width: 100%;
		margin-bottom: 40px;
	}
	#sec_popular .container ul li a figcaption .list_tags {
		-ms-flex-direction: row;
		flex-direction: row;
	}
}
@media (max-width: 768px) {
	#sec_popular {
		padding: 0 30px;
	}
	#sec_popular .box_title {
		display: flex;
	}
	#sec_popular .container h2 {
		width: 100%;
	}
	#sec_popular .container h2 br {
		display: none;
	}
}


#sec_recently .container {
	width: 1200px;
}

#sec_recently ul{
	grid-template-columns: 1fr 1fr 1fr;
	gap:24px;
}

#sec_keyword {
	background-color: var(--color-main-liter);
}
#sec_keyword .container {
	position: relative;
}
#sec_keyword ul li h3{
	font-family: var(--font-headline);
	font-size:18px;
	margin:12px 0;
}

#sec_keyword ul li .wp-block-post-excerpt{
	margin-top:0;
}

.list_category{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:24px;
}

.list_category .item_category {
	position: relative;
	padding: 24px;
	background: var(--color-main-liter);
}
.list_category .item_category p {
	font-size: 15px;
	line-height: 1.9;
	margin-top: 12px;
	margin-bottom: 0;
}
.list_category .item_category a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.area_keywords_item {
	border: 1px solid #333;
	position: relative;
	padding: 24px;
}
#sec_keyword .container ul li a figure {
	margin-bottom: 20px;
}
#sec_keyword .container ul li a figure img {}
#sec_keyword .container ul li a figcaption h3 {
	font-size: 13px;
	margin-bottom: 0px;
	line-height: 1;
	text-align: center;
}


#sec_people .container ul li a figcaption .list_tags {
	justify-content: flex-start;
	margin-top: 20px;
}
#sec_people .container ul li a figcaption .list_tags li {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	padding: 2px 5px;
	color: var(--color-text);
	width: auto;
}

	#sec_shelf ul {
		gap:24px;
	}

@media (max-width: 768px) {
	#sec_recently ul{
	grid-template-columns: 1fr;
	gap:24px;
	}
	
	#sec_shelf{
		padding:24px;
	}
	#sec_shelf ul {
		grid-template-columns: 1fr 1fr 1fr;
		gap:12px;
	}
	
	#sec_shelf ul li .link-card{
		padding:0;
	}
	#sec_shelf ul li h3{
		display:none;
	}


	#sec_keyword {
		padding: 24px;
	}
	#sec_recently .container {
		width: 100%;
	}
	#sec_people .container ul {
		width: 100%;
		flex-direction: column;
	}
	#sec_people .container ul li {
		width: 100px;
	}
	#sec_people .container .title_section {
		display: block;
		text-align: center;
	}
	#sec_people .container .title_section span {
		margin: 1rem 0 0 0;
	}
	#sec_people .container ul li a figure {
		margin-bottom: 0;
	}
	#sec_people .container ul li a figure img {
		height: 100px;
		-o-object-fit: cover;
		object-fit: cover;
	}
	#sec_people .container ul li a figcaption .list_tags {
		display: none;
	}
}
#sec_people .container .btn_contact {
	position: absolute;
	right: 0;
	bottom: -120px;
}
#sec_people .container .btn_contact a {
	background-color: var(--color-litegray);
	color: var(--color-text);
}
@media (max-width: 768px) {
	#sec_people {
		padding: 50px 0px;
	}
}
#sec_main {
	padding-bottom: 0;
	position: relative;
}
@media (max-width: 768px) {
	#sec_main {
		padding: 24px;
	}
}
#sec_main::before {
	background: var(--color-litegray);
	width: 800px;
	height: 600px;
	display: block;
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	z-index: -1;
}
#sec_main .box_left {
	width: 550px;
}
#sec_main .box_left ul li.flexbox {
	margin-bottom: 30px;
}
#sec_main .box_left ul>li figure {
	width: 150px;
	border: 1px solid var(--color-litegray);
}
#sec_main .box_left ul>li figure img {
	height: 110px;
	-o-object-fit: cover;
	object-fit: cover;
}
#sec_main .box_left ul>li figcaption {
	width: calc(100% - 150px);
	padding-left: 20px;
}
#sec_main .box_left ul>li figcaption h3 {
	font-size: 15px;
	margin-bottom: 20px;
	line-height: 1.4;
	overflow: hidden;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_tags .post-categories {
	justify-content: flex-start;
	margin-top: 20px;
}
.list_tags .post-categories li {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin: 0 5px 0 0;
	padding: 2px 5px;
}
@media (max-width: 768px) {
	#sec_main::before {
		display: none;
	}
	#sec_main .box_left {
		width: 100%;
	}
	#sec_main .box_left ul li {
		position: relative;
	}
	#sec_main .box_left ul li figure {
		width: 100px;
	}
	#sec_main .box_left ul li figure img {
		height: 60px;
	}
	#sec_main .box_left ul li figcaption {
		width: calc(100% - 100px);
	}
	#sec_main .box_left ul li figcaption h3 {
		font-size: 14px;
		margin-bottom: 20px;
		line-height: 1.4;
		overflow: hidden;
		-webkit-line-clamp: 3;
		height: 60px;
		margin-bottom: 0px;
	}
	#sec_main .box_left ul li figcaption time {
		position: absolute;
		top: 0;
		left: 0;
		background: var(--color-text);
		color: var(--color-white);
	}
	#sec_main .box_left ul li figcaption .list_tags {
		display: none;
	}
}
#sec_main .box_right {
	width: 550px;
}
#sec_main .box_left h2, #sec_main .box_right h2 {
	margin-bottom: 40px;
}
#sec_main .box_right ul li {
	margin-bottom: 40px;
	align-items: center;
	color: var(--color-text);
}
#sec_main .box_right ul li figure {
	width: 75px;
}
#sec_main .box_right ul li figure img {
	height: 100px;
}
#sec_main .box_right ul li figcaption {
	width: calc(100% - 105px);
}
#sec_main .box_right ul li figcaption h3 {
	font-size: 17px;
	margin-bottom: 15px;
}
#sec_main .box_right ul li figcaption ul {
	justify-content: flex-start;
	margin-top: 10px;
}
#sec_main .box_right ul li figcaption ul li {
	margin-right: 20px;
	margin-bottom: 0;
}
#sec_main .box_right ul li figcaption ul li a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	margin-right: 10px;
	display: inline-block;
	font-weight: 900;
}
#sec_main .box_right ul li figcaption ul li a {
	font-size: 12px;
	cursor: pointer;
	background: var(--color-litegray);
	padding: 5px 12px;
	display: inline-block;
}
#sec_main .box_right ul li figcaption p {
	font-size: 13px;
}
@media (max-width: 768px) {
	#sec_main .box_right {
		width: 100%;
		margin-top: 40px;
	}
	#sec_main .box_right ul li figcaption ul {
		flex-direction: column;
	}
	#sec_main .box_right ul li figcaption ul li {
		margin: 0 0 10px;
	}
	#sec_about {
		padding: 30px 0;
	}
}
#sec_about .box_left {
	width: 500px;
}
#sec_about .list_news ul li>div {
	gap: 12px;
}
#sec_about .box_left figure {
	margin-bottom: 30px;
}
#sec_about .box_left figure img {
	height: 160px;
	object-fit: cover;
}
#sec_about .box_left .title_section_premium {
	margin-top: 50px;
}
@media (max-width: 768px) {
	#sec_about .box_left {
		width: 100%;
		padding: 0 30px;
	}
}
#sec_about .box_right {
	width: 650px;
}
#sec_about .box_right .tabs {
	margin-top: 50px;
	padding-bottom: 40px;
	background-color: var(--color-white);
	margin: 0 auto;
}
#sec_about .box_right .tabs .tab_item {
	width: 50%;
	font-size: 16px;
	text-align: center;
	color: var(--color-text);
	display: block;
	float: left;
	text-align: center;
	font-weight: bold;
	-webkit-transition: all 0.2s ease;
	transition: all 0.2s ease;
}
#sec_about .box_right .tabs .tab_item:hover {
	opacity: 0.75;
}
#sec_about .box_right .tabs .tab_item .title_section {
	display: block;
	text-align: center;
	margin-bottom: 0;
	padding: 20px 0;
}
@media (max-width: 768px) {
	#sec_about .box_right .tabs .tab_item .title_section {
		font-size: 17px;
	}
}
#sec_about .box_right .tabs .tab_item .title_section span {
	margin: 10px 0 0;
}
#sec_about .box_right .tabs input[name="tab_item"] {
	display: none;
}
#sec_about .box_right .tabs .tab_content {
	display: none;
	padding: 50px;
	clear: both;
	overflow: hidden;
	background-color: var(--color-litegray);
}
#sec_about .box_right .tabs .tab_content ul li {
	margin-bottom: 30px;
}
#sec_about .box_right .tabs .tab_content ul li h3 {
	line-height: 1.9;
	font-size: 1.4rem;
}
#sec_about .box_right .tabs .tab_content ul li h3 a {
	color: var(--color-text);
}
#sec_about .box_right .tabs .tab_content ul li:last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	#sec_about .box_right .tabs .tab_content {
		padding: 30px;
	}
	#sec_about .box_right .tabs .tab_content ul li h3 {
		margin-bottom: 10px;
	}
}
#sec_about .box_right .tabs #all:checked~#all_content, #sec_about .box_right .tabs #programming:checked~#programming_content {
	display: block;
}
#sec_about .box_right .tabs input:checked+.tab_item {
	background-color: var(--color-litegray);
	color: var(--color-white);
}
@media (max-width: 768px) {
	#sec_about .box_right {
		width: 100%;
		padding: 0 30px;
		margin-top: 40px;
	}
	#sec_about .box_right .tabs {
		padding-bottom: 0;
	}
	#sec_about .box_right .tabs .tab_item .title_section span {}
}
.box_author {
	background: var(--color-litegray);
	padding: 40px;
	margin: 50px 0;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.box_author figure {
	width: 170px;
	height: 170px;
	margin: 0;
}
.box_author figure img {
	-o-object-fit: cover;
	object-fit: cover;
}
.box_author figcaption {
	width: calc(100% - 200px);
}
@media (max-width: 768px) {
	.box_author {
		flex-direction: column;
	}
	.box_author figure {
		width: 100%;
		height: 100%;
		margin-bottom: 30px;
	}
	.box_author figcaption {
		width: 100%;
	}
}
.box_author figcaption .name {
	font-size: 17px;
	margin-bottom: 20px;
	position: static;
}
.box_author figcaption p {
	font-size: 13px !important;
}
.box_author figcaption .author_link {
	margin-left: 20px;
}
.box_author figcaption .author_link a {
	display: inline-block;
	padding: 5px 20px;
	font-size: 12px !important;
}
.site-main-author .title_section span {
	width: 100%;
}
.site-main-author .title_section span span {
	display: inline;
}
.site-main, .site-2column {
	width: 120rem;
	margin: 50px auto 0;
}
.site-2column main {
	width: 850px;
}
.site-2column main .entry-title {
	font-size: 23px;
	margin-bottom: 20px;
	line-height: 1.5;
}
.site-2column main .entry-meta {
	font-size: 13px;
	margin-bottom: 50px;
}
.site-2column main .entry-thumb {
	border: 1px solid var(--color-litegray);
	margin: 50px 0;
}
.site-2column .site-2column_left .entry-thumb img {
	width: 100%;
}
.site-2column .site-2column_left .entry-content p {
	font-size: 15px;
	margin: 10px 0;
}
.site-2column .site-2column_left .entry-content p a {
	text-decoration: underline;
}
.site-2column .site-2column_left .entry-content .question {
	background: var(--color-litegray);
	margin: 20px 0;
}
.site-2column .site-2column_left .entry-content h2 {
	font-size: 17px;
	background-color: var(--color-litegray);
	padding: 15px 20px;
	margin: 30px 0;
	border-left: 5px solid var(--color-litegray);
}
.site-2column .site-2column_left .entry-content h3 {
	font-size: 15px;
	padding: 10px 10px;
	margin: 30px 0;
	border-top: 2px solid var(--color-litegray);
	border-bottom: 2px solid var(--color-litegray);
}
.site-2column .site-2column_left .entry-content p strong {
	font-weight: 900;
}
.site-2column .site-2column_left .entry-content ul {
	list-style: disc;
	margin: 30px;
}
.site-2column .site-2column_left .entry-content ul li {
	margin-bottom: 20px;
	line-height: 1.5;
}
.site-2column .site-2column_left .entry-content figure.is-type-video, .site-2column .site-2column_left .entry-content figure.size-large, .site-2column .site-2column_left .entry-content figure.size-full {
	text-align: center;
	margin: 40px;
}
.site-2column .site-2column_left .entry-content figure.size-large img, .site-2column .site-2column_left .entry-content figure.size-full img {
	width: 100%;
}
.site-2column .site-2column_left .entry-content figure figcaption {
	font-size: 12px;
	line-height: 1.4;
	margin-top: 20px;
	text-align: left;
}
.site-2column .site-2column_left .entry-content .box_author_wrap {
	position: relative;
}
.site-2column .site-2column_left .entry-content .box_author_wrap h3 {
	font-size: 12px;
	font-weight: normal;
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	background: var(--color-litegray);
	font-size: 12px;
	padding: 5px;
}
.site-2column .site-2column_left .entry-content .reration-posts {
	background: var(--color-litegray);
	padding: 40px;
	margin: 40px 0;
}
.site-2column .site-2column_left .entry-content .reration-posts h3 {
	font-weight: 600;
	margin-bottom: 30px;
	font-size: 16px;
}
.site-2column .site-2column_left .entry-content .reration-posts a {
	text-decoration: underline;
}
@media (max-width: 768px) {
	.site-main, .site-2column {
		width: 100%;
		padding: 24px;
		margin: 50px auto 0;
	}
	.site-2column .site-2column_left .entry-content .box_author {
		display: block;
		padding: 20px;
		margin-bottom: 0;
	}
	.site-2column .site-2column_left .entry-content .box_author figure {
		width: 100%;
		height: auto;
		margin-bottom: 20px;
	}
	.site-2column .site-2column_left .entry-content .box_author figcaption {
		width: 100%;
	}
	.site-2column .site-2column_left .entry-content .reration-posts {
		padding: 20px;
	}
	.site-2column .site-2column_left .entry-content .reration-posts a {
		font-size: 13px;
	}
}
.site-2column .site-2column_left .entry-content .box-caution {
	font-size: 12px;
	padding: 40px;
	margin: 50px 0;
	border: 1px solid var(--color-litegray);
}
.site-2column .site-2column_left .entry-content .box-caution h3 {
	font-weight: 600;
	margin: 0;
	padding: 0;
	margin-bottom: 30px;
	font-size: 16px;
	border: none;
}
.site-2column .site-2column_left .entry-content .box-caution a {
	text-decoration: underline;
}
.site-2column .site-2column_left .entry-content .box-profile {
	background-color: var(--color-litegray);
	gap: 0;
	margin: 36px 0;
	display: flex;
	align-items: flex-start;
}
.prof_text {
	padding: 24px;
}
.site-2column .site-2column_left .entry-content .box-series {
	border: 1px solid var(--color-litegray);
	background-color: transparent;
	padding: 24px;
	position: relative;
}
.site-2column .site-2column_left .entry-content .box-series:before {
	content: "シリーズ記事";
	font-weight: normal;
	position: absolute;
	left: 0;
	top: 0;
	background: var(--color-litegray);
	font-size: 12px;
	padding: 5px;
}
.site-2column .site-2column_left .entry-content .box-series figure, .site-2column .site-2column_left .entry-content .box-profile figure {
	margin: 0;
}
.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:first-child {
	width: 30%;
	flex-basis: auto !important;
}
.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:last-child {
	width: 70%;
	flex-basis: auto !important;
	margin-left: 0px;
}
.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:last-child h3 {
	font-size: 17px;
	font-weight: 400;
	margin: 0;
	margin-bottom: 20px;
	line-height: 1.5;
	padding: 0;
	padding-bottom: 10px;
	border: none;
	border-bottom: 1px solid var(--color-text);
}
.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:last-child p {
	font-size: 14.5px;
}
.site-2column .site-2column_left .entry-content .box-series h3 {
	font-size: 17px;
	background: var(--color-litegray);
	line-height: 1.4;
	margin-bottom: 30px;
}
.site-2column .site-2column_left .entry-content .box-series ul {
	margin: 0;
	list-style: none;
	margin-top: 30px;
}
.site-2column .site-2column_left .entry-content .box-series ul li {
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.4;
}
.site-2column .site-2column_left .entry-content .box-series ul li a:before {
	font-family: "Font Awesome 5 Free";
	content: "\f0da";
	margin-right: 15px;
	display: inline-block;
	font-weight: 900;
}
.site-2column .site-2column_left .entry-content .box-series ul li:last-child {
	margin-bottom: 0;
}
@media (max-width: 768px) {
	.site-2column .site-2column_left .entry-content .box-series {
		margin: 0;
		padding: 20px;
	}
	.site-2column .site-2column_left .entry-content .box-profile {
		flex-direction: column;
		padding: 20px;
	}
	.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:first-child {
		width: 100%;
	}
	.site-2column .site-2column_left .entry-content .box-profile .wp-block-column:last-child {
		width: 100%;
		margin-left: 0px;
	}
}
.site-2column .site-2column_left .entry-header, .site-2column .site-2column_left .entry-footer {
	border-top: 1px solid var(--color-litegray);
	border-bottom: 1px solid var(--color-litegray);
	margin: 20px 0;
	padding: 20px 0;
}
.site-2column .site-2column_left .entry-header .cat-links a, .site-2column .site-2column_left .entry-footer .cat-links a {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	padding: 2px 5px;
	margin-bottom: 0;
}
.site-2column .site-2column_left .entry-footer .tags-links {
	margin-top: 10px;
	font-size: 13px;
}
.site-2column .site-2column_left .entry-footer .tags-links a {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	padding: 2px 5px;
}
.site-2column .site-2column_left .posts-navigation .screen-reader-text, .site-2column .site-2column_left .post-navigation .screen-reader-text {
	display: none;
}
.site-2column .site-2column_left .posts-navigation .nav-links, .site-2column .site-2column_left .post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-previous, .site-2column .site-2column_left .posts-navigation .nav-links .nav-next, .site-2column .site-2column_left .post-navigation .nav-links .nav-previous, .site-2column .site-2column_left .post-navigation .nav-links .nav-next {
	width: 48%;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-next {
	display: flex;
	justify-content: flex-end;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-previous a, .site-2column .site-2column_left .posts-navigation .nav-links .nav-next a, .site-2column .site-2column_left .post-navigation .nav-links .nav-previous a, .site-2column .site-2column_left .post-navigation .nav-links .nav-next a {
	display: flex;
	align-items: center;
}
@media (max-width: 768px) {
	.title_section span {}
	.site-2column .site-2column_left .posts-navigation .nav-links .nav-previous, .site-2column .site-2column_left .posts-navigation .nav-links .nav-next, .site-2column .site-2column_left .post-navigation .nav-links .nav-previous, .site-2column .site-2column_left .post-navigation .nav-links .nav-next {
		width: 100%;
		margin-bottom: 30px;
	}
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-next .nav-subtitle, .site-2column .site-2column_left .post-navigation .nav-links .nav-next .nav-subtitle {
	margin-left: 10px;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-previous .nav-subtitle, .site-2column .site-2column_left .post-navigation .nav-links .nav-previous .nav-subtitle {
	margin-right: 10px;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-title, .site-2column .site-2column_left .post-navigation .nav-links .nav-title {
	font-size: 13px;
	line-height: 1.5;
}
.site-2column .site-2column_left .posts-navigation .nav-links .nav-subtitle, .site-2column .site-2column_left .post-navigation .nav-links .nav-subtitle {
	font-size: 12px;
	background: var(--color-text);
	color: var(--color-white);
	padding: 5px;
	border-radius: 3px;
}
.site-2column .site-2column_left .list_post li {
	margin-bottom: 30px;
}
.site-2column .site-2column_left .list_post li a {
	color: var(--color-text);
}
.site-2column .site-2column_left .list_post li figure {
	width: 200px;
	border: 1px solid var(--color-litegray);
}
.site-2column .site-2column_left .list_post li figure img {
	height: 132px;
	object-fit: cover;
	object-position: center;
}
.site-2column .site-2column_left .list_post li figcaption {
	width: calc(100% - 230px);
}
.site-2column .site-2column_left .list_post li figcaption h3 {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 10px;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
.pager {
	display: flex;
	justify-content: center;
}
.pager span, .pager a {
	padding: 10px;
	line-height: 1;
	margin: 0 10px;
	font-size: 14px;
}
.pager .page-numbers.current {
	background: var(--color-text);
	color: var(--color-white);
}
@media (max-width: 768px) {
	.pager span, .pager a {
		font-size: 10px;
	}
	.site-2column .site-2column_left .list_post li a figcaption h3 {
		font-size: 14px;
	}
	.site-2column .site-2column_left .list_post li a figcaption time {
		display: none;
	}
}
aside.widget-area {
	width: 280px;
}
@media (max-width: 768px) {
	.site-2column {
		width: 100%;
	}
	.site-2column .site-2column_left {
		width: 100%;
		padding: 0;
	}
	.site-2column .site-2column_left .list_post li figure {
		width: 100%;
		margin-bottom: 20px;
	}
	.site-2column .site-2column_left .list_post li figure img {
		height: auto;
	}
	.site-2column .site-2column_left .list_post li figcaption {
		width: 100%;
	}
	.site-2column .site-2column_left .list_post li figcaption h3 {
		-webkit-line-clamp: unset;
	}
	.site-2column .site-2column_left .list_post li figcaption time {}
	aside.widget-area {
		width: 100%;
		padding: 0;
	}
}
.page-id-4310 .site-2column .site-2column_left .list_tags, .archive .site-2column .site-2column_left .list_tags {
	justify-content: flex-start;
	margin-top: 10px;
}
.page-id-4310 .site-2column .site-2column_left .list_tags li, .archive .site-2column .site-2column_left .list_tags li {
	background: var(--color-litegray);
	font-size: 12px;
	display: inline-block;
	margin-right: 5px;
	padding: 2px 5px;
	margin-bottom: 0;
}
.fa-hatena:before {
	font-family: Verdana;
	font-weight: bold;
	content: "B!";
}
.share {
	margin-top: 1em;
	margin-bottom: 40px;
	display: flex;
	justify-content: center;
}
.share ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.share ul:after {
	display: block;
	clear: both;
	content: "";
}
.share ul li {
	float: left;
	margin: 0;
	width: 120px;
}
.share ul li a {
	font-size: 14px;
	display: block;
	padding: 10px;
	text-align: center;
	text-decoration: none;
	color: $AtagColor;
}
.tweet a:hover {
	background-color: #55acee;
}
.facebook a:hover {
	background-color: #315096;
}
.hatena a:hover {
	background-color: #008fde;
}
.line a:hover {
	background-color: #00c030;
}
.pinterest a:hover {
	background-color: #c60120;
}
@media (max-width: 768px) {
	.site-2column .site-2column_left .entry-content {
		padding: 0;
	}
	.share li {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 3px;
		width: 4em;
	}
	.share li i {
		font-size: 1.5em;
		padding-top: 3px;
	}
	.share li span {
		display: none;
	}
}
.page .site-main {
	margin: 100px auto;
	width: 1200px;
}
.page .entry-title {
	font-size: 23px;
	margin-bottom: 100px;
	text-align: center;
}
.form_table {
	width: 600px;
	margin: 0 auto;
}
.form_table dl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.form_table dl dt {
	width: 34%;
	margin-bottom: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	line-height: 1;
	font-size: 16px;
}
.form_table dl dd {
	width: 62%;
	margin-bottom: 20px;
	font-size: 16px;
}
.form_table dl dd input, .form_table dl dd textarea {
	width: calc(100% - 20px);
	background: var(--color-litegray);
	border: 0;
	padding: 10px;
}
.sec_form {
	padding: 100px 0 0;
}
.sec_form .title_section {
	color: #0b7aac;
}
.sec_form .form_table dl dt {
	color: var(--color-text);
}
.sec_form .btnWrap input {
	background: #0b7aac;
	color: var(--color-white);
	cursor: pointer;
}
.check {
	text-align: center;
}
.wp-block-buttons>.wp-block-button a {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	width: fit-content;
	min-width: 20rem;
	height: fit-content;
	font-size: 1.6rem;
	min-height: 5rem;
	padding: .75rem 2.25rem;
	background: var(--color-accent);
	border-radius: 4px;
	color: var(--color-white);
	position:relative;
	box-shadow: var(--box-shadow);
}
.wp-block-buttons>.wp-block-button a:after {
content: "";
    height: 10px;
    display: inline-block;
    width: 10px;
    right: 15px;
    background-color: var(--color-text);
    -webkit-mask-image: url(/wp-content/themes/eclo/icon_arrow.svg);
    mask-image: url(/wp-content/themes/eclo/icon_arrow.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(45deg);
    position: absolute;
    mask-repeat: no-repeat;
}
.wp-block-buttons>.wp-block-button a[href*="contact"]:after {
    transform: rotate(0deg);
    -webkit-mask-image: url(/wp-content/uploads/icon_mail.svg);
    mask-image: url(/wp-content/uploads/icon_mail.svg);
    opacity: 0.6;
    height: 14px;
    display: inline-block;
    width: 18px;
}

.btnWrap {
	text-align: center;
	margin: 50px 0 0;
}
.btnWrap a, .btnWrap input {
	background: var(--color-text);
	color: var(--color-white);
	font-size: 14px;
	border: 0;
	padding: 20px 40px;
}
.required:after {
	content: "必須";
	font-size: 10px;
	background: #f00;
	line-height: 1;
	margin-top: 0;
	color: var(--color-white);
	padding: 2px 5px;
}
@media (max-width: 768px) {
	.page .site-main {
		width: 100%;
		padding: 0 24px;
	}
	.form_table {
		width: 100%;
		padding: 0 30px;
		display: block;
	}
	.form_table dl dt {
		width: 100%;
		display: block;
	}
	.form_table dl dd {
		width: 100%;
		display: block;
	}
}
.sprite svg {
	width: 100%;
	height: 330px;
}
.sec_gadgets {
	padding: 64px;
	background: var(--color-main-liter);
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
.sec_gadgets ul li h3 {
	font-size: 16px;
	margin: 12px 0;
}
.sec_gadgets ul li p {
	font-size: 15px;
	line-height: 1.7;
}
.sec_related {
	padding: 64px 0;
}
.sec_related ul li h3 {
	font-size: 16px;
	margin: 12px 0;
}
@media (max-width: 768px) {
	.sec_gadgets {
		padding: 24px;
	}
}


.service-template-default h1{
		font-family: var(--font-headline);
	font-size:40px;
	margin-bottom:24px;
}