/* * {
  outline: 2px solid blue;
} */

body{
  padding: 0;
  margin: 0;
  color: 373131;
  font-family: 'Koh Santepheap', serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
min-width: 340px;

}
.loading{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  opacity: 1;
}
.keisukePR{
  visibility:hidden;
}

#loading.loaded {
  opacity: 0;
  visibility: hidden;
}
.main{
      width: 100%;
      height: 100vh;
      position: relative;
    }
    video{
      width: 100%;
      height: 100vh;
      object-fit: cover;
    }
    .maintitle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
    }
    .maintitle P{
      color: aliceblue;
      text-align: center;
      margin-top: -10PX;
      font-family: 'Koh Santepheap', serif;
    }
  
img{
width: 100%;
}
.nav{
width: 100px;
height: 100px;
position: fixed;
right: 20px;
top: 2%;
z-index: 1111;
display: flex;
justify-content: right;
}
.nav span{
height: 2px;
width: 100px;
background-color: #373131;
z-index: 2222;
position: absolute;
}
.nav span:nth-child(1){
margin: 20px 0;
}
.nav span:nth-child(2){
margin: 30px 0;
width: 75px;
}
.nav span:nth-child(3){
margin: 40px auto;
width: 40px;
}
.active span:nth-child(1){
transform: translateY(10px) rotate(45deg);
transition: 0.5s;
width: 50px;
background-color: red;
}
.active span:nth-of-type(2){
opacity: 0;
transition: 0.5s;
}
.active span:nth-of-type(3){
transform: translateY(-6px) rotate(-45deg);
transition: 0.5s;
width: 50px;
background-color: red;
}
.thenk{
overflow: hidden;
}
.thenk p {
font-size:15vw ;
font-family: 'Koh Santepheap', serif;
  white-space: nowrap;
  margin-top: -20px;
  animation: scrolling 24s linear infinite ;
  
}
.LPimg{
  margin-top: 50px;
}
@keyframes scrolling {
  0% { transform: translateX(120%); }
  100% { transform: translateX(-200%); }
}
.wrapper{
max-width: 1300px;
margin: 0 auto;
}

.LP h2,.bunner h2{
font-size: clamp(1.125rem, 0.769rem + 1.54vw, 2rem);
font-weight: 400;
border-bottom: 1px solid;
margin-bottom: 40px;
}
.LPbox h3,.LPbox p{
font-size: 15px;
font-weight: 400;
}
.LPbox h3,.summer h3{
background-color:  #D9D9D9;
border-radius: 20px;
width: fit-content;
margin: 10px auto;
padding: 5px 10px;
font-weight: 400;
}
.summer h3{
  margin: inherit;
  margin-top: 10%;
  font-size: 14px;
}
.summer p{
  padding-left:5px ;
  font-size: 14px;
}
.LPbox {
display: flex;
justify-content: center;
font-size: 15px;
font-weight: 400;
gap: 20px;
}
.LPbox div{
text-align: center;
}
.loading.hide {
opacity: 0;
pointer-events: none;
transition: opacity 100ms;
transition-duration: 300ms;
}
.navli h1 {
width: 100px;
margin: 40px;
}
.navli nav{
margin-top: 200px;
}
.navli li {
padding: 20px 0;

}
.navli li a{
font-size: clamp(1.875rem, 1.367rem + 2.2vw, 3.125rem);
}
.navli nav ul li a:hover{
color: rgb(217, 3, 3);
transition:0.9s;
}
.slide-bottom {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1.3s 0s ease-out;
}
.navli{
width: 100%;
height: 100vh;
background-image: url(images/navli.jpg);
position: fixed;
background-repeat: no-repeat;
background-size: cover;
pointer-events: none;
top: 0;
z-index: 111;
opacity: 0;
transition: 1.5s;
}
.navli.active{
opacity: 1;
pointer-events: auto;
animation-timing-function: ease-in;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: aliceblue;
}
.mobile{
display:none;
}
.img{
margin-top: -100px;
}
.box{
width: 90.86%;
margin: 0 auto;
}

.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper {
margin-left: auto;
margin-right: auto;
}
.works{
margin: 100px auto;
}
.LP img{
border: 1px solid #E0E0E0;
}
.swiper-pagination {
position: relative !important;
margin-top: 20px;
}
.swiper-pagination-bullet-active {
background-color: rgb(236, 1, 1) !important;
}
.bunnerbox{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 200px;
}
.bunnerbox div {
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.myself img{
width:28.46% ;
padding: 20px;
margin-bottom: 20%;
}
.myself{
background-image: url(images/5B697C2E-7A91-4427-947D-79F0672DEC36\ 1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 40px;
}
.myself P{
color: #fff;
width: 57.04%;

}
.view{
background-color: #fff;
width: fit-content;
padding: 10px 40px;
text-align: center;

}
.view a{
color: #373131;

}
.view:hover{
background-color: #373131;
}
.view a:hover{
color: #fff;
}
footer{
background-color: #373131;
padding: 20px;
text-align: center;
margin-top: 50px;
}
footer img{
width: 8.91%;
}
/* works */
.workstop{
background-image: url(images/workstop.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
margin-top: -20px;
margin-bottom: 100px;
}
.workstop svg{
width: 80px;
}
.title {
text-align: center;
}
.title h2{
font-size:clamp(1.75rem, 1.242rem + 2.2vw, 3rem);
font-weight: 400;
}
.worksLP{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 26px;
}
.not{
display: inherit;
}
.worksbn{
margin: 100px 0 20px 0;
}
/* contact */
.contacttop{
background-image: url(images/contacttop.jpg);
}
iframe{
width: 100%;
height: 100vh;
}
.contacttitle h2{
color: #fff;
}
h2{
font-weight: 400;
}
/* about */
.aboutwrapper{
  margin-bottom: 100px;
  width: 100%;
  overflow: hidden;
}
.abouttop h1,.workstop h1,.contacttop h1{
  width: 80px;
  padding: 10px;
  }
.abouttop{
  background-image:url(images/abouttop.jpg) ;
  background-position: center;
}

.section-about{
  margin-bottom: 100px;
}
.about{
position: relative;
}
.abouttxt{
width: 50%;
position: absolute;
z-index: 99;     
bottom: 0;
left: 0;
top: 0;
display:flex;
flex-flow: column;
justify-content:space-between;
}
.abouttxt p{
background-color: rgb(255, 255, 255);
padding: 50px 20px 0px 0;
margin: 0;
font-weight: 400;
}
.abouttxt h3{
font-size: 40px;
white-space: nowrap;
color: #DEDEDE;
text-transform: capitalize;
font-family:Koh Santepheap;
font-weight: 400;

}
.aboutimg{
  display: flex;
  width: 70%;
  margin-left: auto;
  height: 60vh;
}
.aboutimg img{
  overflow: hidden;
  object-fit: cover;
}
.right .aboutimg{
margin: inherit;
}
.right .abouttxt{
text-align: right;
right: 0;
left: inherit;
}
.right p{
  text-align: justify;
  padding: 50px 0 0px 20px;
}
  .target{
    margin: 80px 0px;
  }
@media (max-width:800px) {
.pc{
display: none;
}
.mobile{
display:inherit;
}
.thenk p{
margin-top: -9px;
}
.img{
margin-top: -20px;
}

.myself P{
width: 100%;
}
.worksLP{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
.aboutbox{
  display: flex;
  flex-direction: column-reverse;
}
.aboutimg{
  margin-left: inherit;
  width: 100%;
}
.aboutimg img{
width: 100%;
overflow: hidden;
object-fit: cover;

}

.abouttxt{
position: inherit;
width: 100%;
justify-content:inherit;
}
.abouttxt h3{
margin-top: -50px;
z-index: 999;
background-color: rgb(255, 255, 255);
width: fit-content;
}
.abouttxt p{
padding:inherit;
}

.right .abouttxt h3{
margin-left: auto;
}
.right p{
text-align: justify;
padding: inherit;
}
}

@media (max-width:600px){
.bunnerbox{
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 20px;
}
.bunnerbox div{
gap: 10px;
}
.abouttop h1{
  width: 50px;
  padding: 20px;
  }
.worksLP{
display: grid;
grid-template-columns: 1fr;
}
.LP{
  width: 100%;
}
.workstop h1,.workstop h1,.contacttop h1{
  width: 50px;
}

.aboutmy h3{
font-size: 23px;
margin-bottom: -60px;
}

}