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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');



.l-container .inner{
width: auto;
display: inherit;
}
.l-container .inner .reproduction{
text-align: center;
}



/* ==============================================
setting
============================================== */

#award h1,#award h2,#award h3,#award div,#award p,#award a,#award span,#award ul,#award li {
font-family:"Roboto","Noto Sans JP";
font-size: 13px;
line-height: 20px;
font-weight:400;
color:#444444;
margin:0;
padding:0;
box-sizing: border-box;
}
@media screen and (min-width:750px) {
#award h1,#award h2,#award h3,#award div,#award p,#award a,#award span,#award ul,#award li {
font-size: 15px;
line-height: 24px;
}
}
#award img {
border:none;
vertical-align:top;
width: 100%;
height: auto;
}
#award ul {
list-style:none;
}
#award ul:after {
content:".";
clear:both;
height:0;
display:block;
visibility:hidden;
}
#award a {
text-decoration:none;
}
#award .sp {
display: block!important;
}
#award .pc {
display: none!important;
}
@media screen and (min-width:750px) {
#award .pc {
display: block!important;
}
#award .sp {
display: none!important;
}
}



#award{
overflow: hidden;
background: url("../images/awd_bg.png") center no-repeat;
background-size: 2000px 1200px;
background-attachment: fixed ;
}
#award article{
max-width: 750px;
margin: auto;
filter: drop-shadow(0 0 8px rgba(0,0,0,0.2));
}



#award .headline{
font-size: 14px;
line-height: 20px;
background: #14c8d2;
color: #fff;
text-align: center;
height: 28px;
font-weight: 500;
padding: 5px 0 0 0;
}
@media screen and (min-width:750px) {
#award .headline{
font-size: 16px;
height: 36px;
padding: 8px 0 0 0;
}
}
#award .headline strong{
font-weight: 500;
color: #ffff7c;
}



/* ==============================================
#hero
============================================== */

#hero{
background: url("../images/awd_hr_bg.png");
background-size: 100% auto;
}
@media screen and (min-width:750px) {
#hero{
margin: 0;
}
}
#hero .inner{
position: relative;
height: 256px;
}
@media screen and (min-width:750px) {
#hero .inner{
height: 280px;
}
}
#hero .inner h1{
width: 260px;
height: 216px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
z-index: 100;
}
#hero .inner h1 img{
filter: drop-shadow(0 8px 2px rgba(100,0,0,0.2));
}
#hero .inner .limit{
width: 99px;
height: 129px;
position: absolute;
top:86px;
bottom: 0;
left: 0;
right: 208px;
margin: auto;
}
#hero .inner .limit img{
}
#hero .inner ul{
}
#hero .inner ul li{
width: 76px;
height: 80px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#hero .inner ul li:nth-child(1){
bottom: 120px;
left: 172px;
}
#hero .inner ul li:nth-child(2){
bottom: 52px;
left: 248px;
}
#hero .inner ul li:nth-child(1) img{
animation: tama 0.4s ease-out 1.2s 2 normal forwards;
}
@keyframes tama {
0% {
margin: 0 0 0 0;
}
50% {
margin: -20px -10px 0 0;
}
100% {
margin: 0 0 0 0;
}
}
#hero .inner ul li:nth-child(2) img{
animation: hiyo 0.4s ease-out 1.3s 2 normal forwards;
}
@keyframes hiyo {
0% {
margin: 0 0 0 0;
}
50% {
margin: -20px -10px 0 0;
}
100% {
margin: 0 0 0 0;
}
}



#hero h2{
text-align: center;
}
#hero h2 img{
width: auto;
height: 67px;
}



/* ==============================================
#menu
============================================== */

#menu{
position: relative;
background: url("../images/awd_mn_bg_01.png") bottom no-repeat;
background-size: 100% auto;
}
#menu .inner{
background: url("../images/awd_mn_bg_02.png") bottom no-repeat;
background-size: 100% auto;
padding: 30px 8% 6.7% 8%;
}
#menu .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #menu .inner { display:inline-block; }
*:first-child+html #menu .inner { display:inline-block; }

#menu .inner div{
float: left;
width: 31.33333%;
margin: 0 3% 0 0;
position: relative;
overflow: hidden;
}
#menu .inner div::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10px;
background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
#menu .inner div:last-child{
margin: 0;
}
#menu .inner div figure{
}
#menu .inner div figure img{
}
#menu .inner div a{
display: block;
border-radius: 12px 12px 0 0;
}
#menu .inner div:nth-child(1) a{
background: #d2ebd7;
}
#menu .inner div:nth-child(2) a{
background: #fff0d7;
}
#menu .inner div:nth-child(3) a{
background: #ffdcdc;
}
#menu .inner div a h2{
text-align: center;
padding: 20px 12% 0 12%;
}
#menu .inner div a h2 img{
}
#menu .inner div a p{
font-size: 11px;
line-height: 15px;
font-weight: 500;
text-align: center;
padding: 15px 0 20px 0;
}
@media screen and (min-width:750px) {
#menu .inner div a p{
font-size: 15px;
line-height: 22px;
}
}
#menu ul{
position: absolute;
bottom:-15px;
left: 0;
width: 100%;
padding: 0 8%;
}
@media screen and (min-width:750px) {
#menu ul{
bottom:-20px;
}
}
#menu ul li{
float: left;
width: 31.33333%;
margin: 0 3% 0 0;
}
#menu ul li:last-child{
margin: 0;
}
#menu ul li a{
letter-spacing: 1px;
font-weight: 500;
color: #fff;
display: block;
height: 30px;
border-radius: 15px;
background: #ff868c;
text-align: center;
padding: 5px 0 0 0;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
@media screen and (min-width:750px) {
#menu ul li a{
height: 45px;
border-radius: 23px;
padding: 10px 0 0 0;
}
}
#menu ul li a::after{
content: "";
background: url("../images/awd_cmn_arw_b_white.png") no-repeat;
background-size: 10px 6px;
width: 10px;
height: 6px;
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 4px;
}



/* ==============================================
#what
============================================== */

#what{
background: #eeebf0;
padding: 40px 20px 0 20px;
}
@media screen and (min-width:750px) {
#what{
padding: 50px 60px 0 60px;
}
}
#what .inner{
background: #fff;
height: 40px;
border-radius: 20px;
overflow: hidden;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
transition: 0.2s ease-out;
}
@media screen and (min-width:750px) {
#what .inner{
height: 45px;
border-radius: 23px;
}
}
#what .inner.on{
height: 620px;
}
@media screen and (min-width:750px) {
#what .inner.on{
height: 580px;
}
}
#what .inner .button{
padding: 0;
}
#what .inner .button a{
font-size: 12px;
font-weight: 700;
display: block;
padding: 10px 4px 0 0;
text-align: center;
}
@media screen and (min-width:750px) {
#what .inner .button a{
font-size: 16px;
padding: 11px 4px 0 0;
}
}
#what .inner .button a::after{
content: "";
background: url("../images/awd_abt_icn.png") no-repeat;
background-size: 24px 24px;
width: 24px;
height: 24px;
display: inline-block;
vertical-align: middle;
margin: -3px 0 0 4px;
}
#what .inner p{
font-size: 12px;
padding: 20px 20px 0 20px;
text-align: justify;
}
@media screen and (min-width:750px) {
#what .inner p{
font-size: 15px;
padding: 30px 40px 0 40px;
}
}
#what .inner .close{
text-align: center;
padding: 20px 0 0 0;
}
#what .inner .close a{
text-decoration: underline;
}



/* ==============================================
#result
============================================== */

#result{
background: #eeebf0;
padding: 0 20px;
}
#result h2{
font-size: 16px;
line-height: 20px;
letter-spacing: 2px;
color: #ff868c;
font-weight: 900;
text-align: center;
padding: 30px 0;
}
#result h2 span{
font-size: 15px;
line-height: 20px;
font-weight: 700;
letter-spacing: 0;
display: block;
margin: 10px 0 0 0;
}
#result h2 strong{
font-size: 60px;
line-height: 60px;
font-weight: 700;
letter-spacing: 0;
color: #ff868c;
text-align: center;
display: inline-block;
vertical-align: bottom;
margin: 0 1px -6px 12px;
}
#result .inner{
position: relative;
background: #d2ebd7;
border-radius: 20px;
padding: 25px 20px 20px 20px;
}
#result .inner h3{
font-weight: 500;
text-align: center;
background: #fff;
border-radius: 20px;
padding: 5px 0 4px 0;
width: 200px;
margin: auto;
}
@media screen and (min-width:750px) {
#result .inner h3{
width: 240px;
padding: 5px 0;
}
}
#result .inner h4{
font-size: 20px;
line-height: 28px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
padding: 40px 0 0 0;
}
#result .inner h4 img{
width: 160px;
display: block;
margin: 0 auto 25px auto;
}
#result .inner h4 span{
font-size: 12px;
font-weight: 900;
display: block;
}
#result .inner .icon{
position: absolute;
top:53px;
right: -10px;
width: 80px;
height: 80px;
background: #14c8d2;
color: #fff;
border-radius: 40px;
font-weight: 500;
text-align: center;
padding: 18px 0 0 0;
}
@media screen and (min-width:750px) {
#result .inner .icon{
top:55px;
right: 20px;
padding: 16px 0 0 0;
}
}
#result .inner .icon span{
font-size: 20px;
line-height: 20px;
text-align: center;
font-weight: 500;
color: #ffff7c;
margin: -3px 2px 0 0;
display: inline-block;
vertical-align: middle;
}
#result .inner div{
background: #fff;
border-radius: 4px;
padding: 0 0 24px 0;
margin: 40px 0 0 0;
}
@media screen and (min-width:750px) {
#result .inner div{
padding: 0 0 35px 0;
}
}
#result .inner div h5{
font-size: 14px;
line-height: 20px;
font-weight: 500;
text-align: center;
padding: 20px 0 0 0;
}
@media screen and (min-width:750px) {
#result .inner div h5{
font-size: 16px;
padding: 30px 0 0 0;
}
}
#result .inner div figure{
text-align: center;
padding: 20px 20px 0 20px;
}
@media screen and (min-width:750px) {
#result .inner div figure{
padding: 30px 20px 0 20px;
}
}
#result .inner div figure img{
border-radius: 4px;
}
@media screen and (min-width:750px) {
#result .inner div figure img{
max-width: 480px;
}
}
#result .inner div .button{
padding: 20px 20px 0 20px;
}
@media screen and (min-width:750px) {
#result .inner div .button{
max-width: 280px;
margin: auto;
padding: 30px 0 0 0;
}
}
#result .inner div .button a{
font-size: 16px;
letter-spacing: 1px;
text-align: center;
color: #fff;
font-weight: 500;
display: block;
background: #ff868c;
height: 44px;
padding: 11px 0 0 0;
border-radius: 22px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
#result .inner div .button a::after{
content: "";
background: url("../images/awd_cmn_arw_r_white.png") no-repeat;
background-size: 8px 14px;
width: 8px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
}
#result .inner .note{
padding: 15px 0 0 0;
}
@media screen and (min-width:750px) {
#result .inner .note{
font-size: 12px;
text-align: center;
}
}



/* ==============================================
#news
============================================== */

#news{
background: #eeebf0;
}
#news .inner{
}
#news .inner h2{
font-size: 20px;
line-height: 30px;
letter-spacing: 4px;
font-weight: 900;
padding: 35px 0 0 0;
text-align: center;
}
@media screen and (min-width:750px) {
#news .inner h2{
font-size: 30px;
line-height: 40px;
padding: 55px 0 0 0;
}
}
#news .inner .slider{
}
#news .inner .slider div{
position: relative;
padding: 15px 10px 10px 10px;
}
#news .inner .slider div.new::before{
content: "NEW";
position: absolute;
top:0;
left: 0;
width: 40px;
height: 40px;
border-radius: 20px;
font-family:"Roboto","Noto Sans JP";
line-height: 40px;
font-weight:500;
color: #ffff64;
text-align: center;
background: #14c8d2;
z-index: 100;
}
@media screen and (min-width:750px) {
#news .inner .slider div.new::before{
width: 60px;
height: 60px;
border-radius: 30px;
line-height: 60px;
}
}



#news .inner .slider div a{
display: block;
background: #fff;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
border-radius: 12px;
padding: 10px 10px 10px 10px;
}
@media screen and (min-width:750px) {
#news .inner .slider div a{
padding: 20px 20px 20px 20px;
}
}
#news .inner .slider div a figure{
}
#news .inner .slider div a figure img{
}
#news .inner .slider div a p{
padding: 10px 5px 2px 5px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media screen and (min-width:750px) {
#news .inner .slider div a p{
padding: 20px 5px 0 5px;
font-size: 14px;
line-height: 22px;
height: 66px;
}
}
.slick-prev,
.slick-next {
position: absolute;
top:45px;
bottom: 0;
margin: auto;
width: 30px;
height: 30px;
border-radius: 15px;
background: #ff868c url("../images/awd_cmn_arw_r_white.png") top 8px left 12px no-repeat!important;
background-size: 8px 14px!important;
z-index: 100;
font-size: 0;
border: none;
}
@media screen and (min-width:750px) {
.slick-prev,
.slick-next {
width: 44px;
height: 44px;
border-radius: 22px;
background: #ff868c url("../images/awd_cmn_arw_r_white.png") top 15px left 19px no-repeat!important;
background-size: 8px 14px!important;
}
}
.slick-prev::before,
.slick-next::before {
display: none;
}
.slick-prev {
bottom: 30px;
left: 5px;
transform: scale(-1, 1);
}
@media screen and (min-width:750px) {
.slick-prev {
left: 20px;
}
}
.slick-next {
right: 5px;
}
@media screen and (min-width:750px) {
.slick-next {
right: 20px;
}
}
.slick-dots {
display: none!important;
}



/* ==============================================
#about
============================================== */

#about{
background: #eeebf0;
padding: 0 30px 40px 30px;
}
@media screen and (min-width:750px) {
#about{
padding: 0 40px 50px 40px;
}
}
#about .inner{
}
#about .inner h2{
font-size: 20px;
line-height: 30px;
letter-spacing: 4px;
font-weight: 900;
padding: 25px 0 15px 0;
text-align: center;
}
@media screen and (min-width:750px) {
#about .inner h2{
font-size: 30px;
line-height: 40px;
padding: 40px 0 15px 0;
}
}
#about .inner p{
padding: 5px 0 0 0;
text-align: justify;
}
@media screen and (min-width:750px) {
#about .inner p{
padding: 10px 0 0 0;
}
}
#about .inner .limit{
font-size: 14px;
font-weight: 700;
background: #fff;
border: solid 4px #ff868c;
border-radius: 4px;
text-align: center;
padding: 6px 0 5px 0;
margin: 15px 0 0 0;
}
@media screen and (min-width:750px) {
#about .inner .limit{
font-size: 16px;
padding: 10px 0 10px 15px;
margin: 25px 0 0 0;
}
}
#about .inner h3{
font-size: 14px;
font-weight: 700;
padding: 20px 0 0 0;
}
@media screen and (min-width:750px) {
#about .inner h3{
font-size: 16px;
padding: 30px 0 0 0;
}
}
#about .inner p img{
width: auto;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
}
#about .inner ul{
padding: 5px 0 0 0;
}
@media screen and (min-width:750px) {
#about .inner ul{
padding: 10px 0 0 0;
}
}
#about .inner ul li{
font-size: 11px;
line-height: 16px;
text-indent: -11px;
margin: 5px 0 0 11px;
}
@media screen and (min-width:750px) {
#about .inner ul li{
font-size: 12px;
line-height: 20px;
}
}
#about .inner ul li img{
width: auto;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
}
#about .inner .apps{
background: #fff;
border-radius: 12px;
margin: 35px 0 0 0;
position: relative;
}
#about .inner .apps figure{
position: absolute;
top:20px;
left: 20px;
border: solid 1px #dddddd;
border-radius: 8px;
}
@media screen and (min-width:750px) {
#about .inner .apps figure{
top:30px;
left: 30px;
}
}
#about .inner .apps figure img{
width: auto;
height: 80px;
border-radius: 8px;
}
#about .inner .apps h3{
font-size: 14px;
font-weight: 700;
padding: 18px 0 0 115px;
}
@media screen and (min-width:750px) {
#about .inner .apps h3{
font-size: 16px;
padding: 35px 0 0 135px;
}
}
#about .inner .apps h3 span{
font-size: 12px;
line-height: 18px;
font-weight: 500;
letter-spacing: 2px;
color: #fff;
display: inline-block;
width: 40px;
height: 17px;
background: #ff868c;
border-radius: 10px;
text-align: center;
padding: 0 0 0 3px;
vertical-align: middle;
margin: -3px 0 0 5px;
}
#about .inner .apps p{
font-size: 12px;
line-height: 16px;
padding: 2px 20px 0 115px;
text-align: justify;
}
@media screen and (min-width:750px) {
#about .inner .apps p{
font-size: 14px;
line-height: 22px;
padding: 5px 30px 0 135px;
}
}
#about .inner .apps .button{
padding: 18px 20px 24px 20px;
}
@media screen and (min-width:750px) {
#about .inner .apps .button{
padding: 30px 30px 35px 30px;
}
}
#about .inner .apps .button a{
font-size: 16px;
letter-spacing: 1px;
text-align: center;
color: #fff;
font-weight: 500;
display: block;
background: #ff868c;
height: 44px;
padding: 11px 0 0 0;
border-radius: 22px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
@media screen and (min-width:750px) {
#about .inner .apps .button a{
padding: 10px 0 0 0;
}
}
#about .inner .apps .button a::after{
content: "";
background: url("../images/awd_cmn_arw_r_white.png") no-repeat;
background-size: 8px 14px;
width: 8px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
}



/* ==============================================
#entry
============================================== */

#entry{
background: #96e1af;
}
#entry h2{
font-size: 20px;
line-height: 30px;
font-weight: 900;
letter-spacing: 4px;
text-align: center;
padding: 35px 0 0 0;
}
@media screen and (min-width:750px) {
#entry h2{
font-size: 30px;
line-height: 40px;
padding: 55px 0 0 0;
}
}
#entry .result{
font-size: 14px;
font-weight: 700;
text-align: center;
border: solid 4px #222;
border-radius: 4px;
margin: 25px 30px 0 30px;
padding: 10px 0 10px 0;
position: relative;
z-index: 100;
}
@media screen and (min-width:750px) {
#entry .result{
font-size: 16px;
margin: 35px 40px 0 40px;
padding: 20px 0 20px 0;
}
}
#entry .result span{
font-size: 11px;
line-height: 16px;
font-weight: 500;
display: block;
text-align: center;
padding: 5px 0 0 0;
}
@media screen and (min-width:750px) {
#entry .result span{
font-size: 14px;
line-height: 22px;
}
}



#entry .entry{
position: relative;
overflow: hidden;
background: #96e1af url("../images/awd_ent_bg.png") bottom no-repeat;
background-size: 100% auto;
padding: 70px 30px 10.6% 30px;
}
@media screen and (min-width:750px) {
#entry .entry{
padding: 80px 50px 10.6% 50px;
}
}
#entry #entry-02{
background: #f5c887 url("../images/awd_ent_bg.png") bottom no-repeat;
background-size: 100% auto;
}
#entry #entry-03{
background: #f5aaaa url("../images/awd_ent_bg.png") bottom no-repeat;
background-size: 100% auto;
}
#entry .entry::before{
content: "";
background: url("../images/awd_ent_icn_01.png") no-repeat;
background-size: 41px 45px;
width: 41px;
height: 45px;
position: absolute;
top:30px;
left: 0;
right: 0;
margin: auto;
}
@media screen and (min-width:750px) {
#entry .entry::before{
top:40px;
}
}
#entry #entry-02::before{
background: url("../images/awd_ent_icn_02.png") no-repeat;
background-size: 41px 45px;
}
#entry #entry-03::before{
background: url("../images/awd_ent_icn_03.png") no-repeat;
background-size: 41px 45px;
}
#entry .entry figure{
position: absolute;
top:30px;
left: -20px;
z-index: 100;
}
#entry .entry figure img{
width: auto;
height: 100px;
}
#entry .entry .inner{
position: relative;
background: #d2ebd7;
border-radius: 20px 20px 0 0;
padding: 0 20px 40px 20px;
}
@media screen and (min-width:750px) {
#entry .entry .inner{
padding: 0 40px 40px 40px;
}
}
#entry .entry .inner::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(0deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}
#entry #entry-02 .inner{
background: #fff0d7;
}
#entry #entry-03 .inner{
background: #ffdcdc;
}
#entry .entry .inner:after { content:"."; clear:both; height:0; display:block; visibility:hidden; }
* html #entry .entry .inner { display:inline-block; }
*:first-child+html #entry .entry .inner { display:inline-block; }

#entry .entry .inner h3{
font-size: 20px;
line-height: 28px;
font-weight: 700;
letter-spacing: 1px;
text-align: center;
padding: 60px 0 0 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner h3{
font-size: 24px;
line-height: 36px;
}
}
#entry .entry .inner h3 img{
width: 160px;
display: block;
margin: 0 auto 45px auto;
}
#entry .entry .inner h3 span{
font-size: 12px;
font-weight: 900;
display: block;
}
@media screen and (min-width:750px) {
#entry .entry .inner h3 span{
font-size: 14px;
}
}
#entry .entry .inner p{
padding: 25px 0 0 0;
text-align: justify;
}
#entry .entry .inner p a{
display: table;
margin: 10px auto 0 auto;
text-decoration: underline;
}
#entry .entry .inner .movie{
position: relative;
padding-bottom: 47.2%;
height: 0;
overflow: hidden;
width: 100%;
margin: 20px 0 0 0;
border-radius: 4px;
}
@media screen and (min-width:750px) {
#entry .entry .inner .movie{
padding-bottom: 60%;
margin: 35px 0 0 0;
}
}
#entry .entry .inner .movie iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#entry .entry .inner .movie a{
display: block;
background: #ff868c;
overflow: hidden;
border-radius: 4px;
position: relative;
}
#entry .entry .inner .movie a::after{
content: "";
background: #fff url("../images/awd_ent_icn_play.png") top 14px left 18px no-repeat;
background-size: 13px 16px;
width: 44px;
height: 44px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
border-radius: 22px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
#entry .entry .inner .movie a img{
opacity: 0.5;
}
#entry .entry .inner ul{
padding: 10px 0 0 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner ul{
padding: 20px 0 0 0;
}
}
#entry .entry .inner ul li{
position: relative;
margin: 10px 0 0 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner ul li{
margin: 20px 0 0 0;
}
}
#entry .entry .inner ul li a{
font-size: 12px;
line-height: 18px;
padding: 8px 0 0 56px;
height: 44px;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
@media screen and (min-width:750px) {
#entry .entry .inner ul li a{
font-size: 14px;
line-height: 20px;
}
}
#entry .entry .inner ul li a img{
position: absolute;
top:4px;
left: 0;
width: 44px;
height: 44px;
border-radius: 4px;
object-fit: cover;
}
#entry .entry .inner .note{
font-size: 10px;
line-height: 16px;
padding: 25px 0 10px 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner .note{
font-size: 12px;
line-height: 20px;
text-align: center;
padding: 40px 0 10px 0;
}
}
#entry .entry .inner .note img{
width: auto;
height: 16px;
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
}
#entry .entry .inner .button{
float: left;
width: 56%;
padding: 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner .button{
width: 40%;
margin: 0 0 0 14%;
}
}
#entry .entry .inner .button a{
display: block;
}
#entry .entry .inner .button.off a{
pointer-events: none;
}
#entry .entry .inner .button a img{
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
#entry .entry .inner .button.off a img{
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.0));
}
#entry .entry .inner .yell{
float: right;
width: 41%;
padding: 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner .yell{
width: 28%;
margin: 0 14% 0 0;
}
}
#entry .entry .inner .yell a{
display: block;
}
#entry .entry .inner .yell a img{
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
#entry .entry .inner .yell.off{
pointer-events: none;
opacity: 0.2;
}
#entry .entry .inner .yell.off a img{
filter: drop-shadow(0 4px 2px rgba(100,0,0,0));
}
#entry .entry .inner .info{
clear: both;
font-size: 10px;
line-height: 16px;
padding: 10px 0 0 0;
}
@media screen and (min-width:750px) {
#entry .entry .inner .info{
font-size: 12px;
text-align: center;
padding: 20px 0 0 0;
}
}
#entry .entry .inner .info img{
width: auto;
height: 12px;
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
}
#entry .entry .ribon{
font-weight: 500;
letter-spacing: 0.5px;
color: #fff;
position: absolute;
bottom:0;
right: 0;
background: url("../images/awd_ent_icn_yell.png") no-repeat;
background-size: auto 30px;
height: 30px;
padding: 5px 8px 0 16px;
margin: 0 0 6.8% 0;
}
@media screen and (min-width:750px) {
#entry .entry .ribon{
font-size: 20px;
background: url("../images/awd_ent_icn_yell.png") no-repeat;
background-size: auto 60px;
height: 60px;
padding: 17px 24px 0 36px;
margin: 0 0 6.6% 0;
}
}
#entry .entry .ribon.off{
display: none;
}
#entry .entry .ribon span{
font-weight: 500;
color: #ffff7c;
}
@media screen and (min-width:750px) {
#entry .entry .ribon span{
font-size: 20px;
}
}



/* ==============================================
#bottom
============================================== */

#bottom{
background: #eeebf0;
padding: 0 30px 40px 30px;
}
@media screen and (min-width:750px) {
#bottom{
padding: 0 40px 50px 40px;
}
}
#bottom .inner{
}
#bottom .inner h2{
text-align: center;
padding: 40px 0 0 0;
}
@media screen and (min-width:750px) {
#bottom .inner h2{
padding: 60px 0 0 0;
}
}
#bottom .inner h2 img{
width: auto;
height: 204px;
display: block;
margin: auto;
}
#bottom .inner h2 img:last-child{
width: auto;
height: 50px;
margin: 20px auto 0 auto;
}
@media screen and (min-width:750px) {
#bottom .inner h2 img:last-child{
height: 80px;
margin: 40px auto 0 auto;
}
}
#bottom .inner .button{
text-align: center;
padding: 20px 0 0 0;
}
@media screen and (min-width:750px) {
#bottom .inner .button{
padding: 40px 0 0 0;
}
}
#bottom .inner .button a{
}
#bottom .inner .button a img{
width: auto;
height: 46px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
@media screen and (min-width:750px) {
#bottom .inner .button a img{
height: 80px;
}
}
#bottom .inner .button.off a{
pointer-events: none;
}
#bottom .inner .button.off a img{
filter: drop-shadow(0 4px 2px rgba(100,0,0,0));
}
#bottom .inner ul{
padding: 20px 0 0 0;
}
@media screen and (min-width:750px) {
#bottom .inner ul{
padding: 30px 0 0 0;
}
}
#bottom .inner ul li{
font-size: 11px;
line-height: 16px;
text-indent: -11px;
margin: 5px 0 0 11px;
}
@media screen and (min-width:750px) {
#bottom .inner ul li{
font-size: 12px;
line-height: 20px;
}
}
#bottom .inner ul li img{
width: auto;
height: 12px;
display: inline-block;
vertical-align: middle;
margin: -2px 2px 0 0;
}
#bottom .inner .apps{
background: #fff;
border-radius: 12px;
margin: 35px 0 0 0;
position: relative;
}
#bottom .inner .apps figure{
position: absolute;
top:20px;
left: 20px;
border: solid 1px #dddddd;
border-radius: 8px;
}
@media screen and (min-width:750px) {
#bottom .inner .apps figure{
top:30px;
left: 30px;
}
}
#bottom .inner .apps figure img{
width: auto;
height: 80px;
border-radius: 8px;
}
#bottom .inner .apps h3{
font-size: 14px;
font-weight: 700;
padding: 18px 0 0 115px;
}
@media screen and (min-width:750px) {
#bottom .inner .apps h3{
font-size: 16px;
padding: 35px 0 0 135px;
}
}
#bottom .inner .apps h3 span{
font-size: 12px;
line-height: 18px;
font-weight: 500;
letter-spacing: 2px;
color: #fff;
display: inline-block;
width: 40px;
height: 17px;
background: #ff868c;
border-radius: 10px;
text-align: center;
padding: 0 0 0 3px;
vertical-align: middle;
margin: -3px 0 0 5px;
}
#bottom .inner .apps p{
font-size: 12px;
line-height: 16px;
padding: 2px 20px 0 115px;
text-align: justify;
}
@media screen and (min-width:750px) {
#bottom .inner .apps p{
font-size: 14px;
line-height: 22px;
padding: 5px 30px 0 135px;
}
}
#bottom .inner .apps .button{
padding: 18px 20px 24px 20px;
}
@media screen and (min-width:750px) {
#bottom .inner .apps .button{
padding: 30px 30px 35px 30px;
}
}
#bottom .inner .apps .button a{
font-size: 16px;
letter-spacing: 1px;
text-align: center;
color: #fff;
font-weight: 500;
display: block;
background: #ff868c;
height: 44px;
padding: 11px 0 0 0;
border-radius: 22px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
@media screen and (min-width:750px) {
#bottom .inner .apps .button a{
padding: 10px 0 0 0;
}
}
#bottom .inner .apps .button a::after{
content: "";
background: url("../images/awd_cmn_arw_r_white.png") no-repeat;
background-size: 8px 14px;
width: 8px;
height: 14px;
display: inline-block;
vertical-align: middle;
margin: -4px 0 0 8px;
}



/* ==============================================
#thanks
============================================== */

#thanks{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,134,140,0.8);
z-index: -1;
opacity: 0;
transition: 0.2s ease-out;
}
#thanks.on{
z-index: 1000;
opacity: 1;
}
#thanks .inner{
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 240px;
height: 240px;
background: #fff;
border-radius: 20px;
}
@media screen and (min-width:750px) {
#thanks .inner{
width: 400px;
height: 400px;
}
}
#thanks .inner h2{
font-size: 16px;
line-height: 24px;
font-weight: 700;
text-align: center;
padding: 30px 0 0 0;
}
@media screen and (min-width:750px) {
#thanks .inner h2{
font-size: 20px;
line-height: 30px;
padding: 80px 0 0 0;
}
}
#thanks .inner figure{
text-align: center;
padding: 10px 0 0 0;
}
@media screen and (min-width:750px) {
#thanks .inner figure{
padding: 30px 0 0 0;
}
}
#thanks .inner figure img{
width: auto;
height: 80px;
}
#thanks .inner .button{
padding: 20px 40px 0 40px;
}
@media screen and (min-width:750px) {
#thanks .inner .button{
padding: 40px 80px 0 80px;
}
}
#thanks .inner .button a{
font-size: 16px;
letter-spacing: 1px;
text-align: center;
color: #fff;
font-weight: 500;
display: block;
background: #ff868c;
height: 44px;
padding: 11px 0 0 0;
border-radius: 22px;
filter: drop-shadow(0 4px 2px rgba(100,0,0,0.2));
}
@media screen and (min-width:750px) {
#thanks .inner .button a{
padding: 10px 0 0 0;
}
}



/* ==============================================
animation
============================================== */

.pon{
animation: pon;
}
@keyframes pon {
0% {
transform: scale(0, 0);
opacity: 0;
}
70% {
transform: scale(1.1, 1.1);
opacity: 1;
}
90% {
transform: scale(0.95, 0.95);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 1;
}
}