@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Coiny&display=swap');
.fadein {
    opacity: 0;
    transform: translate(0, 30px);
    transition: all 1500ms;
}
.fadein2 {
    opacity: 0;
    transform: translate(0, 0);
    transition: all 1500ms;
}
.fadein3 {
    opacity: 0;
    transform: translate(0, 15px);
    transition: all 3000ms;
}
.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}
.anim-box,.anim-box2{
    opacity: 0;
}
.anim-box.popup.is-animated {
    animation: popup 2.5s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}
.anim-box2.popup.is-animated {
    animation: popup 1.5s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
  50% {
    transform: translateY(40px) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translateY(0) scale(1.0);
  }
  80%, 100% {
    opacity: 1;
  }
}


/*-------------------
コンテスト
-------------------*/
body.contest2208 #contents .inner {
    padding: 0;
    background: linear-gradient(
    -45deg,
    #fff 25%, #fffac6 25%,
    #fffac6 50%, #fff 50%,
    #fff 75%, #fffac6 75%,
    #fffac6
  );
  background-size: 80px 80px;
}
body.contest2208 #contents .inner .contents-main {
}
body.contest2208 #contents .inner .contents-main-inner {
    position: relative;
    padding: 30px 0 0;
}
body.contest2208 #contents .inner .contents-main-inner .fv-box {
    margin-bottom: 20px;
}
body.contest2208 #contents .inner .contents-main-inner .fv-box h2 {
    width: 100%;
    background-color: transparent;
    padding-top: 0;
}
body.contest2208 #contents .inner .contents-main-inner .fv-box .txt-main {
    /*position: absolute;
  width: 530px;
    text-align: center;
    top: 370px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 10;*/
    text-align: center;
    margin: -30px 0 0;
}
body.contest2208 #contents .inner .contents-main-inner .fv-box .txt-main h3 {
    padding-bottom: 30px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result {
    margin: 15px 60px 60px;
    background-color: #fff;
    padding: 30px 30px 40px;
    border-radius: 20px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first {
    margin-top: 0px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.fourth-fifth {
    background-color: inherit;
    padding: 0;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .rank-box,
body.contest2208 #contents .inner .contents-main-inner .contents-result.fourth-fifth .rank-box{
  margin-top: -40px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .logo-box {
    position: relative;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .logo-box::before {
    content: url("./fig_tiara.png");
    position: absolute;
    top: -25px;
    right: -30px;
}

/*body.contest2208 #contents .inner .contents-main-inner .contents-result.secound .logo-box::before {
    content: url("./fig_tiara.png");
    position: absolute;
    top: 122px;
    right: 175px;
}
*/
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .grid-box {
    margin-top: 40px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .grid-box-detail .bg-white {
    border: solid 3px #efd680;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.first .item-detail {
    padding: 25px 30px 30px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.secound .bg-white {
    border: solid 3px #c7c9c9;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.secound .bg-white, 
body.contest2208 #contents .inner .contents-main-inner .contents-result.third .bg-white {
    margin-top: 30px;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.secound .logo-box,
body.contest2208 #contents .inner .contents-main-inner .contents-result.third .logo-box {
    padding: 10px 0;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.third .bg-white {
    border: solid 3px #d49b82;
}
body.contest2208 #contents .inner .contents-main-inner .contents-result.forth .bg-white {
    border: solid 3px #a9dedf;
}
/*body.contest2208 #contents .inner .contents-main-inner .contents-result.third .bg-white .item-detail-list.col2 dt {
    width: 75%;
}*/

/*4位と5位コンテンツ*/
.fourth-fifth .grid-box-contents {
    width: 50%;
    background-color: #fff;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 20px;
}
.fourth-fifth .grid-box-contents .rank-box {
    margin-top: -40px;
}
.fourth-fifth .grid-box-contents .rank-box img:last-of-type{
    margin-bottom: -10px;
}
.fourth-fifth .grid-box-contents .logo-box {
    width: 350px;
    padding: 5px 0;
}
.fourth-fifth .grid-box-contents .grid-box-fig {
  width: 100%;
  box-sizing: border-box;
  margin-top: 35px;
  text-align: center;
}

/*共通パーツ*/
.rank-box {
    max-width: 435px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin: 0 auto 25px;
}
.rank-box img{
    height: 100%;
}
.logo-box{
    width: 440px;
    text-align: center;
    margin: 30px auto;
	padding: 10px;
    background-color: #fff;
    border-radius: 15px;
    border: solid 6px #ddd;
    box-sizing: border-box;
}
.logo-box img{
    height: 80px;
}
.grid-box{
    display: flex;
    justify-content: center;
    gap: 30px;
}
.grid-box-fig{
  width: 45%;
  border: solid 6px #ddd;
}
.grid-box-detail{
  width: 55%;
}
.grid-box-detail-txt .bg-white {
    background: #fff;
    border-radius: 23px;
	border: solid 3px #efd680;
}
.grid-box-detail-txt .bg-white > p {
    position: relative;
    padding: 25px 0;
    text-align: center;
}
.grid-box-detail-txt .bg-white > p::after {
    content: "";
    width: 80%;
    height: 4px;
    position: absolute;
    background-color: rgba(239, 214, 128, 0.5);
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.grid-box-fig img {
  width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
.item-detail {
    padding: 25px 20px 30px;
    line-height: 1.8;
    font-weight: bold;
}
.item-detail > p {
    font-size: 14px;
    letter-spacing: -1.1px;
}
.item-detail-list {
    padding-left: 30px;
    padding-bottom: 30px;
}
.item-detail-list dt {
    position: relative;
}
.item-detail-list dt::before {
    position: absolute;
    left: -25px;
}
.item-detail-list dt:first-of-type::before {
    content: "A：";
}
.item-detail-list dt:nth-of-type(2)::before {
    content: "B：";
}
.item-detail-list dt:nth-of-type(3)::before {
    content: "C：";
}
.item-detail-list dt:nth-of-type(4)::before {
    content: "D：";
}
.item-detail-list dt:nth-of-type(5)::before {
    content: "E：";
}
.item-detail-list dt:nth-of-type(6)::before {
    content: "F：";
}
.item-detail-list.col2 dt {
    /*float: left;
    width: 80%;*/
	padding: 0 20px 0 0;
	box-sizing: border-box;
}
.item-detail-list.col2 .row2 {
	height: 3.6em;
}
.comment-box {
    margin-top: 30px;
}
.comment-box > p {
    position: relative;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
/*.comment-box > p::before, .comment-box > p::after {
    content: "";
    width: 325px;
    height: 1px;
    position: absolute;
    top: 50%;
    background-color: #fff;
}
.comment-box > p::before {
    left: 0;
}
.comment-box > p::after {
    right: 0;
}*/
.comment-box-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 25px;
}
.comment-box-item li {
    width: calc(100% / 2 - 50px);
    padding: 15px;
    background: #fffac6;
    font-size: 13px;
    font-weight: bold;
}
.first .comment-box-item li.bg_awardcolor {
    background-color: #faf3d9;
}
.secound .comment-box-item li.bg_awardcolor {
    background-color: #e3e4e4;
}
.third .comment-box-item li.bg_awardcolor {
    background-color: #e9cdc0;
}

.comment-box.single > p::before, .comment-box.single > p::after {
    width: 125px;
}
.comment-box.single ul li {
    width: calc(100% - 50px);
}

/*スマホ用*/
body.contest2208.sp #contents .inner .contents-main {
    margin: 0;
}
body.contest2208.sp #contents .inner .contents-main-inner{
    padding: 0;
}

body.contest2208.sp #contents .inner .contents-main-inner .fv-box {
    padding: 0 10px;
    margin-bottom: 50px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result {
    margin: 0 20px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.secound{
    margin-top: 50px;
}

body.contest2208.sp #contents .inner .contents-main-inner .contents-result.third{
    margin-top: 50px;
}

body.contest2208.sp #contents .inner .contents-main-inner .contents-result.forth{
    margin-top: 50px;
}


body.contest2208.sp #contents .inner .contents-main-inner .grid-box {
    display: block;
}
body.contest2208.sp #contents .inner .contents-main-inner .logo-box {
    max-width: 330px;
    width: 90%;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.first .logo-box::before {
    top: -30px;
    right: -10%;
      transform: scale(0.8);
}

body.contest2208.sp #contents .inner .contents-main-inner .contents-result.secound .logo-box::before {
    top: 80px;
    right: 1%;
    transform: scale(0.8);
}

body.contest2208.sp #contents .inner .contents-main-inner .logo-box img {
    max-height: 50px;
}
body.contest2208.sp #contents .inner .contents-main-inner .rank-box {
    max-width: 325px;
    width: 95%;
  margin-top: -40px;
}
body.contest2208.sp #contents .inner .contents-main-inner .rank-box.pc_view {
    display: none;
}
body.contest2208.sp #contents .inner .contents-main-inner .rank-box img:first-of-type {
    width: 34%;
}
body.contest2208.sp #contents .inner .contents-main-inner .rank-box img:last-of-type {
    width: 58%;
  margin-bottom: -5px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result .grid-box {
    margin-top: 30px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result .grid-box .grid-box-fig {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result .grid-box .grid-box-detail{
  width: 100%;
  box-sizing: border-box;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.first .grid-box .grid-box-detail {
    margin-top: 30px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.fourth-fifth .grid-box-contents {
    width: 100%;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.fourth-fifth .grid-box-contents.fifth {
    margin-top: 50px;
}
body.contest2208.sp #contents .inner .contents-main-inner .grid-box-detail-txt .bg-white > p img {
    width: 80%;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.first .item-detail {
    padding: 25px 20px 30px;
    font-size: 12px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result .item-detail-list {
    font-size: 12px;
    padding-left: 20px;
}
body.contest2208.sp #contents .inner .contents-main-inner .contents-result.first .item-detail-list {
    padding-left: 30px;
}

body.contest2208.sp #contents .inner .contents-main-inner .contents-result.second .bg-white .item-detail-list.col2 dt{
    clear: both;
    width: 100%;
}

body.contest2208.sp #contents .inner .contents-main-inner .contents-result .item-detail-list.col2 .row2sp {
	height: 3.6em;
}
@media screen and (max-width:375px) {
	body.contest2208.sp #contents .inner .contents-main-inner .contents-result.first .item-detail {
		padding: 20px 15px 30px;
	}
	body.contest2208.sp #contents .inner .contents-main-inner .item-detail-list.col2 dt {
		width: 75%;
	}
}



body.contest2208.sp #contents .inner .contents-main-inner .contents-result .item-detail > p {
    font-size: 13px;
}
body.contest2208.sp #contents .inner .contents-main-inner .comment-box > p::before, 
body.contest2208.sp #contents .inner .contents-main-inner .comment-box > p::after {
    width: 75px;
}
body.contest2208.sp #contents .inner .contents-main-inner .comment-box-item li {
    width: calc(100% - 20px);
}
body.contest2208.sp .first .comment-box-item li.bg_awardcolor,
body.contest2208.sp .secound .comment-box-item li.bg_awardcolor,
body.contest2208.sp .third .comment-box-item li.bg_awardcolor{
    background: #fffac6;
}
body.contest2208.sp .first .comment-box-item li:nth-child(2n){
    background:  #faf3d9;
}
body.contest2208.sp .secound .comment-box-item li:nth-child(2n){
    background-color: #e3e4e4;
    
}
body.contest2208.sp .third .comment-box-item li:nth-child(2n){
    background-color: #e9cdc0;
    
}
body.contest2208.sp #contents .inner .contents-main-inner .grid-box-detail-txt .bg-white {
	margin: 30px 0;
}

/* For modern browsers */
.cf:before, .cf:after {}
.cf:after {
    clear: both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom: 1;
}