@charset "UTF-8";

/* 緑：#1BA
/* 黄：#FD1
/* 橙：#F93

/*↓reset↓*/
*, *:before, *:after {
box-sizing:border-box;
font-family:'メイリオ',Meiryo,'ＭＳ Ｐゴシック','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif;
text-overflow:ellipsis;
padding:0; margin:0;
}
html { -webkit-text-size-adjust:100%;}
h1,h2,h3,h4,h5,h6 { font-weight:normal;}
a:link,a:visited { text-decoration:none;}
a:hover,a:active { text-decoration:underline;}
a:focus { outline:none;}
ul { list-style:none;}
img,iframe { border:0;}
button,select,input,textarea { outline:none;}
button,select,input[type='checkbox'],label　{ cursor:pointer;}/* 指 */
button,select { line-height:1;}
button::-moz-focus-inner, input::-moz-focus-inner { padding:0 !important; border:0 !important;}/* 呪 */
/*↑reset↑*/
/*↓body↓*/
body {
width:100vw; overflow-X:hidden;
background:#0A161D;
color:#FFF; line-height:1; text-align:center;
}
body >.inner {
position:relative;
width:800px;
background:url(../img/bg.png) no-repeat center bottom; background-size:100% auto;
margin:0 auto; padding:0 64px 64px;
}
body >.inner:before,
body >.inner:after {
position:absolute; top:0; bottom:0;
width:48px;
background:repeating-linear-gradient(-45deg, #FD9B21, #FD9B21 20px, transparent 20px, transparent 34px);
content:'';
}
body >.inner:before { left:0;}
body >.inner:after  { right:0;}
@media screen and ( max-width:1024px ){
body >.inner {
width:100vw;
padding:0 48px 48px;
}
body >.inner:before,
body >.inner:after { width:32px;}
}
@media screen and ( max-width:768px ){
body >.inner {
width:100vw;
padding:0 32px 32px;
}
body >.inner:before,
body >.inner:after { width:16px;}
}
/*↑body↑*/
/*↓header↓*/
header { line-height:1; padding-top:32px;}
header >*:nth-child(n+2) { margin-top:16px;}
header a {
display:inline-block; width:150px; height:90px;
background:url('../img/logo-egg.png') no-repeat center center; background-size:contain;
}
header h2 { font-size:14px; line-height:1.25;}
header h1 { font-size:18px;}
header h3 { color:#FD1; font-size:32px;}
header img { max-width:480px; width:100%;}
header dl {/* 概要 */
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1;
margin-top:16px;
}
header dt { width:25%; color:#1BA; text-align:right;}
header dd { width:75%; color:#FFFFFF; text-align:left;}
header dt:nth-of-type(n+2),
header dd:nth-of-type(n+2) { margin-top:8px;}
@media screen and ( max-width:768px ){
header a { width:100px; height:60px;}
header h2 { font-size:12px;}
header h1 { font-size:16px;}
header h3 { font-size:24px;}
header dl { font-size:12px;}
}
/*↑header↑*/
/*↓section↓*/
section {}
section > h4 {
position:relative;
background:#FFF;
color:#0A161D; font-size:16px; line-height:1;
margin-top:32px; padding:16px;
}
section > h4:before,
section > h4:after {/* 線 */
position:absolute; left:0; right:0;
height:4px; background:#0A161D;
content:'';
}
section > h4:before { top:4px;}
section > h4:after  { bottom:4px;}
section > p { font-size:14px; line-height:1.5; margin-top:16px;}
section > img { display:block; max-width:512px; width:auto; margin:16px auto 0;}
@media screen and ( max-width:768px ){
section > h4 { font-size:14px;}
section > p { font-size:12px;}
section > img { max-width:320px; width:100%;}
}
@media screen and ( max-width:384px ){
section > img { max-width:256px;}
}
/*↑section↑*/

/*↓商品一覧↓*/
.egpc { margin-top:32px;}
.egpc >*:nth-child(n+2) { margin-top:16px;}
.egpc h3 { color:#F93; font-size:16px;}
.egpc p { font-size:12px; line-height:1.25;}
.egpc ul { display:flex; flex-wrap:wrap; justify-content:center;}
.egpc li { width:25%; padding:8px;}
.egpc img { display:inline-block; max-width:192px; width:calc(100% - 16px); }
.egpc h4 { font-size:14px; margin:8px auto;}
.egpc a.go-mall {
display:inline-block; width:100%;
background:#F90; border:4px solid #FFF;
box-shadow:0 0 0 1px rgba(0,0,0,0.75);
color:#FFF; font-size:16px; line-height:1; text-decoration:none;
padding:12px;
border-radius:8px;
}
@media screen and ( max-width:1024px ){
.egpc li { width:50%;}
}
@media screen and ( max-width:768px ){
.egpc h3 { font-size:14px;}
.egpc li { width:100%;}
}
/*↑商品一覧↑*/

/*↓イベント↓*/
.event {
position:relative;
border:2px solid #F93;
line-height:1;
margin-top:32px;
padding:40px 16px;
}
.event:before,
.event:after {
position:absolute;
width:100%; height:20px;
background:linear-gradient(135deg, #FD9B21,
#FD9B21 96px, transparent 96px,
transparent 104px, #FD9B21 104px,
#FD9B21 120px, transparent 120px,
transparent 128px, #FD9B21 128px,
#FD9B21 144px, transparent 144px);
content:'';
}
.event:before { left:0; top:0;}
.event:after { right:0; bottom:0; transform:rotate(180deg);}
.event >*:nth-child(n+2) { margin-top:16px;}
.event h3 { color:#F93; font-size:20px;}
.event p { font-size:12px; line-height:1.5;}
.event p span { color:#F93;}
.event img { display:inline-block; max-width:256px; width:100%;}
.event img { display:inline-block; max-width:256px; width:100%;}
.event h4 { color:#FD1; font-size:18px;}
.event ul {
display:inline-block;
list-style-type:disc;
font-size:12px; line-height:1.25; text-align:left;
padding-left:2em;
}
@media screen and ( max-width:768px ){
.event h3 { font-size:16px;}
.event h4 { font-size:14px;}
}
/*↑イベント↑*/

/*↓イントロ↓*/
/* 緑：#1BA */
/* 黄：#FD1 */
/* 橙：#F93 */
.intro { margin-top:16px; padding:0 5%;}
.intro p { color:#1BA; font-size:12px; line-height:2;}
/*↑イントロ↑*/

/*↓麻宮騎亜：インタビュー↓*/
.interview { text-align:left; margin-top:32px;}
.interview dt {
position:relative;
color:#FD1; font-size:14px; line-height:1.25;
padding-left:1.25em;
}
.interview dt span {/* ★ */
position:absolute; left:0; top:0; color:#F93;}
.interview dd {
position:relative;
min-height:64px;
font-size:16px; line-height:1.5;
margin:16px 0 32px 32px;
padding-left:72px;
}
.interview dd:before {/* 画像 */
position:absolute; left:0; top:0;
background:url('../img/interview-kia.png') no-repeat center center; background-size:contain;
width:64px; height:64px;
content:'';
}
@media screen and ( max-width:768px ){
.interview dt { font-size:12px;}
.interview dd { font-size:14px;}
}
/*↑麻宮騎亜：インタビュー↑*/
/*↓麻宮騎亜：プロフィール↓*/
.profile {
text-align:left;
border:solid 1px #FFF;
margin-top:32px; padding:16px;
}
.profile h3 { font-size:16px;}
.profile p { font-size:12px; line-height:1.5; margin-top:16px;}
.profile dl {/* 概要 */
display:flex; flex-wrap:wrap;
font-size:12px;
}
.profile dt,
.profile dd { margin-top:8px;}
.profile dt { width:6em; color:#1BA; text-align:right;}
.profile dd { width:calc(100% - 6em); color:#FFFFFF;}
.profile a { color:#F93;}
/*↑麻宮騎亜：プロフィール↑*/
 
 /*↓仕様↓*/
.spec {
text-align:left;
margin-top:16px;
}
.spec p { font-size:12px; line-height:1.5; margin-top:16px;}
.spec dl {/* 概要 */
display:flex; flex-wrap:wrap;
font-size:12px; line-height:1.25;
}
.spec dt:nth-of-type(n+2),
.spec dd:nth-of-type(n+2) { margin-top:8px;}
.spec dt {
position:relative;
width:10em;
color:#1BA; text-align:right;
padding-right:1em;
}
.spec dt:after {
position:absolute; right:0; top:0;
content:'：';
}
.spec dd { width:calc(100% - 10em); color:#FFF;}
@media screen and ( max-width:768px ){
.spec dt { width:6em;}
.spec dd { width:calc(100% - 6em);}
}
/*↑仕様↑*/
 /*↓商標↓*/
.credit { margin-top:32px;}
.credit li { font-size:10px; color:#9AB;}
/*↑商標↑*/
/*↓フッタ↓*/
footer { margin-top:32px;}
footer a {
display:inline-block; width:112px; height:64px;
background:url('../img/logo-d4e.png') no-repeat center center; background-size:contain;
}
/*↑フッタ↑*/