@charset "utf-8";
/* CSS Document */
#main_visual.for_shopify {
    height: 430px;
    background: linear-gradient(to right bottom, #194375, #000);
    background-position: center;
    background-size: 100%;
    position: relative;
    text-align: center;
}
#main_visual .inner {
    margin: 0 auto;
    padding: 0;
    max-width: 1200px;
    width: 100%;
}
.bgimage_for_shopify {
    background-image: linear-gradient(90deg, #061028 30%, rgb(11 27 68 / 60%) 70%, rgba(15, 37, 96, 80%) 100%), url("../img/shopify_cpss_main.jpg");
    background-position: center;
    background-size: cover;
    height: 60px;
}
.main_catch {
    display: block;
    font-size: 3.6em;
    color: #fff;
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: 2px;
}
#contents h2 {
    font-size: 3.2em;
}
#main {
    width: 100%;
    background: linear-gradient(to right, #3b434b, #fff, #3b434b);
}
.shopify_section {
    display: block;
    margin: 30px auto;
    width: 70%;
    border-radius: 16px;
    padding-bottom: 30px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.shopify_section_blue {
    display: block;
    margin: 30px auto;
    width: 70%;
    border: 1px solid;
    border-radius: 16px;
    background-color: #0e2257;
    padding-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.flow-container {
    display: flex;
    width: 90%;
    align-items: center;
    margin: 0 auto;
    gap: 16px;
    font-family: sans-serif;
    color: #111;
}
.box-left {
    background-color: #f6f6f6;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    font-size: 16px;
    line-height: 1.5;
    width: 49%;
    height: 100%;
}
.arrow-chevron {
    width: 2%;
    height: 40px;
    background-color: #bde4c5; /* 矢印の緑色 */
    /* 左が凹み、右が尖った矢印の形を作ります */
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    flex-shrink: 0;
}
.box-right {
    background-color: #e7f6ea;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    font-size: 16px;
    line-height: 1.5;
    width: 49%;
    height: 100%;
}
.shopify_h3 {
    width: 90%;
    font-size: 2em;
    border-bottom: 1px solid;
    padding: 0.5%;
    margin: 10px auto 20px;
}
.shopify_wrap {
    margin-bottom: 30px;
}
.shopify_kadai {
    display: block;
    width: 15%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #707070;
    color: #fff;
    letter-spacing: 2px;
}
.shopify_kaiketu {
    display: block;
    width: 15%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #39AC50;
    color: #fff;
    letter-spacing: 2px;
}
.shopify_crm_ul {
    display: block;
    justify-content: center;
}
.shopify_crm_li {
    list-style-position: inside;
    width: 90%;
    margin: 0 auto;
    font-size: 1.5em;
    line-height: 3;
    border-bottom: 1px solid;
}
.shopify_image img {
    margin: 30px auto;
    text-align: center;
    width: 94%;
    border: 2px solid #fff;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
.shopify_image2 img {
    margin: 30px auto -20px;
    text-align: center;
}
.shopify_merit_ol {
    display: flex;
    gap: 20px;
    justify-content: center;
    list-style-position: inside;
}
.shopify_merit_li {
    width: 20%;
    padding: 1%;
    font-size: 1.2em;
    line-height: 1.5;
    border-radius: 10px;
    background-color: #aed6b0;
}
.shopify_merit_li2 {
    width: 27%;
    padding: 1%;
    font-size: 1.2em;
    line-height: 1.5;
    border-radius: 10px;
    background-color: #5f81ac;
    color: #fff;
}
ol {
    padding-inline-start: 0px;
}
.shopify_text {
    width: 90%;
    text-align: left;
    margin: 0 auto 20px;
    font-size: 1.2em;
    line-height: 1.5;
}
.shopify_text2 {
    width: 90%;
    text-align: center;
    margin: 0 auto 20px;
    font-size: 1.4em;
    line-height: 1.5;
}
.main_catch_sub {
    display: block;
    font-size: 0.8em;
    margin-top: 30px;
}
.main_catch_annotation {
    display: block;
    width: 70%;
    margin: 30px auto 0;
    line-height: 1.3;
    padding: 1.4%;
    font-size: 1.2em;
    background-color: #FF0000;
    color: #fff;
}
.shopify_kadai_ul {
    list-style-position: inside;
}
.shopify_kadai_li {
    margin-bottom: 10px;
}
.shopify_kaiketu_ul {
    list-style-position: inside;
}
.shopify_kaiketu_li {
    margin-bottom: 10px;
}
.shopify_button {
    display: block;
    border: 1px solid;
    width: 48%;
    font-size: 1.5em;
    padding: 2%;
    margin: 0 auto;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    background-color: #e1ff7c;
}
.shopify_button:hover {
    opacity: 0.9;
}
.shopify_merit_ol li::marker {
font-size: 2em;
font-weight: bold;
color: #ff9800;
}
.background_red {
    background-color: red;
}
.oidc_div {
    border: 2px solid;
    width: 90%;
    margin: 0 auto;
    padding: 2%;
}
.oidc_title {
    font-size: 1.3em;
    color: #2D806C;
    font-weight: bold;
}
.oidc_text {
    font-size: 1.4em;
    width: 80%;
    margin: 0 auto;
    padding: 1%;
    background-color: #D0EBDD;
    color: #2C7F6B;
    font-weight: bold;
}
.note {
    display: block;
    margin: 0 auto;
    background-color: #fff;
    text-align: center;
    color: #FF0000;
    width: 20%;
    padding: 0.2%;
    font-weight: bold;
    border: 1px solid;
    margin-bottom: 10px;
    border-radius: 30px;
}
.main_catch_sub2 {
    display: block;
    color: #fff;
    background-color: #214b7d;
    font-size: 1.4em;
    width: 50%;
    font-weight: bold;
    margin: 20px auto 0;
    border-radius: 30px;
    padding: 0.8%;
}
.main_image img {
    display: block;
    width: 14%!important;
    margin: 70px auto 40px;
    box-shadow: none;
    border: none;
}
.shopify_assignment_ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
    gap: 20px;
}
.shopify_assignment_li {
    border: 1px solid;
    width: 30%;
    padding: 1%;
    font-size: 1.2em;
}
.shopify_assignment_li_title {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
}

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

.main_catch_annotation {
    display: block;
    width: 100%;
    margin: 30px auto 0;
    line-height: 1.3;
    padding: 4%;
    font-size: 1.2em;
    background-color: #FF0000;
    color: #fff;
}
.shopify_section {
    display: block;
    margin: 30px auto;
    width: 95%;
    border-radius: 16px;
    padding-bottom: 30px;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
#contents h2 {
    font-size: 2.2em;
}
.shopify_section_blue {
    display: block;
    margin: 30px auto;
    width: 95%;
    border: 1px solid;
    border-radius: 16px;
    background-color: #0e2257;
    padding-bottom: 30px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.shopify_merit_ol {
    display: block;
    gap: 20px;
    justify-content: center;
    list-style-position: inside;
}
.shopify_merit_li {
    width: 94%;
    padding: 3%;
    font-size: 1.2em;
    line-height: 1.5;
    border-radius: 10px;
    margin: 10px auto;
    background-color: #aed6b0;
}
.shopify_merit_li2 {
    width: 94%;
    padding: 3%;
    font-size: 1.2em;
    line-height: 1.5;
    border-radius: 10px;
    margin: 10px auto;
    background-color: #5f81ac;
    color: #fff;
}
.shopify_merit_ol li::marker {
font-size: 1.2em;
font-weight: bold;
color: #ff9800;
}
.shopify_image2 {
    margin: 30px auto;
    text-align: center;
}
.shopify_crm_li {
    list-style-position: inside;
    width: 90%;
    margin: 0 auto;
    font-size: 1.2em;
    line-height: 1.3em;
    border-bottom: 1px solid;
    padding: 3%;
}
.shopify_h3 {
    width: 90%;
    font-size: 1.5em;
    border-bottom: 1px solid;
    padding: 0.5%;
    margin: 10px auto 20px;
}
.flow-container {
    display: block;
    width: 90%;
    align-items: center;
    margin: 0 auto;
    gap: 16px;
    font-family: sans-serif;
    color: #111;
}
.box-left {
    background-color: #f6f6f6;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    height: 100%;
}
.box-right {
    background-color: #e7f6ea;
    border: 2px solid #e0e0e0;
    border-radius: 20px;
    padding: 24px;
    font-size: 16px;
    line-height: 1.5;
    width: 100%;
    height: 100%;
}
.shopify_kadai {
    display: block;
    width: 25%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #707070;
    color: #fff;
    letter-spacing: 2px;
}
.shopify_kaiketu {
    display: block;
    width: 25%;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
    background-color: #39AC50;
    color: #fff;
    letter-spacing: 2px;
}
.arrow-chevron {
    width: 6%;
    height: 40px;
    background-color: #bde4c5;
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
    margin: 0 auto;
    transform: rotate(90deg);
    flex-shrink: 0;
}
.shopify_button {
    display: block;
    border: 1px solid;
    width: 90%;
    font-size: 1.5em;
    padding: 4%;
    margin: 0 auto;
    text-align: center;
    border-radius: 6px;
    font-weight: bold;
    background-color: #e1ff7c;
}
.shopify_text2 {
    width: 90%;
    text-align: center;
    margin: 0 auto 20px;
    font-size: 1.2em;
    line-height: 1.5;
}
#contents .contactlink_inv h2 {
    font-size: 1.4em;
}
.oidc_div {
    border: 2px solid;
    width: 90%;
    margin: 0 auto;
    padding: 3%;
}
.oidc_text {
    font-size: 1em;
    width: 100%;
    margin: 0 auto;
    padding: 4%;
    background-color: #D0EBDD;
    color: #2C7F6B;
    font-weight: bold;
}
.note {
    display: block;
    margin: 0 auto;
    background-color: #fff;
    color: #FF0000;
    text-align: center;
    width: 40%;
    padding: 0.4%;
    font-weight: bold;
    border: 1px solid;
    margin-bottom: 10px;
    border-radius: 30px;
}
}
/* ----- セクション全体 ----- */
.challenges-section {
    background-image: url("../img/shopify_bg.png");
    padding: 5rem 0;
    position: relative;
    z-index: 10;
    width: 100%;
    margin: 10px auto 0;
    background-repeat: no-repeat;
    background-color: #fff;
}
.challenges-section2 {
    background: linear-gradient(to right bottom, #526c8f, #2e415d);
    padding: 5rem 0;
    width: 100%;
    margin: 10px auto 0;
}
.container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
.container {
    padding: 0 1.5rem;
}
}

@media (min-width: 1024px) {
.container {
    padding: 0 2rem;
}
}
/* ----- ヘッダー部分 ----- */
.section-header {
    text-align: center;
    margin: 0 auto 2rem auto;
    position: relative;
}
.section-title {
    font-weight: 800;
    margin-top: 0;
    margin-bottom: 1.5rem;
    letter-spacing: 2px;
}

@media (min-width: 768px) {
.section-title {
    font-size: 3rem;
}
}
.text-gradient {
    background-image: linear-gradient(to right, #f86654, #696dd0, #34a06f);
    -webkit-background-clip: text;
    color: transparent;
}
.section-desc {
    font-size: 1.125rem;
    color: #475569;
    font-weight: 500;
    margin: 0;
}
/* 改行のレスポンシブ制御 */
.br-sp-only {
    display: inline;
}

@media (min-width: 640px) {
.br-sp-only {
    display: none;
}
}
/* ----- カードグリッド ----- */
.cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
.cards-grid {
    grid-template-columns: repeat(3, 1fr);
}
}
/* ----- 各カード ----- */
.card-wrapper {
    position: relative;
    height: 100%;
    cursor: pointer;
}
.card {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 1.5rem;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.07);
    transition: all 0.5s ease;
    box-sizing: border-box;
}
.card-wrapper:hover .card {
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.15);
    transform: translateY(-0.5rem);
}
/* ----- カード内アイコン ----- */
.card-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}
.card-wrapper:nth-child(1):hover .card-icon {
    transform: rotate(6deg);
}
.card-wrapper:nth-child(2):hover .card-icon {
    transform: rotate(6deg);
}
.card-wrapper:nth-child(3):hover .card-icon {
    transform: rotate(-6deg);
}
.icon-blue {
    background-image: linear-gradient(to bottom right, #f65754, #fc8a53);
}
.icon-purple {
    background-image: linear-gradient(to bottom right, #4741ca, #6a78c4);
}
.icon-rose {
    background-image: linear-gradient(to bottom right, #359f6e, #5cbc8e);
}
/* ----- カード内テキスト ----- */
.card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.25;
}
.card-text {
    color: #475569;
    line-height: 1.625;
    font-weight: 500;
    text-align: left;
    margin: 0;
}
.shopify_solution_ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    list-style: none;
}
.shopify_solution_li {
    width: 32%;
    padding: 1.5%;
    border-radius: 20px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(to right, #2560aa, #1da3c0);
}
.shopify_solution_li2 {
    width: 32%;
    padding: 1.5%;
    border-radius: 20px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(to right, #74369b, #a0357a);
}
.shopify_solution_li3 {
    width: 32%;
    padding: 1.5%;
    border-radius: 20px;
    color: #fff;
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    background: linear-gradient(to right, #a6333d, #cc7134);
}
.section-title2 {
    font-size: 2.8em!important;
    font-weight: bold;
    padding: 1%!important;
    margin: 100px 0 15px;
    border-radius: 0px!important;
    letter-spacing: 4px;
    border-top: 1px solid;
}
.text_small {
    display: block;
    font-size: 0.7em;
}
.why_ol {
    display: flex;
    gap: 20px;
    justify-content: center;
    list-style: none;
}
.why_li {
    font-size: 1.6em;
    line-height: 1.3em;
    list-style-position: inside;
    width: 15%;
    padding: 2%;
    text-align: left;
    border-radius: 20px;
    background-color: #fff;
}
.why_title {
    display: block;
    font-weight: bold;
    border-width: 0 0 5px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #fff, #F86754, #fff) 1;
    margin-bottom: 10px;
}
.why_title2 {
    display: block;
    font-weight: bold;
    border-width: 0 0 5px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #fff, #4E4DC9, #fff) 1;
    margin-bottom: 10px;
}
.why_title3 {
    display: block;
    font-weight: bold;
    border-width: 0 0 5px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #fff, #5095C8, #fff) 1;
    margin-bottom: 10px;
}
.why_title4 {
    display: block;
    font-weight: bold;
    border-width: 0 0 5px 0;
    border-style: solid;
    border-image: linear-gradient(to right, #fff, #40A777, #fff) 1;
    margin-bottom: 10px;
}
.annotation_text {
    margin-top: 20px;
    color: #fff;
}
.zoom-image {
    transition: transform 0.3s ease;
}
.zoom-image:hover {
    transform: scale(1.03);
}
.section-title_sub {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 20px;
}
.why_image img {
    display: block;
    width: 8%;
    border: 0px solid;
    border-radius: 0;
    margin: 0 auto -50px;
}
.font_20 {
    font-size: 20px;
}
.no_one {
    display: block;
    text-align: center;
    width: 4em;
    height: 2.2em;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background-color: #F86754;
    color: #fff;
    border-radius: 50px;
}
.no_two {
    display: block;
    text-align: center;
    width: 4em;
    height: 2.2em;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background-color: #4E4DC9;
    color: #fff;
    border-radius: 50px;
}
.no_three {
    display: block;
    text-align: center;
    width: 4em;
    height: 2.2em;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background-color: #5095C8;
    color: #fff;
    border-radius: 50px;
}
.no_four {
    display: block;
    text-align: center;
    width: 4em;
    height: 2.2em;
    margin: 0 auto 10px;
    display: grid;
    place-items: center;
    background-color: #40A777;
    color: #fff;
    border-radius: 50px;
}
.shopify_plus {
    color: inherit;
}

@media screen and (max-width: 680px) {
	.main_image img {
    display: block;
    width: 34% !important;
    margin: 40px auto 0px;
    box-shadow: none;
    border: none;
}
	.main_catch {
    display: block;
    font-size: 2em;
    line-height: 1.2em;
    margin-top: 0px;
    color: #fff;
    font-weight: bold;
}
	.main_catch_sub {
    display: block;
    font-size: 0.6em;
    margin-top: 0px;
}
	.main_catch_sub2 {
    display: block;
    color: #fff;
    background-color: #214b7d;
    font-size: 1em;
    width: 96%;
    font-weight: bold;
    margin: 0 auto;
    border-radius: 50px;
    padding: 3% 6%;
}
	.section-title2 {
    font-size: 1.8em !important;
    font-weight: bold;
    padding: 1% !important;
    margin: 100px 0 15px;
    border-radius: 0px !important;
    letter-spacing: 4px;
    border-top: 1px solid;
}
	.text_small {
    display: block;
    font-size: 0.7em;
    line-height: 1.3em;
}
	img {
    width: 100%;
}
	.shopify_image {
    margin: 0px auto;
    text-align: center;
    width: 100%;
    border: 2px solid #fff;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
	.why_image img {
    display: block;
    width: 38%;
    border: 0px solid;
    border-radius: 0;
    margin: 0 auto -50px;
}
	.font_20 {
    display: block;
    padding: 5%;
    font-size: 20px;
}
	.why_ol {
    display: block;
    gap: 20px;
    justify-content: center;
    list-style: none;
}
	.why_li {
    font-size: 1.3em;
    line-height: 1.3em;
    list-style-position: inside;
    width: 95%;
    padding: 3%;
    text-align: center;
    border-radius: 20px;
    margin: 0 auto 10px;
    background-color: #fff;
}
	.shopify_image img {
    margin: 0px auto;
    text-align: center;
    width: 100%;
    border: 2px solid #fff;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
}