.titleSection{
position: relative;
left: 55px;
}
.titleSection::before{
content: url(//www.itall.co.jp/wp-content/themes/itallsite/img/common/title_circle.svg);
width: 5rem;
height: 5rem;
position: absolute;
left: -6rem;
top: -0.1em;
}
@media screen and (max-width:768px){
.titleSection{
position: relative;
left: 40px;
font-size: 4rem;
}
.titleSection::before{
width: 3rem;
height: 3rem;
position: absolute;
left: -4rem;
top: 0;
}
} .p-topMainmv{
position: relative; }
.copySet{
color: #fff;
position: absolute;
left: 10rem;
top: 0;
}
.copySet::before{
position: relative;
left: -6rem;
top: 13rem;
content: ''; display: inline-block;
width: clamp(130px, 20vw, 200px); height: clamp(130px, 20vw, 200px); background-image: url(//www.itall.co.jp/wp-content/themes/itallsite/img/top/mainmv_bg1.png);
background-size: contain;
vertical-align: middle;  
}
.copyMaim,.copySub,.original-button,.p-topMainmv .btnicon{
position: relative;
color: #fff;
margin-bottom: 25px;
z-index: 5;
font-weight: bold;
}
.copyMaim{
font-size: clamp(30px, 5.6vw, 60px);
font-weight: bold;
line-height: 1.3em;
}
.copySub{
font-size: clamp(15px, 2.1vw, 21px); 
line-height: 1.5em; 
}
#video-area{
height: 100vh; z-index: -1; top: 0;
right:0;
left:0;
bottom:0;
overflow: hidden;
}
#video { position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); width: 177.77777778vh; height: 56.25vw; min-height: 100%;
min-width: 100%;
}
@media screen and (max-width:768px){ .copySet{
color: #fff;
position: absolute;
left: 4rem;
top: 5rem;
}
.copySet::before{
left: -2rem;
top: 10rem; 
}
} main{
background: #fff;
position: relative;
}
main::after{
content: '';
background: #fff;
position: absolute;
right: 0;
bottom: -300px;
width: 100%;
height: 100%;
z-index: -1;
}
html,
body{
overflow-x:visible;
}
.para-scroll{
position: -webkit-sticky;
position: sticky;
top: 86px;
z-index: -1;
}
@media screen and (max-width:768px){
html,
body{
overflow-x:hidden;
}
main{
margin-top: 75vh;
}
.para-scroll{
position: fixed;
top: 86px;
z-index: -1;
display: block;
width: 100%;
}
}  .wrap{
width:100%;
height:1900px;
position:absolute;
z-index:0;
overflow: hidden;
}
canvas{
position:absolute;
top:0;
right:-50%;
} .p-topService{
margin-top: 0;
}
.p-topService .p-commonBox__inner{
z-index: 1;
position: relative;
} .p-topService .boxSide{
display: -webkit-flex;
display: flex;
justify-content: space-between;;
width: 100%;
gap: 3vw;
}
.p-topService .boxSide-img01 img,
.p-topService .boxSide-img02 img{
width: 100%;
}
.p-topService .boxSide-img01{
width: 40%;
}
.p-topService .boxSide-img02{
width: 60%;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
align-items: flex-start;
flex-wrap: nowrap;
gap: 5px;
}
.p-topService .border{
border: 1px solid #e6e6e6;
}
.p-topService h3{
color: #0a347f;
font-weight: bold;
margin-bottom: 20px;
font-size: 20px;
font-size: clamp(25px, 3.5vw, 35px);
} 
.p-topService .mainText{
font-size: clamp(18px, 2.3vw, 23px);
font-weight: bold;
margin-top: 25px;
}
.p-topService .p-commonBox__inner__box:first-child{
border: none;
}
.p-topService .p-commonBox__inner__box{
padding: 5vw 0 5vw 0;
border-top: 1px solid #e6e6e6;
}
.p-topService .btnicon{
margin-top: 20px;
}
@media screen and (max-width:992px){
.p-topService .boxSide{
display: block;
}
.p-topService .boxSide-img01{
width: 100%;
margin-bottom: 30px;
}
.p-topService .boxSide-img02{
width: 100%;
}
}
@media screen and (max-width:768px){
.p-topService .titleSection{
margin-top: 20px;
}
.p-topService .mainText{
margin-top: 10px;
}
.p-topService .boxSide-img02{
flex-direction: column;
}
} .slider { width:94%;
margin:0 auto;
}
.slider img {
width:100%; height:auto;
} .slider .slick-slide {
margin:0;
}  .slick-prev, 
.slick-next {
position: absolute; top: 42%;
cursor: pointer; outline: none; border-top: 2px solid #666; border-right: 2px solid #666; height: 15px;
width: 15px;
}
.slick-prev { left: -1.5%;
transform: rotate(-135deg);
}
.slick-next { right: -1.5%;
transform: rotate(45deg);
} .slick-dots {
text-align:center;
margin:20px 0 0 0;
}
.slick-dots li {
display:inline-block;
margin:0 5px;
}
.slick-dots button {
color: transparent;
outline: none;
width:8px; height:8px; display:block;
border-radius:50%;
background:#ccc; }
.slick-dots .slick-active button{
background:#333; } .p-topNews{
background-color: #e6eaf2;
margin-bottom: 70px;
}
.p-topNews .titleSection{
margin: 20px 0 30px 0;
}
.p-topNews .p-commonBox__inner{
padding-bottom: 30px;
}
.p-topNews .p-commonBox__inner__box{
background-color: #fff;
padding: 30px;
overflow:hidden;
}
.p-topNews .bgNone{
background-color: #e6eaf2;
} .p-topNews .btnicon{
float: right;
}
@media screen and (max-width:768px){
.p-topNews .p-commonBox__inner{
padding: 0;
}
.p-topNews .p-commonBox__inner__box{
padding: 10px;
}
} .p-topNaisenblog{
padding: 0 20px;
margin:0 0 60px 0 ;
}
#feed {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin:20px 0 20px 0 ;
}
#feed .btnicon{
text-align: right;
}
#feed .item {
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
transition: box-shadow 0.2s;
}
#feed .item:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
#feed .item a {
text-decoration: none;
color: inherit;
display: block;
}
#feed img {
width: 100%;
height: auto;
display: block;
border-bottom: 1px solid #eee;
}
#feed .item img {
transition: transform 0.3s ease;
}
#feed .item:hover img {
transform: scale(1.05);
}
#feed .content {
padding: 10px;
}
#feed .date {
font-size: 0.85em;
color: #666;
margin-bottom: 5px;
}
#feed .title {
font-weight: bold;
font-size: 1em;
margin-bottom: 5px;
}
#feed .excerpt {
font-size: 0.9em;
color: #444;
}
@media screen and (max-width: 992px) {
#feed {
grid-template-columns: repeat(3, 1fr);
}
}
@media screen and (max-width: 768px) {
#feed {
grid-template-columns: repeat(2, 1fr);
padding: 0 10px;
}
.p-topNaisenblog{
padding: 0;
}
#feed {
gap:10px;
}
#feed .title{
font-size: 0.9em;
line-height: 1.4em;
}
} .p-commonBox{
margin-top: 0;
}