/* ================================================================
   RESET & BASE
   ================================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Noto Sans JP', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}

img {
    width: 100%;
}

/* SP / PC 出し分け共通クラス */
.spview { display: none; }

@media only screen and (max-width: 768px) {
    .spview { display: block; }
    .pcview { display: none; }
}

/* ================================================================
   SP1 WRAPPER
   ================================================================ */
.sp1 {
    width: 100%;
    min-height: 100%;
    position: relative;
}

/* ================================================================
   MAIN VISUAL (ヒーロー代替)
   ================================================================ */
#main_visual {
    background: #d1b7a1;
    position: relative;
    width: 100%;
}

#main_visual .inner {
    max-width: 1300px;
    overflow: hidden;
    margin: 0 auto;
    position: relative;
}

#main_visual .title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    line-height: 0;
    transform: translate(-50%, -50%);
}

#main_visual li {
    width: 20%;
    position: absolute;
    line-height: 0;
}

#main_visual li:nth-of-type(1)  { top: 0%;   left: 5%; width: 20%;}
#main_visual li:nth-of-type(2)  { top: 0%;   left: 25%; width: 15%; }
#main_visual li:nth-of-type(3)  { top: 3%;  left: 43%; width: 13%;}
#main_visual li:nth-of-type(4)  { top: 37%;
    left: 70%;
    width: 20%;}
#main_visual li:nth-of-type(5)  { top: -3%;   left: 60%; width: 18%; }
/*
#main_visual li:nth-of-type(6)  { top: 35%;  left: 15%; }
#main_visual li:nth-of-type(7)  { top: 30%;  left: 65%; }
*/
#main_visual li:nth-of-type(6)  {     bottom: 0%;
    left: 14%;
    width: 25%; }
#main_visual li:nth-of-type(7)  {     bottom: -7%;
    left: 39%;
    width: 18%;}
#main_visual li:nth-of-type(8) {     bottom: -4%;
    left: 57%;
    width: 22%; }
/*#main_visual li:nth-of-type(11) { bottom: 5%;   left: 75%; }*/

@media only screen and (max-width: 768px) {
    #main_visual .title { width: 42%; }

    #main_visual li {
        width: 40%;
        position: absolute;
        line-height: 0;
    }

    #main_visual li:nth-of-type(1)  { top: 8%;   left: -8%; width: 43%;}
    #main_visual li:nth-of-type(2)  { top: -8%;   left: 25%; width: 33%; }
    #main_visual li:nth-of-type(3)  { top: 17%;   left: 55%; width: 23%;}
    #main_visual li:nth-of-type(4)  { top: 33%;  left: 73%; width: 37%; }
    #main_visual li:nth-of-type(5)  { top: -8%;   left: 70%; width: 35%; }
/*    #main_visual li:nth-of-type(6)  { top: 35%;  left: -12%; }*/
/*    #main_visual li:nth-of-type(6)  { top: 55%;  left: 70%; width: 28%; }*/
    #main_visual li:nth-of-type(6)  { top: 50%; left: -5%;  width: 45%; }
    #main_visual li:nth-of-type(7)  { top: 68%; left: 38%; width: 35%;}
    #main_visual li:nth-of-type(8) { bottom: 8%;  left: 66%; width: 40%; }
/*    #main_visual li:nth-of-type(10) { bottom: -5%; left: 75%; }*/
}



#main_read {
    margin: 5% auto;
    width: 80%;
    text-align: center;
    font-size: 16px;
    line-height: 2;
}

@media only screen and (max-width: 768px) {
    #main_read {
        margin: 15% auto;
        width: 80%;
        font-size: 13px;
    }
}

/* ================================================================
   ITEM SECTIONS(商品ごとの繰り返しブロック)
   ================================================================ */
.sp1__item {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: visible;
}

.sp1__item--01,
.sp1__item--02,
.sp1__item--03,
.sp1__item--04 {
    min-height: 800px;
}

.sp1__item__background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.sp1__item__background--pink        { background-color: #e9d5d0; }
.sp1__item__background--beige       { background-color: #ffeace; }
.sp1__item__background--dusty-pink  { background-color: #e1c6c1; }
.sp1__item__background--light-beige { background-color: #e5dbcf; }

.sp1__item__header {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    text-align: center;
}

.sp1__item__title {
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #000;
    white-space: nowrap;
    /* NOTE: モバイル側のfont-sizeが未指定(ブラウザ既定値になっています)。
       意図した見た目か確認してください。以前は clamp(1.2rem, 5vw, 2.4rem) が入っていましたが
       コメントアウトされたままになっていました。 */
}

/*
.sp1__item__number {
    font-size: 1rem;
    letter-spacing: 0.1em;
}
*/

.box {
    max-width: 1000px;
    margin: 0 auto;
    padding-bottom: 10%;
}

.sp1__item__images-left,
.sp1__item__images-right {
    position: absolute;
    width: 45%;
    height: auto;
    z-index: 5;
    overflow: hidden;
    border-radius: 15px;
}

.sp1__item__images-left  { left: 3%;  top: 30%; transform: translateY(-50%); }
.sp1__item__images-right { right: 3%; top: 40%; transform: translateY(-50%); }

.sp1__item__images-maru {
    position: absolute;
    width: 37%;
    height: auto;
    aspect-ratio: 1;
    z-index: 5;
    overflow: hidden;
    border-radius: 100%;
    left: 5%;
    top: 61%;
    transform: translateY(-50%);
}

.sp1__item--01 .sp1__item__images-maru .sp1__item__img { object-position: 70% 30%; 
    height: 100%;
	object-fit: cover;}
.sp1__item--02 .sp1__item__images-maru .sp1__item__img { object-position: 50% 20%;
    height: 100%;
	object-fit: cover;}
.sp1__item--03 .sp1__item__images-maru .sp1__item__img { object-position: 30% 60%;
    height: 100%;
	object-fit: cover;}
.sp1__item--04 .sp1__item__images-maru .sp1__item__img { object-position: 60% 60%;
    height: 100%;
	object-fit: cover;}


.sp1__item__img {
    width: 100%;
    display: block;
	
}

.sp1__item__text {
    position: absolute;
    width: 65%;
    max-width: 400px;
    padding: 10px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 3px;
    right: 0 !important;
    top: 69%;
}

@media (max-width: 768px) {
	.sp1__item--03 .sp1__item__text {
		top: 67%;
	}
}

.sp1__item__text-jp {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: #666;
}

.sp1__item__text-title {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #000;
    line-height: 1.3;
}

.sp1__item__text-price {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.sp1__item__text-description {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #555;
/*    margin-top: 0.3rem;*/
}

.sp1__item__button {
    align-self: flex-start;
/*    padding: 3px 3px;*/
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
    background-color: #000;
    border: 2px solid #000;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}
.sp1__item__button {
    padding: 0;
}
@media (max-width: 768px) {
.style{
	margin-top: 10px;
}
}

.blog {
    width: 100%;
	margin: 10% auto;
	text-align: center;
	font-size: 12px;
	padding: 0 10%;
}

.blog .sp1__item__button{
	margin: 5% auto 0;
/*	padding: 0;*/
}

/*
.sp1__item__button a {
   color: #FFFFFF;
	text-decoration: none;
	padding: 3px 3px;
	
}
*/


.sp1__item__button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 3px 3px;   /* 元々.sp1__item__buttonにあった余白をここに移動 */
    color: #FFFFFF;
    text-decoration: none;
}

@media (min-width: 768px) {
    .button {
        display: grid;
		grid-template-columns: 1fr 1fr;
		gap:3px;
		
    }
	
	.blog {
	background: #FFFFFF;
    width: 100%;
	padding: 5% 0 5% !important;
	margin: 15% auto 0;
	text-align: center;
	font-size: 14px;
}
	
	.blog .sp1__item__button{
		width: 50%;
		display: block;
		margin: 3% auto 0;
		padding: 10px;
		max-width: 600px;
	}
	
	.sp1__item__button {
        width: 100%;
        padding: 0;         /* ← ここも0に */
/*        margin-top: 15px;*/
    }
    .sp1__item__button a {
        padding: 5px 5px;   /* ← ここに移動 */
    }
}


	.stick {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

	.no {
		align-items: flex-start;
		color: #000;
		display: flex;
		overflow: hidden;
		width: 100%;
		height: 50vh;
		white-space: nowrap;
		z-index: 1;
		position: sticky;
		top: 0;
		padding: 100px 0;
	}

	.no ul {
		animation: flowing 15s linear infinite;
		font-size: 40px;
		font-weight: 500;
		transform: translateX(100%);
		margin: 0;
		padding: 0;
	}

	.no ul li {
		font-size: 20px;  /* ← ここを好きなサイズに変更 */
		display: inline-block;
		padding-right: 50px;
	}

	.sp1__item--01 .no ul li {
		color: #E7C7C1;
	}

	.sp1__item--02 .no ul li {
		color: #EED5B2;
	}

	.sp1__item--03 .no ul li {
		color: #FEDFD9;
	}

	.sp1__item--04 .no ul li {
		color: #FBECDB;
	}

			@keyframes flowing {
			  0% { transform:translateX(0); }
			  100% { transform:translateX(-100%); }
			}




/*.sp1__item__button:hover  { background-color: #fff; color: #000; }*/
/*.sp1__item__button:active { transform: scale(0.98); }*/

/* ================================================================
   TABLET / DESKTOP - 768px 以上
   ================================================================ */
@media (min-width: 768px) {
    body {
/*        background: #f4efe8;*/
    }

    .sp1 {
        margin: 0 auto;
        position: relative;
		background: #f4efe8;
    }

    .sp1__item {
        position: relative;
        left: 0;
        top: 0 !important;
        min-height: 780px;
        height: 780px;
        max-width: 1100px;
        margin: 10% auto;
    }
	
	    /* 最初のセクションだけ上の余白をなくす */
    .sp1__item--01 {
        margin-top: 0;
    }

    .sp1__item__background {
        height: 70%;
        left: 50%;
        right: auto;
        width: 100vw;
        margin-left: -50vw;
    }

    .sp1__item__header {
        top: 30px;
    }

    .sp1__item__title {
        font-size: 35px;
    }

    .sp1__item__images-left,
    .sp1__item__images-right {
        position: absolute;
        width: 32%;
        aspect-ratio: 3 / 4;
        z-index: 5;
        overflow: hidden;
        border-radius: 15px;
    }

    .sp1__item__images-left  { left: 15%;  top: 42%; max-width: 350px; }
    .sp1__item__images-right { right: 15%; top: 48%; max-width: 350px; }

    .sp1__item__images-maru {
        left: 14%;
        top: 95%;
        width: 25%;
    }

    .sp1__item__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .sp1__item__text {
        width: 60%;
        top: 80%;
        right: 0;
        left: auto;
        padding: 20px 14px;
		max-width: 500px;
    }

    .sp1__item__text-title       { font-size: 15px; }
    .sp1__item__text-description { font-size: 14px; }

    .sp1__item__button {
        width: 100%;
		padding: 5px 5px;
		margin-top: 15px;
/*        max-width: 180px;*/
    }
}


#main_visual li {
			opacity: 0;
			transition: 1s all 0s ease;
		}
		#main_visual li:nth-of-type(1) {
			transition-delay: 0.1s
		}
		#main_visual li:nth-of-type(2) {
			transition-delay: 0.2s
		}
		#main_visual li:nth-of-type(3) {
			transition-delay: 0.3s
		}
		#main_visual li:nth-of-type(4) {
			transition-delay: 0.4s
		}
		#main_visual li:nth-of-type(5) {
			transition-delay: 0.5s
		}
		#main_visual li:nth-of-type(6) {
			transition-delay: 0.6s
		}
		#main_visual li:nth-of-type(7) {
			transition-delay: 0.7s
		}
		#main_visual li:nth-of-type(8) {
			transition-delay: 0.8s
		}
/*
		#main_visual li:nth-of-type(9) {
			transition-delay: 0.9s
		}
		#main_visual li:nth-of-type(10) {
			transition-delay: 1.0s
		}
		#main_visual li:nth-of-type(11) {
			transition-delay: 1.1s
		}
*/
		#main_visual .title {
			opacity: 0;
			transition: 2s all 1.4s ease;
		}
		#main_visual.ac li,#main_visual.ac .title {
			opacity: 1;
		}
		.anim {
			opacity: 0;
			transition: 1s all 0s ease;
		}
		.anim.ac {
			opacity: 1;
		}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*
.sp1__item__button {
    -webkit-tap-highlight-color: transparent;
}

.sp1__item__button a {
    -webkit-tap-highlight-color: transparent;
}
*/

/*
@media (hover: hover) {
    .sp1__item__button:hover {
        background-color: #fff;
        color: #000;
    }
}
*/

/*
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
*/



/* --- HERO SECTION(現在HTML側でコメントアウト中、#main_visualに差し替え済み) --- */
/*
.sp1__hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #ecd0aa;
}
.sp1__hero__background {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    z-index: 1;
}
.sp1__hero__background-image {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.sp1__hero__content {
    position: relative;
    z-index: 10;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}
.sp1__hero__subtitle {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: #333;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    opacity: 0;
    animation: fadeInDown 0.8s ease-out forwards;
    animation-delay: 0.2s;
}
.sp1__hero__title {
    flex-direction: column;
    gap: 0.2em;
    z-index: 999;
}
.sp1__hero__title-word {
    display: block;
    z-index: 999;
    position: relative;
    width: 100%;
    height: auto;
}
.sp1__hero__title-word--1 {
    animation: fadeInDown 0.8s ease-out forwards;
    animation-delay: 0.4s;
}
.sp1__hero__title-word--2 {
    animation: fadeInDown 0.8s ease-out forwards;
    animation-delay: 0.6s;
}
@media (min-width: 768px) {
    .sp1__hero { height: 680px; min-height: 680px; }
    .sp1__hero__subtitle { font-size: 1rem; margin-bottom: 2rem; letter-spacing: 0.08em; }
    .sp1__hero__title { font-size: 5rem; gap: 0.1em; }
}
*/

/* --- 流れる文字(マーキー)".no" (現在HTMLに該当要素なし) --- */
/*
.no {
    align-items: flex-start;
    color: #000;
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 50vh;
    white-space: nowrap;
    z-index: 1;
    position: sticky;
    top: 0;
    padding: 100px 0;
}
.no ul {
    animation: flowing 70s linear infinite;
    font-size: 40px;
    font-weight: 500;
    transform: translateX(100%);
    margin: 0;
    padding: 0;
}
.no ul li {
    display: inline-block;
    padding-right: 50px;
}
@keyframes flowing {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
*/

/*
#main_contents .section .box {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 5%;
    position: sticky;
    z-index: 10;
}
*/