@font-face {
    font-family: 'OradanoGSRR'; /* 任意のフォント名 */
    src: url('../fonts/OradanoGSRR.ttf') format('truetype');
}

@font-face {
    font-family: 'Harenosora'; /* 任意のフォント名 */
    src: url('../fonts/Harenosora.otf') format('opentype');
}

@font-face {
    font-family: 'HannariMincho'; /* 任意のフォント名 */
    src: url('../fonts/HannariMincho-Regular.otf') format('opentype');
}

@font-face {
    font-family: 'NotoSerifJP'; /* 任意のフォント名 */
    src: url('../fonts/NotoSerifJP-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'XANO-Mincho'; /* 任意のフォント名 */
    src: url('../fonts/XANO-mincho_web.woff2') format('woff2');
}

@font-face {
    font-family: 'PapyrusCustom'; /* 任意のフォント名 */
    src: url('../fonts/papyrus.ttf') format('truetype');
       /*  url('../fonts/Papyrus.woff2') format('woff2'),
         url('../fonts/Papyrus.woff') format('woff'); */
    /* 他の形式 (ttf, otf) も含めると互換性が高まります */
}

.bg-image {
    background-image: url('../images/back-img-1.jpg');     /* 背景画像指定 */
    background-repeat: repeat;                /* 背景の繰り返し設定 */
}

/* 実際にフォントを適用したい要素に指定する */
.papyrus-style {
  font-family: 'PapyrusCustom', sans-serif;
}

.xano-style {
  font-family: 'XANO-Mincho', sans-serif;
}

/* マティスフォントに違い */
.cuilleree-font {
/*  font-family: 'HannariMincho', sans-serif; */
    font-family: 'Harenosora', sans-serif;
/*    font-family: 'OradanoGSRR', sans-serif; */
}

.small1 {font-size:1em;}

.corp-title
{
    font-size: 4.0rem !important;
}

.corp-subtitle
{
    font-size: 1.6em !important;
    margin-top: -0.9rem;
    letter-spacing: -5px;
}

.card-font2 {
/*    font-size: 0.3rem; */
    font-size: calc(0.6rem + .3vw) !important;
}
/*
.papyrus-style
{
    font-family: "Papyrus", "Hiragino Mincho ProN", "Yu Mincho", serif !important;
}
*/

.card-custom {
/*  background-color: #ffe8af; */
    max-width: 390px;
}

.insta-img
{
    width: 100px;
}

.card-text {
    line-height: 1.1rem !important;
}

.card-text-indent {
    text-indent: 3.2rem;
}

/* 商品説明（補足文） */
.card-explanation {
/*    font-size: 0.4rem !important; */
    font-size: calc(0.6rem + .3vw) !important;
    margin-top: 2px;
    margin-left: 1.2rem;
}

/* カードタイトルフォントサイズ */
.card-title {font-size: 1.3em;}

/* スプーンアイコンのサイズ */
.card-icon-size {width: 20px;}

.concept {font-size: 2.2rem !important;}

.concept-1 {
    font-size: 1.6rem !important;
    line-height: 1.8;
}

.concept-2 {
    font-size: 1.8rem !important;
    line-height: 2.6;
}

/* 焦げ茶 */
.text-kogecha {
  color: #6f4d3e;
}

/* 無限スクロール */
.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 20s linear infinite; /* 20s スクロール1回にかかる秒数 */
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 2px; /* 余白 */
	width: calc(100vw / 10); /* 3 写真の枚数にあわせる */
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}
/* ------------------------------------------------------- */

@media (max-width: 1200px) {
    .concept {font-size: 2.0rem !important;}
    .concept-1 {
        font-size: 1.5rem !important;
        line-height: 1.7;
    }
    .concept-2 {
        font-size: 1.7rem !important;
        line-height: 2.4;
    }
    .marquee-right ul li {
	    width: calc(100vw / 8); /* 3 写真の枚数にあわせる */
    }
}

@media (max-width: 992px) {
    .concept {font-size: 1.9rem !important;}
    .concept-1 {
        font-size: 1.5rem !important;
        line-height: 1.7;
    }
    .concept-2 {
        font-size: 1.6rem !important;
        line-height: 2.4;
    }

    .marquee-right ul li {
	    width: calc(100vw / 6); /* 3 写真の枚数にあわせる */
    }
}

@media (max-width: 768px) {
    .concept {font-size: 1.7rem !important;}
    .concept-1 {
        font-size: 1.3rem !important;
        line-height: 1.7;
    }
    .concept-2 {
        font-size: 1.5rem !important;
        line-height: 2;
    }
    .insta-img {width: 80px;}

    .marquee-right ul li {
	    width: calc(100vw / 6); /* 3 写真の枚数にあわせる */
    }
}

@media (max-width: 576px) {
    .concept {font-size: 1.2rem !important;}
    .concept-1 {
        font-size: 1.0rem !important;
        line-height: 1.5;
    }
    .concept-2 {
        font-size: 1.0rem !important;
        line-height: 2;
    }

    .insta-img {width: 60px;}

    .corp-title
    {
        font-size: 2.5rem !important;
    }

     .corp-subtitle
    {
        font-size: 1.2em !important;
        margin-top: -0.8rem;
    }
    .corp-title1
    {
        display: none;
    }
    .corp-title2
    {
        display: block;
    }
    .marquee-right ul li {
	    width: calc(100vw / 5); /* 3 写真の枚数にあわせる */
    }
}