:root {
    /* カラー */
    --color-main: #100169;
    --color-black: #181818;
    --color-white: #ffffff;
    --color-red: #e8002e;
    --color-yellow: #faff00;
    --color-gold: #ae9a4b;
    --color-bg-1: #f7f7f7;
    --color-bg-2: #eef3ff;
    --color-border: #dddddd;

    /* フォント */
    --font-sans: "Source Han Sans", sans-serif;
    --font-serif: "Source Han Serif", serif;
    /* フォントウェイト */
    --font-regular: 400;
    --font-bold: 700;
    /* フォントサイズ */
    --font-size-heading: 24px;
    --font-size-subheading: 20px;
    --font-size-small-heading: 16px;
    --font-size-body: 14px;
}

html {
    scroll-behavior: smooth;
}

/* 仮 */
html {
    background-color: var(--color-main);
}

body {
    background-color: var(--color-white);
    padding-bottom: 56px;
}


body {
    font-family: var(--font-sans);
    font-weight: var(--font-regular);
    font-size: var(--font-size-body);
    color: var(--color-black);
}


img {
    display: block;
    max-width: 100%;
    height: auto;
}



/* spanコンポーネント */
.text-main {
    color: var(--color-main);
}

.text-red {
    color: var(--color-red);
}

.text-yellow {
    color: var(--color-yellow);
}

.text-white {
    color: var(--color-white);
}

.text-bold {
    font-weight: var(--font-bold);
}

.text-40 {
    font-size: 40px;
}

.text-36 {
    font-size: 36px;
}

.text-28 {
    font-size: 28px;
}

.text-24 {
    font-size: 24px;
}

.text-20 {
    font-size: 20px;
}


.text-16 {
    font-size: 16px;
}

.text-10 {
    font-size: 10px;
}

/* フッター */
.privacy {
    text-decoration: underline;
}

/* ヘッダー */
header {
    width: 100%;
    padding: 0 16px;
}

.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
}

.header__store-name {
    font-size: var(--font-size-subheading);
    font-weight: var(--font-bold);
    color: var(--color-main);
}




/* ファーストビュー */
.fv {
    font-family: var(--font-serif);
    height: 650px;
    display: flex;
    align-items: flex-end;
    background-image: url(../image/fv-bg.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
}

.fv__inner {
    width: 100%;
}

.fv__img {
    width: 100%;
    position: absolute;
    z-index: -1;
}

.fv__access {
    margin-bottom: 12px;
    width: fit-content;
    padding: 4px 16px;
    color: var(--color-white);
    font-size: var(--font-size-small-heading);
    background-color: var(--color-main);
}

.fv__catch {
    margin: 0 16px 24px;
    font-size: var(--font-size-heading);
    color: var(--color-main);
    font-weight: var(--font-bold);
}

.fv__items {
    margin: 0 16px 8px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    font-size: 13px;
    font-weight: var(--font-bold);
}

.fv__item {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.fv__item p {
    color: var(--color-main);
}

.fv__description {
    font-weight: var(--font-bold);
    margin: 0 16px 24px;
    text-align: center;
}

.fv__features {
    margin: 0 16px 24px;
    display: flex;
    gap: 4px;
    justify-content: space-between;
}

.fv__feature {
    flex: 1;
    min-width: 0;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 10px 4px;
    border: solid 1px var(--color-main);
    border-radius: 4px;
    justify-content: center;
}

.fv__feature img {
    flex-shrink: 0;
}

.fv__feature-text {
    font-size: var(--font-size-small-heading);
    font-weight: var(--font-bold);
    color: var(--color-main);
    white-space: nowrap;
}

.fv__feature-text .sub {
    font-size: 10px;
}

.fv__message {
    text-align: center;
    padding: 10px 0;
    background-color: var(--color-main);
    color: var(--color-white);
    font-size: var(--font-size-small-heading);
}


/* 電話CTA */
.phone-cta {
    padding: 0 16px;
}

.phone-cta__inner {
    padding: 20px 0 0 0;
    display: grid;
    gap: 10px;
    align-items: center;
}

.phone-cta__catch {
    font-size: var(--font-size-heading);
    font-weight: var(--font-bold);
    color: var(--color-main);
    text-align: center;
}

.phone-cta__content {
    padding: 20px 0;
    display: grid;
    justify-content: center;
    background-color: var(--color-main);
    color: var(--color-white);
    border-radius: 12px;
    justify-items: center;

}

.phone-cta__label {
    display: flex;
    font-size: var(--font-size-subheading);
    font-weight: var(--font-bold);
    align-items: center;
    gap: 12px;
}

.phone-cta__label img {
    width: 32px;
}

.phone-cta__number {
    font-size: 36px;
    font-weight: var(--font-bold);
}


/* キャンペーン情報はこちら */
.campaign {}

.campaign__inner {
    display: grid;
    gap: 40px;
    padding-top: 80px;
}

.campaign__heading {
    font-size: var(--font-size-subheading);
    color: var(--color-main);
    text-align: center;
}

.campaign__slider,
.campaign__slide {
    width: 100%;
    min-width: 0;
}

.campaign__slide img {
    width: 100% !important;
    height: 250px !important;
    display: block;
    object-fit: cover;
    object-position: center;
    vertical-align: bottom;
}


.campaign__slider .slick-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
    list-style: none;
}

.campaign__slider .slick-dots li {
    width: 8px;
    height: 8px;
}

.campaign__slider .slick-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #ddd;
    font-size: 0;
}

.campaign__slider .slick-dots .slick-active button {
    background: #100169;
}


/* 初めての方もお気軽にご相談ください */
.beginner {
    padding: 0 16px;
}

.beginner__inner {
    padding: 80px 0;
    display: grid;
    gap: 20px;
}

.beginner__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.beginner__content {
    display: grid;
    gap: 12px;
}

.beginner__message {
    display: grid;
    gap: 4px;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
    justify-items: center;
}

.beginner__message-top {
    font-size: var(--font-size-small-heading);
}

.beginner__message-middle {
    font-size: var(--font-size-heading);
}

.beginner__message-bottom {
    font-size: var(--font-size-subheading);
}

.beginner__features {
    display: flex;
}

.beginner__feature {
    height: fit-content;
}

.beginner__feature-margin {
    margin-left: -8px;
}

.beginner__image {}

.beginner__description {
    display: grid;
    gap: 20px;
    padding: 20px;
    background-color: var(--color-white);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.beginner__description-title {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-gold);
    font-size: var(--font-size-small-heading);
    text-align: center;
    color: var(--color-main);
    font-family: var(--font-serif);
    font-weight: var(--font-bold)
}

.beginner__description-text {
    display: grid;
    gap: 20px;
    line-height: 30px;
    position: relative;
}

.beginner__description-img-01 {
    position: absolute;
    bottom: 50px;
    right: 30px;
    rotate: -45deg;
    width: 60px;
}

.beginner__description-img-02 {
    position: absolute;
    bottom: -10px;
    right: -10px;
}







/* 選べる3つの買取方法 */
.methods {
    padding: 0 16px;
    background-color: var(--color-main);
}

.methods__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.methods__heading {
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    font-size: var(--font-size-heading);
    color: var(--color-white);
    text-align: center;
}

.methods__list {
    display: grid;
    gap: 20px;
}

.methods__item {
    background-color: var(--color-white);
    border-radius: 8px;
}

.methods__summary {
    padding: 12px 8px;
    color: var(--color-main);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.methods__summary::-webkit-details-marker {
    display: none;
}

.methods__summary-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.methods__icon {
    background-color: var(--color-main);
    border-radius: 100%;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.methods__text {
    display: grid;
}

.methods__title {
    display: flex;
    align-items: center;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    font-size: var(--font-size-subheading);
}

.methods__description {}

.methods__arrow {
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.methods__item[open] .methods__arrow {
    transform: rotate(180deg);
}

.methods__detail {
    padding: 16px;
    display: grid;
    gap: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background-color: var(--color-bg-1);
    border-radius: 0 0 8px 8px;
}

.methods__detail-description {
    line-height: 25px;
}

.methods__recommend {
    padding: 12px;
    display: grid;
    gap: 12px;
    background-color: var(--color-bg-2);
    border-radius: 8px;
}

.methods__recommend-heading {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-small-heading);
    text-align: center;
}

.methods__recommend-list {
    display: grid;
    gap: 8px;
}

.methods__flow {
    display: grid;
    gap: 12px;
}

.methods__flow-heading {
    font-size: var(--font-size-subheading);
    color: var(--color-main);
    text-align: center;
}

.methods__flow-list {
    display: grid;
    gap: 20px;
}

.methods__flow-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    position: relative;
}

.methods__flow-item:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50px;
    left: 29px;
    width: 2px;
    height: calc(100% + 20px);

    background-image: radial-gradient(circle,
            var(--color-main) 2px,
            transparent 2px);
    background-size: 2px 8px;
    background-repeat: repeat-y;
}

.methods__step {
    flex-shrink: 0;
    background-color: var(--color-main);
    font-weight: var(--font-bold);
    color: var(--color-white);
    display: grid;
    width: 58px;
    height: 58px;
    justify-items: center;
    align-content: center;
    border-radius: 333px;
}

.methods__flow-content {
    display: grid;
    gap: 12px;
}

.methods__flow-title {
    display: grid;
    gap: 8px;
    font-size: var(--font-size-small-heading);
}

.methods__flow-description {
    line-height: 25px;
}





/* 一品一品、丁寧に。 */
.reason {
    padding: 0 16px;
    background-color: var(--color-bg-1);
}

.reason__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.reason__main {
    display: grid;
    gap: 20px;
    position: relative;
}

.reason__image {
    position: absolute;
    width: 50%;
    right: 0;
    top: -25px;
}

.reason__heading {
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.reason__heading-top {
    font-size: var(--font-size-heading);
}

.reason__heading-bottom {
    font-size: 38px;
}

.reason__description {
    display: grid;
    gap: 20px;
    line-height: 30px;
}

.reason__features {
    display: grid;
    gap: 8px;
}

.reason__features-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
}

.reason__features-heading::before,
.reason__features-heading::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--color-gold);
}


.reason__feature-list {
    display: flex;
    justify-content: space-between;
}

.reason__feature {
    padding: 20px 4px;
    width: 100%;
    display: grid;
    gap: 4px;
    justify-items: center;
}

.reason__feature img {
    height: 55px;
}

.reason__feature-text {
    display: grid;
    font-family: var(--font-serif);
    justify-items: center;
    color: var(--color-main);
}

.reason__feature-text-top {
    font-size: 10px;
}

.reason__feature-text-bottom {
    font-size: var(--font-size-small-heading);
}

.reason__feature:not(:last-child) {
    border-right: 1px solid var(--color-gold);
}



/* 買取大吉のヒミツ */
.secret {
    padding: 0 16px;
}

.secret__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.secret__heading {
    text-align: center;
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.secret__body {
    display: grid;
    gap: 20px;
}

.secret__lead {
    line-height: 25px;
}

.secret__content {}

.secret__main {
    background-color: var(--color-bg-1);
}

.secret__main-text {
    padding: 12px;
    display: grid;
    gap: 8px;
}

.secret__main-title {
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.secret__main-description {
    line-height: 25px;
}

.secret__routes {
    display: grid;
    gap: 12px;
    background-color: var(--color-bg-2);
}

.secret__routes-heading {
    background-color: var(--color-main);
    color: var(--color-white);
    padding: 8px 0;
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    text-align: center;
}

.secret__route-list {
    padding: 0 12px 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.secret__route {
    width: fit-content;
    text-align: center;
    padding: 4px 8px;
    background-color: var(--color-white);
    color: var(--color-main);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    border-radius: 4px;
}

.secret__message {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 16px 0;
    justify-items: center;
    border: 1px solid var(--color-main);
    border-radius: 8px;
    color: var(--color-main);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    text-align: center;
}

.secret__message-middle,
.secret__message-bottom {
    font-size: var(--font-size-subheading);
}




/* こんな方におすすめ */
.recommend {
    padding: 0 16px;
    background-color: var(--color-main);
}

.recommend__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
    position: relative;
}

.recommend__image {
    position: absolute;
    bottom: 0;
    right: -15px;
    width: 30%;
}

.recommend__heading {
    color: var(--color-yellow);
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    text-align: center;
}

.recommend__list {
    padding: 30px 16px;
    display: grid;
    gap: 16px;
    background-color: var(--color-white);
    border-radius: 8px;
}

.recommend__item {
    display: flex;
    align-items: center;
}



/* 買取品目 */
.items {
    padding: 0 16px;
    background-color: var(--color-bg-1);
}

.items__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.items__heading {
    display: grid;
    gap: 12px;
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
    justify-items: center;
}

.items__heading-catch {
    position: relative;
    width: fit-content;
    padding: 8px 24px;
    background-color: var(--color-red);
    border-radius: 333px;
    color: var(--color-white);
    font-weight: var(--font-bold);
    font-size: var(--font-size-small-heading);
    font-family: var(--font-sans);
}

.items__heading-catch p {
    position: relative;
    z-index: 1;
}

.items__heading-catch::after {
    z-index: 0;
    content: "";
    position: absolute;
    bottom: 20px;
    left: 105px;
    border-style: solid;
    border-width: 30px 10px 0 10px;
    border-color: var(--color-red) transparent transparent;
    translate: calc(-50% + 0.4px) 100%;
}

.items__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.items__item {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.items__item p {
    width: max-content;
    position: absolute;
    z-index: 0;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.items__description {
    font-size: var(--font-size-small-heading);
    line-height: 25px;
}



/* よくある質問 */
.faq {
    padding: 0 16px;
    background-color: var(--color-main);
}

.faq__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.faq__heading {
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-yellow);
    text-align: center;
}

.faq__list {
    display: grid;
    gap: 16px;
}

.faq__item {
    background-color: var(--color-white);
    border-radius: 8px;
}

.faq__question {
    color: var(--color-main);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 16px;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: var(--color-main);
    transform: translate(-50%, -50%);
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.3s ease;
}

.faq__item[open] .faq__icon::after {
    transform: translate(-50%, -50%) rotate(180deg);
}

.faq__answer {
    padding: 0 16px 20px;
    line-height: 25px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}




/* お問い合わせフォーム */
.contact {
    padding: 0 16px;
    background-color: var(--color-bg-1);
}

.contact__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.contact__heading {
    display: grid;
    gap: 20px;
}

.contact__heading-title {
    text-align: center;
}

.contact__heading-title-top {
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.contact__heading-title-bottom {
    font-size: var(--font-size-small-heading);
}

.contact__heading-description {
    line-height: 20px;
}

.contact__form form {
    display: grid;
    gap: 40px;
    justify-items: center;
}

.contact__fields {
    width: 100%;
    display: grid;
    gap: 16px;
}

.contact__field {
    display: grid;
    gap: 8px;
    width: 100%;
}

.contact__label {
    font-size: var(--font-size-small-heading);
}

.contact__input,
.contact__textarea {
    width: 100%;
    box-sizing: border-box;
    background-color: #eee;
    border: none;
    border-radius: 4px;
    padding: 20px;
    font-size: var(--font-size-small-heading);
    font-family: inherit;
    color: #181818;
}

.contact__input::placeholder,
.contact__textarea::placeholder {
    color: #aaa;
}

.contact__textarea {
    height: 130px;
    resize: vertical;
}

/* 送信ボタン */
.contact__submit {
    width: fit-content;
}


.contact__submit input[type="submit"] {
    display: block;
    background-color: var(--color-main);
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-small-heading);
    color: var(--color-white);
    padding: 16px 50px;
    cursor: pointer;
    font-family: inherit;
    width: fit-content;
}

.wpcf7-spinner {
    display: none;
}






/* 店長挨拶 */
.greeting {
    padding: 0 16px;
}

.greeting__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
    justify-items: center;
}

.greeting__heading {
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.greeting__profile {
    display: grid;
    gap: 12px;
    justify-items: center;
}

.greeting__image {
    width: 180px;
    height: 180px;
    border-radius: 333px;
    overflow: hidden;
    background-color: var(--color-bg-2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.greeting__image img {
    height: 100%;
    width: auto;
}

.greeting__name {
    font-size: var(--font-size-subheading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
}

.greeting__description {
    line-height: 30px;
    display: grid;
    gap: 20px;
    font-size: var(--font-size-small-heading);
}


/* 店舗概要 */
.store {
    padding: 0 16px;
    background-color: var(--color-bg-1);
}

.store__inner {
    padding: 80px 0;
    display: grid;
    gap: 40px;
}

.store__heading {
    font-size: var(--font-size-heading);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
    color: var(--color-main);
    text-align: center;
}

.store__info {
    display: grid;
    font-size: var(--font-size-small-heading);
}

.store__row {
    display: flex;
    border-bottom: 1px solid var(--color-border);
}

.store__row:first-child {
    border-top: 1px solid var(--color-border);
}

.store__label {
    width: 110px;
    padding: 16px 0 16px 16px;
    background-color: var(--color-bg-2);
    flex-shrink: 0;
}

.store__value {
    flex: 1;
    padding: 16px;
}

.store__content {
    flex: 1;
    padding: 16px;
    display: grid;
    gap: 10px;
}

.store__content .store__value {
    padding: 0;
}

.store__map {}





/* 共通CTA */
.cta {
    padding: 0 16px;
    background-color: var(--color-bg-2);
}

.cta__inner {
    position: relative;
    padding: 40px 0;
    display: grid;
    gap: 20px;
}

.cta__balloon {
    display: none;
}

.cta__heading {
    display: none;
}

.cta__links {
    display: grid;
    gap: 12px;
}

.cta__link {
    width: 100%;
}

.cta__link--line img {
    width: 40px;
}

.cta__link--form {
    display: grid;
    justify-items: center;
}

.cta__link-catch {
    z-index: 1;
    margin-bottom: -12px;
    width: fit-content;
    padding: 2px 24px;
    background-color: var(--color-bg-2);
    border: 2px solid var(--color-main);
    border-radius: 333px;
    font-size: var(--font-size-small-heading);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.cta__link-content {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 20px 0 12px;
    border: 2px solid var(--color-main);
    border-radius: 8px;
    font-size: var(--font-size-small-heading);
    font-weight: var(--font-bold);
    color: var(--color-main);
}

.cta__link--line {
    display: flex;
    gap: 10px;
    padding: 12px 20px;
    background-color: #06C755;
    border-radius: 8px;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-weight: var(--font-bold);
    font-size: var(--font-size-small-heading);
}

.cta__link--phone {
    padding: 20px 0;
    display: grid;
    justify-content: center;
    background-color: var(--color-main);
    color: var(--color-white);
    border-radius: 12px;
    justify-items: center;
}

.cta__link-label {
    display: flex;
    font-size: var(--font-size-subheading);
    font-weight: var(--font-bold);
    align-items: center;
    gap: 12px;
}

.cta__link-number {
    font-size: 36px;
    font-weight: var(--font-bold);
}


.fixed-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background-color: var(--color-main);
    z-index: 1000;
}

.fixed-cta__inner {
    position: relative;
    display: flex;
    align-items: center;
}

.fixed-cta__balloon {
    position: absolute;
    top: -60px;
    right: 10px;
    width: 60px;
    height: 60px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-weight: var(--font-bold);
    display: grid;
    align-content: center;
    justify-items: center;
    border-radius: 50%;
    z-index: 2;
}

.fixed-cta__balloon::after {
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 8px 0 8px;
    border-color: var(--color-red) transparent transparent transparent;
    rotate: 45deg;
}

.fixed-cta__balloon-top {
    font-size: 12px;
    line-height: 1;
}

.fixed-cta__balloon-bottom {
    font-size: var(--font-size-subheading);
    line-height: 1;
    margin-top: 4px;
    z-index: 1;
}

.fixed-cta__list {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.fixed-cta__item {
    padding: 8px;
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--color-white);
}

.fixed-cta__item-line {
    background-color: #06C755;
}


.fixed-cta__item img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.fixed-cta__item-line img {
    width: 40px;
    height: 40px;
}

.fixed-cta__text {
    text-align: center;
}

.fixed-cta__text p {
    font-size: var(--font-size-small-heading);
}


/* フッター */
footer {
    padding: 0 16px;
    background-color: var(--color-main);
}

.footer__inner {
    padding: 40px 0 20px;
    display: grid;
    gap: 10px;
    justify-items: center;
    color: var(--color-white);
    font-family: var(--font-serif);
    font-weight: var(--font-bold);
}





/* PCレイアウト */
@media (min-width: 500px) {
    body {
        width: 402px;
        margin: auto;
        padding: 0;
    }

    .fixed-cta {
        display: none;
    }
}