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


}











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





}









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



    .concept .genre_wrapper li {
        width: calc(100% / 2);
    }

  
  






}









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

    .concept .category_box {
        background-size: 100%;
    }

    .concept .genre_wrapper {
        width: 90%;
        margin: 0 auto 250px auto;
    }

    .concept .genre_wrapper li {
        height: 250px;
    }

















}









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


    .concept .concept_wrapper{
        grid-template-columns: 2fr; /* 2列に設定 */
        gap: 1em; /* 要素間の間隔を調整（必要なら） */
    }

    .concept .concept_wrapper .message_box {
        background-position: top -40px left 82%;
        background-size: 200%;
    }

    .concept .concept_wrapper .message_box > ul >li {
        width: 100%;
        box-sizing: border-box;
    }

    .concept .concept_wrapper .concept_text p {
        line-height: 1.8em;
        font-size: 1.3em;
    }

    .concept .concept_wrapper .logo_warapper {
        margin: 95% auto 2em auto;
        max-width: 350px;
        width: 50%;
    }

    .concept .concept_wrapper .image_box {
        margin: 0 auto 1em auto;
    }

  

   

   
  



}











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

    .concept .concept_wrapper .message_box {
        background-size: 260%;
    }

    .concept .concept_wrapper .logo_warapper {
        margin: 120% auto 2em auto;
    }

    .concept .genre_wrapper li {
        width: calc(100% / 1);
        height: 300px;
    }

    .concept .concept_wrapper .image_box {
        padding: 0em 2em;
        margin: 0 auto 1em auto;
    }

    .concept .genre_wrapper {
        margin: 0 auto 150px auto;
    }

    .concept .concept_wrapper .concept_text p {
        font-size: 1.1em;
        margin-bottom: 1em;
    }

  



  



}





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



  








}