@charset "UTF-8";

/* ==========================================================================
    カラー変数・共通設定
   ========================================================================== */
:root {
    /* カラー定義 */
    --white-1: #FFFFFF;
    --brown-1: #7E5A4B;
    --yellow-1: #FDF2B2;
    --orange-1: #FFE477;
    --orange-2: #FFD071;
    --orange-3: #EF6B18;

    /*
    フォント設定
    Light 300
    Regular 400
    Medium 500
    Bold 700
    Black 900
    */
}

/* ==========================================================================
    template-collaboration.cssの上書き
   ========================================================================== */

   .model-link::before{
    display: none;
   }

   .content-wrap .l-section{
	padding-inline: clamp(0.9375rem, -1.811rem + 11.758vw, 6.25rem);
   }

   .model-catch{
	font-weight: 700;
   }

   .model-spec{
	margin-top: 0;
   }

   .content-wrap .l-section:nth-of-type(n+2){
	margin: 0;
   }
   @media (max-width: 441px) {
	.content-wrap .l-section:nth-of-type(n+2){
		padding-top: 60px;
	}
   }

   .content-wrap .l-section{
	padding: 0;
	padding-inline: 6.67%;
   }
   @media (max-width: 768px) {
	.content-wrap .l-section{
		padding-inline: 3.7%;
	}
   }

   .l-container{
	margin: 0 auto;
   }

/* ==========================================================================
    レイアウト
   ========================================================================== */

.content-wrap{
    overflow: visible;
}

/* 背景 */
.content-wrap .lp-bg  {
    background: url(../../gamepc/img/inabahaneru/bg.webp);
}

.section-wrap {
    background: var(--yellow-1);
    color: var(--brown-1);
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin-inline: auto;
    padding-top: 35px;
}
@media (max-width: 768px) {
	.section-wrap{
		padding-top: 4.8%;
	}
}
.section-wrap::before,
.section-wrap::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}
/* タブレット769px～440px */
@media (min-width: 441px) and (max-width: 1600px) {
    .section-wrap{
        width: calc(100% - 100px);
    }
}
/* スマホサイズ440px以下 */
@media (max-width: 441px) {
    .section-wrap{
        width: calc(100% - 60px);
    }
}

.section-wrap::before {
    background: url(../../gamepc/img/inabahaneru/bg-wave-l.webp) repeat-y top left;
    left: -12px;
}
.section-wrap::after {
    background: url(../../gamepc/img/inabahaneru/bg-wave-r.webp) repeat-y top right;
    right: -12px;
}

@media (max-width: 768px) {
    .section-wrap::before {
    background: url(../../gamepc/img/inabahaneru/bg-wave-l-sp.webp) repeat-y top left;
    left: -7px;
    }
    .section-wrap::after {
        background: url(../../gamepc/img/inabahaneru/bg-wave-r-sp.webp) repeat-y top right;
        right: -7px;
    }
}

/* ==========================================================================
    テキスト・タイポグラフィ
   ========================================================================== */
.ttl-h2 {
    color: var(--brown-1);
    font-size: max(
  clamp(32px, 0.674vw + 29.472px, 35px),
  clamp(35px, 2.273vw + 16.364px, 60px)
);
    font-weight: 900;
    position: relative;
	margin-top: 4.6%;
}
@media (max-width: 768px) {
	.ttl-h2{
		margin-top: 5%;
	}
}
@media (max-width: 441px) {
	.ttl-h2{
		margin-top: 15%;
	}
	.l-section:nth-of-type(n+3) .ttl-h2{
		margin-top: 35%;
	}
}
.ttl-h2::before {
    content: "";
    background: url(../../gamepc/img/inabahaneru/deco-1.webp) no-repeat center center /100%;
    width: 9.93%;
    height: auto;
    position: absolute;
    left: 50%;
    top: -60%;
    /* transform: translateX(-50%); */
	aspect-ratio: 129 / 57;
}
.ttl-h2.icon-none {
    text-shadow: none;
}
.ttl-h2.icon-none::before {
    content: none;
}
/* 1. ::before にアニメーションと変形基準点をセット */
.ttl-h2::before {
  /* 4秒周期でアニメーションを無限ループ */
  animation: pyokoPyoko 3.5s infinite;
  /* アニメーションの基準点を画像の下中央に設定 */
  transform-origin: bottom center; 
}

/* 2. サイズ設定を保持した「ぴょこ！ぴょこ！」のキーフレーム定義 */
@keyframes pyokoPyoko {
  0%, 70%, 100% {
    /* translate と scale を独立して指定（translateX(-50%) も不要になります） */
    translate: -50% 0;
    scale: 1 1;
  }

  /* --- 1回目のぴょこ！ --- */
  72% {
    translate: -50% 0;
    scale: 1.15 0.85;
  }
  77% {
    translate: -50% -18px;
    scale: 0.9 1.1;
  }
  81% {
    translate: -50% 0;
    scale: 1.1 0.9;
  }

  /* --- 2回目のぴょこ！ --- */
  85% {
    translate: -50% -10px;
    scale: 0.95 1.05;
  }
  89% {
    translate: -50% 0;
    scale: 1 1;
  }
}


.ttl-sub {
    color: var(--brown-1);
}
.txt-main {
    color: var(--brown-1);
}
.txt-special {
    color: var(--brown-1);
    font-size: clamp(24px, 1.683vw + 17.94px, 50px);
    font-weight: 900;
    line-height: 1.4;
    margin-top: clamp(40px, 2.589vw + 30.29px, 80px);
    margin-bottom: clamp(15px, 0.971vw + 11.36px, 30px);
}
.txt-note  {
    color: var(--brown-1);
}
.model-catch {
    color: var(--pink-2);
}
.model-name {
    color: var(--pink-2);
}
.model-spec {
    color: var(--pink-2);
}
.model-price {
    color: var(--pink-2);
}
.bonus-name {
    color: var(--white-1);
}
.bonus-name .number {
    color: var(--pink-2);
}
.txt-emphasis {
    color: var(--white-1);
}
.bonus-a-item .txt-note {
    color: var(--white-1);
    line-height: 1.7;
}
.txt-profile {
    color: var(--pink-2);
}
.sns-link {
    background: var(--pink-2);
}
@media screen and (max-width: 767px) {
    .ttl-h2::before {
        width: 77px;
        height: 45px;
        background: url(../../gamepc/img/inabahaneru/deco-1.webp) no-repeat center center /100%;
        top: -80%;
    }
}


/* ==========================================================================
    ナビゲーションメニュー
   ========================================================================== */
.page-nav {
	width: 77.08333333333334vw;
    max-width: 570px;
	position: sticky;
	top: 35px;
	z-index: 100;
	margin: 0 auto;
	padding: 12px 0;
	background: var(--white-1);
	border: 1px solid var(--orange-3);
	border-radius: 9999px;
	box-sizing: border-box;
}
.page-nav-list {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
}
@media (max-width: 768px) {
	.page-nav-list{
		line-height: 0;
		padding-block: 1%;
	}
}
.page-nav-link {
	color: var(--brown-1);
	font-size: clamp(11px, 0.845vw + 7.831px, 20px);
	font-weight: 900;
	line-height: 1;
	transition: color 0.5s ease;
}
.page-nav-link:hover {
    color: var(--orange-3);
}
@media (max-width: 768px) {/*375-768*/
	.page-nav {
		width: 83.733vw; /* 314px / 375px * 100 */
		padding: 1.333vw 2.667vw; /* 5px 10px 9px */
		border: 1px solid var(--orange-3);
	}
	.page-nav-list {
		gap: 3.467vw; /* 13px */
	}
}


/* ==========================================================================
    ケースデザイン
   ========================================================================== */
   .p-design{
	margin-top: 14% !important;
	}

@media (hover: hover) {
  .gallery-item:hover {
    background-color: var(--orange-3);
  }
  .gallery-item:hover img {
    opacity: 0.85;
  }
}
.case-detail{
	display: flex;
	padding-top: 90px;
	justify-content: space-between;
	gap: 5%;
}
@media (max-width: 768px) {
	.case-detail{
		flex-direction: column;
		padding-top: 10.7%;
	}
}
.case-detail-img{
	width: 100%;
	max-width: 750px;
}
@media (max-width: 768px) {
	.case-detail-img img{
		max-width: 500px;
		margin-inline: auto;
	}
}
.case-detail-img img{
	width: 100%;
	border: solid 1px var(--orange-3);
}
.case-detail-txt{
	width: 100%;
	max-width: 480px;
	line-height: 2.1875;
	font-weight: 500;
}
@media (max-width: 768px) {
	.case-detail-txt{
		max-width: calc(100% - 100px);
		padding-top: 4.7%;
		margin-inline: auto;
	}
}
@media (max-width: 441px) {
	.case-detail-txt{
		max-width: 100%;
		padding-top: 10.7%;
	}
}
.case-detail-txt p:last-child{
	padding-top: 30px;
	font-size: clamp(11px, 0.469vw + 9.239px, 16px);
}
@media (max-width: 768px) {
	.case-detail-txt p:last-child{
		padding-top: 7.3%;
	}
}
.case-detail h3{
	color: var(--orange-3);
	font-size: max(
  clamp(25px, 0.225vw + 24.157px, 26px),
  clamp(26px, 2.182vw + 8.109px, 50px)
);
	font-weight: 900;
	line-height: 1;
}
.case-detail .sub-ttl{
	color: var(--orange-3);
	font-size: clamp(13px, 0.657vw + 10.535px, 20px);
	font-weight: 700;
	line-height: 1.8;
	padding-top: 30px;
}
@media (max-width: 768px) {
	.case-detail .sub-ttl{
		padding-top: 5.5%;
	}
}

/* ==========================================================================
    ラインアップ
   ========================================================================== */
.p-products-a{
    padding-top: 3.3% !important;
   }

.contents--line-up .contents__inner::before{
	position: absolute;
	content: "";
	width: 2px;
	height: calc(100% - 80px);
	background: var(--brown-1);
	top: 80px;
	left: 0;
	padding-bottom: 50px;
	box-sizing: border-box;
}
.contents--line-up {
	position: relative;
	width: 100%;
	padding-bottom: 130px;
}
@media (max-width: 768px) {
	.contents--line-up{
		padding-bottom: 50px;
	}
}
.line-up {
	position: relative;
}
@media (max-width: 1000px) {
	.line-up .sp{
		display: block !important;
	}
	.line-up .pc{
		display: none !important;
	}
}
.line-up-block{
	display: flex;
	padding-top: 50px;
	font-weight: 700;
	align-items: flex-start; /* これが必要です */
	justify-content: space-between;
	gap: 2%;
}
@media (max-width: 1000px) {
	.line-up-block{
		flex-direction: column;
		gap: 15px;
		padding-top: 30px;
	}
}
@media (max-width: 441px) {
	.line-up-block{
		padding-top: 0;
	}
}
.line-up-block a{
	width: 100%;
	display: flex;
	gap: 20px;
	text-decoration: none;
	color: var(--brown-1);
	background: var(--white-1);
	padding: 15px 25px 15px 40px;
	border: solid 1px var(--orange-3);
	transition: all 0.3s ease;
	letter-spacing: 0.03em;
}
@media (max-width: 1200px) {
	.line-up-block a{
		position: relative;
		padding: 20px 80px 20px 17px;
	}
}
@media (max-width: 1000px) {
	.line-up-block a{
		padding: 20px 17px;
	}
}
.line-up-block a:hover{
	background: var(--orange-1);
}
/* PCサイズ（1001px以上）：追従あり */
.line-up-img {
	max-width: 490px;
	/* --- 追従（sticky）の設定 --- */
	position: sticky;
	top: 20px; /* 画面上部から20pxの位置で固定・追従 */
	z-index: 5;
	box-sizing: border-box;
}

/* 画面幅 1000px 以下：縦並びになるため追従を解除 */
@media (max-width: 1000px) {
	.line-up-img {
		position: static; /* stickyを解除して通常配置へ */
		max-width: 360px;
		margin-inline: auto;
		padding-left: 0;
	}
}
/* スマホサイズ 440px 以下 */
@media (max-width: 441px) {
	.line-up-img {
		max-width: 178px;
	}
}
.line-up-img img {
	width: 100%;
}
.line-up-model{
	max-width: 860px;
	width: 100%;
	display: flex;
	font-size: clamp(13px, 0.657vw + 10.535px, 20px);
	gap: 25px;
	align-items: center;
}
@media (max-width: 841px) {
	.line-up-model{
		flex-direction: column;
		gap: 10px;
		align-items: flex-start;
	}
}
.txt-short{
	white-space: nowrap;     /* テキストを折り返さない */
  	overflow: hidden;        /* はみ出た部分を非表示 */
  	text-overflow: ellipsis; /* はみ出た部分を「…」にする */
}
.model-left{
	max-width: 620px;
	box-sizing: border-box;
}
@media (max-width: 1200px) {
	.model-left{
		max-width: 100%;
	}
}
.model-left p:nth-of-type(2){
	padding-top: 15px;
}
.model-catch{
	border-bottom: solid 1px var(--orange-3);
	padding-bottom: 15px;
}
.model-spec-detail{
	display: flex;
	align-items: flex-end;
	gap: 20px;
}
@media (max-width: 768px) {
	.model-spec-detail{
		flex-direction: column;
		align-items: flex-start;
	}
}
.model-spec{
	font-weight: 500;
	font-size: clamp(11px, 0.469vw + 9.239px, 16px);
	line-height: 1.615;
	padding-top: 10px;
	flex: 1;
}
.line-up-model .tax{
	font-size: clamp(0.625rem, 0.5114rem + 0.4848vw, 0.875rem);
}
.model-right{
	font-size: clamp(19px, 0.469vw + 17.239px, 24px);
}
.line-up-link{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (max-width: 768px) {
	.line-up-link{
		position: absolute;
		right: 4%;
		bottom: 5%;
	}
}
.line-up-link img{
	width: 13px;
	position: absolute;
	top: 55px;
	left: 8px;
}
.right-arrow{
	position: relative;
	width: 43px;
	height: 43px;
	display: block;
	background: var(--white-1);
	border: solid 2px var(--orange-3);
	border-radius: 50%;
}
@media (max-width: 441px) {
	.right-arrow{
		width: 32px;
		height: 32px;
		border: solid 1px var(--orange-3);
	}
}
.model-link:hover .right-arrow{
	transform: translateX(3px);
	transition: all .3s ease;
	background-color: var(--orange-3);
}
.right-arrow::after{
	content: "";
	width: 10px;
	height: 10px;
	position: absolute;
	border-top: solid 2px var(--orange-3);
	border-right: solid 2px var(--orange-3);
	transform: rotate(45deg);
	top: 36.5%;
	left: 32.5%;
}
@media (max-width: 441px) {
	.right-arrow::after{
		width: 8px;
		height: 8px;
		top: 35%;
		left: 33%;
		border-top: solid 1px var(--orange-3);
		border-right: solid 1px var(--orange-3);
	}
}
.model-link:hover .right-arrow::after{
	border-color: var(--white-1);
}
.line-up-flex {
	display: flex;
	justify-content: center;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	gap: 100px;
}
.line-up-flex-2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 36px;
	margin-top: 120px;
}
.line-up-flex-2 .inner-right {
	width: 100%;
	max-width: 551px;
}
.pc-block {
	display: flex;
	gap: 50px;
}
.pc-block .desk-img {
	width: 285px;
}
.line-up-inner-flex {
	display: flex;
	gap: 35px;
	margin-top: 24px;
}
.inner-flex-left {
	width: 100%;
	max-width: 325px;
}
.note-img {
	width: 100%;
	max-width: 352px;
}
/* tab */
.tab-container {
	margin-top: 3.85%;
}
@media (max-width: 768px) {
	.tab-container{
		margin-top: 20px;
	}
}
.tab-menu {
	display: flex;
	gap: 30px;
}
.tab-item {
	cursor: pointer;
	padding: 28px 30px;
	font-weight: bold;
	color:var(--white-1);
	background: var(--brown-1);
	flex-grow: 1;
	transition: flex-grow 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
				background 0.3s ease, 
				color 0.3s ease;
	white-space: nowrap;
	overflow: hidden;
    border-radius: 11px 11px 0 0;
}
/* アクティブなタブ：flex-growを大きくして幅を広げる */
.tab-item.active {
	flex-grow: 7.6; 
}
.tab-item:nth-of-type(1).active {
	background: var(--orange-3);
}
.tab-item:nth-of-type(2).active {
	color: var(--white-1);
	background: var(--orange-3);
}
.tab-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ttl-cpu {
	font-size: 25px;
	font-weight: 900;
	line-height: 1;
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
	z-index: 1;
}
.ttl-cpu::before{
	content: "";
	display: inline-block;
	width: clamp(10px, 0.78vw, 15px);
  	height: clamp(10px, 0.78vw, 15px);
	border-top: solid 3px var(--white-1);
	border-right: solid 3px var(--white-1);
	transform: rotate(45deg);
}
.txt-cpu {
	font-size: clamp(11px, 0.469vw + 9.239px, 16px);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
}

.line-up-note {
	color: var(--color-gray-1);
    font-size: 12px;
    font-weight: 200;
    line-height: 1.7;
	text-align: right;
    margin-top: 25px;
}
.line-up-note-2 {
	color: var(--color-gray-1);
    font-size: 12px;
    font-weight: 200;
    line-height: 1.7;
    margin-top: 25px;
}
/* --- コンテンツ部分のスタイル --- */
.tab-content-wrapper {
	width: 100%;
	max-width: 760px;
	position: relative;
}
@media (max-width: 1000px) {
	.tab-content-wrapper{
		justify-content: center;
		max-width: 100%;
	}
}
@media (max-width: 768px) {
	.tab-content-wrapper{
		width: 100%;
	}
}
.tab-content {
    display: none;
	position: absolute;
	top: 35px;
	opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease;
}
/* アクティブなコンテンツ：フェードイン */
.tab-content.active {
    display: flex;
	flex-direction: column;
	gap: 18px;
	position: relative; /* 浮かせず、親の高さに影響を与える */
    top: 0;
    left: 0;
    right: 0;
    opacity: 1;
    visibility: visible;
	background: var(--yellow-1);
}
.line-up-warp {
	display: flex;
}
@media (max-width: 1200px) {
	.line-up-warp{
		max-width: 570px;
	}
}
@media (max-width: 1000px) {
	.line-up-warp{
		max-width: 100%;
	}
}
.line-up-warp.notepc {
	flex-wrap: wrap;
}
.line-up-item {
	width: 309px;
	height: 567px;
	display: block;
	text-align: center;
	padding: 30px 35px 50px;
	box-sizing: border-box;
	position: relative;
}
.line-up-warp.notepc .line-up-item {
	width: 551.36px;
	height: 319.42px;
	text-align: left;
}
.catch {
	color: var(--color-pink-2);
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	min-height: 3em;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	width: fit-content;
    margin-inline: auto;
	position: relative;
	z-index: 1;
}
.tab-content:nth-of-type(1) .catch {
	color: var(--color-pink-2);
}
.tab-content:nth-of-type(2) .catch {
	color: var(--color-purple-1);
}
.catch::before,.catch::after {
	content: "";
	width: 9.58px;
	height: 9.84px;
}
.catch::after {
	transform: rotate(180deg);
}
.model-name {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.7;
	margin-top: 13px;
}
.spec-list {
	color: var(--color-gray-1);
	font-size: 13px;
	font-weight: 200;
	margin-top: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
}
.highlights {
	width: 200px;
	margin: 15px auto 0;
	padding-block: 15px;
	position: relative;
	z-index: 1;
}
.highlights::before,.highlights::after {
	content: "";
	width: 220px;
	height: 6px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}
.highlights-ttl {
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}
.highlights-txt {
	font-size: 13px;
	line-height: 1.7;
	margin-top: 5px;
}
.model-price {
	font-size: 21px;
	font-weight: 500;
	line-height: 1;
	margin-top: 15px;
}
.model-price .tax {
	font-size: 15px;
}

@media (max-width: 1100px) {/*375-768*/
	.contents__inner .deco-left,
	.contents__inner .deco-right {
		display: none;
	}
	.line-up .ttl-set.notepc .ttl-bg {
		width: 39.99466666666666vw;
		top: -8.266666666666666vw;
		left: 0;
	}
	.line-up-flex {
		gap: 5.333333333333334vw;
	}
	.line-up-flex-2 {
		margin-top: 80px;
	}
	.pc-block {
		gap: 15px;
	}
	.pc-block .desk-img {
		width: 100%;
		max-width: 131px;
	}
	.tab-menu {
		gap: 9.8px;
	}
	.tab-item {
		padding: 16px 15px;
		position: relative;
		display: flex;
        align-items: center;
	}
	.tab-inner {
		flex-direction: column;
		align-items: flex-start;
	}
	.ttl-cpu {
		font-size: 17px;
		gap: 10px;
	}
	.txt-cpu {
		font-size: 10px;
		padding-top: 5px;
		display: none;
	}
	.tab-item.active{
		flex-grow: 2;
	}
	.tab-item.active .txt-cpu {
		display: block;
		line-height: 1.5;
	}
	.tab-content-wrapper {
		margin-top: 20px;
	}
	.line-up-inner-flex {
		flex-direction: column;
	}
	.inner-flex-left {
		width: 100%;
	}
	.note-img {
		width: 100%;
		max-width: 260px;
		margin-inline: auto;
	}
	.line-up-warp.notepc .line-up-item {
		width: 310.37px;
		height: 423.21px;
		text-align: center;
	}
	.line-up-warp.notepc .catch {
		margin-inline: auto;
	}
	.line-up-warp.notepc .spec-list {
		align-items: center;
	}
	.contents--line-up .chara-Illust-wrap {
		display: none;
	}
}
.l-container .txt-note{
	font-size: clamp(13px, 0.657vw + 10.535px, 20px);
	font-weight: 700;
}


/* ==========================================================================
    購入特典
   ========================================================================== */
.-align-right::after {
    display: none;
}
.-align-left::after {
    display: none;
}
.bonus-item-inner{
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
/*------ bonus-01~03 特典01~03 ------*/
.bonus-01,
.bonus-02,
.bonus-03{
	display: flex;
	width: 100%;
	padding-top: 7.7%;
	gap: 5%;
}
@media (max-width: 441px) {
	.bonus-02,
	.bonus-03{
		flex-direction: column;
		padding-top: 28.6%;
	}
}
@media (max-width: 441px) {
	.bonus-01{
		flex-direction: column;
	}
}
.bonus-02,
.bonus-03{
	padding-top: 7.7%;
}
@media (max-width: 441px) {
	.bonus-02,
	.bonus-03{
		padding-top: 23.1%;
	}
}
.bonus-left{
	display: flex;
	width: 100%;
	gap: 20px;
}
@media (max-width: 441px) {
	.bonus-left{
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 10px;
	}
}
.bonus-left-deco{
	width: 15.5%;
}
@media (max-width: 768px) {
	.bonus-left-deco{
		width: 16%;
	}
}
.bonus-left-deco img{
	width: 100%;
}
.bonus-left-txt h3{
	color: var(--orange-3);
	font-size: max(
  clamp(25px, 0.225vw + 24.157px, 26px),
  clamp(26px, 2.182vw + 8.109px, 50px)
);
	font-weight: 900;
	line-height: 1.1;
	padding-top: 10px;
}
@media (max-width: 768px) {
	.bonus-left-txt h3{
		padding-top: 3.8%;
		line-height: 1.2;
	}
}
.bonus-left-txt .sub-ttl{
	color: var(--orange-3);
	font-size: clamp(13px, 0.657vw + 10.535px, 20px);
	font-weight: 700;
}
.bonus-left-txt .sub-ttl2{
	color: var(--orange-3);
	font-size: clamp(13px, 0.657vw + 10.535px, 20px);
	font-weight: 900;
	padding-top: 20px;
}
@media (max-width: 768px) {
	.bonus-left-txt .sub-ttl2{
		padding-top: 5.4%;
	}
}
.bonus-left-txt p:last-child{
	padding-top: 30px;
	font-size: clamp(11px, 0.469vw + 9.239px, 16px);
	line-height: 2.1875;
	font-weight: 500;
}
@media (max-width: 768px) {
	.bonus-left-txt p:last-child{
		padding-top: 8.9%;
	}
}
.bonus-right{
	position: relative;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	padding-block: 1.93%;
	aspect-ratio: 665/438;
}
@media (max-width: 768px) {
	.bonus-right{
		margin-top: 25px;
		padding-block: 3%;
	}
}
@media (max-width: 441px) {
	.bonus-01 .bonus-right{
		aspect-ratio: 290 / 270;
	}
}
.bonus-right-ttl{
	color: var(--orange-3);
	font-size: clamp(12px, 19.37px - 0.9vw, 16px);
	font-weight: 900;
	line-height: 1.8;
}
@media (min-width: 820px) {
	.bonus-right-ttl{
		font-size: clamp(12px, 2.31px + 1.18vw, 25px);
	}
}
@media (max-width: 768px) {
	.bonus-right-ttl{
		font-weight: 700;
		line-height: 1.5;
	}
}
.bonus-note{
	font-size: 11px;
	font-weight: 500;
	line-height: 1.5;
	padding-top: 20px;
}

.box-corners-1{
	width: 5.1%;
	height: 7.7%;
	position: absolute;
	border-top: solid 1px var(--brown-1);
	border-left: solid 1px var(--brown-1);
	top: 0;
	left: 0;
}
@media (max-width: 441px) {
	.bonus-01 .box-corners-1,
	.bonus-01 .box-corners-2,
	.bonus-01 .box-corners-3,
	.bonus-01 .box-corners-4
	{
		width: 5.4%;
		height: 5.8%;
	}
}
.bonus-03 .box-corners-1,
.bonus-03 .box-corners-2,
.bonus-03 .box-corners-3,
.bonus-03 .box-corners-4{
	width: 5.05%;
	height: 13.15%;
}
@media (max-width: 441px) {
	.bonus-03 .box-corners-1,
	.bonus-03 .box-corners-2,
	.bonus-03 .box-corners-3,
	.bonus-03 .box-corners-4
	{
		width: 5.4%;
		height: 4.57%;
	}
}
.box-corners-2{
	width: 5.1%;
	height: 7.7%;
	position: absolute;
	border-top: solid 1px var(--brown-1);
	border-right: solid 1px var(--brown-1);
	top: 0;
	right: 0;
}
.box-corners-3{
	width: 5.1%;
	height: 7.7%;
	position: absolute;
	border-bottom: solid 1px var(--brown-1);
	border-right: solid 1px var(--brown-1);
	bottom: 0;
	right: 0;
}
.box-corners-4{
	width: 5.1%;
	height: 7.7%;
	position: absolute;
	border-bottom: solid 1px var(--brown-1);
	border-left: solid 1px var(--brown-1);
	bottom: 0;
	left: 0;
}
@media (max-width: 441px) {
	.bonus-01 .box-corners-4{
		width: 5.39%;
		height: 4.99%;
	}
}
.voice-img-1{
	position: absolute;
	width: 30.08%;
	height: auto;
	top: 38.66%;
	right: 21.05%;
}
@media (max-width: 441px) {
	.voice-img-1{
		width: 46.9%;
		top: 33.66%;
		right: 13.05%;
	}
}
.voice-img-2{
	position: absolute;
	width: 26.62%;
	height: auto;
	top: 29.64%;
	left: 22.05%;
}
@media (max-width: 441px) {
	.voice-img-2{
		width: 38.62%;
		top: 24.64%;
		left: 0.05%;
	}
}
.voice-img-3{
	position: absolute;
	width: 19.85%;
	height: auto;
	top: 47.68%;
	left: 32.08%;
}
@media (max-width: 441px) {
	.voice-img-3{
		width: 32.85%;
		top: 44.65%;
		left: 12.05%;
	}
}
.bonus-right-note{
	width: 100%;
	position: absolute;
	bottom: 4.57%;
	left: 50%;
	transform: translateX(-50%);
	font-size: max(
  clamp(11px, -0.449vw + 14.685px, 13px),
  clamp(11px, 0.818vw + 4.291px, 20px)
);
	font-weight: 700;
}
/* ボイス再生 */
/* クリックできる画像にマウスカーソル（ポインター）を適用 */
.voice-img-1,
.voice-img-2,
.voice-img-3 {
  cursor: pointer;
}

/* ふわふわ拡大縮小するアニメーション定義 */
@keyframes fluffy {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08); /* 少し大きくなる（好みに応じて数値調整） */
  }
  100% {
    transform: scale(1);
  }
}

/* 音声再生中に .voice-img-3 へ付与されるクラス */
.voice-img-3.is-animating {
  animation: fluffy 1.2s ease-in-out infinite;
  transform-origin: center center; /* 拡大縮小の中心位置 */
}

/*  bonus-02 特典02 */
.bonus-02 .bonus-right{
	display: flex;
	justify-content: center;
	align-items: center;
}
.bonus-02 .bonus-right img{
	width: 70.5%;
	height: auto;
}
/*  bonus-03 特典03 */
.bonus-03 .bonus-right{
	aspect-ratio: 665/255;
	align-items: center;
	justify-content: center;
}
@media (max-width: 441px) {
	.bonus-03 .bonus-right{
		aspect-ratio: 290 / 350;
		padding-bottom: 20px;
	}
}
.bonus-wallpaper{
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
	padding-inline: 4.58%;
	gap: 5%;
}
@media (max-width: 441px) {
	.bonus-wallpaper{
		flex-direction: column;
	}
}
.bonus-wallpaper img{
	height: auto;
	border: solid 1px var(--brown-1);
}




/* ==========================================================================
    プロフィール 
   ========================================================================== */
.message{
	width: 100%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	aspect-ratio: 1300/765;
}
@media (max-width: 441px) {
	.message{
		aspect-ratio: 288 / 562;
	}
}
.speech-bubble{
	position: absolute;
	width: 50.77%;
	height: auto;
	background: url(../../gamepc/img/inabahaneru/message_speech-bubble-pc.webp);
	background-repeat: no-repeat;
	background-size: contain;
	aspect-ratio: 660/295;
	left: 15.38%;
	top: 23.53%;
	text-align: center;
}
@media (max-width: 768px) {
	.speech-bubble .sp{
		display: none !important;
	}
}
@media (max-width: 441px) {
	.speech-bubble{
		width: 100%;
		background: url(../../gamepc/img/inabahaneru/message_speech-bubble-sp.webp);
		aspect-ratio: 289 / 289;
		background-size: contain;
		background-repeat: no-repeat;
		top: 0;
		left: 0;
		margin-top: 45px;
	}
	.speech-bubble .sp{
		display: block !important;
	}
}
.speech-bubble-ttl{
	width: 75.76%;
	height: auto;
	display: flex;
	flex-direction: row;
	font-size: max(
  clamp(13px, -1.124vw + 17.213px, 18px),
  clamp(13px, 1.545vw + 0.327px, 30px)
);
	font-weight: 900;
	color: var(--orange-3);
	padding-top: 6%;
	justify-content: space-around;
	margin-inline: auto;
}
/* タブレット769px～441px */
@media (min-width: 442px) and (max-width: 769px) {
	.speech-bubble-ttl{
		font-size: 1.8vw;
	}
}
@media (max-width: 441px) {
	.speech-bubble-ttl{
		position: relative;
		font-size: 18px;
		font-weight: 700;
		padding-top: 50px;
		line-height: 1.5;
	}
}
.speech-bubble-ttl::before{
	width: 7.27%;
	height: auto;
	content: "";
	background: url(../../gamepc/img/inabahaneru/message_heart-l.webp);
	background-size: contain;
	background-repeat: no-repeat;
}
@media (max-width: 441px) {
	.speech-bubble-ttl::before{
		position: absolute;
		aspect-ratio: 36/39;
		width: 36px;
		height: auto;
		top: 40px;
		left: 0;
	}
}
.speech-bubble-ttl::after{
	width: 7.27%;
	content: url(../../gamepc/img/inabahaneru/message_heart-r.webp);
	content: "";
	background: url(../../gamepc/img/inabahaneru/message_heart-r.webp);
	background-size: contain;
	background-repeat: no-repeat;
}
@media (max-width: 441px) {
	.speech-bubble-ttl::after{
		position: absolute;
		aspect-ratio: 36/39;
		width: 36px;
		height: auto;
		top: 40px;
		right: 0;
	}
}
.speech-bubble-txt{
	font-size: max(
  clamp(9.5px, -0.787vw + 15.95px, 13px),
  clamp(9.5px, 0.955vw + 1.673px, 20px)
);
	font-weight: 700;
	padding-top: 4.5%;
	line-height: 2;
}
/* タブレット769px～440px */
@media (min-width: 442px) and (max-width: 769px) {
	.speech-bubble-txt{
		font-size: 1.3vw;
	}
}
@media (max-width: 441px) {
	.speech-bubble-txt{
		font-size: clamp(13px, 6.06vw - 9.73px, 17px);
		font-weight: 700;
	}
}
.profile-speech-img{
	position: absolute;
	width: 25.62%;
	height: auto;
	right: 14.62%;
	top: 28%;
}
@media (max-width: 441px) {
	.profile-speech-img{
		width: 79.44%;
		right: 10%;
		top: 54%;
	}
}

/* ==============================
プロフィール
============================== */
.profile-a-container{
	display: flex;
	flex-direction: column;
	background: var(--orange-2);
	border-radius: 3vw;
	aspect-ratio: 1300/823;
	gap: 4.25%;
	padding-bottom: 5.4%;
}
@media (max-width: 441px) {
	.profile-a-container{
		gap: 25px;
	}
}
.profile-img{
	width: 19.23%;
	height: auto;
	padding-top: 7.9%;
}
@media (max-width: 441px) {
	.profile-img{
		width: 200px;
	}
}
.profile-logo{
	width: 26.92%;
	height: auto;
}
@media (max-width: 441px) {
	.profile-logo{
		width: 225px;
	}
}
.p-profile-txt{
	font-size: 20px;
	font-weight: 700;
	width: 70%;
	text-align: center;
	line-height: 2;
	font-size: max(
  clamp(12px, -0.225vw + 13.843px, 13px),
  clamp(12px, 0.727vw + 6.036px, 20px)
);
}
@media (max-width: 441px) {
	.p-profile-txt{
		text-align: left;
		width: calc(100% - 40px);
	}
}
.sns-list{
	width: 100%;
	margin-top: 10px;
}
@media (max-width: 441px) {
	.sns-list{
		gap: 15px;
	}
}
.sns-list li{
	width: 4.92%;
	height: auto;
}
@media (max-width: 441px) {
	.sns-list li{
		width: 50px;
	}
}
.sns-link{
	width: 100%;
	height: auto;
}
.copy{
	font-size: max(
  	11px,
  	clamp(11px, 0.455vw + 7.273px, 16px));
	font-weight: 500;
	text-align: center;
	padding-top: 7%;
	padding-bottom: 9%;
	letter-spacing: 0.03em;
}
@media (max-width: 441px) {
	.copy{
		padding-top: 50px;
		padding-bottom: 45px;
	}
}

/* ==============================
アニメーション
============================== */
/* ホバーで少し大きく */
.hover-big {
  transition: transform 0.3s ease;
  will-change: transform;
}

.hover-big:hover {
  transform: scale(1.05);
}

/* ふわゆら */
.fuwa-yura{
	display: inline-block;
}

/* ==============================
モーダルの設定 (完全版)
============================== */

/* モーダル本体（背景含むフェード制御） */
#imageModal {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  justify-content: center;
  align-items: center;
}

#imageModal.is-open {
  opacity: 1;
}

/* オーバーレイ（暗い背景） */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* モーダル枠（中央配置レイアウト） */
.modal-container {
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  max-width: 90%;
  max-height: 90vh;
  padding-bottom: 50px;
}

/* ★ 画像とページネーションを縦並びにする枠 */
.modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* モーダル画像本体 */
#modalImg {
  max-width: 100%;
  max-height: 75vh;
  height: auto;
  object-fit: contain;
  background-color: transparent;
}

@media (max-width: 768px) {
  #modalImg {
    width: 80%;
  }
}

/* ==============================
ページネーション（ドット表示）
============================== */
.modal-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-top: 20px; /* 画像とドットの間隔 */
  z-index: 10;
}
@media (max-width: 768px) {
	.modal-pagination{
		margin-top: 30px;
	}
}
.modal-pagination .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--white-1);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.modal-pagination .dot.is-active {
  background-color: var(--orange-3);
  transform: scale(1.3);
}

/* ==============================
クローズボタン（右上固定）
============================== */
.modal-close {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: 140px;
  height: 140px;
  background-color: #ff6b00; /* オレンジ */
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: none;
  outline: none;
  z-index: 10010;
  padding: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* × マークの線 */
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  border-radius: 10px;
  width: 75px;  /* ×の長さ */
  height: 2px;  /* ×の線の太さ */
}

.modal-close::before {
  transform: rotate(45deg);
}

.modal-close::after {
  transform: rotate(-45deg);
}

#imageModal.is-open .modal-close {
  opacity: 1;
}

@media screen and (max-width: 768px) {
  .modal-close {
    width: 60px;
    height: 60px;
  }

  .modal-close::before,
  .modal-close::after {
    width: 35px;
    height: 2px;
  }
}

/* ==============================
矢印ボタン（左右Nav）
============================== */
.modal-prev, .modal-next {
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
  position: relative;
  width: 90px;
  height: 90px;
}

@media (max-width: 768px) {
  .modal-prev, .modal-next {
    width: 0;
    height: 0;
  }
}

/* 矢印の線 */
.modal-prev::before, .modal-prev::after,
.modal-next::before, .modal-next::after {
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 3px;
}

/* 上側の横線 */
.modal-prev::before, .modal-next::before {
  top: 0;
  right: 0;
  width: 90px;
  height: 8px;
}

@media (max-width: 768px) {
  .modal-prev::before, .modal-next::before {
    top: 0;
    right: 0;
    width: 45px;
    height: 5px;
  }
}

/* 右側の縦線 */
.modal-prev::after, .modal-next::after {
  top: 0;
  right: 0;
  width: 8px;
  height: 90px;
}

@media (max-width: 768px) {
  .modal-prev::after, .modal-next::after {
    top: 0;
    right: 0;
    width: 5px;
    height: 45px;
  }
}

/* 回転と位置 */
.modal-prev::before, .modal-prev::after {
  transform: none;
  transform-origin: top right;
}
.modal-next::before, .modal-next::after {
  transform: none;
  margin-right: 0;
  transform-origin: top right;
}

.modal-prev {
  left: -65px;
  transform: rotate(-135deg);
}

@media (max-width: 767px) {
  .modal-prev {
    left: 0;
  }
}

.modal-next {
  right: -65px;
  transform: rotate(45deg);
}

@media (max-width: 767px) {
  .modal-next {
    right: 0;
  }
}

.modal-prev:hover, .modal-next:hover {
  background: transparent;
}
/* モーダル画像専用のフェードイン */
.modal-fade-in {
  animation: modalFadeInKey 0.3s forwards !important;
}

@keyframes modalFadeInKey {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal.is-open .modal-overlay{
	height: calc(100% - 50px);
}

@media (max-width: 414px) {
	.txt-tsume{
	letter-spacing: -0.08em !important;
}
}