@charset "utf-8";

/* Brilliantrepublic BASEstyle */

#kirakira_logo{
    text-decoration: none;
    display: block; 
    position: fixed; 
    width:95px;
    z-index: 9999; /* 最前面にする　*/
    margin: 20px 0 0 10px;
    position: fixed;
    }


.mainfont{
    font-family: 'Anton', sans-serif;
    color:white;
    font-size: 50px;
    margin:200px 0 0 20px;
    letter-spacing:0.08em;
    line-height:1em;
    position:absolute;
}

dl{
    margin: 10px 0 0 0;
}

dd{
    margin: 0 0 0 32px;
}

.menucategoly{
color:white;
text-align:center;
margin:0;
font-size: 12px;
}

.HeadText{
    font-size: 14px;
    color:white;
    /*text-shadow:2px 2px 3px black;*/

    margin:300px 0 0 22px;

    position:absolute;

}

#header_menu{
    text-decoration: none;
    display: block; 
    position: fixed; 
    top: 0px;
    left: 0px;
    z-index: 9999;
    background-color:rgba(231, 220, 220, 0.2);
    width:100%;
    padding: 2px 0 2px 5px;
    margin: 550px 0 0 0;
    width:390px;
    }

    #header_menu a {
    float: left; 
    color: #FFF;
    padding: 10px;
    }

    #header_menu a:after { 
    display:block;
    clear: both;
    content:"";
    }

    .container{
        position: relative;
    }
    .container img{
        position:absolute;
        display:block;
        width:390px;
        position: fixed;
    }



/* 
    .material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24,
    }
 */



    .menubutton {
        margin:1px 6px 0px 0px;
        background-color: #2a289d;
        color: white;
        padding: 1px 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 12px;
        font-family: Arial, sans-serif;
        cursor: pointer; border: none;
        border-radius: 2px;
    }

    .menubutton:hover {

        background-color:rgb(86, 98, 104);
        transform: scale(1.1);
        transition-duration: 1s;
        color:red;
    }


    /* 画面サイズに応じて画像を変更　*/
    @media screen and (max-width: 1920px){

        body {
            margin: 0;
            padding: 0;
            /*background-image: url('../../assets/images/2.jpg');*/
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        p {
        color: red;
        }
    }    

    @media screen and (max-width: 800px){
        p {
        color: blue;
        }
    }
    /* 一般的なスマホサイズの設定*/
    @media screen and (max-width: 1200px){

        body {
            margin: 0;
            padding: 0;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
             /*background-image: url('../../assets/images/top_w960.png');*/
        }
        p {
        color: green;
        }
    }








body{
    font-family: 'Noto Sans JP', "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color:#333;
    background-color:rgba(222, 245, 222, 0.753);
}

.section-category{
    text-align: left ;
    list-style: none ;
}

.headline{
    margin: 300px 0 20px 0 ;
    padding:0 0 0 70px;
    font-size: 24px ;
    text-align:left ;
    color:antiquewhite ;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.grid{
    margin: 0;
    padding: 0;
    display: inline-block ;
    align-items: center;

    list-style: none ;
}

.grid-4{
    width: 100%;
}

.girditem{
    list-style: none ;
}

.categoryname{
    font-weight: bold;
    padding: 0 15px;
}
.categoryimage{
    margin: 0 0 5px 16px;
    vertical-align: top
}

.categoryimage:hover{
    background-color:rgb(208, 236, 201);
    transform: scale(1.1); 
    transition-duration: 1s; color: white;
}

.categorycaption{
    margin: 0 0 30px 56px;
    font-size: 11px;
    font-weight: normal;
}

 
  /* デフォルトの背景画像（スマートフォン用） */
body {
    background-image: url('../images/top_w960.png');
  }
  
  /* スライドテンプレート */
  @media (min-width: 768px) {
    body {
      background-image: url('../images/2.jpg');
    }
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 600px 10px 0px 10px;
  }
  
  .image {
    max-width: 100%; /* これにより、画像はコンテナの幅を超えません */
    height: auto; /* これにより、画像は元のアスペクト比を保ちます */
  }