@charset "utf-8";
/* CSS Document */

/*********************** フェードインで現れるページ遷移************************/
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
/*** bodyやメインコンテンツの要素に反映させる ***/
body{
  animation: fadeIn 4s forwards;
}

/************ズームイン**************/

.zoom-box{
	position: absolute;
	top:40%;
	left:5%;
	width: 90%;
}
.zoom-1 img {
      width: 50%;
      height: auto;
      animation: animationZoom1 4s ease-in-out forwards;
    }
@keyframes animationZoom1 {
100% { transform: scale(1.5)}
}

/*==================================================
ふわっ
===================================*/
.photo {
  opacity: 0;
}

.fadeUp{
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}


/* 初期状態：スマホ用の左右からのアニメーション */
.service-box.scroll_left {
  opacity: 0;
  transform: translateX(-100%);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

.service-box.scroll_right {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* 初期状態：PC用の下からのアニメーション */
.service-box.scroll_up {
  opacity: 0;
  transform: translateY(50px);
  transition: transform 0.8s ease, opacity 0.8s ease;
}

/* アニメーションが発動したときの状態 */
.service-box.on {
  opacity: 1;
  transform: translateX(0);
  transform: translateY(0);
}


/*----------------------------
遅延
----------------------------*/

.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}

/* =========================================================================================================
 *
 * リンクボタン
 *
========================================================================================================= */
.block-button {
  display: inline-block;
  width: 80%;
  margin-left: 10%;
  margin-bottom: 5%;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 1% 0;
}
.block-button:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #666; /* スライドさせたい背景色 */
  transform: translateX(-100%);
  transition: transform 0.5s;
  z-index: -1;
}
.block-button:hover::before {
  transform: translateX(0);
}

/***************************************************

ホバーで縮小されるボタン

******************************************************/

/* ボタンの通常状態 */
.reduction {
  background: linear-gradient(180deg,  #fb8c00 ,#ffa726,#ffa726,#fb8c00 );
  color: #fff;
  font-size: clamp(1.6rem, 1.5vw, 2rem);
  font-weight: bold;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* ホバー時 */
.reduction:hover {
  transform: scale(0.95); /* ボタンを少し縮小 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 影を少し減らして押し込まれた感じを演出 */
}

/* アクティブ時（クリック時） */
.reduction:active {
  transform: scale(0.9); /* さらに小さく縮小 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* 影をさらに小さく */
}



/* =========================================================================================================
 *
 * リンクライン
 *
========================================================================================================= */
.line {
	display: inline-block;
  position: relative;
  text-decoration: none;/*デフォルトで下線を非表示*/
}

/** 下線を左から引く **/
.line:after{
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 0;
  height: 1.5px; /*下線の太さ*/
  background-color: #444444; /*下線の色*/
  transition: .3s; /*アニメーション速度*/
}
.line:hover:after {
  width:100%;
}

/**流れるようなアニメーション**/
/* アニメーションキー */
@keyframes moveRight {
  0% {
    transform: translateX(0); /* 初期位置 */
  }
  100% {
    transform: translateX(100%); /* 右に移動 */
  }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0); /* 初期位置 */
  }
  100% {
    transform: translateX(-100%); /* 左に移動 */
  }
}

/* column-top: 右に流れるアニメーション 
.column-top svg {
  transform: scale(2) translateX(-25%);
  width: 100%;
  height: auto;
  overflow: hidden;
  animation: moveRight 10s linear infinite; /* 右に移動するアニメーション 
}
*/
/* column-bottom: 左に流れるアニメーション 
.column-bottom svg {
  transform: scale(2) scaleX(-1) scaleY(-1) translateX(-25%);
  width: 100%;
  height: auto;
  overflow: hidden;
  animation: moveLeft 10s linear infinite; /* 左に移動するアニメーション 
}

*/

/* =========================================================================================================
 *
 * 回転
 */

.rolling,
.rolling01{
    transition: transform 1s ease; /* 回転アニメーション */
}

.rolling:hover {
    transform: rotate(360deg); /* ホバー時に360度回転 */
}

/*Y軸で回転*/
.rolling01:hover{
transition: transform 1s;
transform: rotateY(360deg);
}






/************************ふわふわゆれる************************/
.fuwafuwa {
  animation: fuwafuwa 3s infinite ease-in-out .5s alternate;
  display: inline-block;
  transition: 1.5s ease-in-out;
z-index: 0;
  position: absolute;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-5deg);
  }
  50% {
    transform:translate(0, -5px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(5deg);
  }
}

.scroll{
margin: auto;
text-align: center;
overflow: hidden;
height: 100vh;
width: 100%;
position: absolute;
top:0;
}
.scroll img {
  display: inline-block;
  animation: scrollAnime 40s linear infinite;
max-width: 100%;}


.scroll ul li{
	position: absolute;
}
.scroll .bubble01{
	top:0;
	left:5%;
	width:25%;
}
.scroll .bubble02{
	top:0;
	right:0;
	width:50%;
}
.scroll .bubble03{
	top:18%;
	left:0;
	width:18%;
}
.scroll .bubble04{
	top:40%;
	right:0;
	width:20%;
}
.scroll .bubble05{
	top:35%;
	left:25%;
	width:30%;
}
.scroll .bubble06{
	top:55%;
	right:10%;
	width:18%;
}
.scroll .bubble07{
	top:60%;
	left:0;
	width:50%;
}
.scroll .bubble08{
	top:80%;
	right:0;
	width:16%;
}
.scroll .bubble09{
	top:85%;
	left:0;
	width:18%;
}
.scroll .bubble10{
	top:90%;
	right:12%;
	width:15%;
}

@keyframes scrollAnime {
  0% {
    transform: translateY(100%)
  }
  100% {
    transform: translateY(-100%)
  }
}