@charset "utf-8";

:root {
	/* 背景色 */
	--color-room0: #fffbd7;
	--color-room1: #fff4e1;
	--color-room2: #ffd7ab;
	/* ※viewエリア用 */
	--view-scale: calc((100vw - 375px) / 1625px * 0.75 + 0.25);
	/* テキストimgのサイズ調整 */
	--txt-sp-scale: 1;
}

/* ==================================================
	PC
================================================== */

/* ========== トップページ共通 ========== */

/* 非表示 */
#pankuzu_wrap,
#footstep_wrap {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}
img {
	vertical-align: top;
}

body.scroll_lock {
	overflow: hidden;
}

#container {
	min-width: auto;
}
#container h2 {
	background: none;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 30px 0;
	text-align: center;
}
#container h2 img {
	max-width: 100%;
	height: auto;
}


/* ========== 1 メイングラフィック ========== */

.top_contents_1 {
	min-height: 100vh;
	min-height: 100dvh;
	overflow: hidden;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/* 動画 */
body {
	overflow: hidden;
}
body.hero_ready {
	height: auto;
	overflow: auto;
}

.mv_opening {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
/*	height: 100vh;
	height: 100dvh;*/
	aspect-ratio: 1920 / 1080;
/*	aspect-ratio: 2000 / 1400;*/
	overflow: hidden;
	z-index: 10;
}

/* 動画の謎の線消し */
.mv_opening::after {
	content: '';
	box-sizing: border-box;
	border: 3px solid var(--color-sky);
	width: calc(100% + 2px);
	height: auto;
	aspect-ratio: 1922 / 1082;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	display: none !important;
}

body.anim_stop .mv_opening,
.hero_ready .mv_opening {
	opacity: 0 !important;
	pointer-events: none !important;
}

#mv_video {
	position: relative;
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	-o-object-fit: contain;
	   object-fit: contain;
	border: none;
	outline: none;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 1100px) {
	.mv_opening {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		aspect-ratio: auto;
	}
	#mv_video {
		width: calc(100% + 4px);
		height: auto;
		aspect-ratio: 360 / 630;
	}
}
/*
@media screen and (max-width: 710px) {
	.mv_opening::after {
		width: 712px;
		height: auto;
	}
	#mv_video {
		width: 710px;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		object-fit: fill;
	}
}
*/

/* タイトル */
h1.logo {
	text-align: center;
	width: fit-content;
	margin: 5.75vw auto 0;
	padding: 0;
}
@media screen and (max-width: 600px) {
	h1.logo { margin-top: 100px; }
}

/* ヘッダとタイトル タブレット・スマートフォン調整 */
.mv_title [class*="item"] {
	display: inline-block;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	vertical-align: bottom;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
}
.mv_title [class*="item"] img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.mv_title .item1 {
	width: clamp(79px, 11.45vw, 229px);
	aspect-ratio: 229 / 112;
	background: url(/img/sites/character/mv/top-ttl-1.png) no-repeat center center / contain;
	margin: 0;
}
.mv_title .item2 {
	width: clamp(20px, 2.95vw, 59px);
	aspect-ratio: 59 / 81;
	background: url(/img/sites/character/mv/top-ttl-2.png) no-repeat center center / contain;
	margin: 0 clamp(18px, 2.6vw, 52px) clamp(1px, 0.15vw, 3px) clamp(17px, 2.45vw, 49px)
}
.mv_title .item3 {
	width: clamp(81px, 11.75vw, 235px);
	aspect-ratio: 235 / 110;
	background: url(/img/sites/character/mv/top-ttl-3.png) no-repeat center center / contain;
	margin-bottom: clamp(-16px, -0.8vw, -6px);
}

/* ----- グラフィックエリア ----- */
.mv_visual {
	opacity: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-ms-flex-line-pack: center;
	    align-content: center;
	width: 100%;
}
.hero_ready .mv_visual {
	opacity: 1;
	-webkit-transition: opacity 2.8s ease;
	-o-transition: opacity 2.8s ease;
	transition: opacity 2.8s ease;
}

.mv_graphic {
	position: relative;
	width: clamp(375px, 52.8vw, 1056px);
	aspect-ratio: 1056 / 912;
	margin: clamp(71px, 10vw, 200px) auto;
}
.mv_bg::before,
.mv_bg::after {
	content: '';
	height: auto;
	display: block;
	position: absolute;
}
/* はっぱ */
.mv_bg::before {
	width: clamp(74px, 10.45vw, 209px);
	aspect-ratio: 209 / 189;
	top: clamp(-85px, -4.25vw, -30px);
	right: clamp(60px, 8.5vw, 170px);
	background: url(/img/sites/character/mv/leaf2.png) no-repeat center bottom / contain;
}
.mv_bg::after {
	width: clamp(157px, 22.15vw, 443px);
	aspect-ratio: 443 / 193;
	-webkit-transform-origin: 98% -5%;
	    -ms-transform-origin: 98% -5%;
	        transform-origin: 98% -5%;
	-webkit-animation: leaf_sway 5.6s linear infinite;
	        animation: leaf_sway 5.6s linear infinite;
	background: url(/img/sites/character/mv/leaf1.png) no-repeat center bottom / contain;
	top: clamp(-164px, -8.2vw, -58px);
	right: clamp(109px, 15.45vw, 309px);
}
@-webkit-keyframes leaf_sway {
	0%   { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
	50%  { -webkit-transform: skewY(2deg); transform: skewY(2deg); }
	100% { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
}
@keyframes leaf_sway {
	0%   { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
	50%  { -webkit-transform: skewY(2deg); transform: skewY(2deg); }
	100% { -webkit-transform: skewY(0deg); transform: skewY(0deg); }
}

/* リンクコンテンツ */
.mv_animation a {
	display: block;
}
.mv_animation img {
	width: 100%;
	height: auto;
}
[class*="mv_anim_"] {
	position: absolute;
}
.mv_anim_01 {
	width: clamp(96px, 13.5vw, 270px);
	aspect-ratio: 270 / 335;
	top: clamp(-30px, -1.5vw, -10px);
	left: clamp(-70px, -3.5vw, -24px);
}
.mv_anim_02 {
	width: clamp(129px, 18.3vw, 366px);
	aspect-ratio: 366 / 326;
	bottom: clamp(31px, 4.5vw, 90px);
	left: clamp(25px, 3.5vw, 70px);
}
.mv_anim_03 {
	width: clamp(110px, 15.45vw, 309px);
	aspect-ratio: 309 / 245;
	top: clamp(9px, 1.25vw, 25px);
	left: calc(50% - clamp(48px, 6.75vw, 135px));
}
.mv_anim_04 {
	width: clamp(135px, 18.95vw, 379px);
	aspect-ratio: 379 / 212;
	bottom: clamp(124px, 17.5vw, 350px);
	right: clamp(-85px, -4.25vw, -30px);
}
.mv_anim_05 {
	width: clamp(140px, 19.75vw, 395px);
	aspect-ratio: 395 / 285;
	bottom: clamp(7px, 1vw, 20px);
	right: 0;
}
.mv_animation a:hover img {
	opacity: 1;
}
.mv_anim_01 .mv_anim_item.__link_hover {
	background: url(/img/sites/character/mv/link-prof-w.png) no-repeat center center / contain; }
.mv_anim_02 .mv_anim_item.__link_hover {
	background: url(/img/sites/character/mv/link-line-w.png) no-repeat center center / contain; }
.mv_anim_03 .mv_anim_scale.__link_hover {
	background: url(/img/sites/character/mv/link-room-w.png) no-repeat center center / contain; }
.mv_anim_04 .mv_anim_item.__link_hover {
	background: url(/img/sites/character/mv/link-wear-w.png) no-repeat center center / contain; }
.mv_anim_05 .mv_anim_item.__link_hover {
	background: url(/img/sites/character/mv/link-news-w.png) no-repeat center center / contain; }
.mv_graphic .mv_animation .__link_hover {
	-webkit-animation-play-state: paused;
	        animation-play-state: paused;
}

/* メイングラフィックエリア タブレット・スマートフォン調整 */
@media screen and (max-width: 442px) {
	.mv_graphic {
		width: clamp(320px, 100%, 375px);
	}
	.mv_anim_01 {
		left: 0;
	}
	.mv_anim_04 {
		right: 0;
		bottom: clamp(20px, 35vw, 124px);
	}
	.mv_anim_05 {
		bottom: 0;
	}
}


/* ----- 登場アニメーション ----- */

/* 動画再生時のフローティングコンテンツ */
#btn_spm_menu,
.link_sns,
#anim_toggle {
	opacity: 0;
	-webkit-transform: translateY(-200%);
	    -ms-transform: translateY(-200%);
	        transform: translateY(-200%);
	pointer-events: none;
}
.hero_ready #btn_spm_menu,
.hero_ready .link_sns,
.hero_ready #anim_toggle {
	opacity: 1;
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
	pointer-events: auto;
	-webkit-transition: opacity 2.8s ease-out, -webkit-transform 1.4s ease-in-out;
	transition: opacity 2.8s ease-out, -webkit-transform 1.4s ease-in-out;
	-o-transition: opacity 2.8s ease-out, transform 1.4s ease-in-out;
	transition: opacity 2.8s ease-out, transform 1.4s ease-in-out;
	transition: opacity 2.8s ease-out, transform 1.4s ease-in-out, -webkit-transform 1.4s ease-in-out;
}

/* タイトル */
.mv_title .mv_float {
	opacity: 0;
}
.hero_ready .mv_title [class*="item"] {
	-webkit-animation: mv_title_entry 0.8s ease forwards;
	        animation: mv_title_entry 0.8s ease forwards;
}
.hero_ready .mv_title .item1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.hero_ready .mv_title .item2 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.hero_ready .mv_title .item3 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
@-webkit-keyframes mv_title_entry {
	0% { -webkit-transform: translateY(40px); transform: translateY(40px); opacity: 0; }
	50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
@keyframes mv_title_entry {
	0% { -webkit-transform: translateY(40px); transform: translateY(40px); opacity: 0; }
	50% { -webkit-transform: translateY(-15px); transform: translateY(-15px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}
.mv_bg {
	opacity: 0;
}
.mv_bg > img {
	width: 100%;
	height: auto;
}
.hero_ready .mv_bg {
	-webkit-animation: mv_bg_entry 1s ease forwards;
	        animation: mv_bg_entry 1s ease forwards;
	-webkit-animation-delay: 0.5s;
	        animation-delay: 0.5s;
}

@keyframes mv_bg_entry {
	0%   { transform: translateY(180px); opacity: 0; }
	50%  { transform: translateY(-20px); opacity: 1; }
	100% { transform: translateY(0);     opacity: 1; }
}
.mv_animation .mv_float {
	opacity: 0;
}
.hero_ready .mv_animation .mv_float {
	-webkit-animation-name: mv_link_entry;
	        animation-name: mv_link_entry;
	-webkit-animation-duration: 0.8s;
	        animation-duration: 0.8s;
	-webkit-animation-fill-mode: forwards;
	        animation-fill-mode: forwards;
}
.hero_ready .mv_anim_01 { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
.hero_ready .mv_anim_02 { -webkit-animation-delay: 1.05s; animation-delay: 1.05s; }
.hero_ready .mv_anim_03 { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.hero_ready .mv_anim_04 { -webkit-animation-delay: 1.35s; animation-delay: 1.35s; }
.hero_ready .mv_anim_05 { -webkit-animation-delay: 1.5s; animation-delay: 1.5s; }

@-webkit-keyframes mv_link_entry {
	0% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0; }
	50% { -webkit-transform: translateY(-18px); transform: translateY(-18px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@keyframes mv_link_entry {
	0% { -webkit-transform: translateY(140px); transform: translateY(140px); opacity: 0; }
	50% { -webkit-transform: translateY(-18px); transform: translateY(-18px); opacity: 1; }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}


/* ----- 各パーツのアニメーション ----- */

/* ふわふわアニメーション */
@-webkit-keyframes float_y {
	0%{ -webkit-transform: translateY(0); transform: translateY(0); }
	50%{ -webkit-transform: translateY(-15px); transform: translateY(-15px); }
	100%{ -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes float_y {
	0%{ -webkit-transform: translateY(0); transform: translateY(0); }
	50%{ -webkit-transform: translateY(-15px); transform: translateY(-15px); }
	100%{ -webkit-transform: translateY(0); transform: translateY(0); }
}
/* 拡大縮小 */
@-webkit-keyframes scale_bottom {
	0%{ -webkit-transform: scale(1); transform: scale(1); }
	50%{ -webkit-transform: scale(1.06); transform: scale(1.06); }
	100%{ -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes scale_bottom {
	0%{ -webkit-transform: scale(1); transform: scale(1); }
	50%{ -webkit-transform: scale(1.06); transform: scale(1.06); }
	100%{ -webkit-transform: scale(1); transform: scale(1); }
}

/* 共通の動き */
.hero_ready .mv_anim_item {
	position: absolute;
	-webkit-animation-name: float_y;
	        animation-name: float_y;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	will-change: transform;
}
.hero_ready .mv_anim_scale {
	position: absolute;
	-webkit-transform-origin: center bottom;
	    -ms-transform-origin: center bottom;
	        transform-origin: center bottom;
	-webkit-animation-name: scale_bottom;
	        animation-name: scale_bottom;
	-webkit-animation-duration: 3.5s;
	        animation-duration: 3.5s;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	will-change: transform;
}

/* 個別の動き */
.hero_ready .mv_anim_01 .mv_anim_item {
	-webkit-animation-duration: 5s;
	        animation-duration: 5s; -webkit-animation-delay: 0s; animation-delay: 0s;
}
.hero_ready .mv_anim_02 .mv_anim_item {
	-webkit-animation-duration: 3s;
	        animation-duration: 3s; -webkit-animation-delay: -1s; animation-delay: -1s;
}
.hero_ready .mv_anim_04 .mv_anim_item {
	-webkit-animation-duration: 4.5s;
	        animation-duration: 4.5s; -webkit-animation-delay: 3s; animation-delay: 3s;
}
.hero_ready .mv_anim_05 .mv_anim_item {
	-webkit-animation-duration: 3.5s;
	        animation-duration: 3.5s; -webkit-animation-delay: -3s; animation-delay: -3s;
}


/* ========== アニメーション停止 ========== */

/* ボタン */
#anim_toggle {
	background: url(/img/sites/character/btn-stop.png) no-repeat center center / contain;
	border: none;
	display: block;
	width: clamp(43.5px, 5.35vw, 107px);
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	position: absolute;
	top: clamp(
		calc(35px + (43.5px / 105 * 159) + 15px),
		calc(35px + (5.25vw / 105 * 159) + 2.148vw),
		calc(35px + (105px / 105 * 159) + 45px));
	right: clamp(40px, 3.3413vw, 75px);
	z-index: 9;
}
@media screen and (max-width: 740px) {
	#anim_toggle {
		right: 25px;
	}
}

.anim_toggle_sp {
	display: none;
	background: url(/img/sites/character/btn-stop.png) no-repeat center center / contain;
	border: none;
	width: clamp(37px, 9.73vw, 73px);
	height: auto;
	aspect-ratio: 1 / 1;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	position: absolute;
	bottom: clamp(-37px, -4.865vw, -18px);
	left: 2.5vw;
	z-index: 10;
	opacity: 0;
	-webkit-transform: translateY(200%);
	    -ms-transform: translateY(200%);
	        transform: translateY(200%);
}
.hero_ready .anim_toggle_sp {
	opacity: 1;
	-webkit-transform: translateY(0);
	    -ms-transform: translateY(0);
	        transform: translateY(0);
	pointer-events: auto;
	-webkit-transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
	transition: opacity 0.6s ease-out, -webkit-transform 0.6s ease-out;
	-o-transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out, -webkit-transform 0.6s ease-out;
	-webkit-transition-delay: 1.8s;
	     -o-transition-delay: 1.8s;
	        transition-delay: 1.8s;
}
body.anim_stop #anim_toggle,
body.anim_stop .anim_toggle_sp {
	background-image: url(/img/sites/character/btn-play.png);
}

@media screen and (max-width: 600px) {
	#anim_toggle { display: none; }
	.anim_toggle_sp { display: block; }
}

body.anim_stop #hero *,
body.anim_stop #hero *::before ,
body.anim_stop #hero *::after,
body.anim_stop .profile_img_area *,
body.anim_stop #main_body::after,
body.anim_stop #footer *,
body.anim_stop #footer *::before,
body.anim_stop #footer *::after,
body.anim_stop .top_contents_8 .char_fly {
	-webkit-animation: none !important;
	        animation: none !important;
	-webkit-transform: none !important;
	    -ms-transform: none !important;
	        transform: none !important;
	opacity: 1 !important;
}
body.anim_stop #hero #mv_video,
body.anim_stop #hero .mv_opening::after {
	display: none !important;
}
body.anim_stop .top_contents_3::after,
body.anim_stop #line_frame::before,
body.anim_stop #line_frame::after {
	-webkit-animation: none !important;
	        animation: none !important;
	background-position: center bottom;
}
body.anim_stop .top_contents_4 button,
body.anim_stop .top_contents_4 button::before {
	-webkit-animation: none !important;
	        animation: none !important;
}
body.anim_stop .top_contents_4 button:hover,
body.anim_stop .top_contents_4 button:focus {
	-webkit-transform: none;
	    -ms-transform: none;
	        transform: none;
}


/* ========== 2 スクロールエリア ========== */

.top_contents_2 {
	margin: 0 auto 120px;
}
.sprite_scroll {
	background-repeat: no-repeat;
	background-size: 100% auto;
}
#scroll1 {
	width: clamp(131px, 22.5vw, 450px);
	aspect-ratio: 450 / 648;
	margin: 0 auto clamp(50px, 4.5vw, 90px);
}
#scroll2 {
	width: clamp(133px, 22.75vw, 455px);
	aspect-ratio: 455 / 645;
	margin: 0 auto clamp(50px, 4.5vw, 90px);
}


/* ========== 3 キャラクター紹介 ========== */

.top_contents_3 {
	position: relative;
}
#container .top_contents_3 h2 {
	padding-bottom: clamp(
		calc(32.5px - clamp(13px, 1vw, 20px)),
		calc(2.5vw - clamp(13px, 1vw, 20px)),
		calc(50px - clamp(13px, 1vw, 20px)));
}
#container .top_contents_3 h2 img {
	width: clamp(248.5px, 25.1vw, 502px);
}
/* タイトル下の文章 */
.top_contents_3 .para {
	width: var(--content-width);
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}
.top_contents_3 .para img {
	vertical-align: bottom;
}
.top_contents_3 .para img.item1 {
	width: clamp(205.4px, 15.8vw, 316px);
	margin-right: clamp(10.4px, 0.8vw, 16px);
}
.top_contents_3 .para img.item2 {
	width: clamp(247px, 19vw, 380px);
}
.top_contents_3 .para img.item3 {
	width: clamp(330.2px, 25.4vw, 508px);
	margin-right: clamp(1.95px, 0.15vw, 3px);
}
.top_contents_3 .para img.item4 {
	width: clamp(278.2px, 21.4vw, 428px);
}
.top_contents_3 .para > span {
	display: block;
	margin: clamp(13px, 1vw, 20px) 0;
}

/* 紹介エリア */
#profile_slide_wrap {
	width: clamp(375px, 54vw, 1080px);
	max-width: 100%;
	margin: 0 auto 190px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: reverse;
	    -ms-flex-direction: column-reverse;
	        flex-direction: column-reverse;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
}

/* キャラ切替ボタン */
.profile_btn_area {
	width: clamp(0px, 7.3vw, 146px);
	display: block;
	position: absolute;
	top: clamp(0px, 4.75vw, 95px);
	left: 0;
	z-index: 1;
}
.profile_btn_area button {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: #fff;
	border: clamp(2px, .25vw, 5px) solid var(--color-dark-brown);
	border-radius: 100%;
	-webkit-box-shadow: inset clamp(-6px, -0.3vw, -2px) clamp(-6px, -0.3vw, -2px) 0 var(--color-room0);
	        box-shadow: inset clamp(-6px, -0.3vw, -2px) clamp(-6px, -0.3vw, -2px) 0 var(--color-room0);
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	outline: clamp(4px, .4vw, 8px) solid transparent;
	-webkit-tap-highlight-color: transparent;
	-webkit-transition: outline .3s ease-in-out, -webkit-box-shadow .3s;
	transition: outline .3s ease-in-out, -webkit-box-shadow .3s;
	-o-transition: outline .3s ease-in-out, box-shadow .3s;
	transition: outline .3s ease-in-out, box-shadow .3s;
	transition: outline .3s ease-in-out, box-shadow .3s, -webkit-box-shadow .3s;
}
.profile_btn_area button:hover,
.profile_btn_area button:focus {
	outline-color: rgb(0 204 255 / .25);
	-webkit-box-shadow: inset 0 0 0 var(--color-room0);
	        box-shadow: inset 0 0 0 var(--color-room0);
}
.profile_btn_area button img {
	max-width: 85%;
	height: auto;
	-webkit-transform: translate(0, 0);
	    -ms-transform: translate(0, 0);
	        transform: translate(0, 0);
	-webkit-transition: -webkit-transform .2s ease-in-out;
	transition: -webkit-transform .2s ease-in-out;
	-o-transition: transform .2s ease-in-out;
	transition: transform .2s ease-in-out;
	transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out;
}
.profile_btn_area button:hover img {
	-webkit-transform: translate(2px, 2px);
	    -ms-transform: translate(2px, 2px);
	        transform: translate(2px, 2px);
}
#prof_icchi {
	margin-bottom: clamp(0px, 1.25vw, 25px);
}
.prof_view_icchi button#prof_icchi,
.prof_view_kacchi button#prof_kacchi {
	background-color: #cfc2ba;
	-webkit-box-shadow: inset clamp(-6px, -0.3vw, -2px) clamp(-6px, -0.3vw, -2px) rgb(158 145 137 / 25%);
	        box-shadow: inset clamp(-6px, -0.3vw, -2px) clamp(-6px, -0.3vw, -2px) rgb(158 145 137 / 25%);
	pointer-events: none;
}
.prof_view_kacchi button#prof_kacchi {
	background-color: #c88241;
}
/* 切替 */
.prof_view_icchi .kacchi,
.prof_view_kacchi .icchi {
	display: none;
}
/* テキストボタン */
.profile_txt_area {
	width: 90%;
	margin: clamp(-40px, -2vw, 0px) auto 0;
	text-align: center;
	position: relative;
	z-index: 5;
}
.profile_txt_area > div {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: space-evenly;
	    -ms-flex-pack: space-evenly;
	        justify-content: space-evenly;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: clamp(11px, 0.75vw, 15px) 0;
}

.profile_txt_area button {
	background-color: #fff;
	border-width: clamp(4px, .3vw, 6px);
	border-style: solid;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border-radius: 33px;
	min-width: clamp(0px, 10.3vw, 206px);
	height: clamp(47.5px, 3.3vw, 66px);
	margin: 0;
	padding: 0 clamp(5px, .5vw, 10px);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-tap-highlight-color: transparent;
}
.profile_txt_area button img {
	width: auto;
	height: clamp(16px, 1.3vw, 26px);
}
.profile_txt_area .icchi button  { border-color: #e1d7c2; }
.prof_num_1 .profile_txt_area .icchi.btn1,
.prof_num_2 .profile_txt_area .icchi.btn2,
.prof_num_3 .profile_txt_area .icchi.btn3,
.prof_num_4 .profile_txt_area .icchi.btn4 {
	background-color: #f0ebe1;
	border-color: #d4c6ab;
}
.prof_num_1 .profile_txt_area .kacchi.btn1,
.prof_num_2 .profile_txt_area .kacchi.btn2,
.prof_num_3 .profile_txt_area .kacchi.btn3,
.prof_num_4 .profile_txt_area .kacchi.btn4 {
	border-color: #d47e30;
	background-color: #f0cea5;
}
.profile_txt_area .kacchi button { border-color: #e19c4a; }
/* 各イメージ */
.profile_img_area {
	width: clamp(0px, 35.2vw, 704px);
	max-width: 100%;
	height: auto;
	margin: clamp(-20px, -1vw, 0px) auto 0;
	aspect-ratio: 1 / 1;
	position: relative;
	z-index: 0;
}
.profile_img_area [id^="prof_img_"] {
	opacity: 0;
	visibility: hidden;
	width: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	position: absolute;
	inset: 0;
}
#prof_img_i_1 {
	background-image: url(/img/sites/character/profile/icchi-1-mypace.png); }
#prof_img_i_2 {
	background-image: url(/img/sites/character/profile/icchi-2-nonbiri.png); }
#prof_img_i_3 {
	background-image: url(/img/sites/character/profile/icchi-3-nihil.png); }
#prof_img_i_4 {
	background-image: url(/img/sites/character/profile/icchi-4-yashin.png); }
#prof_img_k_1 {
	background-image: url(/img/sites/character/profile/kacchi-1-suekko.png); }
#prof_img_k_2 {
	background-image: url(/img/sites/character/profile/kacchi-2-chokomaka.png); }
#prof_img_k_3 {
	background-image: url(/img/sites/character/profile/kacchi-3-namida.png); }
#prof_img_k_4 {
	background-image: url(/img/sites/character/profile/kacchi-4-jiyu.png); }

.prof_num_1 .profile_img_area [id$="_1"],
.prof_num_2 .profile_img_area [id$="_2"],
.prof_num_3 .profile_img_area [id$="_3"],
.prof_num_4 .profile_img_area [id$="_4"] {
	opacity: 1;
	visibility: visible;
	-webkit-animation: profile_bounce 0.4s ease-out;
	        animation: profile_bounce 0.4s ease-out;
	will-change: transform;
}

@-webkit-keyframes profile_bounce {
	0%   { -webkit-transform: translateY(0)     scale(1);
	               transform: translateY(0)     scale(1); }
	30%  { -webkit-transform: translateY(-50px) scale(0.99, 1.1);
	               transform: translateY(-50px) scale(0.99, 1.1); }
	70%  { -webkit-transform: translateY(2px)   scale(1.02, 0.98);
	               transform: translateY(2px)   scale(1.02, 0.98); }
	100% { -webkit-transform: translateY(0)     scale(1);
	               transform: translateY(0)     scale(1); }
}
@keyframes profile_bounce {
	0%   { -webkit-transform: translateY(0)     scale(1);
	               transform: translateY(0)     scale(1); }
	30%  { -webkit-transform: translateY(-50px) scale(0.99, 1.1);
	               transform: translateY(-50px) scale(0.99, 1.1); }
	70%  { -webkit-transform: translateY(2px)   scale(1.02, 0.98);
	               transform: translateY(2px)   scale(1.02, 0.98); }
	100% { -webkit-transform: translateY(0)     scale(1);
	               transform: translateY(0)     scale(1); }
}

.top_contents_3::after {
	content: '';
	display: block;
	width: clamp(138px, 18.2vw, 364px);
	height: auto;
	aspect-ratio: 364 / 356;
	background-image: url(/img/sites/character/pan.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	-webkit-animation: sprite_pan 6s steps(10, end) infinite;
	        animation: sprite_pan 6s steps(10, end) infinite;
	position: absolute;
	bottom: clamp(-530px, calc(-190px - 18vw), -352px);
	right: 0;
	z-index: 5;
	will-change: transform;
}
@-webkit-keyframes sprite_pan {
	0%   { background-position: 0 0; }
	25%  { background-position: 0 calc(clamp(-356px, calc(-18.2vw / 364 * 356), calc(-138px / 364 * 356)) * 10); }
	100% { background-position: 0 calc(clamp(-356px, calc(-18.2vw / 364 * 356), calc(-138px / 364 * 356)) * 10); }
}
@keyframes sprite_pan {
	0%   { background-position: 0 0; }
	25%  { background-position: 0 calc(clamp(-356px, calc(-18.2vw / 364 * 356), calc(-138px / 364 * 356)) * 10); }
	100% { background-position: 0 calc(clamp(-356px, calc(-18.2vw / 364 * 356), calc(-138px / 364 * 356)) * 10); }
}


/* ========== 4 おへや紹介 ========== */

.top_contents_4 {
/*	margin: 0 0 150px;*/
	margin: 0 0 50px;
}
.top_contents_4#rooms h2 img {
	width: clamp(127px, 13.05vw, 261px);
}
.top_contents_4#rooms h2 {
}
.top_contents_4 .box .img {
	position: relative;
	z-index: 1;
	-o-object-fit: contain;
	   object-fit: contain;
}
.top_contents_4 .box:not(.room0) .img {
	aspect-ratio: 4 / 3;
}
.box[class*="room"] {
	display: none;
	width: 100%;
	min-height: 100vh;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

/* おへや 選択 */
.box.room0 {
	background-color: var(--color-room0);
	position: relative;
	margin: 0;
	height: 100vh;
	min-height: clamp(500px, 55vw, 1100px);
	gap: clamp(0px, calc(3.55vw - 30px), calc(71px - 30px));
}
.top_contents_4 .box.room0 .img {
	margin-bottom: calc(60px + clamp(calc(127px / 261 * 82), calc(13.05vw / 261 * 82), calc(261px / 261 * 82)));
}
.box.room0 .img > div {
	position: relative;
}
.box.room0.room_opn {
	pointer-events: none;
}
.box.room0 img {
	width: clamp(300px, 45.6vw, 912px);
}
.room0::before,
.room0::after {
	content: '';
	display: block;
	width: 100%;
	position: absolute;
	z-index: 0;
}
.room0::before {
	background: url(/img/sites/character/bg-wave.png) repeat-x center bottom;
	height: 58px;
	-webkit-transform: rotate(180deg);
	    -ms-transform: rotate(180deg);
	        transform: rotate(180deg);
	top: 0;
}
.room0::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: auto;
	top: calc(50% + clamp(70px, 12vw, 220px));
	bottom: 0;
	background:
		url(/img/sites/character/bg-wave.png) repeat-x center bottom,
		url(/img/sites/character/room/bg-ground.png) no-repeat center top,
		linear-gradient(to top, var(--color-lawn) 1px, var(--color-lawn) 73%, transparent 73%, transparent 100%);
}

@media screen and (max-width: 2000px) {
	.room0::before {
		background-size: 100% auto;
	}
	.room0::after {
		width: 100%;
		background-image:
			url(/img/sites/character/bg-wave.png),
			url(/img/sites/character/room/bg-ground.png),
			linear-gradient(
				to top,
				var(--color-lawn) 1px,
				var(--color-lawn) calc(100% - clamp(41px, 11vw, 220px) * 0.8),
				transparent calc(100% - clamp(41px, 11vw, 220px) * 0.8)
			);
		background-size:
			100% auto,
			100% auto,
			100% 100%;
	}
}

@media screen and (max-width: 600px) {
}

.box.room0,
.box.room1.room_opn,
.box.room2.room_opn {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.box.room1.room_opn,
.box.room2.room_opn {
	position: fixed;
	inset: 0;
	z-index: 100;
}

/* おへやをひらくボタン */
button[id^="room_opn_"],
.top_contents_4 button {
	border: none;
	margin: 0;
	padding: 0;
	text-align: left;
	text-indent: -9999em;
	overflow: hidden;
	position: absolute;
	bottom: clamp(-20px, -3.7vw, 0px);
}
button[id^="room_opn_"] {
	background: url(/img/sites/character/room/btn1.png) no-repeat center center / contain;
	width: clamp(74px, 9.4vw, 188px);
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 100%;
	outline: 7px solid transparent;
	outline-offset: -1px;
	-webkit-transition: outline-color .3s ease-out;
	-o-transition: outline-color .3s ease-out;
	transition: outline-color .3s ease-out;
}
button#room_opn_icchi {
	left: calc(50% - clamp(157px, 26vw, 520px));
	bottom: 0px;
}
button#room_opn_icchi:hover {
	outline-color: #e1d7c2;
}
button#room_opn_kacchi {
	background-image: url(/img/sites/character/room/btn2.png);
	left: calc(50% + clamp(87px, 14.5vw, 290px));
	bottom: 0px;
}
button#room_opn_kacchi:hover {
	outline-color: #e19c4a;
}
@media screen and (max-width: 765px) {
	button#room_opn_icchi {
		bottom: -20px;
	}
	button#room_opn_kacchi {
		bottom: -20px;
	}
}

/* ひみつimageエリア */
.opn_box {
	position: absolute;
	display: none;
}
.opn_box img {
	width: clamp(158px, 15.95vw, 319px);
	height: auto;
}
.opn_box.opn {
	display: block;
}

/* ひみつopenボタン */
button.room_opn {
	background: url(/img/sites/character/room/btn-bg.png) no-repeat center center / contain;
	width: clamp(39px, 4.55vw, 91px);
	height: auto;
	aspect-ratio: 1 / 1;
	-webkit-transition: -webkit-transform .1s ease-in;
	transition: -webkit-transform .1s ease-in;
	-o-transition: transform .1s ease-in;
	transition: transform .1s ease-in;
	transition: transform .1s ease-in, -webkit-transform .1s ease-in;
}
button.room_opn::before {
	content: '';
	background: url(/img/sites/character/room/btn-icon-icchi.png) no-repeat center center / contain;
	width: clamp(23px, 2.75vw, 55px);
	height: auto;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: clamp(9px, 1.05vw, 21px);
	right: clamp(6px, 0.75vw, 15px);
	-webkit-transform-origin: center;
	    -ms-transform-origin: center;
	        transform-origin: center;
}
button.room_opn:hover{
	-webkit-transform: scale(1.05);
	    -ms-transform: scale(1.05);
	        transform: scale(1.05);
}
/* hoverでアニメーション開始 */
button.room_opn:hover::before{
	-webkit-animation: room_search .5s ease-in-out;
	        animation: room_search .5s ease-in-out;
	will-change: transform;
}
/* ひらくボタン円移動 */
@-webkit-keyframes room_search{
	0%   { -webkit-transform: rotate(0deg) translateX(0px) rotate(0deg);
	               transform: rotate(0deg) translateX(0px) rotate(0deg); }
	10%  { -webkit-transform: rotate(0deg) translateX(6px) rotate(0deg);
	               transform: rotate(0deg) translateX(6px) rotate(0deg); }
	70%  { -webkit-transform: rotate(350deg) translateX(6px) rotate(-350deg);
	               transform: rotate(350deg) translateX(6px) rotate(-350deg); }
	100% { -webkit-transform: rotate(360deg) translateX(0px) rotate(-360deg);
	               transform: rotate(360deg) translateX(0px) rotate(-360deg); }
}
@keyframes room_search{
	0%   { -webkit-transform: rotate(0deg) translateX(0px) rotate(0deg); transform: rotate(0deg) translateX(0px) rotate(0deg); }
	10%  { -webkit-transform: rotate(0deg) translateX(6px) rotate(0deg); transform: rotate(0deg) translateX(6px) rotate(0deg); }
	70%  { -webkit-transform: rotate(350deg) translateX(6px) rotate(-350deg); transform: rotate(350deg) translateX(6px) rotate(-350deg); }
	100% { -webkit-transform: rotate(360deg) translateX(0px) rotate(-360deg); transform: rotate(360deg) translateX(0px) rotate(-360deg); }
}
.room2 button.room_opn::before {
	background-image: url(/img/sites/character/room/btn-icon-kacchi.png);
}

/* ひみつ とじるボタン */
button.box_cls {
	background: url(/img/sites/character/room/btn-close-icchi.png) no-repeat center center / contain;
	width: clamp(26px, 2.4vw,48px);
	height: auto;
	aspect-ratio: 1 / 1;
	bottom: clamp(14px, 1.25vw, 25px);
	right: clamp(14px, 1.25vw, 25px);
	opacity: 1;
	-webkit-transition: opacity .2s ease-in-out;
	-o-transition: opacity .2s ease-in-out;
	transition: opacity .2s ease-in-out;
}
button.box_cls:hover {
	opacity: .75;
}
.room2 button.box_cls {
	background-image: url(/img/sites/character/room/btn-close-kacchi.png);
}

/* もどる */
button.room_cls {
	background: url(/img/sites/character/room/btn-prev.png) no-repeat center center / contain;
	width: clamp(63px, 7.4vw, 148px);
	height: auto;
	aspect-ratio: 1 / 1;
	bottom: 25px;
	left: 25px;
	z-index: 1;
}

/* 各おへや出し分け */
.top_contents_4 .box.room1 .img,
.top_contents_4 .box.room2 .img {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}
.top_contents_4 .box.room1 .img .room_img,
.top_contents_4 .box.room2 .img .room_img {
	width: clamp(375px, 58.8vw, 1176px);
}
/* 詳細 いっち */
.room1 { background-color: var(--color-room1); }
#room_icchi_1 {
	bottom: calc(50% + clamp(89px, 14vw, 280px));
	left: calc(50% - clamp(47px, 7.5vw, 150px));
}
#room_icchi_2 {
	bottom: calc(50% - clamp(73px, 11.5vw, 230px));
	left: calc(50% - clamp(95px, 15vw, 300px));
}
#room_icchi_3 {
	bottom: calc(50% - clamp(27px, 4.25vw, 85px));
	left: calc(50% - clamp(38px, 6vw, 120px));
}
#room_icchi_4 {
	bottom: calc(50% - clamp(41px, 6.5vw, 130px));
	left: calc(50% + clamp(114px, 18vw, 360px));
}
#room_icchi_1_opn {
	top: calc(50% - clamp(143px, 22.5vw, 450px));
	left: calc(50% - clamp(82px, 13vw, 260px));
}
#room_icchi_2_opn {
	bottom: calc(50% - clamp(105px, 16.5vw, 330px));
	left: calc(50% - clamp(130px, 20.5vw, 410px));
}
#room_icchi_3_opn {
	bottom: calc(50% - clamp(52px, 8.25vw, 165px));
	left: calc(50% - clamp(41px, 6.5vw, 130px));
}
#room_icchi_4_opn {
	bottom: calc(50% - clamp(63px, 10vw, 200px));
	left: calc(50% + clamp(70px, 11vw, 220px));
}
/* 詳細 かっち */
.room2 { background-color: var(--color-room2); }
#room_kacchi_1 {
	bottom: calc(50% + clamp(43px, 6.75vw, 135px));
	left: calc(50% - clamp(14px, 2.25vw, 45px));
}
#room_kacchi_2 {
	bottom: calc(50% - clamp(51px, 8vw, 160px));
	left: calc(50% - clamp(111px, 17.5vw, 350px));
}
#room_kacchi_3 {
	bottom: calc(50% - clamp(35px, 5.5vw, 110px));
	left: calc(50% + clamp(3px, 0.5vw, 10px));
}
#room_kacchi_1_opn { 
	bottom: calc(50% + clamp(9px, 1.5vw, 30px));
	left: calc(50% - clamp(35px, 5.5vw, 110px));
}
#room_kacchi_2_opn {
	bottom: calc(50% - clamp(78px, 12.25vw, 245px));
	left: calc(50% - clamp(147px, 23.1vw, 462px));
}
#room_kacchi_3_opn {
	bottom: calc(50% - clamp(49px, 7.75vw, 155px));
	left: calc(50% - clamp(31px, 5vw, 100px));
}


/* ========== 5 おしらせ ========== */

.top_contents_5 {
	padding-top: 100px;
	overflow: hidden;
}
.top_contents_5#news h2 {
	padding-bottom: 0;
}
.top_contents_5 h2 img {
	width: clamp(144.333px, 16.3vw, 326px);
}
#main_body {
	margin: 0;
	padding: clamp(100px, 10vw, 200px) 0 0;
	position: relative;
}

/* アクティブスライドに重ねるフレーム */
#main_body::before {
	content: '';
	display: block;
	width: clamp(368px, 36.95vw, 739px);
	height: auto;
	aspect-ratio: 739 / 584;
	background: url(/img/sites/character/news/frame-w.png) no-repeat right center / contain;
	position: absolute;
	top: clamp(-25px, -1.25vw, 0px);
	left: calc(50% + 2px);
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 10;
	pointer-events: none;
}

/* 映写機いっち */
#main_body::after {
	content: '';
	display: block;
	width: clamp(146px, 14.65vw, 293px);
	height: auto;
	aspect-ratio: 293 / 271;
	background-image: url(/img/sites/character/news/eishaki.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	-webkit-animation: sprite_play 1.8s steps(4) infinite;
	        animation: sprite_play 1.8s steps(4) infinite;
	will-change: transform;
	position: absolute;
	top: clamp(185px, 18.5vw, 370px);
	/* 左側の起点をフレーム（※右上装飾を省いた幅）に合わせる */
	right: calc(50% - (clamp(291px, 29.25vw, 585px) / 2 ) - clamp(136px, 13.75vw, 275px));
	z-index: 10;
}
@-webkit-keyframes sprite_play{
	from { background-position: 0 0; }
	to   { background-position: 0 calc(clamp(146px, 14.65vw, 293px) / 293 * -271 * 4); }
}
@keyframes sprite_play{
	from { background-position: 0 0; }
	to   { background-position: 0 calc(clamp(146px, 14.65vw, 293px) / 293 * -271 * 4); }
}

/* フレームが固定サイズになる画面幅：(max-width: 995px) */

/* 映写機いっちが見切れはじめる画面幅 */
@media screen and (max-width: 665px) {
	#main_body::after {
		right: 0;
	}
}

/* スライドショー：画像 */
.news_area {
	width: calc((clamp(220px, 22.1vw, 442px) * .52 * 7 + 14px * 6));
	max-width: 100%;
	margin: 0 auto;
}
.news_area .news_box {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	width: calc(clamp(220px, 22.1vw, 442px) * .52) !important;
	height: auto;
	aspect-ratio: 15 / 11;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
	-webkit-transform-origin: center center;
	    -ms-transform-origin: center center;
	        transform-origin: center center;
	margin: 0;
	padding: 0;
}
.news_area .news_box.swiper-slide-active {
	-webkit-transform: scale(calc(1 / .52));
	    -ms-transform: scale(calc(1 / .52));
	        transform: scale(calc(1 / .52));
	z-index: 1;
}
.news_box p {
	margin: 0;
	padding: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	height: clamp(161px, 16.15vw, 323px);
}
.news_box img{
	width: 100% !important;
	height: 100% !important;
	-o-object-fit: contain;
	   object-fit: contain;
	display: block;
}

/* スライドショー：テキスト */
.text_area {
	width: var(--content-width);
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
}
.text_area .text_box p {
	margin: 1.5em 20px;
	padding: 0;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
.text_area .text_box p a {
	color: currentColor;
}
.text_area .text_box p.__has_link a {
	display: inline-block;
	text-decoration: none;
	position: relative;
}
.text_area .text_box p.__has_link.__txt_only a::after {
	content: '';
	display: inline-block;
	height: 1em;
	width: auto;
	aspect-ratio: 32 / 30;
	background: url(/img/sites/character/arrow.png) no-repeat center center / contain;
	margin-left: .25em;
	vertical-align: text-top;
}
.text_area .text_box p.__has_link.__txt_only a::before {
	content: '';
	display: block;
	height: .75em;
	width: 110%;
	background: #fff;
	-webkit-transform: scaleX(0);
	    -ms-transform: scaleX(0);
	        transform: scaleX(0);
	-webkit-transition: -webkit-transform .3s ease-in-out;
	transition: -webkit-transform .3s ease-in-out;
	-o-transition: transform .3s ease-in-out;
	transition: transform .3s ease-in-out;
	transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
	position: absolute;
	z-index: -1;
	bottom: .1em;
	left: -5%;
}
.text_area .text_box p.__has_link.__txt_only a:hover::before,
.text_area .text_box p.__has_link.__txt_only a:focus::before {
	-webkit-transform: scaleX(1);
	    -ms-transform: scaleX(1);
	        transform: scaleX(1);
}

/* スライドコントローラ */
#main_body .control_box {
	width: clamp(140px, 14.15vw, 283px);
	display: grid;
	grid-template-columns: 101fr 80fr 102fr;
	grid-template-rows: auto;
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin: clamp(30px, 2.5vw, 50px) auto clamp(5px, .5vw, 10px);
}
.news_prev { grid-area: 1 / 1 / 2 / 2; }
.news_next { grid-area: 1 / 3 / 2 / 4; }

#main_body .control_box img {
	max-width: 100%;
	height: auto !important;
}


/* ========== 6 スクロールエリア ========== */

.top_contents_6 {
	height: calc(2030px * var(--view-scale));
	padding: 60px 0 calc(clamp(0px, 10vw, 200px) - 30px);
	padding: 60px 0px 0px;
	overflow: hidden;
}

.view_translate {
	position: relative;
}
.view_translate > div {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;

	top: calc(var(--top) * var(--view-scale) * 1px);
	left: calc(50% + var(--x) * var(--view-scale) * 1px);
	right: calc(50% + var(--xr, 0) * var(--view-scale) * 1px);
	width: calc(var(--w) * var(--view-scale) * 1px);
	rotate: calc(var(--rotate) * 1deg);

	position: absolute;
	will-change: transform;
	z-index: 0;

	-webkit-transition: .15s ease;
	-o-transition: .15s ease;
	transition: .15s ease;
}
.view_translate > div.__scroll_l { right: calc(50% + var(--xr) * var(--view-scale) * 1px); }
.view_translate > div.__scroll_r {  left: calc(50% + var(--x) * var(--view-scale) * 1px); }

#img_burger {
	--w: 367;
	aspect-ratio: 367 / 325;
	background-image: url(/img/sites/character/view/burger.png);
	--top: 0;
	--xr: 0;
}
#img_latte {
	--w: 331;
	aspect-ratio: 331 / 280;
	background-image: url(/img/sites/character/view/latte.png);
	--top: 0;
	--x: 190;
}
#img_face_i {
	--w: 190;
	aspect-ratio: 190 / 167;
	background-image: url(/img/sites/character/view/face-i.png);
	--top: 300;
	--x: 530;
}
#img_soba {
	--w: 262;
	aspect-ratio: 262 / 250;
	background-image: url(/img/sites/character/view/soba.png);
	--top: 450;
	--xr: 330;
}
#img_date {
	--w: 245;
	aspect-ratio: 245 / 208;
	background-image: url(/img/sites/character/view/date.png);
	--top: 1150;
	--xr: 480;
}
#img_icchi {
	--w: 491;
	aspect-ratio: 491 / 715;
	background-image: url(/img/sites/character/view/icchi.png);
	--top: 830;
	--xr: 0;
}
#img_kacchi {
	--w: 445;
	aspect-ratio: 445 / 499;
	background-image: url(/img/sites/character/view/kacchi.png);
	--top: 530;
	--x: 50;
}
#img_mochi {
	--w: 198;
	aspect-ratio: 198 / 265;
	background-image: url(/img/sites/character/view/mochi.png);
	--top: 1100;
	--x: 410;
}
#img_face_k {
	--w: 211;
	aspect-ratio: 211 / 177;
	background-image: url(/img/sites/character/view/face-k.png);
	--top: 1490;
	--xr: 440;
}
#img_nabe {
	--w: 355;
	aspect-ratio: 355 / 310;
	background-image: url(/img/sites/character/view/nabe.png);
	--top: 1700;
	--xr: 170;
}
#img_bao {
	--w: 312;
	aspect-ratio: 312 / 204;
	background-image: url(/img/sites/character/view/bao.png);
	--top: 1520;
	--x: 50;
}
#img_oden {
	--w: 429;
	aspect-ratio: 429 / 230;
	background-image: url(/img/sites/character/view/oden.png);
	--top: 1800;
	--x: 300;
}
/* 回転パーツ */
#img_deco01 {
	--w: 132;
	aspect-ratio: 132 / 127;
	background-image: url(/img/sites/character/view/img-1.png);
	--top: 90;
	--xr: 470;
}
#img_deco02 {
	--w: 124;
	aspect-ratio: 124 / 120;
	background-image: url(/img/sites/character/view/img-2.png);
	--top: 0;
	--x: 570;
}
#img_deco03 {
	--w: 115;
	aspect-ratio: 115 / 133;
	background-image: url(/img/sites/character/view/img-3.png);
	--top: 370;
	--xr: 150;
}
#img_deco04 {
	--w: 138;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-4.png);
	--top: 290;
	--x: 0;
}
#img_deco05 {
	--w: 100;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-5.png);
	--top: 600;
	--xr: 10;
}
#img_deco06 {
	--w: 127;
	aspect-ratio: 127 / 127;
	background-image: url(/img/sites/character/view/img-6.png);
	--top: 800;
	--xr: 540;
}
#img_deco07 {
	--w: 129;
	aspect-ratio: 129 / 145;
	background-image: url(/img/sites/character/view/img-7.png);
	--top: 850;
	--x: 530;
}
#img_deco08 {
	--w: 118;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-8.png);
	--top: 1100;
	--x: 170;
}
#img_deco09 {
	--w: 109;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-9.png);
	--top: 1300;
	--x: 60;
}
#img_deco10 {
	--w: 129;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-10.png);
	--top: 1620;
	--xr: 620;
}
#img_deco11 {
	--w: 90;
	aspect-ratio: 1 / 1;
	background-image: url(/img/sites/character/view/img-11.png);
	--top: 1600;
	--xr: 10;
}
#img_deco12 {
	--w: 144;
	aspect-ratio: 144 / 143;
	background-image: url(/img/sites/character/view/img-12.png);
	--top: 1800;
	--xr: 40;
}
#img_deco13 {
	--w: 187;
	aspect-ratio: 187 / 187;
	background-image: url(/img/sites/character/view/img-13.png);
	--top: 1550;
	--x: 500;
}

@media screen and (max-width: 375px) {
	:root { --view-scale: 0.25; }
}

@media screen and (min-width: 2000px) {
	:root { --view-scale: 1; }
}

/* ========== 7 ラインスタンプ ========== */

.top_contents_7 {
	z-index: 11;
	text-align: center;
	padding-top: 100px;
}

.top_contents_7 h2 img {
	width: clamp(247.048px, 27.1vw, 542px);
}

.top_contents_7 p {
	width: var(--content-width);
	max-width: 100%;
	margin: clamp(0px, .3vw, 6px) auto clamp(0px, 1.25vw, 25px);
	text-align: center;
}
.top_contents_7 p img {
	width: clamp(283px, 26.05vw, 521px);
}

/* フレームエリア */
.top_contents_7 .box {
	position: relative;
	width: clamp(300px, 24vw, 480px);
	aspect-ratio: 480 / 772;
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
}

.top_contents_7 .view_wrap {
	width:  clamp(247px, 19.75vw, 395px);
	aspect-ratio: 398 / 565;
	overflow: hidden;
	position: absolute;
	top: clamp(75px, 6vw, 120px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	    -ms-transform: translateX(-50%);
	        transform: translateX(-50%);
	z-index: 0;
	/* iOSの慣性スクロール対処 */
	touch-action: none;
}
.top_contents_7 .view {
	position: absolute;
	inset: 0;
}

.top_contents_7 .view img {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: crisp-edges;
}

/* 疑似スクロールバー */
.box .scrollbar {
	position: absolute;
	top: clamp(110px, 8.75vw, 175px);
	right: clamp(47px, 3.75vw, 75px);
	width: clamp(5px, .4vw, 8px);
	height: clamp(294px, 23.5vw, 470px);
	background: #e6e6e6 !important;
	border-radius: 8px;
}
.box .scrollbar_thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 80px;
	background: #ffd000 !important;
	border-radius: 8px;
	cursor: pointer;
}

/* リンクボタン */
.top_contents_7 .btn {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	background: var(--color-dark-brown);
	color: #fff;
	border-radius: 35px;
	display: inline-block;
	width: clamp(203px, 17.5vw, 350px);
	margin: 40px 0 0;
	padding: 0;
	position: relative;
}
.top_contents_7 .btn img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* フレーム */
#line_frame {
	position: relative;
	top: 0;
	left: 0;
	margin: 0 auto;
	width: 100%;
	aspect-ratio: 480 / 772;
	background: url(/img/sites/character/stamps/stamp_frame.png) no-repeat center center / contain;
	z-index: 5;
	pointer-events: none;
}

/* キャラクター */
#line_frame::before,
#line_frame::after {
	content: '';
	display: block;
	height: auto;
	background-size: 100% auto;
	background-repeat: no-repeat;
	position: absolute;
	will-change: transform;
	z-index: 10;
}
/* いっち */
#line_frame::before {
	width: clamp(95px, 13.9vw, 278px);
	aspect-ratio: 278 / 237;
	background-image: url(/img/sites/character/stamps/line-icchi.png);
	bottom: clamp(0px, .5vw, 10px);
	left: clamp(-230px, -11.5vw, 0px);
	-webkit-animation: line_sprite1 .85s steps(3) infinite;
	        animation: line_sprite1 .85s steps(3) infinite;
}
/* かっち */
#line_frame::after {
	width: clamp(81px, 11.8vw, 236px);
	aspect-ratio: 236 / 261;
	background-image: url(/img/sites/character/stamps/line-kacchi.png);
	top: clamp(0px, 3.5vw, 70px);
	right: clamp(-238px, -11.9vw, 0px);
	-webkit-animation: line_sprite2 .8s steps(3) infinite;
	        animation: line_sprite2 .8s steps(3) infinite;
}
@-webkit-keyframes line_sprite1 {
	from { background-position: 0 0; }
	to   { background-position: 0 calc((clamp(-278px, -13.9vw, -95px) / 278 * 237) * 3); }
}
@keyframes line_sprite1 {
	from { background-position: 0 0; }
	to   { background-position: 0 calc((clamp(-278px, -13.9vw, -95px) / 278 * 237) * 3); }
}
@-webkit-keyframes line_sprite2 {
	from { background-position: 0 0; }
	to   { background-position: 0 calc((clamp(-236px, -11.8vw, -81px) / 236 * 261 ) * 3); }
}
@keyframes line_sprite2 {
	from { background-position: 0 0; }
	to   { background-position: 0 calc((clamp(-236px, -11.8vw, -81px) / 236 * 261 ) * 3); }
}


/* ========== フッタ ========== */

/* ふらいんぐいっちかっち */
.top_contents_8 {
	padding: clamp(57px, 9vw, 181px) 0;
	overflow: hidden;
	margin-top: calc(clamp(-181px, -9vw, -57px) + clamp(50px, calc(100px - 7.4666vw), 72px));
	pointer-events: none;
	position: relative;
	z-index: 10;
}
.top_contents_8 .char_fly {
	margin: 0 auto;
	width: clamp(95px, 15.1vw, 302px);
	aspect-ratio: 302 / 238;
	background: url(/img/sites/character/footer-deco-jump.png) no-repeat center center / contain;
	-webkit-animation: rightToLeft 5s infinite ease-in-out;
	        animation: rightToLeft 5s infinite ease-in-out;
}
@-webkit-keyframes rightToLeft {
	0%   { -webkit-transform: translate(500%, 0) scale(1, 1);
	               transform: translate(500%, 0) scale(1, 1); }
	10%  { -webkit-transform: translate(500%, 0) scale(1, 1);
	               transform: translate(500%, 0) scale(1, 1); }

	42%  { -webkit-transform: translate(0%, 0%) scale(1.05, 0.95);
	               transform: translate(0%, 0%) scale(1.05, 0.95); }
	44%  { -webkit-transform: translate(0%, 5%) scale(1.18, 0.82);
	               transform: translate(0%, 5%) scale(1.18, 0.82); }
	47%  { -webkit-transform: translate(0%, 15%) scale(1.25, 0.75);
	               transform: translate(0%, 15%) scale(1.25, 0.75); }

	49%  { -webkit-transform: translate(2%, 0%) scale(1, 1);
	               transform: translate(2%, 0%) scale(1, 1); }
	52%  { -webkit-transform: translate(0%, -55%) scale(0.9, 1.05);
	               transform: translate(0%, -55%) scale(0.9, 1.05); }
	55%  { -webkit-transform: translate(0%, -25%) scale(0.95, 1.02);
	               transform: translate(0%, -25%) scale(0.95, 1.02); }

	57%  { -webkit-transform: translate(0%, 20%) scale(1.2, 0.75);
	               transform: translate(0%, 20%) scale(1.2, 0.75); }
	64%  { -webkit-transform: translate(0%, 0%) scale(1, 1);
	               transform: translate(0%, 0%) scale(1, 1); }
	63%  { -webkit-transform: translate(0%, 0%) scale(1, 1);
	               transform: translate(0%, 0%) scale(1, 1); }

	90% { -webkit-transform: translate(-600%, 0) scale(1, 1);
	               transform: translate(-600%, 0) scale(1, 1); }
	100% { -webkit-transform: translate(-600%, 0) scale(1, 1);
	               transform: translate(-600%, 0) scale(1, 1); }
}

@keyframes rightToLeft {
	0%  { -webkit-transform: translate(500%, 0) scale(1, 1);
	               transform: translate(500%, 0) scale(1, 1); }
	10%  { -webkit-transform: translate(500%, 0) scale(1, 1);
	               transform: translate(500%, 0) scale(1, 1); }

	42%  { -webkit-transform: translate(0%, 0%) scale(1.05, 0.95);
	               transform: translate(0%, 0%) scale(1.05, 0.95); }
	44%  { -webkit-transform: translate(0%, 5%) scale(1.18, 0.82);
	               transform: translate(0%, 5%) scale(1.18, 0.82); }
	47%  { -webkit-transform: translate(0%, 15%) scale(1.25, 0.75);
	               transform: translate(0%, 15%) scale(1.25, 0.75); }

	49%  { -webkit-transform: translate(2%, 0%) scale(1, 1);
	               transform: translate(2%, 0%) scale(1, 1); }
	52%  { -webkit-transform: translate(0%, -55%) scale(0.9, 1.05);
	               transform: translate(0%, -55%) scale(0.9, 1.05); }
	55%  { -webkit-transform: translate(0%, -25%) scale(0.95, 1.02);
	               transform: translate(0%, -25%) scale(0.95, 1.02); }

	57%  { -webkit-transform: translate(0%, 20%) scale(1.2, 0.75);
	               transform: translate(0%, 20%) scale(1.2, 0.75); }
	64%  { -webkit-transform: translate(0%, 0%) scale(1, 1);
	               transform: translate(0%, 0%) scale(1, 1); }
	63%  { -webkit-transform: translate(0%, 0%) scale(1, 1);
	               transform: translate(0%, 0%) scale(1, 1); }

	90%  { -webkit-transform: translate(-600%, 0) scale(1, 1);
	               transform: translate(-600%, 0) scale(1, 1); }
	100% { -webkit-transform: translate(-600%, 0) scale(1, 1);
	               transform: translate(-600%, 0) scale(1, 1); }
}

.author_box_wrap {
	margin-top: 0;
}

/* ページトップボタン */
#btn_pagetop a:hover img,
#btn_pagetop a:focus img {
	opacity: 1;
}
#btn_pagetop:hover img {
	-webkit-animation: rocket_shake 0.3s infinite;
	        animation: rocket_shake 0.3s infinite;
}
#btn_pagetop.launch img {
	-webkit-animation: rocket_launch 0.8s ease-out forwards;
	        animation: rocket_launch 0.8s ease-out forwards;
}
/* 揺れ */
@-webkit-keyframes rocket_shake {
	0%   { -webkit-transform: translate(0,0) rotate(0deg);
	               transform: translate(0,0) rotate(0deg); }
	25%  { -webkit-transform: translate(-2px,1px) rotate(-2deg);
	               transform: translate(-2px,1px) rotate(-2deg); }
	50%  { -webkit-transform: translate(2px,-1px) rotate(2deg);
	               transform: translate(2px,-1px) rotate(2deg); }
	75%  { -webkit-transform: translate(-1px,1px) rotate(-1deg);
	               transform: translate(-1px,1px) rotate(-1deg); }
	100% { -webkit-transform: translate(0,0) rotate(0deg);
	               transform: translate(0,0) rotate(0deg); }
}
@keyframes rocket_shake {
	0%   { -webkit-transform: translate(0,0) rotate(0deg);
	               transform: translate(0,0) rotate(0deg); }
	25%  { -webkit-transform: translate(-2px,1px) rotate(-2deg);
	               transform: translate(-2px,1px) rotate(-2deg); }
	50%  { -webkit-transform: translate(2px,-1px) rotate(2deg);
	               transform: translate(2px,-1px) rotate(2deg); }
	75%  { -webkit-transform: translate(-1px,1px) rotate(-1deg);
	               transform: translate(-1px,1px) rotate(-1deg); }
	100% { -webkit-transform: translate(0,0) rotate(0deg);
	               transform: translate(0,0) rotate(0deg); }
}
/* 発射 */
@-webkit-keyframes rocket_launch {
	0%   { -webkit-transform: translateY(0) scale(1);
	               transform: translateY(0) scale(1);
	                 opacity: 1; }
	40%  { -webkit-transform: translateY(-120px) scale(1.05);
	               transform: translateY(-120px) scale(1.05); }
	100% { -webkit-transform: translateY(-120vh) scale(0.8);
	               transform: translateY(-120vh) scale(0.8);
	                 opacity: 0; }
}
@keyframes rocket_launch {
	0%   { -webkit-transform: translateY(0) scale(1);
	               transform: translateY(0) scale(1);
	                 opacity: 1; }
	40%  { -webkit-transform: translateY(-120px) scale(1.05);
	               transform: translateY(-120px) scale(1.05); }
	100% { -webkit-transform: translateY(-120vh) scale(0.8);
	               transform: translateY(-120vh) scale(0.8);
	                 opacity: 0; }
}

/* 雲アニメーション */
.author_box_wrap::before,
.author_box_wrap::after {
	position: absolute;
	-webkit-animation-name: float_y;
	        animation-name: float_y;
	-webkit-animation-timing-function: ease-in-out;
	        animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	        animation-iteration-count: infinite;
	will-change: transform;
}
.author_box_wrap::before {
	-webkit-animation-duration: 5s;
	        animation-duration: 5s; -webkit-animation-delay: 0s; animation-delay: 0s;
}
.author_box_wrap::after {
	-webkit-animation-duration: 4s;
	        animation-duration: 4s; -webkit-animation-delay: -1s; animation-delay: -1s;
}


/* ========== 未使用 ========== */

/* バナー広告 */

/* 新着情報 */


/* ========== 背景色変更 ========== */

/* 共通 */
.color_change h1.logo {
	background-color: #fff !important;
	border-radius: 3px;
	outline: 16px solid #fff;
	outline-offset: -1px;
}
.color_change #anim_toggle {
	border-radius: 50%;
	outline: 5px solid #fff;
}
.color_change .top_contents_3 .para,
.color_change .top_contents_3 .para *,
.color_change .profile_btn_area button,
.color_change .top_contents_7 p,
.color_change .top_contents_7 p img {
	background-color: #fff !important;
}
.color_change .profile_txt_area button img,
.color_change .top_contents_4 h2 img,
.color_change .top_contents_5 h2 img,
.color_change .top_contents_7 h2 img,
.color_change .text_area .text_box p:last-child a::after {
	-webkit-filter: brightness(8);
	        filter: brightness(8);
}
.color_change .room0::before,
.color_change .room0::after {
	display: none;
}
.color_change .link_sns,
.color_change .mv_visual,
.color_change .mv_graphic,
.color_change #line_frame,
.color_change .mv_animation .mv_float,
.color_change .mv_animation .mv_float * {
	background-color: transparent !important;
}
.color_change .top_contents_7 .btn {
	background: none;
	border: 1px solid;
}

/* ==================================================
PC ここまで
================================================== */


/* ==================================================
スマートフォン
================================================== */
@media screen and (max-width: 1100px) {

	:root {
		/* プレーンテキストのサイズ調整 */
		--txt-sp-scale: 0.65;
	}

	/* ========== 1 メイングラフィック ========== */


	/* ========== 2 スクロールエリア ========== */


	/* ========== 3 キャラクター紹介 ========== */

	.top_contents_3 {
		padding-bottom: 25vh;
	}

	/* タイトル下の文章 */
	.top_contents_3 .para img[class*="item"] {
		display: block;
		margin: 0 auto;
		max-width: 95%;
	}
	.top_contents_3 .para img.item1 {
		width: clamp(169px, 45.067vw, 205.4px);
	}
	.top_contents_3 .para img.item2 {
		width: clamp(202px, 53.867vw, 247px);
		margin-bottom: 41.6px;
	}
	.top_contents_3 .para img.item3 {
		width: clamp(250.5px, 66.8vw, 330.2px);
		margin-bottom: 15.6px;
	}
	.top_contents_3 .para img.item4 {
		width: clamp(214px, 57.067vw, 278.2px);
	}

	/* 紹介エリア */
	#profile_slide_wrap {
		display: grid;
		grid-template-columns: 20% 80%;
		grid-template-rows: auto auto;
		grid-column-gap: 0px;
		grid-row-gap: 0px;
		margin-bottom: 25vh;
	}

	/* キャラ切替ボタン */
	.profile_btn_area {
		grid-area: 1 / 1 / 2 / 2;
		width: 100%;
		height: 100%;
		margin-left: 2vw;
		margin-right: -2vw;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		-webkit-box-align: end;
		    -ms-flex-align: end;
		        align-items: end;
		position: static;
	}
	.profile_btn_area button {
		border-width: clamp(2px, 0.4545vw, 5px);
		max-width: 100%;
		padding: 1vw;
	}
	#prof_icchi {
		margin-bottom: 4vw;
	}
	.profile_btn_area button img {
		max-width: 100%;
	}
	/* テキストボタン */
	.profile_txt_area {
		grid-area: 2 / 1 / 3 / 3;
		width: 100%;
		max-width: 740px;
		margin-top: 0;
	}
	.profile_txt_area button {
		width: 40%;
		min-width: auto;
		max-width: 250px;
		padding: 0 5px;
		border-width: clamp(4px, 0.5455vw, 6px);
	}
	@media screen and (max-width: 780px) {
		.profile_txt_area > div {
			margin: 0px 20px;
		}
		.profile_txt_area button {
			width: 46%;
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;
		}
	}

	/* 各イメージ */
	.profile_img_area {
		grid-area: 1 / 2 / 2 / 3;
		width: 100%;
		margin-left: 2vw;
		margin-right: -2vw;
		-webkit-box-sizing: border-box;
		        box-sizing: border-box;
		-webkit-transform: translateX(-5vw);
		    -ms-transform: translateX(-5vw);
		        transform: translateX(-5vw);
	}

	.top_contents_3::after {
		position: static;
		margin: 0 auto;
	}


	/* ========== 4 おへや紹介 ========== */

	.top_contents_4#rooms h2 {
		position: absolute;
		top: 25%;
		transform: translateY(-50%);
	}
	.top_contents_4 .box.room0 .img {
		margin-top: calc(60px + clamp(calc(127px / 261 * 82), calc(13.05vw / 261 * 82), calc(261px / 261 * 82)));
	}

	.top_contents_4 .box.room1 .img .room_img,
	.top_contents_4 .box.room2 .img .room_img {
		width: clamp(375px, 100%, 645px);
	}

	/* いっち */
	#room_icchi_1 {
		bottom: calc(50% + clamp(88px, 23.72vw, 153px));
		left: calc(50% - clamp(47px, 12.71vw, 82px));
	}
	#room_icchi_2 {
		bottom: calc(50% - clamp(73px, 19.53vw, 126px));
		left: calc(50% - clamp(95px, 25.43vw, 164px));
	}
	#room_icchi_3 {
		bottom: calc(50% - clamp(27px, 7.28vw, 47px));
		left: calc(50% - clamp(38px, 10.23vw, 66px));
	}
	#room_icchi_4 {
		bottom: calc(50% - clamp(41px, 11.02vw, 71px));
		left: calc(50% + clamp(114px, 30.54vw, 197px));
	}

	#room_icchi_1_opn {
		top: calc(50% - clamp(143px, 38.29vw, 247px));
		left: calc(50% - clamp(82px, 22.02vw, 142px));
	}
	#room_icchi_2_opn {
		bottom: calc(50% - clamp(105px, 28.06vw, 181px));
		left: calc(50% - clamp(130px, 34.88vw, 225px));
	}
	#room_icchi_3_opn {
		bottom: calc(50% - clamp(52px, 13.95vw, 90px));
		left: calc(50% - clamp(41px, 11.02vw, 71px));
	}
	#room_icchi_4_opn {
		bottom: calc(50% - clamp(63px, 17.05vw, 110px));
		left: calc(50% + clamp(70px, 18.76vw, 121px));
	}

	@media screen and (max-width: 560px) {
		#room_icchi_1_opn {
			top: -15vw;
			left: calc(50% - 30vw);
		}
		#room_icchi_2_opn {
			left: 3vw;
			bottom: -10vw;
		}
		#room_icchi_3_opn {
			bottom: calc(50% - 110px);
			left: calc(50% - 20vw);
		}
		#room_icchi_4_opn {
			left: auto;
			right: 0;
		}
	}

	/* かっち */
	#room_kacchi_1 {
		bottom: calc(50% + clamp(43px, 11.55vw, 74px));
		left: calc(50% - clamp(14px, 3.88vw, 25px));
	}
	#room_kacchi_2 {
		bottom: calc(50% - clamp(51px, 13.64vw, 88px));
		left: calc(50% - clamp(111px, 29.77vw, 192px));
	}
	#room_kacchi_3 {
		bottom: calc(50% - clamp(35px, 9.3vw, 60px));
		left: calc(50% + clamp(3px, 0.78vw, 5px));
	}

	#room_kacchi_1_opn {
		bottom: calc(50% + clamp(9px, 2.48vw, 16px));
		left: calc(50% - clamp(35px, 9.3vw, 60px));
	}
	#room_kacchi_2_opn {
		bottom: calc(50% - clamp(78px, 20.78vw, 134px));
		left: calc(50% - clamp(147px, 39.22vw, 253px));
	}
	#room_kacchi_3_opn {
		bottom: calc(50% - clamp(49px, 13.18vw, 85px));
		left: calc(50% - clamp(31px, 8.37vw, 54px));
	}

	@media screen and (max-width: 600px) {
		#room_kacchi_3_opn {
			bottom: 10vw;
		}
	}


	/* ========== 5 おしらせ ========== */


	/* ========== 6 スクロールエリア ========== */


	/* ========== 7 ラインスタンプ ========== */

	#container .top_contents_7 h2 img {
		width: calc(542px * var(--txt-sp-scale));
	}
	@media screen and (max-width: 960px) {
		#container .top_contents_7 h2 img {
			width: auto;
			height: 40px;
		}
	}


	.top_contents_7 p img {
		width: calc(521px * var(--txt-sp-scale));
		max-width: 100%;
	}
	.text_area .text_box p {
		font-size: calc(2rem * var(--txt-sp-scale));
	}

	@media screen and (max-width: 930px) {

		.top_contents_7 p {
			margin-bottom: 7.2vw;
		}
		/* いっち */
		#line_frame::before {
			bottom: 0;
			left: 0;
			-webkit-transform: translate(-60%, 30%);
			    -ms-transform: translate(-60%, 30%);
			        transform: translate(-60%, 30%);
		}
		/* かっち */
		#line_frame::after {
			top: 0;
			right: 0;
			-webkit-transform: translate(50%, -10%);
			    -ms-transform: translate(50%, -10%);
			        transform: translate(50%, -10%);
		}

	}

	@media screen and (max-width: 415px) {
		#line_frame::before {
			bottom: -40px;
			left: calc(50% - 49vw);
			-webkit-transform: none;
			    -ms-transform: none;
			        transform: none;
		}
	}
	@media screen and (max-width: 400px) {
		#line_frame::after {
			top: -25px;
			right: calc(50% - 48vw);
			-webkit-transform: none;
			    -ms-transform: none;
			        transform: none;
		}
	}

	/* ========== フッタ ========== */


	/* ========== アニメーション停止 ========== */

	/* ボタン */
	#anim_toggle {
		/* width: clamp(25px, 10vw, 80px); */
		/* top: clamp(calc((25px / 105 * 159) + 30px), calc((10vw / 105 * 159) + 30px), calc((80px / 105 * 159) + 30px)); */
		/* right: 20px; */
	}

}
/* ==================================================
スマートフォン ここまで
================================================== */