/* @charset "utf-8";

/* ===============================
共通設定
=============================== */
body {

  background-color: #30d2ff;

     /* ページの全体に「Kosugi Maru」を適用 */
    font-family: "Kosugi Maru", sans-serif;
      font-weight: 600;
}

h1 {
    /* 見出しに「Zen Maru Gothic」の太字を適用 */
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 600;
    font-size: 40px;
    color: #682105;
}

.noto-sans-jp {
    /* クラスを使って特定の要素に「Noto Sans JP」を適用 */
    font-family: "Noto Sans JP", sans-serif;
}

.zen-maru-gothic-regular {
    /* クラスを使って特定の要素に「Zen Maru Gothic」の通常を適用 */
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 400;
}

.kosugi-maru-regular {
    /* クラスを使って特定の要素に「Kosugi Maru」を適用 */
    font-family: "Kosugi Maru", sans-serif;
    font-weight: 400;
}

.container{
  width:min(1100px, 92%);
  margin-inline:auto
}

.stack{
  display:flex;
  flex-direction:column;gap:2.2rem
}


img {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
}

.more_text {
  font-size: 1.2em;
  letter-spacing: 0.1em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: -60px 35px 140px 0;
  color: #f5d838;
  text-shadow: 2px 1px 1px hsl(0deg 0% 100%);
}

button{
  display:none;
}

/* ===============================
メインビジュアル
=============================== */

.U_main_visual {
  position: relative; /* 親要素に relative を指定 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_title_rogo {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
}

.kigyou_rogo{
  width: 100%;
  max-width: 830px;
  margin: 4% 0 2% 0;
  z-index: 5;

  /* 初期状態: 定位置より上から始まり、見えない状態にする */
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 1s ease-out, opacity 0.2s ease-out; /* 滑らかな動きのためのトランジションを追加 */
}

.meintitle {
  width: 100%;
  max-width: 830px;
  z-index: 5;
}

.meintitle2 {
  width: 100%;
  z-index: 5;
  display: none;
}

.orange_sun {
    position: absolute;
    top: 8%;
    right: 4%;
    width: 20%;
    animation: kumo 4s ease-in-out infinite alternate;
    animation-timing-function: linear;
    background: url(./img/orange_sun.png) no-repeat center center / auto;
    display: inline-block;
    transition: 2s ease-in-out;
    z-index: 2;
}

.right_kumo {
    position: absolute;
    bottom: 21%;
    right: 5%;
    width: 18%;
    animation: kumo 4s ease-in-out infinite alternate;
    background: url(./img/right_kumo.png) no-repeat center center / 60px auto;
    display: inline-block;
    transition: 2s ease-in-out;
    z-index: 2;
}

.leftunder_kumo {
    position: absolute;
    bottom: 28%;
    left: 1%;
    width: 22%;
    animation: kumo 4s ease-in-out infinite alternate-reverse;
    background: url(./img/leftunder_kumo.png) no-repeat center center / 60px auto;
    display: inline-block;
    transition: 1.5s ease-in-out;
    z-index: 2;
}

.lefttop_kumo {
    position: absolute;
    top: 8%;
    left: 5%;
    width: 14%;
    animation: kumo 4s ease-in-out infinite alternate;
    background: url(./img/lefttop_kumo.png) no-repeat center center / 60px auto;
    display: inline-block;
    transition: 1s ease-in-out;
    z-index: 2;
}

.orange_ie {
    position: absolute;
    bottom: -2%;
    left: 5%;
    z-index: -1;
    width: 13%;
  }

.aoiyane_no_ie {
    position: absolute;
    bottom: -1%;
    right: 15%;
    z-index: 1;
    width: 8%
}

.akaiyane_no_ie {
    position: absolute;
    bottom: -1%;
    right: 2%;
    z-index: -1;
    width: 12%;
}



/* ===============================
ヘッダー
=============================== */

#header_bg {
  position: sticky;  /* ← スクロールで上に来たら固定 */
  top: 0;            /* 画面の一番上に配置 */
  left: 0;           /* 左端から配置 */
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;     /* 常に最前面に来るように大きめ */
  background: transparent; /* 背景は画像に任せる */
}

/* 背景画像 */
.header_image_wrapper {
  position: absolute;  /* ヘッダー内で絶対配置 */
  top: 0;
  left: 0;
  width: 100%;         /* 横幅いっぱい */
  height: 100%;        /* ヘッダーの高さに合わせる */
  object-fit: cover;   /* 縦横比を維持して切り抜き */
  z-index: 5;          /* navより下に表示 */
}

.navi_in {
  font-size: 1.1em;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.1em;
}

/* 各ボタン */
.navi_text {
  margin-left: 50px;        /* ボタン間の間隔 */
}

/* ナビゲーションを前面に */
#header_bg nav {
  position: relative;  /* 背景画像の上に表示 */
  z-index: 20;
  width: 100%;
  display: flex;
  justify-content: space-around; /* 右寄せ、中央寄せはcenter */
  align-items: center;
  padding: 0 20px;          /* 左右余白 */
  height: 100%;
}

/* ナビリストを横並びに */
#g-navi {
  display: flex;            /* 横並び */
  list-style: none;         /* デフォルトの点を消す */
  margin: 0;
  padding: 0;
}

/* ホバーの記載 */
.navi_in:hover {
  transform: rotate(8deg);
}



/* ===============================
お知らせ・アート看板とは・プログラム
=============================== */

#mein_no_kontentu {
  position: relative;  /* 背景画像と重ねるため */
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ーーーーーーーーーーー背景きいろドットーーーーーーーーーーーーー */
.kiirodotto_image {
  position: absolute;  /* ヘッダー内で絶対配置 */
  top: 0;
  left: 0;
  width: 100%;         /* 横幅いっぱい */
  height: 100%;        /* ヘッダーの高さに合わせる */
  object-fit: cover;   /* 縦横比を維持して切り抜き */
  z-index: 1;          /* コンテンツより下に表示 */
}

/* ーーーーーーーーーーーー背景装飾 インクと筆ーーーーーーーーーーーーーーーーー */
.hata1 {
position: absolute; 
left: 0;
width: 25%;
z-index: 2; 
}

.hata2 {
position: absolute;  
right: 0;
width: 25%;
z-index: 2;
}

.midori_ink {
    position: absolute;
    left: 4%;
    top: 8%;
    width: 20%;
    z-index: 2;
}

.ao_ink {
    position: absolute;
    left: 4%;
    width: 18%;
    top: 26%;
    z-index: 2;
}

.kiiro_hudeink {
    position: absolute;
    right: 0;
    top: 8%;
    width: 23%;
    z-index: 2;
}

.usupink_ink {
    position: absolute;
    right: 5%;
    top: 40%;
    width: 20%;
    z-index: 2;
}

.neonmidori_ink {
    position: absolute;
    left: 2%;
    bottom: 32%;
    width: 30%;
    z-index: 2;
}

.ao_hude {
position: absolute;  
bottom: 440px;
right: 0;
width: 25%;
z-index: 2;
}

.aka_ink {
position: absolute;  
bottom: 3%;
left: 0;
width: 25%;
z-index: 2;
}


/* ===============================
運営からのお知らせ
=============================== */

.osirase_title {
    transform: translate(13%, 30%);
    width: 100%;
    max-width: 665px;
  z-index: 2; 
}

.osirase_title2 {
display: none;
width: 100%;
max-width: 665px;
z-index: 2; 
}

#news_box {
  position: relative;
  width: 100%;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  z-index: 5; 
  margin: 2% 0;
}

.news_inside {
  width: 100%;
  height: 110px;              /* ★スクロール範囲の高さ */
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;           /* スクロール残す */
  z-index: 6; 
}

/* スクロールバーのデザイン */
.news_inside::-webkit-scrollbar {
  width: 15px;
}
.news_inside::-webkit-scrollbar-track {
  background-color: #fff;
  border-radius: 20px;
}
.news_inside::-webkit-scrollbar-thumb {
  background-color: #7dd7fd;
  border-radius: 20px;
}

/* ---------- お知らせリスト ---------- */
.news_slider {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news_slider li {
  margin-bottom: 10px;
}

/* 各カード */
.news_item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 左の青帯（日付） */
.news_date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  background: #00B4E6;
  color: #fff;
  font-weight: bold;
  font-size: 1.2rem;
  border-radius: 10px 0 0 10px;
  flex-shrink: 0;
}

/* 本文部分 */
.news_text {
  flex: 1;
  padding: 15px 20px;
  color: #030303;
  font-size: 1.2rem;
  line-height: 1.6rem;
}



/* ===============================
みんなでつくるアート看板とは
=============================== */

.artkanban_toha {
  display: block;
  width: 100%;
  margin: 0 auto; /* ★ 追加: 中央寄せ */
  z-index: 3; 
}

.setumei_no_container{
  position: relative;
  max-width: 950px;
    margin: 1% auto; /* ★ 追加: 中央寄せ */
  z-index: 3;
}

.artkanban_setumei {
position: relative;
width: 100%;
display: block;
}

.artkanban_setumei2 {
  position: relative;
width: 100%;
display: none;
}

.orange_pen {
    /* ★親要素の`artkanban_setumei`を基準に絶対配置 */
    position: absolute;
    bottom: -7.5%;
    left: 1%;
    width: 21%;
    z-index: 5;

       /* ★ これは動きの指定 ★ */
    transform-origin: bottom center; /* 回転の中心を上側の中央に設定 */
    animation: pendulum-swing 3s ease-in-out infinite alternate;
}

/* ===============================
プログラムの内容
=============================== */
.program_no_naiyou {
    /* 親要素として位置の基準を確立 */
    position: relative; 
    display: block;
    width: 100%;
    max-width: 950px;
    margin: 0 auto; /* ★ 追加: 中央寄せ */
    z-index: 2; 
}

.program_setumei {
    width: 100%;
    display: block;
    position: relative;
    margin: 13% auto;
    z-index: 1;
}

.program_setumei2 {
    width: 100%;
    display: none;
    position: relative;
    margin: 13% auto;
    z-index: 1;
}

.hude_midori {
    position: absolute;
    top: 13.5%;
    right: -10%;
    width: 27%;
    z-index: 5;
            /* ★ ここから追加 ★ */
    transform-origin: right center; /* 回転の中心を上側の中央に設定 */
    animation: pendulum-swing 3s ease-in-out infinite alternate;
}

.hude_midori2 {
  display: none;
    position: absolute;
    top: 13.5%;
    right: -10%;
    width: 27%;
    z-index: 5;
            /* ★ ここから追加 ★ */
    transform-origin: right center; /* 回転の中心を上側の中央に設定 */
    animation: pendulum-swing 3s ease-in-out infinite alternate;
}

.kodomo1 {
    position: absolute;
    bottom: 41.5%;
    left: -10%;
    width: 15%;
    z-index: 5;
}

.kodomo2 {
    position: absolute;
    bottom: 6%;
    right: -10%;
    width: 20%;
    z-index: 5;
}

/* ===============================
ワークショップの詳細
=============================== */
.warkshop_no_syousai {
  position: relative;  /* 背景画像と重ねるため */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
    /* ★追加: 下部に余白を追加して::afterがはみ出すスペースを確保 */
  padding-bottom: 80px;
}

/* 上部の波線 */
.warkshop_no_syousai::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0px; 
    left: 0;
    width: 100%;
    height: 80px; /* ここを画像の高さに合わせて調整 */
    background: url(../img/nami_top.png) center center repeat-x;
    background-size: 2000px 80px; /* 画像のサイズに合わせて調整 */
    z-index: 7;
}

/* Googleマップをまとめるコンテナ */
.syousai_container {
    position: relative; /* 子要素の配置基準 */
    width: 100%;
    max-width: 1132px;
    margin: 5% 0px 5% 0px; /* syousai_imgのmarginをここに移動 */
    z-index: 3;
}

.syousai_img{
  display: block;
  width: 100%; /* 親要素(container)に合わせて100%に */
}

.syousai2_img{
  display: none;
  width: 100%; /* 親要素(container)に合わせて100%に */
}

.syousai3_img{
display: none;
width: 100%; /* 親要素(container)に合わせて100%に */
}

/*Googleマップのスタイル */
.google-map {
    position: absolute;
    /* 位置を特定箇所に調整（例） */
    top: 42.5%;
    left: 21%;
    /* 大きさを調整（例） */
    width: 58%;
    height: 15%;
    z-index: 5;
    border-radius: 15px; /* 角を15ピクセル丸くする */
}

/* これは文字リンク */
.map-link {
    position: absolute;
    top: 58.2%;
    left: 21%;
    z-index: 6;
    color: #38a1db;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border-bottom: 1px solid #38a1db;
    letter-spacing: 0.7px;
}


/* -------背景や装飾などーーーーーー */
.kimidori_sutoraipu_image {
  position: absolute;  /* ヘッダー内で絶対配置 */
  top: 0;
  left: 0;
  width: 100%;         /* 横幅いっぱい */
  height: 100%;        /* ヘッダーの高さに合わせる */
  object-fit: cover;   /* 縦横比を維持して切り抜き */
  z-index: 1;          /* コンテンツより下に表示 */
}

.te-pu_ao {
  position: absolute;
  top: -30px;
  width: 85%;
  z-index: 2;
}

/* ーーーーーーーーイラスト装飾ーーーーーーーーーーー */
.baketu {
    position: absolute;
    top: 26.5%;
    right: 2vw;
    width: 26vw;
    z-index: 5;
}

.tori {
    position: absolute;
    bottom: 5%;
    left: 0;
    width: 15%;
    z-index: 10;
}

/* ーーーーーーーー装飾ネオン薄緑インクーーーーーーーーー */
.neomidori_migiue {
    position: absolute;
    right: 60px;
    top: 5%;
    width: 13%;
    z-index: 2;
}

.neomidori_migisita {
    position: absolute;
    right: 0;
    bottom: 12%;
    width: 27%;
    z-index: 2;
}

.neomidori_hidariue {
    position: absolute;
    left: -40px;
    top: 17%;
    width: 29%;
    z-index: 2;
}

.neomidori_hidarisita {
    position: absolute;
    left: 20px;
    bottom: 15%;
    width: 23%;
    z-index: 2;
}


/* ===============================
主催企業の詳細
=============================== */

.company_no_syoukai {
  position: relative;  /* 背景画像と重ねるため */
  display: flex;
  flex-direction: column;
  align-items: center; 
  margin: 0 0 5% 0;
}


.syoukai_title {
    width: 40%;
    margin: 1% 0% 6% 0;
    position: relative; /* 背景の上に表示するためz-indexを機能させる */
    z-index: 5;
}

.syoukai_title2 {
    display: none;
    width: 40%;
    margin: 1% 0% 5% 0;
    position: relative; /* 背景の上に表示するためz-indexを機能させる */
    z-index: 5;
}

.narabekae_box{
    position: relative; /* 背景の上に表示するためz-indexを機能させる */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    z-index: 11;
}

/* リンク付ける用コンテナ */
.principalhome_container {
  position: relative; /* 子要素の配置基準 */
  width: 100%;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.principalhome {
    width: 100%; /* 親要素(container)に合わせて100%に */
    display: block;
    z-index: 10;
}

/* 追加するリンクボタンのスタイル */
.principalhome_link {
  position: absolute; /* 親要素を基準に絶対配置 */
  bottom: 3.5%;        /* 下端から5%の位置 */
  left: 50%;         /* 親要素の左端から50%の位置 */
  transform: translateX(-50%); /* ボタンの中心が中央に来るように調整 */
  width: 70%;        /* 親要素の幅の70% */
  cursor: pointer;
  z-index: 12;
    /* トランジションを追加して動きを滑らかに */
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
}

/* ホバーしたときのスタイル */
.principalhome_link:hover {
  /* translateX(-50%)は元の位置を維持するために必須 */
  /* transform-originを基準に-3度回転 */
  transform: translateX(-50%) rotate(-2deg) rotateY(-20deg);
}

/* リンク付ける用コンテナ */
.atelieralchemist_container {
  position: relative; /* 子要素の配置基準 */
  width: 100%;
  margin: 0 1%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.atelieralchemist {
    width: 100%;
    display: block;
    z-index: 10;
}

/* 追加するリンクボタンのスタイル */
.atelieralchemist_link {
  position: absolute; /* 親要素を基準に絶対配置 */
  bottom: 3.5%;        /* 下端から5%の位置 */
  left: 50%;         /* 親要素の左端から50%の位置 */
  transform: translateX(-50%); /* ボタンの中心が中央に来るように調整 */
  width: 70%;        /* 親要素の幅の70% */
  cursor: pointer;
  z-index: 12;
    /* トランジションを追加して動きを滑らかに */
  transition: transform 0.3s ease-in-out;
  transform-origin: left;
}

.atelieralchemist_link:hover {
  /* translateX(-50%)は元の位置を維持するために必須 */
  /* transform-originを基準に-3度回転 */
  transform: translateX(-50%) rotate(-2deg) rotateY(-20deg);
}

/* ーーーーーーーーイラスト装飾えんぴつーーーーーーーーーーー */
.aoenpitu {
    position: absolute;
    bottom: -9.5%;
    left: 6%;
    width: 12%;
    z-index: 11;
        /* ★ ここから追加 ★ */
    transform-origin: bottom center; /* 回転の中心を上側の中央に設定 */
    animation: pendulum-swing 3s ease-in-out infinite alternate;
}
.aoenpitu2 {
display: none;
position: absolute;
top: 3%;
left: 5%;
width: 21%;
z-index: 11;
  /* ★ ここから追加 ★ */
transform-origin: to center; /* 回転の中心を上側の中央に設定 */
animation: pendulum-swing 3s ease-in-out infinite alternate;
}


.orenzienpitu {
    position: absolute;
    top: 16%;
    right: 8%;
    width: 12%;
    z-index: 11;
        /* ★ ここから追加 ★ */
    transform-origin: top center; /* 回転の中心を上側の中央に設定 */
    animation: pendulum-swing 3s ease-in-out infinite alternate;
}

/*ーーーーーーーーーーーーーー装飾ペン書きパターンーーーーーーーーーーーー*/
.hidariue_sankaku {
    position: absolute;
    left: 2%;
    top: 5%;
    width: 13%;
    z-index: 2;
}

.hidarinaka_sankaku {
    position: absolute;
    left: 5%;
    bottom: 32%;
    width: 7%;
    z-index: 2;
}

.hidarisita_maru {
    position: absolute;
    left: 18%;
    bottom: -7%;
    width: 9%;
    z-index: 7;
}

.migiue_dot {
    position: absolute;
    right: 5%;
    top: 0%;
    width: 23%;
    z-index: 7;
}

.miginaka_maru {
    position: absolute;
    right: 3%;
    bottom: 25%;
    width: 10%;
    z-index: 2;
}

.migisita_nami {
    position: absolute;
    right: 1%;
    bottom: -5%;
    width: 10%;
    z-index: 9;
}


/* ===============================
応募フォーム
=============================== */
.contact_box {
  position: relative;  /* 背景画像と重ねるため */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 上部の青い波背景 */
.contact_box::before {
    content: "";
    display: block;
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 70px; /* ここを画像の高さに合わせて調整 */
    background: url(../img/nami_bottom.png) center center repeat-x;
    background-size: 2000px 80px; /* 画像のサイズに合わせて調整 */
    z-index: 6;
}

/* 下の波のイラスト */
.siro_sima_image {  /* 下の波のイラスト */
  position: absolute;  /* ヘッダー内で絶対配置 */
  top: 0;
  left: 0;
  width: 100%;         /* 横幅いっぱい */
  height: 100%;        /* ヘッダーの高さに合わせる */
  object-fit: cover;   /* 縦横比を維持して切り抜き */
  z-index: 1;          /* コンテンツより下に表示 */
}

/* ーーーーー応募フォームのタイトル画像ーーーーー */
.oubo_form {
  display: block;
  width: 40%;
  z-index: 2;  
  margin: 8% 0 3% 0;
}

.oubo_form2 {
  display: none;
  width: 40%;
  z-index: 2;  
  margin: 10%;
}

/* ーーーーーーーーーー装飾落書きーーーーーーーーーー */
.senkumo_hidariue {
    position: absolute;
    left: 2%;
    top: 14%;
    width: 18%;
    z-index: 2;
}

.senkumo_hidarisita {
    position: absolute;
    left: 6%;
    top: 29%;
    width: 11%;
    z-index: 2;
}

.taiyoukumo {
    position: absolute;
    right: 2%;
    top: 8%;
    width: 20%;
    z-index: 7;
}

.hiadrinoki {
    position: absolute;
    left: 3%;
    bottom: 0%;
    width: 8%;
    z-index: 7;
}

.akaiyaneie_sita {
    position: absolute;
    left: 11%;
    bottom: 0;
    width: 7%;
    z-index: 2;
}

.neonie_sita {
    position: absolute;
    left: 20%;
    bottom: 0;
    width: 6%;
    z-index: 9;
}

.orenziie_sita {
    position: absolute;
    left: 28%;
    bottom: 0%;
    width: 7%;
    z-index: 7;
}

.pinkukuruma {
    position: absolute;
    right: 18%;
    bottom: 0;
    width: 7%;
    z-index: 2;
}

.aokuruma {
    position: absolute;
    right: 10%;
    bottom: 0;
    width: 7%;
    z-index: 9;
}


/* ===============================
フッダー
=============================== */

footer {
  width: 100%;
  height: 45px;
  background-color: hsl(51deg 90% 59%);
}



/* 
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
　　　　　　　　　　　ここから動きの記載
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */


/*==================================================
マウスホバー
===================================*/

.navi_in:hover {
  transform: rotate(10deg);
}


/* ===============================
ローディング画面
=============================== */
/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
position: fixed;
width: 100%;
height: 100%;
z-index: 9999;
text-align:center;
color:#fff;
}

/* Loading画像中央配置　*/
#splash_text {
position: absolute;
top: 50%;
left: 50%;
  z-index: 999;
transform: translate(-50%, -50%);
color: #fff;
width: 100%;
}

/*割れる画面のアニメーション*/
.loader_cover {
  width: 100%;
  height: 50%;
  background-color: #30d2ff;
  transition: all .2s cubic-bezier(.04, .435, .315, .9);
  transform: scaleY(1);
}
/*上の画面*/
.loader_cover-up {
  transform-origin: center top;
}

/*下の画面*/
.loader_cover-down {
  position: absolute;
  bottom: 0;
  transform-origin: center bottom;
}
/*クラス名がついたらY軸方向に0*/
.coveranime {
  transform: scaleY(0);
}


/* ===============================
TOPに戻るボタン
=============================== */
.pagetop {
  position: fixed;
  bottom: 1vw;   /* 下から10px */
  right: 1vw;    /* 右から10px */
  z-index: 1000;   /* 最前面 */
  width: 110px;    /* ボタンのサイズ調整 */
}

.pagetop img {
  width: 10vw;
  height: auto;
  display: block;
  cursor: pointer;
  transition: transform 0.3s;
}

.pagetop img:hover {
  transform: scale(1.1);  /* ホバー時に拡大 */
}


/* ===============================
企業ロゴ
=============================== */
.kigyou_rogo.animate-in {
  transform: translateY(0); /* 垂直方向の元の位置に戻す */
  opacity: 1; /* 画像を完全に表示する */
}

/* ===============================
動く雲
=============================== */
@keyframes kumo{
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -5px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
} 

/* ===============================
動く鉛筆
=============================== */
@keyframes pendulum-swing {
  0% {
    transform: rotate(-5deg); /* 開始時：左に15度傾ける */
  }
  50% {
    transform: rotate(5deg);  /* 中間：右に15度傾ける */
  }
  100% {
    transform: rotate(-5deg); /* 終了時：元の左向きに戻る */
  }
}


.no_flex {
  display: block!important;
}

.che input[type=checkbox], 
.che input[type=radio] {
  all: revert;
}

.form__left:has(.mb) {
  margin-bottom: 20px;
}
#add-child-btn {
  display: block;
}
.button-remove {
  display: block;
}
.footer__inner {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}