@charset "euc-jp";
main { padding: 0;}

footer { margin: 100px 0 0;}

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

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

#spec1,
#spec2,
#spec3,
#spec4 { max-width: 1000px; margin: 80px auto 0; padding: 50px 20px 0;}

#spec1 { margin-top: 50px;}
#spec3 { padding-top: 0;}

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

/**============================================================================================**/
/* slick */

/* PREV・NEXT */
.slick-list ~ div { 
    display: inline-block;
    width: 40px; height: 40px;
    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::before {
    content: '';
    display: inline-block; position: absolute; top: 14px;
    width: 10px; height: 10px;
    border: solid #fff; border-width: 3px 3px 0 0;}

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

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

/**========================================**/
/* スペック */
.slick1 { padding: 0 60px;}

/* PREV・NEXT */
.slick1 .slick-list ~ div { position: absolute; top: 50%; transform: translateY(-50%);}

.prev { left: 0;}
.next { right: 0;}

/* DOTS */
.slick1 .slick-dots { margin: 10px 0 0; text-align: center;}
.slick1 .slick-dots li { display: inline-block; margin: 0 6px;}

.slick1 .slick-dots button {
    width: 12px; height: 12px; margin: 0;
    border: none; border-radius: 50%;
    outline: none;
    background: #000;
    font-size: 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;}

.slick1 .slick-dots button:hover,
.slick1 .slick-active button { background: #b71c25;}

/**========================================**/
/* ギャラリー */
.slick2 { text-align: center;}
.slick2 .slick-track > div { margin: 0 25px;}

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

/* PREV・NEXT */
.slick2 .slick-list ~ div { position: relative; margin: 0 15px;}

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

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

/**============================================================================================**/
/* 仕様 */
#kmkz2 {
/*
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
*/    
    position: relative; overflow: hidden;
    height: 680px; margin: 30px auto 100px; 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_bg2.jpg") no-repeat;
    background-position: center right;}

#kmkz2 img { 
    position: absolute; top: 100px; left: 80px;
    width: 600px; height: auto;}
    
@media screen and (max-width:1299px){
    #kmkz2::after {
        background-size: auto 800px;
        }
}
    
@media screen and (max-width:999px){
    #kmkz2 { height: 600px;}

    #kmkz2::after {
        height: 600px;
        background-size: auto 700px;}
}
    
@media screen and (max-width:899px){
    #kmkz2 { height: 400px;}

    #kmkz2::after {
        height: 400px;
        background-size: auto 550px;}
}
    
@media screen and (max-width:699px){
    #kmkz2 { height: 300px;}

    #kmkz2::after {
        height: 300px;
        background-size: auto 400px;}
}
    
@media screen and (max-width:499px){
    #kmkz2 { height: 270px;}

    #kmkz2::after {
        height: 270px;
        background-size: auto 340px;}
}
    
@media screen and (max-width:399px){
    #kmkz2 { height: 220px;}

    #kmkz2::after {
        height: 220px;
        background-size: auto 270px;}
}



/* 
#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: 50px auto 0; 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;}
}


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

/**========================================**/
section#spec1 { padding-top: 0;}

#spec1 p {
    width: 265px; margin: 40px auto 0; padding: 10px 0;
    border: solid 3px #000;
    color: #000; font-size: 42px; line-height: 1.0em; text-align: center;}

/* 動画 */
#spec1 #mv { margin: 50px 0 0; padding: 50px 0 0;}
#spec1 .posi-rlt { height: 0; padding: 56.25% 0 0;}
#spec1 iframe { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;}

/* サイト内リンク */
#spec1 .ta_c { margin: 100px 0 0; font-size: 0;}
#spec1 .ta_c a {
    display: inline-block;
    margin: 0 1px; padding: 15px 20px;
    background: #eee;
    font-size: 16px;}

#spec1 .ta_c a[href="#shopping"] {
    border-radius: 4px; 
    background: #b71c25;
    color: #fff;}

#spec1 .ta_c a[href="#shopping"]:hover { background: #FF7E00;}

@media screen and (max-width:499px){
    #spec1 .ta_c a { padding: 15px 10px; font-size: 14px;}
}

/**============================================================================================**/
/* 仕様 */
#spec2 > img { display: block; margin: 0 auto 20px;}
#spec2 p { margin: 0 0 50px;}

#spec2 .dis-tbl_tab { width: 100%; margin: 0 auto 20px;}
#spec2 .dis-tbl_tab > * { display: table-cell; vertical-align: middle;}

@media screen and (max-width:699px){
    #spec2 > img { max-width: 100%;}

    #spec2 .dis-tbl_tab,
    #spec2 .dis-tbl_tab > * { display: block; max-width: 500px; text-align: center;}
}

/**============================================================================================**/
/* 画像一覧 */
#spec3 { max-width: 1030px; padding: 0 10px;}
#spec3 li { 
    display: inline-block; 
    box-sizing: border-box; width: 25%; padding: 10px;
    text-align: center; vertical-align: top;}

#spec3 img { vertical-align: top;}

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

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

@media screen and (max-width:499px){
    #spec3 { padding: 0 15px;}
    #spec3 li { padding: 5px;}
}


/* アコーディオン 開閉ボタン */
label[for="menu_bar01"] { 
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    align-items: center;
    max-width: 300px; height: 30px; margin: 30px auto 0;
    padding: 8px;
    border: solid 1px #b71c25; border-radius: 4px;
    color: #b71c25; text-align: center; cursor: pointer;
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}

label[for="menu_bar01"]:hover { background: #b71c25; color: #fff;}

label[for="menu_bar01"] span::after { content: '表示';}


/* アコーディオン 表示・非表示エリア */
.area1 {
  overflow-y: hidden;
  max-height: 325px;
  font-size: 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: 1000px;}

#menu_bar01:checked ~ label[for="menu_bar01"] span::after { content: '少なく表示する';}


@media screen and (max-width:954px){
    .area1 { max-height: 290px;}
}

@media screen and (max-width:889px){
    .area1 { max-height: 270px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 900px;}
}

@media screen and (max-width:829px){
    .area1 { max-height: 250px;}
}

@media screen and (max-width:799px){
    .area1 { max-height: 325px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 1400px;}
}

@media screen and (max-width:754px){
    .area1 { max-height: 306px;}
}

@media screen and (max-width:709px){
    .area1 { max-height: 286px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 1200px;}
}

@media screen and (max-width:664px){
    .area1 { max-height: 266px;}
}

@media screen and (max-width:619px){
    .area1 { max-height: 246px;}
}

@media screen and (max-width:599px){
    .area1 { max-height: 364px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 2250px;}
}

@media screen and (max-width:569px){
    .area1 { max-height: 344px;}
}

@media screen and (max-width:539px){
    .area1 { max-height: 325px;}
}

@media screen and (max-width:509px){
    .area1 { max-height: 304px;}
}

@media screen and (max-width:499px){
    .area1 { max-height: 295px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 1900px;}
}

@media screen and (max-width:489px){
    .area1 { max-height: 295px;}
}

@media screen and (max-width:479px){
    .area1 { max-height: 287px;}
}

@media screen and (max-width:464px){
    .area1 { max-height: 277px;}
}

@media screen and (max-width:449px){
    .area1 { max-height: 267px;}
}

@media screen and (max-width:434px){
    .area1 { max-height: 257px;}
}

@media screen and (max-width:419px){
    .area1 { max-height: 248px;}
}

@media screen and (max-width:404px){
    .area1 { max-height: 238px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 1500px;}
}

@media screen and (max-width:389px){
    .area1 { max-height: 228px;}
}

@media screen and (max-width:374px){
    .area1 { max-height: 218px;}
}

@media screen and (max-width:359px){
    .area1 { max-height: 208px;}

    /* アコーディオンをクリックした場合 */
    #menu_bar01:checked ~ .area1 { max-height: 1300px;}
}

@media screen and (max-width:344px){
    .area1 { max-height: 198px;}
}

@media screen and (max-width:329px){
    .area1 { max-height: 189px;}
}

/**============================================================================================**/
/* 仕様 */
#spec4 ul { margin: 0 auto;}
#spec4 li { padding: 10px;}
#spec4 li:nth-child(odd) { background: #eee;}

/* SHOPPING */
#spec4 .posi-rlt {
	min-height: 85px; margin: 50px 0; padding: 20px 20px 0 211px; 
	border: solid #333; border-width: 1px 0;
    font-size: 0;}

#spec4 .posi-rlt::before {
    content: ' ';
    display: block; position: absolute; top: 20px; left: 15px;
    width: 196px; height: 62px;
    background: url("../images/bn_shopping.webp"); background-size:100% auto;}

/* 楽天・Yahooショッピング */
#spec4 a {
    display: inline-block; margin: 0 0 20px 10px; padding: 0;
    background: #fff;}

#spec4 img {
    height: auto; max-width: 216px;
    -webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;}

#spec4 a:hover img { opacity: 0.5;}

/* 店舗での取扱い */
#spec4 .dis-tbl_tab { width: 100%; max-width: 555px; margin: 0 0 0 15px;}
#spec4 .dis-tbl_tab > * {display: table-cell; vertical-align: middle;}

#spec4 .dis-tbl_tab strong { 
    width: 150px; padding: 10px 0; 
    border-radius: 6px;
    background: #b71c25;
    color: #fff; font-size: 18px; text-align: center;}
    
#spec4 .dis-tbl_tab p { padding: 0 0 0 20px;}

@media screen and (max-width:499px){
    #spec4 .posi-rlt {padding: 20px 20px 0 162px;} 
    #spec4 .posi-rlt::before { width: 147px; height: 47px;}

    #spec4 a img { max-width: 162px;}
}

@media screen and (max-width:399px){
    #spec4 .posi-rlt {padding: 96px 10px 0; }
    #spec4 .posi-rlt::before {width: 176px; height: 56px; left: 10px;}

    #spec4 a { margin: 0 10px 20px 0; } 
    #spec4 img { max-width: 140px;}

    /* 店舗での取扱い */
    #spec4 .dis-tbl_tab,
    #spec4 .dis-tbl_tab > * { display: block;}
    
    #spec4 .dis-tbl_tab { margin: 0;}
    #spec4 .dis-tbl_tab p { padding: 10px 0 0;}
}


/*--LastUp2026.04.07_kimata--*/