@charset "UTF-8";
/*=============================================================

	Date: 2025-03-18
	CSS Document ： ミニツク 漫画をもっと楽しむプログラム

=============================================================*/
/*------------------------------------
仮想LP用ベース
------------------------------------*/
.fca_cat-hero {
		z-index: 1;
}
.fca_cat-hero, .sr_page-shopping-result__free {
		overflow: visible !important;
}
.sr_page-shopping-result__free .fca_container__in {
		max-width: 100%;
}
.sr_page-shopping-result__free .fca_container {
		padding: 0;
}
.fca_page-shop-category__body {
		margin-top: 0;
}
/*------------------------------------

ベース

------------------------------------*/
.pc {
		display: block;
}
.sp {
		display: none;
}
.bold_ct {
		font-weight: bold;
}
.fsc_gheader-wrap {
		transition: all 0.3s;
}
body.fixed-body .fsc_gheader-wrap {
		opacity: 0;
		pointer-events: none;
}
/*------------------------------------

wrapper

------------------------------------*/
#wrapper {
		width: 100%;
		line-height: 1.7;
		letter-spacing: 0.07em;
		text-align: center;
		background-image: url("../images/bg.jpg");
		background-repeat: repeat;
		background-position: center;
		background-size: 30px;
		background-attachment: fixed;
		color: #2f475d;
		position: relative;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		animation: fadeIn_ct 0.5s 0.8s both;
}
#wrapper img {
		height: auto;
		max-width: 100%;
}
#wrapper-inner {
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		max-width: 1170px;
}
/* hover */
#wrapper a:hover {
		text-decoration: none;
}
@media (hover: hover) {
		#wrapper a {
				transition: all 0.3s;
		}
		#wrapper a:hover {
				opacity: 0.8;
		}
}
/*------------------------------------

共通ボタン

------------------------------------*/
.btn-wrap {}
.btn-wrap a {
		color: #2f475d;
		font-size: 132%;
		font-weight: bold;
	font-family: "秀英角ゴシック銀 B";
		}

.btn-wrap a img {}
.btn-wrap a .link-txt {
		text-align: left;
		white-space: nowrap;
		line-height: 1.4;
}
.btn-wrap a .link-txt .item-name {
		display: block;
		text-align: center;
		font-weight: bold;
		line-height: 1.4;
}
.btn-wrap a .link-txt .min-txt {
    font-size: 80%;
}
.btn-wrap a .link-txt .price-id {
    display: block;
    text-align: center;
}
.btn-wrap a .link-txt .price-id .num-id {
		font-size: 120%;
		font-family: "Poppins", sans-serif;
		font-weight: 600;
		font-style: normal;
		margin: 0 0 0 0.2em;
		letter-spacing: 0;
}
.btn-wrap a .link-txt .price-id .tax-id {
		font-size: 60%;
}
.btn-wrap a .link-txt .detail-id {position: relative;display: inline-block;margin: 0.4em 0 0;font-size: 136%;}
.btn-wrap a .link-txt .detail-id span {
		color: #FFFFFF;
		background: #ea6d99;
		position: relative;
		padding: 0.4em 2.3em;
		border: 0.07em solid #2f475d;
		border-radius: 5em;
		font-weight: bold;
		display: inline-block;
		text-align: center;
		letter-spacing: 0.1em;
}
.btn-wrap a .link-txt .detail-id::before {
		content: '';
		display: block;
		border: 0.07em solid #2f475d;
		border-radius: 5em;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0.25em;
		left: 0;
		background-image: url(../images/link_bg.jpg);
		background-repeat: repeat;
		background-position: center bottom;
		background-size: 100%;
}
.btn-wrap a .link-txt .detail-id span::after {
		display: block;
		width: 1.3em;
		height: 100%;
		content: '';
		background-image: url("../images/link_arrow.svg");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		position: absolute;
		top: 0;
		right: 0.4em;
		transition: all 0.3s;
}

/* hover */
@media (hover: hover) {
		.btn-wrap a:hover {
				/* opacity: 0.7; */
		}
		.btn-wrap a:hover .link-txt .detail-id span::after {
				transform: scale(1.15)
		}
}


/*===================================

スマホコンテンツ

===================================*/
#sp-contents {
		background-color: #fdede4;
		width: 600px;
		text-align: center;
		padding: 0em 0;
		/* overflow: hidden; */
}
#sp-contents p {
		font-family: "秀英角ゴシック銀 B","游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴ Pro W3", "ヒラギノ角ゴ W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic", "メイリオ", "Meiryo", "Noto Sans", "Noto Sans CJK JP", "system-ui", sans-serif;
		line-break: strict;
		font-size: 140%;
		margin: 0;
		font-weight: bold;
}
/*------------------------------------

サイド　カテゴリナビ

------------------------------------*/
#side-nav {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 200px;
		width: calc(100% - 650px);
		position: sticky;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
}
#category-nav-pc {
		width: 80%;
		max-width: 350px;
		font-size: 70%;
}
#category-nav-pc .side-inner {
    background: #e7f3ea;
    border: 0.15em solid #2f475d;
    border-radius: 2em;
    padding: 2.3em 2em;
	
	display: none;
}
#category-nav-pc .side-inner .side-logo {
		width: 92%;
		margin: 0 auto 1em;
		display: block;
}
#category-nav-pc .btn-wrap a .link-txt .detail-id {
	font-size:119%;
}
@media (max-width: 1200px) {

	#category-nav-pc {
		font-size: 1vw;
}
}
@media (max-width: 1000px) {

	#category-nav-pc {
		font-size: 0.85vw;
}
}

.contents-box {}
/*------------------------------------

タイトル

------------------------------------*/
#title {
		background-image: url(../images/ttl_bg.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		aspect-ratio: 1/1.562;
		position: relative;
}
#title .titleinner {}
#title .titleinner .ashirai01 {
		position: absolute;
		width: 105%;
		max-width: none;
		top: 5.5%;
		left: -5%;
}
#title .titleinner .ashirai02 {
		position: absolute;
		top: 24.7%;
		right: 10%;
		width: 23.5%;
		z-index: 1;
}
#title .titleinner .ashirai03 {
		position: absolute;
		width: 80%;
		top: 3%;
		left: 11.1%;
	opacity: 0;
		animation: fadeInBottom_ct 0.8s 1.8s both;
}
#title .titleinner .title-txt {
		position: absolute;
		width: 92%;
		bottom: 7%;
		left: 5.5%;
	 opacity: 0;
		animation: fadeInLeft_ct 0.8s 2.5s both;
}
#title .titleinner .title-txt .ttl-main {}
/*------------------------------------

リード

------------------------------------*/
#lead {}
#lead img {
		width: 84%;
		margin: 2em 0 0.6em;
}
/*------------------------------------

商品リンク

------------------------------------*/
#item-link-head {}
/* リンク */
#item-link-head .btn-wrap {}
#item-link-head .btn-wrap a {
}
#item-link-head .btn-wrap a img {}
/*------------------------------------

イントロ

------------------------------------*/
#intro {
    margin: 4em 0 1em;
}
#intro .c01 {}
#intro .c02 {
    width: 74%;
    margin: 2.5em  0 1em;
}
#intro .c03 {}
#intro .c04 {}
/*------------------------------------

体験一覧

------------------------------------*/
#taiken-wrap {}
.taiken-box {
    position: relative;
}
.taiken-box .taiken-head {}
.taiken-box .c01 {}
.taiken-box .c02 {}
.taiken-box p {}
/* 体験01 */
#taiken01 {
    background: #e7f3ea;
    padding-bottom: 5em;
}
#taiken01::after,
#taiken03::after{display: block;width: 100%;height: 50%;content: '';background: #e7f3ea;position: absolute;top: 100%;left: 0;}


#taiken01 .taiken-head {}
#taiken01 .c01 {}
#taiken01 .c02 {
    width: 85%;
    margin: 1em 0 0;
}
#taiken01 p {
    margin: 1em auto 0;
    text-align: left;
    display: block;
    width: max-content;
}
/* 体験02 */
#taiken02 {}
#taiken02 .taiken-head {}
#taiken02 .c01 {}
#taiken02 .c02 {}
/* 体験03 */
#taiken03 {
    margin: 5em 0 0;
    background: #e7f3ea;
    padding-bottom: 5em;
}
#taiken03 .taiken-head {}
#taiken03 .c01 {}
#taiken03 p {
    line-height: 1.4;
}
/* 体験04 */
#taiken04 {
    padding-bottom: 6em;
}
#taiken04 .taiken-head {}
#taiken04 .c01 {}
#taiken04 .c02 {
    width: 78%;
    margin: -12% 0 0;
}
/* 体験05 */
#taiken05 {
    background: #e7f3ea;
}
#taiken05 .taiken-head {}
#taiken05 .c01 {}
#taiken05 .c02 {}
#taiken05 p {
    text-align: left;
    position: absolute;
    bottom: 10%;
    left: 45%;
}
/*------------------------------------

商品リンク

------------------------------------*/
#item-link-bottom {
    background-image: url(../images/item_bg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size:contain;
    aspect-ratio: 100/156;
    font-size: 113%;
    margin: 3em 0;
}
/* リンク */
#item-link-bottom .btn-wrap {
    padding: 20% 0 0;
}
#item-link-bottom .btn-wrap a {}
#item-link-bottom .btn-wrap a img {}
/*------------------------------------

プロフィール

------------------------------------*/
#profile {
		border: 0.1em dotted #2f475d;
		border-radius: 2em;
		width: 90%;
		margin: 2em auto 5em;
		padding: 1em 2em 1.5em;
		/* color: #000; */
}
#profile .prof-ttl {
		color: #d694be;
		background: #FFF;
		display: block;
		padding: 0.2em 1em;
		margin: -1em auto 0;
		width: max-content;
		font-size: 131%;
}
#profile .prof-head {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 1em;
		padding-bottom: 0.5em;
		/* margin: 0 0 1em; */
		/* border-bottom: 1px solid #FFF; */
}
#profile .prof-head .prof-photo {
		width: 26%;
}
#profile .prof-head .prof-name {
		text-align: left;
		margin-top: 0.8em;
}
#profile .prof-head .prof-name .prof-sub {
		display: block;
		line-height: 1.3;
		font-weight: bold;
		font-size: 95%;
		margin-bottom: 0.2em;
}
#profile .prof-head .prof-name .prof-main {
		font-weight: bold;
		font-size: 170%;
}
#profile .prof-head .prof-name .prof-main .min-txt {
    font-size: 80%;
}
#profile .prof-txt p {
    font-size: 100%;
    text-align: justify;
}
/*------------------------------------

没入グッズ

------------------------------------*/
#goods-wrap {
    overflow: hidden;
}
#goods-wrap .goods-ttl {
    width: 68%;
    margin-bottom: -5%;
}
/* グッズ01 */
#goods-wrap .goods-box {
    position: relative;
}
#goods-wrap .goods-box a {
    color: #2f475d;
    font-weight: bold;
    text-align: left;
    display: block;
    position: absolute;
    z-index: 2;
    top: 70%;
    left: 52%;
    width: 50%;
    font-family: "秀英角ゴシック銀 B";
}
#goods-wrap .goods-box .goods-main {
    max-width: none;
    width: 104%;
    margin-left: -2%;
}
#goods-wrap .goods-box a .link-txt {
    display: block;
    /* position: absolute; */
    padding-bottom: 2em;
}
#goods-wrap .goods-box a .link-txt .item-name {
    text-align: left;
    line-height: 1.4;
    display: inline-block;
}
#goods-wrap .goods-box a .link-txt .price-id {
    display: block;
    font-size: 90%;
    letter-spacing: 0;
}
#goods-wrap .goods-box a .link-txt .price-id .num-id {
    font-size: 120%;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0;
    margin-left: 0.2em;
}
#goods-wrap .goods-box a .link-txt .price-id .tax-id {
    font-size: 80%;
    letter-spacing: 0;
}
#goods-wrap .goods-box a .goods-btn {
    width: 3em;
    /* height: 100%; */
    aspect-ratio: 1;
    content: '';
    background-image: url(../images/botsunyu_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 99%;
    position: absolute;
    top: 76%;
    left: 73%;
    transition: all 0.3s;
}
/* hover */
@media (hover: hover) {
		#goods-wrap .goods-box a:hover .goods-btn {
				transform: scale(1.15)
		}
}


#goods-wrap .goods-box-inner {}
/* グッズ01 */
#goods-wrap #goods01 {
    margin-bottom: -13%;
    /* z-index: 1; */
}
#goods-wrap #goods01 a {}
#goods-wrap #goods01 .goods-main {}
#goods-wrap #goods01 a .link-txt {
    /* top: 67%; */
    /* left: 52%; */
}
#goods-wrap #goods01 a .goods-btn {}
/* グッズ02 */
#goods-wrap #goods02 {
    margin-bottom: -12%;
}
#goods-wrap #goods02 a {    top: 63%;
    left: 55%;}
#goods-wrap #goods02 .goods-main {
    pointer-events: none;
}
#goods-wrap #goods02 a .link-txt {

    }
#goods-wrap #goods02 a .goods-btn {
    top: 37%;
    left: 67%;
}
/* グッズ03 */
#goods-wrap #goods03 {
    margin-bottom: -12%;
    z-index: 1;
}
#goods-wrap #goods03 a {    top: 61%;
    left: 51%;}
#goods-wrap #goods03 .goods-main {}
#goods-wrap #goods03 a .link-txt {

    }
#goods-wrap #goods03 a .goods-btn {
    top: 75%;
    left: 75%;
}
/* グッズ04 */
#goods-wrap #goods04 {}
#goods-wrap #goods04 a {    top: 75%;
    left: 56%;}
#goods-wrap #goods04 .goods-main {}
#goods-wrap #goods04 a .link-txt {

    }
#goods-wrap #goods04 a .goods-btn {
    top: 43%;
    left: 65%;
}
/*------------------------------------

リスト アンカー

------------------------------------*/
#list-anchor {
		letter-spacing: 0.10em;
		font-size: 126%;
		padding: 2em 0 2em;
}
#list-anchor::after {
		display: block;
		width: 100%;
		height: 1.3em;
		content: '';
		background-image: url(../images/list_arrow.svg);
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-top: 0.5em;
}
#list-anchor a {
		/* font-family: "游ゴシック", "Yu Gothic", "YuGothic"; */
		font-weight: bold;
		line-height: 1.4;
		display: block;
		color: #2f475d;
}
/*------------------------------------

アニメーション

------------------------------------*/
.fade-item {
		opacity: 0;
}
.fade_ct {
		animation: fadeInBottom_ct 1s 0.0s both;
}
@keyframes fadeIn_ct {
		0% {
				opacity: 0;
		}
		100% {
				opacity: 1;
		}
}
@keyframes fadeInBottom_ct {
		0% {
				transform: translateY(1em);
				opacity: 0;
		}
		100% {
				transform: translateY(0px);
				opacity: 1;
		}
}
@keyframes fadeInLeft_ct {
		0% {
				transform: translateX(1em);
				opacity: 0;
		}
		100% {
				transform: translateX(0px);
				opacity: 1;
		}
}
@keyframes fadeInRight_ct {
		0% {
				transform: translateX(-1em);
				opacity: 0;
		}
		100% {
				transform: translateX(0px);
				opacity: 1;
		}
}
/*===================================

1000px以下

===================================*/
@media (max-width: 920px) {}
/*===================================

880px以下

===================================*/
@media (max-width: 880px) {}
/*===================================

スマホ

===================================*/
@media (max-width: 768px) {
		#wrapper {}
		#side-nav {
				display: none;
		}
		.pc {
				display: none;
		}
		.sp {
				display: block;
		}
		#sp-contents {
				width: 100%;
		}
		#wrapper {
				font-size: 3.1vw;
				overflow: hidden;
		}
}