@charset "utf-8";



.u-roundbg { max-width: 135rem; margin: 0 0 0 2rem;   }
.u-roundbg > .round-bg { padding: 6rem 0; border-radius: 2rem 0 0 2rem; }
.u-roundbg._bk > .round-bg { background: var(--cl-txt) url(/cms/wp-content/themes/soop/assets/images/home/sec03_bg.jpg) no-repeat center top / contain; color: var(--cl-wh); }
.u-roundbg._wh > .round-bg { background-color: var(--cl-wh); }
.u-roundbg .u-wrapblck:last-child { padding-bottom: 0; }

@media print, screen and (min-width: 640px) {
.u-roundbg { width: 90%; margin: 0 auto; }
.u-roundbg > .round-bg { position: relative; padding: 16rem 0; border-radius: 10rem 0 0 10rem;   }
.u-roundbg > .round-bg::before { position: absolute; top: 0; right: 0; content: ""; display: block; width: 50%; height: 100%; margin-right: calc(((100vw - 100%) /2 ) *-1); z-index: -1;   }
.u-roundbg._bk > .round-bg::before { background-color: var(--cl-txt);   }
.u-roundbg._wh > .round-bg::before { background-color: var(--cl-wh);   }

}




/* home
----------------------------------------------------------------------------------------------------------------------------*/

.page-home .header { background-color: transparent;}
.page-home .header._scrolled { background-color: var(--cl-wh);}
.page-home .header-logo { display: grid; align-items: center; width: 22.8rem; height: 100%; padding: 0 1.5rem 0 1rem; background-color: var(--cl-wh); clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);}

@media print, screen and (min-width: 640px) {
.page-home .header-logo { width: 32.4rem; padding: 0 5rem 0 3rem; }
.page-home .gnav-item-link { color: var(--cl-wh); }
.page-home ._scrolled .gnav-item-link { color: var(--cl-txt); }
.page-home .gnav-item-link:hover { color: var(--cl-key); opacity: 1; }

}



/* kv */
.page-home .kv { position: relative; }
.page-home .kv-bg { position: relative; height: 0; padding-bottom: 100vh; padding-bottom: 100dvh; }
.page-home .kv-bg::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); mix-blend-mode: multiply; z-index: 2;  }
.page-home .kv-bg::after { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url(/cms/wp-content/themes/soop/assets/images/common/bg_dot.png) repeat 100%; z-index: 2; }
.page-home .kv-bg > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.page-home .kv-catch { position: absolute; bottom: 10rem; left: 50%; transform: translate(-50%,0); z-index: 10; }
.page-home .kv-catch > * { color: var(--cl-wh); }
.page-home .kv-catch .c-blocktitle-en::before { background-color: var(--cl-wh);}
.page-home .kv-catch .c-blocktitle-jp { font-size: 4rem; line-height: 1.4;}

@media print, screen and (min-width: 640px) {
.page-home .kv {  }
.page-home .kv-bg { height: 90rem; }
.page-home .kv-catch { bottom: 17rem; }
.page-home .kv-catch .c-blocktitle-jp { font-size: 8rem;}

}

/* kv - pickup */
.page-home .pickup { position: absolute; bottom: 0; right: 0; width: 95%; z-index: 10; }
.page-home .pickup .c-newslist { position: relative; padding: 1.5rem 0 1.5rem 3rem; border-bottom: none; background-color: var(--cl-wh); overflow: hidden;  clip-path: polygon(100% 0, 100% 100%, 0 100%, 5% 0);}
.page-home .pickup .c-newslist::after { position: absolute; top: 50%; right: 2rem; transform: translate(0,-50%); content: ""; display: block; width: 0.8em; height: 0.8em; mask: url(/cms/wp-content/themes/soop/assets/images/common/ico_ar.svg) no-repeat center center / contain; background-color: var(--cl-txt);}
.page-home .pickup .c-newslist-title { -webkit-line-clamp: 1; padding-right: 4rem;}
@media print, screen and (min-width: 640px) {
.page-home .pickup { bottom: 0; left: 50%; transform: translate(-50%,0);  }
.page-home .pickup::before { position: absolute; top: 0; right: calc(((100vw - 100%) /2 ) *-1); content: ""; display: block; width: 50%; height: 100%; background-color: var(--cl-wh);  }
.page-home .pickup .c-newslist { max-width: 68.6rem; margin: 0 0 0 auto; padding: 1.5rem 0 1.5rem 5rem; }
.page-home .pickup .c-newslist:hover { opacity: 1;}
.page-home .pickup .c-newslist > * { transition: 0.3s;}
.page-home .pickup .c-newslist:hover > * { opacity: 0.6;}
}



/* floating */
.bn-contact { position: fixed; top: 10rem; right: 0; z-index: 30;}
@media print, screen and (min-width: 640px) {
.bn-contact { top: 14rem;}
}


/* lead */
.page-home .u-wrapsect.lead { background: url(/cms/wp-content/themes/soop/assets/images/home/sec01_bg.jpg) no-repeat center bottom / contain;}
@media print, screen and (min-width: 640px) {
.page-home .u-wrapsect.lead { padding-bottom: 28rem;}

}


/* strengths */
.page-home .u-wrapsect.strengths {}
.page-home .strengths-list { display: grid; gap: 1rem;  }
.page-home .strengths-list li  { position: relative; padding: 6rem 2rem 2rem 2rem; background: no-repeat center center / cover; clip-path: polygon(5% 0%, 100% 0, 100% 90%, 95% 100%, 0 100%, 0% 10%); color: var(--cl-wh); font-weight: var(--ff-base-bold);}
.page-home .strengths-list li:nth-child(1)  { background-image: url(/cms/wp-content/themes/soop/assets/images/home/sec02_p01.jpg);}
.page-home .strengths-list li:nth-child(2)  { background-image: url(/cms/wp-content/themes/soop/assets/images/home/sec02_p02.jpg);}
.page-home .strengths-list li:nth-child(3)  { background-image: url(/cms/wp-content/themes/soop/assets/images/home/sec02_p03.jpg);}
.page-home .strengths-list li::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6);}
.page-home .strengths-list li::after { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url(/cms/wp-content/themes/soop/assets/images/common/bg_dot.png) repeat 100%; z-index: 2; }
.page-home .strengths-list li span { position: relative; z-index: 20;}
.page-home .strengths-list li span.u-ff01 { display: inline-block; margin-bottom: 0.5rem; color: var(--cl-key); border-bottom: var(--cl-key) 2px solid; font-size: 2rem; font-weight: var(--ff01f-light);}

@media print, screen and (min-width: 640px) {
.page-home .u-wrapsect.strengths { margin-top: -16rem; padding-top: 0;}
.page-home .strengths-list { grid-template-columns: repeat(3,1fr);  }
.page-home .strengths-list li  { height: 56rem; padding: 40rem 3rem 3rem 3rem ; clip-path: polygon(10% 0%, 100% 0, 100% 92%, 90% 100%, 0 100%, 0% 8%);}
.page-home .strengths-list li span { font-size: 2rem; line-height: 1.4;}
.page-home .strengths-list li span.u-ff01 { margin-bottom: 1rem; padding-bottom: 1rem; font-size: 5rem; line-height: 1;}
.page-home .strengths-list li:nth-child(2)  { margin-top: 6rem;}
.page-home .strengths-list li:nth-child(3)  { margin-top: 12rem;}
}






/* EDI（Electronic Data Interchange）
--------------------------------------------------------------*/

.page-home .edi { position: relative; z-index: 2;}

/* 導入のメリット */
.page-home .merit-list { margin-bottom: 2rem;}
.page-home .merit-item { position: relative; padding-top: 1.6rem;}
.page-home .merit-item-num { position: absolute; top: 0; left: 0; right: 0; text-align: center; font-size: 3.2rem; line-height: 1; z-index: 10; font-weight: var(--ff01f-light); }
.page-home .merit-item-bg { padding: 3rem 2rem 2rem 2rem; background-color: var(--cl-wh); color: var(--cl-txt); clip-path: polygon(12% 0%, 100% 0, 100% 100%, 100% 100%, 0 100%, 0% 22%);}
.page-home .merit-item-title { margin-bottom: 0.5rem; font-size: 1.8rem; text-align: center;}
.page-home .merit-item-pic { clip-path: polygon(0% 0%, 100% 0, 100% 78%, 88% 100%, 0 100%, 0% 0%);}

@media print, screen and (min-width: 640px) {
.page-home .merit-list { margin-bottom: 4rem;}
.page-home .merit-item { padding-top: 2.5rem;}
.page-home .merit-item-num { font-size: 5rem; }
.page-home .merit-item-bg { padding: 3rem 2rem; }
.page-home .merit-item-title { font-size: 2.4rem; }
.page-home .merit-item-title + p { line-height: 1.6; }

}


/* 導入時の検討すべき内容 */
.page-home .consider-list { }
.page-home .consider-item { padding: 2rem; background-color: var(--cl-wh); border-radius: 2rem 0 2rem 0; color: var(--cl-txt); text-align: center;}
.page-home .consider-item-num { font-size: 3.2rem; text-align: center; border-bottom: var(--cl-key) 2px solid; font-weight: var(--ff01f-light);}
.page-home .consider-item-title { margin: 0.5rem 0; font-size: 1.8rem; text-align: center;}
.page-home .consider-item-title + span { display: block; text-align: left;}

@media print, screen and (min-width: 640px) {
.page-home .consider-list { gap: 1rem;}
.page-home .consider-item-num { font-size: 5rem; }
.page-home .consider-item-title { font-size: 2.4rem;}
.page-home .consider-item-title + span { line-height: 1.6; }
.page-home .consider-item:nth-child(2),
.page-home .consider-item:nth-child(5) { transform: translate(0,3rem); }

}



/* 物流業務のBPR
--------------------------------------------------------------*/

/* 大枠 */
.page-home .bpr { position: relative; margin-top: -10rem; padding-top: 18rem; z-index: 1; background: var(--cl-bg-gr) url(/cms/wp-content/themes/soop/assets/images/home/sec04_bg.jpg) no-repeat center top / cover; }

@media print, screen and (min-width: 640px) {
.page-home .bpr { margin-top: -76.2rem; padding-top: 100rem; }
}


/* 物流業務のBPR（業務フローの再構築） */
.page-home .bpr-list { margin: 2rem 0;}
.page-home .bpr-item { border-left: var(--cl-key) 2px solid; padding: 2rem; background-color: var(--cl-wh); clip-path: polygon(0% 0%, 100% 0, 100% 78%, 88% 100%, 0 100%, 0% 0%);}
.page-home .bpr-item-title { display: grid; grid-template-columns: 6.4rem 1fr; align-items: center; gap: 1rem; margin-bottom: 1rem; font-size: 1.8rem; font-weight: var(--ff-base-bold);}

@media print, screen and (min-width: 640px) {
.page-home .bpr-list { gap: 2rem 1rem; margin: 6rem 0 4rem;}
.page-home .bpr-item { border-left: var(--cl-key) 4px solid; padding: 3rem 2rem; }
.page-home .bpr-item-title { font-size: 2.4rem; }

}



/* 管理業務をスムーズに行う庫内物流のフロー */
.page-home .flow-item { position: relative; margin: 4rem 0 2rem; }
.page-home .flow-item::before { position: absolute; bottom: -2.5%; left: 0; right: 0; margin: 0 auto; content: ""; display: block; width: 2rem; height: 1.2rem; background-color: var(--cl-key); clip-path: polygon(100% 0, 0 0, 50% 100%); }
.page-home .flow-item:last-of-type:before { display: none; }

.page-home .flow-item-title { width: 50%; max-width: 33rem; }
.page-home .flow-item-box { padding: 1rem; background-color: var(--cl-key);}
.page-home .flow-item-box li { position: relative; padding: 1rem; background-color: var(--cl-wh);}
.page-home .flow-item-box-title { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 1rem; font-weight: var(--ff-base-bold);}
.page-home .flow-item-box-title span { font-size: 2.4rem; font-weight: var(--ff01f-light);}
.page-home .flow-item-box li::before { position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; content: ""; display: block; width: 2rem; height: 1.2rem; background-color: var(--cl-wh); clip-path: polygon(100% 0, 0 0, 50% 100%); }
.page-home .flow-item-box li:last-child:before { display: none; }
.page-home .flow-item-box li + li { margin-top: 2rem; }

@media print, screen and (min-width: 640px) {
.page-home .flow-item { margin: 6rem 0 4rem; }
.page-home .flow-item::before { bottom: -7rem; left: 0; right: 0; width: 2.4rem; height: 2rem; }
.page-home .flow-item-title { width: 100%; }
.page-home .flow-item-box { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem 3.6rem; padding: 2rem; }
.page-home .flow-item-box li { padding: 2rem; }
.page-home .flow-item-box li + li { margin-top: 0; }
.page-home .flow-item-box li::before { position: absolute; top: 50%; left: 100%; right: auto; transform: translate(0,-50%); width: 2rem; height: 2.4rem; clip-path: polygon(0 0, 0 100%, 100% 50%); }
.page-home .flow-item-box li:nth-child(3n):before { display: none; }
.page-home .flow-item-box-title { font-size: 1.8rem;}
.page-home .flow-item-box-title span { font-size: 3.6rem;}

}




/* 導入する際の注意点 */
.note-item { margin-bottom: 2rem;}
.note-item + .note-item { margin-top: 4rem;}
.note-item-title { display: grid; grid-template-columns: max-content 1fr; gap: 1rem; align-items: center; margin-bottom: 2rem; font-size: 1.8rem; line-height: 1.4; }
.note-item-title span { display: inline-block; padding-right: 1rem; font-size: 2.4rem; border-right: var(--cl-key) 2px solid; line-height: 0.8; font-weight: var(--ff01f-light);}
.note-item-box { }
.note-item-box + .note-item-box { margin-top: 2rem;}
.note-item-box-title { position: relative; padding: 1rem; background-color: var(--cl-wh); text-align: center; border-radius: 1rem;}
.note-item-box-title + p { padding-top: 0.5rem;}
.note-item-image { margin-top: 2rem;}
.note-item-image a { display: block;}
.note-item-image > * + * { margin-top: 1rem;}

@media print, screen and (min-width: 640px) {
.note-item { margin-bottom: 4rem;}
.note-item + .note-item { margin-top: 6rem;}
.note-item-title { gap: 1.5rem; margin-bottom: 3rem; font-size: 2.4rem; }
.note-item-title span { padding-right: 1.5rem; font-size: 5rem; }
.note-item-box { display: grid; grid-template-columns: 26rem 1fr; gap: 2rem 4rem; align-items: center;}
.note-item-box-title { display: grid; align-items: center; height: 9rem; font-size: 1.8rem;}
.note-item-box-title::before { position: absolute; top: 50%; left: 100%; transform: translate(0,-50%); content: ""; display: block; width: 2rem; height: 2.4rem; background-color: var(--cl-wh); clip-path: polygon(0 0, 0 100%, 100% 50%); }
.note-item-image { grid-column: 1/3; margin-top: 0;}
.note-item-image a { margin-top: 0; position: relative; width: 100%; height: 0; padding-bottom: 80%; background-color: var(--cl-bg-gr); }
.note-item-image a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; }
}



/* 庫内物流を支援するシステムWMS
--------------------------------------------------------------*/

.wms .c-keytitle { }
.wms .c-keytitle + p { margin-top: 1rem;}

.wms .wms-list { margin-top: 2rem;}
.wms .wms-item { padding: 2rem; background-color: var(--cl-bg-gr); clip-path: polygon(12% 0%, 100% 0, 100% 78%, 88% 100%, 0 100%, 0% 22%); text-align: center; }
.wms .wms-item-title { padding-bottom: 0.5rem; color: var(--cl-key); border-bottom: var(--cl-key) 2px solid; display: inline-grid; gap: 1rem; }
.wms .wms-item-title img { margin: 0 auto;}
.wms .wms-item-title + p { margin-top: 1rem; text-align: left;}

@media print, screen and (min-width: 640px) {
.wms .c-keytitle + p { margin-top: 2rem;}
.wms .wms-list { margin-top: 4rem;}
.wms .wms-item { padding: 4rem 2rem; }
.wms .wms-item-title + p { margin-top: 2rem; }

}



/* その他の技術 */
.other-list { margin-top: 4rem; gap: 3rem;}
.other-item { position: relative; }
.other-item-num { position: absolute; top: -2.4rem; left: 2rem; font-size: 3.2rem; z-index: 2; font-weight: var(--ff01f-light);}
.other-item-bg { height: 100%; padding: 2rem; background-color: var(--cl-bg-gr); clip-path: polygon(0% 0%, 100% 0, 100% 78%, 88% 100%, 0 100%, 0% 0%);}
.other-item-title { font-size: 1.8rem;}

@media print, screen and (min-width: 640px) {
.other-list { margin-top: 8rem; gap: 5rem 4rem;}
.other-item-num { top: -2.5rem; font-size: 5rem; line-height: 1;}
.other-item-bg { padding: 4rem 2rem; }
.other-item-title { margin-bottom: 0.5rem; font-size: 2.4rem;}

}


/* まとめ */
.summary-wrap { display: grid; gap: 1rem;}
@media print, screen and (min-width: 640px) {
.summary-wrap { display: flex; gap: 6rem;}
.summary-txt { width: 64%;}
.summary-pic { width: calc(36% + ((100vw - 100%) / 2)); margin-right: calc(((100vw - 100%) / 2)* -1);}

}

.bpr .c-table { overflow-y: scroll; margin-top: 2rem;}
.bpr .c-table table { width: 50rem; }
.bpr .c-table tbody tr > *:nth-child(1) { width: 10%;}
.bpr .c-table tbody tr > *:nth-child(2) { width: 20%; text-align: center;}
.bpr .c-table tbody tr > *:nth-child(3) { width: 70%;}

@media print, screen and (min-width: 640px) {
.bpr .c-table { overflow-y: hidden; margin-top: 4rem;}
.bpr .c-table table { width: 100%;}
.bpr .c-table tbody tr > *:nth-child(1) { width: 15.45%;}
.bpr .c-table tbody tr > *:nth-child(2) { width: 15.45%;}
.bpr .c-table tbody tr > *:nth-child(3) { width: 69.27%;}

}





/* EcRP：EDI対応型ERPソリューション
--------------------------------------------------------------*/

.ecrp {}
.ecrp .u-wrapblck:last-child { padding-bottom: 0; }

/* 主な特徴 */
.feature-item { padding: 2rem; background-color: var(--cl-wh); clip-path: polygon(12% 0%, 100% 0, 100% 94%, 88% 100%, 0 100%, 0% 6%); color: var(--cl-txt); }
.feature-item + .feature-item { margin-top: 2rem; }
.feature-item-num { display: block; font-size: 3.2rem; border-bottom: var(--cl-key) 2px solid; font-weight: var(--ff01f-light);}
.feature-item-title { margin-top: 1rem; font-size: 1.8rem;}

.feature-item-list { margin-top: 1rem;}
.feature-item-list > * { display: grid; grid-template-columns: 1em 1fr; gap: 1rem; align-items: center;}
.feature-item-list > * + * { margin-top: 1rem;}
.feature-item-list > *::before { content: ""; display: block; width: 1em; height: 1em; background: url(/cms/wp-content/themes/soop/assets/images/common/ico_check.svg) no-repeat center center / contain;}
.feature-item-pic { width: 60%; margin: 2rem auto 0;}

@media print, screen and (min-width: 640px) {
.feature-item { display: grid; grid-template-columns: max-content 1fr 23rem; align-items: center; gap: 1rem 4rem; padding: 5rem; clip-path: polygon(4% 0%, 100% 0, 100% 88%, 96% 100%, 0 100%, 0% 11%);}
.feature-item + .feature-item { margin-top: 3rem; }
.feature-item-num { font-size: 5rem; border-bottom: none;}
.feature-item-num + div { padding-left: 4rem; border-left: var(--cl-key) 2px solid;}
.feature-item-title { margin-top: 0; font-size: 2.4rem;}
.feature-item-list { margin-top: 1.5rem;  }
.feature-item-list > * + * { margin-top: 1.5rem;}
.feature-item-pic { width: 100%; margin: 0;}

}



/* 価格 */
.ecrp .c-keytitle { margin-top: 2rem; }
.ecrp .c-table { overflow-y: scroll; margin-top: 2rem; color: var(--cl-txt);}
.ecrp .c-table + p { margin-top: 2rem;}
.ecrp .c-table table { width: 80rem; }
.ecrp .c-table tbody tr > * { text-align: center;}

@media print, screen and (min-width: 640px) {
.ecrp .c-keytitle { margin-top: 6rem; width: 100%; max-width: 50rem; }
.ecrp .c-table { overflow-y: hidden; margin-top: 4rem; }
.ecrp .c-table table { width: 100%; }

}


/* EcRPの導入メリット */
.ecrp .other-item { color: var(--cl-txt); }
.ecrp .other-item-bg { background-color: var(--cl-wh);}



/* 導入事例・お客様の声 */
.case-slider { position: relative; margin-top: -5rem !important;}
.swiper {  }
.swiper-wrapper { padding-top: 6rem;}
.swiper-slide { height: auto; padding: 2rem; color: var(--cl-txt); background-color: var(--cl-wh); clip-path: polygon(0% 0%, 100% 0, 100% 95%, 88% 100%, 0 100%, 0% 0%);}
.swiper .swiper-slide > * { height: 100%; }
.case-title { display: grid; grid-template-columns: 6rem 1fr; align-items: center; gap: 1rem; font-size: 1.8rem;}
.case-title + p { margin-top: 1rem;}
.voice { margin-top: 2rem;}
.voice-title { display: grid; grid-template-columns: 1em 1fr; gap: 0.5rem; align-items: center; font-size: 1.6rem; color: var(--cl-key);}
.voice-title + p { margin-top: 0.5rem;}

.swiper-button-next,
.swiper-button-prev { top: 2.2rem !important; left: auto !important; right: 0 !important; width: 4rem !important; height: 4rem !important;}
.swiper-button-prev { right: 5rem !important;}
.swiper-button-prev:after,
.swiper-button-next:after { content: "" !important; width: 4rem; height: 4rem;  }
.swiper-button-prev:after { background: url(/cms/wp-content/themes/soop/assets/images/common/arr_slider.svg) no-repeat center center / contain; transform: rotate(-180deg); }
.swiper-button-next:after { background: url(/cms/wp-content/themes/soop/assets/images/common/arr_slider.svg) no-repeat center center / contain; }

@media print, screen and (min-width: 640px) {
.swiper { margin-top: -5rem !important; margin-right: calc(((100vw - 100%) / 2)* -1) !important;}
.swiper-slide { max-width: 58rem; padding: 4rem; clip-path: polygon(0% 0%, 100% 0, 100% 95%, 88% 100%, 0 100%, 0% 0%);}

.voice { margin-top: 4rem;}
.voice-title { grid-template-columns: 2.4rem 1fr; gap: 1rem; font-size: 2.4rem; line-height: 1;}
.voice-title + p { margin-top: 1rem;}

}




/* EDI Q&A（wiki）
--------------------------------------------------------------*/
.ym-section { position: relative; }
.ym-section .ym-sec-label { display: inline-block; margin-bottom: 0.5rem; padding-bottom: 0.4rem; color: var(--cl-key); border-bottom: var(--cl-key) 2px solid; font-family: var(--ff01f); font-weight: var(--ff01f-light); font-size: 1.6rem; letter-spacing: 0.08em; line-height: 1; }
.ym-section .ym-sec-title { margin-bottom: 2rem; font-size: 2.4rem; font-weight: var(--ff-base-bold); line-height: 1.4; }
.ym-section .category-link { margin-bottom: 3rem; }
.ym-section .category-link a { position: relative; display: inline-grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.8rem; padding: 0 2rem 0 0; color: var(--cl-txt); font-size: 1.4rem; font-weight: var(--ff-base-bold); transition: 0.3s; }
.ym-section .category-link a::after { content: ""; display: inline-block; width: 1em; height: 1em; mask: url(/cms/wp-content/themes/soop/assets/images/common/ico_ar.svg) no-repeat center center / contain; background-color: var(--cl-key); transition: 0.3s; }
.ym-section .category-link a:hover { color: var(--cl-key); opacity: 1; }

.wiki-area { display: grid; gap: 2rem; }
.wiki-area > div { padding: 2rem; background-color: var(--cl-wh); border-radius: 1rem; clip-path: polygon(2% 0%, 100% 0, 100% 92%, 98% 100%, 0 100%, 0% 8%); }
.wiki-area > div h3 { position: relative; margin-bottom: 1.5rem; padding-bottom: 1rem; padding-left: 1.2rem; border-bottom: var(--cl-border) 1px solid; font-size: 1.7rem; font-weight: var(--ff-base-bold); line-height: 1.4; }
.wiki-area > div h3::before { position: absolute; top: 0.2em; left: 0; content: ""; display: block; width: 4px; height: 1.2em; background-color: var(--cl-key); border-radius: 2px; }
.wiki-area > div ul { display: grid; gap: 1rem; list-style: none; padding: 0; margin: 0; }
.wiki-area > div ul li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.8rem; padding-left: 0; line-height: 1.6; }
.wiki-area > div ul li > span { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; background-color: var(--cl-key); color: var(--cl-wh); border-radius: 50%; font-family: var(--ff01f); font-weight: var(--ff01f-bold); font-size: 1.3rem; line-height: 1; flex-shrink: 0; }
.wiki-area > div ul li a { display: inline-block; color: var(--cl-txt); font-size: 1.4rem; transition: 0.3s; }
.wiki-area > div ul li a:hover { color: var(--cl-key); opacity: 1; }

@media print, screen and (min-width: 640px) {
.ym-section .ym-sec-label { margin-bottom: 1rem; font-size: 2rem; }
.ym-section .ym-sec-title { margin-bottom: 3rem; font-size: 4rem; }
.ym-section .category-link { margin-bottom: 5rem; }
.ym-section .category-link a { font-size: 1.6rem; }

.wiki-area { gap: 3rem; }
.wiki-area > div { padding: 4rem 3rem; clip-path: polygon(3% 0%, 100% 0, 100% 94%, 97% 100%, 0 100%, 0% 6%); transition: 0.3s; }
.wiki-area > div:hover { transform: translateY(-0.4rem); box-shadow: 0 0.6rem 2rem rgba(0,0,0,0.06); }
.wiki-area > div h3 { margin-bottom: 2rem; padding-bottom: 1.5rem; padding-left: 1.6rem; font-size: 2.2rem; }
.wiki-area > div h3::before { width: 5px; }
.wiki-area > div ul { gap: 1.2rem; }
.wiki-area > div ul li { gap: 1.2rem; }
.wiki-area > div ul li > span { width: 2.8rem; height: 2.8rem; font-size: 1.4rem; }
.wiki-area > div ul li a { font-size: 1.5rem; line-height: 1.6; }
}




/* SEO特化型ホームページ制作サービス
--------------------------------------------------------------*/
.u-strongtxt { font-size: 1.6rem; font-weight: var(--ff-base-bold);}
.u-strongtxt > * { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);}
.seo { background: var(--cl-bg-gr) url(/cms/wp-content/themes/soop/assets/images/home/sec12_bg.png) no-repeat center top / cover;}
.seo .u-wrapblck:last-child { padding-bottom: 0;}
.seo .info-box { position: relative; margin-top: 2rem; padding: 4rem 2rem; display: grid; gap: 2rem; justify-content: center; align-items: center; background-color: var(--cl-wh); border-radius: 1rem; }
.seo .info-box::before { position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; content: ""; display: block; width: 2.4rem; height: 2rem; background-color: var(--cl-wh); clip-path: polygon(0 0, 50% 100%, 100% 0); }
.seo .info-box > * img { margin: 0 auto; }

@media print, screen and (min-width: 640px) {
.u-strongtxt { font-size: 1.8rem; }
.seo .info-box { margin-top: 6rem; display: grid; grid-template-columns: max-content max-content max-content; gap: 6rem; padding: 5rem 7.5rem; border-radius: 2rem;}


}


/* サービスの特長 */
.seo .other-item {}
.seo .other-item-bg { background-color: var(--cl-wh); padding: 4rem 2rem; clip-path: polygon(12% 0%, 100% 0, 100% 84%, 88% 100%, 0 100%, 0% 16%);}
.seo .other-item-num { left: 0; right: 0; text-align: center; }
.seo .other-item-pic { max-width: 5rem; margin: 0 auto; }
.seo .other-item-title { margin: 1rem 0; text-align: center;}
.seo .other-item-title span { display: block; font-size: 1.2rem; }

@media print, screen and (min-width: 640px) {
.seo .other-item-bg { padding: 5rem 2rem 2rem; }
.seo .other-item-title { margin: 2rem 0 1rem; }
.seo .other-item-title span { font-size: 1.8rem; line-height: 1;}

}

/* 主な流れ */
.seo .flow-item::before { display: none;}

@media print, screen and (min-width: 640px) {

}


/* SEOコンサルティングについて */
.seo .feature-item { margin-top: 2rem;}
.seo .feature-item-title { }
.seo .feature-item-title span { display: block; font-size: 1.4rem; }
.seo .feature-item-title + p { margin-top: 1rem; }

@media print, screen and (min-width: 640px) {
.seo .feature-item { margin-top: 4rem; grid-template-columns: max-content 1fr;}
.seo .feature-item-title span { font-size: 1.6rem; }
.seo .feature-item-list { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 4rem;}
.seo .feature-item-list > * + * { margin-top: 0; }
}





/* 会社概要
--------------------------------------------------------------*/

.company { background: var(--cl-bg-gr) ;}
.company .u-wrapblck:last-child { padding-bottom: 0;}
.company .c-grtb-item dt { font-weight: var(--ff-base-bold); }


/* メッセージ */
.message-name { margin-top: 2rem; display: grid; grid-template-columns: max-content max-content; gap: 0.5rem; align-items: center;}
.message-name span { font-size: 1.8rem; font-weight: var(--ff-base-bold);}

@media print, screen and (min-width: 640px) {
.message-name { margin-top: 4rem; gap: 2rem; }
.message-name span { font-size: 2.4rem; }

}


/* cta
--------------------------------------------------------------*/
.cta { position: relative; padding: 4rem 0; background: url(/cms/wp-content/themes/soop/assets/images/common/bg_pagetitle.jpg) no-repeat center / cover; text-align: center;}
.cta::before { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); mix-blend-mode: multiply; z-index: 2;  }
.cta::after { position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 100%; background: url(/cms/wp-content/themes/soop/assets/images/common/bg_dot.png) repeat 100%; z-index: 2; }
.cta > * { position: relative; z-index: 3; }
.cta .c-secttitle {  display: grid; justify-content: center; align-items: center; gap: 0.5rem; color: var(--cl-wh); }
.cta .c-secttitle img { width: 8.4rem; margin: 0 auto; }
.cta .c-secttitle + p { color: var(--cl-wh); }
.cta .u-linkbtn { margin-top: 3rem; border-color: #008475; color: #008475; }
.cta .u-linkbtn::after { background-color: #008475; }

@media print, screen and (min-width: 640px) {
.cta { padding: 10rem 0;}
.cta .u-linkbtn { margin: 5rem auto 0;  }
.cta .u-linkbtn:hover { color: var(--cl-wh); background-color: #008475;  }
.cta .u-linkbtn:hover::after { background-color: var(--cl-wh); }

}