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

main { max-width: 1000px; margin: 80px auto 0;}

section:not(:first-child) { margin: 50px auto 0;}
section:not(#spec3) { padding: 50px 20px 0;}

footer { margin: 100px 0 0;}

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

h3{ 
    margin: 0 0 10px; padding: 0 0 5px; 
    border-bottom:solid #6d6d6d 2px; 
    font-size: 18px;}

/**============================================================================================**/
/* メインイメージ */
.slick { padding: 0 60px;}

/* PREV・NEXT */
.slick-list ~ div { 
    display: inline-block; position: absolute; top: 50%;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #b71c25;
    transform: translateY(-50%);
	-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 { left: 0;}
.slick .prev::before {
    left: 16px;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);}
    
.slick .next { right: 0;}
.slick .next::before {
    right: 16px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);}

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

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

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

/**========================================**/
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:399px){
    #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: 310px;
  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 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;}

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

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

}


/*--LastUp2025.09.18_kimata--*/