.service__section__title {
	font-size: 1.6667vw;
	font-weight: 700;
	color: #333333;
    text-align: center;
}

@media screen and (max-width: 760px) {

    .service__section__title {
        font-size: 5.33vw;
        line-height: 1.5;
    }

    .service__fv .service__section__title {
        font-size: 6.4vw;
        line-height: 1.5;
    }
}

.service__fv {
	/* background-image: url('../img/service/service-seisakuitaku-fv-bg.png'); */
	background-image: 
		linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
		url('../img/service/service-seisakuitaku-fv-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.service__fv__inner {
	padding: 6.25vw 0;
	text-align: center;
	color: #000000;
}

.service__fv__inner span {
	font-size: 4.2361vw;
	line-height: 1.6;
	font-family: "Allison", cursive;
}

.service__fv__inner h1 {
	font-weight: 700;
	font-size: 2.7778vw;
}

@media screen and (max-width: 760px) {
    .service__fv__inner span {
        font-size: 12.8vw;
    }

    .service__fv__inner h1 {
        font-size: 5.33vw;
    }
}

.service__tuyomi {
    position: relative;
}



.service__tuyomi::before ,.service__tuyomi::after {
    content: '';
    position: absolute;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}



.service__tuyomi::before {
    background-image: url('../img/service/service-seisakuitaku-tsuyomi-bg1.png');
    top: 0;
    right: 0;
    width: 21.6667vw;
    height: 14.2188vw;
}

.service__tuyomi::after {
    background-image: url('../img/service/service-seisakuitaku-tsuyomi-bg2.png');
    bottom: 0;
    left: 0;
    width: 22.2656vw;
    height: 9.375vw;
}

.service__tuyomi__inner {
	padding: 6.25vw 30px;
	text-align: center;
	width: 80vw;
    margin: 0 auto;
}

.service__tuyomi__list {
    display: flex;
    gap: 1.39vw;
    margin-top: 3.18vw;
}

@media screen and (max-width: 760px) {

    .service__tuyomi__inner {
        padding: 42.67vw 5.33vw 19.20vw;
        width: 100%;
    }

    .service__tuyomi::before {
        background-image: url('../img/service/service-seisakuitaku-tsuyomi-bg1_sp.png');
        width: 61vw;
        height: 45vw;
    }
    
    .service__tuyomi::after {
        display: none;
    }

    .swiper-pagination-clickable .swiper-pagination-bullet {
        background-color: #333;
    }

    .swiper-button-prev:after,.swiper-button-next:after {
        color: #333;
        font-size: 8px;
        font-weight: 700;
    }

    .swiper-button-prev, .swiper-button-next {
        top: 94.5%;
    }

    .swiper-button-prev {
        left: 32%;
    }

    .swiper-button-next {
        right: 32%;
        left: unset;
    }
}

.service__text {
	line-height: 1.5;
	text-align: center;
	margin-top: 2.2222vw;
    font-weight: 500;
}

@media screen and (max-width: 760px) {
    .service__text {
        margin-top: 4.27vw;
    }
}


.service__slide {
	margin-top: 8.53vw;
}

.service__slide__list {
	padding-bottom: 40px;
}

.service__slide__li_name {
	margin-top: 20px;
}


.service__flow {
    background-color: #EDE6E0;
}

.service__flow__inner {
    width: 80vw;
    margin: 0 auto;
    padding: 5vw 1.56vw;
    text-align: center;
}

.service__flow__list {
    margin-top: 3.89vw;
    display: flex;
    gap: 1.39vw;
}

.service__flow__li {
    width: calc(20% - 1.39vw * 4 / 5);
    padding: 2.22vw 1.39vw;
    background-color: #fff;
}

.service__flow__li__step {
    font-size: 2.64vw;
    font-weight: bold;
    text-align: center;
    
}

.service__flow__li__step span {
    font-size: 0.83vw;
    display: block;
    line-height: 1.2;
    font-weight: 700;
}

.service__flow__li__icon {
    width: 5.56vw;
    margin: 0 auto;
    margin-top: 1.53vw;
}

.service__flow__li__title {
    font-size: 1.39vw;
    font-weight: 500;
    text-align: center;
    margin-top: 2.36vw;
}

.service__flow__li__text {
    font-weight: 500;
    font-size: 1.11vw;
    margin-top: 1.11vw;
    text-align: justify;
    line-height: 1.5;
}

@media screen and (max-width: 760px) {

    .service__flow__inner {
        padding: 17.07vw 5.33vw;
        width: 100%;
    }

    .service__flow__list {
        flex-direction: column;
        margin-top: 8.53vw;
        display: flex;
        gap: 5.33vw;
    }

    .service__flow__li {
        width: 100%;
        display: flex;
        padding: 5.33vw;
        gap: 4.27vw;
    }

    .service__flow__li__step {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.8vw;
        font-size: 4.27vw;
    }

    .service__flow__li__step span {
        font-size: 4.27vw;
    }

    .service__flow__li__icon {
        width: 21.33vw;
        margin-top: 0;
    }

    .service__flow__li__right {
        text-align: left;
    }

    .service__flow__li__title {
        font-size: 4.8vw;
        margin-top: 0;
        text-align: left;
    }

    .service__flow__li__text {
        font-size: 4vw;
        text-align: left;
        margin-top: 2.67vw;
    }
}

.service__fee__inner {
    width: 70vw;
    margin: 0 auto;
    padding: 5vw 1.56vw;
}

.service__fee__list {
    margin: 4.17vw 2.22vw;
}

.service__fee__li {
    display: flex;
    gap: 2.22vw;
    align-items: center;
}

.service__fee__li__img {
    width: 26.39vw;
}

.service__fee__li__detail {
    width: 41.39vw;
}

.service__fee__li__detail__title {
    font-size: 1.67vw;
    font-weight: 700;
}

.service__fee__li__detail__label {
    margin-top: 1.39vw;
}

.service__fee__li__detail__label__list {
    display: flex;
}

.service__fee__li__detail__label__li {
    font-size: 1.25vw;
    line-height: 1.3;
    font-weight: 500;
    padding: 0 0.56vw;
    border: 1px solid #333;
}

.service__fee__li__detail__price {
    display: flex;
    align-items: baseline;
}

.service__fee__li__detail__price__pieces {
    font-size: 1.53vw;
    font-weight: 700;
    margin-right: 0.56vw;
}

.service__fee__li__detail__price__total {
    font-size: 2.78vw;
    font-weight: 700;
    line-height: 1.5;
}

.service__fee__li__detail__price__total__tax {
    font-size: 1.25vw;
    font-weight: 500;
}

.service__fee__li__detail__price__total__kara {
    font-size: 1.67vw;
    font-weight: 700;
}


.service__fee__course {
    position: relative;
}

.service__fee__course::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1.32vw;
    height: 1.67vw;
}

.service__fee__course p {
    font-size: 1.11vw;
    font-weight: 500;
    margin-top: 1.04vw;
}

.service__fee__course__list {
    display: flex;
    gap: 2.78vw;
}

.service__fee__course__li {
    background-color: #F7F4F1;
    padding: 1.39vw;
}

.service__fee__course__title {
    font-size: 1.67vw;
    font-weight: 700;
    margin-bottom: 1.39vw;
    display: flex;
    align-items: center;
    gap: 0.69vw;
}

.service__fee__course__title img {
    width: 2.78vw;
}

.service__fee__course__price {
    font-size: 1.53vw;
    font-weight: 700;
}

.service__fee__course__price span {
    font-size: 1.11vw;
    font-weight: 500;
}

.service__fee__course__li {
    width: 33.61vw;
}

.service__fee__course__left__li:first-child {
    padding-bottom: 1.39vw;
    border-bottom: 1px solid #999999;
}

.service__fee__course__left__li:nth-child(2n) {
    padding-top: 1.39vw;
}

.service__fee__course__right__li {
    margin-bottom: 1.39vw;
}
.service__fee__course__right__li__kinds {
    margin-bottom: 1vw;
}

.service__fee__note {
    margin: 4.17vw auto 0;
    width: 55.56vw;
    font-size: 1.11vw;
    font-weight: 500;
    border: 1px solid #999999;
}

.service__fee__note__inner {
    padding: 1.39vw;
}

.service__fee__note__title {
    margin-bottom: 0.69vw;
}

.service__fee__note__li {
    margin-bottom: 0.69vw;
    padding-left: 1.39vw;
    position: relative;
    line-height: 1.5;
}

.service__fee__note__li::before {
    content: '・';
    position: absolute;
    top: 0;
    left: 0;
    width: 1.39vw;
    height: 1.39vw;
}

@media screen and (max-width: 760px) {
    .service__fee__inner {
        width: 100%;
        padding: 17.07vw 5.33vw;
    }

    .service__fee__list {
        margin: 8.53vw 0 10.67vw;
    }

    .service__fee__li {
        flex-direction: column;
        gap: 5.33vw;
    }

    .service__fee__li__img {
        width: 100%;
    }

    .service__fee__li__detail {
        width: 100%;
    }

    .service__fee__li__detail__title {
        font-size: 5.33vw;
        line-height: 1.2;
    }

    .service__fee__li__detail__label {
        margin-top: 5.87vw;
    }

    .service__fee__li__detail__label__li {
        font-size: 4.27vw;
        padding: 0 2.13vw;
    }

    .service__fee__li__detail__price__pieces {
        font-size: 5.87vw;
        margin-right: 0.56vw;
    }

    .service__fee__li__detail__price__total {
        font-size: 10.67vw;
    }

    .service__fee__li__detail__price__total__tax {
        font-size: 4.8vw;
    }

    .service__fee__li__detail__price__total__kara {
        font-size: 6.4vw;
    }

    .service__fee__course::before {
        width: 6.32vw;
        height: 1.67vw;
        font-size: 6.13vw;
    }

    .service__fee__course__list {
        flex-direction: column;
        gap: 11.73vw;
    }

    .service__fee__course__li {
        width: 100%;
        padding: 5.33vw;
    }

    .service__fee__course__title {
        font-size: 4.8vw;
        margin-bottom: 2.67vw;
        gap: 2.67vw;
    }

    .service__fee__course__title img {
        width: 8.53vw;
    }

    .service__fee__course__price {
        font-size: 5.87vw;
    }

    .service__fee__course__price span {
        font-size: 4.27vw;
    }

    .service__fee__course__left__li:first-child {
        padding-bottom: 5.33vw;
    }

    .service__fee__course__left__li:nth-child(2n) {
        padding-top: 5.33vw;
    }

    .service__fee__course__right__list {
        display: flex;
        flex-direction: column;
        gap: 2.67vw;
    }

    .service__fee__course__right__li__kinds {
        margin-bottom: 1.07vw;
        font-size :4vw;
    }

    .service__fee__course p {
        font-size: 4.27vw;
        margin-top: 2.67vw;
        line-height: 1.5;
    }

    .service__fee__note {
        margin-top: 10.67vw;
        font-size: 3.73vw;
        width: 100%;
    }

    .service__fee__note__inner {
        padding: 5.33vw;
    }

    .service__fee__note__list {
        margin-top: 2.67vw;
    }

    .service__fee__note__li{
        margin-bottom: 2.67vw;
        padding-left: 4.8vw;
        font-size: 3.73vw;
    }
}

.service__introduction__inner {
    width: 70vw;
    margin: 0 auto;
    padding: 5vw 1.56vw;
}

.service__introduction__text {
    margin-top: 1.39vw;
    text-align: center;
    font-size: 1.11vw;
}

.service__introduction__list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.78vw 2.78vw;
    margin-top: 2.92vw;
}

.service__introduction__li {
    width: calc(33% - (5.56vw /3));
    transition: opacity 0.3s ease-in-out;
}

.service__introduction__li[style*="display: none"] {
    opacity: 0;
}

.service__introduction__li[style*="display: block"],
.service__introduction__li:not([style*="display"]) {
    opacity: 1;
}

.service__introduction__li a {
    color: #333333;
}

.service__introduction__li__img {
    margin-bottom: 1.39vw;
    width: 100%;
    height: 13.08vw;
    overflow: hidden;
    position: relative;
}

.service__introduction__li__img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像をトリミングして枠に収める */
    object-position: center; /* 画像の中央を表示 */
}

.service__introduction__li__title {
    margin-bottom: 0.69vw;
    font-size: 1.25vw;
    font-weight: 700;
    line-height: 1.5;
}

.service__introduction__li__text {
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 1vw;
}


.service__introduction__li__link a {
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 1;
    position: relative;
    padding-right: 2vw;
}

.service__introduction__li__link a::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1.2vw;
    height: 1.2vw;
    background-image: url('../img/service/service-seisakuitaku-introduction-more.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.service__introduction__more.c-more__btn {
    margin-top: 3.89vw;
}

@media screen and (max-width: 760px) {
    .service__introduction__inner {
        width: 100%;
        padding: 0 5.33vw 17.07vw;
    }

    .service__introduction__text {
        margin-top: 2.67vw;
        font-size: 4vw;
    }

    .service__introduction__list {
        flex-direction: column;
        gap: 10.67vw;
        margin-top: 8.53vw;
    }

    .service__introduction__li {
        width: 100%;
    }

    .service__introduction__li__img {
        margin-bottom: 2.67vw;
        height: 57.08vw;
    }

    .service__introduction__li__title {
        margin-bottom: 2.67vw;
        font-size: 4.27vw;
    }

    .service__introduction__li__text {
        font-size: 3.73vw;
    }
}

.service__qa {
    background-color: #EDE6E0;
}

.service__qa__inner {
    width: 55.56vw;
    padding: 6.67vw 1.39vw;
    margin: 0 auto;
}

.service__qa__list {
    margin-top: 3.89vw;
}

.service__qa__li {
    margin-bottom: 0.56vw;
    padding: 1.11vw;
    background-color: #fff;
    font-size: 1.11vw;
    font-weight: 500;
    line-height: 1.5;
}

.service__qa__li__question {
    display: flex;
    align-items: center;
    gap: 1.11vw;
    position: relative;
    cursor: pointer;
}


.service__qa__li__icn{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 0.83vw;
}

.service__qa__li__icn__inner {
    position: relative;
}
.service__qa__li__icn__inner::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.83vw;
    height: 0.07vw;
    background-color: #333333;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}
.service__qa__li__icn__inner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.07vw;
    height: 0.83vw;
    background-color: #333333;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
}

.service__qa__li.is-active .service__qa__li__icn__inner::before {
    opacity: 0;
}
.service__qa__li.is-active .service__qa__li__icn__inner::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.service__qa__li__img {
    width: 2.5vw;
}

.service__qa__li__question h3 {
    width: calc(100% - 2.5vw - 1.11vw);
}

.service__qa__li__answer {
    position: relative;
    display: flex;
    gap: 1.11vw;
    margin-top: 0.56vw;
    padding-top: 0.42vw;
    opacity: 0;
    display: none;
    transform: translateY(-30px) scale(0.98);
    transition:
        opacity 0.9s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform 1.1s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.service__qa__li.is-active .service__qa__li__answer {
    opacity: 1;
    display: flex;
    transform: translateY(0) scale(1);
    transition:
        opacity 1.1s cubic-bezier(0.28, 1.5, 0.55, 1),
        transform 1.21s cubic-bezier(0.28, 1.5, 0.55, 1);
}

.service__qa__li__answer p {
    width: calc(100% - 2.5vw - 1.11vw);
}

@media screen and (max-width: 760px) {
    .service__qa__inner {
        width: 100%;
        padding: 17.07vw 5.33vw;
    }

    .service__qa__list {
        margin-top: 8.53vw;
    }

    .service__qa__li {
        margin-bottom: 2.13vw;
        padding: 4.27vw;
        font-size: 4.27vw;
        line-height: 2;
    }

    .service__qa__li__question {
        gap: 4.8vw;
    }

    .service__qa__li__img {
        width: 9.6vw;
    }

    .service__qa__li__question h3 {
        width: calc(100% - 9.6vw - 4.8vw);
    }
    .service__qa__li__icn__inner::before {
        width: 3.20vw;
        height: 0.27px;
    }
    .service__qa__li__icn__inner::after {
        height: 3.20vw;
        width: 0.27px;
    }

    .service__qa__li.is-active .service__qa__li__answer {
        gap: 4.8vw;
    }

    .service__qa__li__answer p {
        width: calc(100% - 9.6vw - 4.8vw);
    }
}

.service__footcta__inner {
    padding: 5vw 1.39vw;
    text-align: center;
}

.service__footcta p {
    font-size: 1.11vw;
}

.service__footcta__btn.c-more__btn {
    margin-top: 1.04vw;
}


/* コンテナ (外側の円) */
.service__cta-container {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: #4B372C; /* 暗い背景色 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
	position: fixed;
    bottom: 0;
    right: 0;
	z-index: 50;
}

/* CTAボタン (内側の a タグ) */
.service__cta {
    /* aタグのデフォルトスタイルをリセット */
    text-decoration: none;
    color: inherit;
    display: flex; /* 要素を flex で配置 */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.cup-icon {
    /* コーヒーカップの画像サイズ調整 */
    width: 45px;
    height: auto;
    /* 湯気の下に配置するために絶対位置で調整 */
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%); /* 中央寄せ */
    z-index: 2; /* 湯気より手前に */
}

.steam-icon {
    /* 湯気の画像サイズ調整 */
    width: 15px;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    z-index: 1; /* カップより奥に */
    opacity: 0; /* 初期状態を透明に */

    /* アニメーション用のトランジション設定 */
    transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}

/* テキストのスタイル */
.contact-text {
    color: white;
    font-size: 13px;
    font-family: Arial, sans-serif;
    letter-spacing: 2px;
    position: absolute;
    bottom: 27px; /* 下部からの位置調整 */
    z-index: 3;
}

@media screen and (max-width: 760px) {

    .service__footcta__inner {
        padding: 17.07vw 5.33vw;
    }

    .service__footcta p {
        font-size: 4.27vw;
    }

    .service__footcta__btn.c-more__btn {
        margin-top: 5.33vw;
    }
    
    .service__cta-container {
        width: 21.33vw;
        height: 21.33vw;
    }
    
    .cup-icon {
        width: 8vw;
    }
    
    .steam-icon {
        width: 4vw;
    }

    .contact-text {
        font-size: 2.67vw;
        bottom: 4.53vw;
    }
    
}