/* --- Reset & Global --- */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	overflow-y: scroll;
	width: 100%;
	scroll-behavior: smooth;
}
body {
	font-family: "M PLUS 1p", "Helvetica Neue", Arial, sans-serif;
	color: #5a4a42;
	background-color: #fdfbe8;
	overflow-x: hidden;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.container {
	width: 100%;
	margin: 0 auto;
	position: relative;
}

.page-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: linear-gradient(#eee 1px, transparent 1px), linear-gradient(90deg, #eee 1px, transparent 1px);
	background-size: 20px 20px;
	opacity: 0.6;
}

button {
	cursor: pointer;
	border: none;
	font-weight: bold;
	border-radius: 50px;
	transition: opacity 0.3s;
	white-space: nowrap;
}
button:hover {
	opacity: 0.8;
}
.btn-yellow {
	background-color: #ffcc00;
	color: #fff;
	padding: 10px 4vw;
	box-shadow: 0 4px 0 #e6b800;
}
.btn-gray {
	background-color: #ddd;
	color: #888;
	padding: 10px 4vw;
}
/* --- Header --- */

#header-section {
	padding: 40px 0;
	text-align: center;
}
.top-banner-placeholder {
	background: #333;
	background: url(images/head_bg.webp);
	background-image: image-set(url(images/head_bg.webp) 1x, url(images/2x/head_bg@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/head_bg.webp) 1x, url(images/2x/head_bg@2x.webp) 2x);
	background-size: contain;
	background-repeat: repeat-x;
	color: #fff;
	height: 105px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -4px;
	margin-bottom: 70px;
	width: 100%;
	border-radius: 0px;
}
.top-banner-placeholder .head {
	display: flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 100%;
	margin: 0 auto;
	position: relative;
	gap: 35px;
}
.top-banner-placeholder .luf {
	position: static;
	width: 99px;
	margin: 0;
	padding-top: 7px;
	flex-shrink: 0;
}
.top-banner-placeholder .luf img {
	width: 100%;
	display: block;
}
.top-banner-placeholder h1 {
	position: static;
	margin: 0;
	flex-shrink: 0;
}
.top-banner-placeholder h1 img {
	width: 301px;
}
.top-banner-placeholder .btnlist {
	position: static;
	margin: 0;
	width: 77px;
	flex-shrink: 0;
}
.top-banner-placeholder .btnlist img {
	width: 100%;
	display: block;
}


/* ▼▼▼ Swiper用のスタイル調整 ▼▼▼ */

/* --- Swiperコンテナ（スライダー本体） --- */

.banner-swiper {
	width: 100%;
	height: 440px !important;
	overflow: visible !important;
	padding: 0;
	position: relative;
	z-index: 5;
}

.swiper-wrapper {
	height: 100% !important;
	align-items: flex-start;
}

.swiper-slide {
	width: 700px;
	height: 440px !important;
	will-change: transform;
	transition: transform 0.3s, opacity 0.3s;
	transform: scale(0.9);
	opacity: 0.6;
	z-index: 1;
}
.swiper-slide-active {
	transform: scale(1);
	opacity: 1;
	z-index: 2;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.slide-content {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	background: #5f473a;
	border-radius: 10px;
	overflow: hidden;
}
.slide-img {
	width: 440px;
	height: 440px;
	background: #eee;
	position: relative;
}
.slide-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.slide-text {
	font-family: "fot-udkakugo-large-pr6n", sans-serif;
	padding: 30px;
	width: 260px;
	height: 380px;
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.slide-text h3 {
	font-weight: 700;
	font-style: normal;
	font-size: clamp(1rem, 2vw, 1.4rem);
	margin-bottom: 10px;
	color: #fff;
	padding-bottom: 5px;
	display: inline-block;
}
.slide-text p {
	font-weight: 600;
	font-size: 0.9rem;
	line-height: 1.5;
	color: #fff;
}
.btndetail {
	position: relative;
	width: 211px;
	margin-top: 40px;
}
.btndetail img {
	width: 100%;
}



.swiper-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 100%;
	height: 60px;
	margin-top: 20px;
	position: relative;
	z-index: 10;
}
/* --- オリジナルボタン --- */

.custom-prev, .custom-next {
	margin: 0 25px !important;
	width: 40px;
	height: 40px;
	cursor: pointer;
	flex-grow: 0 !important;
	flex-shrink: 0 !important;
	transition: transform 0.2s;
	display: block;
	position: static;
}
.custom-prev img, .custom-next img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.custom-prev:hover, .custom-next:hover {
	transform: scale(1.1);
	opacity: 0.8;
}
/* --- ページネーションの強力修正 --- */


.swiper-controls .swiper-pagination, .swiper-controls .swiper-pagination-bullets, .swiper-controls .swiper-pagination-horizontal {
	width: auto !important;
	min-width: 0 !important;
	flex-grow: 0 !important;
	flex-basis: auto !important;
	display: inline-flex !important;
	position: static !important;
	transform: none !important;
	margin: 0 !important;
	gap: 18px;
}

.swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: none;
	border: 1px solid #5f473a;
	opacity: 1;
	display: block;
	margin: 0 !important;
}
.swiper-pagination-bullet-active {
	background: #5f473a;
}
/* ▲▲▲ Swiper調整ここまで ▲▲▲ */



#sec02 {
	width: 100%;
	height: 100%;
	background: url(images/sec02_bg.webp);
	background-image: image-set(url(images/sec02_bg.webp) 1x, url(images/2x/sec02_bg@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec02_bg.webp) 1x, url(images/2x/sec02_bg@2x.webp) 2x);
	background-size: contain;
	background-repeat: repeat-x;
}

#sec02 .txt {
	width: 744px;
	margin: 30px auto;
	padding: 0;
}





/* --- Character Section --- */

#sec03 {
	width: 100%;
	margin: 0px 0;
	padding: 0;
	background: #000;
	position: relative;
}
#sec03 .full-video-wrapper {
	width: 100%;
	height: 50vw;
	max-height: 80vh;
	overflow: hidden;
	position: relative;
}
#sec03 .bg-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#sec03 .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(images/2x/sec03_dot@2x.webp);
	background-size: cover;
    background-repeat: repeat;
    z-index: 2; 
    pointer-events: none;
	opacity: 0.5;
}


/* --- 動画コントロールボタン（常に再生ボタン画像） --- */
#sec03 .video-ctrl-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    
    width: 214px;
    height: 216px;
    
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
    
    /* 再生ボタンの画像を設定 */
    background-image: url(images/sec03_btnplay.webp);
	background-image: image-set(url(images/sec03_btnplay.webp) 1x, url(images/2x/sec03_btnplay@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec03_btnplay.webp) 1x, url(images/2x/sec03_btnplay@2x.webp) 2x);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#sec03 .video-ctrl-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

#sec03 .video-ctrl-btn::after {
    display: none !important;
}

#sec03 .videotxt {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    
    width: 994px; 
    height: 82px;

}

/* --- YouTubeポップアップモーダル --- */
.video-modal {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.8); 
    align-items: center;
    justify-content: center;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 960px; 
    background: #000;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* 閉じるボタン（×） */
.close-video-modal {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}
.close-video-modal:hover {
    color: #ffcc00;
}

.youtube-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}
.youtube-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* --- Collab Grid Section --- */

#sec04 {
	padding: 40px 0 160px;
	text-align: center;
	margin: 0 auto;
	width: 100%;
	/*
	background: url(images/sec04_bg.webp);
	background-image: image-set(url(images/sec04_bg.webp) 1x, url(images/2x/sec04_bg@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec04_bg.webp) 1x, url(images/2x/sec04_bg@2x.webp) 2x);
	background-size: 1%;
	background-repeat: repeat;
	*/
	
	background-color: #fdfaf1;
	background-image:
	  linear-gradient(rgba(183, 171, 154, 0.5) 1px, transparent 1px),
	  linear-gradient(90deg, rgba(183, 171, 154, 0.5) 1px, transparent 1px);
	background-size: 30px 30px;
	background-repeat: repeat;
}
#sec04 .containery {
	width: 1000px;
}

#sec04 .section-title01 {
	display: inline-block;
	padding: 30px 120px;
	border-radius: 5px;
	margin-bottom: 30px;
	font-weight: bold;
}
#sec04 .collab-grid_m {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	width: 100%;
	flex-wrap: initial;
	justify-content: initial;
}
#sec04 .collab-grid_m .collab {
	width: 100%;
	flex: initial;
	max-width: none;
	padding-bottom: 20px;
	overflow: hidden;
}
#sec04 .collab-grid_m .collab-held {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
}

#sec04 .collab-grid_m .collab-box {
	background: #f1e0b8;
	border-bottom: 15px solid #ebc84a;
}
#sec04 .collab-grid_m .collab-img {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#sec04 .collab-grid_m .collab-body {
	font-family: "fot-udkakugo-large-pr6n", sans-serif;
	padding: 15px 15px;
}
#sec04 .collab-grid_m .collab-body h3 {
	font-weight: 700;
	font-style: normal;
	font-size: 1.5em;
}
#sec04 .collab-grid_m .collab-body p {
	font-weight: 100;
	font-style: normal;
	font-size: 1.0em;
}
#sec04 .collab-grid_m .collab-btn {
	width: 80%;
	padding: 15px;
}



#sec04 .section-title02 {
	display: inline-block;
	padding: 30px 120px;
	border-radius: 5px;
	margin-top: 30px;
	margin-bottom: 30px;
	font-weight: bold;
}
#sec04 .collab-grid_s {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
	flex-wrap: initial;
	justify-content: initial;
}
#sec04 .collab-grid_s .collab {
	width: 100%;
	flex: initial;
	max-width: none;
	padding-bottom: 20px;
	overflow: hidden;
}
#sec04 .collab-grid_s .collab-held {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 15px;
}

#sec04 .collab-grid_s .collab-box {
	background: #f1e0b8;
	border-bottom: 15px solid #ebc84a;
}
#sec04 .collab-grid_s .collab-img {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
#sec04 .collab-grid_s .collab-body {
	font-family: "fot-udkakugo-large-pr6n", sans-serif;
	padding: 15px 15px;
}
#sec04 .collab-grid_s .collab-body h3 {
	font-weight: 700;
	font-style: normal;
	font-size: 1.0em;
}
#sec04 .collab-grid_s .collab-body p {
	font-weight: 100;
	font-style: normal;
	font-size: 1.0em;
}
#sec04 .collab-grid_s .collab-btn {
	width: 90%;
	padding: 15px;
}

#sec04 .collab a:hover {
    opacity: 1 !important;
    filter: none !important; /* もし他のフィルターがかかっていた場合用 */
}
#sec04 .collab a:hover .collab-btn {
    opacity: 0.7;
    transition: opacity 0.3s;
}
#sec04 .collab .collab-img img {
    transition: opacity 0.3s, transform 0.3s;
}

/* マウスが乗った時の反応 */
#sec04 .collab a:hover .collab-img img {
    opacity: 0.7; 
}


        .invisible-pc {
            display: none !important;
        }
        .invisible-sp {
            display: block !important;
        }


/* --- Mid Banner --- */

#sec05head {
    position: relative;
	margin-top: -120px;
    width: 100%;
    height: auto; 
    margin-bottom: 0;
    padding: 0;
	z-index: 5;
}
#sec05head .full-base {
    position: absolute;
    /* 常に垂直方向の中央に配置 */
    top: 50%;
    left: 0;
    transform: translateY(-54.5%);
    
    width: 100%;
    
    height: 23.7vw; 
    
    background: #ebc84a;
    z-index: 1;
}
#sec05head .full-width-banner {
    position: relative;
    width: 80%;
    height: auto;
    margin: 0 auto;
    z-index: 2;
}
#sec05head .full-width-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Info Section --- */

#sec05 {
    position: relative;
    z-index: 4;
	margin-top: -7.3vw;
	padding: 0px 0 0px 0;
	text-align: center;
	width: 100%;
	/*
	background: url(images/sec05_bg02.webp);
	background-image: image-set(url(images/sec05_bg02.webp) 1x, url(images/2x/sec05_bg02@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec05_bg02.webp) 1x, url(images/2x/sec05_bg02@2x.webp) 2x);
	background-size: 1%;
	background-repeat: repeat;
	*/
	
	background-color: #ffeab8;
	background-image:
	  radial-gradient(#fff3d7 20%, transparent 20%),
	  radial-gradient(#fff3d7 20%, transparent 20%);
	background-position:
	  0 0,
	  10px 10px;
	background-size: 20px 20px;
	background-repeat: repeat;
}
#sec05 .container {
	padding-top: 50px;
	width: 1012px;
	background: url(images/sec05_bg01.webp);
	background-image: image-set(url(images/sec05_bg01.webp) 1x, url(images/2x/sec05_bg01@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec05_bg01.webp) 1x, url(images/2x/sec05_bg01@2x.webp) 2x);
	background-size: contain;
	background-repeat: repeat-y;
}
#sec05 .section-title01 {
	display: inline-block;
	padding: 100px 150px 30px;
	border-radius: 5px;
	margin-bottom: 30px;
	font-weight: bold;
}
#sec05 .info-box {
	background: url(images/sec05_txtbox.webp);
	background-image: image-set(url(images/sec05_txtbox.webp) 1x, url(images/2x/sec05_txtbox@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec05_txtbox.webp) 1x, url(images/2x/sec05_txtbox@2x.webp) 2x);
	background-size: cover;
	padding: 5%;
	margin-bottom: 50px;
	width: 930px;
	height: 480px;
}
#sec05 .info-content {
	display: inline-block;
	padding: 15px 20px;
	border-radius: 20px;
	margin-bottom: 20px;
}
#sec05 .info-content p.txt {
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 450;
	color: #5f473a;
	font-size: 1.3em;
	line-height: 1.9em;
	padding-top: 10px;
}
#sec05 .info-content p .bsto {
	font-weight: 900;
}
#sec05 .info-content .castmd {
	width: 90px; 
	height: 34px;
	background: #5f473a;
	margin-top: 70px;
	padding: 0px 15px;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 300;
	color: #fff;
	font-size: 1.2em;
	line-height: 1.9em;
}
#sec05 .info-content .casttxt {
	margin-top: 20px;
	padding: 0px 15px;
	font-family: 'M PLUS 1p', sans-serif;
	font-weight: 800;
	color: #5f473a;
	font-size: 1.4em;
	line-height: 1.9em;
}

#sec05 .toofficial {
	padding-top: 0px;
	width: 283px;
}

#sec05 .section-title02 {
	display: inline-block;
	padding: 70px 150px 30px;
	border-radius: 5px;
	margin-bottom: 30px;
	font-weight: bold;
}



#sec05 .app-showcase {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3.5vw;
	max-width: 712px;
	margin: 0 auto 0px auto;
	padding-bottom: 50px;
}
#sec05 .phone-mockup {
	width: 100%;
	max-width: none;
	margin: 0 auto;
}
#sec05 .screen {
	height: 610px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0px;
}
/* --- Footer --- */

#footer-section {
	position: relative;
	background: #ebc84a;
	padding: 50px 0 0 0;
	text-align: center;
	color: #fff;
}
#footer-section .footer-logo {
	width: 322px;
}
#footer-section .share {
	width: 322px;
	margin: 50px auto 30px auto;
}
#footer-section .qr-areabg {
	background: url(images/sec06_bg.webp);
	background-image: image-set(url(images/sec06_bg.webp) 1x, url(images/2x/sec06_bg@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec06_bg.webp) 1x, url(images/2x/sec06_bg@2x.webp) 2x);
	background-size: contain;
	background-repeat: repeat-x;
	padding-bottom: 60px;
}
#footer-section .qr-area {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin: 30px auto;
	flex-wrap: wrap;
	background: url(images/sec06_ctabg02.webp);
	background-image: image-set(url(images/sec06_ctabg02.webp) 1x, url(images/2x/sec06_ctabg02@2x.webp) 2x);
	background-image: -webkit-image-set(url(images/sec06_ctabg02.webp) 1x, url(images/2x/sec06_ctabg02@2x.webp) 2x);
	background-size: cover;
	width: 785px;
	height: 397px;
}
#footer-section .qr-box {
	width: 100px;
	height: 100px;
	background: #fff;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
#footer-section .qr-area ul {
	position: relative;
	top: 270px;
	z-index: 4;
	display: flex;
	text-align: center;
	width: 700px;
	height: 40px;
}
#footer-section .qr-area ul li {
	width: 36.5%;
	height: auto;
	margin-left: 2px;
	margin-right: 15px;
}
#footer-section .qr-area ul li:first-child {
	width: 30.5%;
	height: auto;
	margin-left: 0px;
	margin-right: 5px;
}
#footer-section .qr-area ul li:nth-of-type(3) {
	width: 36.5%;
	height: auto;
	margin-left: 5px;
	margin-right: 7px;
}
#footer-section .qr-area ul li img {
	position: inherit;
	width: auto;
	height: 100%;
	max-height: 62px;

}



.qr-area .ntg-rule-box-area {
	position: relative;
	top: 328px; 
    width: 90%;
    margin: 0 auto;
    text-align: center;
}


.qr-area .ntg-rule-box {
	width: auto;
    max-width: 100%;
    margin: 0 auto 10px auto;
	display: flex;
    flex-wrap: nowrap; 
    justify-content: center;
    align-items: center;
    gap: 20px; 
    
    /* テキスト設定 */
    color: #fff;
    line-height: 1.4;
    white-space: nowrap;
}

.qr-area .ntg-rule-box .ntg-rule-kiyaku {
	display: none;
}

.qr-area .ntg-rule-info,
.qr-area .ntg-rule-prof,
.qr-area .ntg-rule-comname {
    float: none !important; 
    padding-right: 0 !important; 
    width: auto !important;
    text-align: left;
}

.qr-area .ntg-rule-box,
.qr-area .ntg-rule-box a,
.qr-area .ntg-rule-box a:hover,
.qr-area .ntg-rule-box label,
.qr-area .ntg-rule-box strong {
  color: #fff !important;
  text-align: left !important;
  text-decoration: none !important;
  font-size: 1.7em !important;
  font-weight: 500 !important;
  font-family: 'M PLUS 1p', sans-serif;
  font-weight: 800;
  line-height: inherit !important;
}

    .qr-area .ntg-rule-box,
    .qr-area .ntg-rule-box a,
    .qr-area .ntg-rule-box label,
    .qr-area .ntg-rule-info,
    .qr-area .ntg-rule-prof,
    .qr-area .ntg-rule-comname,
    .qr-area .ntg-rule-box strong {
        font-size: clamp(10px, 1.5vw, 16px) !important;
    
    font-family: 'M PLUS 1p', sans-serif;
    font-weight: 500;
    text-decoration: none;
	line-height: 1.4 !important;
    }
	.qr-area .ntg-rule-comname {
        display: flex !important;
        align-items: center;
        height: auto;
    }

	.qr-area .ntg-rule-info label, 
	.qr-area .ntg-rule-prof label {
		display: flex;
		align-items: center;
		gap: 5px;
		cursor: pointer;
	}
.qr-area .skipDetail_notification, .qr-area .skipDetail_myapp {
  width: 14px;  /* 幅 */
  height: 14px; /* 高さ */
  margin-top: -2px;
  cursor: pointer; 
  accent-color: #fcba03; 
}



.copyright {
	background: #000;
	height: 52px;
	padding: 0;
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 12px;
	color: #fff;
}



/* --- ページトップボタン --- */
.btn-pagetop {
    position: absolute;
    
    top: -40px; 
    
    right: 120px;
    width: 80px;
    height: auto;
    z-index: 100; 
    
    /* アニメーション設定 */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s, transform 0.5s;
    pointer-events: none;
}

.btn-pagetop img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}

.btn-pagetop:hover img {
    transform: translateY(-5px);
}

/* 表示用クラス */
.btn-pagetop.is-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* --- 固定サイドシェアボタン --- */
.fixed-side-share {
    position: fixed;
    top: 20%;      
    right: -0.8%;     
    z-index: 900;   
    width: 70px;    
    height: auto;
    
    /* アニメーション設定 */
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s;
    
    /* 初期状態：画面右外へ隠す */
    transform: translateX(120%);
    opacity: 0;
    pointer-events: none; 
}

.fixed-side-share img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: -2px 2px 5px rgba(0,0,0,0.2); 
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* 表示用クラス（JSで付与） */
.fixed-side-share.is-show {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* ホバー時の挙動 */
.fixed-side-share.is-show:hover {
    /* 右端を基準に少し大きくする */
    transform: translateX(0) scale(1.02);
    transform-origin: right center;
    opacity: 1;
}




/* =================================================================
   タブレット・狭いPC向け (1011px以下 〜 768pxまで)
   ================================================================= */
@media screen and (min-width: 768px) and (max-width: 1011px){

    /* --- 全体の横揺れ防止とコンテナのフルード化 --- */
    body {
        overflow-x: hidden;
    }		

	
	#sec02 .txt {
		width: 95%;
		margin: 30px auto 0 auto;
		padding: 2.5vw 0 2vw 0;

	}
	
	
	
	/* --- 動画コントロールボタン（常に再生ボタン画像） --- */
	#sec03 .video-ctrl-btn {
    	width: 15%; 
		
		background-color: transparent;
		border: none;
		cursor: pointer;
		transition: transform 0.2s;
		
		/* 再生ボタンの画像を設定 */
		background-image: url(images/sec03_btnplay.webp);
		background-image: image-set(url(images/sec03_btnplay.webp) 1x, url(images/2x/sec03_btnplay@2x.webp) 2x);
		background-image: -webkit-image-set(url(images/sec03_btnplay.webp) 1x, url(images/2x/sec03_btnplay@2x.webp) 2x);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
    
	}

	#sec03 .videotxt {
		position: absolute;
		top: 90%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 10;
		
		width: 85%; /* 画像サイズに合わせて調整 */
	
	}
	
    #sec04 .containery {
        width: 95% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
	
    .container, 
    #sec05 .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    img {
        max-width: 100%;
        height: auto;
    }
	
	#sec04 {
		width: 100%;
		background: url(images/sec04_bg.webp);
		background-image: image-set(url(images/sec04_bg.webp) 1x, url(images/2x/sec04_bg@2x.webp) 2x);
		background-image: -webkit-image-set(url(images/sec04_bg.webp) 1x, url(images/2x/sec04_bg@2x.webp) 2x);
		background-size: 3%;
		background-repeat: repeat;
	}
    /* --- Section 04 (コラボ一覧) --- */
    #sec04 .collab-grid_m,
    #sec04 .collab-grid_s {
        gap: 15px; 
    }

	#sec04 .collab-grid_m .collab-body h3 {
		font-weight: 700;
		font-style: normal;
		font-size: 1.2em;
	}
	
	#sec04 .collab-grid_s .collab-body {
		font-family: "fot-udkakugo-large-pr6n", sans-serif;
		padding: 0px 15px;
	}
	#sec04 .collab-grid_s .collab-body h3 {
		font-weight: 700;
		font-style: normal;
		font-size: 1.0em;
	}
	#sec04 .collab-grid_s .collab-body p {
		font-weight: 100;
		font-style: normal;
		font-size: 0.8em;
	}

	


    /* 固定幅930pxのテキストボックスを可変にする */
    #sec05 .info-box {
        width: 95%;
		max-width: 930px;
		margin: 0 auto 50px;
        height: auto; 
		aspect-ratio: 930 / 480;
		background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        padding: 0;
        display: flex;
        justify-content: center; /* 左右中央 */
        align-items: center;
    }
    
    /* 中のテキストがはみ出ないように */
    #sec05 .info-content {
        width: 95%;  
        height: 95%; 
        
        /* 中身の要素配置 */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
	
	#sec05 .info-content p.txt {
		font-size: 2.0vw; /* 画面幅の1.8% */
		line-height: 1.6;
		margin-top: 3.5vw;
		margin-bottom: 0.5vw;
        width: 100%;
        font-feature-settings: "palt";
	}
	#sec05 .info-content p .bsto {
		font-weight: 900;
	}
	#sec05 .info-content .castmd {
		width: auto; 
		height: auto;
		background: #5f473a;
        
        /* マージン・パディングも可変に */
		margin-top: 8vw;
		padding: 0.5vw 3vw;
        
		font-size: 1.6vw;
		line-height: 1.4;
        display: inline-block;
	}
	#sec05 .info-content .casttxt {
		margin-top: 1.5vw;
		padding: 0;
		font-size: 2.0vw;
		line-height: 1.4;
	}
	


	/* --- Footer (タブレット用・PCレイアウト維持) --- */
    
    /* 背景エリアのパディング調整 */
    #footer-section .qr-areabg {
        padding-bottom: 5vw;
        background-size: cover;
    }

    /* 巻物エリア：アスペクト比を固定して「PC版のミニチュア」を作る */
    #footer-section .qr-area {
        width: 95%; /* 画面幅に合わせて伸縮 */
        max-width: 785px; /* PC最大サイズ */
        
        /* ▼PC背景画像の比率(785x397)を完全維持 */
        aspect-ratio: 785 / 397;
        height: auto; 
        
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        
        /* 中身を絶対配置で固定するための基準点 */
        position: relative;
        margin: 30px auto;
        
        /* Flexboxの影響をリセット */
        display: block;
    }
    
    /* 中間のラッパーはサイズ100%にしておく */
    #footer-section .qr-area .app-btns {
        width: 100%;
        height: 100%;
        position: relative;
    }

    /* ストアボタンリスト：絶対配置で背景画像上の定位置へ */
    #footer-section .qr-area ul {
        position: absolute;
        /* PC版のtop: 270px / height: 397px ≒ 68% */
        top: 68%;
        left: 50%;
        transform: translateX(-50%); /* 左右中央寄せ */
        
        width: 90%; /* 横幅も%で調整 */
        height: auto;
        
        justify-content: center;
        gap: 1%;
        margin: 0;
        z-index: 10;
        
        /* フレックス設定を維持 */
        display: flex;
        flex-wrap: nowrap;
    }
    
#footer-section .qr-area ul li {
	width: 32.5%;
	height: auto;
	margin-left: 2px;
	margin-right: 10px;
}
#footer-section .qr-area ul li:first-child {
	width: 28.5%;
	height: auto;
	margin-left: 5px;
	margin-right: 5px;
}
#footer-section .qr-area ul li:nth-of-type(3) {
	width: 35.5%;
	height: auto;
	margin-left: 5px;
	margin-right: 7px;
}
#footer-section .qr-area ul li img {
	position: inherit;
	width: auto;
	height: 100%;
	max-height: 62px;

}

    
    /* 規約エリア：絶対配置で下部へ */
    .qr-area .ntg-rule-box-area {
        position: absolute;
        top: 92.5%;
        left: 50%;
        transform: translateX(-50%);
        width: 74%; /* ★ここを100%にして巻物の左端から右端まで使う */
        margin: 0;
        padding: 0;
        pointer-events: auto;
    }
    
    /* 規約内の文字サイズ：vwで可変にする */
    .qr-area .ntg-rule-box {
        width: 100% !important;     /* 600pxを打ち消し */
        max-width: none !important; /* 制限解除 */
        margin: 0;
		display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center; /* ★これで左右中央揃えになります */
        align-items: center;
        gap: 2.0vw;
    }
	.qr-area .ntg-rule-info,
    .qr-area .ntg-rule-prof,
    .qr-area .ntg-rule-comname {
        float: none !important; /* 左寄せ解除 */
        padding-right: 0 !important; /* 右余白解除 */
        width: auto !important;
		white-space: nowrap !important;
    }
    /* 強制的にフォントサイズを縮小追従させる */
    .qr-area .ntg-rule-box,
    .qr-area .ntg-rule-box a,
    .qr-area .ntg-rule-box label,
    .qr-area .ntg-rule-info,
    .qr-area .ntg-rule-prof,
    .qr-area .ntg-rule-comname {
        font-size: clamp(12px, 1.8vw, 16px) !important; 
        line-height: 1.4 !important;
    }
    
    /* チェックボックスのサイズ調整 */
    .qr-area .skipDetail_notification, 
    .qr-area .skipDetail_myapp {
        width: 1.5vw;
        height: 1.5vw;
    }


	

	/* --- ページトップボタン --- */
	.btn-pagetop {
		/* fixed(画面固定) から absolute(親要素固定) に変更 */
		position: absolute;
		
		/* ▼ フッターの「頭の高さ」に配置 */
		/* top: 0; だとフッターの中に埋まるので、半分くらい飛び出させると綺麗です */
		/* ボタンの大きさに合わせて数字(-50pxなど)を調整してください */
		top: -40px; 
		
		right: 120px;
		width: 80px;
		height: auto;
		z-index: 100; /* フッターより手前に */
		
		/* アニメーション設定 */
		opacity: 0;
		transform: translateY(20px);
		transition: opacity 0.5s, transform 0.5s;
		pointer-events: none;
	}
	
	.btn-pagetop img {
		width: 100%;
		display: block;
		transition: transform 0.3s;
	}
	
	.btn-pagetop:hover img {
		transform: translateY(-5px);
	}
	
	/* 表示用クラス */
	.btn-pagetop.is-show {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
	
	
	/* --- 固定サイドシェアボタン --- */
	.fixed-side-share {
		position: fixed;
		top: 20%;        /* 上から20%の位置（お好みで調整してください） */
		right: -1.9%;        /* 右端に張り付き */
		z-index: 900;    /* コンテンツより上、モーダルより下 */
		width: 70px;     /* ボタンの幅（画像の大きさに合わせて調整） */
		height: auto;
		
		/* アニメーション設定 */
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s;
		
		/* 初期状態：画面右外へ隠す */
		transform: translateX(120%);
		opacity: 0;
		pointer-events: none; /* 隠れている間はクリック判定を消す */
	}
	
	.fixed-side-share img {
		width: 100%;
		height: auto;
		display: block;
		/* 影をつけて少し浮かせる（お好みで） */
		box-shadow: -2px 2px 5px rgba(0,0,0,0.2); 
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	
	/* 表示用クラス（JSで付与） */
	.fixed-side-share.is-show {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}
	
	/* ホバー時の挙動 */
	.fixed-side-share.is-show:hover {
		/* 右端を基準に少し大きくする */
		transform: translateX(0) scale(1.02);
		transform-origin: right center;
		opacity: 1;
	}
	

}


@media screen and (min-width: 768px) and (max-width: 768px){
	
    /* --- Header --- */
    #header-section {
        padding: 2px 0;
    }

}




/* =================================================================
   【Step 2】 スマホ版 (767px以下)
   目的：デザインJPGに合わせてレイアウトを大きく組み替え、縦積みにする
   ================================================================= */
@media screen and (max-width: 767px) {

    /* --- Global & Layout --- */
    body {
        min-width: 320px;
    }



	

	.invisible-pc {
		display: block !important;
	}
	.invisible-sp {
		display: none !important;
	}


    

    /* --- Header --- */
    #header-section {
        padding: 2px 0;
    }

    /* ヘッダーバナー：背景画像を維持しつつ、中身をSP用に配置 */
    .top-banner-placeholder {
        width: 100%;
        height: auto;
        
        background-size: contain;
        background-position: center;
        background-repeat: repeat-x;
        
        /* ▼▼▼ 箱の中で .head を「下揃え」にする ▼▼▼ */
        display: flex;
        align-items: flex-end; 
        justify-content: center;
        
        padding-bottom: 0.5%; /* 画の底辺から少し浮かせたい場合の微調整 */
        border-radius: 0;
		margin-bottom: 8vw;
    }

    .top-banner-placeholder .head {
		display: flex;
		width: 100%;
		height: auto;
		
		/* ▼▼▼ 下揃え(flex-end) から 上下中央揃え(center) に変更 ▼▼▼ */
		align-items: center; 
		
		justify-content: center;
		gap: 2%;
		position: static;
		padding: 0 0px;
	}
	.top-banner-placeholder .luf {
        width: 18%; 
        max-width: 70px;
        margin: 0;
    }
    .top-banner-placeholder h1 {
		margin: 0;
		line-height: 1;
	}
	
	.top-banner-placeholder h1 img {
		width: 55vw;
		max-width: 240px;
		
		padding-top: 3%;
		/* ▼▼▼ 余計な隙間（margin-bottom）を削除 ▼▼▼ */
		margin-bottom: 0;
	}

    /* コラボ一覧ボタン */
    .top-banner-placeholder .btnlist {
        width: 25%;
        max-width: 55px;
		padding-top: 1%;
        margin: 0;
        /* ボタンも底辺に揃います */
    }


    /* --- Swiper (MV) スマホ版：横並び維持 ＆ 前後スライド見切れあり --- */

    .banner-swiper {
        height: auto !important;
        padding-bottom: 1%; /* ページネーション用 */
    }

    /* ▼▼▼ 修正ポイント：スライド幅を80vwに絞る ▼▼▼ */
    /* これで画面左右に「前後のスライド」が見える余白が生まれます */
    .swiper-slide {
        width: 80vw !important; 
        height: auto !important;
        
        /* 非アクティブなスライドを少し小さくして遠近感を出す（お好みで調整） */
        transform: scale(0.95);
        transition: transform 0.3s;
    }
    .swiper-slide-active {
        transform: scale(1);
    }

    /* 中身：横並び(row)を維持 */
    .slide-content {
        flex-direction: row !important; /* 絶対に横並び */
        align-items: center;
        width: 100%;
        height: auto;
        
        /* 狭いので角丸も少し小さめに */
        border-radius: 8px;
    }

    /* 画像エリア：幅50% */
    .slide-img {
        width: 63%;
        height: auto;
        aspect-ratio: 1 / 1; /* 正方形維持 */
    }
    
    /* 画像本体 */
    .slide-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* テキストエリア：幅50%（かなり細くなります） */
    .slide-text {
        width: 37%;
        height: auto;
        
        /* 余白を限界まで削る */
        padding: 2vw; 
        
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    /* タイトル：細いエリアでも改行されすぎないようサイズ調整 */
    .slide-text h3 {
        font-size: clamp(11px, 3.2vw, 18px);
        line-height: 1.5;
        
        margin-top: 0;
        margin-bottom: 5px;   /* vwではなくpx固定で安定させる */
        padding-bottom: 3vw;
    }
    
    /* 本文 */
    .slide-text p {
        font-size: clamp(10px, 2.7vw, 14px);
        line-height: 1.5;
		font-weight: 400;
        padding-bottom: 2vw;
    }

    /* 詳細ボタン：幅100%ではみ出し防止 */
    .slide-text .btndetail {
        margin: 2vw 0 0 0;
        width: 100%;
        max-width: 100%; /* 親要素を超えない */
    }
    
    /* 矢印：スライド幅が狭まった分、画面端に余裕ができるので配置しやすくなります */
    .custom-prev, .custom-next {
        width: 8vw; /* 指で押しやすいサイズ */
        height: 8vw;
        max-width: 45px;
        max-height: 45px;
        
        margin: 0 2vw !important;
    }


    /* --- Section 02 (Text) --- */
    #sec02 {
        height: auto;
		margin-top: 5vw;
        padding: 1vw 0;
        background-size: contain;
		background-repeat: repeat-x;
    }
    #sec02 .txt {
        width: 100%;
        padding: 0 3vw;
    }


    /* --- Section 03 (Video) --- */
    #sec03 .full-video-wrapper {
        height: 56.25vw; /* 16:9比率 */
        max-height: none;
    }
    
    /* 再生ボタン適正化 */
    #sec03 .video-ctrl-btn {
        width: 20%;
        height: auto;
        aspect-ratio: 1;
    }
    
    #sec03 .videotxt {
        width: 90%;
		height: auto;
        top: 100%;     /* 親要素(動画)のいちばん下を基準線にする */
        bottom: auto; /* 動画の下に外出しするデザインなら調整 */
        transform: translate(-50%, -145%);
    }


    /* --- Section 04 (Collab Grid) --- */
    #sec04 {
        padding-bottom: 15vw;
		background-size:inherit;
    }
	
	
    #sec04 .containery {
        width: 95% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    #sec04 .section-title01,
    #sec04 .section-title02 {
        padding: 20px 0;
        width: 100%;
    }
    
    #sec04 .section-title01 img,
    #sec04 .section-title02 img {
        width: 100%;
    }
	#sec04 .section-title01 {
		margin-bottom: 5vw;
	}

    /* 開催中コラボ：2列 */
    #sec04 .collab-grid_m {
        grid-template-columns: repeat(2, 1fr);
        gap: 3vw;
    }

    /* 過去コラボ：3列 */
    #sec04 .collab-grid_s {
        grid-template-columns: repeat(3, 1fr);
        gap: 2vw;
    }
	#sec04 .collab-grid_s .collab-box {
		background: #f1e0b8;
		border-bottom: 10px solid #ebc84a;
	}
    
	#sec04 .collab-grid_m .collab-img {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 10px 0 10px;
	}
	#sec04 .collab-grid_s .collab-img {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 10px 0 10px;
	}
	#sec04 .collab-grid_s .collab-body {
		font-family: "fot-udkakugo-large-pr6n", sans-serif;
		padding: 10px 15px 0 15px;
	}
    /* 文字サイズ微調整 */
    #sec04 .collab-grid_m .collab-body h3 { 
        font-size: clamp(11px, 2.5vw, 18px);
        line-height: 1.4;
    }
    #sec04 .collab-grid_s .collab-body h3 { 
        font-size: clamp(9.5px, 2.1vw, 14px);
        line-height: 1.4;
    }
    #sec04 .collab-grid_s .collab-body p { 
        font-size: clamp(8px, 1.8vw, 12px);
        line-height: 1.4;
    }
    
    /* ボタン調整 */
    #sec04 .collab-grid_m .collab-btn { width: 70%; padding: 10px 0; }
    #sec04 .collab-grid_s .collab-btn { width: 70%; padding: 0px 0 10px 0; }


    /* --- Section 05 (Info / Cast) --- */
    
    /* --- Section 05 (ここが重要) --- */
	
	#sec05head {
    	position: relative;
		margin-top: -11vw;
    	width: 100%;
    	height: auto; 
    	margin-bottom: 0;
    	padding: 0;
		z-index: 5;
	}
	#sec05head .full-width-banner {
		position: relative;
		width: 100%;
		height: auto;
		margin: 0 auto;
		z-index: 2;
		/* Flexbox不要 */
	}
	#sec05head .full-width-banner img {
		width: 100%;
		height: auto;
		display: block;
	}
	


    #sec05 {
        margin-top: -10vw;
    }
	
    #sec05 .container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
		margin-top: 10vw;
    }
    #sec05 .section-title01,
    #sec05 .section-title02 {
        padding: 20px 0;
        width: 90%;
    }
    
    #sec05 .section-title01 img,
    #sec05 .section-title02 img {
        width: 100%;
    }
	#sec05 .section-title01 {
		margin-bottom: 5vw;
	}



    /* ▼ テキストボックス（SP用重要変更） */
    
	#sec05 .info-box {
		background: url(images/sp/sec05_txtbox.webp);
		background-image: image-set(url(images/sp/sec05_txtbox.webp) 1x, url(images/sp/2x/sec05_txtbox@2x.webp) 2x);
		background-image: -webkit-image-set(url(images/sp/sec05_txtbox.webp) 1x, url(images/sp/2x/sec05_txtbox@2x.webp) 2x);
		background-size: contain;
		background-repeat: no-repeat;
		padding: 4%;
		margin-bottom: 8vw;
		width: 100%;
		height: 100%;
	}

    #sec05 .info-content {
        width: 100%;
        height: auto;
        padding: 2vw 0 2vw 0;
        display: block;
    }
    
    /* 文字サイズは読みやすい固定サイズ(rem)に戻す */
    #sec05 .info-content p.txt {
        /* 最小サイズを 10px に下げて、小さい画面での縮小率を高めました */
        font-size: clamp(9px, 2.4vw, 18px);
        
        /* 行間を 1.4 -> 1.35 に詰めて縦幅を節約 */
        line-height: 1.35;
        
        /* 段落下の余白を 5vw -> 3vw に詰める */
        margin: 3.6vw 0 2vw 0; 
        
        width: 100%;
    }
    
    #sec05 .info-content .castmd {
        /* 上のマージンを 14vw -> 6vw に半減（これが一番効きます） */
        margin: 11.1vw auto 2vw;
        
        padding: 1vw 4vw;
        width: fit-content;
        height: auto;
        
        /* フォントサイズも一回り小さく */
        font-size: clamp(11px, 3vw, 17px);
    }
    
    #sec05 .info-content .casttxt {
        /* 最小 12px まで下げる */
        font-size: clamp(12px, 3.5vw, 22px);
        
        margin-top: 1.5vw;
    }
    
    /* 公式サイトへボタン */
    #sec05 .toofficial {
        width: 85%;
        margin: 0 auto 40px;
    }


    /* --- スマホ画面モックアップ --- */
    #sec05 .app-showcase {
        grid-template-columns: repeat(2, 1fr); /* 2列維持 */
        gap: 3vw;
        padding-top: 5vw;
        padding-bottom: 10vw;
		width: 92%;
    }
    #sec05 .screen {
        height: auto;
    }


    /* --- Footer --- */

	
	#footer-section {
		position: relative;
		background: #ebc84a;
		padding: 3vw 0 0 0;
		text-align: center;
		color: #fff;
	}
	
    #footer-section .footer-logo,
    #footer-section .share {
        width: 50%;
        margin: 5vw auto 10vw auto;
    }
    
    /* ▼ ストアボタンエリア（SP用大幅変更） */
    /* 背景（巻物）を消して、ボタンを自然に配置 */
    #footer-section .qr-areabg {
        width: 100%;
        
		background: url(images/sp/sec06_ctabgsp.webp);
		background-image: image-set(url(images/sp/sec06_ctabgsp.webp) 1x, url(images/sp/2x/sec06_ctabgsp@2x.webp) 2x);
		background-image: -webkit-image-set(url(images/sp/sec06_ctabgsp.webp) 1x, url(images/sp/2x/sec06_ctabgsp@2x.webp) 2x);
		background-size: 100% auto;
        background-position: top center;
        background-repeat: no-repeat;
		padding-top: 5vw; 
        padding-bottom: 1vw; 
        
        /* 元のpadding指定があれば上書き */
        height: auto;
    }

    #footer-section .qr-area {
        width: 100%;
        max-width: none;
        height: auto;
        aspect-ratio: auto;
        background: none !important; /* 巻物画像を消す */
        margin: 0;
        display: block;
    }

    /* ボタンリスト：縦積み、または横並び調整 */
    #footer-section .qr-area ul {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        
        width: 96%;
        height: auto;
        
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        align-items: center;
        
        /* ▼▼▼ 修正：間隔を 2vw → 5vw に広げる ▼▼▼ */
        /* 375pxの画面で約19pxの間隔になります */
        gap: 5vw; 
        
        padding: 0;
        margin: 0 auto 3vw auto; 
    }

    /* ストアボタン（App/Google）は横並び */
    #footer-section .qr-area ul li {
        margin: 0 !important;
        width: auto !important; /* 幅は中身（画像）に合わせる */
        display: flex;
        justify-content: center;
    }
    
    /* DMMボタン（3つ目）は下段に大きく */
    #footer-section .qr-area ul li:nth-of-type(3) {
        width: 100% !important; /* 幅100%を使って改行させる */
        margin-top: 0vw !important; /* 上の段との隙間 */
    }


	#footer-section .qr-area ul li button,
    #footer-section .qr-area ul li img {
        display: block;
        
        /* 13.5vw 程度に調整（これでも十分大きいです） */
        height: 13.5vw; 
        
        width: auto; 
        max-height: none;
        max-width: none;
        background: none;
        padding: 0;
        border: none;
    }

    
    /* 規約エリア */
    .qr-area .ntg-rule-box-area {
        position: static;
        width: 100%;
        /* ボタン群との距離を少し空ける */
        margin-top: 8vw; 
        padding: 0 7%;
        text-align: center;
    }

	
    .qr-area .ntg-rule-box {
        display: flex !important;
        flex-wrap: wrap !important; /* 横幅が足りないときは折り返す */
        justify-content: center;    /* 常に中央揃え */
        align-items: center;
        
        /* 項目同士の隙間（横・縦） */
        gap: 8px 15px; 
        
        width: 100%;
    }
    .qr-area .ntg-rule-info,
    .qr-area .ntg-rule-prof,
    .qr-area .ntg-rule-comname {
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        /* 項目内での改行を防ぐ（変な位置で折れないように） */
        white-space: nowrap; 
    }

	.qr-area .ntg-rule-kiyaku {
        display: none !important;
    }

    /* 文字サイズ：スマホで見える限界サイズ */
    .qr-area .ntg-rule-box,
    .qr-area .ntg-rule-box a,
    .qr-area .ntg-rule-box label,
    .qr-area .ntg-rule-box strong {
        color: #5f473a !important;
        
        font-size: clamp(11px, 3.2vw, 24px) !important;
        
        font-weight: 400 !important;
        line-height: 1.5 !important;
        text-decoration: none !important;
        text-align: left;
    }
    .qr-area .skipDetail_notification, 
    .qr-area .skipDetail_myapp {
        width: 1.3em;
        height: 1.3em;
        
        margin-right: 0.3em; /* 隙間も文字サイズ基準に */
        margin-top: -0.2em;  /* 位置微調整 */
        cursor: pointer;
    }

	.qr-area .ntg-rule-box {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center;
        align-items: center;
        
        /* 2つが横に並びやすいよう、隙間を少し詰めて調整 */
        gap: 1vw 3vw; 
        
        width: 100%;
    }
	.qr-area .ntg-rule-info,
    .qr-area .ntg-rule-prof {
        width: auto !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap; 
    }
	.qr-area .ntg-rule-comname {
        /* 幅を100%にすることで、必ず新しい行に押し出されます */
        width: 100% !important; 
        
        display: flex !important;
        justify-content: center; /* 中央寄せ */
        margin-top: 1vw; /* 上の行との隙間 */
        white-space: nowrap;
    }



	
	/* --- 固定サイドシェアボタン --- */
	.fixed-side-share {
		position: fixed;
		top: 20%;        /* 上から20%の位置（お好みで調整してください） */
		right: -2.8%;        /* 右端に張り付き */
		z-index: 900;    /* コンテンツより上、モーダルより下 */
		width: 60px;     /* ボタンの幅（画像の大きさに合わせて調整） */
		height: auto;
		
		/* アニメーション設定 */
		transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s;
		
		/* 初期状態：画面右外へ隠す */
		transform: translateX(120%);
		opacity: 0;
		pointer-events: none; /* 隠れている間はクリック判定を消す */
	}
	
	.fixed-side-share img {
		width: 100%;
		height: auto;
		display: block;
		/* 影をつけて少し浮かせる（お好みで） */
		box-shadow: -2px 2px 5px rgba(0,0,0,0.2); 
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	
	/* 表示用クラス（JSで付与） */
	.fixed-side-share.is-show {
		transform: translateX(0);
		opacity: 1;
		pointer-events: auto;
	}
	
	/* ホバー時の挙動 */
	.fixed-side-share.is-show:hover {
		/* 右端を基準に少し大きくする */
		transform: translateX(0) scale(1.02);
		transform-origin: right center;
		opacity: 1;
	}
	

}