/* フロントページ_の画面幅が1600ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:1600px){
    
    .craft_contest .title {
        max-width: unset;
        width: 90%;
    }

    .craft_contest .craft_carousel_swiper .swiper-slide {
        margin-right: unset;
    }


}











/* 画面幅が1400ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:1400px){

    .craft_contest .toku_image {
        right: 3em;
        bottom: -3em;
        max-width: 150px;
    }





}









/* 画面幅が1200ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:1200px){

    .craft_contest .inner_wrapper::before {
        background-size: 100%;
    }



    .craft_contest .top_image {
        width: 90%;
        margin: 0 auto;
    }

    .craft_contest .title_copy {
        width: fit-content;
        margin: 0 auto;
    }

    .craft_contest .title {
        width: 95%;
        margin-bottom: 5em;
    }

    

    .craft_contest .title .text_box {
        width: fit-content;
        padding: 8em;
    }


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

    .craft_contest .title_image {
        bottom: -12em;
    }

    .craft_contest .toku_image {
        max-width: 120px;
    }










}






/* 画面幅が900ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:900px){

    /* ********************************** ハック工作コンテスト_文字大きさ ********************************** */
    .craft_contest .craft_contest_font_4em{
    font-size: 57.5px;
    }

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

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

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

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

  













    /* ********************************** ここから個別のパーツ ********************************** */

    .craft_contest .inner_contents {
        width: 90%;
    }

    .craft_contest .inner_wrapper::before {
        background-size: 150%;
    }

    .craft_contest .header_btn_wrapper li {
        padding: unset;
    }


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


    .craft_contest .header_btn_wrapper li a {
        padding: 0 2em;
    }

 
    .craft_contest .title_copy{
        line-height: 1.25em;
        padding: 0.75em 1em;
        font-size: 2.5em;
    }

    .craft_contest .title_copy .dots::before {
        top: -3em;
    }


    .craft_contest .title_copy br{
        display: block;
    }

    .craft_contest .title_copy::before,
    .craft_contest .title_copy::after{
        display: none;
    }


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

    .craft_contest .craft_carousel_swiper .swiper-slide {
        width: calc(100% / 3);
        border: solid 9px white;
        box-shadow: 0.5em 0.5em 0 #b5b5b6;
    }

    .craft_contest .title {
        width: 90%;
        margin-bottom: 4em;
    }

    .craft_contest .title .text_box {
        padding: 6em 0 4em 0;
        width: 80%;
    }

     .craft_contest .text_box .sub_ttl{
        font-size: 2em;
    }

    .craft_contest .text_box .main_ttl{
        font-size: 3em;
    }

    .craft_contest .title_image {
        bottom: -10em;
        z-index: 1;
        max-width: 400px;
    }

    .craft_contest .toku_image {
        display: none;
    }

    .craft_contest #section1 .readtext {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }

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

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

    .craft_contest #section1 .comment_wrapper .category {
        display: flex;
        justify-content: space-between;
        width: 90%;
        max-width: 450px;
    }

    .craft_contest #section1 .comment_wrapper .category li {
        padding: 1em;
    }

    .craft_contest #section1 .comment_wrapper .category li p::before {
        transform: rotate(90deg);
        display: inline-flex;
        margin-bottom: 0.25em;
    }

    .craft_contest #section1 .comment_wrapper .category li p,
    .craft_contest #section1 .comment_wrapper .category li p::before{
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

   











   


    .craft_contest .image_list_wrapper {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto 4em auto;
        gap: 2em;
    }









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

    .craft_contest .section3 .date_box {
        padding: 3em 0;
    }

    .craft_contest .section3 .date_box span{
        display: block;
        transform: rotate(90deg);
        margin: 0.4em 0;
    }

    .craft_contest #countdown_craft_contest {
        width: 90%;
    }








    .craft_contest .section4 .award_comment {
        margin: 3em auto 2em auto;
    }

    .craft_contest .section4 .award_comment {
        padding: 1.5em;
        text-align: left;
        border: 6px solid #dfd000
    }

    .craft_contest .section4 .award_comment::after {
        bottom: -30px;
    }

    .craft_contest .section4 .award_comment::before {
        bottom: -40px;
    }

    .craft_contest .section4 .award_list {
        margin: 3em 1em 1em 1em;
        font-size: 1.25em;
    }

    .craft_contest .section4 .award_comment br{
        display: none;
    }

   















    .craft_contest .section4 .award_name {
        margin: 1.5em 0;
        width: 100%;
    }

    .craft_contest .section4 .award_contents > li {
        margin: 4em auto 0 auto;
    }

    .craft_contest .section4 .award_text {
        margin: 2em auto 0 auto;
    }








    .craft_contest .section5 .howto_wrapper {
        margin: 3em 0;
    }

    .craft_contest .section5 .howto_wrapper > li {
        padding: 3em;
    }

    .craft_contest .section5 .howto_wrapper .howto_title  br{
        display: none;
    }

    .craft_contest .section5 .howto_wrapper .howto_text {
        text-align: left;
    }




    .craft_contest .section4 .award_list li {
        margin-left: 1em;
    }

    .craft_contest .section6 .summary_list {
        margin: 3em 0 0 0;
    }

    .craft_contest .section6 .summary_list {
        display: block;
    }

    .craft_contest .section6 .summary_contents_box {
        padding: 2em;
    }

    .craft_contest .section6 .summary_number_list {
        margin: 2em 0 0 0;
    }

    .craft_contest .section7 .access_count_warapper {
        margin: 1em auto;
    }














    


    
}




/* 画面幅が600ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:600px){




    .craft_contest .header_btn_wrapper {
        margin: unset;
        display: none;
    }

    .craft_contest .top_image {
        width: 100%;
        border: solid 5px white;
        margin-top: 3em;
    }

    .craft_contest .title_copy {
        font-size: 1.75em;
    }

    .craft_contest .craft_carousel_swiper .swiper-slide {
        border: solid 5px white;
    }

    .craft_contest .title {
        width: 95%;
        margin-bottom: 6em;
        padding: 0 0 1.5em 0;
    }

    .craft_contest .title .text_box {
        padding: 4.5em 0 3em 0;
        width: 100%;
    }

    .craft_contest .text_box .sub_ttl {
        font-size: 1.5em;
        margin-bottom: 0.25em;
    }

    .craft_contest .text_box .main_ttl {
        font-size: 2.5em;
    }

    .craft_contest .title_image {
        bottom: -6em;
        width: 80%;
    }

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

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

    .craft_contest #section1 .comment_wrapper .text::before,
    .craft_contest #section1 .comment_wrapper .text::after{
        content: unset;
    }

    .craft_contest #section1 .comment_wrapper p{
        line-height: 1.25em;
        display: inline-flex;
        font-size: 1.25em;
    }

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

    .craft_contest #section1 .comment_wrapper .text_box::after{
        transform: scale(-1, 1);
    }
























   

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

    .craft_contest #section1 .readtext {
        font-size: 1.2em;
    }

    .craft_contest #section1 .comment_wrapper .category {
        font-size: 1.4em;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1em;
    }

    .craft_contest #section1 .comment_wrapper .category li p,
    .craft_contest #section1 .comment_wrapper .category li p::before {
        writing-mode: unset;
        text-orientation: unset;
    }

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

    .craft_contest #section1 .comment_wrapper .category li p::before {
        transform: unset;
        display: inline-flex;
        margin-bottom: unset;
    }

     .craft_contest .section4 .award_contents_box{
        max-width: unset;
    }

    .craft_contest .image_list_wrapper {
        gap: 1.5em;
        margin: 0 auto 2.5em auto;
    }

    .craft_contest .image_list_wrapper li img {
        border: 4px solid white;
    }

    .craft_contest .image_list_wrapper li .ttl {
        padding: 0.75em;
        border-radius: 1em;
        padding: 0.5em;
        font-size: 1.2em;
    }

    .craft_contest .section3 .date_box p{
        font-size: 2em;
    }

    .craft_contest .section3 .date_box {
        padding: 1.5em 0;
    }

    .craft_contest #countdown_craft_contest {
        padding: 1em;
    }

    .craft_contest .section4 .award_comment {
        margin: 2em auto;
        padding: 1em;
    }

    .craft_contest .section4 .award_comment p{
        font-size: 1.2em;
    }

    .craft_contest .section4 .award_list {
        margin: 2em 1em 1em 1em;
        font-size: 1.1em;
    }

    .craft_contest .section4 .award_list li {
        margin-left: 0.25em;
    }

    

    .craft_contest .section4 .award_name {
        margin: 1em 0;
        padding: 0.2em 0;
        font-size: 1.5em;
    }

    .craft_contest .section4 .item_name {
        border-radius: 0.5em;
        font-size: 1.4em;
        top: -1.5em;
    }

    .craft_contest .band_titele {
        font-size: 1.5em;
    }

    .craft_contest .section4 .award_image {
        width: 350px;
        height: 350px;
        margin: 0 auto;
    }

    .craft_contest .section5 .howto_wrapper .howto_title p{
        font-size: 1.25em;
        line-height: 1.5em;
    }


    .craft_contest .section5 .howto_wrapper .howto_title {
        margin: 1.5em 0;
        text-align: left;
    }

    .craft_contest .section5 .howto_wrapper li:last-of-type .howto_title{
        text-align: center;
    } 

    .craft_contest .section5 .howto_wrapper .howto_text br{
        display: none;
    }

    .craft_contest .section5 .howto_wrapper {
        margin: 2em 0;
    }

    .craft_contest .section5 .howto_wrapper {
        border-radius: 1.5em;
        border: 4px solid #d4ac5a;
    }

    .craft_contest .section5 .howto_wrapper > li {
        padding: 1.5em;
    }



  

    .craft_contest .section6 .summary_list {
        margin-top: 2em;
    }

    .craft_contest .section6 .summary_contents_box {
        padding: 1.25em;
    }

    .craft_contest .section7 .bottom_wrapper {
        padding: 1em 0 0.5em 0;
        margin-top: 2em;
    }

    .craft_contest .section7 .craft_contest_copyright {
        padding: 2em;
        line-height: 1.4em;
    }


}





/* 画面幅が500ピクセル以下の場合にスタイルを適用する条件 */
@media screen and ( max-width:400px){

    .craft_contest .inner_wrapper::before {
        background-size: 175%;
    }

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

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

    .craft_contest .image_list_wrapper li .ttl {
        font-size: 1.1em;
    }


    .craft_contest .section4 .award_image {
        width: 250px;
        height: 250px;
    }

    .craft_contest .section4 .item_warapper {
        padding: 2.5em 2.5em 1.5em 2.5em;
    }

    .craft_contest .section4 .award_text {
        margin: 1.5em auto 0 auto;
    }





  








}