@charset "UTF-8";

main { max-width: 1200px; margin: 80px auto; padding: 0 15px;}

main img { height: auto; max-width: 100%; max-height: 100%;}
main video {
    width: 100%; height: auto; margin: 0 auto 50px; padding: 0;
    vertical-align: top;}
/**========================================**/
#products01 { position: relative; margin: 0 0 30px;}
#products01 h2 { margin: 0 0 20px;}
#products01 p { margin: 0 0 60px; font-size: 16px;}

@media screen and (max-width:699px){
    main { margin: 50px auto;}
    #products01 h2 { font-size: 25px;}
    #products01 p { margin: 0 0 30px; font-size: 14px;}
}


#products01 ul { max-width: 750px; margin: 0 auto; font-size: 0;}

#products01 li { 
    display: inline-block;
    box-sizing: border-box; width: 150px; margin: 0 0 5px; padding: 0; 
    font-size: 12px; line-height: 1.5em; text-align: center; vertical-align: top;}

#products01 li img { width: 85px; }

@media screen and (max-width:779px){
    #products01 ul { max-width: 600px;}
}

@media screen and (max-width:629px){
    #products01 li { width: 33.33%; padding: 0 5px;}
}


/* アコーディオン 開閉ボタン */
label[for="menu_bar01"] {
    display: inline-block; position: relative; 
    padding: 8px 20px 8px 0;
    cursor: pointer;}
label[for="menu_bar01"]::after {
    content: '';
    position: absolute; top: 15px; right: 0;
    width: 0;  height: 0;
    border-style: solid;  border-width: 6px 0 6px 9px;
    border-color: transparent transparent transparent #000;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);}

/* アコーディオン 表示・非表示エリア */
.area1 {
    position: absolute; overflow-y: hidden; z-index: 1;
    width: 100%; max-height: 0; margin: 0; padding:0; 
    border:none; background: #fff;
    opacity: 0;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;}

/* アコーディオンをクリックした場合 */
#menu_bar01:checked ~ .area1 {
    height:auto; max-height: 560px;  padding: 0 0 20px; 
    opacity: 1;
    box-shadow: 0px 6px 6px -6px rgba(0,0,0,0.35);}
    
#menu_bar01:checked ~ label[for="menu_bar01"]::after {
    content: '×';
    top: 8px; right: -5px;
    width:auto; height:auto; border:none; 
    color: #000; font-size: 26px; font-weight: 790; line-height: 1.0em;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);}



@media screen and (max-width:1229px){
    #menu_bar01:checked ~ .area1 { max-height: 560px;}
}

@media screen and (max-width:716px){
    #menu_bar01:checked ~ .area1 { max-height: 810px;}
}

@media screen and (max-width:545px){
    #menu_bar01:checked ~ .area1 { max-height: 850px;}
}


/**========================================**/

#products02 ul { position: relative; z-index: 0; font-size: 0;}

#products02 li { 
    display: inline-block;
    box-sizing: border-box; width: 25%; margin: 0 0 60px; padding: 0 10px; 
    font-size: 14px; line-height: 1.5em; vertical-align: top;}


@media screen and (max-width:799px){
    #products02 li { width: 33.33%;}
}

@media screen and (max-width:499px){
    #products02 li { 
        width: 50%; margin: 0 0 40px;
        font-size: 12px; line-height: 1.5em;}

}

/* LastUp2026.03.25_kimata */