@charset "UTF-8";
/*
Theme Name: Keaton
Author: 株式会社メックコミュニケーションズ
Author URI: https://www.mec-com.co.jp
Date: 2024-07
*/

/*parts
-----------------------------------------------------------------------------------------*/
body{
/*特色*/
	--color_A:#005EAE;/*メインカラー*/
	--color_Ad:#005EAE;/*メインカラー濃*/
	--color_Ap:#E9EDF7;/*メインカラー薄*/
	--color_red:#FF0000;/*赤*/
	--color_orange:#EC6C22;/*オレンジ*/
/*em*/
	--color_notice:var(--color_red);
/*テキストリンク*/
	--color_link:#005AAA;
/*-------------------------base*/
/*text*/
	--tx_sen:var(--color_A);
	--tx_waku:var(--color_A);
	--tx_kiji:#000;
	--tx_belt:var(--color_A);
	--tx_line:#CCC;
	--tx_bar:var(--color_A);
	--tx_maru:var(--color_A);
/*ya*/
	--ya_tri:var(--color_A);
	--ya_sen:var(--color_A);
	--ya_maru:var(--color_A);
/*btn*/
	--btn:var(--color_A);
/*list*/
	--list_line:#000;
	--list_box:#FFF;
	--list_mark:var(--color_red);
/*sitemap*/
	--sitemap:var(--color_A);
	--sitemap_ya:var(--color_A);
/*parts*/
	--dtbox_tx:#FFF;
	--dtbox_bg:var(--color_A);
	--tab_btn:var(--color_A);
/*etc*/
	--sya:var(--color_A);
}
/*-------------------------------------------------------------------------------------------------特色border_color*/
body .sen_A{border-color:var(--color_A);}
body .sen_red{border-color:var(--color_red);}
body .sen_orange{border-color:var(--color_orange);}
/*-------------------------------------------------------------------------------------------------特色bg*/
body .bg_A{background-color:var(--color_A);}
body .bg_Ad{background-color:var(--color_Ad);}
body .bg_Ap{background-color:var(--color_Ap);}
body .bg_red{background-color:var(--color_red);}
body .bg_orange{background-color:var(--color_orange);}
/*-------------------------------------------------------------------------------------------------特色text_color*/
body .tx_A{color:var(--color_Ad);}
body .tx_red{color:var(--color_red);}
body .tx_orange{color:var(--color_orange);}
/*-------------------------------------------------------------------------------------------------特色ya*/
body .ya_A::before{border-color:var(--color_A);background-color:var(--color_A);}
body .ya_red::before{border-color:var(--color_red);background-color:var(--color_red);}
body .ya_orange::before{border-color:var(--color_orange);background-color:var(--color_orange);}
/*-------------------------------------------------------------------------------------------------utility*/
body .tx_900{font-weight:900;}
body .tx_500{font-weight:500;}
body .tx_yellow{color:yellow;}
.dot li:before{transform: scale(0.8) translateY(0.15em);}
.dot_A li:before{background:var(--color_A);}
.dot_orange li:before{background:var(--color_orange);}
.row180{display:grid;grid-template-columns: repeat( auto-fit, minmax(180px,1fr) ) ;}
body .py15{padding-top:15px;padding-bottom:15px}

/*-------------------------table*/
table th,
table td{
	padding:1em 0;
	border-color:#CCC;
}
table th{
	padding-right:1em;
	font-weight:bold;
	width:min(12vw,240px);
}

/*-------------------------arrow*/
.arrow{
	font-weight:bold;
	color:var(--color_A);
	display:inline-flex;
	justify-content:end;
	align-items:center;
	gap:0.5em;
}
.arrow::after{
	content:"";
	display:block;
	width:50px;
	height:50px;
	background:url(images/arrow.svg) no-repeat;
	transition:all 0.5s;
}
.arrow:hover{text-decoration:underline;}
.arrow:hover::after{transform: translateX(0.5em);}
.arrow.tx_w::after{background-image:url(images/arrow_w.svg);}
/*-------------------------title*/
.title_area{
	padding:30px 0;
	background:var(--color_Ap);
}
.title{
	font-weight:bold;
	font-size:2rem;
	line-height:1.1;
	text-align:center;
}
.title span{
	font-size:5rem;
	display:block;
}
@media screen and (max-width: 767px) {
	.title_area{padding:25px 10px;}
	.title{font-size:1.6rem;}
	.title span{font-size:2.5rem;}
}
/*-------------------------list_topics*/
.list_topics .list_line{
	border-color:#CCC;
}
.list_topics .list_line p{
	font-weight:500;
}
.list_topics .list_line a{
	padding:1.2em 1em;
}
.list_topics .list_line a:hover{
	filter:brightness(90%);
}
.list_topics .list_line .list_date{
	font-size:100%;
	padding:0;
	font-weight:bold;
	color:#999;
}
.list_topics .list_line .list_cat{
	border:none;
	background:var(--color_Ap);
	color:var(--color_A);
	font-weight:bold;
}
.list_topics .list_line .list_mark{
	font-weight:900;
	padding:0.5em;
	border-radius:100%;
	top:0.5em;
	left:-1em;
	transform:rotate(-15deg);
}
@media screen and (max-width: 767px) {
	.list_topics .list_line a{flex-wrap:wrap;gap:0.4em 1em;padding:0.8em 0;}
	.list_topics .list_line .list_date{font-size:80%;}
	.list_topics .list_line .list_cat{padding:0 0.5em;width:auto;}
	.list_topics .list_line .list_mark{position:static;transform:rotate(0);padding:0.4em;margin-left:-5px;}
}
/*-------------------------list_works*/
.list_works{
	display:grid;
	grid-template-columns: repeat(3 , 1fr);
	gap:40px;
}
@media screen and (max-width: 1000px) {
	.list_works{gap:20px;}
}
@media screen and (max-width: 767px) {
	.list_works{display:grid;grid-template-columns: repeat(1 , 1fr);}
}
.list_works .list_box{
	border-radius:30px;
	overflow:hidden;
	outline:1px solid #DDD;
	outline-offset:-1px;
}
.list_works .list_box a{
	background:none;
}
.list_works .list_box a:hover{
	background:rgba(0,0,0,0.1);
}
.list_works .list_box a div{
	padding:25px 30px;
}
@media screen and (max-width: 1000px) and (min-width: 768px) {
	.list_works .list_box a div{padding:20px 15px;}
}
.list_works .list_title{
	font-size:2rem;
	font-weight:bold;
	margin-bottom:0.5em;
}
.list_works .list_area{
	font-size:1.4rem;
	font-weight:bold;
	color:var(--color_A);
	margin-bottom:0.2em;
}
.list_works .list_tag{
	display:flex;
	gap:5px 3px;
	flex-wrap:wrap;
	font-size:1.2rem;
}
.list_works .list_tag span{
	padding:0.2em 0.5em;
	color:#848484;
	font-weight:bold;
	border:1px solid #D9D9D9;
	border-radius:5px;
}
/*-------------------------acc_nav*/
.acc_nav{
	vertical-align:top;
	border-radius:8px;
	overflow:hidden;
	position:relative;
	margin-bottom:auto;
}
.acc_nav .acc_btn{
	padding:1rem;
}
.acc_nav .acc_btn::after{
	content:"▼";
	position:absolute;
	right:1.5rem;
	top:1.25rem;
	font-size:80%;
}
.acc_nav .acc_btn.open::after{
	content:"▲";
}
.acc_nav .accordion a{
	display:block;
	padding:1rem;
	border-top:1px solid #FFF;
}
.acc_nav.sen_waku .accordion a{
	border-top:1px solid #CCC;
}
.acc_nav .acc_btn:hover,
.acc_nav .accordion a:hover{
	background-color:rgba(0,0,0,0.2);
}
/*-------------------------tag_list*/
.tag_list a{
	padding:0.2em 0.5em;
	color:#848484;
	font-weight:bold;
	border:1px solid #D9D9D9;
	border-radius:5px;
}
.tag_list a:hover{
	background:#F1F1F1;
}
/*dt / dd*/
.tag_list dt{
	float:left;
	padding-top:1em;
	padding-right:0.5em;
	width:6.5em;
	text-align:right;
	font-size:inherit;
}
.tag_list dd{
	padding-top:1em;
	flex-wrap:wrap;
	display:flex;
	gap:3px;
	font-size:inherit;
}
.tag_list dd a{
	font-size:80%;
}
/*p*/
p.tag_list{
	flex-wrap:wrap;
	display:flex;
	gap:3px;
}

/*home
-----------------------------------------------------------------------------------------*/
.home{
	background:linear-gradient( #CCE6FF, #FFFFFF 250px ) top no-repeat;
}
/*-------------------------mainimg*/
.mainimg{
	position:relative;
	max-width:1400px;
	margin:0 auto;
	text-align:left;
	overflow:hidden;
	mix-blend-mode:multiply;
}
.mainimg p{
	padding-left:12%;
	font-size:46px;
	margin-top:50px;
	margin-bottom:-190px;
	font-weight:900;
	position:relative;
	z-index:1;
}
@media screen and (max-width: 1300px) {
	.mainimg p{padding-left:6%;font-size:4vw;margin-top:5vw;margin-bottom:-5vw;}
}
@media screen and (max-width: 600px) {
	.mainimg p{font-size:6vw;margin-top:13vw;margin-bottom:-1vw;}
	.mainimg figure{width:102%;margin-left:-1%;}
}
/*-------------------------home_topics*/
.home_topics{
	max-width:900px;
}
.home_topics .title{
	margin-top:max(-8vw , -110px);
	padding-right:min(8vw , 150px);
}
/*-------------------------home_about*/
.home_about{
	background-color:var(--color_A);
	background-image:url("images/home_about_t.svg"), url("images/home_about_img.svg"), url("images/home_about_b.svg");
	background-repeat:no-repeat, no-repeat, no-repeat;
	background-size:101%, auto, 101%;
	background-position:center top -1px, calc(50% - 460px) top, center bottom -1px;
	padding-bottom:10vw;
	margin-bottom:-10vw;
	position:relative;
}
@media screen and (max-width: 767px) {
	.home_about{background-position:center top -1px, calc(50% - 300px) top, center bottom -1px;}
}
.home_about .frame{
	max-width:900px;
}
.home_about .tx{
	max-width:540px;
	margin:0 auto;
}
.home_about .hito{
	position:absolute;
	top:calc(-2vw - 90px);
	left:calc(50% + 500px);
}
@media screen and (max-width: 1320px) {
	.home_about .hito{width:max(10vw , 80px);top:calc(-5vw - 30px);left:10%;}
}
@media screen and (max-width: 767px) {
	.home_about .hito{top:calc(5vw - 100px);}
}
/*-------------------------home_service*/
.home_service{
	position:relative;
}
.home_service ul{
	gap:25px;
}
.home_service ul li{
	width:30%;
}
.home_service ul a{
	xxxborder:1px solid #E5E5E5;
	border-radius:20px;
	padding:20px 0;
	text-align:center;
}
.home_service ul a:hover{
	background:rgba(0,0,0,0.05);
}
.home_service ul span{
	font-size:2.5rem;
	font-weight:bold;
	color:var(--color_A);
}
.home_service ul strong{
	font-size:2rem;
	font-weight:bold;
	color:#424242;
}
@media screen and (max-width: 1100px) {
	.home_service ul{gap:15px;}
	.home_service ul span{font-size:2rem;}
	.home_service ul strong{font-size:1.6rem;}
	.home_service ul img{max-width:20vw;}
}
@media screen and (max-width: 767px) {
	.home_service ul{gap:10px;}
	.home_service ul li{width:48%;}
}
@media screen and (max-width: 540px) {
	.home_service ul span{font-size:4vw;}
	.home_service ul strong{font-size:1.6rem;}
}
.home_service .hito{
	position:absolute;
	bottom:-220px;
	right:20%;
	width:max(15vw , 100px);
	z-index:1;
}
@media screen and (max-width: 1200px) {
.home_service .hito{bottom:-140px;right:50px;}
}
@media screen and (max-width: 767px) {
.home_service .hito{bottom:-80px;right:30px;}
}
/*-------------------------home_works*/
.home_works{
	background-color:var(--color_Ap);
	background-image:url("images/home_works_t.svg"), url("images/home_works_b.svg");
	background-repeat:no-repeat, no-repeat;
	background-size:100% 30px , 100% 40px;
	background-position:center top -1px, center bottom -1px;
	position:relative;
	padding:100px 0 70px 0;
	width:100%;
	overflow:hidden;
}
.home_works .list_works .list_box{
	outline:none;
}
@media screen and (max-width: 767px) {
	.home_works{background-size:100% 15px , 100% 15px;padding:50px 0 30px 0;}
}
/*-------------------------home_company*/
.home_company{
	position:relative;
}
.home_company ul{
	gap:40px;
}
.home_company ul li{
	width:100%;
}
.home_company ul a{
	xxxborder:1px solid #E5E5E5;
	border-radius:20px;
	padding:30px 0 20px 0;
	text-align:center;
}
.home_company ul a:hover{
	background:rgba(0,0,0,0.05);
}
.home_company ul strong{
	font-size:2rem;
	font-weight:bold;
}
@media screen and (max-width: 1000px) {
	.home_company ul{gap:20px;}
	.home_company ul a{padding:20px 0 15px 0;}
	.home_company ul img{max-width:min(20vw , 120px);}
	.home_company ul strong{font-size:1.8rem;}
}
.home_company .hito{
	position:absolute;
	bottom:-60px;
	left:60px;
	z-index:1;
	width:max(15vw , 100px)
}
@media screen and (max-width: 767px) {
.home_company .hito{bottom:-30px;left:30px;}
}

/*about
-----------------------------------------------------------------------------------------*/
/*-------------------------about_area*/
.about_area{
	background:url(images/bg_about.svg) top center no-repeat;
	position:relative;
}
.about_area::after{
	width:100%;
	height:calc(100% - 750px);
	content:"";
	display:block;
	position:absolute;
	left:0;
	bottom:0;
	background:#7A7272;
	z-index:-1;
}

.about_area .frame{
	overflow:visible;/*stickyの先祖はvisible*/
}
.about_area.nekko{/*nekko*/
	background-attachment: fixed;
	background-position:center top -700px;
}
.about_area.nekko_end{/*nekko_end*/
	background-attachment: scroll;
	background-position:center bottom;
}
@media screen and (max-width: 767px) {
	.about_area{background:none;}
}
/*-------------------------about_negai*/
.about_negai{
	height:650px;
	padding-top:50px;
	text-align:right;
}
.about_negai .hito1{
	left:calc(50% - 200px);
}
.about_negai .inblock{
	width:600px;
	text-align:left;
}
@media screen and (max-width: 767px) {
	.about_negai{height:auto;padding-top:0;padding-bottom:200px;text-align:left;
	background:url(images/bg_about.svg) bottom -450px left calc(50% + 100px) no-repeat;background-size:3220px;}
	.about_negai .inblock{width:auto;}
	.about_negai .hito1{left:50%;}
	.about_negai .tx br{display:none;}
	.about_negai .tx{font-size:1.7rem;}
}
/*-------------------------about_nekko*/
@media screen and (max-width: 767px) {
.about_nekko{
	background:#7A7272 url(images/bg_about.svg) top -280px left calc(50% + 100px) no-repeat;
	background-size:3220px;
}
.nekko .about_nekko{
	background-attachment: fixed;
	background-position:top -280px left calc(50% + 100px);
}
.nekko_end .about_nekko{
	background-attachment: scroll;
	background-position:bottom 600px left calc(50% + 100px);
}
}
/*-------------------------aboutbox*/
.aboutbox{
	padding:100px 0 ;
	display:flex;
}
@media screen and (max-width: 767px) {
	.aboutbox{padding:30px 0;display:block;}
}
/*-------------------------nekkotitle*/
.nekkotitle{
	position:sticky;
	top:40vh;
	left:0;
	height:100%;
	font-weight:900;
	text-align:center;
	width:500px;
	padding-right:20px;
}
.nekkotitle span{
	transition: all 0.5s;
}
.nekkotitle .rad100{
	background:#FFF;
	font-size:3rem;
	line-height:1.5;
	border-radius:100px;
	padding:0 20px;
	color:#635d5c;
	opacity:0.5;
}
.nekkotitle .block{
	font-size:5.5rem;
}
.fixitem .nekkotitle .rad100{
	opacity:1;
}
.fixitem .nekkotitle .block{
	color:yellow;
}
@media screen and (max-width: 1200px) {
	.nekkotitle .rad100{font-size:2.5vw;}
	.nekkotitle .block{font-size:4.5vw;}
}
@media screen and (max-width: 767px) {
	.nekkotitle{position:static;width:auto;padding:10px 0;}
	.nekkotitle .rad100{font-size:2rem;opacity:1;}
	.nekkotitle .block{font-size:4rem;color:yellow;}
}
/*-------------------------nekkotx*/
.nekkotx{
	width:600px;
	flex-shrink:0;
	margin-left:auto;
}
.nekkotx p{
	line-height:2;
	color:#FFF;
}
.nekkotx p + p{
	margin-top:2em;
}
@media screen and (max-width: 1200px) {
.nekkotx{width:55%;}
.nekkotx p br{display:none;}
}
@media screen and (max-width: 767px) {
.nekkotx{width:100%;}
}
/*-------------------------about_more*/
.about_more{
	padding:70px 200px;
}
@media screen and (max-width: 767px) {
	.about_more{padding:40px 100px;}
}
@media screen and (max-width: 540px) {
	.about_more{padding:30px 20px 100px 20px;}
}


/*service
-----------------------------------------------------------------------------------------*/
/*-------------------------service_type*/
.service_type{
	display:flex;
	gap:50px;
}
.service_type figure{
	width:280px;
	text-align:center;
	flex-shrink:0;
}
.service_type figcaption{
	background:url(images/fuki.svg) center top no-repeat;
	height:100px;
	font-size:25px;
	line-height:68px;
	font-weight:bold;
	color:var(--color_A);
}
.service_type li{
	font-size:16px;
}
.service_type li + li{
	margin-top:0;
}
@media screen and (max-width: 767px) {
	.service_type{padding:20px 0;flex-direction:column;align-items:center;gap:5px;}
}
/*etc*/
@media print, screen and (min-width:1000px) {
	.service_type ul.etc{grid-template-columns:300px 160px 160px;}
}



/*company
-----------------------------------------------------------------------------------------*/
/*-------------------------btn_menu_top*/
.btn_menu_top{
	display:grid;
	grid-template-columns: repeat(2 , 1fr);
	gap:20px;
}
.btn_menu_top a{
	display:flex;
	align-items:center;
	gap:30px;
	border:1px solid #CCC;
	background:#FFF;
	padding:20px;
	border-radius:10px;
	font-size:3rem;
	font-weight:500;
}
.btn_menu_top a img{
	max-width:100px;
}
.btn_menu_top a:hover{
	background:#F1F1F1;
}
@media screen and (max-width: 1000px) {
	.btn_menu_top a{gap:15px;padding:15px;font-size:2.4rem;}
	.btn_menu_top a img{max-width:60px;}
}
@media screen and (max-width: 767px) {
	.btn_menu_top{grid-template-columns: 1fr;gap:10px;}
}
/*-------------------------btn_menu*/
.btn_menu{
	display:grid;
	grid-template-columns: repeat(4 , 1fr);
	gap:10px;
}
.btn_menu a{
	display:flex;
	align-items:center;
	gap:10px;
	line-height:1.2;
	border:1px solid #CCC;
	background:#FFF;
	padding:10px;
	border-radius:10px;
	font-weight:500;
}
.btn_menu a:hover{
	background:#F1F1F1;
}
.btn_menu a img{
	max-width:40px;
}
@media screen and (max-width: 1000px) {
	.btn_menu{grid-template-columns: repeat(2 , 1fr);font-size:1.6rem;}
}


/*come
-----------------------------------------------------------------------------------------*/
@media screen{
/*-------------------------come_right*/
.come_right,
.come_right::before{
	opacity:0;
	transform: translateX(100%);
	transition:1s;
}
.come_right.action,
.come_right.action::before{
	opacity:1;
     transform: translateX(0);
}
/*-------------------------come_left*/
.come_left,
.come_left::before{
	opacity:0;
	transform: translateX(-100%);
	transition:1s;
}
.come_left.action,
.come_left.action::before{
	opacity:1;
     transform: translateX(0);
}
/*-------------------------come_fuwa*/
.come_fuwa{
	opacity:0;
	transition:1s;
	transform: translateY(50px);
}
.come_fuwa.action{
	opacity:1;
     transform: translateY(0);
}
@media screen and (min-width: 768px) {
.come_fuwa + .come_fuwa{transition-delay:0.3s;}
.come_fuwa + .come_fuwa + .come_fuwa{transition-delay:0.6s;}
.come_fuwa + .come_fuwa + .come_fuwa + .come_fuwa{transition-delay:0.9s;}
.come_fuwa + .come_fuwa + .come_fuwa + .come_fuwa + .come_fuwa{transition-delay:1.2s;}
}
/*-------------------------come_tx*/
.come_tx{
	width:0;
	overflow:hidden;
	white-space:nowrap;
	transition:1s;
}
.come_tx.action{
	width:100%;
}
}


/*width追加
-----------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
	body .pc_w650{width:650px}
}


/*contactform7ボタン位置修正
-----------------------------------------------------------------------------------------*/
div.wpcf7 .wpcf7-spinner {
    display: none !important;
}