@charset "UTF-8";

/********************************************************************
	追加
********************************************************************/
/* Margin Bottom */
.u-mb--5    { margin-bottom: 5px !important; }
.u-mb--10   { margin-bottom: 10px !important; }
.u-mb--15   { margin-bottom: 15px !important; }
.u-mb--20   { margin-bottom: 20px !important; }
.u-mb--25   { margin-bottom: 25px !important; }
.u-mb--30   { margin-bottom: 30px !important; }
.u-mb--35   { margin-bottom: 35px !important; }
.u-mb--40   { margin-bottom: 40px !important; }
.u-mb--45   { margin-bottom: 45px !important; }
.u-mb--50   { margin-bottom: 50px !important; }
.u-mb--60   { margin-bottom: 60px !important; }
.u-mb--65   { margin-bottom: 65px !important; }
.u-mb--70   { margin-bottom: 70px !important; }
.u-mb--75   { margin-bottom: 75px !important; }
.u-mb--80   { margin-bottom: 80px !important; }
.u-mb--90   { margin-bottom: 90px !important; }
.u-mb--100  { margin-bottom: 100px !important; }
.u-mb--110  { margin-bottom: 110px !important; }
.u-mb--120  { margin-bottom: 120px !important; }
.u-mb--130  { margin-bottom: 130px !important; }
.u-mb--150  { margin-bottom: 150px !important; }
.u-mb--160  { margin-bottom: 160px !important; }
.u-mb--180  { margin-bottom: 180px !important; }
.u-mb--200  { margin-bottom: 200px !important; }
.u-mb--210  { margin-bottom: 210px !important; }
.u-mb--220  { margin-bottom: 220px !important; }

/* Margin Bottom (Negative) */
.u-mb--minus10 { margin-bottom: -10px !important; }
.u-mb--minus15 { margin-bottom: -15px !important; }
.u-mb--minus20 { margin-bottom: -20px !important; }
.u-mb--minus25 { margin-bottom: -25px !important; }
.u-mb--minus30 { margin-bottom: -30px !important; }
.u-mb--minus35 { margin-bottom: -35px !important; }
.u-mb--minus40 { margin-bottom: -40px !important; }

/* Margin Top */
.u-mt--20   { margin-top: 20px !important; }
.u-mt--25   { margin-top: 25px !important; }
.u-mt--35   { margin-top: 35px !important; }
.u-mt--50   { margin-top: 50px !important; }
.u-mt--80   { margin-top: 80px !important; }

/* Margin Right */
.u-mr--10   { margin-right: 10px !important; }
.u-mr--12   { margin-right: 12px !important; }
.u-mr--15   { margin-right: 15px !important; }
.u-mr--20   { margin-right: 20px !important; }
.u-mr--25   { margin-right: 25px !important; }
.u-mr--30   { margin-right: 30px !important; }

/* Margin Left */
.u-ml--10   { margin-left: 10px !important; }
.u-ml--15   { margin-left: 15px !important; }
.u-ml--80   { margin-left: 80px !important; }

/* Padding Top */
.u-pt--10   { padding-top: 10px !important; }
.u-pt--20   { padding-top: 20px !important; }
.u-pt--30   { padding-top: 30px !important; }

/* Padding Bottom */
.u-pb--20   { padding-bottom: 20px !important; }
.u-pb--30   { padding-bottom: 30px !important; }

/* Width */
.u-width--8   { width: 8% !important; }
.u-width--10  { width: 10% !important; }
.u-width--15  { width: 15% !important; }
.u-width--16  { width: 16% !important; }
.u-width--17  { width: 17% !important; }
.u-width--18  { width: 18% !important; }
.u-width--19  { width: 19% !important; }
.u-width--20  { width: 20% !important; }
.u-width--21  { width: 21% !important; }
.u-width--22  { width: 22% !important; }
.u-width--23  { width: 23% !important; }
.u-width--24  { width: 24% !important; }
.u-width--25  { width: 25% !important; }
.u-width--26  { width: 26% !important; }
.u-width--27  { width: 27% !important; }
.u-width--28  { width: 28% !important; }
.u-width--29  { width: 29% !important; }
.u-width--30  { width: 30% !important; }
.u-width--31  { width: 31% !important; }
.u-width--32  { width: 32% !important; }
.u-width--33  { width: 33% !important; }
.u-width--34  { width: 34% !important; }
.u-width--35  { width: 35% !important; }
.u-width--36  { width: 36% !important; }
.u-width--37  { width: 37% !important; }
.u-width--38  { width: 38% !important; }
.u-width--39  { width: 39% !important; }
.u-width--40  { width: 40% !important; }
.u-width--41  { width: 41% !important; }
.u-width--42  { width: 42% !important; }
.u-width--43  { width: 43% !important; }
.u-width--44  { width: 44% !important; }
.u-width--45  { width: 45% !important; }
.u-width--46  { width: 46% !important; }
.u-width--47  { width: 47% !important; }
.u-width--48  { width: 48% !important; }
.u-width--49  { width: 49% !important; }
.u-width--50  { width: 50% !important; }
.u-width--51  { width: 51% !important; }
.u-width--52  { width: 52% !important; }
.u-width--53  { width: 53% !important; }
.u-width--54  { width: 54% !important; }
.u-width--55  { width: 55% !important; }
.u-width--56  { width: 56% !important; }
.u-width--57  { width: 57% !important; }
.u-width--58  { width: 58% !important; }
.u-width--59  { width: 59% !important; }
.u-width--60  { width: 60% !important; }
.u-width--65  { width: 65% !important; }
.u-width--70  { width: 70% !important; }
.u-width--80  { width: 80% !important; }
.u-width--81  { width: 81% !important; }
.u-width--82  { width: 82% !important; }
.u-width--83  { width: 83% !important; }
.u-width--84  { width: 84% !important; }
.u-width--85  { width: 85% !important; }
.u-width--88  { width: 88% !important; }
.u-width--90  { width: 90% !important; }
.u-width--100 { width: 100% !important; }

/* Text Alignment */
.u-text-align--left   { text-align: left !important; }
.u-text-align--right  { text-align: right !important; }
.u-text-align--center { text-align: center !important; }

/* Image Alignment */
.u-img-align--right img { margin: 0 0 0 auto !important; }/*右寄せ*/
.u-img-align--left img  { margin: auto 0 0 0 !important; }/*左寄せ*/

/* Position */
.u-position--relative { position: relative; }
.u-position--absolute { position: absolute; }

/* Flex */
.u-flex { display: flex; }

/* Flex Justify */
.u-flex-justify--space-between { justify-content: space-between; }
.u-flex-justify--space-around  { justify-content: space-around; }
.u-flex-justify--start         { justify-content: flex-start; }
.u-flex-justify--flex-end      { justify-content: flex-end; }
.u-flex-justify--space-evenly  { justify-content: space-evenly; }
.u-flex-justify--center        { justify-content: center; }

/* Flex Align */
.u-flex-align--center    { align-items: center; }
.u-flex-align--flex-end  { align-items: flex-end; }

/* Flex Wrap and Direction */
.u-flex--wrap         { flex-wrap: wrap; }
.u-flex--row-reverse  { flex-direction: row-reverse; }
.u-flex--column       { flex-direction: column; }

/* Flex Grow/Shrink */
.u-flex-shrink--0     { flex-shrink: 0; }
.u-flex-grow--1       { flex-grow: 1; }
.u-margin-top--auto   { margin-top: auto; }

/* Utility */
.u-overflow--hidden   { overflow: hidden; }

/********************************************************************
	共通
********************************************************************/
html {
  scroll-behavior: smooth; /* スムーススクロール */
}

/*line-heightリセット*/
#redmudan p,#redmudan a,#redmudan ul li,#redmudan h1,#redmudan h2,#redmudan h3,#redmudan h4,#redmudan h5,#redmudan h6,#redmudan h7{
	line-height: 1;
}

/*buttonリセット*/
#redmudan button{padding: 0; background: none; border: none;}

/*ページ全体の指定*/
#redmudan{
	margin: 0 auto;/*中央揃え*/
	max-width: 770px;/*最大横幅*/
	background: #b51f1f;/*背景色*/
	text-align: center;/*テキスト中央揃え*/
}

/*ページの内側共通*/
#redmudan .wrap{
	margin: 0 auto;/*中央揃え*/
	padding: 40px 0 80px 0;/*要素の上下余白*/
	max-width: 720px;/*最大横幅*/
	box-sizing: border-box;
}

/*ページ内の文章指定*/
#redmudan p{
    text-align: left;/*中央揃え*/
    color: #201613;/*文字色*/
	font-size: 1.333rem;
	letter-spacing:  0em;/*文字間*/
	line-height: 1.25;/*行間*/
}

#redmudan img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	width: auto;
	height: auto;
}

#redmudan .img_width100 img{width: 100%;}
#redmudan .img_auto img{width: auto!important;}

/*色*/
#redmudan .orange{color: #f19007!important;}
#redmudan .red{color: #f60e39!important;}
#redmudan .wine-red{color: #c93b66!important;}
#redmudan .blue{color: #0fc3c8!important;}
#redmudan .light-blue{color: #0fc3c8!important;}
#redmudan .green{color: #00a1be!important;}
#redmudan .pink{color: #ee008c!important;}
#redmudan .white{color: #fff!important;}
#redmudan .black{color: #00000a!important;}

/*太字*/
#redmudan .bold{font-weight: bold;}

/*リスト*/
#redmudan ul{
	list-style: none;
}
#redmudan ul li{
	color: #24281f;
	text-align: center;/*中央揃え*/
    font-size: 1.8rem;/*フォントサイズ*/
	letter-spacing:  0em;/*文字間*/
	line-height: 2.8rem;/*行間*/
}

/********************************************************************
	アニメーション
********************************************************************/
/*じわっと表示*/
#redmudan .blur{
	animation-name:blurAnime;
	animation-duration:2s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
	from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

	to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
	}
}
 
#redmudan .blurTrigger{
    opacity: 0;
}

/*ふわっと*/
/* アニメーション適用クラス */
#redmudan .fade-in {
	animation-name: fadeInAnime;
	animation-duration: 1.5s; /* 表示スピード（ゆっくり） */
	animation-delay: 0.3s; 
	animation-fill-mode: forwards;
	animation-timing-function: ease-out;
}

/* 初期状態：透明 */
#redmudan .fadeTrigger {
	opacity: 0;
}

/* アニメーション定義 */
@keyframes fadeInAnime {
  from {
	opacity: 0;
	transform: translateY(0px); 
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

 /********************************************************************
	リンク
********************************************************************/
#redmudan a{
	color: #1e1e1e;
}

#redmudan a:hover{text-decoration: none;}

/********************************************************************
	追従ボタン
********************************************************************/
#redmudan .float {
	width: 770px;
	margin: 0 auto;
}

#redmudan .floating {
	position: fixed;
	left: auto;
	bottom: 0;
	display: none;
	z-index: 300;
}

#redmudan .floating a {
	display: block;
	padding: 8px;
	text-decoration: none;
}

#redmudan.floating a:hover {
	opacity: 1;
}

/********************************************************************
	top
********************************************************************/
#redmudan .campaign__time{
	padding: 14px 14px 14px 14px;
	background: #201613;
	text-align: center;
	font-size: 1.6667rem;
	color: #ecdfa8;
	letter-spacing: 0.1rem;
}

/********************************************************************
	共通
********************************************************************/
/*タイトル画像*/
#redmudan h2{position: absolute; top: -45px; z-index: 100;}

/*box*/
#redmudan .common__box--content{
	padding: 30px 30px 30px 30px; 
	width: 100%;
	background-color: #ecdfa8;
	border: solid 12px #201613;
	background-image: 
		url(/auto/images/fix/title/250919_redmudan/pcc/common/box__bg--top-left.png),
		url(/auto/images/fix/title/250919_redmudan/pcc/common/box__bg--top-right.png), 
		url(/auto/images/fix/title/250919_redmudan/pcc/common/box__bg--bottom-left.png),
		url(/auto/images/fix/title/250919_redmudan/pcc/common/box__bg--bottom-right.png);
	background-position:
		top 8px left 8px,
		top 8px right 8px,
		bottom 8px left 8px,
		bottom 8px right 8px;
	background-repeat: no-repeat;
}

/*タイトル画像あり__story以外のwrap*/
#redmudan .wrap__common{
	margin: 0 auto;/*中央揃え*/
	padding: 90px 0 65px 0;/*要素の上下余白*/
	max-width: 720px;/*最大横幅*/
	box-sizing: border-box;
}

/*背景__花*/
#redmudan .common__bg--flower{
	background-image: url(/auto/images/fix/title/250919_redmudan/pcc/common/bg__flower.png);
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100%;
}

/*背景透過__黒*/
#redmudan .common__bg--transparent-black{
	background-color: rgba(47, 23, 20, 0.6);
}

/********************************************************************
	slider__共通
********************************************************************/
#redmudan .common__prev-arrow,
#redmudan .common__next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    border: 4px solid #201613;
    background: #fbec01;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#redmudan .common__prev-arrow::before,
#redmudan .common__next-arrow::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-right: 4px solid #201613;
    border-top: 4px solid #201613;
    top: 50%;
    left: 50%;
}

/* ←方向（左に少しずらす） */
#redmudan .common__prev-arrow::before {
    transform: translate(-40%, -50%) rotate(225deg);
}

/* →方向（右に少しずらす） */
#redmudan .common__next-arrow::before {
    transform: translate(-60%, -50%) rotate(45deg);
}

		
/********************************************************************
	story__共通
********************************************************************/
/*story__wrap*/
#redmudan #story .story__wrap{
	margin: 0 auto;/*中央揃え*/
	padding: 0 0 0 0;/*要素の上下余白*/
	max-width: 740px;/*最大横幅*/
	box-sizing: border-box;
}

/*左右の背景パターン*/
#redmudan #story .story__bg{
	padding: 84px 0 0 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__background--pattern.png) repeat-y left top, url(/auto/images/fix/title/250919_redmudan/pcc/story/story__background--pattern.png) repeat-y right top;
}

/*storyの画像を一番上に指定*/
#redmudan #story .story__bg div img {position: relative; z-index: 100;}

/*グラデーション01*/
#redmudan #story .story__bg .story__bg-gradation01{
	padding:0 0 60px 0;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(32, 22, 19, 1) 15%);
}

#redmudan #story .story__bg .story__bg-gradation02{
	background-image: linear-gradient(180deg, rgba(32, 22, 19, 1) 35%, rgba(255, 255, 255, 0) 60%);
}

/********************************************************************
	story__キャッチ
********************************************************************/
#redmudan #story .story__bg .story__catch--02-01{position: absolute; top: 15px; right: 10px; z-index: 100;}

#redmudan #story .story__bg .story__catch--02-02{position: absolute; bottom: 15px; left: 10px; z-index: 100;}

#redmudan #story .story__bg .story__catch--04-01{position: absolute; top: 0; left: 15px; z-index: 100;}

#redmudan #story .story__bg .story__catch--04-02{position: absolute; bottom: 0; right: 0; z-index: 100;}

#redmudan #story .story__bg .story__catch--05-02{position: relative; top: 45px;}

#redmudan #story .story__bg .story__catch--06-02{position: relative; top: 45px;}

#redmudan #story .story__bg .story__catch--08{position: absolute; bottom: -60px; right: 0; left: 0; z-index: 100;}

#redmudan #story .story__bg .story__catch--09-01{position: absolute; top: -5px; right: 0; z-index: 200;}

#redmudan #story .story__bg .story__catch--09-02{position: absolute; top: -5px; left: 0; z-index: 200;}

/********************************************************************
	story__背景個別-花
********************************************************************/
#redmudan #story .story__bg .story__frame--01{background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat right -14px bottom 140px;}

#redmudan #story .story__bg .story__frame--02{
	margin: -80px 0 0 0;
	padding: 80px 0 0 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat left -14px top;
	position: relative;
	z-index: 1;
}

#redmudan #story .story__bg .story__frame--10{
	padding: 30px 0 65px 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat right -14px top -10px, url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat left -14px bottom;
}

#redmudan #story .story__frame--11{margin: -25px auto 0 auto;}

#redmudan #story .story__frame--12{
	margin: -10px 0 0 0;
	padding: 40px 0 50px 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat right -14px top -10px, url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--flower.png) no-repeat left -14px bottom;
}

#redmudan #story .story__bg .story__frame--13{margin: -20px 0 0 0;}

/********************************************************************
	story__背景個別-雲
********************************************************************/
/*背景一番最初の雲*/
#redmudan #story .story__bg::before {
	content: "";
	position: absolute;
	top: 45px;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--cloud01.png) no-repeat;
	z-index: 0; 
	pointer-events: none; /* 背景がクリックなどに干渉しないように */
}

#redmudan #story .story__bg .story__frame--02-03{
	margin: -60px 0 -74px 0;
	padding: 60px 0 124px 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--cloud02.png) no-repeat top center,url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--cloud03.png) no-repeat bottom center;
}

#redmudan #story .story__bg .story__frame--07{
	padding: 0 0 20px 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--cloud04.png) no-repeat bottom -18px center;
}

#redmudan #story .story__catch--10-11{
	padding: 50px 0 70px 0;
	background: url(/auto/images/fix/title/250919_redmudan/pcc/story/story__bg--cloud05.png) no-repeat top -10px center;
}

/********************************************************************
	character__slider
********************************************************************/
/*矢印*/
#redmudan #characters .character__prev-arrow{left: -10px;}
#redmudan #characters .character__next-arrow{right: -10px;}

/********************************************************************
	empress-wu
********************************************************************/
#redmudan #empress-wu .common__box--content{
	outline: 2px solid #ecdfa8;
}

#redmudan #empress-wu.common__bg--flower{
	background-position: bottom -110px center;
}
	
/********************************************************************
	scenes 
********************************************************************/
/*矢印*/
#redmudan #scenes .scenes__prev-arrow{left: 6px;}
#redmudan #scenes .scenes__next-arrow{right: 6px;}

#redmudan #scenes .scenes__slider-01,
#redmudan #scenes .scenes__slider-02,
#redmudan #scenes .scenes__slider-03{border: 3px solid #201613;}


/* Slick dots（●）のスタイル */
#redmudan #scenes .slick-dots {
    display: flex !important;
    justify-content: center;
    padding: 0;
    list-style: none;
	position: relative!important;/*slicksliderのcss設定解除*/
	bottom: 0!important;/*slicksliderのcss設定解除*/
}

#redmudan #scenes .slick-dots li {
    margin: 0 5px 30px 5px;
}

#redmudan #scenes .slick-dots button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2f1714;
    border: none;
    cursor: pointer;
    padding: 0;
}

#redmudan #scenes .slick-dots .slick-active button {
    background: #fbec01;
	border: 2px solid #2f1714;
}

/*下の●、不要な右下の色を消す*/
.slick-dots li.slick-active button:before,.slick-dots li button:before{color: transparent!important;}

/********************************************************************
	book
********************************************************************/
#redmudan #book .book__logo{margin: -5px 0 -23px 0;}
#redmudan #book .book__campaign{margin: 0 0 -9px 0;}

/********************************************************************
	footer
********************************************************************/
#redmudan footer{
	margin: 0 auto;
	width: 770px;
	background: #201613!important;
}

#redmudan footer p{
	text-align: center;
	color: #ecdfa8;
	font-size: 1.6rem;
	line-height: 1.6;
}