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

/*初期設定*/

*,
*::before,
*::after
{
margin: 0;
padding: 0;
box-sizing: border-box;
}

img{
max-width:100%;
height: auto;
vertical-align:top;
}

body{
background-image:url("../images/bakuground.png");
display: block;
min-width:370px;/*sp*/
color: #333;
font-family: sans-serif;
}

/*サイト幅*/


.container{
	background-color: #9E9FA0;
	width:370px;
	margin:0 auto;
	display: block;
}

/*ファーストビューの指示はここまで*/

.icon4{
display: auto;
margin: auto;
width:10%;
position: absolute;
transform: translate(240px,-220px);
}
.sec3{
	position:relative;/*指定したい画像の基準を作る*/
}
.sec3 .aaa{
	position:  absolute;/*指定したい画像の基準を作る*/
	left:0px;
	bottom:0px;
}
.icon1{
display: auto;
margin: auto;
width:50%;
position: absolute;
top:-55px;
	left: 10%;
	transform: translate(-75%,20%);
}
.bottan1{
display: auto;
margin: auto;
width:60%;
position: relative;
}
.taste{
	position:relative;/*指定したい画像の基準を作る*/
}
.taste .aaa{
	position:  absolute;/*指定したい画像の基準を作る*/
	left:0;
	bottom:20px;
}

.sec3{
    background-color: #FFF;
    padding: 83.25px 30px 83px;
}



.sec5{
    padding:32.2px 25px 31.97px;
}

/* ===============================
   gp1～gp3 のアイコンをチカチカ光らせる（imgのみ）
   =============================== */
.sec6 ul {
  list-style-type: none;
  display: flex; /* 横並び */
  justify-content: space-between;
  align-items: center;
}

.sec6 ul li img {
  display: block;
  filter: drop-shadow(0 0 5px rgba(255, 180, 0, 0.5));
  animation: glow 2s infinite ease-in-out;
  pointer-events: none; /* ← hoverを完全無効化！ */
}

/* 光るアニメーション */
@keyframes glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(255, 180, 0, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255, 180, 0, 1));
  }
}

/* 順番にチカチカ */
.sec6 ul li:nth-of-type(1) img {
  animation-delay: 0s;
}
.sec6 ul li:nth-of-type(2) img {
  animation-delay: 0.4s;
}
.sec6 ul li:nth-of-type(3) img {
  animation-delay: 0.8s;
}


/* ===== ドロップシャドウのみで光らせるアニメ ===== */
@keyframes iconGlow {
  from {
    filter: drop-shadow(0 0 3px rgba(255,180,0,0.25)) brightness(1);
  }
  to {
    filter: drop-shadow(0 0 12px rgba(255,180,0,0.85)) brightness(1.25);
  }
}


/* 光り方のアニメーション（ドロップシャドウのみ使用） */
@keyframes iconGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 180, 0, 0.3));
  }
  100% {
    filter: brightness(1.4) drop-shadow(0 0 12px rgba(255, 180, 0, 0.8));
  }
}

/* ゆるく点滅する発光アニメーション */
@keyframes iconGlow {
  0% {
    filter: brightness(1) drop-shadow(0 0 4px rgba(255, 180, 0, 0.3));
  }
  100% {
    filter: brightness(1.3) drop-shadow(0 0 12px rgba(255, 180, 0, 0.7));
  }
}


/* ホバー時に光と拡大を強調 */
.sec6 ul li img:hover {
  transform: scale(1.08);
  box-shadow: 0 0 18px rgba(255, 180, 0, 0.8);
  filter: brightness(1.3);
}

/* ゆっくり点滅するアニメーション */
@keyframes glow {
  0% {
    filter: brightness(1);
    box-shadow: 0 0 6px rgba(255, 180, 0, 0.3);
  }
  100% {
    filter: brightness(1.3);
    box-shadow: 0 0 20px rgba(255, 180, 0, 0.7);
  }
}

.sec6img img{
padding: 20px
}

.text1 img{
	padding: 50px 25px 25px;
}
.text2 img{
	padding: 25px;
}
.text3 img{
	padding: 25px 25px 50px;
}
.icon2{
display: auto;
margin: auto;
width:50%;
position: absolute;
top:-60px;
	left: 50%;
	transform: translate(-50%,50%)
}
.bottan2{
display: auto;
margin: auto;
top:-60px;
width:60%;
position: relative;
}

.icon3{
display: auto;
margin: auto;
top:-40px;
width:50%;
position: absolute;
transform: translate(140%,10%);
}
.bottan3{
display: auto;
margin: auto;
top:-30px;
width:60%;
position: relative;
}

.sec8{
	position:relative;/*指定したい画像の基準を作る*/
    background-color: #FFF;
    padding: 50px 15px;
}
.sec8 .aaa{
	position:  absolute;/*指定したい画像の基準を作る*/
	left:0;
	bottom:0;
}
.sec9_2{
    text-align: center;
    padding:25px;
}

.sec9_2 img {
    text-align: center;
    width: 25%;
    height: auto; /* 画像の比率を保つ */
}


.sec10{
	position:relative;/*指定したい画像の基準を作る*/
    background-color: #fff;
    padding: 30px 20px;
}
.sec10 .aaa{
	position:  absolute;/*指定したい画像の基準を作る*/
	left:0;
	bottom:30px;
}


/*ボタン関係のホバー*/
/* ===== 共通設定 ===== */
.bottan1 a,
.bottan2 a,
.bottan3 a {
  display: block;
  padding: 20px;
  transition: all 0.3s ease;
}

/* ===== 常時ぼんやり光る ===== */
.bottan1 a img,
.bottan2 a img,
.bottan3 a img {
  transform: scale(1.05);
  animation: glow 1.8s ease-in-out infinite alternate;
  transition: transform 0.6s ease-in-out;
}

/* ===== チカチカ光るアニメーション ===== */
@keyframes glow {
  0% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 180, 0, 0));
  }
  50% {
    filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 180, 0, 0.6));
  }
  100% {
    filter: brightness(1) drop-shadow(0 0 0px rgba(255, 180, 0, 0));
  }
}

/* ===== ホバー時：さらに強く光る（任意） ===== */
.bottan1 a:hover img,
.bottan2 a:hover img,
.bottan3 a:hover img {
  transform: scale(1.1);
  filter: brightness(1.4) drop-shadow(0 0 15px rgba(255, 180, 0, 0.8));
}


/*ホバーのみ*/
.text1 img,
.text2 img,
.text3 img {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* ▼ JSでis-visibleがついたら表示 */
.text1.is-visible img,
.text2.is-visible img,
.text3.is-visible img {
  opacity: 1;
  transform: none;
}

/* ▼ ホバー時の拡大＆光エフェクト */
.text1 img:hover,
.text2 img:hover,
.text3 img:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(0, 150, 255, 0.1);
  transition: all 0.3s ease;
  border-radius: 8px; /* 角を少し丸くする（好みで） */
}