@charset "euc-jp";
header { position: absolute; top: 0; left: 0;}

h2 { margin: 0 0 50px; font-size: 30px;}

@media screen and (max-width:699px){
    h2 { font-size: 20px;}
}

/**============================================================================================**/
/* メインイメージ */
#kmkz1 .posi-rlt { 
    z-index: -1; overflow: hidden;
    height: 0; padding: 42.5% 0 0;}
    
#kmkz1 video { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;}

#kmkz1 video.sp { display: none;}

@media screen and (max-width:699px){
    main { padding-top: 30px;}
    #kmkz1 .posi-rlt { padding: 151.11% 0 0;}
    
    #kmkz1 video.pc { display: none;}
    #kmkz1 video.sp { display: block;}
}

#kmkz1 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    position: relative;
    max-width: 1200px; margin: 80px auto; padding: 0 20px;}

#kmkz1 li:nth-child(1),
#kmkz1 li:nth-child(3) { margin: 0 0 15px;}
#kmkz1 li:nth-child(2) { margin: 0 0 30px;}
#kmkz1 li:nth-child(4) { margin: 0 0 50px;}

#kmkz1 a { color: #000; text-decoration: underline;}
#kmkz1 a:hover { color: #FF7E00;}

#kmkz1 br { display: none;}

/* SNS */
#kmkz1 .sns { position: absolute; right: 0; bottom: 0;}

#kmkz1 .sns a[target="_blank"] { margin: 0 0 0 20px; padding: 0;}
#kmkz1 .sns a[target="_blank"]::after { display: none;}

#kmkz1 .sns a:hover { opacity: 0.5;}

#kmkz1 .sns img { width: 60px; vertical-align: bottom;}

@media screen and (max-width:699px){
    #kmkz1 .flex { display: block; max-width: 370px; height: auto; line-height: 2.0em;}
    
    #kmkz1 h2 { margin: 0 0 30px; text-align: center;}

    #kmkz1 li:nth-child(1),
    #kmkz1 li:nth-child(4) { margin: 0 0 30px;}

    #kmkz1 li:nth-child(3) { margin: 0;}

    #kmkz1 br { display: inline;}

    /* SNS */
    #kmkz1 .sns { position: static; margin: 30px 0 0;}
    #kmkz1 .sns a[target="_blank"] { margin: 0 20px 0 0;}

}

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

/* 仕様 */
#kmkz2 {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    position: relative; overflow: hidden;
    height: 680px; margin: 100px auto 50px; padding: 0 20px;}

/* 背景画像 */
#kmkz2::before,
#kmkz2::after {
    content: '';
    display: block; position: absolute; top: 0; right: 0;}

#kmkz2::after {
    z-index: -2;
    width: 1920px; height: 680px;
    background: url("../images/spec_bg1.webp") no-repeat;
    background-position: center right;}

#kmkz2 .m-0a { width: 100%; max-width: 1200px;}

#kmkz2 .m-0a ul { list-style-type: "\025a0"; padding: 0 0 0 25px;}
#kmkz2 .m-0a li { margin: 25px 0 0; padding: 0 0 0 5px; font-size: 20px;}
#kmkz2 .m-0a li:first-child { margin: 0;}

/* 詳しいスペックはこちら */
#kmkz2 .m-0a a {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    width: 360px; height: 50px; margin: 70px 0 0;
    background: #b71c25;
    color: #fff; font-size: 20px;}

#kmkz2 .m-0a a:hover { background: #FF7E00; color: #fff;}

@media screen and (max-width:1499px){
    #kmkz2::after {
        width: 1920px; height: 680px;
        background: url("../images/spec_bg2.webp") no-repeat;
        background-size: 100% auto;
        background-position: center right;}
}

@media screen and (max-width:999px){
    #kmkz2 { height: 550px;}
    #kmkz2::after {
        width: 1000px; height: 600px;
        background: url("../images/spec_bg3.webp") no-repeat;
        background-position: center right;}

    #kmkz2 .m-0a li { margin: 15px 0 0;}
    #kmkz2 .m-0a li:first-child { margin: 30px 0 0;}

    #kmkz2 .m-0a a { margin-top: 50px;}
}

@media screen and (max-width:799px){
    #kmkz2::before {
        z-index: -1;
        width: 100%; height: 680px;
        background: rgba(255,255,255,0.5);}

    #kmkz2 .m-0a { max-width: 365px;}

    #kmkz2 h2 { text-align: center;}

    #kmkz2 .m-0a li { margin: 10px 0 0; font-size: 16px;}
    
    #kmkz2 .m-0a a {
        width: 250px; height: 40px; margin: 70px auto 0;
        font-size: 16px;}
}

@media screen and (max-width:399px){
    #kmkz2 .m-0a a { margin-top: 40px;}
}
/**========================================**/
/* ギャラリー */
#kmkz3 { max-width: 1250px; margin: 0 auto; padding: 50px 0;}
#kmkz3 h2 { text-align: center;}

#kmkz3 .flex {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    max-width: 1200px; margin: 0 auto 100px; padding: 0 20px;}

#kmkz3 .flex li { box-sizing: border-box; width: 25%;}
#kmkz3 .flex li div { height: 400px;}
#kmkz3 .flex li:nth-child(2n) div { background: #e8e8e8;}

#kmkz3 .flex li br { display: none;}

#kmkz3 .flex strong {
    display: block;
    margin: 30px 0;
    font-size: 20px; text-align: center;}

#kmkz3 .flex p { padding: 0 30px; text-align: justify;}

@media screen and (max-width:1199px){
    #kmkz3 .flex p { padding: 0 15px;}
}

@media screen and (max-width:999px){
    #kmkz3 .flex { max-width: 600px;}
    #kmkz3 .flex li { width: 50%;}
    
    #kmkz3 .flex p { padding: 0 30px;}
}

@media screen and (max-width:699px){
    #kmkz3 .flex { margin-top: 50px;}
}

@media screen and (max-width:599px){
    #kmkz3 .flex li:nth-child(2n - 1) { padding-right: 15px;}
    #kmkz3 .flex li:nth-child(2n) { padding-left: 15px;}
}

@media screen and (max-width:499px){
    #kmkz3 .flex li br { display: inline;}

    #kmkz3 .flex li div { height: 300px;}
    #kmkz3 .flex li:nth-child(2n - 1) { padding-right: 8px;}
    #kmkz3 .flex li:nth-child(2n) { padding-left: 8px;}

    #kmkz3 .flex strong { margin: 15px 0; font-size: 16px;}
    #kmkz3 .flex p { padding: 0 10px; font-size: 14px; line-height: 1.6em;}
}

/* slick */
.slick { text-align: center;}
.slick-track > div { margin: 0 25px;}

.slick-list { margin: 0 0 30px;}

/* PREV・NEXT */
.slick-list ~ div { 
    display: inline-block; position: relative;
    width: 40px; height: 40px; margin: 0 15px;
    border-radius: 50%;
    background: #b71c25;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}

.slick-list ~ div:hover { background: #FF7E00;}

.slick-list ~ div::before {
    content: '';
    display: inline-block; position: absolute; top: 14px;
    width: 10px; height: 10px;
    border: solid #fff; border-width: 3px 3px 0 0;
    transform: translateX(-50%);}

.slick .prev::before {
    left: 16px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);}
    
.slick .next::before {
    right: 16px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

@media screen and (max-width:999px){
    .slick-track > div { margin: 0 20px;}
} 

/**========================================**/
/* お問い合わせ */
#kmkz4 { max-width: 800px; margin: 100px auto; padding: 0 20px;}

#kmkz4 strong {
    display: block;
    margin: 0 0 50px; font-size: 30px; text-align: center;}

@media screen and (max-width:699px){
    #kmkz4 strong { font-size: 20px;}
}


#mailformpro p { margin: 0 0 5px; font-weight: bold;}

/* 氏名 */
 #mailformpro input[type="text"] { max-width: 320px;} 

/* 送信 */
#mailformpro input[type="submit"] { width: 100px;}

 /* 電話でのお問い合わせ */
#kmkz4 h3 { margin: 60px 0 20px; color: #333; font-size: 22px;}

#kmkz4 a { 
    display: inline-block; position: relative;
    padding: 0 0 0 30px;
    color: #02223A; font-size: 30px; font-weight: 600; text-decoration: none;}

#kmkz4 a:hover { color: #FF7E00;}

 /* 電話アイコン */
#kmkz4 a::before {
    content: '';
    display: block; position: absolute; top: 0; left: 0;
    width: 25px; height: 25px;
    background: url("../images/tel.webp");}

#kmkz4 a ~ span { 
    margin: 0 0 0 10px; 
    color: #333; font-size: 22px;}

#kmkz4 br { display: none;}

@media screen and (max-width:699px){
    #kmkz4 br { display: inline;}
}

/* ご購入頂いた製品にトラブルがあった場合・・・ */
#kmkz4 .posi-rlt {
    max-width: 470px; margin: 30px auto;  padding: 0px 0px 0px 85px;
    font-size: 14px; font-weight: 600; line-height: 1.6em;}

#kmkz4 .posi-rlt::before {
    content: url("../images/icon_handshake.webp");
    position: absolute; top: 50%; left: 10px;
    margin: -25px 0 0;}
    

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

/**============================================================================================**/
/* アクセサリー */
#accessory { max-width: 1200px; margin: 0 auto; padding: 50px 20px;}
#accessory h2 { 
    margin: 0 0 10px; padding: 0 0 15px; 
    border-bottom: solid 3px #000;
    font-size: 30px;}

#accessory h3 { margin: 10px 0 5px;}

#accessory ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%; margin: 0 auto 60px;}

#accessory li { box-sizing: border-box; width: 33.33%; padding: 20px;}

@media screen and (max-width:699px){
    #accessory li { width: 50%;}
} 

@media screen and (max-width:499px){
    #accessory ul { max-width: 360px;}
    #accessory li { width: 100%;}
} 

/*--LastUp2026.04.06_kimata--*/