@charset "UTF-8";

/*↓頭↓*/
.omoide-head {
position:relative;
overflow:hidden;
background:linear-gradient(#000,#011);
color:#FFF; line-height:1; text-shadow:0 1px 2px #011; text-align:center;
padding:32px;
}
.omoide-head:after {
position:absolute; z-index:2; left:0; right:0; bottom:0;
height:96px;
background:linear-gradient(rgba(255,255,255,0.0),#FFF);
content:'';
}
.omoide-head > div:nth-of-type(1) {
position:absolute; z-index:1; left:0; right:0; top:0; bottom:0;
background:no-repeat center center; background-size:cover;
filter:blur(2px);
opacity:0.2;
}
.omoide-head > div:nth-of-type(2) { position:relative; z-index:3;}

.omoide-head img { display:block; width:100%;}
.omoide-head img:nth-of-type(1) { max-width:192px; margin:0 auto;}
.omoide-head img:nth-of-type(2) {
overflow:hidden;
max-width:384px;
box-shadow:0 0 8px #FFF;
border-radius:8px;
margin:16px auto;
}
.omoide-head img + p {/* 動画案内 */
font-size:12px; margin-bottom:16px;
animation:omoide-head-video 0.5s linear infinite alternate;
}
@keyframes omoide-head-video { to{ opacity:0;}}

.omoide-head h1 { font-size:24px; color:#F03; margin:32px 0 8px;}
.omoide-head p { font-size:18px; color:#EFF;}
.omoide-head dl {
display:flex; flex-wrap:wrap;
font-size:14px; line-height:1;
}
.omoide-head dt:nth-of-type(n+2),
.omoide-head dd:nth-of-type(n+2) { margin-top:8px;}
.omoide-head dt { width:40%; text-align:right; color:#FC0;}
.omoide-head dd { width:60%; text-align:left;}
.omoide-head a {
display:inline-block;
background:linear-gradient(#FA0,#F80);
box-shadow:0 2px 4px rgba(34,51,51,0.8), 0 2px 4px #F60 inset;
border:solid 2px; border-color:#FFF #ABB #899; border-radius:48px;
color:#FFF; font-size:16px; line-height:1; text-shadow:0 1px 2px #930,0 0 4px #630; text-decoration:none;
margin-top:16px; padding:1em 2em;
}
@media screen and ( max-width:768px ){
.omoide-head { padding:16px;}
.omoide-head h1 { font-size:18px; margin:16px 0 8px;}
.omoide-head p:nth-of-type(1) { font-size:14px;}
.omoide-head p:nth-of-type(2) { font-size:12px;}
.omoide-head dl { font-size:12px;}
}
/*↑頭↑*/
/*↓胴↓*/
.omoide-body { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start;}
.omoide-body h2 {/* 見出 */
display:block; width:100%;
color:#899; font-size:24px; text-align:center;
}
.omoide-body h2:nth-of-type(n+2) { margin-top:32px;}
.omoide-body > p {/* 本文 */
width:calc(100% - 208px);
font-size:16px; line-height:1.5; text-indent:1em;
margin-top:16px;
}
.omoide-body > p.full { width:100%;}
.omoide-body ul {/* 挿絵 */
display:flex; flex-wrap:wrap; justify-content:center;
width:192px;
color:#677; font-size:12px; line-height:1.25;
margin:16px 0 0 16px;
}
.omoide-body ul img {
display:block; width:100%; overflow:hidden;
box-shadow:0 0 4px #455;
border-radius:8px;
margin:0 auto 8px;
}
.omoide-body ul li:nth-of-type(n+2) { margin-top:16px;}
.omoide-body ul h3 { font-size:16px; text-align:center; margin-bottom:8px;}
.omoide-body ul p  { font-size:12px; line-height:1.25;}
@media screen and ( max-width:768px ){
.omoide-body h2 { font-size:20px;}
.omoide-body > p { font-size:14px;}
.omoide-body ul h3 { font-size:14px;}
}
@media screen and ( max-width:480px ){
.omoide-body { display:initial;}
.omoide-body h2 { font-size:16px;}
.omoide-body > p { font-size:12px; width:auto;}
.omoide-body ul { width:auto; margin:0;}
.omoide-body ul li {
max-width:256px; width:100%;
margin:16px 8px 0;
}
.omoide-body ul p { font-size:10px;}
}
/*↑胴↑*/
/*↓リンク↓*/
.omoide-link {
background:linear-gradient(#F80,#FA0);
box-shadow:0 2px 4px #F60 inset;
line-height:1; text-shadow:0 1px 3px #C30; text-align:center;
padding:8px 24px;
}
.omoide-link a {
display:block;
font-size:14px; color:#FFF; text-decoration:none;
padding:8px;
}
/*↑リンク↑*/