@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--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リセット*/
#kimibara p,#kimibara a,#kimibara ul li,#kimibara h1,#kimibara h2,#kimibara h3,#kimibara h4,#kimibara h5,#kimibara h6,#kimibara h7{
	line-height: 1;
}

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

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

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

/*ページ内の文章指定*/
#kimibara p{
    text-align: center;/*中央揃え*/
    color: #261515;/*文字色*/
    font-size: 1.3rem;/*フォントサイズ*/
	letter-spacing:  0em;/*文字間*/
	line-height: 2.4rem;/*行間*/
}

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

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

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

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

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

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

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

/********************************************************************
	top
********************************************************************/
#kimibara .camTerm{
	font-size: 1.6667rem;
	line-height: 1;
	color: #fff;
	font-weight: normal;
	background: #fe6e87;
}

/********************************************************************
	nav
********************************************************************/
#kimibara nav{
	width: 100%;
	background: #ffa2b2;
}

/********************************************************************
	character
********************************************************************/
#kimibara #character{
	background: #ffd3ce;
}

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

/********************************************************************
	story__block01
********************************************************************/
/*セクション背景*/
#kimibara #story .story__block01--bg{padding: 0 0 20px 0; background: #ffa2b2;}

/* === story__frame　コマサム=== */
#kimibara #story .story__frame--04{margin: 0 auto -45px auto; position: relative; top: -45px; z-index: 0;}

/* === story__text キャッチ=== */
#kimibara #story .story__text--02{position: absolute; bottom: -25px; left: 35px}
#kimibara #story .story__text--03{position: absolute; right: 30px; top: 40px;}
#kimibara #story .story__text--04{position: relative; z-index: 10;}
.story__text--04-02 {position: relative; right: 30px;  bottom: 17px;}
#kimibara #story .story__text--05{    padding: 0 0 28px 0; position: absolute; right: 0; bottom: -28px;} 

/********************************************************************
	story__block02
********************************************************************/
/* === story__frame--bg 背景 === */
#kimibara #story .story__block02--bg{
	padding: 30px 0 0 0;
	background: #ffa2b2 url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg01.png) no-repeat;
	background-position: top right 150px;
}

#kimibara #story .story__block02--innner-bg{
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/story__block02--innner-bg.png) no-repeat;
	background-size: 100%;
}

/* === story__text キャッチ=== */
#kimibara #story .story__text--07{position: relative; top: 50px;}

/* === story__frame　コマサム=== */
#kimibara #story .story__frame-07{padding: 70px 0 180px 0;}

#kimibara #story .story__frame-07-02{position: absolute; top: -30px; right: 0; z-index: 10;}/*story__frame-07-03の-20px分引くので-50px→-30pxに変更*/
#kimibara #story .story__frame-07-03{position: relative; top: 0; z-index: 0;}
#kimibara #story .story__frame-07-04{position: absolute; bottom: 0; right: 10px; z-index: 0;}

/********************************************************************
	story__block03
********************************************************************/
/* === story__frame--bg 背景 === */
#kimibara #story .story__block03-bg-01{
	background: linear-gradient(to bottom, rgba(254, 255, 190, 0) 0%, #feffbe 3%, #deff5c 50%, #eefba8 90%);
}

#kimibara #story .story__block03-bg-02{
	background: linear-gradient(to bottom, #eefba8 0%, #cef153 50%);
}

/* === story__text キャッチ=== */
#kimibara #story .story__text--10{position: relative; top: 50px; left: -40px;}
#kimibara #story .story__text--11{position: absolute; top: 20px; right: 40px;}
#kimibara #story .story__text--12{position: relative; top: 70px;}

/* === コマサム=== */
#kimibara #story .story__frame-13-text-12{
	padding: 0 0 150px 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg02.png) no-repeat;
	background-position: top center;
}

#kimibara #story .story__frame-14{margin: -110px auto 0 auto;}

#kimibara #story .story__text-13-frame-15{
	margin: 0 0 -80px 0;
	padding: 0 0 80px 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg03.png) no-repeat;
	background-position: top center;
}

/********************************************************************
	story__block04
********************************************************************/
/* === story__frame--bg 背景 === */
#kimibara #story .story__block04-bg{
	padding: 80px 0 0 0;
	background: linear-gradient(to bottom, rgba(254, 255, 190, 0) 0%, #a9bfda 20%, #5e7694 70%, #92adce 90%);
}

/* === story__text キャッチ=== */
#kimibara #story .story__text--14{position: absolute; top: 30px; z-index: 10;}
#kimibara #story .story__text-15-frame-18{margin: 0 0 -30px 0; position: relative; top: -30px;}
#kimibara #story .story__text-15{position: absolute; top: -40px; right: 0; left: 0; z-index: 20;}


/* === コマサム=== */
#kimibara #story .story__frame-18{position: relative; z-index: 10;}
#kimibara #story .story__frame-19{position: relative; top: -30px; z-index: 0;}

/********************************************************************
	story__block05
********************************************************************/
#kimibara #story .story__block05--bg{
	background: linear-gradient(180deg, #92adce 0%, #fe6e87 10%);
}

#kimibara #story .story__text-16-frame-20{
	padding: 0 0 30px 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg04.png) no-repeat;
	background-position: left bottom;
}

#kimibara #story .story__text-17-frame-21{
	margin: -70px 0 0 0;
	padding: 70px 0 0 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg05.png) no-repeat;
	background-position: right top;
}

#kimibara #story .story__text-17{position: absolute; top: 10px; right: 10px;}

#kimibara #story .story__frame-22-text-18{
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg06.png) no-repeat;
	background-position: right top;
}

#kimibara #story .story__text-18-frame-23{
	margin: -160px 0 -140px 0;
	padding: 160px 0 140px 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg07.png) no-repeat;
	background-position: center top;
}

#kimibara #story .story__text-19{position: relative; z-index: 10;}
#kimibara #story .story__frame-24{position: relative; top: -45px; z-index: 0;}

#kimibara #story .story__text-20{position: absolute; bottom: 0; left: 0; right: 0;}

#kimibara #story .story__text-19-frame-24{
	padding: 0 0 60px 0;
	background: url(/auto/images/fix/title/250831_kimibara/pcc/story/bg/bg08.png) no-repeat;
	background-position: center bottom;	
}

/********************************************************************
	comic
********************************************************************/
#kimibara #comic{
	background: #ffd3ce;
}

#kimibara #comic .comic__box{padding: 30px 0 30px 0;}
#kimibara #comic .comic__wrap{margin: 0 auto; width: 730px;}

/* === comic__box-bg=== */
#kimibara #comic .comic__box--bgcolor01{background: #ffb4c4;}
#kimibara #comic .comic__box--bgcolor02{background: #ffb5b9;}
#kimibara #comic .comic__box--bgcolor03{background: #ffc7d1;}

/* === comic__hutaride--bg=== */
#kimibara #comic .comic__hutaride--bg{padding: 60px 0 0 0;	background: #ffa2b2;}
#kimibara #comic .comic__hutaride--bg > .comic__wrap{padding: 0 0 50px 0;}

/* === comic__other--bg=== */
#kimibara #comic .comic__other--bg{padding: 60px 0 80px 0;}

/********************************************************************
	スライダー
********************************************************************/
#kimibara #comic .slider-common{
	margin: 0 auto;
	padding: 20px 20px 5px 20px;
	width: 550px;
	box-sizing: border-box;
}

#kimibara #comic ul.main-slider{box-shadow: 4px 4px 4px #861d22;}

/*矢印*/
#kimibara #comic .prev-arrow{left: -40px;}
#kimibara #comic .next-arrow{right: -40px;}

#kimibara #comic .prev-arrow,
#kimibara #comic .next-arrow {
    display: block;
    width: 50px;
    height: 50px;
	border: 3px solid #861d22;
    background: #fff;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%); /* ← これで上下中央に補正 */
}

#kimibara #comic .next-arrow{box-shadow: 2px 2px 4px #861d22;}

#kimibara #comic .prev-arrow {
    transform: rotate(180deg);
	box-shadow: -2px -2px 4px #861d22;
}

#kimibara #comic .prev-arrow::before,
#kimibara #comic .next-arrow::before{
    position:absolute;
    content: "";
    width:14px;
    height:14px;
    border-right: 3px solid #861d22;
    border-top: 3px solid #861d22;
    top:0;
    bottom:0;
    left:0;
    right:5px;
    margin:auto;
    transform:rotate(45deg);
}

#kimibara #comic .comic__copyright{
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.6;
}

/********************************************************************
	footer
********************************************************************/
#kimibara footer{
	margin: 0 auto;
	width: 770px;
	background: #fe6e87;
}

#kimibara footer p{
	font-size: 1.6rem;
	color: #fff;
	line-height: 1.6;
}