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

.craft_contest #loading{
  height: 100svh;
}

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


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


/* 背景画像専用レイヤー */
.craft_contest .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 .inner_wrapper > * {
  position: relative;
  z-index: 1;
}


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

  50% {
    transform: scale(1.02);
  }

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


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

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

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

.craft_contest .inner_wrapper{
  padding: unset;
}

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









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


.craft_contest .craft_contest_font_1ten5em{
  font-size: 24px;
}

.craft_contest .craft_contest_font_2em{
  font-size: 32px;
}

.craft_contest .craft_contest_font_2ten5em{
  font-size: 40px;
}

.craft_contest .craft_contest_font_3em{
  font-size: 48px;
}

.craft_contest .craft_contest_font_4em{
  font-size: 64px;
}











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

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

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

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

.craft_contest .header_btn_wrapper {
  display: flex;
  width: fit-content;
  align-items: stretch;
}

.craft_contest .header_btn_wrapper{
  margin: 0 auto 1em auto;
}

.craft_contest .header_btn_wrapper li{
  margin: 1em 0;
  padding: 0 1em;
  border-right: 1px solid black;  
  background-color: #f1efc7;
  line-height: 1.25em;
  display: flex;
}

.craft_contest .header_btn_wrapper li br{
  display: none;
}

.craft_contest .header_btn_wrapper li:first-of-type{
  padding-left: unset;
}

.craft_contest .header_btn_wrapper li:last-of-type{
  padding-right: unset;
  border-right:unset;
}



.craft_contest .header_btn_wrapper li a{
  padding: 1em 2em;
  display: flex;
  align-items: center;
  height: 100%;
}

.craft_contest .header_btn_wrapper li a:hover{
  background: url(../../images/systems/topics/craft_contest/img/top_header_btn.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}









.craft_contest .top_image{
  width: 100%;
  border: 12px solid white;
}

.craft_contest .title_copy{
  padding: 0.75em 0.5em 0.25em 0.5em;
  background-color: white;
  transform: rotate(-5deg);
  position: relative;
  z-index: 2;
}

.craft_contest .title_copy br{
  display: none;
}

.craft_contest .title_copy::before,
.craft_contest .title_copy::after{
  content: url(../../images/systems/topics/craft_contest/img/text_slash_bold.svg);
  display: inline-block;
  width: 1em;
  margin-right: 0.25em;
  vertical-align: middle;
}

.craft_contest .title_copy::after{
  transform: scale(-1, 1);
  margin-right: unset;
  margin-left: 0.25em;
}

.craft_contest .title_copy .dots {
  position: relative;
  display: inline-block;
}

.craft_contest .title_copy .dots::before {
  content: "●　　　●";
  position: absolute;
  left: 50%;
  top: -1.5em;
  transform: translateX(-50%);
  font-size: 0.25em;
  white-space: nowrap;
}






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

.craft_contest .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 .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 .craft_carousel_swiper img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}








.craft_contest #section1{
  padding: 1em 0;
}

.craft_contest .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 .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 .text_box .main_ttl{
  line-height: 1.2em;
}

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

.craft_contest .text_box .sub_ttl::before,
.craft_contest .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 .text_box .sub_ttl::after{
  transform: scale(-1, 1);
}


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

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


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

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

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

.craft_contest #section1 .comment_wrapper .text::before,
.craft_contest #section1 .comment_wrapper .text::after{
  content: url(../../images/systems/topics/craft_contest/img/text_slash_regular_black.svg);
  display: inline-block;
  width: 1em;
  margin-right: 0.25em;
  vertical-align: middle;
}

.craft_contest #section1 .comment_wrapper .text::after{
  transform: scale(-1, 1);
  margin-right: unset;
  margin-left: 0.25em;
}

.craft_contest #section1 .comment_wrapper .category{
  display: inline-flex;
  margin: 1em auto;
}

.craft_contest #section1 .comment_wrapper .category li{
  padding: 0.5em 1em;
  border: 6px solid #3ab483;
  background-color: white;
  border-radius: 0.8em;
  margin-right: 1em;
}

.craft_contest #section1 .comment_wrapper .category li:last-of-type{
  margin-right: unset;
}

.craft_contest #section1 .comment_wrapper .category li:nth-child(2){
  border: 6px solid #dfd000;
}

.craft_contest #section1 .comment_wrapper .category li:nth-child(3){
  border: 6px solid #f6ae54;
}

.craft_contest #section1 .comment_wrapper .category li:nth-child(4){
  border: 6px solid #ee87b4;
}

.craft_contest #section1 .comment_wrapper .category li:nth-child(5){
  border: 6px solid #00b9ef;
}

.craft_contest #section1 .comment_wrapper .category li p::before{
  content: "#";
}










.craft_contest .band_titele{
  padding: 0.75em 0;
}

.craft_contest .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 .image_list_wrapper{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3em;
  margin: 0 auto 6em 0;
}

.craft_contest .image_list_wrapper li{
  position: relative;
  margin-bottom: 1.5em;
}

.craft_contest .image_list_wrapper li img{
  border: 8px solid white;
  overflow: hidden;
  border-radius: 999px;
}

.craft_contest .image_list_wrapper li .ttl {
  position: absolute;
  bottom: -1em;
  left: 50%; /* 親要素の左から半分（中央）の位置に移動 */
  transform: translateX(-50%); /* 自身の横幅の半分だけ左に戻す */
  padding: 0.75em;
  border-radius: 999px;
  color: white;
  width: 100%;
  line-height: 1.25em;
}

.craft_contest .image_list_wrapper li .ttl .mob_br br{
  display: none;
}











.craft_contest .image_list_wrapper li:nth-child(1) img,
.craft_contest .image_list_wrapper li:nth-child(1) .ttl {
  background-color: #dfd000;
  border-color: #dfd000;
}

.craft_contest .image_list_wrapper li:nth-child(2) img,
.craft_contest .image_list_wrapper li:nth-child(2) .ttl {
  background-color: #f09082;
  border-color: #f09082;
}

.craft_contest .image_list_wrapper li:nth-child(3) img,
.craft_contest .image_list_wrapper li:nth-child(3) .ttl {
  background-color: #3ab483;
  border-color: #3ab483;
}

.craft_contest .image_list_wrapper li:nth-child(4) img,
.craft_contest .image_list_wrapper li:nth-child(4) .ttl {
  background-color: #c0b869;
  border-color: #c0b869;
}

.craft_contest .image_list_wrapper li:nth-child(5) img,
.craft_contest .image_list_wrapper li:nth-child(5) .ttl {
  background-color: #c9caca;
  border-color: #c9caca;
}

.craft_contest .image_list_wrapper li:nth-child(6) img,
.craft_contest .image_list_wrapper li:nth-child(6) .ttl {
  background-color: #ee87b4;
  border-color: #ee87b4;
}

.craft_contest .image_list_wrapper li:nth-child(7) img,
.craft_contest .image_list_wrapper li:nth-child(7) .ttl {
  background-color: #3ab483;
  border-color: #3ab483;
}

.craft_contest .image_list_wrapper li:nth-child(8) img,
.craft_contest .image_list_wrapper li:nth-child(8) .ttl {
  background-color: #a59aca;
  border-color: #a59aca;
}

.craft_contest .image_list_wrapper li:nth-child(9) img,
.craft_contest .image_list_wrapper li:nth-child(9) .ttl {
  background-color: #f6ae54;
  border-color: #f6ae54;
}

.craft_contest .image_list_wrapper li:nth-child(10) img,
.craft_contest .image_list_wrapper li:nth-child(10) .ttl {
  background-color: #b39c90;
  border-color: #b39c90;
}

.craft_contest .image_list_wrapper li:nth-child(11) img,
.craft_contest .image_list_wrapper li:nth-child(11) .ttl {
  background-color: #00b9ef;
  border-color: #00b9ef;
}

.craft_contest .image_list_wrapper li:nth-child(12) img,
.craft_contest .image_list_wrapper li:nth-child(12) .ttl {
  background-color: #73c6c8;
  border-color: #73c6c8;
}









.craft_contest .section3 .band,
.craft_contest .section4 .band,
.craft_contest .section5 .band,
.craft_contest .section6 .band{
  background-color: #d4ac5a;
  color: white;
}

.craft_contest .section3 .date_box{
  padding: 4em 0;
  background-color: white;
}

.craft_contest #countdown_craft_contest{
  margin: 2em auto 0 auto;
  padding: 1em 4em;
  border: 1px solid black;
  border-radius: 999px;
  width: fit-content;
}















.craft_contest .section4 .band_titele::before {
  background: url(../../images/systems/topics/craft_contest/img/award_icon.png) no-repeat;
  background-size: contain;
  background-position: center;
}

.craft_contest .section4 .award_comment{
  margin: 6em auto 2em auto;
  padding: 2em;
  border: 8px solid #dfd000;
  border-radius: 1em;
  background-color: white;
  width: fit-content;
  position: relative;  
}

/* 外側（イエローの枠部分） */
.craft_contest .section4 .award_comment::before {
  content: "";
  position: absolute;
  left: 50%;                       /* 中央に配置 */
  bottom: -48px;                   /* ボックスの下に出す */
  transform: translateX(-50%);     /* 水平方向中央寄せ */
  border-style: solid;
  border-width: 40px 25px 0 25px;  /* 下向き三角形（上辺に色が付く） */
  border-color: #dfd000 transparent transparent transparent;
}

/* 内側（ホワイトの塗り部分） */
.craft_contest .section4 .award_comment::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -33px;
  transform: translateX(-50%);
  border-style: solid;
  border-width: 45px 25px 0 25px;
  border-color: white transparent transparent transparent;
}

.craft_contest .section4 p,
.craft_contest .section4 li{
  line-height: 1.75em;
}

.craft_contest .section4 .award_list{
  text-align: left;
  margin: 2.5em auto 0 auto;
  width: fit-content;
}

.craft_contest .section4 .award_list li{
  list-style: "● ";
}

.craft_contest .section4 .award_contents > li{
  margin: 6em auto 0 auto;
  border-top: 9px dotted #dfd000;
}

.craft_contest .section4 .award_contents > li:last-of-type{
  margin-bottom: 6em;
}

.craft_contest .section4 .award_contents > li:first-of-type{
  margin-top: unset;
  border: unset;
}

.craft_contest .section4 .award_contents_box{
  max-width: 480px;
  margin: 0 auto;
}

.craft_contest .section4 .award_name{
  background-color: #dfd000;
  color: white;
  padding: 0.25em 0;
  border-radius: 999px;
  margin: 3em 0 1.5em 0;
}

.craft_contest .section4 .award_image{
  width: 480px;
  height: 480px;
  max-width: 480px;
  max-height: 480px;
  background-color: white;
  position: relative;
  border-radius: 999px;
}

.craft_contest .section4 .award_image img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
}

.craft_contest .section4 .item_warapper{
  position: relative;
  background-color: white;
  border: 4px solid #72a089;
  border-radius: 1em;
  padding: 2.5em 3.5em 1.5em 3.5em;
}

.craft_contest .section4 .item_name{
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  background-color: #72a089;
  color: white;
  padding: 0.4em 1em;
  border-radius: 0.25em;
  width: max-content;
  display: inline-block;
}

.craft_contest .section4 .item_contents{
  width: fit-content;
  text-align: left;
}

.craft_contest .section4 .item_contents li{
  list-style: "● ";
}

.craft_contest .section4 .award_text{
  margin: 1em auto;
}

.craft_contest .section4 .award_text p{
  text-align: left;
  line-height: 1.5em;
}

.craft_contest .section4 .award_contents > li:last-of-type .award_image img{
  width: 50%;
}

/* 協賛社が確定するまでいったん非表示にする */
.craft_contest .section4 .award_contents > li:last-of-type .item_warapper,
.craft_contest .section4 .award_contents > li:last-of-type .sponsor_text li:nth-child(2){
  display: none;
}

.craft_contest .section4 .sponsor_text li:nth-child(2){
  margin-top: 2em;
}









.craft_contest .section5 .howto_wrapper{
  border: 6px solid #d4ac5a;
  margin: 5em 0;
  background-color: white;
  border-radius: 4em
}

.craft_contest .section5 .howto_wrapper > li{
  padding: 4em 2.5em 5em 2.5em;
  border-top: 2px solid #d4ac5a;
}

.craft_contest .section5 .howto_wrapper > li:first-of-type{
  border-top: unset;
}

.craft_contest .section5 .howto_wrapper .step_number{
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.craft_contest .section5 .howto_wrapper li .step_number li:first-of-type{
  background-color: #dfd000;
  padding: 0.5em 1.75em 0.5em 1em;
  border-top-left-radius: 999px;
  border-bottom-left-radius: 999px;
  color: white;
}

.craft_contest .section5 .howto_wrapper li .step_number li:last-of-type{
  background-color: white;
  width: 1.5em;
  height: 1.5em;
  border: 7px solid #dfd000;
  border-radius: 999px;
  position: absolute;
  right: -0.75em;
  color: #dfd000;
}

.craft_contest .section5 .howto_wrapper .howto_title{
  margin: 2.5em 0;
  line-height: 2em;
}

.craft_contest .section5 .howto_wrapper .howto_image{
  max-width: 480px;
  margin: 0 auto 1.5em auto;
}

.craft_contest .section5 .howto_wrapper .howto_text{
  line-height: 1.5em;
}

.craft_contest .highlight{
  margin: 0 0.5em;
  background: linear-gradient(transparent 60%, #fff100 60%);
}


















.craft_contest .section5 .howto_wrapper li:nth-child(2) .step_number li:first-of-type{
  background-color: #00b9ef;
}

.craft_contest .section5 .howto_wrapper li:nth-child(2) .step_number li:last-of-type{
  border: 9px solid #00b9ef;
  color: #00b9ef;
}

.craft_contest .section5 .howto_wrapper li:nth-child(3) .step_number li:first-of-type{
  background-color: #3ab483;
}

.craft_contest .section5 .howto_wrapper li:nth-child(3) .step_number li:last-of-type{
  border: 9px solid #3ab483;
  color: #3ab483;
}









.craft_contest .section6 .summary_list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3em;
  margin: 4em 0 1em 0;
  line-height: 1.5em;
}

.craft_contest .section6 .summary_title{
  background-color: #9fa0a0;
  color: white;
  border: 3px solid #9fa0a0;
  padding: 0.5em 1em;
}

.craft_contest .section6 .highlight {
  margin: unset;
}

.craft_contest .section6 .summary_contents_box{
  padding: 1em 1.5em;
  border: 3px solid #9fa0a0;
  text-align: left;
  background-color: white;
}



.craft_contest .section6 .summary_contents_box > li .second_ttl{
  margin: 1em 0 0.25em 0;
}

.craft_contest .section6 .summary_contents_box > li:first-of-type .second_ttl{
  margin-top: unset;
}

.craft_contest .section6 .summary_contents_box .summary_memo{
  margin-top: 0.5em;
  line-height: 1.75em;
}

.craft_contest .section6 .summary_contents_box td{
  padding-left: 2em;
}


.craft_contest .section6 .craft_category li{
  list-style: "・";

}

.craft_contest .section6 .summary_memo li{
  list-style: "※";
}

.craft_contest .section6 .summary_dots_list li{
  list-style: "● ";
}

.craft_contest .section6 .summary_number_list > li{
  list-style: decimal;
  margin-top: 1em;
}

.craft_contest .section6 .craft_category,
.craft_contest .section6 .summary_memo,
.craft_contest .section6 .summary_dots_list{
  padding-left: 1em;
}

.craft_contest .section6 .summary_number_list{
  padding-left: 1.5em;
  margin: 2em 0 1em 0;
}

.craft_contest .section7 .bottom_wrapper{
  background: url(../../images/systems/topics/craft_contest/img/footer_bg.png);
  background-size: 100% 100%;
  background-repeat: repeat-x;
  padding: 5em 0 1em 0;
}

.craft_contest .section7 .access_count_warapper{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
  margin: 4em auto;
  color: white;
  width: fit-content;
}

.craft_contest .section7 .access_count_warapper > li:first-of-type{
  text-align: right;
  border-right: 2px solid white;
  padding-right: 2em;
}

.craft_contest .section7 .access_count_list{
  display: flex;
  align-items: center;
}

.craft_contest .section7 .access_count_list .ttl{
  margin-right: 2em;
}

.craft_contest .section7 .craft_contest_copyright{
  background-color: #daa267;
  color: white;
  padding: 2em;
}

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

.craft_contest .section7 .inner_contents{
  background-color: transparent;
}








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


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