@charset "utf-8"; /* CSS Document */
/* LP Layout CSS Ver.3.20 */

/*ベース設定*/
body {color: #333; background: #fff; font-family:"Helvetica Neue","Hiragino Sans","Yu Gothic","Meiryo",sans-serif; font-size: 16px; line-height: 1.2; margin: 0px;}
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none !important; }

/*画像の幅を100%はみ出た横方向の要素を隠す*/
#outline img {width: 100%; overflow-x: hidden;}

/*ヘッダーのロゴ*/
#outline img.headLogo {width:auto; height:24px; position:fixed; top:15px; right:10px; z-index:9998;}

/*メインコンテンツの幅*/
#main_contents {width:auto; max-width: 1200px; margin: 0 auto; padding: 0 8px;}

/*メインイメージ*/
#outline .mainImg {width: 100%; height: auto; margin: 0 0 30px 0; overflow: hidden; position: relative; z-index: 1;}
#outline .mPC {display: none;}
#outline .mSP {display: inherit;}
@media only screen and (min-width: 1000px) {
#outline .mainImg {width: 100%; height: auto; overflow: hidden; position: relative; z-index: 1;}
#outline .mPC {display: inherit;}
#outline .mSP {display: none;}
}






/************ ↓↓↓商品画像が複数の場合スライドで見せる↓↓↓ ************/
.itemSwiper{
position:relative;
overflow:hidden;
}
.itemSwiper .swiper-button-prev,
.itemSwiper .swiper-button-next{
width:40px;
height:40px;
background:rgba(255,255,255,.9);
border-radius:50%;
box-shadow:0 2px 8px rgba(0,0,0,.2);
opacity:0;
visibility:hidden;
transition:.3s;
}
.itemSwiper:hover .swiper-button-prev,
.itemSwiper:hover .swiper-button-next{
opacity:1;
visibility:visible;
}
.itemSwiper .swiper-button-prev{
left:10px;
}
.itemSwiper .swiper-button-next{
right:10px;
}
.itemSwiper .swiper-button-prev::after,
.itemSwiper .swiper-button-next::after{
font-size:16px;
color:#333;
font-weight:bold;
}
.itemSwiper .swiper-button-prev:hover,
.itemSwiper .swiper-button-next:hover{
transform:scale(1.1);
background:#fff;
}
.itemSwiper .swiper-button-prev{
left:0;
transform:translateX(-10px);
}
.itemSwiper .swiper-button-next{
right:0;
transform:translateX(10px);
}
.itemSwiper:hover .swiper-button-prev{
opacity:1;
visibility:visible;
transform:translateX(10px);
}
.itemSwiper:hover .swiper-button-next{
opacity:1;
visibility:visible;
transform:translateX(-10px);
}
/************ ↑↑↑商品画像が複数の場合スライドで見せる↑↑↑ ************/


/************ ↓↓↓ポップアップ↓↓↓ ************/

/* 初期状態 */
.popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);

    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    transition:.3s;
    z-index:9999;
}

/* 開く */
.popup-overlay:target{
    opacity:1;
    visibility:visible;
}

.popup-window{
    position:relative;
    width:min(90%,500px);
    padding:24px;
    background:#fff;
    border-radius:8px;
    text-align:left;
}

.popup-window img{
    width:100%;
    height:auto;
}

.close{
    position:absolute;
    top:10px;
    right:15px;
    font-size:28px;
    text-decoration:none;
    color:#333;
}

.more-btn{
    display:inline-block;
    width:fit-content;          /* テキスト幅に合わせる */
    margin:0 0 0 2px;
    padding:7px 15px;
    border:1px solid #6a6a6a;
    border-radius:999px;
    background:#fff;
    color:#333;
    font-size:14px;
    line-height:1;
    text-decoration:none;
    box-sizing:border-box;
    transition:.3s;
}

.more-btn:hover{
    border-color:#c6c6c6;          /* 枠線を薄くする */
    background:#fff;
    color:#333;
}

/************ ↑↑↑ポップアップ↑↑↑ ************/



/*メインロゴ*/
#outline .mLogo {width: 100%; text-align: center; color: #FFF; font-family: "Lora", "sans-serif"; font-size: 2vw; letter-spacing: 1px; position:absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); text-shadow: 1px 1px 1px #9e9e9e;}
#outline .mLogo img {width:25%; margin-bottom: 3%;}
@media only screen and (min-width: 1000px) {
#outline .mLogo {width: 100%; font-size: 1rem;}
#outline .mLogo img {width:100%; max-width:200px; margin-bottom: 2%;}
}

/*テキストリンクの下線を削除＆黒字*/
a {text-decoration: none; color: #000;}


/************ ↓↓↓見出し・テキストサイズ↓↓↓ ************/

#outline h1 {font-size: 22px;}
@media only screen and (min-width: 1000px) {
#outline h1 {font-size: 32px;}
}
#outline h2 {font-size: 20px;}
@media only screen and (min-width: 1000px) {
#outline h2 {font-size: 24px;}
}
#outline h3 {font-size: 18px;}
@media only screen and (min-width: 1000px) {
#outline h3 {font-size: 20px;}
}
#outline h4 {font-size: 12px;}
@media only screen and (min-width: 1000px) {
#outline h4 {font-size: 16px;}
}
.item_name{font-size: 14px;line-height: normal;}
@media only screen and (min-width: 1000px) {
.item_name{font-size: 15px;}
}
.item_name_mini{font-size: 13px;}
@media only screen and (min-width: 1000px) {
.item_name_mini{font-size: 14px;}
}
.info{font-size: 12px; color: #6a6a6a;}
@media only screen and (min-width: 1000px) {
.info{font-size: 13px;}
}
.price{font-size: 18px; font-weight: bold; font-family: inherit;}
@media only screen and (min-width: 1000px) {
.price{font-size: 20px;}
}
.red{color: #e00;}
h1,h2,h3,h4,p {margin:10px 0;}

/************ ↑↑↑見出し・テキストサイズ↑↑↑ ************/


/*bannerのスライダー*/
.banner-prev,
.banner-next{background: transparent !important; box-shadow: none !important; border: none !important;}
.banner-prev:after,
.banner-next:after{font-size: 18px !important; color: #666 !important; font-weight: 600;}
.banner-prev,
.banner-next{width: 18px !important; height: 18px !important; }
.filter-btn{border:0;background:none;padding:0;cursor:pointer;width:100%;}
.filter-btn img{display:block;width:100%;}
.filter-btn span{display:block;}
.bannerSwiper{margin-bottom: 20px;}

/*lineupのスライダー*/
.lineup-prev,
.lineup-next{background: transparent !important; box-shadow: none !important; border: none !important;}
.lineup-prev:after,
.lineup-next:after{font-size: 18px !important; color: #666 !important; font-weight: 600;}
.lineup-prev,
.lineup-next{width: 18px !important; height: 18px !important; }
.filter-btn{border:0;background:none;padding:0;cursor:pointer;width:100%;}
.filter-btn img{display:block;width:100%;}
.filter-btn span{display:block;}
.lineupSwiper{margin-bottom: 20px;}

/*シリーズのラインナップ*/
.series ul {margin: 0;padding: 0;font-size:0;}
.series li {display: inline-block;width:50%;font-size:3vw;box-sizing: border-box; vertical-align: top; line-height: 1.0; margin-bottom: 20px;}
.series li.wide {width: 100%;}
.series li a {display: block;background: #fff;}
.series li p {padding: 0 4px;line-height: normal;}
.series img {width: 100%;}
@media only screen and (min-width: 1000px) {
.series li {display: inline-block;width:25%;}
.series li.wide {width: 50%;}
}

.m50px {margin-bottom: 50px;}

/*フッター*/
#outline .bottom {width: 100%; text-align: center; overflow: auto; background: #182a50; margin:0; padding:5% 0 0 0; box-sizing: border-box;}
#outline .bottom a img {width: 30%;}
#outline .bottom .social {width: 100%; margin:8% 0; padding: 0; font-size: 0;}
#outline .bottom .social li {display: inline-block; width: 6%; margin:0 2%;}
#outline .bottom .social li img {width: 100%;}
#outline footer {clear: left; margin-top: 0; padding: 3% 0 3% 0; text-align: center; background: #182a50; color: #FFF; font-size: 2vw; letter-spacing: 1px;}
@media only screen and (min-width: 1000px) {
#outline .bottom {margin:0; padding: 5% 0 1% 0;}
#outline .bottom a img {width: 10%;}
#outline .bottom .social {margin:4% 0;}
#outline .bottom .social li {width: 2rem; margin:0 1rem;}
#outline footer {padding: 10px 0 10px 0; font-size: 12px;}
}

/*ページTOPへ移動する追従ボタン*/
#page-top {width: 10%; position: fixed; bottom: 3%; right: 3%; box-sizing: border-box; z-index:999999999;}
#page-top a {display: block; background: rgba(0,0,0,0); color: #FFF; padding:10% 5%; border:solid 2px #FFF; font-size: 3vw; font-family: 'Nunito', sans-serif; text-align: center; line-height: 2.0;}
@media only screen and (min-width: 1000px) {
#page-top {width: 4%; bottom: 3%; right: 2%; box-sizing: border-box; z-index:999999999;}
#page-top a {display: block; background: rgba(0,0,0,0); color: #FFF; padding:10% 5%; border:solid 2px #FFF; font-size: 1rem;}
}

/*スマホのみ適応<span class="br">で改行*/
@media (max-width: 1000px) {.br::before {content: "\A" ; white-space: pre ;}}