/*トップ画像*/
.top_box{
	position: relative;
  display: inline-block;
	margin:0 calc(50% - 50vw);
  width:unset; 
	max-width:unset;
}
.top_p{
	color:#969696;
	position: absolute;
	text-align:center;
	line-height:1.2;
	top:40%;
  transform: translate(-50%, -50%);
	font-size:3em;
	font-weight:600;
	letter-spacing: 8px;
	width: 100%;
	opacity: 0; 
  transform: translateY(100%);
  animation: fadeInFromBottom 2s forwards;
	 font-family: YuGothic, 'Yu Gothic', YuGothic, 'Yu Gothic', sans-serif;
}
@keyframes fadeInFromBottom {
  to {
    opacity: 1; /* アニメーション終了時に完全に表示 */
    transform: translateY(0); /* アニメーション終了時の位置 */
  }
}

/*全ての見出し統一*/
.s_title{	
	position: relative;
    padding: 0.5rem 0 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 26px;
    background-image: linear-gradient(135deg, #16b5dd 10%, #b2d5de 100%);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: bottom;
text-align: center;
}
/*明朝体見出し*/
.min_p{
	font-size:26px;
	margin-left:3%;
	font-family: serif;
	font-weight:700;
}
.w_400{
	max-width: 400px;
}
/*HOMEページ*/
a.btn_24 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 260px;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 4px;
	border: 1px solid #27acd9;
	color: #27acd9;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
	transition: all 0.2s ease-in;
	margin:0 auto;
	border-radius:50px;
}
a.btn_24:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}
 
a.btn_24:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #27acd9;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}
 
a.btn_24:hover {
 color: #ffffff;
 border: 1px solid #27acd9;
}
 
a.btn_24:hover:before {
 top: -35%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}
 
a.btn_24:hover:after {
 top: -45%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/*HOMEの見出し*/
.underlined-text {
  position: relative;
  display: inline-block;
  font-size: 2em;
	font-weight:800;
	margin-bottom:25px;
}

.underlined-text::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 11px;
  background-color: #ff9;
  transform: scaleX(0);
  transform-origin: bottom left;
  animation: underlineDelay 0.8s 1 1.3s ease-in-out forwards; /* 遅延とアニメーションの設定 */
}

@keyframes underlineDelay {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

.home_p{
	margin-top:2%;
	max-width:600px;
	margin-bottom: 5%;
}
.top-deco{
	 color: #f5f5f5;
	font-size: 13vw;
	font-weight:1000;
	margin-bottom:0px;
	text-align:left!important;
	line-height: 1.4;
	position:relative;
  margin:0 calc(50% - 50vw);
}

/*大きめの文字*/
.big-text{
	font-size:20px;
	line-height: 1.4;
	font-weight:600;
	margin-bottom:25px;
}

/*左寄せ*/
.home_left{
	 margin-right: 0;
 	margin-left: auto;
 	max-width:640px;
}

/*料金ページ*/
.plan_title{
  font-size:3em;
  font-weight:800;
}
.plan_copy{
  font-family: serif;
	font-weight:800;
}
.plan_mini{
  font-size:13px;
	margin-bottom:3%!important;
	max-width: 435px;
  margin-left: auto;
  margin-right: auto;
}
.plan_en{
  font-size:2.6em;
  font-weight:800;
  margin-bottom:-2%!important;
	text-align:center;
}
.mini_cen{
	text-align:center;
	color: gray;
}
.p_17{
	font-size:17px;
}
.ao{
	 color: #7388ea;
	background: -webkit-linear-gradient(298deg, #7388ea, #00ffd2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.p_contact{
	text-align:center;
	background-image: linear-gradient(135deg, #16b5dd 10%, #b2d5de 100%);
  height: 74px;
	color:#fff;
	max-width:370px;
	height:60px;
	font-size:18px;
	border-radius:40px;
	margin: 0 auto;
	display: flex;
  justify-content: center;
	align-items: center; 
}
.p_contact p{
	margin-bottom:0px!important;
}
.p_contact:hover{
	transform: translateY(5px);
}
.purple{
	 color: #ea73b6;
	 background: -webkit-linear-gradient(298deg, #ea73b6, #00ffd2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pa_contact {
    text-align: center;
    background-image: linear-gradient(141deg, #e10dd3 10%, #b2d5de 100%);
    height: 74px;
    color: #fff;
    max-width: 370px;
    height: 60px;
    font-size: 18px;
    border-radius: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pa_contact p{
	margin-bottom:0px!important;
}
.pa_contact:hover{
	transform: translateY(5px);
}

.op_2{
  border-radius: 30px;
	height:380px;
  box-shadow: 0px 12px 15px 0px rgba(0, 0, 0, 0.35);
}
.op_ce{
 text-align:center;
}
.op_img{
  width:200px;
	/*画像が余白ないときの調整*/
	padding: 7%;
}
.op_p{
	font-size:130%;
	margin-bottom: 0px!important;
  padding-top: 5%;
}
.op_left{
	width:90%;
	margin:0 auto;
}

.op_2:hover .op_p {
    position: relative;
}

.op_2:hover .op_p::after {
    content: '';
    position: absolute;
    left: 20%;
    bottom: -2px;
    width: 80%;
    height: 4px;
    background: linear-gradient(to right, purple, pink);
    animation: underline-animation 0.3s forwards;
    z-index: 1;
}

@keyframes underline-animation {
    from {
        width: 0;
        left: 0;
    }
    to {
        width: 60%;
    }
}


/*ハンバーガーメニューアイコンを右にする*/
.vk-mobile-nav-menu-btn {
    left: initial;
    right: 5px;
}

/*ハンバーガーメニュー*/
.vk-mobile-nav-menu-btn {
	border-radius:50px;
	height:46px;
	width:46px;
}

.hamtext{
	text-align:center;
	font-size:17px;
	margin-bottom:0px!important;
}
.hamtext span{
	display:block;
	font-size:12px;
	margin-top:-10px;
	color:#16b5dd;
}
.vk-mobile-nav nav>ul {
  border-top: none;
}
.vk-mobile-nav nav ul li a {
  border-bottom: none; 
}
.vk-mobile-nav nav ul li :hover{
	background-image: linear-gradient(135deg, #16b5dd 10%, #b2d5de 100%);
	color:#fff;
}
.vk-mobile-nav nav ul li :hover
.hamtext span{
	color:#fff;
}
.vk-mobile-nav{
	opacity: 0.98;
}
.nonav{
	display:none;
}
.vk-mobile-nav-menu-outer{
	margin-top:10%;
}


/*スクロール時のヘッダーメニューを消す*/
.header_scrolled .gMenu_outer nav {
	display:none;
}
/*ページヘッダー非表示*/
.page-header { 
		display:none; 
}
#breadcrumb{
	background-image: linear-gradient(90deg, rgba(85, 85, 85, 1) 32%, rgba(0, 0, 0, 1));
    color: #fff;
}
.breadcrumb-list a{
    color: #fff;
}
/*お問い合わせメニュー色変更*/
#menu-item-1738{
	background-image: linear-gradient(-225deg, #FFE29F 0%, #FFA99F 48%, #FF719A 100%);
	border-radius:30px;
	width:150px;
}
#menu-item-1738 a{
	color:#fff;
}
#menu-item-1738:before{
	border-bottom: 0px solid var(--vk-color-primary);
}
#menu-item-1738:hover{
	opacity:0.6;
}
/*制作事例*/
.work_box ul{
	padding-left:0px;
}
.work_box ul{
	list-style:none;
  display:flex;
	/*追加*/
	flex-wrap: wrap;
}
.mini_wobox{
  width:260px;
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
	overflow:hidden; 
	margin-left:1%;
	margin-bottom:3%;
	border: 1px solid #ebfbff8a;
}
.work_box li{
	width:260px;
}
.work_box li:hover{
	transform:scale(1.03);
	transition:1s;
}
.work_box a{
	text-decoration:none;
}
/*.work_box img{
  width:260px;
}*/
.one_work{
  position:relative;
}
.work_name{
  background-color:#000;
  color:#fff;
  text-align:center;
  font-size:12px;
  margin-top:-3%;
  width:100px;
  position:absolute;
  transform: translate(-50%, -50%);
  left: 22%;
}
.co_name{
  font-weight:600;
  color:#000;
  padding-left:5px;
	margin-bottom: 0px;
}
.biz_name{
  color:#000;
  padding-left:5px;
	margin-bottom: 14px;
}
.work_box li{
	margin-top:0px;
}
/*料金ページ*/
.sha_20{
  box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
}

/*フッター*/
.site-footer{
	    background-image: linear-gradient(11deg, #16b5dd 10%, #b2d5de 100%);
	    border-top: none;
}
.f_menu {
	list-style:none;
}
.f_menu a{
	text-decoration:none;
	color:#fff;
}
.f_menu a:hover{
	opacity:0.6;
}
.site-footer-copyright{
	color:#696969;
}
/*フッターロゴ非表示*/
footer .copySection p:nth-child(2) {
    display:none !important;
}
.siteFooter{
	border-top: 3px solid #f2f0ed;
	background-color:#f2f0ed;
	color:#696969;
}
.siteFooter li>a{
	color:#696969;
}
.widget a{
		text-decoration:none!important;
}
.widget a:hover{
	opacity:0.5;
}
.f_p{
	color:#696969;
	font-size:24px;
	margin-bottom:0px!important;
	line-height: 1;
}
.f_p span{
	font-size:14px;
	margin-top:0px!important;
}
.fr_p{
	color:#696969;
	font-size:14px;
	margin-bottom:3px!important;
}

/*お問い合わせコンタクトフォーム*/
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
  display: block;
  width: 100%;
  height: 45px;
  margin-bottom: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background-color: #eff1f5;
  box-shadow: none;
  color: #5c6b80;
  font-size: 1em;
  vertical-align: middle;
  line-height: 45px;
  transition: background-color 0.24s ease-in-out;
	border: 1px solid #dfdfdf;
	 box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
	/*白追加*/
	background-color:#fff;
	border-radius: 10px;
}
textarea{
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
  padding: 0.5em;
  overflow: auto;
	border: 1px solid #dfdfdf;
	 box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
	/*白追加*/
	background-color:#fff!important;
	border-radius: 10px;
}

.inquiry th {
    text-align: left;
    font-size: 14px;
    color: #444;
    padding-right: 5px;
    width: 30%;
    background: #f7f7f7;
    border: solid 1px #d7d7d7;
	/*白デザインに追加*/
	 	background: #ffff;
		border: none;
}
.inquiry td {
    font-size: 14px;
    border: solid 1px #d7d7d7;
		background-color:#F9F9F9;
		/*白デザインに追加*/
	background: #fff;
	border: none;
}

/*白デザイン追加*/
.page-id-10 :where(:not(.wp-block-table))>table {
     border:none;
}

.haveto {
    font-size: 8px;
    padding: 5px;
    background: #ff7176;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
}
.any {
    font-size: 8px;
    padding: 5px;
    background:#16b5dd;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
}
.verticallist .wpcf7-list-item {
    display: block;
}
#formbtn {
    display: block;
    padding: 15px;
    width: 350px;
    background: #ffffff;
	background-color:#16b5dd;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 2px;
		border: 1px solid  #16b5dd;
    margin: 25px auto 0;
	border-radius:50px;
}
/*ほぼ全てのコンタクトフォーム7の送信ボタンホバー時に色が反転する*/
#formbtn:hover {
	background-color: #fff!important; 
  color: #16b5dd; 
}

/*お問い合わせフォームの左側のthに影響*/
input,
select,
textarea {
    border: 1px solid #dfdfdf;
    letter-spacing: 1px;
    margin: 0;
    max-width: 100%;
}
.inquiry{
	max-width:890px;
	margin:0 auto;
}

/*コンタクトフォーム７の行間をあける入力欄の上下の空間に影響*/
input[type="text"], input[type="password"], input[type="datetime"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], select, textarea, .field{
	margin-top:2%;
	margin-bottom:2%!important;
}

.jobselection{
	height:85px;
}

.inquiry p{
	margin-top:0px;
	margin-bottom:0px;
}
.aida {
    margin-top: 20px;
}
/* CF7ラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
margin-top:5px;
display: block;
}
@media(max-width:500px) {
    .inquiry td,
    .inquiry th {
        display: block !important;
        width: 100% !important;
        border-top: none !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important
    }
    .inquiry tr:first-child th {
        border-top: 1px solid #d7d7d7 !important
    }
    .inquiry .any,
    .inquiry .haveto {
        font-size: 10px
    }
}

/*お問い合わせエリアの背景色を変更*/
.form-control {
	border: 1px solid #dfdfdf;
	 box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.3);
	/*白追加*/
	background-color:#f0eff55e;
	border-radius: 10px;
}

/*会社概要*/
/* table01 */
#table01 tr {
  border-bottom: 1px solid #b5b1b1;
}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
}

#table01 th {
  width: 30%;
}
.page-id-9 :where(:not(.wp-block-table))>table {
	border: 0px solid 
}

/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
		text-align: center;
  }

  #table01 th {
    width: 100%;
  }

  #table01 td {
    padding-top: 0;
  }
}


/*縦長入れ替え*/
@media screen and (min-width: 768px){
	.m_home{
	display:none;
}
}

@media screen and (max-width: 1199.30px){
	.work_box ul {
    justify-content: center;/
  }
	.mini_wobox {
		margin-left: 3%;
	}
}


/*順番を入れ替える*/
@media(max-width:782px) {
.boxreverse{
	flex-direction: column-reverse;
  align-items: flex-start;
}
}

@media screen and (max-width: 768px){
	.pc_home{
	display:none;
}
	.top_p{
		margin-top:3%;
	}
		.mini_wobox {
		margin-left: 2%;
	}
}

@media screen and (max-width: 767px){
	.mini_wobox {
    width: 230px;
	}
	.work_box li{
	width:230px;
}
}

@media screen and (max-width: 600px){
	.top_p{
		font-size:2.4em;
	}
}
@media screen and (max-width: 448px){
	.top_p{
		font-size:1.7em;
	}
	/*アイコン小さくする*/
	.op_img{
  width:150px;
}
	.op_p{
  padding-top: 4%;
}
	.op_2{
	height:330px;
}
}