/*------------------------------------------------------------
	FOR PC LAYOUT CSS
------------------------------------------------------------*/
@media screen and (min-width:768px){

/*------------------------------------------------------------
	BODY BASIC
------------------------------------------------------------*/
body{
font-size:16px;
line-height:1.75;
color:#222;
font-weight:500;
letter-spacing:.06em;
font-feature-settings:'palt';
}

/*------------------------------------------------------------
	RESPONSIVE
------------------------------------------------------------*/
.pconly{ display:block; }
.sponly{ display:none; }

/*------------------------------------------------------------
	BUTTON
------------------------------------------------------------*/

.links{
display:flex;
justify-content:flex-end;
}
.links li{
margin-right:40px;
}
.links li a{
display:inline-block;
padding:0 30px 20px 0;
color:#222;
font-weight:bold;
position:relative;
}
.links li a::before{
content:'';
width:100%;
height:1px;
background:#222;
position:absolute;
bottom:0;
left:0;
transition:all .2s;
}
.links li a::after{
content:'';
width:20px;
height:1px;
background:#222;
transform:rotate(60deg);
position:absolute;
bottom:8px;
right:-6px;
transition:all .2s;
}

.links li a:hover::after{
right:-11px;
}
.links li a:hover::before{
left:5px;
}
.links li a:hover{
background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.link{
display:flex;
}
.link-right{
justify-content:flex-end;
}


.link a{
display:inline-block;
padding:0 30px 10px 0;
color:#222;
font-weight:bold;
position:relative;
}
.link a::before{
content:'';
width:100%;
height:1px;
background:#222;
position:absolute;
bottom:0;
left:0;
transition:all .2s;
}
.link a::after{
content:'';
width:20px;
height:1px;
background:#222;
transform:rotate(60deg);
position:absolute;
bottom:8px;
right:-6px;
transition:all .2s;
}

.link a:hover::after{
right:-11px;
}
.link a:hover::before{
left:5px;
}
.link a:hover{
background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



/*------------------------------------------------------------
	HEADER
------------------------------------------------------------*/
header{
width:100%;
height:120px;
position:fixed;
top:0;
left:0;
background:linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%);
z-index:10;
}

header.scrolled .site-name,
header.scrolled .h-nav a {
  color: #222;
}

header.scrolled {
  background:linear-gradient(to bottom, rgba(255,255,255,.8) 0%, rgba(255,255,255,0) 100%);
}

.h-wrap{
width:96%;
height:80px;
margin:0 auto;
display:flex;
justify-content:space-between;
align-items:center;
}
.site-name{
font-family:'Poppins';
font-weight:700;
color:#fff;
font-size:30px;
line-height:1;
position:relative;
top:0;
left:0;
}
.site-name span{
display:block;
font-size:12px;
line-height:2;
}
.site-name a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:block;
z-index:2;
}


.h-nav{
display:flex;
}
.h-nav li a{
color:#fff;
font-family:'Poppins';
font-weight:600;
font-size:16px;
line-height:1.5;
padding:1em;
}

.h-nav li a:hover{
background: linear-gradient(to right, #30cfd0 0%, #8A2BE2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



/*------------------------------------------------------------
	TOPPAGE
------------------------------------------------------------*/
#kv{
width:100%;
height:100vh;
position:relative;
}


.video-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
}


.content-section{
background:#fff;
width:100%;
position: relative;
z-index: 1;
}


.inner{
width:80%;
margin:0 auto;
padding:100px 0;
position:relative;
z-index:2;
}

.content-section h2{
font-family:'Poppins';
font-weight:700;
font-size:64px;
line-height:1;
margin-bottom:1em;
}

.index-ttl {
  display: inline-block;
  
}
.index-ttl em {
font-style: normal; 
  display: inline-block;
  opacity: 0;
  /*transform: translateY(30px) rotateX(90deg) skew(10deg); */
  transition:all 0;
}

.index-ttl.inview em {
  opacity: 1;
  transform: translateY(0) skewY(0deg) rotateX(0deg);
}

.split {
  height: 50vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.split-bg-a {
background-image:url(img/spider-web2.webp);
}
.split-bg-b {
background-image:url(img/bg-development.webp);
background-position:center bottom;
}
.lead01{
font-size:1.1rem;
margin-bottom:2.5rem;
}
.lead02{
font-size:1.1rem;
margin-bottom:3em;
}

.lead{
font-size:1.1rem;
margin-bottom:5em;
}

.needs{
display:flex;
flex-wrap:wrap;
gap:0;
margin-bottom:2rem;
}
.needs li{
width:50%;
padding:2rem;
transition:all .4s;
background:#fff;
position:relative;
}

.needs li h3{
font-size:1.5rem;
line-height:1.5;
font-weight:bold;
margin-bottom:1rem;
position:relative;
}

.needs li:nth-child(1):hover h3{
  /*background: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);*/
  background-image: linear-gradient(to right, #30cfd0 0%, #330867 100%);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}
.needs li:nth-child(2):hover h3{
background-image: linear-gradient(to right, #37ecba 0%, #72afd3 100%);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}
.needs li:nth-child(3):hover h3{
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}
.needs li:nth-child(4):hover h3{
background-image: linear-gradient(to right, #e14fad 0%, #f9d423 100%);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}


.needs li:hover{
background:#f8f8f8;
}
.needs li:nth-child(1)::after,
.needs li:nth-child(2)::after,
.needs li:nth-child(3)::after,
.needs li:nth-child(4)::after{
border:none;
}

.needs li:nth-child(1):hover::after{
content:'';
width:0;
height:0;
border-bottom:2rem solid #87CEEB;
border-left:2rem solid transparent;
border-right:2rem solid transparent;
transform:rotate(45deg);
position:absolute;
top:-4px;
right:-21px;
z-index:2;
}

.needs li:nth-child(2):hover::after{
content:'';
width:0;
height:0;
border-bottom:2rem solid #66CDAA;
border-left:2rem solid transparent;
border-right:2rem solid transparent;
transform:rotate(45deg);
position:absolute;
top:-4px;
right:-21px;
z-index:2;
}
.needs li:nth-child(3):hover::after{
content:'';
width:0;
height:0;
border-bottom:2rem solid #D8BFD8;
border-left:2rem solid transparent;
border-right:2rem solid transparent;
transform:rotate(45deg);
position:absolute;
top:-4px;
right:-21px;
z-index:2;
}
.needs li:nth-child(4):hover::after{
content:'';
width:0;
height:0;
border-bottom:2rem solid #E9967A;
border-left:2rem solid transparent;
border-right:2rem solid transparent;
transform:rotate(45deg);
position:absolute;
top:-4px;
right:-21px;
z-index:2;
}



.svc-menu{
display:flex;
flex-wrap:wrap;
gap:0;
}
.svc-menu li{
width:46%;
margin:0 2% 50px;
display:flex;
justify-content:space-between;
}
.svc-icon{
width:15%;
}
.svc-icon svg{
width:100%;
height:auto;
display:block;
}

.svc-cont{
width:80%;
}

.svc-cont p{
margin-bottom:2em;
}


.svc-menu li h3{
font-size:30px;
line-height:1;
margin-bottom:.7em;
}
.svc-menu li h3 span{
display:block;
font-size:16px;
font-family:'Poppins';
font-weight:600;
color:#abc;
margin-top:.7em;
}

.exam{
margin-bottom:60px;
}


.exam .ex-slide{
width:30%;
min-height:200px;
height:auto;
border:1px solid #222;
padding:0.938rem 1.250rem 1.250rem;
display:flex;
flex-shrink:0;
transition:all .2s;
}

.ex-slide:hover{
background:#f8f8f8;
}


.slick-slide{
margin:0 30px 0 0;
}


.case-num{
display:flex;
justify-content:flex-end;
font-size:1.875rem;
line-height:1;
font-family:'Poppins';
font-weight:600;
color:#abc;
margin-bottom:0.938rem;
}
.case-ttl{
font-weight:bold;
font-size:1.25rem;
line-height:1.3;
margin-bottom:0.625rem;

}



.cta{
  height: 55vh;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
position:relative;
background-image:url(img/contact-bg.webp);
background-position:center bottom;
color:#fff;

}

.cta::after{
content:'';
width:100%;
height:100%;
background:rgba(0,0,0,.35);
position:absolute;
top:0;
left:0;
}


.cta h2{
font-family:'Poppins';
font-weight:700;
font-size:64px;
line-height:1;
margin-bottom:1em;
text-align:center;
display:block;
white-space:nowrap;
}

.lead .center{
text-align:center;
}


.c-btn{ text-align:center; }

.c-btn a{
color:#fff;
display:block;
padding:1rem 4rem;
width:auto;
border:1px solid #fff;
font-weight:bold;
font-size:1.1rem;
transition:all .2s;
}

.c-btn a:hover {
  animation: bounce 0.4s ease;
background:rgba(255,255,255,.2);
}

@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.1); }  /* 少し大きく */
  60%  { transform: scale(0.95); } /* 少し戻る */
  100% { transform: scale(1); }    /* 元に戻る */
}

/*------------------------------------------------------------
	PANKUZU
------------------------------------------------------------*/
#pankuzu{
width:80%;
margin:0 auto;
font-size:.75rem;
line-height:20px;
padding:1rem 0;
}
#pankuzu .current{
font-weight:normal;
}

#pankuzu a{
color:#888;
text-decoration:underline;
}


/*------------------------------------------------------------
	PAGE
------------------------------------------------------------*/
#page-head{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

#page-head h1{
font-size:4.5rem;
color:#fff;
font-weight:bold;
font-family:'Poppins';
position:relative;
z-index:3;
}

.teaser{
width:100%;
position:relative;
}

.t-about{
height: 431px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-about.jpg);
background-repeat:no-repeat;
color:#fff;
}
.t-services{
height: 431px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-service2.jpg);
background-repeat:no-repeat;
color:#fff;
}
.t-pricing-plans{
height: 431px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-prices.jpg);
background-repeat:no-repeat;
color:#fff;
}
.t-contact,
.t-confirm,
.t-complete,
.t-error{
height: 431px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-contact.jpg);
background-repeat:no-repeat;
color:#fff;
}

.teaser::after{
content:'';
width:100%;
height:100%;
background:rgba(0,0,0,.15);
position:absolute;
top:0;
left:0;
z-index:2;
}



#page{
width:80%;
margin:0 auto;
padding:100px 0;
position:relative;
z-index:2;
}

#page section{
margin-bottom:6rem;
}

#page section p{
font-size:1.1rem;
margin-bottom:1.5em;
}
#page section p:last-child{
margin:0;
}

#page h2.page-ttl{
font-size:3rem;
line-height:2;
font-weight:900;
margin-bottom:2rem;
}
#page h2.p-ttl{
font-size:3rem;
line-height:1.5;
font-weight:900;
margin-bottom:2rem;
}




#page h3.md01{
font-size:2.5rem;
line-height:2;
margin-bottom:2rem;
}

#page h3.md01 span{
color:#abc;
font-size:1.5rem;
margin-left:2rem;

}

.page-lead{
font-size:1.2rem;
font-weight:500;
margin-bottom:4rem;
}


.svc-list{
margin-bottom:4rem;
}

.svc-list li{
display:flex;
margin:0 0 1rem;
}

.svc-item{
width:13rem;
font-size:1.1rem;
font-weight:bold;
}
.svc-pcont{
width:80%;
font-size:1.1rem;
margin-left:2rem;
}



.grad01{
font-size:1.75rem;
line-height:2;
font-weight:bold;
background-image: linear-gradient(to right, #5ee7df 0%, #b490ca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.grad02{
font-size:1.75rem;
line-height:2;
font-weight:bold;
background-image: linear-gradient(to right, #3f51b1 0%, #5a55ae 13%, #7b5fac 25%, #8f6aae 38%, #a86aa4 50%, #cc6b8e 62%, #f18271 75%, #f3a469 87%, #f7c978 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.grad03{
font-size:1.75rem;
line-height:2;
font-weight:bold;
background: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.grad04{
font-size:1.75rem;
line-height:1;
font-weight:bold;
background-image: linear-gradient(to right, #5ee7df 0%, #b490ca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.prof{
}

.comT{
width:100%;
}
.comT th{
text-align:left;
padding:.5rem 0;
width:12rem;
}
.comT td{
width:auto;
padding:.5rem 0;
}

.t-en,
.t-cap{
font-size:.75rem;
color:#888;
display:inline-block;
margin-left:1rem;
}

/* SERVICES */
.svc01,
.svc02,
.svc03,
.svc04{
display:flex;
justify-content:space-between;
}
.svc01-icon,
.svc02-icon,
.svc03-icon,
.svc04-icon{
width:100px;
}
.svc01-icon svg,
.svc02-icon svg,
.svc03-icon svg,
.svc04-icon svg{
width:100px;
height:auto;
}

.svc01-cont,
.svc02-cont,
.svc03-cont,
.svc04-cont{
width:calc(100% - 160px);
}

h3.svc-ttl{
font-size:2.5rem;
font-weight:900;
line-height:2.5;
}

.svc-desc{
font-size:1.1rem;
line-height:1.75;
margin-bottom:1rem;
}

.svc-point{
font-size:1.1rem;
line-height:2;
margin-bottom:1rem;
}
.svc-point li{
position:relative;
padding-left:1.75rem;
margin:0;
}
.svc-point li::before{
content:'';
width:.5rem;
height:.5rem;
background-image: linear-gradient(120deg, #d9afd9 0%, #97d9e1 100%);
position:absolute;
top:13px;
left:8px;
}

.svc-bq{
padding:1.5rem 3rem;
border-radius:.5rem;
background:linear-gradient(10deg, #efefef 0%, #f8f8f8 50%, #e2e2e2 100%);
}



/* PRICING & PLANS */

.plan{
display:flex;
margin:0 0 2rem;
}
.plan-name{
width:25%;
font-size:1.3rem;
line-height:2;
font-weight:bold;
margin:0;
}
.plan-dtl{
width:49%;
font-size:1.1rem;
line-height:1.5;
margin:0 2.5% 0 3.5%;
padding-top:0.475rem;
}
.plan-price{
font-size:1.3rem;
line-height:2;
font-weight:bold;
width:20%;
}

.plan-att{
padding:1.5rem 3rem;
border-radius:.5rem;
background:linear-gradient(10deg, #efefef 0%, #f8f8f8 50%, #e2e2e2 100%);
}
.plan-att li{
padding-left:1.5rem;
position:relative;
font-size:1.1rem;
line-height:1.75;
}
.plan-att li::before{
content:'';
width:.5rem;
height:.5rem;
background:#ccc;
position:absolute;
top:0.7125rem;
left:4px;
}

.flows{
display:flex;
}
.flows li{
width:25%;
padding:8rem 2rem 0;
position:relative;
}

.flows li::before{
content: '';
width: 2rem;
height: 2rem;
background-image: linear-gradient(25deg, #d9afd9 0%, #97d9e1 100%);
position: absolute;
top: 2rem;
left: 50%;
transform: translate(-50%, 0);
z-index: 2;
clip-path: polygon(
  50% 0%,
  100% 25%,
  100% 75%,
  50% 100%,
  0% 75%,
  0% 25%
);
}


.flows li::after{
content:'';
width:100%;
height:2px;
background:#f2f2f2;
position:absolute;
top:calc(3rem - 1px);
left:50%;
z-index:1;
}

.flows li:last-child::after{
background:none;
}

.flows li p{
text-align:justify;
}



.flow-ttl{
text-align:center;
font-size:1.5rem;
font-weight:bold;
line-height:1.5;
margin-bottom:1.5rem;
}




/*------------------------------------------------------------
	CONTACT MW WP FORM
------------------------------------------------------------*/
.req{
color:#cc2728;
font-size:.8rem;
position:relative;
top:-.5rem;
left:.5rem;
}


.form {
width:50rem;
font-size:1.1rem;
margin-bottom:3rem;
}
.form dt {
font-size:1.3rem;
line-height:1.5;
font-weight:bold;
margin:0 0 1rem;
}
.form dd {
margin:0 0 2rem;
}
.form dd:last-child{
margin:0;
}

input[type="text"],
input[type="email"]{
width:100%;
border-radius:.5rem;
background:#f5f5f5;
padding:1rem;
box-sizing:border-box;
-webkit-appearance: none;
border:none;
}


textarea {
width:100%;
height:15rem;
border-radius:.5rem;
padding:1rem;
box-sizing:border-box;
-webkit-appearance: none;
background:#f5f5f5;
border:none;
}

.mwform-checkbox-field label, .mwform-radio-field label{
display:inline-block;
margin:0 1rem 0 0 !important;
}

.mw_wp_form .horizontal-item + .horizontal-item{
margin:0 !important;
}

input[type=radio]{
}


.formBtn {
display:flex;
gap:0 1.5rem;
}
.formBtn li {
display:inline-block;
font-size:1.3rem;
}

.mw_wp_form_confirm .formBtn input:hover,
.mw_wp_form_input .formBtn input:hover,
#submitback input:hover{
filter:hue-rotate(90deg);
color:#fff;
}


.mw_wp_form_input .sbmBtn input {
background-image: linear-gradient(to right, #085078 0%, #85D8CE  51%, #085078  100%);
color:#fff;
width:15rem;
height:4rem;
overflow:hidden;
border:none;
cursor:pointer;
border-radius:.5rem;
transition:all 0.2s;
font-weight:bold;
-webkit-appearance: none;
}
.mw_wp_form_confirm .sbmBtn input {
background-image: linear-gradient(to right, #085078 0%, #85D8CE  51%, #085078  100%);
color:#fff;
width:15rem;
height:4rem;
overflow:hidden;
border:none;
cursor:pointer;
border-radius:.5rem;
transition:all 0.2s;
font-weight:bold;
-webkit-appearance: none;
}
.backBtn input {
background:#f2f2f2;
color:#222;
width:6rem;
height:4rem;
overflow:hidden;
border:none;
cursor:pointer;
border-radius:.5rem;
transition:all 0.2s;
font-weight:bold;
-webkit-appearance: none;
}

/*------------------------------------------------------------
	CATEGORY ARCHIVE
------------------------------------------------------------*/

.t-portfolio{
height: 431px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-portfolio2.jpg);
background-repeat:no-repeat;
color:#fff;
}
.t-archives,
.t-news,
.t-column{
height: 200px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/t-archive.jpg);
background-repeat:no-repeat;
color:#fff;
}

.pf-list{
width:100%;
margin:0 auto;
}
.pf-list li{
display:flex;
justify-content:space-between;
align-items: flex-start;
padding:3rem 0;
position:relative;
}
.pf-list li:first-child{
padding-top:0;
}
.pf-list li:last-child{
padding-bottom:0;
}

.pf-thumb{
width:30rem;
text-align: left;
margin:0;
}
.pf-info{
width:calc(100% - 33.75rem);
}
.pf-num{
font-size:1.875rem;
line-height:1;
font-family:'Poppins';
font-weight:600;
color:#abc;
margin-bottom:0.938rem;
}

h3.case-ttl{
font-size:2.3rem;
font-weight:bold;
margin-bottom:1rem;
}
.case-lead{
font-size:1.3rem;
margin-bottom:2rem;
}





.pf-btn {
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 5rem;
  color: #333;
  text-decoration: none;
text-align:right;
}
.pf-btn a{
  font-size: 1.1rem;
  font-weight: bold;
  display: inline-block;
  padding: 0 5.5rem 0 0;
  position: relative;
  line-height: 5rem;
  background: linear-gradient(to right, #222 0%, #4682B4 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.3s ease;
  }
  
.pf-btn a:hover {
  background-position: -100% 0;
}

.pf-btn a::before{
content:'';
width:10px;
height:10px;
border-right:1px solid #4682B4;
border-bottom:1px solid #4682B4;
transform:rotate(-45deg);
position:absolute;
top:34px;
right:26px;
transition:all .2s;
z-index:2;
}

.pf-btn a:hover::before{
border-right:1px solid #fff;
border-bottom:1px solid #fff;
}


.pf-btn a::after{
content:'';
width:60px;
height:60px;
border:1px solid #4682B4;
border-radius:50%;
position:absolute;
top: 50%;
right: 0;
transform: translateY(-50%) scale(1);
transition:all .2s;
z-index:1;
}


.pf-btn a:hover::after {
  background-color: #4682B4;
  color: #fff;
  transform: translateY(-50%) scale(0.7); /* 一瞬縮む */
  animation: popBack 0.3s ease forwards;
}



.archive{
margin-bottom:5rem;
}
.archive li{
padding:3rem 0;
}
.archive li:first-child{
padding-top:0;
}
.archive li:last-child{
padding-bottom:0;
}

.post-info{
display:flex;
align-items:center;
height:3rem;
margin-bottom:1rem;
}
.post-date{
font-size:0.6875rem;
color:#888;
}
.post-cat{
margin-left:2rem;
}

h3.post-ttl{
font-size:2rem;
line-height:1.35;
margin-bottom:1.5rem;
}

.excerpt{
margin-bottom:1.5rem;
}

.post-cat a{
font-family:'Poppins';
font-weight:bold;
font-size:1rem;
color:#222;
position:relative;
top:-.135rem;
}



/*------------------------------------------------------------
	SINGLE
------------------------------------------------------------*/
#post-head{
display:flex;
justify-content:center;
align-items:center;
text-align:center;
}

#post-head h1{
font-size:3.5rem;
color:#fff;
font-weight:bold;
font-family:'Poppins';
position:relative;
z-index:3;
}
.p-teaser{
width:100%;
height:200px;
position:relative;
}

.p-portfolio{
height: 200px;
background-attachment: fixed;
background-size: 1920px;
background-position: center top;
background-image:url(img/p-teaser-port5.jpg);
background-repeat:no-repeat;
color:#fff;
}

.p-teaser::after{
content:'';
width:100%;
height:100%;
background:rgba(0,0,0,.15);
position:absolute;
top:0;
left:0;
z-index:2;
}



.p-col{
display:flex;
justify-content:space-between;
margin-bottom:4rem;
}
.p-thumb{
width:360px;
height:202px;
margin:0;
}
.p-txt{
width:calc(100% - 420px);
}


.case-post-num{
display:inline-block;
font-size:2rem;
font-weight:bold;
color:#abc;
}

.case-sub-ttl{
font-size:2rem;
font-weight:bold;
}

.post h3{
font-size:2rem;
line-height:1.5;
margin-bottom:1rem;
}
.post h3 span{
font-weight:bold;
color:#abc;
display:inline-block;
margin-left:1.5rem;
font-size:1.2rem;
letter-spacing:0;
}
#page .post section{
margin-bottom:4rem !important;
}

.work-list{
font-size:1.1rem;
line-height:1.5;
margin:0;
}
.work-list li{
margin-bottom:.5rem;
padding-left:1.5rem;
position:relative;
}
.work-list li::before{
content:'';
width:.5rem;
height:.5rem;
background:#888;
position:absolute;
top:.575rem;
left:.25rem;
}





.connect{
display:flex;
align-items:center;
}
.connect-icon{
width:5rem;
height:5rem;
}
.connect-icon svg{
width:5rem;
height:5rem;
}

.connect-ttl{
margin:0 0 0 2rem;
font-size:1.6rem;
line-height:2;
font-weight:bold;
}


.connect-prj{
margin-left:7rem;
display:flex;
flex-wrap:wrap;
gap:0;
}
.connect-prj li{
width:32%;
margin:0 3% 0 0;
border:1px solid #222;
padding:1rem 1.25rem 1.25rem;
position:relative;
transition:all .2s;
}
.connect-prj li:nth-child(3n){
margin-right:0;
}
.connect-prj li a{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:block;
z-index:2;
}
.connect-prj li:hover{
background:#f8f8f8;
}




/*------------------------------------------------------------
	FOOTER
------------------------------------------------------------*/
footer{
width:100%;
}


.f-inner{
width:80%;
margin:0 auto;
padding:100px 0 60px;
position:relative;
z-index:2;
}

.fcol{
display:flex;
justify-content:space-between;
align-items:center;
}

.fcolL{
width:60%;
min-width:30rem;
}
.f-menu{
}
.fm-ttl{
font-size:.8rem;
line-height:2;
padding-left:20px;
position:relative;
font-weight:bold;
margin-top:.5rem;
}

.fm-ttl::before{
content:'';
width:8px;
height:2px;
background:#888;
position:absolute;
top:50%;
left:4px;
transform:translate(0, -50%);
}

.fm-ttl a{
color:#222;
}
.fm-ttl a:hover{
background: linear-gradient(to right, #30cfd0 0%, #330867 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.fm-dtl{
display:flex;
margin:0 0 .5rem 20px;
}
.fm-dtl li{
margin-right:2rem;
font-size:.8rem;
color:#888;
font-weight:500;
}

.tool{
margin-top:2rem;
}
.tool-list{
display:flex;
font-size:12px;
line-height:2;
color:#222;
font-weight:500;
}
.tool-list li{
margin-right:2rem;
padding-left:22px;
position:relative;
}
.tool-list li:nth-child(1)::before{
content:'';
width:1rem;
height:1rem;
background:url(img/cpa-site-icon.png) no-repeat;
background-size:1rem;
position:absolute;
top:4px;
left:0;
}
.tool-list li:nth-child(2)::before{
content:'';
width:1rem;
height:1rem;
background:url(img/icon-px-vw-tool.svg) no-repeat;
background-size:1rem;
position:absolute;
top:4px;
left:0;
}
.tool-list li a{
color:#222;
}
.tool-list li a:hover{
background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}





.fcolR{
width:30%;
max-width:20rem;
}
.f-com-name{
font-family:'Poppins';
font-weight:700;
font-size:2rem;
line-height:1.2;
margin-bottom:.5rem;
transition: color 0.3s ease, background 0.5s ease;
position:relative;
}

.f-com-name span{
display:block;
font-size:12px;
line-height:2;
}

.f-com-name:hover{
  background: linear-gradient(90deg, #ff6b6b, #feca57, #1dd1a1, #48dbfb, #ff6b6b);
  background-size: 400%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 10s linear infinite;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



.f-catch{
font-size:12px;
font-weight:500;
margin-bottom:2rem;
}

.f-info li{
font-size:12px;
line-height:2;
display:flex;
}

.f-icon{
width:1em;
height:1em;
color:#888;
margin-right:.5em;
}
.f-icon svg{
width:1em;
height:1em;
}

.copy{
width:80%;
margin:0 auto;
text-align:center;
font-size:.6rem;
line-height:2;
color:#888;
font-family:'Poppins';
padding:.5rem 0;
}





/*------------------------------------------------------------
	END PC LAYOUT CSS
------------------------------------------------------------*/
}