@charset "UTF-8";
/* CSS Document */

/*---------------------------------
* utility
---------------------------------*/

html {
    font-size: 62.5%;
    /*16px×62.5%=10px*/
}

body {
    font-family: "M PLUS 2", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    color: #333333;
    font-feature-settings: "palt";
    -webkit-font-feature-settings: "palt";
}

img {
    max-width: 100%;
    -webkit-backface-visibility: hidden;
}

a {
    color: #333333;
    text-decoration: none;
    transition: all .24s ease;
}

.wrapper_1000 {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.wrapper_1200 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/*---------------------------------
*  inview
---------------------------------*/

.fadeIn_up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.fadeIn_up.is-show {
    transform: translate(0, 0);
    opacity: 1;
}

/* .fadeIn_up_longCont01 {
    opacity: 0;
    transform: translate(0, 10%);
    transition: 2s;
} */

/*---------------------------------
* header
---------------------------------*/
header {
    height: 115px;
    background-image: url(../img/line01.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center bottom;
}

header .wrapper_1000 {
    height: 100%;
}

.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
    padding: 0 30px 27px;
}

.header_nav ul {
    display: flex;
    gap: 35px;
}

.header_nav ul li a {
    font-weight: 600;
}

.header_nav ul li a:hover {
    color: #1da2c2;
}

.header_logo {
    width: 170px;
}

.btn-trigger {
    display: none;
}

/*---------------------------------
* main
---------------------------------*/

.sec_mv {
    margin-top: 60px;
}

.sec_eyecatch01 {
    width: 91%;
    margin: 65px auto 0;
}

.sec_eyecatch02 {
    width: 100%;
    margin: 15px auto 0;
}

.page_nav {
    margin-top: 50px;
}

.page_nav ul {
    display: flex;
    gap: 18px;
    justify-content: center;
}

.page_nav ul li a {
    font-weight: 500;
    padding: 15px 55px 15px 30px;
    background-color: #1da2c2;
    color: #ffffff;
    border: 1px solid #1da2c2;
    border-radius: 50px;
    font-size: clamp(14px, 1.8vw, 20px);
    letter-spacing: 0.028em;
    position: relative;
    display: block;
}

.page_nav ul li a::after {
    content: "";
    background-image: url(../img/arrow01.png);
    width: 22px;
    height: 22px;
    background-size: cover;
    display: inline-block;
    position: absolute;
    right: 20px;
}

.page_nav ul li a:hover {
    background-color: #003c96;
    border-color: #003c96;
}

.sec_about {
    padding-top: 60px;
}

.about_inner {
    width: 90%;
    background-image: url(../img/bg01.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    padding: 45px 30px 50px 50px;
    box-sizing: border-box;
    aspect-ratio: 900 / 666;
    max-height: 666px;
    margin: 0 auto;
}

.about_inner h2 {
    width: 480px;
    margin: 0 auto;
}

.about_block {
    display: flex;
    margin-top: 50px;
    gap: 20px;
}

.about_cont01 {
    font-size: clamp(12px, 1.8vw, 20px);
    font-weight: 500;
    letter-spacing: 0.024em;
    line-height: 2;
    color: #2c9294;
    flex: 1 1 53%;
}

.about_cont02 {
    flex: 1 1 40%;
}

.about_cont02 img {
    width: 100%;
}

.about_img {
    width: 61%;
    margin-top: 15px;
}

.sec_features {
    padding-top: 76px;
}

.sec_features h2 {
    width: 62.5%;
    margin: 0 auto;
}

.features_inner {
    width: 90%;
    margin: -12% auto 0;
    background-color: #1da2c2;
    border-radius: 5px;
    padding: 140px 94px 50px;
    box-sizing: border-box;
}

.features_inner ul {
    display: flex;
    gap: 22px;
}

.features_title {
    font-size: clamp(12px, 1.8vw, 20px);
    font-weight: 600;
    color: #ffffff;
    background-color: #eac801;
    border-radius: 10px;
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.features_img {
    margin-top: 13px;
}

.sec_howto_buy {
    padding-top: 95px;
}

.sec_howto_buy h2 {
    width: 55%;
    margin: 0 auto;
}

.sec_howto_buy ul {
    width: 90%;
    margin: 80px auto 0;
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.sec_howto_buy ul li {
    flex: 1 1 32%;
    display: flex;
}

.sec_howto_buy ul li a,
.sec_howto_buy ul li>div {
    display: flex;
    /* ← 追加 */
    flex-direction: column;
    /* 中身を縦並び */
    width: 100%;
    padding: 15px 22px 20px;
    transition: all .24s ease;
}

.howto_buy_bl01 a {
    border: 8px solid #1da2c2;
    border-radius: 5px;
}

.howto_buy_bl02 a {
    border: 8px solid #27b597;
    border-radius: 5px;
}

.howto_buy_bl03>div {
    border: 8px solid #eaca00;
    border-radius: 5px;
}

.howto_buy_title {
    text-align: center;
    height: 95px;
}

.howto_buy_title p {
    font-size: clamp(14px, 2.4vw, 24px);
    font-weight: 700;
    text-align: center;
    margin-top: 10px;
    position: relative;
    display: inline-block;
}

.howto_buy_title p:first-of-type {
    margin-top: 0;
}

.howto_buy_title p::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translate(-50%, -50%);
    width: 110%;
    /* テキスト幅より少し広め */
    height: 12px;
    /* 行の高さに合わせて */
    background: #eac801;
    z-index: -1;
    /* テキストの下に配置 */
}

.howto_buy_img {
    height: 190px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.howto_buy_bl01 .howto_buy_img img {
    width: 112px;
}

.howto_buy_bl02 .howto_buy_img img {
    width: 139px;
}

.howto_buy_bl03 .howto_buy_img img {
    width: 147px;
}

.howto_buy_title img {
    width: 204px;
}

.howto_buy_cont {
    font-size: clamp(14px, 1.7vw, 19px);
    font-weight: 500;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.howto_buy_btn {
    color: #fff;
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 600;
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 10px;
}

.howto_buy_btn p {
    font-weight: 600;
}

.howto_buy_bl01 .howto_buy_btn {
    background-color: #1da2c2;
    border: 2px solid #1da2c2;
    border-radius: 50px;
}

.howto_buy_bl02 .howto_buy_btn {
    background-color: #27b597;
    border: 2px solid #27b597;
    border-radius: 50px;
}

.howto_buy_bl01 .howto_buy_btn p:nth-of-type(2) {
    font-size: clamp(12px, 1.5vw, 15px);
}

.sec_howto_buy ul li a:hover .howto_buy_btn {
    background-color: #fff;
}

.sec_howto_buy ul .howto_buy_bl01 a:hover .howto_buy_btn {
    color: #1da2c2;
}

.sec_howto_buy ul .howto_buy_bl02 a:hover .howto_buy_btn {
    color: #27b597;
}

.sec_howto_use {
    padding-top: 100px;
}

.sec_howto_use h2 {
    width: 93.5%;
    margin: 0 auto 0 1.5%;
}

.sec_howto_use ul {
    width: 90%;
    margin: 40px auto 0;
    display: flex;
    gap: 6px;
}

.sec_howto_use ul li {
    border-radius: 5px;
    padding: 23px 30px 40px;
    flex: 1;
}

.use_bl01 {
    background-color: #b6dbe0;
}

.use_bl02 {
    background-color: #f4e5a9;
}

.use_bl03 {
    background-color: #bce1d6;
}

.use_title {
    font-size: clamp(18px, 2.5vw, 28px);
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
}

.use_img {
    height: 77%;
    max-height: 210px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding-top: 20px;
    box-sizing: border-box;
}

.use_bl01 .use_img img {
    width: 203px;
}

.use_bl02 .use_img img {
    width: 224px;
    margin-bottom: 5px;
}

.use_bl03 .use_img img {
    width: 232px;
    margin-bottom: 15px;
}

.sec_usecase {
    padding-top: 65px;
}

.usecase_inner {
    width: 90%;
    margin: 0 auto;
}

.usecase_tab {
    display: flex;
    align-items: flex-end;
}

.usecase_tab li {
    color: #fff;
    font-size: clamp(18px, 2.5vw, 28px);
    width: 275px;
    height: 90px;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
}

.usecase_tab li h2 {
    font-weight: 500;
}

.usecase_tab li.active {
    width: 300px;
    height: 110px;
}

.usecase_tab_keiri {
    background-color: #1da2c2;
}

.usecase_tab_keiri.active {
    position: relative;
    box-shadow: 10px 10px 6px -2px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.usecase_tab_shop {
    position: relative;
    background-color: #eaca00;
    box-shadow: 10px 0 6px -2px rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.usecase_tab_shop.active {
    box-shadow: 0 15px 10px 5px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

.usecase_tab_eigyo {
    background-color: #27b597;
}

.usecase_tab_eigyo.active {
    position: relative;
    z-index: 3;
    box-shadow: -10px 10px 6px -2px rgba(0, 0, 0, 0.3);
}

.usecase_tab.eigyo_open .usecase_tab_shop {
    box-shadow: -10px 0 6px -2px rgba(0, 0, 0, 0.3);
}

.usecase_content {
    position: relative;
    z-index: 10;
    padding: 0 20px;
    border-radius: 0 5px 5px 5px;
    display: none;
    background-color: #fff;
}

.usecase_content.active {
    display: block;
}

.usecase_content_keiri {
    border: 10px solid #1da2c2;
}

.usecase_content_shop {
    border: 10px solid #eaca00;
}

.usecase_content_eigyo {
    border: 10px solid #27b597;
}

.usecase_proposal_block {
    display: flex;
    padding-top: 18px;
    padding-bottom: 35px;
    align-items: stretch;
}

.usecase_proposal_icon {
    width: 110px;
    height: 43px;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usecase_proposal_icon p {
    font-size: 31px;
    width: 30px;
    height: 30px;
    background-color: #fff;
    border-radius: 50%;
    color: #333;
    font-family: "Zen Maru Gothic", sans-serif;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    /* 横中央寄せ */
    align-items: center;
    /* 縦中央寄せ */
    line-height: 1;
}

.usecase_content_eigyo ul>li:nth-of-type(n+2) .usecase_proposal_icon p {
    font-size: 27px;
}

.usecase_content_eigyo ul>li:nth-of-type(n+2) .usecase_proposal_icon p span {
    top: -1px;
}

.usecase_proposal_icon p span {
    font-weight: 900;
    position: relative;
    top: -3px;
}

.usecase_content_keiri .usecase_proposal_icon {
    background-color: #1da2c2;
}

.usecase_content_shop .usecase_proposal_icon {
    background-color: #ddb400;
}

.usecase_content_eigyo .usecase_proposal_icon {
    background-color: #27b597;
}

.usecase_proposal_text {
    flex: 1 1 68%;
    display: flex;
    flex-direction: column;
}

.usecase_proposal_img {
    flex: 1 1 32%;
}

.usecase_content h3{
    margin-top: 20px;
}

.usecase_content h3 p {
    font-size: clamp(18px, 2.8vw, 31px);
    font-weight: 700;
    display: inline-block;
    width: fit-content;
}

.usecase_content .usecase_proposal_flexType02 h3 {
    margin-top: 0;
}

.usecase_content h3 p::after {
    content: "";
    display: block;
    width: 100%;
    height: 10px;
    background-color: #e0e24b;
    margin-top: -5px;
}

.usecase_use_list {
    padding-top: 30px;
    position: relative;
    flex: 1;
}

.usecase_use_list dl {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.usecase_use_list dl:last-of-type {
    margin-bottom: 0;
}

.usecase_use_list dl dt {
    width: 70px;
    height: 20px;
    background-color: #e0e24b;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usecase_use_list dl dd {
    font-size: clamp(10px, 1.5vw, 16px);
    font-weight: 700;
    line-height: 1.6;
}

.usecase_use_list dl:first-of-type dd {
    line-height: 1.2;
}

.usecase_proposal_stampImg {
    position: absolute;
    z-index: 2;
}

.usecase_btn_area_inner {
    margin: 20px auto;
}

.usecase_btn_area::before {
    content: '';
    display: block;
    background-size: 6px 3px;
    background-image: linear-gradient(to right, #1da2c2, #1da2c2 3px, transparent 3px, transparent 6px);
    height: 3px;
    width: 100%;
}

.usecase_content_shop .usecase_btn_area::before {
    background-image: linear-gradient(to right, #eaca00, #eaca00 3px, transparent 3px, transparent 6px);
}

.usecase_content_eigyo .usecase_btn_area::before {
    background-image: linear-gradient(to right, #27b597, #27b597 3px, transparent 3px, transparent 6px);
}


.usecase_btn_area::after {
    content: '';
    display: block;
    background-size: 6px 3px;
    background-image: linear-gradient(to right, #1da2c2, #1da2c2 3px, transparent 3px, transparent 6px);
    height: 3px;
    width: 100%;
}

.usecase_content_shop .usecase_btn_area::after {
    background-image: linear-gradient(to right, #eaca00, #eaca00 3px, transparent 3px, transparent 6px);
}

.usecase_content_eigyo .usecase_btn_area::after {
    background-image: linear-gradient(to right, #27b597, #27b597 3px, transparent 3px, transparent 6px);
}

.usecase_content ul>li:last-of-type .usecase_btn_area::after {
    content: none;
}

.usecaase_shop_text {
    margin-top: 15px;
    text-align: center;
}

.usecase_shop_btn {
    display: block;
    margin-bottom: 15px;
}

.usecaase_shop_text p:first-of-type {
    font-size: 16px;
    font-weight: 500;
}

.usecaase_shop_text p:nth-of-type(2) {
    font-size: 14px;
    font-weight: 500;
    margin-top: 5px;
}

.usecase_btn {
    width: 395px;
    height: 55px;
    border-radius: 55px;
    color: #fff;
    font-size: 20px;
    letter-spacing: 0.06em;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    margin: 0 auto
}

.usecase_btn span {
    font-size: 14px;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.usecase_shop_btn {
    background-color: #1da2c2;
    border: 2px solid #1da2c2;
    margin-top: 13px;
}

.usecase_online_btn {
    background-color: #2d9395;
    border: 2px solid #2d9395;
}

.usecase_btn:hover {
    background-color: #fff;
}

.usecase_btn.usecase_shop_btn:hover {
    color: #1da2c2;
}

.usecase_btn.usecase_online_btn:hover {
    color: #2d9395;
}

.usecase_proposal_explanation {
    font-size: clamp(14px, 1.8vw, 19px);
    line-height: 1.4;
    color: #2c9294;
    font-weight: 500;
}

.usecase_content_shop ul li:nth-of-type(1) .usecase_proposal_explanation{
    margin-top: 8px;
}

.usecase_content_shop .usecase_proposal_explanation{
    color: #ddb400;
}

.usecase_content_eigyo .usecase_proposal_explanation{
    color: #2c9293;
}

.usecase_proposal_flexType02 .usecase_proposal_explanation {
    margin-top: 15px;
}


.usecase_proposal_flexType01,
.usecase_proposal_flexType02 {
    padding-top: 18px;
}

.usecaase__online_linkWrap {
    text-align: center;

}

.usecaase_online_link {
    font-size: 16px;
    color: #00468c;
    text-decoration: underline;
    margin-top: 20px;
    display: inline-block;
}

.usecaase_online_link:hover {
    text-decoration: none;
}


.usecase_content_keiri ul li:first-of-type .usecase_proposal_stampImg {
    width: 29%;
    max-width: 168px;
    bottom: -30px;
    right: 20px;
}

.usecase_content_keiri ul li:nth-of-type(2) .usecase_proposal_stampImg {
    width: 43%;
    max-width: 240px;
    bottom: 0;
    right: 5px;
}

.usecase_content_keiri ul li:nth-of-type(2) .usecase_use_list {
    padding-top: 60px;
}

.usecase_content_keiri ul li:nth-of-type(3) .usecase_proposal_stampImg {
    width: 36%;
    max-width: 205px;
    bottom: -24px;
    right: 5px;
}


.usecase_content_keiri ul li:nth-of-type(4) .usecase_proposal_stampImg {
    width: 19%;
    max-width: 110px;
    bottom: 42px;
    right: -6px;
}

.usecase_content_keiri ul li:nth-of-type(5) .usecase_proposal_stampImg {
    width: 30%;
    max-width: 175px;
    bottom: 15px;
    right: 50px;
}

.usecase_content_keiri ul li:nth-of-type(6) .usecase_proposal_stampImg {
    width: 33%;
    max-width: 188px;
    bottom: 0;
    right: 25px;
}

.usecase_content_shop ul li:nth-of-type(1) .usecase_proposal_stampImg {
    width: 40%;
    max-width: 230px;
    bottom: -34px;
    right: 0;
}

.usecase_content_shop ul li:nth-of-type(1) .usecase_use_list {
    padding-bottom: 15px;
}

.usecase_content_eigyo ul li:nth-of-type(4) .usecase_use_list {
    padding-bottom: 30px;
}

.usecase_content_shop ul li:nth-of-type(2) .usecase_proposal_stampImg {
    width: 35%;
    max-width: 202px;
    bottom: -34px;
    right: 10px;
}

.usecase_content_shop ul li:nth-of-type(2) .usecase_use_list {
    padding-bottom: 25px;
}

.usecase_content_eigyo ul li:nth-of-type(1) .usecase_proposal_stampImg {
    width: 32%;
    max-width: 183px;
    bottom: 10px;
    right: 65px;
}

.usecase_content_eigyo ul li:nth-of-type(2) .usecase_proposal_stampImg {
    width: 35%;
    max-width: 204px;
    bottom: -10px;
    right: 10px;
}

.usecase_content_eigyo ul li:nth-of-type(3) .usecase_proposal_stampImg {
    width: 34%;
    max-width: 194px;
    bottom: -24px;
    right: 10px;
}

.usecase_content_eigyo ul li:nth-of-type(4) .usecase_proposal_stampImg {
    width: 24%;
    max-width: 140px;
    bottom: -28px;
    right: 17px;
}

.sec_store {
    padding-top: 100px;
    padding-bottom: 115px;
}

.store_text01 {
    width: 64%;
    margin: 0 auto;
}

.store_text02 {
    width: 55%;
    margin: 125px auto 0;
}

.store_btn_area {
    display: flex;
    gap: 28px;
    margin-top: 60px;
    justify-content: center;
}

.store_btn_area li a {
    width: 370px;
    height: 70px;
    border-radius: 70px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.store_btn_shop a {
    background-color: #1da2c2;
    border: 2px solid #1da2c2;
    display: flex;
    flex-direction: column;
}

.store_btn_shop a:hover {
    background-color: #fff;
    color: #1da2c2;
}

.store_btn_shop a p:first-of-type {
    font-size: 20px;
    letter-spacing: 0.06em;
}

.store_btn_shop a p:nth-of-type(2) {
    font-size: 14px;
    letter-spacing: 0.078em;
    margin-top: 5px;
}

.store_btn_online a {
    background-color: #2d9395;
    border: 2px solid #2d9395;
    font-size: 20px;
    letter-spacing: 0.06em;
    line-height: 1.2;
}

.store_btn_online a:hover {
    background-color: #fff;
    color: #2d9395;
}

/*---------------------------------
* footer
---------------------------------*/

footer {
    background-color: #003c96;
    padding: 30px 0 10px;
}

.footer_inner {
    padding: 0 80px 95px 45px;
    display: flex;
    justify-content: space-between;
}

.footer_logo {
    width: 31.4%;
    max-width: 275px;
}

.footer_nav a {
    color: #fff;
    font-size: clamp(12px, 1.6vw, 18px);
}

.footer_nav a:hover {
    color: #1da2c2;
}

.footer_nav ul {
    display: flex;
    gap: 35px;
}

.footer_nav ul li {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.footer_nav>ul>li>a:first-of-type::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-color: #fff;
    margin-top: 15px;
}

.footer_copyright {
    text-align: right;
    padding-right: 80px;
}

.footer_copyright small {
    font-family: sans-serif;
    font-size: 14px;
    letter-spacing: 0.07em;
    color: #fff;
}

/*---------------------------------
* utility
---------------------------------*/

.sp-display {
    display: none;
}

.pc-display {
    display: block;
}

.sp-inlineBlock {
    display: none;
}

.pc-flex{
    display: flex;
}

.sp-flex{
    display: none;
}


@media screen and (max-width: 1010px){
    .usecase_use_list dl{
        flex-direction: column;;
    }
} 


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

    /*---------------------------------
    * utility
    ---------------------------------*/

    body {
        min-width: initial;
        /* 初期値 */
        min-width: 100%;
    }

    .wrapper_1000 {
        width: calc(100% - 25px);
        margin: 0 auto;
        padding: 0;
    }

    .wrapper_1200 {
        width: calc(100% - 25px);
        margin: 0 auto;
        padding: 0;
    }

    .sp-display {
        display: block;
    }

    .pc-display {
        display: none;
    }

    .sp-inlineBlock {
        display: inline-block;
    }
    
    .pc-flex{
        display: none;
    }
    
    .sp-flex{
        display: flex;
    }

    /*---------------------------------
    * header
    ---------------------------------*/
    
    header{
        height: 57.5px; 
    }
    
    .header_logo{
        width: 88px;
    }
    
    .header_nav {
        display: none;
        position: fixed;
        top: 57.5px;
        left: 0;
        width: 100%;
        height: calc(100vh - 57.5px);
        background-color: #fff;
        z-index: 20;
    }
    
    .header_nav ul{
        flex-direction: column;
        row-gap: 50px;
        justify-content: center;
        align-items: center;
        padding: 70px 20px 50px;
    }
    
    .header_nav ul li a{
        font-size: 22px;
        font-weight: 500;
    }
    
    .header_inner{
        padding: 0 0 7px;
    }

    /* btn-trigger */

    .btn-trigger {
        display: block;
        position: relative;
        width: 33px;
        height: 22px;
        cursor: pointer;
    }

    .btn-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 5px;
        border-radius: 5px;
    }

    .btn-trigger,
    .btn-trigger span {
        display: inline-block;
        transition: all .5s;
        box-sizing: border-box;
    }

    .btn-trigger span:nth-of-type(1) {
        top: 0;
        background-color: #efd32d;
    }

    .btn-trigger span:nth-of-type(2) {
        top: 8px;
        background-color: #009196;
    }

    .btn-trigger span:nth-of-type(3) {
        bottom: 0;
        background-color: #00a0c2;
    }

    #btn01.active span:nth-of-type(1) {
        -webkit-transform: translateY(8px) rotate(-45deg);
        transform: translateY(8px) rotate(-45deg);
    }

    #btn01.active span:nth-of-type(2) {
        opacity: 0;
    }

    #btn01.active span:nth-of-type(3) {
        -webkit-transform: translateY(-8px) rotate(45deg);
        transform: translateY(-8px) rotate(45deg);
    }
    
    /*---------------------------------
    * main
    ---------------------------------*/
    
    .sec_mv {
        margin-top: 15px;
    }
    
    .sec_eyecatch01 {
        width: 100%;
        margin: 35px auto 0;
    }
    
    .sec_eyecatch02 {
        margin: 10px auto 0;
    }
    
    .sec_eyecatch02 .wrapper_1200{
        width: 100%;
    }
    
    .page_nav{
        margin-top: 13px;
    }
    
    .page_nav ul{
        flex-wrap: wrap;
        gap: 1%;
        row-gap: 10px;
    }
    
    .page_nav ul li{
        flex: 1 1 49%;
    }
    
    .page_nav ul li a{
        padding: 0;
        height: 33px;
        font-size: 13px;
        text-align: center;
        padding-top: 3px;
    }
    
    .page_nav ul li a::after {
        width: 11px;
        height: 11px;
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        bottom: 2px;
    }
    
    .sec_about{
        padding-top: 30px;
    }
    
    .about_inner{
        background-image: url(../img/bg01_sp.png);
        aspect-ratio: 726 / 1001;
        padding: 15px 0;
        align-items: stretch;
        display: flex;
        flex-direction: column; /* 子要素（h2, .about_block など）を縦積み。 .about_block の flex:1 が効くように */
        min-height: unset;
        width: 100%;
        max-width: 365px;
        box-sizing: border-box;
        margin: 0 auto;
    }
    
    .about_inner h2{
        width: 275px;
    }
    
    .about_block{
        flex-direction: column-reverse;
        align-items: center;
        justify-content: space-between;
        margin-top: 15px;
        gap: unset;
        flex: 1;
    }
    
    .about_block .about_cont01,
    .about_block .about_cont02{
        flex: 0 0 auto;  /* ← これで縦に伸びず、余白が生まれる */
    }
    
    .about_cont02{
        flex: 1;
        width: 177px;;
    }
    
    .about_cont01{
        font-size: 13px;
    }
    
    .about_img_sp{
        width: 256px;
    }
    
    .sec_features{
        padding-top: 27px;
    }
    
    .features_inner{
        width: 100%;
        margin: -45px auto 0;
        padding: 62.5px 11.5px 15px;
        max-width: 365px;
    }
    
    .sec_features h2{
        width: 306px;
    }
    
    .features_inner ul{
        flex-direction: column;
        row-gap: 13px;
    }
    
    .features_inner ul li{
        display: flex;
        gap: 6px;
    }
    
    .features_inner>ul>li div:first-of-type{
        flex: 1 1 34%;
    }
    
    .features_inner>ul>li div:nth-of-type(2){
        flex: 1 1 65%;
    }
    
    .features_img{
        margin-top: 0;
    }
    
    .features_title{
        height: auto;
        font-size: 16px;
        letter-spacing: 0.02em;
        text-align: center;
        line-height: 1.6;
    }
    
    .sec_howto_buy{
        padding-top: 35px;
    }
    
    .sec_howto_buy h2{
        width: 270px;
    }
    
    .sec_howto_buy ul{
        width: 100%;
        flex-direction: column;
        row-gap: 12px;
        margin: 33px auto 0;
        max-width: 365px;
    }
    
    .howto_buy_text{
        display: flex;
        height: 75px;
        gap: 28px;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
    }
    
    .howto_buy_bl01 a{
        border: 4px solid #1da2c2;
    }
    
    .howto_buy_bl02 a{
        border: 4px solid #27b597;
    }
    
    .howto_buy_bl03>div{
        border: 4px solid #eaca00;
    }
    
    .sec_howto_buy ul li a, .sec_howto_buy ul li>div{
        padding: 7px 15px 7px;
    }
    
    .howto_buy_title{
        height: auto;
        width: 123px;
    }
    
    .howto_buy_title p{
        font-size: 17px;
        margin-top: 5px;
    }
    
    .howto_buy_title p::before{
        height: 6px;
        bottom: -6px;
    }
    
    .howto_buy_img{
        height: auto;
        width: 100px;
    }
    
    .howto_buy_bl01 .howto_buy_img img{
        width: 75px;
    }
    
    .howto_buy_bl02 .howto_buy_img img{
        width: 87.5px;
    }
    
    .howto_buy_bl03 .howto_buy_img img{
        width: 100px;
    }
    
    .howto_buy_title img{
        width: 102px;
    }
    
    .howto_buy_btn{
        width: 175px;
        height: 38px;
        font-size: 13px;
        margin-bottom: 7px;
    }
    
    .howto_buy_bl01 .howto_buy_btn p:nth-of-type(2){
        font-size: 11px;
        margin-top: 3px;
    }
    
    .howto_buy_cont{
        font-size: 14px;
    }
    
    .sec_howto_use{
        padding-top: 20px;
    }
    
    .sec_howto_use ul{
        width: 100%;
        margin: 16px auto 0;
        gap: 12px;
    }
    
    .sec_howto_use ul li{
        padding: 12px 3px 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: auto;
        box-sizing: border-box;
    }
    
    .use_title{
        font-size: 13px;
    }
    
    .use_img{
        height: auto;
        align-items: center;
        padding-top: 15px;
    }
    
    .use_bl02 .use_img img{
        margin-bottom: 3px;
    }
    
    .use_bl03 .use_img img{
        margin-bottom: 10px;
    }
    
    .sec_usecase{
        padding-top: 20px;
    }
    
    .sec_usecase .wrapper_1000{
        width: calc(100% - 10px);
    }
    
    .usecase_inner{
        width: 100%;
    }
    
    .usecase_tab li{
        flex: 1 1 32%;
        width: auto;
        height: 45px;
        font-size: 13px;
    }
    
    .usecase_tab li.active{
        flex: 1 1 34%;
        width: auto;
        height: 60px;
    }
    
    .usecase_content{
        padding: 0 4px 0 8px;
        border-radius: 0 0 5px 5px;
        margin-top: -1px;
    }
    
    .usecase_proposal_block{
        padding-top: 7px;
        padding-bottom: 15px;
    }
    
    .usecase_proposal_img{
        flex: 1 1 46.5%;
    }
    
    .usecase_proposal_text{
        flex: 1 1 53.5%;
    }
    
    .usecase_proposal_icon{
        width: 55px;
        height: 22px;
        font-size: 14px;
        border-radius: 5px;
        padding-bottom: 2px;
    }
    
    .usecase_proposal_icon p{
        width: 17px;
        height: 17px;
        font-size: 15px;
        margin-left: 2px;
    }
    
    .usecase_proposal_icon p span{
        top: -1px;
    }
    
    .usecase_use_list{
        padding-top: 10px;
    }
    
    .usecase_content h3{
        margin-top: 10px;
    }
    
    .usecase_content h3 p{
        font-size: 15px;
        display: block;
    }
    
    .usecase_content h3 p:nth-of-type(n+2){
        margin-top: 5px;
    }
    
    .usecase_content h3 p::after{
        height: 5px;   
        margin-top: -2px;
    }
    
    .usecase_use_list dl{
        flex-direction: column;
        row-gap: 8px;
    }
    
    .usecase_use_list dl dt{
        width: 60px;
        height: 17px;
        font-size: 11px;
    }
    
    .usecase_use_list dl dd{
        font-size: 12px;
    }
    
    .usecase_use_list dl:first-of-type dd{
        line-height: 1.6;
    }
    
    .usecase_content_keiri ul li:first-of-type .usecase_proposal_stampImg{
        width: 38%;
        bottom: 0;
        right: -5vw;
    }
    
    
    
    .usecase_content_keiri ul li:first-of-type .usecase_proposal_stampImg img{
        display: block;
    }
    
    .usecase_btn_area::before{
        background-size: 4px 2px;
        height: 2px;
        background-image: linear-gradient(to right, #1da2c2, #1da2c2 2px, transparent 2px, transparent 4px);
    }
    
    .usecase_content_shop .usecase_btn_area::before {
        background-image: linear-gradient(to right, #eaca00, #eaca00 2px, transparent 2px, transparent 4px);
}

    .usecase_content_eigyo .usecase_btn_area::before {
        background-image: linear-gradient(to right, #27b597, #27b597 2px, transparent 2px, transparent 4px);
    }
    
    .usecase_btn_area::after{
        background-size: 4px 2px;
        height: 2px;
        background-image: linear-gradient(to right, #1da2c2, #1da2c2 2px, transparent 2px, transparent 4px);
    }
    
    .usecase_content_shop .usecase_btn_area::after {
        background-image: linear-gradient(to right, #eaca00, #eaca00 2px, transparent 2px, transparent 4px);
    }
    
    .usecase_content_eigyo .usecase_btn_area::after {
        background-image: linear-gradient(to right, #27b597, #27b597 2px, transparent 2px, transparent 4px);
    }
    
    .usecase_btn_area_inner{
        margin: 15px auto;
    }
    
    .usecaase_shop_text p:first-of-type{
        font-size: 12px;
    }
    
    .usecaase_shop_text p:nth-of-type(2){
        font-size: 11px;
    }
    
    .usecase_btn{
        width: 235px;
        height: 34px;
        font-size: 13px;
    }
    
    .usecase_btn span{
        font-size: 11px;
    }
    
    .usecase_proposal_explanation{
        font-size: 12px;
        margin-top: 7px;
    }
    
    .usecase_content ul li.usecase_proposal_spType01 .usecase_use_list{
        padding-top: 0;
    }
    
    .usecase_content ul li.usecase_proposal_spType01 .usecase_proposal_text{
        flex: 0 0 35%;
    }

    .usecase_content ul li.usecase_proposal_spType01 .usecase_proposal_img{
        flex: 1;
    }

    .usecase_content ul li.usecase_proposal_spType01 .usecase_proposal_explanation{
        margin-top: 6px;
    }
    
    .usecase_proposal_img_sp01{
        width: 70%;
        margin: 0 0 10px auto;
    }
    
    .usecaase_online_link{
        font-size: 11px;
        margin-top: 10px;
    }
    
    .usecase_content ul li.usecase_proposal_spType02 .usecase_use_list dl:last-of-type{
        width: 60%;
        float: left;
    }
    
    .usecase_content ul li.usecase_proposal_spType02 .usecase_proposal_img{
        float: right;
        width: 40%;
    }
    
    .usecase_content_keiri ul li:nth-of-type(3) .usecase_proposal_stampImg{
        width: 30%;
        max-width: 205px;
        bottom: 0;
        right: auto;
        left: 24vw;
    }
    
    .usecase_content .usecase_proposal_flexType02 h3{
        margin-top: 10px;
    }
    
    .usecase_content_keiri ul li:nth-of-type(4) .usecase_proposal_text{
        flex: 0 0 50%;
        padding-bottom: 10px;
    }
    
    .usecase_content_keiri ul li:nth-of-type(4) .usecase_proposal_stampImg{
        width: 32%;
        bottom: -22px;
        right: auto;
        left: 32vw;
    }
    
    .usecase_content_keiri ul li:nth-of-type(5) .usecase_proposal_stampImg{
        width: 47%;
        bottom: 0;
        right: auto;
        left: 34vw;
    }
    
    .usecase_proposal_spType03 .usecase_proposal_explanation{
        margin-top: 8px;
    }
    
    .usecase_content_keiri ul li:nth-of-type(6) .usecase_proposal_text{
        flex: 0 0 62%;
    }
    
    .usecase_content_keiri ul li:nth-of-type(6) .usecase_proposal_img{
        flex: 1;
    }
    
    .usecase_content_keiri ul li:nth-of-type(6) .usecase_proposal_stampImg{
        width: 31%;
        right: 2vw;
    }
    
    .usecase_content_shop ul li:nth-of-type(1){
        padding-top: 18px;
    }
    
    .usecase_content_shop ul li:nth-of-type(1).usecase_proposal_spType01 .usecase_proposal_text{
        flex: 0 0 61%;
    }
    
    .usecase_content_shop ul li:nth-of-type(1) .usecase_proposal_stampImg{
        width: 40.5%;
        right: 0vw;
        bottom: -12px;
    }
    
    .usecase_content_shop ul li:nth-of-type(2).usecase_proposal_spType01 .usecase_proposal_text{
        flex: 0 0 57%;
    }
    
    .usecase_content_shop ul li:nth-of-type(2) .usecase_proposal_stampImg{
        width: 41%;
        bottom: -12px;
        right: 1vw;
    }
    
    .usecase_content_shop ul li:nth-of-type(2) .usecase_use_list{
        padding-bottom: 50px;
    }
    
    .usecase_content_eigyo ul li.usecase_proposal_spType01 .usecase_proposal_text{
        flex: 0 0 62%;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(1) .usecase_proposal_stampImg{
        width: 44%;
        bottom: -5px;
        right: 4vw;
    }
    
    .usecase_content_eigyo ul>li:nth-of-type(n+2) .usecase_proposal_icon p{
        font-size: 16px;
    }
    
    .usecase_content_eigyo ul>li:nth-of-type(n+2) .usecase_proposal_icon p span{
        top: -1.5px;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(2) .usecase_proposal_stampImg{
        width: 48%;
        bottom: 0;
        right: 1vw;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(3) .usecase_proposal_stampImg{
        width: 37%;
        bottom: -14px;
        right: -5vw;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(4) .usecase_proposal_stampImg{
        width: 30%;
        bottom: 7px;
        right: -4vw;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(4) .usecase_use_list{
        padding-bottom: 0;
    }
    
    
    
    /* sec_store */
    
    .sec_store{
        padding-top: 38px;
        padding-bottom: 23px;
    }
    
    .store_text01{
        width: 90%;
    }
    
    .store_text02{
        width: 77%;
        margin: 50px auto 0;
    }
    
    .store_btn_area{
        margin-top: 30px;
        gap: 8px;
    }
    
    .store_btn_area li{
        flex: 0 0 48%;
    }
    
    .store_btn_area li a{
        width: 100%;
        height: 35px;
    }
    
    .store_btn_shop a p:first-of-type{
        font-size: 13px;
    }
    
    .store_btn_shop a p:nth-of-type(2){
        font-size: 11px;
        margin-top: 3px;
    }
    
    .store_btn_online a{
        font-size: 13px;
    }
    
    /*---------------------------------
    * footer
    ---------------------------------*/
    
    footer{
        padding: 38px 0 13px;
    }
    
    .footer_inner{
        padding: 0 0 78px;
        flex-direction: column;
    }
    
    .footer_logo{
        width: 137px;
        margin: 0 auto 36px;
    }
    
    .footer_nav ul{
        gap: 20px;
        justify-content: center;
    }
    
    .footer_nav a{
        font-size: 13px;
    }
    
    .footer_nav ul li{
        row-gap: 10px;
    }
    
    .footer_nav ul li:first-of-type{
        flex: 0 0 127px;
    }
    
    .footer_nav ul li:nth-of-type(2){
        flex: 0 0 208px;
    }
    
    .footer_nav>ul>li>a:first-of-type::after{
        margin-top: 5px;
    }
    
    .footer_copyright{
        text-align: center;
        padding: 0;
    }
    
    .footer_copyright small{
        font-size: 8px;
    }
    
    
}

@media screen and (max-width: 430px){
    .usecase_content_keiri ul li:first-of-type .usecase_proposal_stampImg{
        width: 45%;
        bottom: 3vw;
        right: -19vw;
    }
    
    .usecase_content_keiri ul li:nth-of-type(6) .usecase_proposal_stampImg{
        width: 43%;
        right: -17vw;
    }
    
    .usecase_content_shop ul li:nth-of-type(1) .usecase_proposal_stampImg{
        width: 55.5%;
        right: -20vw;
        bottom: -12px;
    }
    
    .usecase_content_shop ul li:nth-of-type(2) .usecase_proposal_stampImg{
        width: 53%;
        bottom: -12px;
        right: -16vw;
    }
    
    .usecase_content_eigyo ul li:nth-of-type(3) .usecase_proposal_stampImg{
        width: 46%;
        bottom: -14px;
        right: -30vw;
    }
}