@charset "UTF-8";
/* CSS Document */

/* -----------------------------------------------------
Reset
----------------------------------------------------- */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; }
img { max-width: 100%; width: auto; height: auto; vertical-align: bottom; }

html { font-size: 100%; }
body { color: #303030; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-align: justify; text-justify: inter-ideograph; font-family: "游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; font-weight: bold; }
a { color: #000; text-decoration: none; }

.sp { display: none; }

#Container { width: 100%; position: relative; overflow: hidden; }


/* -----------------------------------------------------
header
----------------------------------------------------- */
header { position: relative; background-image: url(../images/head_bg_kirakira.png),url(../images/head_bg_right.png),url(../images/head_bg_left.png); background-repeat: no-repeat; background-size: 1530px auto, 50% 100%, 50% 100%; background-position: top center,top right,top left; padding-top: 1px; padding-bottom: 100px; }
header::after { content: ""; display: block; background: url(../images/head_cloud.png) repeat-x center; background-size: 2026px auto; height: 521px; width: 100%; position: absolute; top: auto; bottom: -24%; }
header p,header h1 { max-width: 1226px; width: 95%; margin: 10px auto 0 auto; position: relative; }
header > p:first-child::after { content: ""; display: block; width: 26%; padding-top: 28%; background: url(../images/img_head.png) no-repeat; background-size: 100% auto; position: absolute; right: 1%; top: 15px; }
header p img { max-width: 949px; width: 77%; }
header h1 img { max-width: 977px; width: 79%; margin: -8% auto 0 3%; }
header .buyonse { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1000px; width: 95%; margin: -2% auto 0 auto; position: relative; }
header .buyonse::before { content: ""; width: 1200px; display: block; background: url(../images/head_bubble.png) no-repeat; margin: 0 auto; height: 116px; background-size: 1200px auto; z-index: 10; position: absolute; left: -10%; right: 0; top: -100px; }
header .ttl img { max-width: 442px; width: 85%; position: relative; z-index: 10; }
header .ttl + p { max-width: 545px; width: 100%; position: relative; }
header .ttl + p img { max-width: 277px; width: 54%; display: block; margin-top: -4%; margin-left: auto; margin-right: 1%; position: relative; z-index: 5; }
header .ttl + p::before { content: ""; display: block; max-width: 493px; width: 100%; padding-top: 68%; background: url(../images/img_item_up.png) no-repeat; position: absolute; right: 0; top: -25%; right: 7%; background-size: 100% auto; z-index: 10; left: -5%; top: 25%; mix-blend-mode: screen; }
header .ttl + p::after { content: ""; display: block; max-width: 493px; width: 100%; padding-top: 68%; background: url(../images/img_item.png) no-repeat; mix-blend-mode: multiply; position: absolute; left: -5%; top: 25%; z-index: 10; background-size: 100% auto; }


/* -----------------------------------------------------
Footer
----------------------------------------------------- */
footer { max-width: 810px; width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 35px 0 10px 0; }
footer .logo { width: 285px; }
footer address { width: 485px; margin-top: 10px; }
footer .copy { width: 100%; font-size: 0.688em; text-align: center; margin-top: 25px; font-weight: bold; }

/* -----------------------------------------------------
Contents
----------------------------------------------------- */
#Contents { background-image: url(../images/bg_dot.png),-webkit-linear-gradient(top, rgba(181,233,255,0) 0%,rgba(181,233,255,1) 2%,rgba(181,233,255,1) 100%); background-image: url(../images/bg_dot.png),linear-gradient(to bottom, rgba(181,233,255,0) 0%,rgba(181,233,255,1) 2%,rgba(181,233,255,1) 100%); background-size: 9px 19px,auto auto; position: relative; z-index: 1; }

.inner { max-width: 1000px; width: 90%; margin: 0 auto; }
.nayami { max-width: 900px; width: 100%; padding-top: 70px; margin: 0 auto; position: relative; }
.nayami::before { content: ""; display: block; position: absolute; width: 1164px; height: 243px; background: url(../images/bg_kirakira03.png) no-repeat; background-size: 1164px auto; left: -100px; right: 0; top: 0; bottom: 0; margin: auto; }
.kaiketsu { max-width: 975px; width: 100%; margin-left: auto; margin-top: -20px; }

#Support { max-width: 1366px; width: 100%; margin: 50px auto 0 auto; background: url(../images/bg_kirakira01.png) top center no-repeat; background-size: 1366px auto; padding-top: 15px; }
#Support h2 { max-width: 914px; margin: 0 auto; }
#Support p { margin-top: -10px; }
#Support p + p { max-width: 820px; width: 82%; margin: -30px auto 0 auto; }
#Support .btn { max-width: 625px; margin: 80px auto 0 auto; border-radius: 50px; box-shadow: 10px 10px 15px rgba(0,0,0,0.40); }

#Voice { max-width: 1020px; width: 95%; margin: 90px auto 0 auto; padding-bottom: 50px; }

#Explanation { background: url(../images/bg_stripe.png); background-size: 35px 35px; padding: 50px 0; }
#Explanation h2 { max-width: 1067px; width: 90%; margin: 0 auto; }
#Explanation .himitsu { max-width: 917px; width: 90%; margin: 25px auto 0 auto; }
#Explanation .himitsu:first-of-type { margin-top: 35px; }

#Color { background: #fff; padding: 40px 0 55px 0; }
#Color h2 { max-width: 450px; margin: 0 auto; }
#Color ul { display: flex; justify-content: space-around; max-width: 835px; width: 100%; margin: 0 auto; }
#Color ul li { max-width: 374px; width: 45%; margin-top: 25px; }

#Master { padding: 75px 0 95px 0; position: relative; }
#Master::before { content: ""; background: url(../images/bg_kirakira02.png) no-repeat top center; background-size: 1366px auto; max-width: 1366px; width: 100%; height: 100%; margin: 0 auto; position: absolute; left: 0; right: 0; z-index: -1; }
#Master .ttl { max-width: 788px; width: 90%; margin: 0 auto; position: relative; }
#Master .ttl img { max-width: 473px; width: 60%; margin-left: 0; margin-right: auto; display: block; }
#Master .ttl::after { content: ""; display: block; max-width: 493px; width: 63%; padding-top: 68%; background: url(../images/img_item.png) no-repeat; mix-blend-mode: multiply; position: absolute; right: -9%; top: 2%; z-index: 10; background-size: 100% auto; }
#Master .ttl::before { content: ""; display: block; max-width: 493px; width: 63%; padding-top: 68%; background: url(../images/img_item_up.png) no-repeat;  position: absolute; right: -9%; top: 2%; z-index: 10; background-size: 100% auto; mix-blend-mode: screen; }
#Master h2 { max-width: 788px; width: 90%; margin: 0 auto; }
#Master .btn { max-width: 625px; width: 90%; margin: 80px auto 0 auto; border-radius: 50px; box-shadow: 10px 10px 15px rgba(0,0,0,0.40); }
.contact { max-width: 625px; width: 90%; margin: 80px auto 0 auto; }


@media screen and (max-width:980px) {
/* -----------------------------------------------------
header
----------------------------------------------------- */	
    header::after { bottom: -35%; }
    
/* -----------------------------------------------------
Footer
----------------------------------------------------- */
    footer { padding: 20px 0 10px 0; }
    footer .logo { width: 285px; margin: 0 auto; }
    footer address { width: 100%; display: flex; justify-content: center; margin-top: 20px; line-height: 1.5em; }
    footer .copy { margin-top: 15px; }

/* -----------------------------------------------------
Contents
----------------------------------------------------- */
    .nayami { padding-top: 0%; }
    .kaiketsu { margin-top: -10px; }
    #Support p + p { margin: -10px auto 0 auto; }
    
    
}


@media screen and (max-width:640px) {
    .sp { display: block; }

/* -----------------------------------------------------
header
----------------------------------------------------- */
    header { background-image: url(../images/head_bg_kirakira_sp.png); background-repeat: no-repeat; background-size: 100% auto; padding-top: 1px; padding-bottom: 18%; }
    header::after { content: ""; display: block; background: url(../images/head_cloud_sp.png) repeat-x center; background-size: 100% auto; height: 0; width: 100%; position: absolute; top: auto; bottom: -18%; padding-top: 50%; }
    header > p:first-child::after { width: 36%; padding-top: 34%; background: url(../images/img_head_sp.png) no-repeat; background-size: 100% auto; right: 0; top: 0; }
    header p img { width: 68%; position: relative; z-index: 10; }
    header h1 { width: 100%; margin: 10px auto 0 auto; position: relative; }
    header h1 img { width: 100%; margin: -10.5% auto 0 auto; }
    header .buyonse { flex-direction: column; margin: -2% auto 0 auto; }
    header .buyonse::before { display: none; }
    header .ttl { text-align: center; margin-top: 0%; }
    header .ttl img { width: 90%; position: relative; z-index: 10; }
    header .ttl + p { width: 95%; order: -1; padding-top: 43%; margin: -12% auto 0 auto; }
    header .ttl + p img { width: 43%; margin-top: -4%; margin-left: 0; margin-right: auto; }
    header .ttl + p::before { width: 90%; padding-top: 68%; left: 5%; right: 0; margin: auto; top: 0; }
    header .ttl + p::after { width: 90%; padding-top: 68%; left: 5%; right: 0; margin: auto; top: 0; }

	
/* -----------------------------------------------------
Contents
----------------------------------------------------- */	
    .nayami {padding-top: 40px; }
    .nayami::before { display: none; }
    .kaiketsu { width: 90%; margin: 20px auto 0 auto; position: relative; }
    .kaiketsu::before { content: ""; display: block; position: absolute; width: calc(100% + 20%); height: 100%; background: url(../images/bg_kirakira03_sp.png) no-repeat top center; background-size: 100% auto; margin: 0 -10%; }
    
    #Support { margin: 0 auto; background: url(../images/bg_kirakira01_sp.png) top center no-repeat; background-size: 100% auto; padding-top: 25px; }
    #Support h2 { width: 95%; margin: 0 auto; }
    #Support p { margin-top: -20px; width: calc(100% + 10%); margin-left: -5%; }
    #Support p + p { max-width: 820px; width: 82%; margin: 0px auto 0 auto; }
    #Support .btn { max-width: 625px; margin: 20px auto 0 auto; border-radius: 50px; box-shadow: 10px 10px 15px rgba(0,0,0,0.40); }
    
    #Voice { margin: 30px auto 0 auto; position: relative; }
    #Voice img { margin-top: 20px; }
    #Voice::before { content: ""; display: block; position: absolute; width: 106%; height: 100%; background: url(../images/bg_kirakira04_sp.png) no-repeat; background-size: 100% auto; margin: 0 -3% 0 -3%; }
    
    #Color h2 { max-width: 330px; margin: 0 auto; }
    #Color ul { width: 90%; }
    
    #Master { padding: 0 0 35px 0; position: relative; }
    #Master::before { content: ""; background: url(../images/bg_kirakira02_sp.png) no-repeat top center; background-size: 100% auto; width: 100%; height: 100%; margin: 0 auto; position: absolute; left: 0; right: 0; z-index: -1; }
    #Master h2 { width: 95%; margin: -4% auto 0 auto; }
    #Master .ttl { position: relative; padding-top: 54%; }
    #Master .ttl::after { content: ""; display: block; max-width: 493px; width: 85%; padding-top: 68%; background: url(../images/img_item.png) no-repeat; mix-blend-mode: multiply; position: absolute; right: 0; left: 0; margin: auto; top: 5%; z-index: 10; background-size: 100% auto; }
    #Master .ttl::before { content: ""; display: block; max-width: 493px; width: 85%; padding-top: 68%; background: url(../images/img_item_up.png) no-repeat;  position: absolute; right: 0; left: 0; margin: auto; top: 5%; z-index: 10; background-size: 100% auto; mix-blend-mode: screen; }
    #Master .ttl img { width: 80%; margin: 0 auto; display: block; }
    #Master .btn { margin: 30px auto 0 auto; border-radius: 50px; box-shadow: 10px 10px 15px rgba(0,0,0,0.40); }
    .contact { margin: 30px auto 0 auto; }
}


/* -----------------------------------------------------
アニメーション
----------------------------------------------------- */	
@keyframes purupuru {
    0% { transform: scale(1); }
    10%, 20% { transform: scale(0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale(1.05) rotate(3deg); }
    40%, 60%, 80% { transform: scale(1.05) rotate(-3deg); }
    100% { transform: scale(1) rotate(0); }
}

.anime {
  
}

.animated {
    animation-name: purupuru;
    animation-duration: 1s;
    animation-fill-mode: both;
}