@charset "utf-8";
/* 親要素（スクロールする外枠）への設定 */
/* 追加: 余計な余白を完全に消す */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden; /* body自体のスクロールは殺す */
}
img {
	width: 100%;
}
body, html {
    margin: 0;
    padding: 0;
    /* 縦方向（y）にスクロールスナップを強制（mandatory）する */
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100%;
	overflow: hidden;
}
header img {
    max-width: 140px;
    width: 100%;
    position: relative;
    top: -11px;
}
img.ple_tap {
	position: relative;
}

.ple_tap::after {
    content: "タップして！";
    position: absolute;
    left: 10px;
    top: -27px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
.ple_tap::before {
content: "▼";
    position: absolute;
    left: 31px;
    top: -13px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
.toiawase-btn {
	    position: fixed;
    top: 10px;
    right: 117px;
    z-index: 200;
    cursor: pointer;
    background: #3fa9f5;
    padding: 5px;
    border-radius: 5px;
}
.toiawase-btn a {
    text-decoration: none;
    color: #fff;
    font-size: 1.0rem;
    line-height: 16px;
	font-weight: 900;
}
.nyuukou-btn {
    position: fixed;
    top: 10px;
    right: 65px;
    z-index: 200;
    cursor: pointer;
    background: #00d1c4;
    padding: 5px;
    border-radius: 5px;
}

.nyuukou-btn a {
    text-decoration: none;
    color: #fff;
    font-size: 1.0rem;
    line-height: 16px;
	font-weight: 900;
	
}
/* --- S6共通：文字のふわふわ --- */
.anime-futa {
    animation: s3-fuwafuwa 2.5s ease-in-out infinite;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}

/* --- 親要素（クリック範囲）の設定 --- */
.con6_upimg {
    cursor: pointer;
    text-align: center;
}

/* --- 【重要】最初から隠す設定（上ボックスの枠 & 下ボックスの画像5） --- */
/* 上ボックスの con6_upimg2 と、下ボックスの中にある click-show-img を隠す */ 

/* 文字の初期状態 */
.s6-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* クラスがついたら表示 */
.js-s6-trigger.is-active .s6-item {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
#s6 .click-show-img {

    opacity: 0;
    transition: opacity 0.5s ease;
    text-align: center;
}

/* --- クリックされて is-active がついたら表示する設定 --- */
#s6 .con6_upimg2.is-active,
#s6 .click-show-img.is-active {
    display: block !important; /* ここで初めて display を出す */
    opacity: 1 !important;
}

/* 画像と文字の間に少し隙間を作る（必要に応じて） */
.click-show-img {
    margin-top: 10px;
}
/* S5の文字：共通の初期状態 */
.s5-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 親に .is-active がついたら表示 */
.js-s5-trigger.is-active .s5-item {
    opacity: 1;
    transform: translateY(0);
}

/* 1つ目のボックスは早く、2つ目は少し遅れて表示 */
.s5-text-box .s5-item { transition-delay: 0.2s; }
.s5-text-box2 .s5-item { transition-delay: 0.5s; }

.s5-text-box2 img,.s5-text-box img {
	height: 35px;
	width: auto;
}
.content_2-box,.content-box6 {
	margin-top: 35px;
}

/* その他タップボタンなどは以前と同様 */
.con5_upimg { cursor: pointer; animation: s3-fuwafuwa 2.5s ease-in-out infinite; }
.con5_upimg2 { display: none; opacity: 0; transition: 0.4s; }
.con5_upimg2.is-open { display: block; opacity: 1; }

/* 初期状態：透明かつ少し下に配置 */
.s2-reveal-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
/* S2の文字：初期状態は透明で少し下 */
.s2-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    display: inline-block;
}

/* JSで「is-active」がついたら表示 */
.js-s2-trigger.is-active .s2-item {
    opacity: 1;
    transform: translateY(0);
}

/* 出てくる順番をずらす（ディレイ設定） */
.s2-item:nth-child(1) { transition-delay: 0.6s; }
.s2-item:nth-child(2) { transition-delay: 1.2s; }
.s2-item:nth-child(3) { transition-delay: 1.8s; }
.s2-item:nth-child(4) { transition-delay: 2s; }
/* 表示された時の状態 */
.s2-reveal-anime.is-visible .s2-reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* 順番に表示させる時間差（ディレイ）の設定 */

/* 1枚目：すぐ */
.s2-reveal-item:nth-child(1) { transition-delay: 0.2s; }

/* 2枚目：0.4秒後 */
.s2-reveal-item:nth-child(2) { transition-delay: 0.6s; }

/* 3枚目：さらに0.4秒後 */
.s2-reveal-item:nth-child(3) { transition-delay: 1.0s; }

/* 4枚目（最後）：一番ゆっくり（表示時間1.5秒）かつ、さらに遅れて開始 */
.s2-reveal-item:nth-child(4) { 
    transition-duration: 2s; /* ここで「ゆっくり」度合いを調整 */
    transition-delay: 1.6s;    /* 前の画像が出てから少し待つ */
}
/* ボックス全体の基本設定 */
.content-box {
    position: relative;
    cursor: pointer;
    min-height: 200px;
    /* overflow: hidden; */
    z-index: 100;

}

/* 中身のイラスト（初期は非表示） */
.content_1-box,
.con1_underimg {
    opacity: 0;
    transition: opacity 0.8s ease; /* じわっと表示 */
}

/* タップガイド（点滅する文字） */
.content-box::after {
    content: "TAP TO OPEN!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: #ff6600;
    font-size: 1.8rem;
    animation: blink 1.2s infinite;
    width: 250px;
    text-align: center;
}

/* 点滅の定義 */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.1; }
    100% { opacity: 1; }
}

/* --- タップ（アクティブ）後の状態 --- */

/* イラストを表示 */
.content-box.is-active .content_1-box,
.content-box.is-active .con1_underimg {
    opacity: 1;
}

/* タップガイドを消す */
.content-box.is-active::after {
    display: none;
}

/* 外枠の線を消す（任意） */
.content-box.is-active {
    border: none;
}
/* CSS Document */
/* 文字グループが下から上に上がるアニメーション */
@keyframes fadeInUp {
    0% {
        opacity: 0; /* 最初は透明 */
        transform: translateY(50px); /* 50px下に配置 */
    }
    100% {
        opacity: 1; /* 最後は不透明 */
        transform: translateY(0); /* 本来の位置へ */
    }
}

/* アニメーション全体のコンテナ */
.anime-container {
    position: relative;
    z-index: 30; /* 動画や雲より手前に表示 */
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center; /* 中央揃え */
    gap: 10px; /* グループ間の余白 */
    margin-top: 0vh; /* 画面上部からの位置調整 */
}

.main_box7 .anime-container {
	gap:10px;
	margin-bottom: 45px;
}

/* 各文字グループの共通設定 */
.text_anime_1, 
.text_anime_2, 
.text_anime_3 {
    opacity: 0; /* アニメーション開始前は隠す */
    animation: fadeInUp 1.0s ease-out forwards; /* 1秒かけてアニメーション */
}

/* 画像（moji1.pngなど）自体のサイズ調整 */
.text_anime_1 img,
.text_anime_2 img,
.text_anime_3 img {
    height: 40px; /* 文字画像の高さを適宜調整 */
    width: auto;
    margin: 0 5px; /* 文字間の横余白 */
}

/* ▼登場タイミングのズレ（遅延）を設定▼ */

/* グループ1（最初） */
.text_anime_1 {
    animation-delay: 0.3s; /* 0.5秒後に開始 */
}

/* グループ2（2番目） */
.text_anime_2 {
    animation-delay: 0.9s;
    position: relative;
    top: 5px;
    width: 100%;
    text-align: center;
}

/* グループ3（最後） */
.text_anime_3 {
    animation-delay: 1.5s; /* 2.5秒後に開始 */
}
/* 基本設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

/* TikTok風スワイプ設定 */
body {
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* 縦方向にスナップさせる */
}
/* 親コンテナの設定 */
.snap-container {
    height: 100dvh;
	height: 100vh;/* 画面の高さを固定 */
    overflow-y: scroll;     /* スクロールを有効にする */
    scroll-snap-type: y mandatory; /* 縦方向に強制スナップ */
    -webkit-overflow-scrolling: touch; /* iOSでの滑らかなスクロール */
}

/* 各セクション（子要素）の設定 */
section {
    height: 100dvh;   
	height: 100vh;/* 各ページを画面ぴったりに */
    scroll-snap-align: start; /* セクションの頭で止める */
    scroll-snap-stop: always; /* 勢い余って飛ばさない（iPhone対策） */
    
    /* 中身の調整 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;   
	width: 100%;/* はみ出しによる「伸び」を防止 */
}

.main_box {
    height: 95vh;
    display: block;
    margin-top: 30px;
}
/* セクションごとの色（背景） */
section:nth-child(odd) { background-color: #c3dff4; }
section:nth-child(even) { background-color: #c3dff4; }

/* ヘッダー・タイトル */
header {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 100;
    color: white;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
h1 {
    font-size: 16px;
    margin-top: -10px;
}
/* アニメーションの設定 */
@keyframes scroll-right {
    0% { background-position: 0 0; }
    100% { background-position: 1000px 0; } /* 画像の幅に合わせて調整 */
}

@keyframes scroll-left {
    0% { background-position: 0 0; }
    100% { background-position: -1000px 0; }
}
/* 雲が左右にゆらゆら揺れるアニメーション */
@keyframes float-x {
    0% { transform: translateX(0); }
    50% { transform: translateX(30px); } /* 30px分右にずれる */
    100% { transform: translateX(0); }
}

/* 雲が上下に少し浮き沈みするアニメーション（よりリアルに） */
@keyframes float-y {
    0% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* 浮遊する雲の共通設定 */
.floating-cloud {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: 0.8;
}

/* 雲1の設定（左上に配置） */
.cloud-1 {
    top: 15%;
    left: 10%;
    width: 74px;
    animation: float-x 8s ease-in-out infinite;
}

/* 雲2の設定（右上に配置） */
.cloud-2 {
    top: 25%;
    right: 15%;
    width: 304px;
    animation: float-x 11s ease-in-out infinite reverse;
}

/* 画像を上下にも揺らしたい場合は、中のimgタグにアニメーションをかけます */
.floating-cloud img {
    width: 100%;
    animation: float-y 5s ease-in-out infinite;
}
/* フッターアニメーションのコンテナ */
.footer-animation {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px; /* イラストの高さに合わせて調整 */
    overflow: hidden;
    pointer-events: none; /* クリックを邪魔しない */
}


/* 町（手前・右へ） */


/* sectionにposition: relativeを追加（これがないとアニメーションがズレます） */
section {
    position: relative; 
    overflow: hidden;
}
/* ハンバーガーメニューボタン */
.menu-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 200;
    cursor: pointer;
    background: rgba(0,0,0,0.6);
    padding: 10px;
    border-radius: 5px;
}

.menu-btn span {
    display: block;
    width: 25px;
    height: 2px;
    background: white;
    margin: 5px 0;
}

/* ナビゲーションメニュー（隠し状態） */
nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 250px;
    height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 150;
    transition: 0.3s;
    padding-top: 80px;
}

nav.active {
    right: 0;
}

nav ul {
    list-style: none;
    padding-left: 30px;
}

nav ul li {
    margin-bottom: 20px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
}

/* --- 共通設定 --- */
.content_2-box {
    position: relative;
    overflow: hidden;
}

/* --- 1. ふわふわアニメーション --- */
@keyframes fuwafuwa {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.con2_upimg {
    cursor: pointer;
    animation: fuwafuwa 2s ease-in-out infinite; /* ずっとふわふわ */
    transition: transform 0.3s;
}

.con2_upimg:active {
    transform: scale(0.95); /* タップした瞬間の手応え */
}

/* --- 2. タップで説明を出す（初期状態は隠す） --- */
.con2_upimg2 {
    opacity: 0;
    transform: translateX(-20px); /* 少し左にずらしておく */
    transition: all 0.5s ease;
    pointer-events: none; /* 隠れている時は触れないように */
}

/* クラス「is-open」がついたら表示（JSで制御） */
.con2_upimg2.is-open {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}
.s2-reveal-anime, .text_anime_1 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

/* JSでこのクラスがついたら表示される */
.s2-reveal-anime.is-visible, .text_anime_1.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* S4の文字：初期状態 */
.s4-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    display: inline-block;
}

/* JSで「is-active」がついたら表示 */
.js-s4-trigger.is-active .s4-item {
    opacity: 1;
    transform: translateY(0);
}

/* S4用の順番ディレイ */
.s4-item:nth-child(1) { transition-delay: 0.2s; }
.s4-item:nth-child(2) { transition-delay: 0.4s; }
.s4-item:nth-child(3) { transition-delay: 0.6s; }
.s4-item:nth-child(4) { transition-delay: 0.8s; }

/* ふわふわと説明文の制御（S4用） */
.con4_upimg {
    cursor: pointer;
    animation: s3-fuwafuwa 2.5s ease-in-out infinite; /* アニメーションは使い回し可 */
}

.con4_upimg2 {
    display: none;
    opacity: 0;
    transition: 0.4s;
}

.con4_upimg2.is-open {
    display: block;
    opacity: 1;
}
/* --- 3. h2のスライドアニメーション --- */
@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade_up.chotto_box {
    animation: slideDown 1.2s ease-out forwards;
}


/* --- S3 文字アニメーション --- */
.s3-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 親に .is-active がついたら表示 */
.js-s3-trigger.is-active .s3-item {
    opacity: 1;
    transform: translateY(0);
}

/* 1文字ずつの遅延設定 (s3-text-boxとbox2で計3枚) */
.s3-text-box .s3-item:nth-child(1) { transition-delay: 0.1s; }
.s3-text-box .s3-item:nth-child(2) { transition-delay: 0.3s; }
.s3-text-box2 .s3-item { transition-delay: 0.5s; } /* 2つ目の箱 */

/* --- S3 ふわふわ待機モーション --- */
@keyframes s3-fuwafuwa {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.con3_upimg {
    cursor: pointer;
    animation: s3-fuwafuwa 2.5s ease-in-out infinite;
}

/* --- 説明文の表示（初期は非表示） --- */
.con3_upimg2 {
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s ease;
    pointer-events: none;
    display: none; /* クリックするまで場所を取らないようにする場合 */
	margin-top: -22px;
}

.con3_upimg2.is-open {
    display: block;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* つぎへガイドのスタイル */
.next-guide {
    position: absolute;
    right: 30px;
    bottom: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;
    color: #4b6cb3;
}
.next-text {
    margin-right: 0px;
    font-size: 16px;
    font-weight: bold;
    color: #4b6cb3;
    margin-bottom: 2px;
    writing-mode: vertical-rl;
    letter-spacing: 0.1em;
	font-weight: 600;
}

.arrows {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrows span {
    display: block;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 10px solid #ff6600; /* 矢印の色：かけまるカラーに合わせて調整 */
    margin-top: -2px;
    animation: arrowFlash 1.5s infinite;
    opacity: 0;
}

/* 2つ目の矢印を少し遅らせる */
.arrows span:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes arrowFlash {
    0% { opacity: 0; transform: translateY(-5px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(5px); }
}

/* 最後のセクション(s6)ではガイドを消す（任意） */
#s6 .next-guide {

}

/*///topp//*/
.b7_owari img{
    height: 30px;
    margin-top: -13px !important;
    width: auto !important;
}
.con7_main_visual {
	margin-top: 10px;
	        z-index: 1000;
        position: relative;
    
}
.con7_main_visual img {
    max-width: 345px;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 25px;
    margin-top: 17px;
    text-align: center;
    display: block;
}


.s7-text-box img {
	height: 0px;
	width: auto;
}
.s7-text-box.js-s7-trigger2 img {
	height: 108px;
	width: auto;
}
/* この1行全体がSafari専用になります */
_::-webkit-full-page-media, _:future, :root .your-class {
    height: 100svh;
}
@supports (-webkit-touch-callout: none) {
    section {
        height: 100svh; /* Safari特有のバー対策 */
       
    }
}
.content_6-box {
	margin-top: 35px;
}
.con6_up_box .con6_upimg {
	width: 33%;
}
.con6_up_box .box_nai .s6_right,.con6_up_box .box_ru .con6_upimg {
	width: 67%;
}
.con6_up_box .con6_upimg2 {
	width: 33%;
}
#5 h2.chotto_box {
        margin-top: 30px !important;
        width: 80%;
        margin: 0 auto;
    }
.box_nai .con6_upimg {
    width: 40%;
}
.content_6-box {
	width: 95%;
	margin: 0 auto;
}
.con6_upimg {
	width: 70%;
	
}
.con6_upimg2 {
	width: 60%;
}

#s5 .box_ru {
	margin-top:65px;
	margin-bottom: 0px;
}
#s5 .box_ru .con2_upimg2 {
	margin-top: -30px;
}
#s5 .chotto_box {
	width: 70%;
	margin: 0 auto;
}
.con6_upimg img.size_6 {
    height: 70px;
    width: auto;
}
#s6 .box_ru {
    margin-bottom: 0px;
    margin-top: 30px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
#s6 .box_nai {
    margin-bottom: 0px;
    margin-top: 50px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
.s6-text-box img{
	width: auto;
	height: 35px;
}
#s5 .box_ru .con2_upimg {
    width: 11%;
}

#s5 .box_nai .con2_upimg {
    width: 23%;
}

#s3 .box_ru {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
}

#s3 .box_nai {
		display: flex;
	flex-direction: column;
}
#s3 .box_ru .con3_upimg {
	width: 56px;
}
#s3 .box_nai .con3_upimg {
	width: 95px;
}
.s3-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
}
.s3-text-box img {
	width: auto;
	height: 35px;
}
.s4-text-box img {
	width: auto;
	height: 35px;
}
.s3-text-box2 img {
	height: 35px;
	width: auto;
}
.con3_up_box h2 {
	width: 50%;
}

.con3_up_box .box_ru {
	width: 25%;
}
.con3_up_box .box_nai {
	width: 25%;
}
.con3_up_box {
    display: flex;
    justify-content: center;
    gap: 5px;
}
.content-box3 {

	z-index: 500;
}
.content_3-box {
	width: 95%;
	margin: 0 auto;
	margin-top: 30px !important;
}
.s2-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}
.content_2-box {
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

.box_ru,.box_nai {
	width: 100%;
}
.con4_upimg img {
	width: auto;
	height: 35px;
}

#s4 .box_ru {
    margin-bottom: 15px;
    margin-top: 45px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: column;
}
#s4 .chotto_box {
    width: 40%;
    margin: 0 auto;
    display: block;
    z-index: 100;
    position: relative;
}
.con4_upimg {
	width: 60%;
	margin: 0 auto;
}
.con4_upimg2 {
	width: 45%;
	margin: 0 auto;
	margin-top: -30px;
}
#s4 .box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
	flex-direction: column;
}
.box_ru {
    margin-bottom: -25px;
    margin-top: 65px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
}

.box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
}
.box_ru .con2_upimg {
	width: 11%;
}
.box_ru .con2_upimg2 {
	width: 45%;
}
.box_nai .con2_upimg {
	width: 19%;
}
.box_nai .con2_upimg2 {
	width: 45%;
}
h2.chotto_box2 {
	width: 100%;
	
}
h2.chotto_box2 img {
	width: 100%;
}
.main_box2 {
    height: 100vh;
    display: block;
    margin-top: 30px;
}
.main_box4,.main_box5,.main_box6,.main_box3 {
    height: 100vh;
    display: block;
    margin-top: 30px;
}
.con1_underimg {
    width: 100%;
    max-width: 225px;
    z-index: 100;
    position: relative;
}

.con1_underimg img {
	width: 100%;
}
.con1_upimg {
    z-index: 100;
    position: relative;
    text-align: right;
    margin-right: 100px !important;
    display: block;
    right: 0;
    width: 100%;
    padding-right: 20px;
    margin-top: 35px;
}
.con1_upimg img{
max-width: 250px;
	width: 100%;

}

#s2 .anime-container {
    width: 100%;
    margin: 0 auto;
}
#s2 .moji_small {
    width: 40px !important;
    height: 100% !important;
    position: relative;
    bottom: -16px;
    right: -4px;
}
#s2 .text_anime_1 {
	display: flex;
    align-items: center;
    width: 85%;
}


#s2 .chotto_box img {
    width: 65%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
#s2 .s2-text-box img,#s2 .s2-text-box img,#s2 .s2-text-box img {
    height: 39px;
    width: auto;
    margin: 0 0px;
}
.chotto_box {
	margin-top: 30px;
}
#s5 .content-box2 {
	margin-top: -25px;
}
.content-box2 {
	margin-top: 20px;
}
.content-box3 {
	margin-top: 20px;
}

.moji_small {
width: 15px !important;
    height: 100% !important;
    position: relative;
    bottom: -2px;
}
.text_anime_1,.text_anime_3 {
	display: flex;
	align-items: center;
}
.text_anime_3 {
    display: flex;
    align-items: center;
    width: auto;
    position: relative;
    top: 0px;
    justify-content: center;
}
.text_anime_3 img {
	width: auto;
}

.anime-container {
    width: 46%;
    margin: 0 auto;
}
.video-container {
width: 100%;
    margin: 0 auto;
    z-index: 20;
    position: relative;
}
.video-container video {
	width: 100%;
}


.content-box h2.chotto_box img{
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 20;
    height: 60px;
    width: auto;
}


.layer-town {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 413%;
    height: 70px;
    background: url(/jidousya/sticker/img/town.png) repeat-x;
    background-size: contain;
    animation: scroll-left 60s linear infinite;
}
/* 雲（奥側・左へ） */
.layer-clouds {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 453%;
    height: 100px;
    background: url(/jidousya/sticker/img/clouds.png) repeat-x;
    background-size: contain;
    animation: scroll-right 80s linear infinite;
    opacity: 1;
}

.content-box,.content-box2,.content-box3,.content-box4.content-box5,.content-box6{
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
}


.content_1-box,.content_2-box,.content_3-box,.content_4-box,.content_5-box,.content_6-box {
	position: relative;
	z-index: 100;
}

.s5-text-box,.s5-text-box2  {
	width: 80%;
}

/* =============================================
   iPhone / Safari 向けのレイアウト補正
   ============================================= */
@supports (-webkit-touch-callout: none) {

    /* 1. 全体的な高さの修正（100vhだとアドレスバーで突き抜けるため） */
    .main_box2, .main_box3, .main_box4, .main_box5, .main_box6 {
        height: 100vh !important; /* 表示されている領域にきっちり収める */
    }

    /* 2. Flexボックス内の画像が勝手に潰れるのを防ぐ */
    .text_anime_1 img, 
    .text_anime_2 img, 
    .text_anime_3 img,
    .s2-text-box img,
    .s3-text-box img,
    .s3-text-box2 img,
    .s4-text-box img,
    .s6-text-box img,
    .con4_upimg img,
    .con1_underimg img,
    .con1_upimg img {
        flex-shrink: 0; /* Safariで横に潰れるバグを防止 */
        width: auto;    /* アスペクト比を維持 */
    }

    /* 3. 横幅のはみ出しによるガタつき防止 */
    .layer-clouds, .layer-town {
        max-width: 100vw; /* 巨大な横幅画像が親を突き破るのを制限 */
        overflow: hidden;
    }

    /* 4. flex-direction: inherit が不安定な箇所の明示的な指定 */
    #s6 .box_ru, #s6 .box_nai {
        flex-direction: row; /* スマホで横に並べたい場合は row、縦なら column に書き換えてください */
    }

    /* 5. マージンやパディングの絶対値指定による右側はみ出しを修正 */
    .con1_upimg {
        margin-right: 5% !important; /* 100px固定だと狭いiPhoneで画面外に出るため */
        max-width: 80%;
    }

    /* 6. スクロールスナップが効かない場合の保険 */
    html, body {
        -webkit-overflow-scrolling: touch;
    }

    /* 7. テキストサイズが横向きで勝手に変わるのを防ぐ */
    * {
        -webkit-text-size-adjust: 100%;
    }
}


/* s7 メインボックス */
.main_box7 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff9e6, #ffe4b3);
    padding-top: 30px;
}

/* ありがとうメッセージのアニメーション */
.s7-text-box.is-active .s7-item {
    animation: bounceIn 1s ease forwards;
}

@keyframes bounceIn {
    0% { opacity: 0; transform: scale(0.3); }
    50% { opacity: 1; transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* 最後のボタン */
.btn-nyuukou-last {
    padding: 15px 40px;
    background: #ff6600;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
    margin: 0 auto;
    display: block;
    max-width: 265px;
    text-align: center;
    z-index: 10000000000;
    position: relative;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 上に戻る用の矢印反転 */
.arrows.up span {
    border-top: none;
    border-bottom: 10px solid #ff6600;
    margin-bottom: -2px;
    margin-top: 0;
}

	/*//mobb h/
/* 画面の高さが 500px 以下の時（横向きスマホなど）に適用 */
@media screen and (max-height: 630px) {
	h1 {
    font-size: 14px !important;
    margin-top: -10px;
}
	    .con7_main_visual {
        margin-top: 10px !important;
        width: 63% !important;
        margin: 0 auto;
    }
	    .box_nai .con6_upimg {
        width: 28% !important;
    }
	.con6_upimg img.size_6 {
    height: 55px !important;
    width: auto;
}
	    #s6 .box_ru {
        margin-bottom: 0px;
        margin-top: 23px !important;
        display: flex;
        gap: 0px;
        z-index: 100;
        position: relative;
        justify-content: center;
        flex-direction: inherit;
    }
	    #s5 .box_nai .con2_upimg {
        width: 23% !important;
    }
	    #s5 .box_ru .con2_upimg {
        width: 12% !important;
    }
	#s5 .chotto_box {
    width: 60% !important;
    margin: 0 auto;
}
	#s4 .chotto_box {
        width: 51% !important;
        margin: 0 auto;
        display: block;
        z-index: 100;
        position: relative;
    }
	    .main_box {
        height: 95vh;
        display: block;
        margin-top: 117px !important;
    }

	    .text_anime_1 img, .text_anime_2 img, .text_anime_3 img {
        height: 30px;
        width: auto;
        margin: 0 5px;
    }
       .con1_underimg {
        width: 100%;
        max-width: 162px !important;
        z-index: 100;
        position: relative;
    }
	    #s2 .chotto_box img {
        width: 59% !important;
        margin: 0 auto;
        text-align: center;
        display: block;
    }
}

	/*//podd w/*/
@media screen and (min-width: 481px) and (max-width: 1194px) {
	.con1_underimg img {
    width: 100%;
    max-width: 220px;
}
	.content-box {
    position: relative;
    cursor: pointer;
    min-height: 200px;
    /* overflow: hidden; */
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-direction: row-reverse;
}
	.footer-animation {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 88px;
    overflow: hidden;
    pointer-events: none;
}

    /* ここにiPad用のスタイルを書く */
	.layer-clouds {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 453%;
    height: 80px;
    background: url(/jidousya/sticker/img/clouds.png) repeat-x;
    background-size: contain;
    animation: scroll-right 80s linear infinite;
    opacity: 1;
}

	.layer-town {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 413%;
        height: 60px;
        background: url(/jidousya/sticker/img/town.png) repeat-x;
        background-size: contain;
        animation: scroll-left 60s linear infinite;
    }
	.con6_upimg2.s6_right {
		margin-top: -30px;
	}
	.ple_tap::before {
    content: "▼";
    position: absolute;
    left: 31px;
    top: -15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
	.ple_tap::after {
    content: "タップして！";
    position: absolute;
    left: 10px;
    top: -27px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
	.main_box7 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff9e6, #ffe4b3);
    padding-top: 85px;
}
	.main_box {
    height: 100vh;
    display: block;
    margin-top: 30px !important;
}
	.con3_up_box .box_ru {
	width: 33%;

	}
	.con3_up_box .box_nai {
    width: 33%;
}
	.btn-nyuukou-last {
    padding: 5px 10px;
    background: #ff6600;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
    margin: 0 auto;
    display: block;
    max-width: 206px;
    text-align: center;
    z-index: 10000000000;
    position: relative;
}
	.s7-text-box.js-s7-trigger2 img {
    height: 95px;
    width: auto;
}
	.s7-text-box img {
    height: 30px;
    width: auto;
}
	.con7_main_visual {
    margin-top: 10px !important;
    width: 80%;
    margin: 0 auto;
}


	
	.s5-text-box2 img, .s5-text-box img {
    height: 30px;
    width: auto;
}
	a.next-guide {
		z-index: 100000;
		text-decoration: none;
	}
	.next-guide {
    position: absolute;
    right: 30px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;

    color: #4b6cb3;
}
	
	/* 画像（moji1.pngなど）自体のサイズ調整 */
.text_anime_1 img, .text_anime_2 img, .text_anime_3 img {
    height: 35px; /* 文字画像の高さを適宜調整 */
    width: auto;
    margin: 0 5px; /* 文字間の横余白 */
}



.box_nai .con6_upimg {
    width: 40%;
}
.content_6-box {
	width: 95%;
	margin: 0 auto;
}
.con6_upimg {
	width: 70%;
	
}
.con6_upimg2 {
	width: 60%;
}
#s6 .box_ru {
    margin-bottom: 0px;
    margin-top: 65px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
#s6 .box_nai {
    margin-bottom: 0px;
    margin-top: 35px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
.s6-text-box img{
	width: auto;
	height: 35px;
}
#s5 .box_ru .con2_upimg {
    width: 11%;
}
  .con6_up_box .box_ru .con6_upimg {
    width: 48%;
}

#s5 .box_nai .con2_upimg {
    width: 20%;
}

#s3 .box_ru {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
}

#s3 .box_nai {
		display: flex;
	flex-direction: column;
}
#s3 .box_ru .con3_upimg {
	width: 56px;
}
#s3 .box_nai .con3_upimg {
	width: 95px;
}
.s3-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
}
.s3-text-box img {
	width: auto;
	height: 30px;
}
.s3-text-box2 img {
	height: 30px;
	width: auto;
}
.con3_up_box {
    display: flex;
    justify-content: center;
    gap: 5px;
	margin-top: -20px;
}
.content-box3 {

	z-index: 500;
}
.content_3-box {
	width: 95%;
	margin: 0 auto;
}
.s2-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}
.content_2-box {
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}
    .main_box3 {
        height: 100vh;
        display: block;
        margin-top: 85px;
    }
.box_ru,.box_nai {
	width: 100%;
}
.con4_upimg img {
	width: auto;
	height: 35px;
}

#s4 .box_ru {
    margin-bottom: 15px;
    margin-top: 45px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: column;
}
#s4 .chotto_box {
    width: 50%;
    margin: 0 auto;
    display: block;
    z-index: 100;
    position: relative;
}
.con4_upimg {
	width: 80%;
	margin: 0 auto;
}
.con4_upimg2 {
	width: 50%;
	margin: 0 auto;
	margin-top: -30px;
}
#s4 .box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
	flex-direction: column;
}
.box_ru {
    margin-bottom: -25px;
    margin-top: 40px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
}

.box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
}
.box_ru .con2_upimg {
	width: 12%;
}
.box_ru .con2_upimg2 {
	width: 50%;
	margin-top: -40px;
}
.box_nai .con2_upimg {
	width: 19%;
}
.box_nai .con2_upimg2 {
	width: 50%;
}
h2.chotto_box2 {
	width: 100%;
	
}
h2.chotto_box2 img {
	width: 100%;
}
.main_box2 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
.main_box6 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
	.main_box5 {
		        height: 100vh;
        display: block;
        margin-top: 85px;
   
	}
.main_box4 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
.con1_underimg {
    width: 100%;
    max-width: 100px !important;
    z-index: 100;
    position: relative;
}
	.s4-text-box img {
		height: 35px;
	}


.con1_upimg {
    z-index: 100;
    position: relative;
    text-align: right;
    margin-right: 100px !important;
    display: block;
    right: 0;
    width: 100%;
    padding-right: 20px;
    margin-top: 35px;
}
.con1_upimg img{
max-width: 250px;
	width: 100%;

}

#s2 .anime-container {
    width: 100%;
    margin: 0 auto;
}
#s2 .moji_small {
    width: 40px !important;
    height: 100% !important;
    position: relative;
    bottom: -16px;
    right: -4px;
}
#s2 .text_anime_1 {
	display: flex;
    align-items: center;
    width: 85%;
}


#s2 .chotto_box img {
    width: 55%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
#s2 .s2-text-box img,#s2 .s2-text-box img,#s2 .s2-text-box img {
    height: 39px;
    width: auto;
    margin: 0 0px;
}
.chotto_box {
	margin-top: 30px;
}
.content-box2 {
	margin-top: 20px;
}
.content-box3 {
	margin-top: 20px;
}

.moji_small {
width: 15px !important;
    height: 100% !important;
    position: relative;
    bottom: -2px;
}
.text_anime_1,.text_anime_3 {
	display: flex;
	align-items: center;
}
.text_anime_3 {
    display: flex;
    align-items: center;
    width: auto;
    position: relative;
    top: 0px;
    justify-content: center;
}
.text_anime_3 img {
	width: auto;
}

.anime-container {
    width: 80%;
    margin: 0 auto;
}
.video-container {
width: 100%;
    margin: 0 auto;
    z-index: 20;
    position: relative;
}
.video-container video {
	width: 100%;
}


.content-box h2.chotto_box img{
    width: 65%;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 20;
}
	section {
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}
}

	/*//mobb w/*/
@media only screen and (max-width: 480px) {
	.content-box {
    position: relative;
    cursor: pointer;
    min-height: 200px;
    /* overflow: hidden; */
    z-index: 100;
    display: inline;
    justify-content: none;
    align-items: end;
    flex-direction: row-reverse;
}
	section {
    height: 100dvh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}
	.footer-animation {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 60px;
    overflow: hidden;
    pointer-events: none;
}
	.con6_upimg2.s6_right {
		margin-top: -30px;
	}
	.ple_tap::before {
    content: "▼";
    position: absolute;
    left: 31px;
    top: -15px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
	.ple_tap::after {
    content: "タップして！";
    position: absolute;
    left: 10px;
    top: -27px;
    font-size: 0.6rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
	.main_box7 {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #fff9e6, #ffe4b3);
    padding-top: 145px;
}
	.main_box {
    height: 95vh;
    display: block;
    margin-top: 80px;
	
}
	.con3_up_box .box_ru {
	width: 33%;

	}
	.con3_up_box .box_nai {
    width: 33%;
}
	.btn-nyuukou-last {
    padding: 5px 10px;
    background: #ff6600;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
    margin: 0 auto;
    display: block;
    max-width: 206px;
    text-align: center;
    z-index: 10000000000;
    position: relative;
}
	.s7-text-box.js-s7-trigger2 img {
    height: 108px;
    width: auto;
}
	.s7-text-box img {
    height: 30px;
    width: auto;
}
	.con7_main_visual {
    margin-top: 10px !important;
    width: 80%;
    margin: 0 auto;
}


	
	.s5-text-box2 img, .s5-text-box img {
    height: 30px;
    width: auto;
}
	a.next-guide {
		z-index: 100000;
		text-decoration: none;
	}
	.next-guide {
    position: absolute;
    right: 30px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 100;

    color: #4b6cb3;
}
	
	/* 画像（moji1.pngなど）自体のサイズ調整 */
.text_anime_1 img, .text_anime_2 img, .text_anime_3 img {
    height: 35px; /* 文字画像の高さを適宜調整 */
    width: auto;
    margin: 0 5px; /* 文字間の横余白 */
}

/* 雲（奥側・左へ） */
.layer-clouds {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 200%;
    height: 60px;
    background: url(/jidousya/sticker/img/clouds.png) repeat-x;
    background-size: contain;
    animation: scroll-right 80s linear infinite;
    opacity: 1;
}

.layer-town {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 330%;
    height: 40px;
    background: url(/jidousya/sticker/img/town.png) repeat-x;
    background-size: contain;
    animation: scroll-left 60s linear infinite;
}
.box_nai .con6_upimg {
    width: 40%;
}
.content_6-box {
	width: 95%;
	margin: 0 auto;
}
.con6_upimg {
	width: 70%;
	
}
.con6_upimg2 {
	width: 60%;
}
#s6 .box_ru {
    margin-bottom: 0px;
    margin-top: 65px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
#s6 .box_nai {
    margin-bottom: 0px;
    margin-top: 35px;
    display: flex;
    gap: 0px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: inherit;
}
.s6-text-box img{
	width: auto;
	height: 35px;
}
#s5 .box_ru .con2_upimg {
    width: 15%;
}

#s5 .box_nai .con2_upimg {
    width: 30%;
}

#s3 .box_ru {
	display: flex;
	flex-direction: column;
	margin-top: 0;
	margin-bottom: 0;
}

#s3 .box_nai {
		display: flex;
	flex-direction: column;
}
#s3 .box_ru .con3_upimg {
	width: 56px;
}
#s3 .box_nai .con3_upimg {
	width: 95px;
}
.s3-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
}
.s3-text-box img {
	width: auto;
	height: 30px;
}
.s3-text-box2 img {
	height: 30px;
	width: auto;
}
.con3_up_box {
    display: flex;
    justify-content: center;
    gap: 5px;
	margin-top: -20px;
}
.content-box3 {

	z-index: 500;
}
.content_3-box {
	width: 95%;
	margin: 0 auto;
}
.s2-text-box {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 0 auto;
}
.content_2-box {
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}
    .main_box3 {
        height: 100vh;
        display: block;
        margin-top: 85px;
    }
.box_ru,.box_nai {
	width: 100%;
}
.con4_upimg img {
	width: auto;
	height: 35px;
}

#s4 .box_ru {
    margin-bottom: 15px;
    margin-top: 45px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    flex-direction: column;
}
#s4 .chotto_box {
    width: 75%;
    margin: 0 auto;
    display: block;
    z-index: 100;
    position: relative;
}
.con4_upimg {
	width: 80%;
	margin: 0 auto;
}
.con4_upimg2 {
	width: 60%;
	margin: 0 auto;
	margin-top: -30px;
}
#s4 .box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
	flex-direction: column;
}
.box_ru {
    margin-bottom: -25px;
    margin-top: 40px;
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
}

.box_nai {
    display: flex;
    gap: 20px;
    z-index: 100;
    position: relative;
    justify-content: center;
    margin-top: 20px;
}
.box_ru .con2_upimg {
	width: 20%;
}
.box_ru .con2_upimg2 {
	width: 70%;
	margin-top: -40px;
}
.box_nai .con2_upimg {
	width: 33%;
}
.box_nai .con2_upimg2 {
	width: 75%;
}
h2.chotto_box2 {
	width: 100%;
	
}
h2.chotto_box2 img {
	width: 100%;
}
.main_box2 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
.main_box6 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
	.main_box5 {
		        height: 100vh;
        display: block;
        margin-top: 85px;
   
	}
.main_box4 {
    height: 100vh;
    display: block;
    margin-top: 85px;
}
.con1_underimg {
    width: 100%;
    max-width: 170px;
    z-index: 100;
    position: relative;
}
	.s4-text-box img {
		height: 35px;
	}

.con1_underimg img {
	width: 100%;
}
.con1_upimg {
    z-index: 100;
    position: relative;
    text-align: right;
    margin-right: 100px !important;
    display: block;
    right: 0;
    width: 100%;
    padding-right: 20px;
    margin-top: 35px;
}
.con1_upimg img{
max-width: 250px;
	width: 100%;

}

#s2 .anime-container {
    width: 100%;
    margin: 0 auto;
}
#s2 .moji_small {
    width: 40px !important;
    height: 100% !important;
    position: relative;
    bottom: -16px;
    right: -4px;
}
#s2 .text_anime_1 {
	display: flex;
    align-items: center;
    width: 85%;
}


#s2 .chotto_box img {
    width: 85%;
    margin: 0 auto;
    text-align: center;
    display: block;
}
#s2 .s2-text-box img,#s2 .s2-text-box img,#s2 .s2-text-box img {
    height: 39px;
    width: auto;
    margin: 0 0px;
}
.chotto_box {
	margin-top: 30px;
}
.content-box2 {
	margin-top: 20px;
}
.content-box3 {
	margin-top: 20px;
}

.moji_small {
width: 15px !important;
    height: 100% !important;
    position: relative;
    bottom: -2px;
}
.text_anime_1,.text_anime_3 {
	display: flex;
	align-items: center;
}
.text_anime_3 {
    display: flex;
    align-items: center;
    width: auto;
    position: relative;
    top: 0px;
    justify-content: center;
}
.text_anime_3 img {
	width: auto;
}

.anime-container {
    width: 80%;
    margin: 0 auto;
}
.video-container {
width: 100%;
    margin: 0 auto;
    z-index: 20;
    position: relative;
}
.video-container video {
	width: 100%;
}


.content-box h2.chotto_box img{
    width: 65%;
    margin: 0 auto;
    display: block;
    position: relative;
    z-index: 20;
}
	
}



	/*//mobmob/*/
@media only screen and (max-width: 320px) {
	h1 span {
		display: block;
	}
	
	.s3-text-box img {
        width: auto;
        height: 30px;
    }
	
	    #s2 .s2-text-box img, #s2 .s2-text-box img, #s2 .s2-text-box img {
        height: 30px;
        width: auto;
        margin: 0 0px;
    }
	#s6 .ple_tap::before {
    content: "▼";
    position: absolute;
    left: 7px;
    top: -13px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ff6600;
    width: 100px;
}
	
	
	#s5 .anime-container {
		gap:0;
	}
	    .s3-text-box2 img {
        height: 30px;
        width: auto;
    }
	#s5 
	
	    .s3-text-box img {
        width: auto;
        height: 30px;
    }
}