@charset "UTF-8";

/* ######################################################################################

　表示・非表示　pc sp

###################################################################################### */

/* ====================================================
　表示・非表示
==================================================== */
br.pc, span.pc, em.pc, img.sp, div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, nav.sp, table.sp, figcaption.sp,
br.sp, span.sp, em.sp, img.pc, div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, nav.pc, table.pc, figcaption.pc {display:none;}
@media print, screen and (min-width: 768px) {
    div.pc, ul.pc, ol.pc, li.pc, dl.pc, dt.pc, dd.pc, nav.pc, figcaption.pc { display: block; }
    img.pc, span.pc, em.pc, br.pc { display: inline; }
    table.pc { display: table; }
}
@media screen and (max-width: 767px) {
    div.sp, ul.sp, ol.sp, li.sp, dl.sp, dt.sp, dd.sp, nav.sp ,table.sp, figcaption.sp { display: block; }
    img.sp, span.sp, em.sp, br.sp { display: inline; }
    table.sp { display: table; }
}

/* ######################################################################################

　ブレイクポイントで画像を切り替える：resImg.js

###################################################################################### */
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px){
    .resImg {width:100%; height:auto;}
}



/* ######################################################################################

　フォントサイズ　fontsize

###################################################################################### */
.fontEEExSmall{font-size: 0.9rem;}
.fontEExSmall{font-size: 1.1rem;}
.fontExSmall{font-size: 1.2rem;}
.fontSmall{font-size: 1.3rem; line-height: 2;}
.fontUsually{font-size: 1.4rem;}
.fontRegular{font-size: 1.5rem;}
.fontLarge{font-size: 1.8rem; line-height: 1.675;}
.fontExLarge{font-size: 2.2rem; line-height: 1.65;}
.fontEExLarge{font-size: 2.6rem; line-height: 1.65;}
.fontEEExLarge{font-size: 6.0rem; line-height: 1.65;}

@media screen and (max-width: 767px) {
    .fontExLarge{font-size: 1.8rem; line-height: 1.65;}
    .fontEExLarge{font-size: 2.2rem; line-height: 1.65;}
	.fontEEExLarge{font-size: 3.6rem; line-height: 1.65;}
}


.fontBold{font-weight: bold;}
.textUnderLine{text-decoration: underline;}

/* ######################################################################################

　フォントカラー　fontcolor

###################################################################################### */
.colblack{ color:#111;}
.colgray{ color:#B9B9B9;}
.colmsgreen{ color:#0A6733;}
.colgreen{ color:#009935;}
.colskyblue{ color:#1381D6;}
.colred{color:#E42E1B;}
.colpurple{color:#833C9D;}
.colnavy{color:#151D35;}

.fontred{color: #E42E1B;}
.colyellow{color: #F0FF00;}

/* ######################################################################################

　タイトル　title

###################################################################################### */

/* ====================================================
　デフォルトタイトル
==================================================== */

h2,h3,h4,h5,h6 {
    margin:0 0 0.75em;
    padding:0;
    line-height: 1.25;
    font-weight:600;
    font-size:100%;
}

/* ######################################################################################

      余白など

###################################################################################### */
    .pd-11{padding-left: 11px; padding-right: 11px;}
    .pd-35{padding-left: 35px; padding-right: 35px;}
    .pd-60{padding-left: 60px; padding-right: 60px;}

	.pdb-35{padding-bottom: 35px;}
	.pdb-60{padding-bottom: 60px;}

	.pdt-35{padding-top: 35px;}
	.pdt-60{padding-top: 60px;}


/* ######################################################################################

　アクセシビリティ対応　sr-only

###################################################################################### */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ######################################################################################

　ハンバーガーメニュー　hbgMenu

###################################################################################### */

    /* 横スクロール防止 */
    body {overflow-x: hidden;}

    /* ≡アイコン */
    .hbgMenu {
        width: 50px;
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        z-index: 1001;
        position: fixed;
        top: 0;
        right: 0;
		background-color: rgba(255, 255, 255, 0.8);
    }
    /* ≡バー */
    .hbgMenu span {
        display: block;
        width: 30px;
        height: 2px;
        background: #000;
        border-radius: 1px;
        margin: 4px 0;
        transition: all 0.3s ease;
    }

    /* ≡アニメーション */
    .hbgMenu.active span:nth-child(1) {transform: rotate(45deg) translate(7px, 7px);}
    .hbgMenu.active span:nth-child(2) {opacity: 0;}
    .hbgMenu.active span:nth-child(3) {transform: rotate(-45deg) translate(7px, -7px);}

    /* メニュー枠 */
    .navi {
        position: fixed;
        top: 0;
        right: 0;
        width: 285px;
        height: 100%;
        background: #FFF;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: flex-start; /* 上寄せ配置 */
        pointer-events: none;
        overflow-y: auto; /* メニュー長い場合はスクロール */
        padding-top: 84px; /* 上から少し余白 */
    }
    .navi.active {opacity: 1; pointer-events: auto;}

    /* メニュー展開時スクロール禁止 */
    .no-scroll {overflow: hidden !important; height: 100vh !important;}


.navi ul {
	width: 270px;
	list-style: none; padding: 0 25px 25px; margin: 0; text-align: center;}
.navi li {margin:0 auto 11px; ;width: auto; height: auto;}
.navi li.logo{margin-bottom: 35px;}
.navi li.end{margin: 35px 0 0;}
.navi a.shop {
	text-decoration: none;
	font-size: 16px; 
	color: #FFF;
	background: #000;
	line-height: 1.0;
	padding: 7px 10px;
	display: block;
}
.navi a.shop:hover{background-color: rgba(0, 0, 0, 0.7);}
.contentsBase {
    position: relative;
    z-index: 10;
    overflow: hidden;
    width: 100%;
    max-width: 390px;
    margin-inline: auto;
    justify-content: center;
/*    height:3096vh;*/
}