@charset "UTF-8";
/* CSS Document */
/*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;margin-bottom:0;padding-left:0;}
img,abbr,acronym,fieldset{border:0;}
img {width:100%;display:block;}
video {width: 100%;}
a {text-decoration:none;display: inline-block;}
a:focus,*:focus {outline:none;}
html {width:100%;font-size:62.5%;scroll-behavior: smooth;}
 /**, *:before, *:after {box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing: border-box;-ms-box-sizing:border-box;}
 base.css　リセット */
    *, *:before, *:after{
        box-sizing: content-box;
    }
body {width:100%;}
/*reset END*/

* {overflow-wrap: break-word;word-wrap: break-word;}/*連続英単語*/
.selector {font-feature-settings: "palt";}/*文字詰め*/


:root {
	--white:      #ffffff;
	--gold:       #BAAC89;
	--gray:       #575756;
	--lightgray:  #cccccc;
	--bggray:     #F5F5F5;
	--miffy:      #FA838B;
	--bgmiffy:    #FFE3E5;
	--moomin:     #408284;
	--bgmoomin:   #81D4D7;
	--synapusyu:  #A4599A;
	--bgsynapusyu:#E6E3F8;
	--kidea:      #A06E0F;
	--bgkidea:    #FFFBCC;
	--disneybaby: #EE846F;
	--bgdisneybaby:#FFFFFF;
	--rilakkuma:  #547CB9;
	--bgrilakkuma:#ECF3FB;
	--sesame:     #FCD106;
	--bgsesame:   #00AC4B;
	--rocket:     #1A1311;
	--bgrocket:   #F9BE02;
	--back:       #F8F2E7;
	--bgmain:     #F5EDDD;
	--bgbody:     #F8F2E7;
}
body{
    
}
#character {
	-webkit-text-size-adjust:100%;
	font-size:1.6rem;
	color: var(--gray);
	line-height:1.8;
	letter-spacing: 0.2rem;
	font-feature-settings: "palt";
	box-sizing: border-box;
	background-color:  var(--bgbody);
	background-size: cover;
	background-attachment: fixed;
	position: relative;
	vertical-align:middle; 
    padding: 0;
    text-align: center;
}

#character .copyright{
	width: 90%; margin: 0 auto;
	color: #999; font-size: 10px;
	text-align: left; letter-spacing: 0;
	font-weight: 100; line-height: 1.2;
}
#character .copyright img{
	max-height: 8px; width: auto; 
	margin-right: 1rem;  line-height: 1.2;
	display: inline-block;
}
#character img.cornerR{border-radius: 34px;}

#character .btn {
    background: var(--white);
    border-radius: 9999px;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 15px 25px;
    color: var(--gray);
    line-height: 1.8;
    text-decoration: none;
    transition: 0.3s ease-in-out;
    font-weight: 500;
}
#character .btn img{width: 50%;}

#character .btn:hover {
    background: var(--lightgray);
}
#character .btn:after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 3px solid var(--gray);
    border-right: 3px solid var(--gray);
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
#character .btn.buy {width: 80px; padding: 10px; margin: 0;}
#character .btn.buy.l-gray {border: 1px solid var(--lightgray);}
#character .btn.buy.b-r {margin-left: auto;}
#character .btn.buy img{width: 24px;}
#character .btn.buy:after{display: none;}
#character .btn.gray{
	border: 2px solid var(--gray); margin-bottom: 5%;
	-webkit-box-shadow: 0 7px 0 var(--gray);
	box-shadow: 0 7px 0 var(--gray);
}
#character .btn.gold{
	width: 50%; border: 2px solid var(--gold); margin-bottom: 5%;}
#character .btn.gold img{max-height: 18px;}
#character .btn.gold:after{
	border-top: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
}
#character h1 {width: 30%; margin: 15% auto 1rem; text-align: center;}
#character h2 {width: 60%; margin: 0 auto; text-align: center;}
#character h1 img,
#character h2 img{margin-bottom: 1.5rem;}
#character .center-container{
	box-shadow: 0px 0px 10px #B5AD98;
	overflow: auto;

	/*スクロールバー非表示（IE・Edge）*/
	-ms-overflow-style: none;
	/*スクロールバー非表示（Firefox）*/
	scrollbar-width: none;
	font-weight: bold;
}

/*メインイメージ*/
#character .main_contents{padding: 4% 0;}
#character img.main__img{
	width: 90%; margin: 0 auto 3.2rem;
	display: block;
	border-radius: 52px;
}
#character .main__txt{margin-bottom: 3.2rem;}


#character .scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
#character .scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
#character .scroll-infinity__list--left {
  animation: infinity-scroll-left 80s infinite linear 0.5s both;
}
#character .scroll-infinity__item {
  width: calc(100vw / 3.5);
	margin: 0 5px;
}
#character .scroll-infinity__item > img {
  width: 90%;
	border-radius: 10px;
}


/*flex*/
#character .flex{display: flex;}
#character .flex.center{align-items: center;}
#character .flex.end{align-items: flex-end;}
#character .flex{display: flex;}
#character .flex.row-r{ flex-direction: row-reverse;}

/*News*/
#character .news_contents{
	width: 80%; margin: 10% auto;
	padding: 4%;
	border-radius: 25px;
	background-color: #F5EBD3;
	font-weight: bold;
	border: 2px solid var(--white);
}
#character .news_contents h2 {width: 40%; margin: 0 auto 1rem 0 !important;}
#character .news_contents h2 img {width: auto;}

/*キャラクターコンテンツ*/
#character .chara_contents{
	position: relative;
	padding: 10% 0 5%;
	border-radius: 62px 62px 0 0;
}
#character .chara__main_txt{margin-bottom:10%; color: var(--gray) !important;}
#character .chara_item__main,
#character .chara_item__sub {width: 90%; margin: 0 auto;}
#character .chara_item__sub [class*="img__"]{position: relative;}
.item-info {padding: 15px 5% 20px;}
.item-info.tx-l{text-align: left;}
.item-info.tx-r{text-align: right;}
a.item-link {color: var(--gray);}
a.item-link:hover {opacity: 1;}
.item-name {font-size: 12px; margin-bottom: .5rem; font-weight: bold;}
.item-name strong {display: block;}
img[class*="illust__"] {position: absolute;}

/*miffy*/ 
#character #miffy {padding: 10% 0 12%; background-color: var(--bgsesame);}
#character .chara_contents.__miffy {margin-top: -10%; color: var(--miffy); background-color: var(--bgmiffy);}
#character .chara_contents.__miffy .chara__main_img {max-width: 150px; margin: -20% auto 3rem;}
#character .chara_contents.__miffy a.item-link {color:var(--miffy);}
.img__miffy-01 {width: 55%; margin-bottom: -10%;}
.img__miffy-03 {width: 34%; margin-top: 12%; margin-right: -9%; z-index: 2;}
.img__miffy-04 {width: 50%; margin-top: -5%;}
.c__miffy-03 {margin-top: -15% !important;}
.illust__miffy-snuffy{max-width: 28%; top: 30%; left: -4%;}
.illust__miffy-bird  {max-width: 20%; left: 5%; bottom: 10%;}

/*moomin*/
#character #moomin {padding: 10% 0 12%; background-color: var(--bgmiffy);}
#character .chara_contents.__moomin {margin-top: -10%; color: var(--moomin); background-color: var(--bgmoomin);}
#character .chara_contents.__moomin .chara__main_img {max-width: 285px; margin: -20% auto 3rem;}
.img__moomin-01 {width: 68%; margin-bottom: -10%;}
.c__moomin-01 .item-info {margin-left: -20%;}
.img__moomin-03 {width: 72%; margin-top: -5%;}
.c__moomin-03   {margin-top: -15% !important;}
.illust__moomin-nyoro{max-width: 26%; top: 28%; right: 4%;}
.illust__moomin-me  {max-width: 40%; left: 5%; bottom: 8%;}

/*synapusyu*/
#character #synapusyu {padding: 10% 0 12%; background-color: var(--bgrilakkuma);}
#character .chara_contents.__synapusyu {margin-top: -10%; color: var(--synapusyu); background-color: var(--bgsynapusyu);}
#character .chara_contents.__synapusyu .chara__main_img {width: 43%; margin: -20% auto 3rem;}
#character .chara_contents.__synapusyu .chara_item__main{width: 100%; position: relative;}
img[src*="item-synapusyu-01txt"]{width: 50%; position: absolute; z-index: 2; top: 9%; right: -20%;}
.img__synapusyu-01 {width: 50%; margin-bottom: -10%;}
.c__synapusyu-02 .item-info {position: absolute; z-index: 3; top: 17%;}
.img__synapusyu-02 {position: relative; z-index: 2;}
.img__synapusyu-03 {width: 50%; margin-top: -8%;}
.c__synapusyu-03   {margin: 10% auto !important;}
.illust__synapusyu-circle{max-width: 26%; top: 25%; right: 0;}
.illust__synapusyu-nyu   {max-width: 25%; left: 5%; bottom: 18%;}

/*kidea*/
#character #disneykidea { background-color: var(--bgmoomin);}
#character .chara_contents.__kidea {margin-top: 20%; color: var(--kidea); background-color: var(--bgkidea);}
#character .chara_contents.__kidea .chara__main_img {width: 34%; margin: -20% auto 3rem;}
#character .chara_contents.__kidea .chara_item__main{width: 100%; position: relative;}
img[src*="item-kidea-01txt"]{width: 50%; position: absolute; z-index: 2; top: 9%; right: -20%;}
.img__kidea-01 {width: 80%;}
.c__kidea-01 .item-info {position: absolute; z-index: 3; top: 0; right: 0;}
.img__kidea-01{position: relative; z-index: 2;}
.c__kidea-02  {position: relative; z-index: 1; margin-top: -5%;}
.img__kidea-02 {width: 60%; margin-top: -8%;}
.c__kidea-03   {margin: 5% auto 0 !important;}
.img__kidea-03 {width: 50%;}
.img__kidea-04 {width: 44%; margin-left: 5%;}
.illust__kidea-square {max-width: 11%; top: -25%; right: 4%;}
.illust__kidea-semicircle{max-width: 11%; bottom: 30%; left: -1%;}
.illust__kidea-triangle  {max-width: 11%; right: 0; bottom: 15%;}

/*disneybaby*/
#character #disneybaby {padding: 10% 0 12%; }
#character .chara_contents.__disneybaby {margin-top: -10%; color: var(--disneybaby); background-color: var(--bgdisneybaby);}
#character .chara_contents.__disneybaby .chara__main_img {width: 48%; margin: -20% auto 3rem;}
img[src*="item-disneybaby-01txt"]{width: 50%; position: absolute; z-index: 2; top: 9%; right: -20%;}
.c__disneybaby-01{position: relative; margin-bottom: 5% !important;}
.c__disneybaby-01 .item-info {position: absolute; z-index: 3; bottom: 0; right: 0;}
.img__disneybaby-02 {width: 60%; margin-left:10%;}
.c__disneybaby-03 {position: relative; margin: -5% auto 10% !important;}
.c__disneybaby-03 .item-info {position: absolute; z-index: 3; bottom: -15%; right: 0;}
.illust__disneybaby-01 {max-width: 20%; top: -5%; left: -2%;}
.illust__disneybaby-02txt {max-width: 48%; top: 20%; left: -20%;}

/*rilakkuma*/
#character #rilakkuma {padding: 10% 0 12%; background-color: var(--bgkidea);}
#character .chara_contents.__rilakkuma {margin-top: -10%; color: var(--rilakkuma); background-color: var(--bgrilakkuma);}
#character .chara_contents.__rilakkuma .chara__main_img {width: 75%; margin: -20% auto 3rem;}
#character .chara_contents.__rilakkuma .chara_item__main{width: 100%; margin-top: -10%;}
.c__rilakkuma-01 .item-info {position: relative; z-index: 2;}
.img__rilakkuma-01 {width: 60%;}
.c__rilakkuma-02 .item-info {margin-top: -15%; position: relative; z-index: 2;}
.img__rilakkuma-02 {position: relative; z-index: 2;}
.c__rilakkuma-03 {position: relative; z-index: 2;margin: 0 auto 10% !important;}
.img__rilakkuma-03 {width: 45%; margin-left: 10%;}

.illust__rilakkuma-01{max-width: 50%; top: -43%; left: -2%;}
.illust__rilakkuma-02{max-width: 22%; top: -3%; left: -7%;}
.illust__rilakkuma-03{max-width: 21%; top: -13%; right: -2%;}
.illust__rilakkuma-03txt{max-width: 35%; left: 50%; top: 0;}


/*sesame*/
#character #sesame {padding: 10% 0 12%; background-color: var(--bgdisneybaby);}
#character .chara_contents.__sesame {margin-top: -10%; color: var(--sesame); background-color: var(--bgsesame);}
#character .chara_contents.__sesame .chara__main_img {width: 46%; margin: -20% auto 3rem;}
#character .chara_contents.__sesame .chara_item__main{width: 100%; position: relative;}
#character .chara_contents.__sesame .chara__main_txt{color: var(--white)!important;}
.img__sesame-01{width:100%; position: relative; z-index: 2;}
.c__sesame-02  {position: relative; z-index: 1; margin-top: 20%!important;}
.img__sesame-02 {width: 50%;}
.c__sesame-03   {position: relative; z-index: 1; margin: 5% auto 10% !important;}
.img__sesame-03 {width: 60%; margin-left: -10%;}
.illust__sesame-item02 {max-width: 67%; top: -68%; left: -6%; z-index: 2;}
.illust__sesame-item03 {max-width: 33%; top: 0; left: 20%; z-index: 2;}

/*rocket*/
#character #rocket {padding: 10% 0 25%; background-color: var(--bgsynapusyu);}
#character .chara_contents.__rocket {margin-top: -12%; color: var(--rocket); background-color: var(--bgrocket);}
#character .chara_contents.__rocket .chara__main_img {width: 38%; margin: -30% auto 3rem;}
#character .chara_contents.__rocket .chara_item__main{width: 100%; position: relative;}
.c__rocket-01  {position: relative; z-index: 1; }
.c__rocket-02  {margin-top: 10%!important;}
.img__rocket-02 {width: 75%;}
.txt__rocket-02 {position: absolute; top: 0; left: 0;}
.c__rocket-03   {position: relative; z-index: 1; margin: 5% auto 10% !important;}
.img__rocket-03 {width: 60%; margin-top: -30%!important;}
.illust__rocket-txt01 {max-width: 34%; top: 30%; right: 0; z-index: 2;}



@media screen and (min-width: 768px) {/*PC*/
#character #sp-navi,
#character .sp{display: none;}

#character .gl-nav{width: 70%; margin: 0 auto 5%;}
#character img.main__img{margin:0 auto 2rem;}
#character .fixed-container{
	border-radius: 62px;
	position: fixed;
	width: calc(50% - 280px);
	height: 90svh;
	padding: 2% 0;
	text-align: center;
}
#character .fixed-container.left {top: 50%; left:0; z-index: 0;transform: translateY(-50%);}
#character .fixed-container.right{top: 50%; right: 0;transform: translateY(-50%);}
#character .wrapper {
	display: grid;
	grid-template-columns:
	auto
	min(55ch, 100%)
	auto;
	margin: 0 auto;
	text-align: center;
}
#character .wrapper > * {
	grid-column: 2;
	background: var(--bgmain);
	border-radius: 62px;
	margin: 3% auto;
	max-width: 480px;
}
#character .full-bleed {
  width: 100%;
  grid-column: 1 / 4;
}
#character .scroll-infinity__item {	width: calc(100vw / 9); margin: 0 5px;}

/*#character .news_contents{
	position: fixed;
	width: 66%;
	right: 0; bottom: 0; margin: 0;
	padding: 4% 10%;
	text-align: left;
	border-radius: 50px 0 0 0;
	background-color: #F5EBD3;
	font-weight: bold;
}
#character .news_contents h2 {margin: 0 auto 1rem 0 !important;}
#character .news_contents h2 img {width: auto;}
#character .news_contents .btn.gold{width: 60%; margin: 0 auto 0 0 !important;}*/
	
.item-name {font-size: 13px;}
	
/*Pickup コンテンツ*/
#character .slick-slide{height: 70%;}
#character .slick-prev:before, .slick-next:before{color: var(--gold);}
#character .pickup_wrap{width: 70%; margin: 0 auto;}
#character .pickup_contents{
	background-color: var(--white)!important;
	border-radius: 50px;
}
#character .pickup_box{position: relative; padding-top: 10%;}
#character .pickup_box img[src*="pick-"]{border-radius: 50px; margin-bottom: 5%;}
#character .pickup_contents .btn.gold{width: 60%;}
#character .pickup_box .btn-check{
	position: absolute; width: 35px;
  animation: poyopoyo 2s ease-out infinite;
  opacity: 1;
}
.link__miffy-01{top: 31%; left: 7%;}
.link__miffy-02{top: 16%; right: 7%;}
.link__miffy-03{bottom: 16%; right: 19%;}

.link__moomin-01{top: 11%; right: 12%;}
.link__moomin-02{bottom: 10%; left: 4%;}
.link__moomin-03{bottom: 32%; right: 5%;}
	
.link__synapusyu-01{top: 28%; left: 17%;}
.link__synapusyu-02{top: 9%; right: 30%;}
.link__synapusyu-03{bottom: 26%; left: 9%;}
	
.link__kidea-01{top: 13%; left: 7%;}
.link__kidea-02{top: 24%; right: 10%;}
.link__kidea-03{bottom: 23%; left: 35%;}
	
.link__disneybaby-01{top: 17%; left: 13%;}
.link__disneybaby-02{top: 22%; right: 9%;}
.link__disneybaby-03{bottom: 16%; left: 15%;}

.link__sesame-01{top: 10%; right: 22%;}
.link__sesame-02{bottom: 38%; right: 2%;}
.link__sesame-03{bottom: 15%; left: 8%;}		
	
.link__rilakkuma-01{top: 8%; right: 16%;}
.link__rilakkuma-02{bottom: 22%; right: 16%;}
.link__rilakkuma-03{bottom: 15%; left: 6%;}	
	
.link__rocket-01{top: 6%; left: 36%;}
.link__rocket-02{bottom: 40%; right: 3%;}
.link__rocket-03{bottom: 20%; left: 7%;}
}

@media screen and (max-width: 767px) {/*SP タブレット*/
	#character .pc,
	#character .fixed-container{display: none;}
	#character .main__txt {padding: 0 4%;}
	
	
/*ハンバーガーメニュー*/
.hamburger__close,
.hamburger__open{
	width: 80px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 100;
}
.sp-navi__navi{padding: 5%;}
.sp-navi__navi .btn-insta{margin-top: 2rem;}
img[src*="nav-dadway.png"]{max-width: 70px;}	
	
.nav-unshown {
  display: none;
}

/* 閉じる用の薄黒カバー */
#nav-close {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: none;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 50%);
}

/* 中身 */
#sp-navi-in {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
  max-width: 560px;
  height: 100%;
  overflow: auto;
  background: #fff;
  transition: .3s ease-in-out;
  transform: translateX(105%);
}

/* チェックが入ったらもろもろ表示 */
#nav-input:checked ~ #nav-close {
  display: block;
}

/* 中身を表示（スライド） */
#nav-input:checked ~ #sp-navi-in {
  box-shadow: 6px 0 25px rgb(0 0 0 / 15%);
  transform: translateX(0%);
}


}

/*アニメーション*/
@keyframes infinity-scroll-left {
from {
  transform: translateX(0);
}
  to {
  transform: translateX(-100%);
}
}
@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(1.2);
  }
}