/* ********************************** トピックスページ（ハック工作コン_受賞作品ページ）の設定 ********************************** */

.craft_contest_results #loading{
  height: 100svh;
}

.craft_contest_results .container {
  width: 100%;
  height: 100vh;
}


.craft_contest_results .inner_wrapper {
  position: relative;
  padding: unset;
  text-align: center;
  margin: 0 auto;
  background-color: #f1efc7;
  overflow: hidden;
}


/* 背景画像専用レイヤー */
.craft_contest_results .inner_wrapper::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: url(../../images/systems/topics/craft_contest/img/bg_illust.png);
  background-repeat: repeat;
  background-position: center top;
  background-size: 60%;

  animation: bgIllustScale 4s infinite steps(1, end);
  transform-origin: center center;
  z-index: 0;
}

/* 中身を背景より前面に出す */
.craft_contest_results .inner_wrapper > * {
  position: relative;
  z-index: 1;
}


@keyframes bgIllustScale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}


.craft_contest_results .inner_wrapper > div{
  width: 100%;
}

.craft_contest_results .inner_contents{
  max-width: 900px;
  background-color: #f1efc7;
}

.craft_contest_results #section1,
.craft_contest_results #section2,
.craft_contest_results #section3,
.craft_contest_results #section4,
.craft_contest_results #section5,
.craft_contest_results #section6,
.craft_contest_results #bottom_contents,
.craft_contest_results #section8{
  padding: unset;
  border: unset;
  background: unset;
}

.craft_contest_results .inner_wrapper{
  padding: unset;
}

.craft_contest_results .footer_wrapper,
.craft_contest_results #copyright_box_inner_warapper {
  display: none;
}









/* ********************************** 工作コン_文字大きさ ********************************** */
.craft_contest_results .craft_contest_results_font_0ten6em{
  font-size: 10px;
}


.craft_contest_results .craft_contest_results_font_1ten5em{
  font-size: 24px;
}

.craft_contest_results .craft_contest_results_font_2em{
  font-size: 32px;
}

.craft_contest_results .craft_contest_results_font_2ten5em{
  font-size: 40px;
}

.craft_contest_results .craft_contest_results_font_3em{
  font-size: 48px;
}

.craft_contest_results .craft_contest_results_font_4em{
  font-size: 64px;
}











/* ブラウザバックボタン */
.craft_contest_results .return_btn{
  width: 45px;
  background-color: black;
  padding: 0.5em;
  text-align: center;
  cursor: pointer;

  position: absolute;
  top: 1em;
  left: 1em;
}

.craft_contest_results .return_btn p{
  color: white;
  margin-top: 0.65em;
}

.craft_contest_results .return_btn:hover{
  background-color: var(--maincolor);
}














/* 作品事例(swiper) */
.craft_contest_results .craft_carousel {
  width: 100vw;
}

.craft_contest_results .craft_carousel_swiper .swiper-wrapper{
  transition-timing-function: linear !important; /* ←重要：等速 */
}



/* 奇数番目 */
.craft_carousel_swiper .swiper-wrapper > .swiper-slide:nth-child(odd){
  transform: rotate(-5deg);
  animation: rotateOdd 2s infinite steps(1, end);
}

/* 偶数番目 */
.craft_carousel_swiper .swiper-wrapper > .swiper-slide:nth-child(even){
  transform: rotate(5deg);
  animation: rotateEven 2s infinite steps(1, end);
}

@keyframes rotateOdd {
  0% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(-5deg);
  }
}

@keyframes rotateEven {
  0% {
    transform: rotate(5deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}









/* 各画像の幅を固定 */
.craft_contest_results .craft_carousel_swiper .swiper-slide{
  width: calc(100% / 4); /* ←PCの場合 */
  height: auto;
  flex-shrink: 0;

  margin-right: 4em;
  border: solid 12px white;
  box-shadow: 1em 1em 0 #b5b5b6;
  scale: 0.9;
}

/* 画像 */
.craft_contest_results .craft_carousel_swiper img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}










.craft_contest_results .title{
  margin: 2em auto 2em auto;
  padding: 3em 0 8em 0;
  background: url(../../images/systems/topics/craft_contest/img/section1_ttl_bg3.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: white;
  max-width: 1300px;
  position: relative;
}

.craft_contest_results .title .text_box{
  padding: 8em 0;
  max-width: 1100px;
  margin: 0 auto;
  background: url(../../images/systems/topics/craft_contest/img/section1_ttl_bg2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: relative;
}

.craft_contest_results .text_box .main_ttl{
  line-height: 1.2em;
}

.craft_contest_results .text_box .main_ttl span br{
  display: none;
}

.craft_contest_results .text_box .sub_ttl::before,
.craft_contest_results .text_box .sub_ttl::after{
  content: url(../../images/systems/topics/craft_contest/img/text_slash_regular.svg);
  display: inline-block;
  width: 1em;
  vertical-align: middle;
}

.craft_contest_results .text_box .sub_ttl::after{
  transform: scale(-1, 1);
}


.craft_contest_results .title_image{
  width: 100%;
  max-width: 600px;
  position: absolute;
  bottom: -8em;
  left: 50%; /* 親要素の左から半分（中央）の位置に移動 */
  transform: translateX(-50%); /* 自身の横幅の半分だけ左に戻す */
}

.craft_contest_results .toku_image{
  max-width: 175px;
  position: absolute;
  bottom: -5em;
  right: 5em;
  transform: rotate(8deg);
  box-shadow: 5px 5px 5px #b5b5b6;
}


.craft_contest_results #section1 .readtext{
  line-height: 1.75em;
  background-color: #f1efc7;
}

.craft_contest_results #section1 .comment_wrapper{
  margin-top: 4.5em;
}

.craft_contest_results #section1 .comment_wrapper br{
  display: none;
}











.craft_contest_results .section1 .results_ttl p{
  margin: 1em auto 0 auto;
  background-color: white;
  display: inline-block;
  padding: 0.5em;
  border: 5px solid #d4ac5a;
  width: 100%;
}


.craft_contest_results .section1 .results_ttl p::before{
  content: "";
  width: 1em;
  height: 1em;
  background: url(../../images/systems/topics/craft_contest/img/arrow_icon.png) no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: bottom;
  transform: rotate(270deg);
}

.craft_contest_results .section1 .second_text{
  line-height: 1.75em;
  margin: 2.5em 0;
}

.craft_contest_results .section1 .third_text{
  background-color: white;
  border-top: 5px solid #d4ac5a;
  padding-top: 3em;
  line-height: 1.75em;
}














.craft_contest_results .section2 .band::before{
  content: "";
  height: 4em;
  background-color: white;
  width: 100%;
  display: block;
}

.craft_contest_results .band_titele{
  padding: 0.5em 0;
  background-color: #d4ac5a;
  color: white;
  margin-bottom: 1.5em;
}

.craft_contest_results .band_titele::before{
  content: "";
  width: 1.2em;
  height: 1.2em;
  background: url(../../images/systems/topics/craft_contest/img/arrow_icon.png) no-repeat;
  background-size: contain;
  background-position: center;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: sub;
}




.craft_contest_results .award_images_list{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2em;
  margin-bottom: 4em;
}

.craft_contest_results .award_images_list .award_image{
  overflow: hidden;
  background-color: white;
  border: 4px solid white;

  height: 270px; /* 好きな高さに調整 */
}

.craft_contest_results .award_images_list .award_image img{
  width: auto;
  height: 100%;
  object-fit: cover;
  display: block;
}

.craft_contest_results .award_images_list .caption_name{
  margin-top: 1em;
}

.craft_contest_results .award_images_list .caption_name li{
  line-height: 1.5em;
}

.craft_contest_results .award_name::before{
  content: "【";
}

.craft_contest_results .award_name::after{
  content: "】";
}









.craft_contest_results .award_item_list_contents{
  position: relative;
  background-color: white;
  padding: 4em 0 3em 0;
  border: #dfd000 solid 8px;
  border-radius: 2em;
}

.craft_contest_results .award_item_list > li{
  margin-bottom: 5em;
}


.craft_contest_results .award_item_list_contents .award_title{
  position: absolute;
  top: -1.5em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #dfd000;
  color: white;
  padding: 0.75em 3em;
  border-radius: 999px;
  width: max-content;
  display: inline-block;
}

.craft_contest_results .award_item_list_contents .award_title p::before{
  content: "";
  width: 1em;
  height: 1em;
  background: url(../../images/systems/topics/craft_contest/img/award_icon.png) no-repeat;
  background-size: contain;
  display: inline-block;
  margin-right: 0.25em;
  vertical-align: bottom;
}




.craft_contest_results .award_contents{
  display: flex;
  gap: 2em;
  align-items: flex-start;
  line-height: 1.5em;
  padding: 0 3em;
}

.craft_contest_results .award_item_container > li:first-child{
  padding-bottom: 3em;
  border-bottom: 2px solid #dfd000;
}

.craft_contest_results .award_item_container > li:nth-child(2){
  padding-top: 3em;
}

.craft_contest_results .award_item_container > li:nth-child(2) .award_contents{
  align-items: center;
}

.craft_contest_results .award_item_container .award_contents .award_photo{
  flex: 1;
  min-width: 0;
}



.craft_contest_results .award_contents .award_ttl{
  display: flex;
  align-items: center;
  margin-bottom: 2em;
}

.craft_contest_results .award_contents .award_txt{
  text-align: left;
}

.craft_contest_results .award_contents .award_ttl li:first-of-type{
  width: 6.25em;
  height: 5em;
  border: 1px solid black;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 1em;
}

.craft_contest_results .award_contents .award_ttl li:last-of-type{
  margin: 0 auto 0 auto;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width: 100%;
  padding: 0.75em 0;
  line-height: 1.25em;
}




.craft_contest_results .award_item_container .prize_container{
  text-align: left;
}

.craft_contest_results .award_item_container .award_contents .award_photo{
  flex: 0 0 320px;
  max-width: 320px;
  margin: 0 auto;
}

.craft_contest_results .award_item_container .award_contents .award_photo img{
  width: 100%;
  height: auto;
  display: block;
}

.craft_contest_results .award_contents .creator_name{
  margin-top: 1em;
  text-align: center;
}

.craft_contest_results .award_contents .creator_name::before{
  content: "〈 制作者：";
}

.craft_contest_results .award_contents .creator_name::after{
  content: " 様〉";
}





.craft_contest_results .award_item_container .award_contents .prize_text{
  display: inline-flex;
  background-color: #dfd000;
  color: white;
  padding: 0.25em 1em;
  margin-bottom: 1em;
  align-self: flex-start;
  border-radius: 0.5em;
}

.craft_contest_results .award_item_container .award_contents .prize_contents{
  margin-top: 1em;
}

.craft_contest_results .award_item_container .award_contents .prize_contents li::before{
  content: "●";
  margin-right: 0.25em;
}





















.craft_contest_results .bottom_contents .bottom_wrapper{
  background: url(../../images/systems/topics/craft_contest/img/footer_bg.png);
  background-size: 100% 100%;
  background-repeat: repeat-x;
  height: 250px;
  margin-top: 4em;
}

.craft_contest_results .bottom_contents .craft_contest_copyright{
  background-color: #daa267;
  color: white;
  padding: 2em;
}

.craft_contest_results #copyright_box{
  display: none !important;
}

.craft_contest_results .bottom_contents .inner_contents{
  background-color: transparent;
}








.craft_contest_results #page-top {
  bottom: 1em;
  right: 1em;
}


.craft_contest_results #page-top a {
  width: 50px;
  height: 50px;
  background: url(../../images/systems/topics/craft_contest/img/top_btn.png) no-repeat center;
  background-size: contain;
}