html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	/* 10px */
	font-feature-settings: "palt";
}
body,
body *,
body *::before,
body *::after {
	outline: none;
}
body {
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    font-optical-sizing: auto;
    color:var(--color-1);
    background: var(--color-2);
}
img {
    display: block;
    width: 100%;
    height: auto;
}
/* =color
-------------------------------------------------------------- */
:root {
    --color-1: #00ee2a;
    --color-2: #191918;
    --color-3: #00a818;
    --color-4: #00eee3;
    --color-5: #aa0000;
    --color-6: #6d6d6d;
    --color-7: #4c4c4c;
}
/* =font
-------------------------------------------------------------- */
.spa {
    font-family: "cc-spaghetti-western-script", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* =3Dパース
-------------------------------------------------------------- */
.js-tilt{
  will-change: transform;
  transform-style: preserve-3d;
}

/* =header
-------------------------------------------------------------- */
header {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding:3rem 0;
}
header .logo {
    width:15rem;
}
/* =content
-------------------------------------------------------------- */
h1 {
    display: block;
    font-size:6vw;
    font-weight: 700;
    line-height: 1.2em;
    text-align: center;
}
.shopify_blc {
    width:82vw;
    margin:0 auto;
    position: relative;
    padding:6vw 0 0 0;
}
.shopify_blc.keytext .textbox {
    position: absolute;
    top:6vw;
    right:0;
    width:30.6vw;
}
.shopify_blc .main_thumb {
    position: relative;
    width: 54vw;
    user-select: none;
    pointer-events: none;
}
.shopify_blc .thumb1 {
    width: 100%;
}
.shopify_blc .thumb2 {
    position: absolute;
    top: 40vw;
    right: -18vw;
    width: 20vw;
}
.textbox .intro_ti {
    font-size: 2.6vw;
    line-height: 1.5em;
    color:#FFF;
}
.textbox .intro_txt {
    font-size:1.65vw;
    line-height: 1.7em;
    color:#FFF;
    padding:1.2vw 0 0 0;
}
.textbox .list,
.textbox .number {
    color:#FFF;
    padding:1.2vw 0 0 0;
}
.textbox .list li {
    list-style: disc;
    font-size:1.1vw;
    line-height: 1.7em;
    margin: 0.4vw 0 0.4vw 2rem;
}
.textbox .number li {
    list-style: decimal;
    font-size:1.1vw;
    line-height: 1.7em;
    margin: 0.4vw 0 0.4vw 2rem;
}

/*sec2*/
.sec2 {
    position: relative;
}
.shopify_blc.subtext1 {
    position: absolute;
    z-index:3;
    top:0;
    left:0;
    width:45vw;
    margin:0;
    padding:6vw 0 0 12.5vw;
}
.connect_wrap {
    position: relative;
}
.connect_blc {
    width: max(27rem, 24vw);
    margin:0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border:4px solid var(--color-1);
    border-radius: 6rem;
    padding: 1rem 0;
    background:var(--color-2);
}
.connect_to_shopify {
    position: relative;
    z-index: 2;
    margin:1.5vw auto 0;
}
.connect_to_wordpress {
    position: relative;
    z-index: 2;
    margin: 0.5vw auto 0;
}
.connect_blc img {
    width:auto;
    height:3vw;
}
.linewrap {
    margin: -3vw 0 0 0;
    display: grid;
    place-items: center;
}
.lineSvg{
    width: 75vw;
    height: auto;
    overflow: visible;
}
.connect_safety {
    position: absolute;
    left:18vw;
    bottom:8vw;
    width:60vw;
    z-index:3;
}
.connect_safety .connect_title {
    opacity: 0;
    background: var(--color-1);
    padding:2rem 2.5rem;
    border-radius: 1rem;
    width:fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: end;
    margin:0 0 1.5vw 5vw;
    position: relative;
    transition:opacity .6s ease;
}
.connect_safety .connect_title::before {
    content:'';
    position: absolute;
    left:-5vw;
    top:50%;
    transform: translateY(-50%);
    width:2vw;
    height:2vw;
    border-radius: 50%;
    background: var(--color-1);
}
.connect_safety .connect_title::after {
    content:'';
    position: absolute;
    top:50%;
    left: -1.1vw;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 0.6vw solid transparent;
    border-bottom: 0.6vw solid transparent;
    border-right: 1.2vw solid var(--color-1);
    border-left: 0;
}
.connect_safety .connect_title.active {
    opacity: 1;
}
.connect_safety .connect_title .powered {
    font-size: 1.4vw;
    color:var(--color-2);
}
.connect_safety .connect_title .cb {
    font-size: 2.1vw;
    font-weight: 500;
    color:var(--color-2);
    padding:0 0 0 1.5rem;
}
.connect_safety .connect_txt {
    font-size:1.6vw;
    font-weight: 500;
    line-height: 1.8em;
    color:var(--color-1);
    padding:0 0 0 5vw;
    clip-path: inset(100% 0 0 0);
    transition:clip-path .6s ease;
}
.connect_safety .connect_txt.active {
    clip-path: inset(0 0 0 0);
}
.sub_thumb {
    width:65vw;
    margin:-1.5vw auto 0;
    display: flex;
    justify-content: flex-end;
    position: relative;
    user-select: none;
    pointer-events: none;
}
.sub_thumb .thumb1 {
    width:85%;
}
.sub_thumb .thumb2 {
    position: absolute;
    top:2vw;
    left:0;
    width:17vw;
}
.connect_subtitle {
    width:100%;
    font-size:2.5vw;
    font-weight: 600;
    color:var(--color-1);
    text-align: center;
    margin: 4vw auto 0;
}

/*sec3*/
.sec3 {
    width:75vw;
    margin:0 auto;
    position: relative;
}
.rest_api_wrap {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    padding:6vw 0 0 0;
}
.shopify_blc.subtext2 {
    margin:0;
    width: 100%;
    padding:0;
}
.dammy_shopify_page {
    display: flex;
    justify-content: flex-end;
    position: relative;
}
.dammy_shopify_page .dammy_txt {
    width:65%;
    user-select: none;
    pointer-events: none;
}
.dammy_shopify_page .dammy_game {
    position: absolute;
    top:8vw;
    left:0;
    z-index: 3;
    width:60%;
    user-select: none;
    pointer-events: none;
}
.dammy_shopify_page .shopify_logo {
    position: absolute;
    bottom: -5vw;
    right:0;
    width:12vw;
    user-select: none;
    pointer-events: none;
}
.connect_diagram {
    padding:3vw 0 0 0;
}
.tagwrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width:26vw;
    padding:2rem 0;
    border-radius: 5rem;
    color:var(--color-2);
}
.shopify_tag {
    margin:0 0 0 16vw;
    background:var(--color-1);
}
.wp_tag {
    background:var(--color-4);
}
.tagwrap .tag_icon {
    width:2.2vw;
}
.tagwrap .tag {
    font-size:2vw;
    font-weight: 600;
    padding:0 0 0 1.5rem;
}
.connect_rest_api {
    width:100%;
    height:15vw;
    position: relative;
}
.connect_rest_api .connect_line {
    width:4px;
    height:0%;
    background:#FFF;
    margin: 0 0 0 30vw;
    position: relative;
}
.connect_rest_api .connect_line::before {
    content:'';
    position: absolute;
    top:-0.6vw;
    left:50%;
    transform: translateX(-50%);
    width:1.2vw;
    height:1.2vw;
    background: #FFF;
    border-radius: 50%;
}
.connect_rest_api .connect_line::after {
    content:'';
    position: absolute;
    bottom:-0.6vw;
    left:50%;
    transform: translateX(-50%);
    width:1.2vw;
    height:1.2vw;
    background: #FFF;
    border-radius: 50%;
}
.connect_rest_api .shopify_colllection {
    position: absolute;
    top:3vw;
    left:34vw;
    width:40vw;
    font-size: 1.8vw;
    font-weight: 600;
    line-height: 1.5em;
    color:var(--color-1);
}
.authorication {
    position: absolute;
    top:50%;
    left:0;
    transform: translateY(-50%);
    width:26vw;
    background: #FFF;
    padding:1.2vw;
    display: grid;
    grid-template-columns: 3.5vw 1fr;
    align-items: center;
    gap:1.5vw;
    color:var(--color-2);
    border-radius: 0.5rem;
}
.authorication .icon {
    display: block;
    width:3.5vw;
}
.authorication .txt {
    display: block;
    font-size:1.4vw;
    font-weight: 600;
    line-height: 1.2em;
}
.authorication::after {
    content:'';
    position: absolute;
    top:50%;
    right:-1.4vw;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 0.6vw solid transparent;
    border-bottom: 0.6vw solid transparent;
    border-left: 1.5vw solid #FFF;
    border-right: 0;
}
.wp_layout {
    display: grid;
    grid-template-columns: 16vw 26vw 1fr;
    align-items: center;
    gap:3vw;
}
.wp_layout .wp_logo {
    width:16vw;
    user-select: none;
    pointer-events: none;
}
.wp_layout .wp_cat {
    font-size:1.8vw;
    font-weight: 600;
    color:var(--color-4)
}
.connect_post {
    display: grid;
    grid-template-columns: 45fr 4px 55fr;
}
.connect_post .left {
    padding:3vw 0 0 0;
    position: relative;
}
.connect_post .left .connect_line3 {
    display: flex;
    justify-content: flex-end;
}
.connect_post .left .dammypost1 {
    padding:0 5.5vw 0 0;
    user-select: none;
    pointer-events: none;
}
.connect_post .left .lineSvg2 {
    width:60%;
}
.shopify_blc.subtext3 {
    margin:0;
    width: 90%;
    padding:3vw 0 0 0; 
}
.connect_post .right {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap:1.6vw;
    padding:6vw 0 0 0;
    user-select: none;
    pointer-events: none;
}
.connect_post .right .dammypost2,
.connect_post .right .dammypost3,
.connect_post .right .dammypost4 {
    display: grid;
    grid-template-columns: 5.5vw 1fr;
    align-items: center;
}
.connect_post .right .connect_line4,
.connect_post .right .connect_line5,
.connect_post .right .connect_line6 {
    width:0%;
    height:4px;
    background: #FFF;
}
.connect_post .connect_line2 {
    width:4px;
    height:0%;
    background:#FFF;
    position: relative;
}
.connect_post .connect_line2::before {
    content:'';
    position: absolute;
    top:-0.6vw;
    left:50%;
    transform: translateX(-50%);
    width:1.2vw;
    height:1.2vw;
    background: #FFF;
    border-radius: 50%;
}
.dammypostblc {
    width: fit-content;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size:2vw;
    background:var(--color-7);
    color:#FFF;
    padding:1vw 3vw;
    border-radius: 1vw;
    font-weight: 600;
}
.dammypostblc .icon {
    width:2.4vw
}
.dammypostblc .label {
    margin:0 0 0 1.2vw;
}

/*sec4*/
.sec4 {
    width:75vw;
    margin:0 auto;
    position: relative;
    padding:8vw 0 0 0;
}
.sec4_title {
    display: block;
    text-align: center;
    font-size: 3.4vw;
    font-weight: 700;
    line-height: 1.3em;
    color:var(--color-1);
}
.sec4_summery {
    width: 50vw;
    font-size: 1.5vw;
    line-height: 1.5em;
    margin: 0 auto;
    color: var(--color-1);
    padding: 2vw 0;
}
.sec4_summery2 {
    width: 50vw;
    font-size: 1.05vw;
    line-height: 1.5em;
    margin: 0 auto;
    color: #FFF;
    padding: 0 0 2vw;
}
.comparison_list {
    width: 50vw;
    margin: 0 auto;
}
.comparison_list li {
    position: relative;
    font-size:1.5vw;
    padding:1vw 0 1vw 3vw;
    color:#FFF;
}
.comparison_list li.is-negative::before {
    content: '×';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2vw;
    height: 2vw;
    background: var(--color-5);
    color: #FFF;
    font-size: 1.4vw;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.comparison_list li.is-positive::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2vw;
    height: 2vw;
    background: url(../img/chevron2.svg) no-repeat center center;
    background-size: 2vw auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*sec5*/
.sec5 {
    width:75vw;
    margin:0 auto;
    position: relative;
    padding:8vw 0 0 0;
}
.sec5_inner {
    display: grid;
    grid-template-columns: 35fr 65fr;
    align-items: center;
    gap:6vw;
}
.sec5_list {
    padding:3vw 0 0 0;
    font-size: 1.5vw;
}
.sec5_title {
    font-size: 3.4vw;
    font-weight: 700;
}
.sec5_list li {
    position: relative;
    padding:1vw 0 1vw 3vw;
}
.sec5_list li::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 2vw;
    height: 2vw;
    background: url(../img/chevron2.svg) no-repeat center center;
    background-size: 2vw auto;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*sec6*/
.sec6 {
    width:75vw;
    margin:0 auto;
    position: relative;
    padding:8vw 0 0 0;
}
.sec6_inner .faq {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap:4vw;
    margin:3vw 0 0 0;
}
.sec6_inner .faq .question {
    display: block;
    font-size: 1.15vw;
    font-weight: bold;
    line-height: 1.5em;
    padding:0 0 1vw 2vw;
    border-bottom:1px solid var(--color-1);
    position: relative;
}
.sec6_inner .faq .question::before {
    content:'Q';
    position: absolute;
    top:0;
    left:0;
    font-family: 'Satoshi', sans-serif;
    font-weight: bold;
    color:var(--color-1);
}
.sec6_inner .faq .answer {
    display: block;
    font-size: 1.15vw;
    line-height: 1.5em;
    padding:1vw 0 1vw 2vw;
    color: #FFF;
    position: relative;
}
.sec6_inner .faq .answer::before {
    content:'A';
    position: absolute;
    top:1vw;
    left:0;
    font-family: 'Satoshi', sans-serif;
    font-weight: bold;
    color:#FFF;
}

/*sec7*/
.sec7 {
    width:75vw;
    margin:0 auto;
    position: relative;
    padding:8vw 0 0 0;
}
.sec7_inner {
    width:55%;
}
.sec7 h2 {
    padding: 0 0 2vw 0;
}
.sec7 p {
    font-size:1.1vw;
    line-height: 1.5em;
    color:#FFF;
}

/*sec8*/
.sec8 {
    width:75vw;
    margin:0 auto;
    position: relative;
    padding:8vw 0;
}
.sec8_summery {
    width: 100%;
    font-size: 1.5vw;
    line-height: 1.5em;
    margin: 0 auto;
    text-align: center;
    color: var(--color-1);
    padding: 2vw 0 4vw;
    
}
.sec8_offer {
    width:50vw;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: start;
    justify-content: center;
    gap:6vw;
    margin:0 auto;
}
.wp_offer,
.shopify_offer {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
}
.sec8_offer .offer_logo img {
    width:auto;
    height:3.5vw;
    margin:0 auto;
}
.sec8_offer .offer_name {
    font-size:1.2vw;
    color:#FFF;
    padding:2.5vw 0;
    text-align: center;
}
.sec8_offer a {
    width:100%;
    border-radius: 0.5vw;
    padding:1.5vw 0;
    font-size:1.3vw;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-2);
    border: 1px solid var(--color-2);
    position: relative;
    transition: background .4s ease, color .4s ease, border .4s ease;
}
.sec8_offer a.offer_plugin {
    background: var(--color-4);
}
.sec8_offer a.offer_app {
    background: var(--color-1);
}
.sec8_offer a:hover {
    background: var(--color-2);
}
.sec8_offer a.offer_plugin:hover {
    color:var(--color-4);
    border: 1px solid var(--color-4);
}
.sec8_offer a.offer_app:hover {
    color:var(--color-1);
    border: 1px solid var(--color-1);
}
.sec8_offer a .icon {
    position: absolute;
    top:50%;
    right:1.5vw;
    width:1.75vw;
    transform: translateY(-50%);
}
.copyright {
    text-align: center;
    font-size: 1.1vw;
    color:#FFF;
    padding:0 0 6vw 0;
}
.copyright a {
    color:#FFF;
}