@charset "UTF-8";

.pc {
	display: inline;
}

.sp {
	display: none;
}

body {
	background: linear-gradient(#030a27, #635f7a) no-repeat;
	background-attachment: fixed;
	min-width: 1280px;
}

.backround{
	display: none;
}

.background-star{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
}

/*--------------------------------
 section : top
--------------------------------*/
.main{
	background: url(./../images/bg_main.png) no-repeat;
	background-size: 100%;
	width: 100%;
	height: 0;
	padding-bottom: 76.328125%;
	position: relative;
}

.main-logo{
	position: absolute;
	width: 32.1875%;
	right: 4.21875%;
	margin-top: 2.8125%;
}

.main-sublogo{
	position: absolute;
	width: 34.453125%;
	right: 2.8125%;
	margin-top: 21.875%;
}

.main-illust{
	position: absolute;
	width: 60.78125%;
	left: 2.5%;
	margin-top: 0.9375%;
}

.main-message{
	position: absolute;
	width: 47.109375%;
	right: 3.203125%;
	margin-top: 29.609375%;
	background: url(./../images/img_message.png) no-repeat;
	background-size: 100%;
	height: 0;
	padding-bottom: 31.25%;
	z-index: 9999;
}

.main-message-button{
	position: absolute;
	left: 33.665008292%;
	top: 72.75%;
	width: 30.679933665%;
}

.main-message-button img{
	width: 100%;
	display: block;
}

.main-heart{
	position: absolute;
	width: 72.421875%;
	left: 13.828125%;
	margin-top: 64.84375%;
	background: url(./../images/bg_heart.png) no-repeat;
	background-size: 100%;
	height: 0;
	padding-bottom: 11.40625%;
}

.heart-group{
	margin: 1.618122977% 0 0 21.467098166%;
	width: 59.223300971%;
}

.heart-group li{
	float: left;
	width: 22.4043716%;
	margin-left: -2.550091075%;
}

.heart-group li img{
	width: 90%;
	margin: 5%;
}

.heart0 .heart-pink1,   .heart0 .heart-pink2,   .heart0 .heart-pink3,   .heart0 .heart-pink4,   .heart0 .heart-pink5,
.heart1 .heart-pink2,   .heart1 .heart-pink3,   .heart1 .heart-pink4,   .heart1 .heart-pink5,   .heart1 .heart-yellow1,
.heart2 .heart-pink3,   .heart2 .heart-pink4,   .heart2 .heart-pink5,   .heart2 .heart-yellow1, .heart2 .heart-yellow2,
.heart3 .heart-pink4,   .heart3 .heart-pink5,   .heart3 .heart-yellow1, .heart3 .heart-yellow2, .heart3 .heart-yellow3,
.heart4 .heart-pink5,   .heart4 .heart-yellow1, .heart4 .heart-yellow2, .heart4 .heart-yellow3, .heart4 .heart-yellow4,
.heart5 .heart-yellow1, .heart5 .heart-yellow2, .heart5 .heart-yellow3, .heart5 .heart-yellow4, .heart5 .heart-yellow5 {
	display: none;
}

.main-sns{
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 9999;
}

.main-sns:before,
.main-sns:after{
	content: "";
	position: absolute;
	width: 7px;
	height: 39px;
	top: 0;
}

.main-sns:before{
	left: 0;
	background: url(./../images/bg_sns_left.png) no-repeat;
}

.main-sns:after{
	right: 0;
	background: url(./../images/bg_sns_right.png) no-repeat;
}

.sns-group{
	overflow: hidden;
	background: url(./../images/bg_sns_middle.png) repeat-x;
	margin: 0 7px;
}

.sns-group li{
	float: left;
	margin: 7px 7px 0 3px;
	height: 32px;
}

.sns-group li.facebook{
	margin-top: 3px;
	min-width: 100px;
}

.sns-group li.twitter{
	margin-top: 9px;
	min-width: 100px;
}

.sns-group li.google{
	min-width: 100px;
}

.sns-group li.hatena{
	min-width: 130px;
	margin-right: 0;
}

/*--------------------------------
 section : photo
--------------------------------*/

.sidein{
	transition : right 0.2s ease;
	position: fixed;
	right: -149px;
	top: 20%;
	z-index: 9999;
}

.sidein-left{
	transition : left 0.8s ease;
	position: fixed;
	left: -149px;
	top: 40%;
	z-index: 9999;
}

.photo{
	width: 970px;
	margin: 50px auto 30px;
}

.photo-group{
	position: relative;
}

.photo-group-clone,
.frame-wrapper.clone{
	display: none;
}

.frame-wrapper{
	float: left;
	width: 30%;
	padding: 0 0.5% 1.5%;
}

.frame-image{
	background-repeat: no-repeat;
	background-size: 100%;
}

.frame-top img{
	width: 100%;
	display: block;
}

.frame-middle-image{
	background: url(./../images/bg_frame_middle.png) repeat-y;
	background-size: 100%;
}

.frame-image .frame-middle-image{
	height: 0;
	padding-bottom: 90%;
}

.frame-comment{
	background: url(./../images/bg_frame_middle_text.png) repeat-y;
	background-size: 100%;
	color: #ffffff;
	padding: 0 6%;
}

.frame-text{
	padding: 4% 0;
	border-bottom: 1px solid #545251;
	font-size: 100%;
}

.frame-author{
	margin: 4% 0 0 26%;
	font-size: 85.7142857%;
	line-height: 1.8em;
	padding-bottom: 5%;
}

.frame-bottom{
	height: 0;
	padding-bottom: 10.163934426%;
	position: relative;
}

.frame-bottom img{
	width: 100%;
	display: block;
}

.frame-author-bottom{
	padding: 0 6%;
}

.frame-author-icon{
	width: 14%;
	padding-left: 10%;
	position: absolute;
	bottom: 70%;
	left: 0;
}

.frame-author-icon img{
	border-radius: 50%;
	display: block;
}

.frame-author-time{
	color: #ffffff;
	margin: -8% 0 0 29%;
	font-size: 85.7142857%;
	line-height: 1.8em;
	padding-bottom: 6%;
	position: absolute;
	bottom: 0;
	left: 0;
}



/*--------------------------------
 SP
--------------------------------*/

@media screen and (min-width: 320px) and (max-width: 499px), screen and (min-width: 500px) and (max-width: 800px){

.pc {
	display: none;
}

.sp {
	display: inline;
}

body {
	background: #635f7a;
	min-width: auto;
	min-width: inherit;
}

.background{
	background: linear-gradient(#030a27, #635f7a) no-repeat;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}

/*--------------------------------
 section : top
--------------------------------*/
.main{
	background-image: url(./../images/bg_main_sp.png);
	padding-bottom: 260%;
}

.main-logo{
	width: 63.2%;
	right: 18.4%;
	margin-top: 3.866666667%;
	z-index: 5;
}

.main-sublogo{
	width: 16.933333333%;
	left: 41.6%;
	margin-top: 38.533333333%;
	z-index: 4;
}

.main-illust{
	width: 95.066666667%;
	left: 2.8%;
	margin-top: 2.666666667%;
	z-index: 3;
}

.main-message{
	width: 90.533333333%;
	left: 4.8%;
	background-image: url(./../images/img_message_sp.png);
	margin-top: 112.266666667%;
	padding-bottom: 54.533333333%;
}

.main-message-button{
	left: 15.905743741%;
	top: 111.246943765%;
	width: 68.188512518%;
}

.main-heart{
	width: 97.6%;
	left: 2.4%;
	margin-top: 190%;
	padding-bottom: 19.3333333%;
	background: transparent;
}

.heart-group{
	margin: 0;
	width: auto;
}

.heart-group li{
	width: 19.808743169%;
	margin-left: -0.280112045%;
}

.heart-group li img{
	width: 100%;
	margin: 0;
}

.main-sns{
	width: 85.6%;
	top: 0;
	left: 14.4%;
	margin-top: 213.2%;
	height: 0;
	padding-bottom: 21.2%;
}

.main-sns:before,
.main-sns:after{
	display: none;
}

.sns-group{
	overflow: hidden;
	background: transparent;
	margin: 0;
}

.sns-group li{
	width: 24.45482866%;
	height: auto;
	margin: 0 5.140186916% 0 0;
	min-width: auto;
}

.sns-group li img{
	width: 100%;
}

.goto-instagram {
	position: absolute;
	margin: 239.733333333% 0 0 5%;
	width: 89.333333333%;
	z-index: 9999;
}

/*--------------------------------
 section : photo
--------------------------------*/
.photo{
	width: 83.2%;
	margin: 26.666666667% auto 0;
}

.frame-wrapper{
	float: none;
	width: 100%;
	padding: 0 0 5.333333333%;
	position: static !important;
}

.frame-text{
	font-size: 1em;
}

.frame-author{
	font-size: 0.85em;
}

.frame-author-time{
	font-size: 0.85em;
}

}