@charset "utf-8";

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

*:focus {outline: none;}
html{overflow: auto;}
body {width:100%;height:auto;margin: 0; /* 余白の削除 */padding: 0;/* 余白の削除 */font-size: 13px; overflow-x: hidden;
	 font-family:'Rounded Mplus 1c','Century Gothic','Meiryo','ms pgothic', sans-serif;line-height:2;color: #7D6150;letter-spacing: 0.5px;text-align: center;}
body a{
	text-decoration: none;
  color: #40B4BE;
	vertical-align: middle;
	-webkit-transform: perspective(1px) translateZ(0);
	-ms-transform: perspective(1px) translateZ(0);
	transform: perspective(1px) translateZ(0);
	-webkit-transition-duration: 0.3s;
	-ms-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: transform;
	transition-property: transform;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
}
body a:hover{color:#DAB10C;}
body a img:hover{
	-ms-filter: brightness(1.1);transition-duration: 0.3s;
	-moz-filter: brightness(1.1);transition-duration: 0.3s;
	-o-filter: brightness(1.1);transition-duration: 0.3s;
	filter: brightness(1.1);transition-duration: 0.3s;


	-webkit-transform: translateY(5px);transform: translateY(5px);cursor:pointer;
	transition-duration: 0.3s;
}
body img{
	max-width: 100%;
}

@media screen and ( min-width:570px )
{
body{min-width:1200px;}
.bonus_big2{display: none;}
.bonus_big{display: block;}
.lineuplist li{overflow: hidden;position: relative;vertical-align: middle;display: inline-block;min-width: 350px;min-height: 595px;margin: 10px;border-radius: 10px;background-color: rgba(255,255,255,0.8);box-shadow:0 0 10px #f4e3ff;}
.sort li{display: inline-block;margin: 5px;}
.bonus_chara{position: absolute;right: -100px;top:100px;z-index: 2;}
/*スライド*/
.slick-box{width: 100%;margin: 0 auto;position: relative;top:60px;min-height: 100vh;}
.slick-box div{width: 100%;min-height: 1359px;min-width: 1200px;background-position:top,center;background-size: cover;}
.slide01{background-image: url(../images/slide01.png);}
.slide02{background-image: url(../images/slide02.png);}
.slide03{background-image: url(../images/slide03.png);}
.slide04{background-image: url(../images/slide04.png);}
/*文字*/
.toptxt01_2{display: none;}
.toptxt01{position: absolute;top:70px;left:582px;z-index: 3;}
.toplogo{position: absolute;top:660px;left:165px;z-index: 3;}
.toplogo2{display: none;}
.topkira{position: absolute;top:180px;left:-110px;}
.topimg.hatsubai{}
	.topimg.hatsubai img{display: block; margin:5px auto;position: relative;z-index: 3;}
.white{padding: 10px;width: 100%;height:;background-color: rgba(255,255,255,0.7);position: absolute;top:860px;}
.whitebase{width: 85%;max-width: 1100px;position: relative;left:0;right: 0;margin:-400px auto 30px;border-radius: 10px;padding: 20px 0;background-color: rgba(255,255,255,0.8);box-shadow:0 0 10px #f4e3ff;}
#tapeimg{min-width: 350px;}
.yoyaku_ballon{position: absolute;top:-20px;right:270px;z-index: 3;}


/*
#gloval-nav {display: none;}
#nav-toggle {display: none;}
*/
nav.menu{display: none;}
footer{height: 50px;}
}

.dlbanner{
	position: relative;
	top:-450px;
}

.download{
	padding: 70px 0;
	min-width: 1280px;
}

.download ul{
	margin-top: 30px;
	margin-left: 20px;
}

.download li{
	display: inline-block;
	position: relative;
		margin: -20px -20px;
}

.dl_base{width: 630px;}


.form{
	width: 600px;
	border-radius: 0px;
	vertical-align: middle;
  position: absolute;
  margin:0 auto;
  position: absolute;
  top:265px;
  left: -160px;
	text-align: center;
	font-weight: 600;
	font-size:17px;
  z-index: 3;
}

.text, textarea, .dropdown, .textarea {
	height:14px;
  width: 250px;
	border:1px solid #B9A6A6;
	padding: 5px;
	border-radius: 0px;
	color: #000;
	background: #fff;
  text-align: center;
  vertical-align: middle;
}
.mailbtn {
	height:28px;
	width:80px;
	border:0px;
	border-radius: 10px;
	padding: 4px 8px;
	color: #ffffff;
	cursor: pointer;
	font-weight: bold;
	font-size: 14px;
  background: #61210B;
  vertical-align: middle;
	transition-duration: 0.2s;
}
.mailbtn:hover {
	transition-duration: 0.2s;
  background: #FA58AC;
}

@media screen and ( max-width:569px )
{
footer{height: 50px;}
nav.menu{display: none;}
header ul{display: none;}
.header_ribbon{display: none;}
body{min-width: 540px;}
.bonus_big2{display: block;}
.bonus_big{display: none;}
.lineuplist li{overflow: hidden;position: relative;vertical-align: middle;display: inline-block;width: 85%;min-height: 595px;margin: 10px;border-radius: 10px;background-color: rgba(255,255,255,0.8);box-shadow:0 0 10px #f4e3ff;}
.sort li{display:block;margin: 5px;}
.sort li img{width: 50%;}
.order img{width: 60%;}
/*スライド*/
.slick-box{width: 100%;margin: 0 auto;position: relative;top:60px;min-height: 1413px;}
.slick-box div{width: 100%;height: 1413px;background-position:top,center;background-size: 130%;background-repeat: no-repeat;}
.slide01{background-image: url(../images/slide01_2.png);}
.slide02{background-image: url(../images/slide02_2.png);}
.slide03{background-image: url(../images/slide03_2.png);}
.slide04{background-image: url(../images/slide04_4.png);}
/*文字*/
.toptxt01{display: none;}
.toptxt01_2{position: absolute;left:50px;right: 0;top:60px;z-index: 4;}
.toplogo{display: none;}
.toplogo2{display: block;position: absolute;top:560px;z-index: 10;}
.topkira{display: none;}
.topimg.hatsubai{}
.topimg.hatsubai img{display: block; margin:5px auto;position: relative;z-index: 3;}
.white{padding: 10px;width: 100%;height:;background-color: rgba(255,255,255,0.7);position: absolute;top:700px;}
.whitebase{width: 85%;max-width: 1100px;position: relative;left:0;right: 0;margin:-650px auto 30px;border-radius: 10px;padding: 20px 0;background-color: rgba(255,255,255,0.8);box-shadow:0 0 10px #f4e3ff;}
#tapeimg{min-width: 440px;}
.yoyaku_ballon{position: absolute;top:-300px;right:15px;z-index: 3;}
.dlbanner{
display: none;
}

}

h2{text-align: left;margin: 10px auto 3px;}
h1{margin: 10px auto 10px;}

#content{min-height: 100%;}

#wrapper{
	width: 100%;
	margin: 0 auto;
	height: 100%;
	text-align: center;
	background-image: url(../images/bg_blue.jpg);
	position: relative;
}
#wrapper::before{
	content: '';
	position: absolute;
	top:0;
	left:0;
	width: 50%;
	height: 100%;
	background-image: url(../images/bg_pink.png);
}
.w1280{max-width:1280px;width: 100%;margin: 0 auto;position:relative;}
/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
TOP
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

#top{height: 1500px;}
#Container .mix{
	display: none;
}

.lineuplist{overflow: hidden;}

#bonus{}
.whitebase2{position: relative;width: 85%;max-width: 1100px;left:0;right: 0;margin:5px auto;border-radius: 10px;padding: 20px 0;background-color: rgba(255,255,255,0.8);box-shadow:0 0 10px #f4e3ff;}
.whitebase2::before{
	content: '';
	position: absolute;
	bottom:0;
	left:0;
	width: 100%;
	height: 120px;
	background-image: url(../images/bg_murasaki.jpg);}
.bonus{position: relative;left: 15px;}
.dlkigen{display: block;margin: auto;position: relative;z-index: 3;top:0px;}
.bonus_chara{background-image: url(../images/bonus_chara.png);width: 100%;max-width:790px;height:499px;background-position: center;background-size: cover;z-index: 2;}
.product_left2{width: 60%;min-width: 400px;text-align: left;display: inline-block;vertical-align: middle;float: left;margin-left: 20px;position: relative;z-index: 10;}

.bonus_big2{margin-top: -110px;}
.dlmoji{margin: 10px auto 5px;}
.whitebase2 p{margin-bottom: 40px;}


.product_left{width: 50%;min-width: 400px;text-align: left;display: inline-block;vertical-align: middle;float: left;margin-left: 30px;z-index: 5;}
.product_01{margin-top: 10px;}
.lineup_go{margin: 10px 0;}
.misaki{margin: 15px auto;float: left;width:42%;min-width: 400px;margin-left: 30px;}
.clearfix{clear: both;}

#lineup{position: relative;margin: 20px auto;text-align: center;width: 95%;padding-bottom: 80px;}
.title{font-size: 15px;line-height: 1.5;font-weight: 700;
	-webkit-transform: rotate(0.025deg);
	-moz-transform: rotate(0.025deg);
	-ms-transform: rotate(0.025deg);
	-o-transform: rotate(0.025deg);
	transform: rotate(0.025deg);}
.title span{font-size: 13px;
}
.title_back .txt{font-size: 14px;font-weight: 400;
	-webkit-transform: rotate(0.025deg);
	-moz-transform: rotate(0.025deg);
	-ms-transform: rotate(0.025deg);
	-o-transform: rotate(0.025deg);
	transform: rotate(0.025deg);}
.title_back{width: 100%;position: absolute;bottom:95px;padding: 5px 0;min-height: 95px;}
.title_back.pink{background-color: #ffd1d3;}
.title_back.blu{background-color: #BAEAF8;}
.txt2{
	color: #AC58FA;
	font-size: 16px;font-weight: 700;position: absolute;bottom:60px; left:0;right: 0;margin: auto;
	-webkit-transform: rotate(0.025deg);
	-moz-transform: rotate(0.025deg);
	-ms-transform: rotate(0.025deg);
	-o-transform: rotate(0.025deg);
	transform: rotate(0.025deg);}

.whitebase p,.whitebase2 p{
	color: #cd3d3d;
	font-size: 14px;font-weight: 500;
	-webkit-transform: rotate(0.025deg);
	-moz-transform: rotate(0.025deg);
	-ms-transform: rotate(0.025deg);
	-o-transform: rotate(0.025deg);
	transform: rotate(0.025deg);
	text-align: left;
	line-height: 1.5;}


.sec{margin-top: 10px;}
.sec2{margin-top: 22px;}
#lineup .order{position: absolute;bottom:5px; left:0;right: 0;margin: auto;}
.none img{position:absolute;left:0;right: 0;margin: auto;top:0;bottom:0;}
.set_maru{position: absolute;top:0px;left:0px;z-index: 15;}

#tapeimg{
	position: absolute;
	top:0px;
	width: 100%;
	min-height: 395px;
	background-repeat: no-repeat;
	background-position:center center;
	background-size: contain;
	transition: all 0.2s ease-out;
	-webkit-transform: scaleX(0.9) scaleY(0.9) scaleZ(1);
	-ms-transform: scaleX(0.9) scaleY(0.9) scaleZ(1);
	-moz-transform: scaleX(0.9) scaleY(0.9) scaleZ(1);
	-o-transform: scaleX(0.9) scaleY(0.9) scaleZ(1);
	transform: scaleX(0.9) scaleY(0.9) scaleZ(1);
	/*transform: matrix3d(0.9,0,0.00,0,0.00,0.9,0.00,0,0,0,1,0,0,0,0,1);*/
	will-change: transform;
}

#tapezoom {
	width: 100%;
	min-height: 395px;
	position: relative;
	text-align: center;
	cursor:pointer;
	top: 0;
  left: 0;
  z-index: 5;
  background: rgba(0,0,0,0.4);
	-webkit-transition: .3s;
	-ms-transition: .3s;
	transition: .3s;
  opacity: 0;
	color: #fff;
}


#tapezoom i{position:relative;top:170px;}
#tapezoom p{
position:relative;
display: block;
top:40px;
font-size:17px;
letter-spacing: 2px;
}

#tapezoom:hover{opacity: 1;}


#tapezoom:hover + #tapeimg{
	cursor:pointer;
	-webkit-transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
	-ms-transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
	-moz-transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
	-o-transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
	transform: scaleX(1.1) scaleY(1.1) scaleZ(1);
}


.hanaoto{background-image: url(../images/lineup/hanaoto.png);}
.hanaoto2{background-image: url(../images/lineup/hanaoto2.png);}
.canvas{background-image: url(../images/lineup/canvas2.png);}
.canvas2{background-image: url(../images/lineup/canvas.png);}
.essence{background-image: url(../images/lineup/essence.png);}
.essence2{background-image: url(../images/lineup/essence2.png);}
.aria{background-image: url(../images/lineup/aria.png);}
.aria2{background-image: url(../images/lineup/aria2.png);}
.ototsuki{background-image: url(../images/lineup/ototsuki.png);}
.ototsuki2{background-image: url(../images/lineup/ototsuki2.png);}
.rondo{background-image: url(../images/lineup/rondo.png);}

.melody2{background-image: url(../images/lineup/melody2.png);}
.melody{background-image: url(../images/lineup/melody.png);}

.damamuko{background-image: url(../images/lineup/damamuko.png);}
.ojonana{background-image: url(../images/lineup/ojonana.png);}
.koikata{background-image: url(../images/lineup/koikata.png);}
.koikata2{background-image: url(../images/lineup/koikata2.png);}
.marriage2{background-image: url(../images/lineup/marriage2.png);}
.marriage{background-image: url(../images/lineup/marriage.png);}
.ojonai{background-image: url(../images/lineup/ojonai.png);}
.ojonai2{background-image: url(../images/lineup/ojonai2.png);}
.koihana{background-image: url(../images/lineup/koihana.png);}
.koihana2{background-image: url(../images/lineup/koihana2.png);}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
TOP
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
load
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

.loading {
width: 100%;
height: 100%;
background: rgba(255,255,255,1.0);
position: fixed;
top: 0;
left: 0;
z-index: 20000;
}
.loading img {
width: 168px;
height: 155px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -84px;
margin-left: -77px;
}

/*■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
ヘッダ
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
header{width: 100%;height: 43px;position: fixed;z-index: 99;}
.topline{height: 5px;background-color: #a27e6e;}
.head_lace{width: 100%;height:43px; background-image: url(../images/head_lacetop.png);}
.head_lace li{ display: inline-block;margin-left: 5px;}
.head_lace ul{position: absolute;right: 20px;top:-10px;}
.header_ribbon{position: absolute;left:20px;}
.foot_lace{width: 100%;height:43px; background-image: url(../images/head_lacetop2.png);position: relative;margin-top: -40px;}
footer{
	width: 100%;
	background: #fff;
	position:relative;}

nav.menu{
width: 100%;
height: 74px;
min-width: 1280px;
position: fixed;
bottom:20px;
z-index: 999;
filter: drop-shadow(0px 0px 5px #DCD3E5);
}

nav.menu img:hover{
	transition-duration: 0.3s;
	color:#DAB10C;
	transform: scaleX(0.95) scaleY(0.95) scaleZ(1);
	-webkit-transform: scaleX(0.95) scaleY(0.95) scaleZ(1);
}

nav.menu ul{width: 95%;height:74px; background-image: url(../images/menu/ribbon_base.png);margin:0 auto;}
nav.menu ul::before{
	content: '';
	width: 63px;
	height:74px;
	background-image: url(../images/menu/ribbon_left.png);
	position: absolute;
	left:0px;
	}
	nav.menu ul::after{
		content: '';
		width: 62px;
		height:74px;
		background-image: url(../images/menu/ribbon_right.png);
		position: absolute;
		right:0px;
		}
nav.menu li{display: inline-block;position: relative;top:-20px;margin:auto 10px;}


#nav-toggle {
  position: fixed;
  top: 25px;
  right: 25px;
  height: 32px;
  cursor: pointer;
	background:#fff;
	padding: 15px;
	border-radius: 10px;
	box-shadow:0 0 10px #f4e3ff;
}
#nav-toggle > div {
  position: relative;
  width: 40px;
}
#nav-toggle span {
  width: 100%;
  height: 6px;
	border-radius: 5px;
  left: 0;
  display: block;
  background: #BE81F7;
  position: absolute;
  transition: top .5s ease, -webkit-transform .6s ease-in-out;
  transition: transform .6s ease-in-out, top .5s ease;
  transition: transform .6s ease-in-out, top .5s ease, -webkit-transform .6s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 14px;
}
#nav-toggle span:nth-child(3) {
  top: 28px;
}
#nav-toggle:hover span:nth-child(1) {
  top: 4px;
}
#nav-toggle:hover span:nth-child(3) {
  top: 23px;
}



.open #nav-toggle span {
  background: #BE81F7;
}
.open #nav-toggle span:nth-child(1) {
  top: 15px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
  top: 15px;
  width: 0;
  left: 50%;
}
.open #nav-toggle span:nth-child(3) {
  top: 15px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {
  z-index: 1000;
}

#naviontainer {
  z-index: 900;
}

#gloval-nav {
  background: #BE81F7;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
  text-align: center;
  display: flex;
  visibility: hidden;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 29px;
  opacity: 0;
  transition: opacity .6s ease, visibility .6s ease;
	font-family: 'Pacifico', cursive;
}

#gloval-nav p{
		font-family: 'Rounded Mplus 1c';
		font-size: 12px;
}

#gloval-nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0;
  transition: color .6s ease;
	transition:0.3s;
}
#gloval-nav a:hover {
  color: #FCF086;
	-webkit-transform: translateY(5px);
					transform: translateY(5px);
	transition:0.3s;

}
#gloval-nav ul {
  list-style: none;
}
#gloval-nav ul li {
  opacity: 0;
  -webkit-transform: translateX(200px);
          transform: translateX(200px);
  transition: opacity .2s ease, -webkit-transform .6s ease;
  transition: transform .6s ease, opacity .2s ease;
  transition: transform .6s ease, opacity .2s ease, -webkit-transform .6s ease;
}
#gloval-nav ul li:nth-child(2) {
  transition-delay: .15s;
}
#gloval-nav ul li:nth-child(3) {
  transition-delay: .3s;
}
#gloval-nav ul li:nth-child(4) {
  transition-delay: .45s;
}
#gloval-nav ul li:nth-child(5) {
  transition-delay: .6s;
}
#gloval-nav ul li:nth-child(6) {
  transition-delay: .75s;
}
#gloval-nav ul li:nth-child(7) {
  transition-delay: .9s;
}

/* open */
.open {
  overflow: hidden;
}
.open #gloval-nav {
  visibility: visible;
  opacity: 1;
}
.open #gloval-nav li {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  transition: opacity .9s ease, -webkit-transform 1s ease;
  transition: transform 1s ease, opacity .9s ease;
  transition: transform 1s ease, opacity .9s ease, -webkit-transform 1s ease;
}