@charset "UTF-8";

/********************************************************************
	追加共通
********************************************************************/
.align-self-flex-end{align-self: flex-end;}/*下揃え　親要素がflex*/

.scroll-target {
  scroll-margin-top: 80px; /* ジャンプした先のセクション上に必要な余白を指定 */
}

.mincho {
font-family: '游明朝 Medium', serif;/*フォント*/
font-size: 1.8rem;
}
/********************************************************************
	アニメーション
********************************************************************/
/*htmlにはclass名【blurTrigger】のみ入れる*/
#tonarinostella .blur{
  animation-name:blurAnime;
  animation-duration:1.8s;
  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;
  }
}
 
.blurTrigger{
    opacity: 0;
}

#tonarinostella .float {
	width: 770px;
	margin: 0 auto;
}

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

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

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

/******
**************************************************************
	キャンペーン期間
********************************************************************/
#tonarinostella .camTerm {
	background-color: #3a5a6a;
	color: #FFFFFF; /* 文字色指定 */
}

/********************************************************************
	イントロダクション
********************************************************************/
#tonarinostella #introduction {
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_01.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
}

#tonarinostella #introduction .introduction-button{
    width: 700px;
    margin: 0 auto;
}


#tonarinostella #introduction .copy_01{
	position: absolute;
	top: 10px;
	right: 0;
	z-index:90;
}

#tonarinostella #introduction .copy_02{
	position: absolute;
	bottom: 230px;
	left: 0;
	z-index:90;
}

#tonarinostella #introduction .copy_03{
	position: absolute;
	top: 1100px;
	left: 50%;
  	transform: translateX(-50%);
}

/********************************************************************
	ストーリー 002・背景ピンク
********************************************************************/
/* 各背景 */
#tonarinostella #story .coma02-07{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_02.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
}

#tonarinostella #story .heading_story{
	z-index: 100;
    position: absolute;
    top: -78px;
}

#tonarinostella #story .copy_04{
	position: absolute;
    right: 15px;
    top: 160px;
}

#tonarinostella #story .copy_05{
	position: absolute;
	top: 860px;
	z-index: 90;
}

#tonarinostella #story .copy_06{
	position: absolute;
   	left: 100px;
    top: 23px;
	
}
   
#tonarinostella #story .coma_05{
	 display: inline-block;
}

#tonarinostella #story .coma_06{
	 display: inline-block;
}

#tonarinostella #story .copy_07{
	position: absolute;
   	right: 28px;
    top: -30px;
}

#tonarinostella #story .coma07-copy08{
	 padding: 0 0 60px 0;
}

/********************************************************************
	ストーリー 003・背景ブルーグリーン
********************************************************************/
#tonarinostella #story .coma08-13{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_03.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
	margin-top: -130px;
}

#tonarinostella #story .coma_11{
	 display: inline-block;
}

#tonarinostella #story .coma_12{
	position: absolute;
    top: 2058px;
	right: 15px;
}

#tonarinostella #story .copy_09{
	position: absolute;
    left: 20px;
    top: 2390px;
}

#tonarinostella #story .copy_10{
	position: absolute;
    right: 35px;
    bottom: 125px;
}

/********************************************************************
	ストーリー004・背景オレンジ
********************************************************************/
#tonarinostella #story .coma14-28{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_04.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
	margin-top: -130px;
}

#tonarinostella #story .coma_15,#tonarinostella #story .coma_16,#tonarinostella #story .coma_17,#tonarinostella #story .coma_18{
	display: inline-block;
}



#tonarinostella #story .coma_16-2{
	text-align: right;
	right: 20px;
}

#tonarinostella #story .copy_12{
	position: absolute;
	right: 0px;
    bottom: -45px;
	z-index: 90;
}

#tonarinostella #story .copy_14{
	position: absolute;
   	right: 0px;
    top: -60px;
}

#tonarinostella #story .coma_22{
	 display: inline-block;
}


#tonarinostella #story .copy_15{
	position: absolute;
   	right: 10px;
    top: 800px;
}


#tonarinostella #story .story004_wrap{
	max-width: 702px;
	margin: 0 auto;
}

#tonarinostella #story .coma_24{
	 display: inline-block;
}

#tonarinostella #story .coma_26{
	 display: inline-block;
}

#tonarinostella #story .copy_16{
	position: absolute;
   	left: 0px;
    bottom: 45px;
}

#tonarinostella #story .copy_17{
	position: absolute;
    bottom: 790px;
    left: 20px;
}

/********************************************************************
	キャラクター・背景イエロー
********************************************************************/
#tonarinostella #character .character01-04{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_05.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
	margin-top: -130px;
}

#tonarinostella #character .character01-04-2{
	padding: 5px 0 125px 0;
}

#tonarinostella #character .heading_character{
	z-index: 90;
    position: absolute;
    top: -78px;
}


/********************************************************************
	アウトロダクション・背景グリーン
********************************************************************/
#tonarinostella #outroduction .coma29-31{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_06.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
	margin-top: -130px;
}

#tonarinostella #outroduction .coma29-31-2{
	padding: 15px 0 125px 0;
}

#tonarinostella #outroduction .coma_30{
	 display: inline-block;
}

#tonarinostella #outroduction .coma_31{
	 display: inline-block;
}

/********************************************************************
	コミック・オレンジ
********************************************************************/
#tonarinostella #comic .comic-purchase{
	background: url(/auto/images/fix/title/250711_tonarinostella//pcc/background/bg_07.png) no-repeat;
	background-size: 100%;
	position: relative;
	z-index: 90;
	margin-top: -130px;
}

#tonarinostella #comic .comic-purchase-2{
	padding: 130px 0 20px 0;
}

#tonarinostella #comic .heading_comic{
	z-index: 90;
    position: absolute;
    top: -78px;
}

#tonarinostella #comic .comic_wrap{
	width: 700px;
	margin: 0 auto;
}

#tonarinostella #comic .copyright_01{
	width: 770px;
	background-color: #ff8d49;
	padding: 5px 0 2px 0;
	margin: 0 auto;
	color: #FFFFFF;
}
/********************************************************************
	上部クーポンarea非表示
********************************************************************/
.contents_right .couponArea2022{display: none;}