/*

Theme Name: Lightning Child 

Theme URI:

Template: lightning

Description: lightningの子テーマです。

Author: t-shimizu

*/



/* テーマファイルトップの余白調整 */




.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.loading-container.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* メインローダー */
.loader {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.loader::before {
    width: 120px;
    height: 120px;
    background: rgba(255, 255, 255, 0.1);
    animation: pulse 2s infinite;
}

.loader::after {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    top: 20px;
    left: 20px;
    animation: pulse 2s infinite 0.5s;
}

.loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid transparent;
    border-top: 3px solid #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* パルスアニメーション */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.7;
    }
}

/* スピンアニメーション */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ローディングテキスト */
.loading-text {
    color: white;
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0;
    animation: fadeIn 1s ease 0.5s forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* プログレスバー */
.progress-container {
    width: 300px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 20px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #00f5ff, #0080ff);
    width: 0%;
    border-radius: 2px;
    animation: loading 3s ease-in-out forwards;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

@keyframes loading {
    0% { width: 0%; }
    50% { width: 60%; }
    100% { width: 100%; }
}

/* パーセンテージ表示 */
.percentage {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    margin-top: 15px;
    font-weight: 300;
}

/* 背景の動的パーティクル */
.particle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    pointer-events: none;
    animation: float 6s infinite ease-in-out;
}

.particle:nth-child(1) {
    width: 10px;
    height: 10px;
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    width: 15px;
    height: 15px;
    top: 60%;
    left: 80%;
    animation-delay: 1s;
}

.particle:nth-child(3) {
    width: 8px;
    height: 8px;
    top: 80%;
    left: 30%;
    animation-delay: 2s;
}

.particle:nth-child(4) {
    width: 12px;
    height: 12px;
    top: 30%;
    left: 70%;
    animation-delay: 1.5s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }
}

/* メインコンテンツ */
#page {
    display: none;
    padding: 50px;
    text-align: center;
    background: white;
    min-height: 100vh;
}

#page.show {
    display: block;
    animation: slideIn 0.8s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.home .siteContent {

  padding: 0;

}

.top_grid :is(*, div):nth-child(1) {

  order: 1;

}

.top_grid :is(*, div):nth-child(2) {

  order: 2;

}

.top_grid :is(*, div):nth-child(3) {

  order: 3;

}

.top_grid :is(*, div):nth-child(4) {

  order: 4;

}

.top_grid :is(*, div):nth-child(5) {

  order: 5;

}

.top_grid :is(*, div):nth-child(6) {

  order: 6;

}

.top_grid :is(*, div):nth-child(7) {

  order: 7;

}

.top_grid :is(*, div):nth-child(8) {

  order: 8;

}





@media (max-width: 1200px) {

  .home .siteContent {

      padding: 0;

  }

}

@media (max-width: 992px) {

  .home .siteContent {

      padding: 0;

  }

  .top_grid :is(*, div):nth-child(1) {

    order: 1;

  }

  .top_grid :is(*, div):nth-child(2) {

    order: 2;

  }

  .top_grid :is(*, div):nth-child(3) {

    order: 3;

  }

  .top_grid :is(*, div):nth-child(4) {

    order: 5;

  }

  .top_grid :is(*, div):nth-child(5) {

    order: 4;

  }

  .top_grid :is(*, div):nth-child(6) {

    order: 8;

  }

  .top_grid :is(*, div):nth-child(7) {

    order: 6;

  }

  .top_grid :is(*, div):nth-child(8) {

    order: 7;

  }



}

@media (max-width: 768px) {

  .home .siteContent {

      padding: 0;

  }

  .top_grid :is(*, div):nth-child(1) {

    order: 1;

  }

  .top_grid :is(*, div):nth-child(2) {

    order: 2;

  }

  .top_grid :is(*, div):nth-child(3) {

    order: 3;

  }

  .top_grid :is(*, div):nth-child(4) {

    order: 5;

  }

  .top_grid :is(*, div):nth-child(5) {

    order: 4;

  }

  .top_grid :is(*, div):nth-child(6) {

    order: 8;

  }

  .top_grid :is(*, div):nth-child(7) {

    order: 6;

  }

  .top_grid :is(*, div):nth-child(8) {

    order: 7;

  }

}







/* 子テーマファイルオリジナルCSS */



body{

  font-family: 'Montserrat', sans-serif, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo;

}





.ani-fadeIn.animated {

  opacity: 1 !important;

  transition: opacity 3s cubic-bezier(0.155, 0.91, 0.695, 0.95);

}



.ani-fadeInUp {

  position: relative;

  transform: translate(0, 140px);

  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

}



.ani-fadeInUp.animated {

  opacity: 1 !important;

  transform: translate(0, 0);

}



.ani-fadeInRight {

  position: relative;

  transform: translate(140px, 0);

  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

}



.ani-fadeInRight.animated {

  opacity: 1 !important;

  transform: translate(0, 0);

}



.ani-fadeInLeft {

  position: relative;

  transform: translate(-140px, 0);

  transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

}



.ani-fadeInLeft.animated {

  opacity: 1 !important;

  transform: translate(0, 0);

}

@media (max-width: 992px) {

  .ani-fadeInUp {

    position: relative;

    transform: translate(0, 0);

    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

  }

  .ani-fadeInLeft {

    position: relative;

    transform: translate(0, 0);

    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

  }

  .ani-fadeInRight {

    position: relative;

    transform: translate(0, 0);

    transition: opacity 1s cubic-bezier(0.155, 0.91, 0.695, 0.95), transform 1s cubic-bezier(0.155, 0.91, 0.695, 0.95);

  }

}





@keyframes fadeInFromLeft {

  from {

    opacity: 1 !important;

    transform: translateX(-30px);

  }

  to {

    opacity: 1 !important;

    transform: translateX(0);

  }

}



.artisan_text_area_bg.animated  {

  animation: fadeInFromLeft 1.2s ease forwards !important;

  opacity: 1 !important;

}





.artisan_text_area {

    width: 50%;

    z-index: 100;

    position: absolute;

    bottom: 10%;

    -ms-transform: translateY(-25%);

    -webkit-transform: translateY(-25%);

    transform: translateY(-25%);

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

}

.artisan_area .artisan_02,

.artisan_area2 .artisan_01,

.artisan_area4 .artisan_01{

  padding:3rem;



  background-size: cover;

  width: 50%;

}

.artisan_area .artisan_02{

  background-image: linear-gradient(0.25turn,rgba(55, 19, 215, 0.3), rgba(41, 130, 96, 0.3)), url(images/artisan_01.webp);



  background-repeat: no-repeat, no-repeat;

  background-size: cover, cover;



}

.artisan_area2 .artisan_01{

  background-image: linear-gradient(0.25turn,rgba(55, 19, 215, 0.3), rgba(41, 130, 96, 0.3)), url(images/artisan_02.webp);



  background-repeat: no-repeat, no-repeat;

  background-size: cover, cover;

  background-position: left,center;

}

.artisan_area4 .artisan_01{

  background-image: linear-gradient(0.25turn,rgba(55, 19, 215, 0.3), rgba(41, 130, 96, 0.3)), url(https://owaritest.com/kitano/wp-content/uploads/2023/01/20230106_064833411_iOS-1024x833.jpg);



  background-repeat: no-repeat, no-repeat;

  background-size: cover, cover;

  background-position: left,center;

}

.ani-fadeInUp {

  position: relative;

  /* opacity: 0; */

  /* transform: translate(0, 140px); */

  transition: opacity 1s cubic-bezier(0.155, 0.910, 0.695, 0.950),transform 1s cubic-bezier(0.155, 0.910, 0.695, 0.950);

}

.ani-fadeInUp.animated{

  opacity: 1 !important;

  /* transform: translate(0, 0); */

}

.flexbox{

  display: flex;

  flex-direction: row;

  flex-wrap: wrap;

}





.siteHeader_logo{

  padding-left:70px;

  background: url(images/cropped-site_icon.png);

  background-repeat: no-repeat;

  background-position: left;

  background-size: 58px 58px;

}



@media (max-width: 992px) {

  .siteHeader_logo{

    padding-left:0;

    background: none;



  }

}





/* すりガラス */

.vkp_filter_blur{

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);  

  background: rgba(255,255,255,0.3); /* 半透明 */

  border-radius: 2rem; /* 角丸 */

  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; /* 影 */

  box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px; /* 影 */

  max-width:700px; /* 最大幅 */

  margin:0 auto; /* 中央揃え */

}

/* 線 */

.vkp_hr_short{

  width: 3rem;

  height: 2px;

}









.artisan_text01{

  font-size: 1.5rem;

  text-align: center;

  font-weight: 800;

  margin-bottom: 2rem;

}

.artisan_area,

.artisan_area2,

.artisan_area4{

  height: 80vh;

}

.artisan_area3{

  position: relative;

  margin-bottom: 6rem;

}

.artisan_area3_bg{

  background: url(images/logo_m.png);

  width: 400px;

  height: 400px;

  background-size: cover;

  opacity: 0.3;

  z-index: -1;

  position: absolute;

  right: 280px;

  top: 330px;

}

.artisan_area3 ul{

  max-width: 1000px;

  margin: 0 auto 6rem auto;

  padding:0;

  gap: 40px;

  justify-content: center; /* 子要素をflexboxにより中央に配置する */

  align-items: center;  /* 子要素をflexboxにより中央に配置する */

}

.artisan_area3 ul li{

  list-style: none;



}

.artisan_01,

.artisan_02{

  margin-bottom: 2em;

}

.artisan_01,

.artisan_02{

  margin-bottom: 2em;

}

.artisan_area .artisan_01,

.artisan_area2 .artisan_02,

.artisan_area4 .artisan_02{

  background: rgba(29, 63, 125,1);

  background: rgba(29, 63, 125,1);

  width: 50%;

  padding:3rem 3rem 0 3rem;

  display: flex;

  flex-direction: row;

  /* justify-content: center; */

  align-items: center;

  color:white;



}

.artisan_area .artisan_01 h3,

.artisan_area2 .artisan_02 h3,

.artisan_area4 .artisan_02 h3{

  display: block;

  width: 100%;

  font-size: 3.5rem;

  letter-spacing: 0.3em;

  line-height: 1.2;

}

.artisan_area .artisan_01 h3 span,

.artisan_area2 .artisan_02 h3 span,

.artisan_area4 .artisan_02 h3 span{

  font-size: 1.8rem;

  margin-bottom: 0;

}

.artisan_area .artisan_02 div.artisan_text_area_bg,

.artisan_area2 .artisan_01 div.artisan_text_area_bg,

.artisan_area4 .artisan_01 div.artisan_text_area_bg{

  background: rgba(255,255,255,0.9);

  padding:1rem;

  font-size: 1.5rem;

  margin-bottom: 1rem;

  display: inline-block;

  overflow: hidden;

  break-words: break-all;



}



@media screen and (max-width: 834px){



.artisan_01, .artisan_02 {

    margin-bottom: 0em;

  }

  .artisan_area,

  .artisan_area2,

  .artisan_area4{

    height: 60vh;

    margin-bottom: 1em;

  }

  .artisan_area .artisan_01,

  .artisan_area .artisan_02,

  .artisan_area2 .artisan_01,

  .artisan_area2 .artisan_02,

  .artisan_area4 .artisan_01,

  .artisan_area4 .artisan_02{

    width:100%;

    height: 30vh;

    paddig:1rem;

  }

  .artisan_area .artisan_02,

  .artisan_area2 .artisan_01,

  .artisan_area4 .artisan_01{

    order:1;

  }

  .artisan_area .artisan_01,

  .artisan_area2 .artisan_02,

  .artisan_area4 .artisan_02{

    order:2;

  }

  .artisan_area .artisan_01 h3,

  .artisan_area2 .artisan_02 h3,

  .artisan_area4 .artisan_02 h3{

    display: block;

    width: 100%;

    font-size: 1.5rem;

    letter-spacing: 0.3em;

    line-height: 1.2;

  }

  .artisan_area .artisan_01 h3 span,

  .artisan_area2 .artisan_02 h3 span,

  .artisan_area4 .artisan_02 h3 span{

    font-size: 1.2rem;

    margin-bottom: 0;

  }

  .artisan_text_area {

    width: 100%;

    z-index: 100;

    position: absolute;

    bottom: 0;

    top:30vh;

    -ms-transform: inherit;

    -webkit-transform: inherit;

    transform: inherit;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

  }



  .artisan_area .artisan_02 div.artisan_text_area_bg,

  .artisan_area2 .artisan_01 div.artisan_text_area_bg,

  .artisan_area4 .artisan_01 div.artisan_text_area_bg {

    padding: 0.3rem;

    font-size: 1rem;

    margin-bottom: 0.5rem;

  }

  .artisan_area .artisan_02{

    background-image: url(images/artisan_01.webp);

    background-attachment:  unset;

    background-repeat:  no-repeat;

    background-size:  cover;

  }

  .artisan_area2 .artisan_01{

    background-image: url(images/artisan_02.webp);

    background-attachment:  unset;

    background-repeat:  no-repeat;

    background-size:  cover;

  }

  .artisan_area4 .artisan_01{

    background-image: url(https://owaritest.com/kitano/wp-content/uploads/2023/01/20230106_064833411_iOS-1024x833.jpg);

    background-attachment:  unset;

    background-repeat:  no-repeat;

    background-size:  cover;

  }

  .artisan_area3 ul li{

    width:60%;

  }

  .artisan_area3_bg {

    background: url(images/logo_m.png);

    width: 300px;

    height: 300px;

    background-size: cover;

    opacity: 0.3;

    z-index: -1;

    position: absolute;

    right: 20px;

    bottom: 20px;

  }

  .artisan_text01{

    font-size: 1.2rem;

    text-align: left;

    font-weight: 600;

    margin-bottom: 1rem;

  }

  /* すりガラス */

	.vkp_filter_blur{

	  backdrop-filter: blur(5px);

	  -webkit-backdrop-filter: blur(5px);  

	  background: rgba(255,255,255,0.3); /* 半透明 */

	  border-radius: 2rem; /* 角丸 */

	  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px; /* 影 */

	  box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 10px; /* 影 */

	  max-width:700px; /* 最大幅 */

	  margin:0 auto; /* 中央揃え */

	}
  .smo_1{
    order: 1;
  }
  .smo_2{
    order:2;
  }
}