@charset "euc-jp";
@import url("../../form/css/mailformpro.css");

section:not(:first-child) { margin: 0 auto;}

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 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    max-width: 1200px; margin: 100px auto 0; padding: 0 20px;}

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

#kmkz1 li br { display: none;}

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

#kmkz1 p { padding: 0 30px; text-align: justify;}

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

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

@media screen and (max-width:699px){
    #kmkz1 ul { margin-top: 50px;}
}

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

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

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

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

/**============================================================================================**/
/* 仕様 */
#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 ul { list-style-type: "\025a0"; padding: 0 0 0 25px;}
#kmkz2 li { margin: 25px 0 0; padding: 0 0 0 5px; font-size: 20px;}
#kmkz2 li:first-child { margin: 0;}

/* 詳しいスペックはこちら */
#kmkz2 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 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 li { margin: 15px 0 0;}
    #kmkz2 li:first-child { margin: 30px 0 0;}

    #kmkz2 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 li { margin: 10px 0 0; font-size: 16px;}
    
    #kmkz2 a {
        width: 250px; height: 40px; margin: 70px auto 0;
        font-size: 16px;}
}

@media screen and (max-width:399px){
    #kmkz2 a { margin-top: 40px;}
}

/**============================================================================================**/
/* ギャラリー */
#kmkz3 { max-width: 1250px; padding: 50px 0;}
#kmkz3 h2 { text-align: center;}

/* 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-bottom: 100px; padding: 50px 20px 0;}
#kmkz4 h2 { text-align: center;}

#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;}
}


/**============================================================================================**/
/* 会社概要 */
#kmkz5 { 
    box-sizing: border-box; height: 860px; padding: 0 20px 90px;
    background: url("../images/campanyInfo_bg1.webp") no-repeat;
    background-position: top center;
    color: #fff;}

#kmkz5 .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; height: 770px; margin: 0 auto;}

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

#kmkz5 a { color: #fff; text-decoration: underline;}
#kmkz5 a:hover { color: #FF7E00;}

#kmkz5 br { display: none;}

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

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

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

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

@media screen and (max-width:699px){
    #kmkz5 { 
        height: 650px; padding: 50px 20px;
        background: url("../images/campanyInfo_bg2.webp") no-repeat;
        background-position: top center;
        line-height: 2.0em;}

    #kmkz5 .flex { display: block; max-width: 370px; height: auto;}
    
    #kmkz5 h2 { margin: 0 0 30px; text-align: center;}

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

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

    #kmkz5 br { display: inline;}

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

}

/*--LastUp2025.09.29_kimata--*/