/* utill =====================================================*/

.mt20 {
    margin-top: 20px;
}

.mt40 {
    margin-top: 40px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb40 {
    margin-bottom: 40px;
}

.small {
    font-size: 18px;
}

.tac {
    text-align: center;
}

.c_pink {
    color: #EB6D7B;
}

.c_blue {
    color: #2AACA5;
}

.fw_900 {
    font-weight: 900;
}


/* BASE =====================================================*/
html {
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-size: 18px;
    line-height: 1.6em;
    letter-spacing: 0.2em;
    background-color: #fffbf2;
}

a img:hover,
a img:active,
a:hover,
a:active {
    filter: alpha(opacity=80);
    -ms-filter: "alpha(opacity=80)";
    -moz-opacity: 0.8;
    opacity: 0.8;
}

:root {
    --main-color1: #B50081;
    --main-color2: #F86ACF;
    --main-color3: #F9F0F3;
    --sub-color: #D13F93;
    --mono-tone1: #F0F0F0;
    --mono-tone2: #676767;
    --mono-tone3: #707070;
    --sub-color2: #FFF8CA;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

h1 {
    margin: 0;
}

h2 {
    margin: 0;
    text-align: center;
}

h2 img {
    width: 70%;
    height: auto;
    margin-bottom: 40px;
}

h3 {
    margin: 0;
}

/* header =====================================================*/
#header {
    padding-top: 121px;
    margin-bottom: 35px;
}

#header.end {
    padding-top: 0;
}

#header-inner {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center !important;
}

/* .contents =====================================================*/

.contents {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: 40px;
}

.contents * {
    box-sizing: border-box;
}

.section {
    width: 100%;
    margin-top: 100px;
}

.section-inner {
    width: 924px;
    margin: 0 auto;
}

.read_txt {
    padding: 40px 0;
    text-align: center;
    font-size: 22px;
    line-height: 1.5em;
    font-weight: 900;
}

.section_box {
    padding: 40px;
}

.box_orange {
    background-color: #FFF7EA;

}

.friendcp_link {
    width: 70%;
    padding: 10px;
    background-color: #fff;
    border: #EB6D7B solid 2px;
    border-radius: 50px;
    color: #EB6D7B !important;
    font-weight: 900;
    font-size: 14px;
    line-height: 1.5em;
    display: inline-block;
    margin: 40px 0 0 0;
    text-align: center;
}

.app_link {
    width: 90%;
    padding: 20px;
    background-color:#FCE087;
    border: #fff solid 2px;
    border-radius: 50px;
    color: #5F3420 !important;
    font-weight: 900;
    font-size: 20px;
    line-height: 1.5em;
    display: inline-block;
    margin: 40px 0 0 0;
    text-align: center;
    box-shadow: 0 0 20px rgb(191, 191, 191);
}

.detail_txt {
    font-size: 12px;
    line-height: 1.5em;
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.step_box {
    width: 90%;
    display: flex;
    gap: 16px;                 /* カード間の余白 */
    overflow-x: auto;          /* 横スクロール */
    padding: 16px;
    scroll-snap-type: x mandatory; /* スナップ（任意） */
    margin: 0 auto;
}

.scroll-item {
  flex: 0 0 280px;           /* カードの幅（ここ調整） */
  border-radius: 16px;
  scroll-snap-align: start;  /* スナップ位置 */
}

/* スクロールバー非表示（任意） */
.step_box::-webkit-scrollbar {
  display: none;
}
.step_box {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.sp {
    display: none;
}

@media screen and (max-width: 640px) {
    .read_txt {
        font-size: 18px;
    }

    .section_box {
        padding: 40px 20px;
    
    }
    h2 img {
        width: 90%;
    }
    
    .friendcp_link {
        width: 80%;
        font-size: 12px;
    }
    
    .app_link {
        width: 90%;
    }
}