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



html,
html * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

    border: 0px solid red; 
}

.row:before, .row:after{
	content:"";
	display:table;	
}

.row:after{
	clear:both;
}


body{
	background-color:#484848;


}

contents
	{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	display: block;
	width:100%;
	max-width:900px;
 	overflow: hidden; 
	margin-bottom: 0; 
    padding-bottom: 30px;
	}


.PC-none{
	display: none;
}

.komidashi{

	display: block;
    font-family: "ShueiShogoMinStd-H", serif !important;
       padding: 0px 0px 0px 0px; 	
	font-size:51px;
    line-height: 1.0;
	font-weight: 700;
	font-style: normal;
	text-align:left;
}

/*以下小見出しアニメーション*/


/*bound text animetions*/
@keyframes showTextFromBottom{
  0%{
    transform: translateY( 100% ) translateX( 100% );
  }
  50%{
    transform: translateY( -10% ) translateX( -10% );
  }
  100%{
    transform: translateX( 0px )translateX( 0px );
  }
}
.anime-up-1.displayed span{
  animation: showText 1s backwards;
  display: inline-block;
}
.anime-up-1.displayed > span{
  overflow: hidden;
}
.anime-up-1.displayed > span > span{
  animation: showTextFromBottom 1s backwards;
}

@keyframes showTextFromupper{
   0%{
    transform: translateY( -100% ) translateX( -100% );
  }
  50%{
    transform: translateY( 10% ) translateX( 10% );
  }
  100%{
    transform: translateX( 0px )translateX( 0px );
  }
}
.anime-up-2.displayed span{
  animation: showText 1s backwards;
  display: inline-block;
}
.anime-up-2.displayed > span{
  overflow: hidden;
}
.anime-up-2.displayed > span > span{
  animation: showTextFromupper 1s backwards;
	
}



.honbun{
	display: block;
	padding:30px 0px;
font-family: "kozuka-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
	font-size:22px;
	line-height:1.5em;

	text-align:left;	
}

 /* ----スタート【トップページ記述（共通）】---- */
.hero-img{
	  	z-index:10;	
}



ul { padding: 0; margin: 0; }

.mokuji {
    font-family: "ShueiShogoMinStd-H", serif !important;
    font-size: 18px;
    text-align: left;
    padding: 13px 0px 10px 70px; /* 余計な空白を削除 */
    margin: 0;           /* 確実に上下余白を0にする */
    list-style: none;
    display: block;      /* ブロック要素化して隙間を排除 */
    line-height: 1.0;    /* 行の高さを文字サイズと同じにする */
}



.link-none{
	display: block;
	text-decoration: none !important;
    color: inherit; /* 青色を解除 */

}

.image-1 {
	width:auto;
	padding:40px 0px 0px 0px;
	height:auto;
	align: center;
	v-align:bottom;
}

.image-2 {
	width:auto;
	padding:20px 0px 0px 0px;
	height:auto;
	align: center;
	v-align:bottom;
}


/* image-2アニメ */
@keyframes fadeInScale {
0% {
        opacity: 0;
        transform: scale(3.0); /* 最初は大きく、透明 */
    }
    60% {
        opacity: 1;
        transform: scale(0.9); /* 60%の時点で少し小さくなりすぎる（グッと縮む） */
    }
    75% {
        transform: scale(1.3); /* 80%の時点で少しだけ反動で大きくなる */
    }
   83% {
        opacity: 1;
        transform: scale(0.9); /* 60%の時点で少し小さくなりすぎる（グッと縮む） */
    }
    90% {
        transform: scale(1.3); /* 80%の時点で少しだけ反動で大きくなる */
    }
    100% {
        opacity: 1;
        transform: scale(1.0); /* 最終的に100%に落ち着く */
    }
}

/* アニメーション前の初期状態を設定 */
.image-2 {
    opacity: 0; /* 最初は透明にしておく */
}

/* ローディング（#myTextLoader）に .loaded が付いたら実行 */
#myTextLoader.loaded + header + contents .image-2,
#myTextLoader.loaded ~ contents .image-2 {
    animation: fadeInScale 0.5s ease-out 0.6s forwards;
}
.image-4 {
	width:auto;
	padding:20px 0px 0px 0px;
	height:auto;
	align: center;
	v-align:bottom;
}

.chara-01,.chara-02,.chara-03 {
  width: auto;       /* 適当な幅を指定 */
  position: absolute; /* 絶対位置に指定 */
  
}

.chara-01{
	top:100px;
	left:70px;
}
.chara-02{
	bottom:50px;
	left:25px;
}.chara-03{
	bottom:00px;
	right:0px;
}

.main-img {
    display: flex;           /* Flexboxを有効にする */
    justify-content: center; /* 左右中央揃え */
    align-items: flex-end;   /* 下揃え（底に合わせる） */
    height: 900px;           /* 親の .hero-bg の高さに合わせる */
}

.main-img img{
	display: block;
	width:auto;
	position: relative;
	padding:40px 0px 0px 0px;
	height:860px;
	text-align: center;
	v-align:bottom;
	z-index:2;
}


.col {
	margin:0 auto;
    width: 90%;
}

.col-md-half{
		text-align: center;
}

/*〜〜〜〜〜問い合わせフォーム用〜〜〜〜〜*/
#formWrap {
	width:100%;
	margin:0 auto;
	color:#fff;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:separate;
}
table.formTable td,table.formTable th{
	border:0px solid #ccc;
	padding:10px;
}
table.formTable th{
	font-weight:bold;
	background:#282828;
	text-align:left;
	display: table-cell;
    vertical-align: inherit;
}

textarea {
	width:620px;
}
.qa-button{
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	border: 1.5px #ffffff solid;
	font-size:  0.9em;
	padding:8px 20px 8px 20px;
	border-radius: 30px;
	color: #ffffff;
	text-decoration: none;
	background-color: #282828;
	font-weight:bold;
}
.qa-button::before,
.qa-button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.qa-button,
.qa-button::before,
.qa-button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.qa-button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.qa-text{
	text-align: center;
	margin-bottom: 20px;
	line-height: 22px;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:572px) {
	
#formWrap {
	width:100%;
	margin:0 auto;
}
.btn-row {
        flex-direction: column !important; /* 横並びを縦並びに変更 */
        align-items: center !important;    /* 中央寄せ */
        gap: 10px !important;              /* ボタン間の隙間を調整 */
    }

    .btn-row .col-md-half {
        width: 100% !important;            /* 幅をいっぱいにする */
    }
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
	margin-left: auto;
	margin-right: auto;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
table.formTable{
	text-align:center;
}
table.formTable tr th{
	text-align:center;
}

/*モバイル用・送信リセットボタン幅調整*/
#formWrap div p .qa-button {
	width:45%;
}

}

/*ハンバーガー*/
 header{
	width: 80px;
    position: fixed;
    top: 0;    /* ★追加 */

    z-index: 9999;
    background-color: rgba(0,0,0,0.30);
    padding: 20px;
	 left: 50%;             /* 画面の真ん中を基準に */
    margin-left: -450px;
}
	
	
 /*↓これより①ハンバーガ用メニュー↓*/   
 #nav-drawer {
  		position: relative;
        float:left;
}
.menutext ul {
    list-style-type: none;
    padding: 0px;
}

.menutext ul li a {
    text-decoration: none;
    text-align: left;
	color:#FFFFFF;
    font-size: 16px;
    display: block;
    padding: 0px;
}

.style-logo {
        float: right;
        margin: 2px 40px;/*ロゴ右のマージンを余分にとって強引にw*/
        
    }
    
/*①−１チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}


/*①−２アイコンのスペース*/
#nav-open {
  display: inline-block;
  margin:10px 0px 0px 0px;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}

/*①−３ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;/*線の太さ*/
  width: 25px;/*長さ*/
  border-radius: 3px;
  background: #ffffff;
  display: block;
  content: '';
  cursor: pointer;
}
#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*①−４閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.4);
	background-image:url("images/close-mark-new.png");
	background-repeat:no-repeat;
    background-size:56px;
    background-position:45% 87%;
	opacity: 1;
	transition: .3s ease-in-out;
}

/*①−５中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;/*階層はもっとも前面に*/
	width:35%;/*右側に隙間を作る（閉じるカバーを表示）*/
	
	height: 100%;
	background: rgba(255,255,255,0.8);/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/

	visibility: hidden;
}

/*①−６チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
    display: block;/*カバーを表示*/
	
}

#nav-input:checked ~ #nav-content {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);/*中身を表示（右へスライド）*/
    box-shadow: 6px 0 25px rgba(0,0,0,.15);
	visibility: visible;
}

/*①−７ハンバーガー用目次*/
.mokuji-humb {
    font-family: "ShueiShogoMinStd-H", "TypeSquare";
    font-size: 16px;
    text-align: left;
    padding: 13px 0px 13px 0px; /* 余計な空白を削除 */
    margin: 0;           /* 確実に上下余白を0にする */
    list-style: none;
    display: block;      /* ブロック要素化して隙間を排除 */
    line-height: 1.8;    /* 行の高さを文字サイズと同じにする */
}
	
  
.row-humberg {
    padding: 60px 20px;
}
	


.hero-bg {
  width: 100%;
  height: 900px; /* 数値と単位を指定 */
  position: relative; /* テキスト配置の基準 */
  /* 95%と5%でパキッと分ける修正済みコード */
  background: linear-gradient(to bottom, #DCDCDD 0%, #DCDCDD 95%, #484848 95%, #484848 100%);
  overflow: hidden; /* はみ出たテキストを隠す */
	z-index:auto;

}

.mailto-bg {
  width: 100%;
  min-height: 900px; /* 数値と単位を指定 */
  position: relative; /* テキスト配置の基準 */
  background-color: #484848 ;
  overflow: hidden; /* はみ出たテキストを隠す */
	z-index:auto;

}

.btn-row{
	display: flex; justify-content: center; gap: 20px; width: 100%;}


.scrolling-text-1 {

  position: absolute;

  top: 90%;             /* 上から90%の位置 */
  width: 100%;
  white-space: nowrap;  /* 改行させない */
	z-index: 1;
	pointer-events: none;
}

.scrolling-text-1 p {

  display: inline-block;
  font-family: 'Impact', sans-serif; /* IMPACT */
  font-size: 20px;
  color: #AEAEAE;       /* グレー */
  padding-left: 100%;   /* 開始位置を画面右端に設定 */
  animation: scroll-left 90s linear infinite; /* 90秒で一周、無限ループ */
}

.scrolling-text-2 {
    position: absolute;
    transform: rotate(90deg);
    top: 0%;
    width: 10%;
    white-space: nowrap;
    
    /* 文字が見えるように z-index を -1 から 0 に上げる */
    z-index: 0; 
    
    /* ★絶対にこれを入れてください：文字がリンクの上に被さっても「クリックを透過」させます */
    pointer-events: none !important; 
}

.scrolling-text-2 p {

  display: inline-block;
  font-family: 'Impact', sans-serif; /* IMPACT */
  font-size: 20px;
  color: #AEAEAE;       /* グレー */
  padding-left: 100%;   /* 開始位置を画面右端に設定 */
  animation: scroll-left 90s linear infinite; /* 90秒で一周、無限ループ */
}

.scrolling-text-3 {
    position: absolute;
    transform: rotate(90deg);
    top: 0%;
   
    white-space: nowrap;
	right: 3%;
	left:auto;
	transform-origin: top right; 
    
    /* 文字が見えるように z-index を -1 から 0 に上げる */
    z-index: 0; 
    
    /* ★絶対にこれを入れてください：文字がリンクの上に被さっても「クリックを透過」させます */
    pointer-events: none !important; 
}

.scrolling-text-3 p {

  display: inline-block;
  font-family: 'Impact', sans-serif; /* IMPACT */
  font-size: 20px;
  color: #AEAEAE;       /* グレー */
  padding-left: 100%;   /* 開始位置を画面右端に設定 */
  animation: scroll-left 90s linear infinite; /* 90秒で一周、無限ループ */
}


/* 横スクロールのアニメーション設定 */
@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

.page-bg {
  width: 100%;
  min-height: 900px; /* 数値と単位を指定 */
  position: relative; /* テキスト配置の基準 */
  background-color:#DCDCDD;
  overflow: hidden; /* はみ出たテキストを隠す */
  z-index:auto;
	display: flex;
    flex-wrap: wrap;

}

.page-img{
    width: 100%;
    display: block;
    margin-bottom: 0px;
}

.page-img-2{
    width: auto; 
	margin-left: auto;
     margin-right: auto;
    display: block;
    margin-bottom: 0px;
}



.mov-1{
    width: 600px; 
    display: block;
    margin:0 auto 0 0;
}

.mov-2{
    width: 600px; 
    display: block;
    margin:0 0 0 auto;
}


.mov-img {
    position: absolute; /* 親要素を基準に自由に配置 */
    bottom: -60px;      /* 下端からの距離（マイナスにすると動画からはみ出して被ります） */
    right: 0%;         /* 右端からの距離（お好みで調整） */
    width: 350px;       /* 画像のサイズ */
    z-index: 5;         /* 動画より手前に来るように数字を大きく */
}

.mov-img img {
    width: 100%;
    height: auto;
}

.mov-img-2 {
    position: absolute; /* 親要素を基準に自由に配置 */
    bottom: -30px;      /* 下端からの距離（マイナスにすると動画からはみ出して被ります） */
    left: 0%;         /* 右端からの距離（お好みで調整） */
    width: 300px;       /* 画像のサイズ */
    z-index: 5;         /* 動画より手前に来るように数字を大きく */
}

.mov-img-2 img {
    width: 100%;
    height: auto;
}

/* 縦アニメーション */
.animation-Y {
  padding: 10px;
  opacity: 0;
  transform: translateY(100px);
  transition: 1s ease;
	transition-delay: 1s; /* ★ここを追加：1秒遅れて開始 */
}

/* 横アニメーション */
.animation-X {
  padding: 10px;
  opacity: 0;
  transform: translateX(100px);
  transition: 1s ease;
	transition-delay: 1s; /* ★ここを追加：1秒遅れて開始 */
}

.scroll-img {
        margin-left: auto;
        margin-right: auto;
        width: auto; 
	    display: flex;
	justify-content: center;
    padding: 10px 0 10px 0;
    }

.scroll-img img{
	display: block;
	align:center;
}



/*ボタン用*/

.button-spacing{
	padding-bottom:30px;
}

.cap-button {
    margin-left: auto;
    margin-right: auto;
	z-index: 10;
    background-color:#DEBD00;
    font-family: "ShueiShogoMinStd-H", serif !important;
    font-size: 22px;
    padding: 8px 20px 8px 20px;
    border-radius: 30px;
    color: #000000;
    text-decoration: none;
    
}


.cap-button::before,
.cap-button::after {
  position: absolute;
  z-index: 9;
  display: block;
  content: '';
}
.cap-button,
.cap-button::before,
.cap-button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.cap-button:hover {
  background-color: #EBD766;
}

.foot-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 40px 0 0 0;
	
}

.mail-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 40px 0 0 0;
	
}

.SNS-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 0px 0 0 0;
	
}

.SNS-logo img{
	width:50px;
	margin:40px 20px;
}

.image-18{
	max-width: 100%;
    height: auto;
}

.foot-mail-textbox-1{
		display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 40px 0 10px 0;
}

.foot-mail-textbox-2{
		display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 10px 0 40px 0;
}
.foot-mail-textbox-3{
		display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
    padding: 10px 0 10px 0;
}

.mail-logo-3{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
	margin:0 auto;
    padding: 10px 0 0px 0;
	
}

h2{
    font-family: "ShueiShogoMinStd-H", serif !important;;
    font-size: 22px;
	font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 0px;
    line-height: 1.5;
    text-align: center; /* 中央揃えにしたい場合は center */	
}

small{
    font-family: "kozuka-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
	color:#ffffff;
	font-size:19px;
	line-height:1.5em;

    text-align: center; /* 中央揃えにしたい場合は center */	
}

small a {

    color: #ffffff !important;
    text-decoration: none !important;
    display: block; /* クリックしやすくします */

}


.name{
    font-family: "kozuka-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;
	color:#ffffff;
	font-size:17px;
	line-height:1.7em;

    text-align: center; /* 中央揃えにしたい場合は center */	
}




/* スマホ向けの指定（画面幅767px以下） *//* スマホ向けの指定（画面幅767px以下） */
@media screen and (max-width: 767px) {
	contents {
        height: auto !important;
        display: block !important;
        overflow: visible !important;
    }
	


    .PC-none {
        display: block !important;
    }

    .sp-top-right {
        position: absolute !important;
        top: 80px !important;
        right: 10px !important;
        width: 30px !important; /* 少し小さくして確認 */
        height: auto !important;
        z-index: 1000 !important; /* 確実に一番手前に出す */
        border: 0px solid red !important; /* 【重要】これで見えるかテスト */
    }
	
	.sp-top-right img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
.scroll-img-00 {

    }

.scroll-img img{

}

    .hero-bg {
        width: 100% !important;
        height: 100vh !important; /* 画面いっぱいに固定 */

        min-height: 560px; /* 小さすぎる画面でも崩れないよう最低限の高さを確保 */
    }
	.page-bg {
		min-height: auto;}
	
	/* 「もっと詳しく」ボタンと画像リンクの両方を最前面へ */
.cap-button, 
.scroll-img a {
    position: relative; /* z-indexを有効にするために必須 */
    z-index: 9990 !important; /* 他のどの要素よりも手前に持ってくる */
    display: inline-block;    /* クリック面積を確実に確保 */
}

/*スマホで配列上下を差し替え*/ /*今回使用せず*/
	/* 親要素をFlexboxの縦並びに設定 */
    .row.page-bg {
        display: flex !important;
        flex-direction: column !important;
    }
	/* 上に表示したい要素（IDまたはクラスを指定） */
    #A {
        order: 1 !important; /* 数字が小さい方が上にくる */
    }

    /* 下に表示したい要素 */
    #B {
        order: 2 !important;
    }

    /* さらに下に表示したい要素 */
    #C {
        order: 3 !important;
    }

/* 画像自体のイベントも念のため許可 */
.scroll-img a img {
    pointer-events: auto;
}
	
  .row.hero-bg {
    position: relative; /* 子要素の基準点 */
         /* 高さを画面いっぱいに（または900pxなど） */
    width: auto;
	height:auto;
    display: block;     /* Flex解除 */
  }

  /* 1. image-3 を最背面に配置 */
  .main-img {
    position: absolute;

    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
 
    z-index: 1; /* 重なり順：低 */
  }

  .main-img img {
    width: auto;
	display: block;
    height: 100%;
	align:center;
	vertical-align: bottom;  
    
  }

  /* 2. image-1 と image-2 を上に載せる設定 */
  .hero-img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    
    /* 中の画像を上下に並べるためのFlexbox */
    display: flex;
    flex-direction: column; /* 縦並び */
    justify-content: center; /* 上下中央（位置はお好みで） */
    align-items: center;     /* 左右中央 */
    gap: 10px;               /* 画像同士の隙間 */
  }

  /* 重ねる画像（image-1, image-2）のサイズ調整 */
/* image-1（1番目の画像）に設定 */
.image-1{
	    width: 40%;           /* 横幅を少し抑える */
    height: auto;
    max-width: 250px;     /* 大きくなりすぎないように制限 */
   padding-top:50vh;
   padding-bottom: 0px; 
}

/* image-2（2番目の画像）に設定 */
.image-2 {
	    width: 50%;           /* 横幅を少し抑える */
    height: auto;
    max-width: 300px;     /* 大きくなりすぎないように制限 */
  padding-top: 0px; /* 上に余白 */
  padding-bottom:20vh;
}
	
	/* image-4（4番目の画像）に設定 */
.image-4 {
	    width: 55%;           /* 横幅を少し抑える */
    height: auto;
    max-width: 300px;     /* 大きくなりすぎないように制限 */
  padding-top: 20px; /* 上に余白 */
  padding-bottom:10px;
}
	
/* 1. 親要素に「キャラ3人分」の高さを確保する */
  .page-margin-left-2 {
    position: relative !important;
    display: block !important;
    min-height: 480px !important; /* ここで高さを固定して、下の文字を押し下げます */
    margin-bottom: 30px !important;
  }

  /* 2. 【重要】中の画像に「枠に合わせて伸縮して」と命令する */
  .chara-01 img, 
  .chara-02 img, 
  .chara-03 img{
    width: 100% !important;  /* これで外枠のwidth（65%など）に従います */
    height: auto !important; /* 縦横比を維持 */
    display: block;
  }

  /* 3. 外枠のサイズを指定（これで画像も一緒に動きます） */
  .chara-01 {
    top: 0px !important;
    left: 25% !important;
    width: 75% !important; /* これが効くようになります */
    z-index: 2;
  }

  .chara-02 {
    top: 130px !important;
    left: 3% !important;
    width: 65% !important; /* これが効くようになります */
    z-index: 3;
  }

  .chara-03 {
    top: 230px !important;
    left: 30% !important;
    width: 70% !important; /* これが効くようになります */
    z-index: 4;
  }
	
/* 親要素を確実に表示させる */
    .scrolling-container-3 {
        width: 100% !important;
        height: 60px !important; /* 文字の大きさに合わせて調整 */
        position: relative !important;
        overflow: visible !important; /* 画面外ならこれで見えるようになる */
        display: block !important;
    }

    /* 文字の位置をスマホの画面内に戻す */
    .scrolling-text-3 {
        font-size: 24px !important; /* スマホ用にサイズを調整 */
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        white-space: nowrap;
    }
	
.mov-1 {
	   width: 100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
}

.mov-2 {
	   width: 100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
}
	
/* 1. 画像が下の要素に被らないよう、親要素に高さを確保する */
    .page-margin-top-2 {
        position: relative !important;
		margin-left:auto;
		margin-right:auto;
        display: block !important;
        min-height: 340px !important; /* ここで高さを出して、下の文字を押し下げます */
        margin-bottom: 00px !important;
    }
	
/* 画像を動画の上に重ねる */
.mov-img {
    position: absolute; /* 親要素を基準に自由に配置 */
    top: 160px;      /* 下端からの距離（マイナスにすると動画からはみ出して被ります） */
    right: 0%;         /* 右端からの距離（お好みで調整） */
    width: 260px;       /* 画像のサイズ */
    z-index: 5;         /* 動画より手前に来るように数字を大きく */
}

.mov-img img {
    width: 100%;
    height: auto;
}

/* 画像を動画の上に重ねる */
.mov-img-2 {
    position: absolute; /* 親要素を基準に自由に配置 */
    top: 130px;      /* 下端からの距離（マイナスにすると動画からはみ出して被ります） */
    left: 0%;         /* 右端からの距離（お好みで調整） */
    width: 260px;       /* 画像のサイズ */
    z-index: 5;         /* 動画より手前に来るように数字を大きく */
}

.mov-img-2 img {
    width: 100%;
    height: auto;
}


/* mokujiを表示させない */
  .mokuji-none {
	
    display:none;
  }
.page-margin-left {
	   width: 100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
    }


    	
.page-margin-right {
	   width: 100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
	        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
    }
	
.page-margin-top{
	width:100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
	        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
    }

.page-margin-under-left{
	width:100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
	        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
    }

.page-margin-under-right{
	width:100%;
        padding: 10px 20px;      /* スマホ用の適切な余白 */
	        display: flex;
        flex-direction: column;
        align-items: center; /* スマホで中央寄せ */
    }
	
	
.page-img{
    max-width: 100%;

}   

.page-img-2{
    max-width: 100%;

}   	
.komidashi{
	width: 100%;            /* 画面幅に対するテキストエリアの幅（お好みで調整） */
        
       padding: 0px 0px 0px 0px; 	    
		font-size:37px;
	    line-height: 1.0;
	}
	
.honbun{
	width: 100%;            /* 画面幅に対するテキストエリアの幅（お好みで調整） */

	       padding: 20px 0px; 
		font-size:15px;
	}
	
.scroll-img {
    width: 100%;           /* 親の幅をいっぱいにする */
    display: flex;         /* Flexboxを有効化 */
    justify-content: center; /* 中の要素を左右中央に */
    }	
	
.scroll-img img{
    width: 120px !important; /* サイズを強制的に反映 */
    height: auto;
    display: block; 
    }
	
.scrolling-text-3 {
    position: absolute;
    transform: rotate(90deg);
    top: 0%;
   
    white-space: nowrap;
	right: 0%;
	left:auto;
	transform-origin: top right; 
    
    /* 文字が見えるように z-index を -1 から 0 に上げる */
    z-index: 0; 
    
    /* ★絶対にこれを入れてください：文字がリンクの上に被さっても「クリックを透過」させます */
    pointer-events: none !important; 
}
		
/* スマホ用ナヴィ位置調整 */	
#nav-content {
	width: 420px;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 70%;/*最大幅（調整してください）*/

	
}
	
	
#nav-close {

    background-position:86% 67%;

}
	
	/* ハンバーガーメニュー内のカラム幅をいっぱいにする */
#nav-content .col {
    width: 100%;
}
.mokuji-humb{
	padding:13px 0px;
	font-size:13px;
	}  
	
.foot-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
	margin:0 auto;
    padding: 60px 0 30px 0;
	
}
	
.mail-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
	margin:0 auto;
    padding: 20px 0 20px 0;
	
}


	
.mail-logo img{
   width:100px;
	
}

	
.SNS-logo{
	display: flex;
    justify-content: center; /* 横方向中央 */
    align-items: center;     /* 縦方向中央 */
	margin:0 auto;
    padding: 0px 0 0px 0;
	
}
	
.SNS-logo img{
	width:50px;
	margin:20px 20px;
}
	
.foot-mail-textbox-1{

    padding: 40px 0 10px 0;
}
	.foot-mail-textbox-2{

    padding: 10px 0 40px 0;
}
		.foot-mail-textbox-2{

    padding: 10px 0 10px 0;
}

.mail-logo-3{

    padding: 10px 0 10px 0;
	
}
	
.mail-logo-3 img{

    width:170px;
	
}

	
h2{

    font-size: 18px;

    text-align: center; /* 中央揃えにしたい場合は center */	
}
	
small{
		font-size:16px;
	}
.name{
		font-size:16px;
	}

	}

/* ----終わり【スマホ用クエリ】---- */

/*タブレット以上用クエリ*/
@media(min-width:768px){
	
	
	
contents
	{
	margin-left:auto;
	margin-right:auto;
	max-width:900px;
	padding-bottom:70px;
	}
	
.row {
  display: flex;    
  flex-wrap: wrap;  
}
	
.col{
	margin-left:auto;
	margin-right:auto;
	width:90%;
	padding: 10px 7px 10px;
   
	}
	
.col-md-half{
	flex: 0 0 50%;
	max-width: 50%;
  	box-sizing: border-box;
	}
	
	
.page-margin-left{
		position: relative;
	width:50%;
	padding:100px 0px 0px 60px;
}

.page-margin-left-2{
		position: relative;
	width:50%;
	padding:100px 0px 0px 60px;
}
	
.page-margin-right{
		position: relative;
	width:50%;
	padding:100px 60px 0px 0px;

}
.page-margin-top{
		position: relative;
	width:100%;
	padding:100px 60px 0px 60px;
}
	
.page-margin-top-2{
		position: relative;
	display: block ;
	width:100%;
	padding:100px 60px 0px 60px;
}
	

	
	
.page-margin-under-left{
		position: relative;
	width:100%;
	padding:0px 00px 30px 60px;
}

.page-margin-under-right{
	width:100%;
	padding:0px 60px 30px 20px;
}
	
.scroll-img a{
		position: relative !important;
    /* 背景文字(1)より大きい数字にする */
    z-index: 9999 !important; 
    
    /* 確実にクリックを有効にする */
    pointer-events: auto !important; 
    display: inline-block !important;
	}

}

/*↑タブレット以上用クエリ↑*/

@media (max-width: 900px) {
    header {
        left: 0;
        margin-left: 0;
    }
}


/*ローディング設定*/
.text-sequence-loader-preview {
    /* 画面全体に固定して浮かせる（隙間の原因を解消） */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    
    /* 中央揃え */
    display: flex;
    justify-content: center;
    align-items: center;

    font-weight: bold;
    font-size: 22px;
    color: #DEBD00;
    background-color: #484848;
    font-family: 'Arial', sans-serif;
    
    /* 消える時のアニメーション設定 */
    transition: opacity 0.8s ease, visibility 0.8s;
    pointer-events: none; /* 下のボタンなどを触れるようにする */
}

/* 読み込み完了後にJSで付与するクラス */
.text-sequence-loader-preview.loaded {
    opacity: 0;
    visibility: hidden;
}
.text-sequence-loader-preview span {
    display: inline-block;
    opacity: 0;
    transform: translateY(15px) scale(0.5) rotate(15deg); /* Initial state */
    animation-name: text-appear-animation;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    /* animation-delay is set by JS for each span */
}


.text-sequence-loader-preview span:nth-child(1) { animation-delay: 0.00s; }
.text-sequence-loader-preview span:nth-child(2) { animation-delay: 0.10s; }
.text-sequence-loader-preview span:nth-child(3) { animation-delay: 0.20s; }
.text-sequence-loader-preview span:nth-child(4) { animation-delay: 0.30s; }
.text-sequence-loader-preview span:nth-child(5) { animation-delay: 0.40s; }
.text-sequence-loader-preview span:nth-child(6) { animation-delay: 0.50s; }
.text-sequence-loader-preview span:nth-child(7) { animation-delay: 0.60s; }
.text-sequence-loader-preview span:nth-child(8) { animation-delay: 0.70s; }
.text-sequence-loader-preview span:nth-child(9) { animation-delay: 0.80s; }
.text-sequence-loader-preview span:nth-child(10) { animation-delay: 0.90s; }

@keyframes text-appear-animation {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.5) rotate(15deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

/* スクロールアニメーションの要素が、すでに画面内にある場合は最初から表示させる */
.scroll-fade.is-show {
    opacity: 1 !important;
    transform: none !important;
}

/* メールの親要素を最前面へ */
.foot-mail-text {
    position: relative !important;
    z-index: 9999 !important; /* 圧倒的に手前に持ってくる */
    pointer-events: auto !important; /* クリックを強制有効化 */
}

/* リンク自体もクリック可能にする */
.foot-mail-text a {
    display: inline-block !important;
    position: relative !important;
    z-index: 10000 !important;
}

.mail-logo a img{
    z-index: 10000 !important;	
}

/* --- ファイルの最下部に追加 --- */



/* Define @keyframes text-appear-animation if not already defined or if it needs to be static in CSS output */
/* @keyframes text-appear-animation {
    to {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
} */

/* --- フォント読み込み中の設定 --- */

/* 読み込み中 (.wf-loading) は、文字が含まれるメインコンテンツを透明にする */
/*.wf-loading body {
    opacity: 0;
}

/* 読み込み完了 (.wf-active) または 失敗時 (.wf-inactive) にふわっと表示させる */
/*.wf-active body,
.wf-inactive body {
    opacity: 1;
    transition: opacity 0.5s ease-in; /* 0.5秒かけて表示 */
/*}