@charset "UTF-8"; /* PC/SPの配信CSSから、採用テンプレートが使う指定だけを移植。本文は共通。 */ .training-page--marketing .datearea .pagetitle .course-title-end { font: inherit; } @media (min-width: 1024px) { :where(.training-page--marketing) .page-mainimg-wm-child { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: relative; padding: 80px 0; overflow: hidden; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; color: #fff; line-height: 1; text-shadow: none; } :where(.training-page--marketing) .page-mainimg-wm-child__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% 50%; object-position: 50% 50%; } :where(.training-page--marketing) .page-mainimg-wm-child .inner { display: flex; flex-flow: column wrap; align-items: center; position: relative; z-index: 100; } :where(.training-page--marketing) .page-mainimg-wm-child .sub { position: relative; padding: 7.04px 24.64px; border-radius: 50px; font-size: var(--font-size-regular); text-align: center; } :where(.training-page--marketing) .page-mainimg-wm-child .sub:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; background-color: #336699; } :where(.training-page--marketing) .page-mainimg-wm-child .sub span { font-weight: bold; } :where(.training-page--marketing) .page-mainimg-wm-child h1 { margin: 30px 0 40px; font-weight: 900; font-size: 32px; text-align: center; display: flex; flex-flow: row nowrap; align-items: center; } :where(.training-page--marketing) .page-mainimg-wm-child h1 span { font-weight: 900; font-size: 32px; } :where(.training-page--marketing) .page-mainimg-wm-child .date li { margin-right: 35.2px; font-size: var(--font-size-regular); } :where(.training-page--marketing) .page-mainimg-wm-child .date li:last-child { margin-right: 0; } :where(.training-page--marketing) .page-mainimg-wm-child .date li span { display: inline-block; position: relative; transform: translate(0,-5px); margin-right: 8.96px; padding: 5px 11.2px; color: #232323; font-weight: bold; font-size: var(--font-size-regular); } :where(.training-page--marketing) .page-mainimg-wm-child .date li span:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; background-color: #fff; } :where(.training-page--marketing) .page-mainimg-wm-child .date li em { margin-right: 3.52px; font-weight: bold; font-size: 32px; } :where(.training-page--marketing) .page-mainimg-wm-child .date .big { font-size: 20px; } :where(.training-page--marketing) .page-mainimg-wm-child .date .big a { color: #fff; text-decoration: underline; } :where(.training-page--marketing) .page-mainimg-wm-child .date .big a:hover { text-decoration: none; } :where(.training-page--marketing) .page-mainimg-wm-child .flex-2 { display: flex; flex-flow: row nowrap; align-items: end; justify-content: center; gap: 10px; } :where(.training-page--marketing) .page-mainimg-wm-child .flex-2 .ga4-wrap { width: 250px; height: 115px; position: relative; display: flex; flex-flow: row nowrap; align-items: center; justify-content: center; } :where(.training-page--marketing) .page-mainimg-wm-child .flex-2 .ga4-wrap:before { content: ""; width: 200px; height: 65px; background: url("../image/logo-ga4.svg") 0 0 no-repeat; background-size: contain; margin-left: 5px; } :where(.training-page--marketing) .page-mainimg-wm-child .flex-2 .ga4-wrap:after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.5); } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter { position: relative; z-index: 5; margin-top: -5px; padding: 20px 50px 15px; height: 115px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter:after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 115px; box-shadow: 0 0 10px 10px rgba(255,255,255,0.1); background-color: rgba(57.5987261146,101.3184713376,244.4012738854,0.8); } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter-ga4:after { background-color: rgba(237,122,2,0.8); } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; gap: 0 10px; position: relative; line-height: 1; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei li { text-align: left; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .arrow { position: relative; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .arrow:after { content: ""; width: 40px; height: 40px; background: url("../image/arrow-1.svg") 0 0 no-repeat; background-size: contain; content: ""; display: block; transform: translateY(-5px); } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .arrow-ga4:after { content: ""; width: 40px; height: 40px; background: url("../image/arrow-ga4.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .mid { font-weight: bold; font-size: 40px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .big { font-weight: bold; font-size: 56px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei small { font-size: var(--font-size-regular); display: block; margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei p { font-size: var(--font-size-regular); margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .section-hero .pricing-section { position: relative; z-index: 5; margin-top: 30px; padding: 20px 30px 10px; } :where(.training-page--marketing) .section-hero .pricing-section:after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; background-color: rgba(255,255,255,0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; gap: 0 70px; position: relative; line-height: 1; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li { text-align: left; position: relative; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:first-child { transform: translateY(-5px); } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:first-child:after { content: ""; position: absolute; top: 50%; right: -52px; transform: translateY(-50%); display: block; content: ""; width: 40px; height: 40px; background-color: #232323; -webkit-mask: url("../image/fv-arrow.svg") 0 0/contain no-repeat; mask: url("../image/fv-arrow.svg") 0 0/contain no-repeat; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .mid { font-weight: bold; font-size: 40px; letter-spacing: -0.77px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .big { font-weight: bold; font-size: 56px; letter-spacing: -1.15px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison small { font-size: var(--font-size-regular); display: block; margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison p { font-size: var(--font-size-regular); margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .section-3feature { padding: 100px 0; background-color: #eee9e2; } :where(.training-page--marketing) .section-3feature .inner { max-width: 1200px; margin: 0 auto; } :where(.training-page--marketing) .section-3feature h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } :where(.training-page--marketing) .section-3feature .grid-3 { margin-top: 50px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: 1fr; gap: 30px; } :where(.training-page--marketing) .section-3feature .grid-3 .item { border-radius: 10px; padding: 10px; background-color: #fff; } :where(.training-page--marketing) .section-3feature .grid-3 .item img { width: 100%; height: auto; border-radius: 8px; grid-row: 1; } :where(.training-page--marketing) .section-3feature .grid-3 .item .label { margin: 30px 20px 0; background-color: #232323; color: #9fecff; font-weight: bold; display: inline-block; padding: 6px 10px 4px; letter-spacing: 1.44px; font-size: var(--font-size-regular); line-height: 1; } :where(.training-page--marketing) .section-3feature .grid-3 .item h3 { font-size: 20px; font-weight: bold; margin: 30px 20px 25px; grid-row: 2; position: relative; line-height: 1.5; } :where(.training-page--marketing) .section-3feature .grid-3 .item .desc { margin: 0 20px 15px; grid-row: 3; } :where(.training-page--marketing) .section-teacher { padding: 100px 0; } :where(.training-page--marketing) .section-teacher .inner { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; z-index: 15; } :where(.training-page--marketing) .section-teacher h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } :where(.training-page--marketing) .section-teacher .box { display: flex; flex-flow: row nowrap; align-items: center; position: relative; height: 900px; margin: 80px auto 0; } :where(.training-page--marketing) .section-teacher .box:after { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: 80vw; height: 900px; margin-left: calc(50% - 50vw); background-image: url("../image/teacher-bg.png"); background-position: left center; background-size: cover; background-repeat: no-repeat; } :where(.training-page--marketing) .section-teacher .box .txt { width: 920px; margin-left: auto; padding: 40px; background-color: #fff; } :where(.training-page--marketing) .section-teacher .box .txt h3 { margin-bottom: 20px; font-weight: 900; font-size: 48px; line-height: 1.4; letter-spacing: -1.02px; white-space: nowrap; } :where(.training-page--marketing) .section-teacher .box .txt h3 span { display: block; font-size: 32px; letter-spacing: normal; } :where(.training-page--marketing) .section-teacher .box .txt .flex { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 0 40px; margin-top: 50px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left { flex: 0 0 220px; max-width: 220px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left figure { width: 160px; margin: 0 auto; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left img { width: 160px; height: 160px; -o-object-fit: cover; object-fit: cover; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left .desc { margin-top: 30px; font-size: var(--font-size-regular); line-height: 1.8; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right { flex: 1; min-width: 0; font-size: var(--font-size-regular); } :where(.training-page--marketing) .section-teacher .box .txt .flex .right h4 { font-weight: bold; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right h4 span { font-weight: 100; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right .name { margin: 14.4px 0; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right .name span { font-weight: 900; font-size: 20px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul { line-height: 1.6; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul li { position: relative; margin-bottom: 7.2px; line-height: 1.5; padding-left: 21.6px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul li:before { content: ""; width: 18px; height: 18px; background: currentColor; mask: url("../icons/award.svg") center / contain no-repeat; font-variant: normal; font-weight: normal; font-family: sans-serif!important; text-transform: none; speak: none; font-size: var(--font-size-regular); position: absolute; top: 3px; left: 0; color: #ffa500; } :where(.training-page--marketing) .section-voice { padding: 100px 0; position: relative; background-color: #f5f5f5; } :where(.training-page--marketing) .section-voice h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } :where(.training-page--marketing) .section-voice .inner { width: 100%; max-width: 1200px; margin: 0 auto; position: relative; } :where(.training-page--marketing) .section-voice .inner .grid-3 { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 1fr; gap: 30px; } :where(.training-page--marketing) .section-voice .inner .list { position: relative; margin-top: 60px; } :where(.training-page--marketing) .section-voice .inner .fusen { display: flex; flex-flow: row wrap; align-items: center; position: relative; padding: 24px; padding-left: 120px; background-color: #fff; border-radius: 10px; } :where(.training-page--marketing) .section-voice .inner .fusen:before { content: ""; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); content: ""; width: 70px; height: 70px; background: url("../image/user1.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+4):before { content: ""; width: 70px; height: 70px; background: url("../image/user2.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+3):before { content: ""; width: 70px; height: 70px; background: url("../image/user3.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+2):before { content: ""; width: 70px; height: 70px; background: url("../image/user4.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:after { content: ""; position: absolute; right: 6px; bottom: -2px; z-index: -1; transform: rotate(4deg); width: 70%; height: 50%; background-color: #ddd; filter: blur(4px); } :where(.training-page--marketing) .section-faq { padding: 100px 0; } :where(.training-page--marketing) .section-faq .inner { width: 100%; max-width: 1200px; margin: 0 auto; } :where(.training-page--marketing) .section-faq .inner h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } .training-page--wm-general .faq-blocks .answer table th { line-height: 1.4; } :where(.training-page--marketing) .section-fv-wm { position: relative; overflow: hidden; padding: 80px 0; color: #fff; } :where(.training-page--marketing) .section-fv-wm .section-fv-wm__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: 50% top; object-position: 50% top; } :where(.training-page--marketing) .section-fv-wm:before { content: ""; opacity: 0.5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: rgb(114,114,114); background: linear-gradient(135deg,rgb(114,114,114) 0%,rgb(0,0,0) 65%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#000000',GradientType=1); } :where(.training-page--marketing) .section-fv-wm .inner { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: relative; z-index: 10; min-height: 100%; } :where(.training-page--marketing) .section-fv-wm .inner .jyoseiOuter { position: relative; z-index: 5; padding: 20px 50px 15px; } :where(.training-page--marketing) .section-fv-wm .inner .jyoseiOuter:after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,0.1); background-color: rgba(236,170,0,0.8); } :where(.training-page--marketing) .section-fv-wm .inner .jyosei { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; gap: 0 10px; position: relative; line-height: 1; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei li { text-align: left; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .arrow { position: relative; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .arrow:after { content: ""; width: 40px; height: 40px; background: url("../image/arrow-wm.svg") 0 0 no-repeat; background-size: contain; content: ""; display: block; transform: translateY(-5px); } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .mid { font-weight: bold; font-size: 40px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .big { font-weight: bold; font-size: 56px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei small { display: block; margin-bottom: 5px; font-weight: bold; font-size: var(--font-size-regular); } :where(.training-page--marketing) .section-fv-wm .inner .jyosei p { font-size: var(--font-size-regular); margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei p em { font-weight: bold; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .section-fv-wm .inner h1 { margin: 20px 0; font-weight: 900; font-size: 64px; } :where(.training-page--marketing) .section-fv-wm .inner .cate { display: flex; flex-flow: row wrap; gap: 10px; } :where(.training-page--marketing) .section-fv-wm .inner .cate li { margin-bottom: 10px; padding: 5px 19.2px 3px; border: 1px solid #fff; border-radius: 50px; font-size: 20px; font-weight: bold; } :where(.training-page--marketing) .section-fv-wm .inner .label { display: flex; flex-flow: row nowrap; gap: 30px; margin: 0 0 30px; } :where(.training-page--marketing) .section-fv-wm .inner .label li { line-height: 1.3; padding: 0 40px; text-align: center; position: relative; } :where(.training-page--marketing) .section-fv-wm .inner .label li .service-total-note { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: normal; line-height: 1.2; white-space: nowrap; } :where(.training-page--marketing) .section-fv-wm .inner .label li:before { content: ""; width: 35px; height: 70px; background: url("../image/leaf-l.svg") 0 0 no-repeat; background-size: contain; position: absolute; top: -10px; left: 0; } :where(.training-page--marketing) .section-fv-wm .inner .label li:after { content: ""; width: 35px; height: 70px; background: url("../image/leaf-r.svg") right 0 no-repeat; background-size: contain; position: absolute; top: -10px; right: 0; } :where(.training-page--marketing) .section-fv-wm .inner .label li span { margin-top: 10px; font-weight: bold; font-size: 32px; } :where(.training-page--marketing) .section-fv-wm .inner .label li:last-child span { font-size: 24px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 { display: grid; grid-template-columns: 1fr 220px; grid-template-rows: 1fr; margin-top: 70px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-end; gap: 80px; padding: 15px 48px 10px; border-radius: 10px 0 0 10px; background-color: #fff; color: #232323; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li { line-height: 1.2; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li span { font-weight: 900; font-size: 32px; letter-spacing: -1.44px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child { position: relative; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child span { color: #ffa500; font-size: 48px; line-height: 1; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child:before { content: ""; width: 50px; height: 50px; background: url("../image/fv-ar.svg") 0 0 no-repeat; background-size: contain; content: ""; position: absolute; bottom: -5px; left: -65px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 .btn { transition: all 0.2s ease-in-out; display: flex; justify-content: center; align-items: center; border-radius: 0 10px 10px 0; background-color: #ffa500; color: #fff; font-weight: bold; font-size: 24px; } :where(.training-page--marketing) .section-fv-wm .datearea { display: flex; flex-flow: row nowrap; align-items: center; margin: 20px 0 40px; } :where(.training-page--marketing) .section-fv-wm .datearea .num { margin-right: 15px; border-radius: 10px; background-color: #232323; color: #fff; display: flex; flex-flow: column nowrap; align-items: flex-end; justify-content: center; padding: 0 15px 7px; font-weight: bold; line-height: 1; font-size: var(--font-size-regular); position: relative; } :where(.training-page--marketing) .section-fv-wm .datearea .num .small { position: absolute; top: 10px; right: 15px; color: #a9ebff; } :where(.training-page--marketing) .section-fv-wm .datearea .num .big { transform: translateY(5px); } :where(.training-page--marketing) .section-fv-wm .datearea .pagetitle { color: #fff; font-size: 56px; font-weight: 900; margin: 0; padding: 0; line-height: 1; } :where(.training-page--marketing) .sectionPrice { padding: 100px 0; background-color: #fff; } :where(.training-page--marketing) .sectionPrice .inner { width: min(1000px, calc(100% - 40px)); margin: 0 auto; } :where(.training-page--marketing) .sectionPrice h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } :where(.training-page--marketing) .sectionPrice .btn { margin: 60px 0 0; text-align: center; } :where(.training-page--marketing) .sectionPrice .btn a { display: inline-block; height: 60px; padding: 0 38.4px; border: 1px solid #ffa500; border-radius: 100px; color: #ffa500; font-size: 20px; line-height: 60px; } :where(.training-page--marketing) .sectionPrice .btn a span { font-weight: bold; } :where(.training-page--marketing) .sectionPrice h2 { position: relative; overflow: visible; line-height: 1.6; } :where(.training-page--marketing) .sectionPrice h2 em { display: inline-block; position: relative; transform: translate(0,5px); color: #336699; font-weight: bold; font-size: 80px; line-height: 1; letter-spacing: -2.3px; } :where(.training-page--marketing) .sectionPrice h2 .label { display: inline-block; transform: translate(0,-5px); height: 35px; margin-right: 11.52px; padding: 0 18.43px; border-radius: 50px; background-color: #232323; color: #fff; font-weight: bold; font-size: 24px; line-height: 36px; letter-spacing: 2.3px; } :where(.training-page--marketing) .sectionPrice h2 [data-ruby] { position: relative; } :where(.training-page--marketing) .sectionPrice h2 [data-ruby]:before { content: attr(data-ruby); position: absolute; top: -15px; left: 5px; margin: auto; color: #336699; font-weight: bold; font-size: var(--font-size-regular); } :where(.training-page--marketing) .sectionPrice h3 { margin: 50px 0 20px; font-size: 24px; line-height: 2; text-align: center; } :where(.training-page--marketing) .sectionPrice h3 span { font-weight: 900; } :where(.training-page--marketing) .sectionPrice .desc { width: 100%!important; margin: 0 auto!important; padding: 26.4px 35.2px; border-radius: 5px; background-color: #f5f5f5; font-size: var(--font-size-regular); line-height: 2; } :where(.training-page--marketing) .sectionPrice .caution { margin-top: 12.8px; font-size: 14px; } :where(.training-page--marketing) .sectionPrice .tableWrap { margin-top: 60px; overflow: hidden; border-radius: 10px; } :where(.training-page--marketing) .sectionPrice .priceTable { width: 100%; overflow: hidden; border-radius: 10px; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } :where(.training-page--marketing) .sectionPrice .priceTable td, :where(.training-page--marketing) .sectionPrice .priceTable th { font-size: 20px; padding: 28.8px 0; border: 1px dotted #ddd; line-height: 1.4; text-align: center; border-collapse: collapse; vertical-align: middle; } :where(.training-page--marketing) .sectionPrice .priceTable td .big, :where(.training-page--marketing) .sectionPrice .priceTable th .big { font-weight: bold; font-size: 24px; } :where(.training-page--marketing) .sectionPrice .priceTable td .normal, :where(.training-page--marketing) .sectionPrice .priceTable th .normal { font-weight: normal; } :where(.training-page--marketing) .sectionPrice .priceTable tr:first-child { background-color: #ffa500; } :where(.training-page--marketing) .sectionPrice .priceTable tr:first-child th { background-color: #ffa500; color: #232323; } :where(.training-page--marketing) .sectionPrice .priceTable tr:first-child td { font-weight: bold; } :where(.training-page--marketing) .sectionPrice .priceTable th { font-weight: bold; background-color: #f5f5f5; } :where(.training-page--marketing) .sectionPrice .priceTable td:has(.big) { font-size: var(--font-size-regular); } :where(.training-page--marketing) .sectionPrice .priceTable td .small { display: none; margin-top: 5px; font-weight: normal; font-size: 14px; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; margin: 40px auto 0; } :where(.training-page--marketing) .sectionPrice .flex .left, :where(.training-page--marketing) .sectionPrice .flex .right { width: 49%; } :where(.training-page--marketing) .sectionPrice .flex .left h4, :where(.training-page--marketing) .sectionPrice .flex .right h4 { font-weight: bold; line-height: 1; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex .left .price, :where(.training-page--marketing) .sectionPrice .flex .right .price { margin-top: 20px; line-height: 1; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex .left .price span, :where(.training-page--marketing) .sectionPrice .flex .right .price span { font-weight: 900; font-size: 32px; } :where(.training-page--marketing) .sectionPrice .flex .left { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; border-radius: 12px; background-color: #f5f5f5; } :where(.training-page--marketing) .sectionPrice .flex .right>div { margin-bottom: 15px; padding: 20px; border-radius: 12px; text-shadow: none; } :where(.training-page--marketing) .sectionPrice .flex .right>div:last-child { margin-bottom: 0; } :where(.training-page--marketing) .section-jyoseimore { padding: 100px 0; position: relative; overflow: hidden; background: #f5f5f5; text-shadow: none; } :where(.training-page--marketing) .section-jyoseimore h2 { font-size: 40px; font-weight: 900; line-height: 1.6; text-align: center; } :where(.training-page--marketing) .section-jyoseimore .flex { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; width: 1200px; margin: 70px auto 0; } :where(.training-page--marketing) .section-jyoseimore .flex .item { display: flex; flex-flow: column nowrap; justify-content: flex-start; align-items: stretch; width: 30%; } :where(.training-page--marketing) .section-jyoseimore .flex .item .sub span { display: inline-block; margin-right: 14.4px; padding: 5px 21.6px; border-radius: 50px; background: #336699; color: #fff; font-size: var(--font-size-regular); line-height: 1; text-transform: capitalize; } :where(.training-page--marketing) .section-jyoseimore .flex .item h3 { min-height: 66px; margin-top: 10px; font-weight: bold; font-size: 20px; line-height: 1.6; } :where(.training-page--marketing) .section-jyoseimore .flex .item img { display: block; width: 100%; margin: 30px 0; } :where(.training-page--marketing) .section-jyoseimore .flex .item .txt { color: #333e5b; } :where(.training-page--marketing) .section-jyoseimore .flex .item .btn { margin-top: 10px; } :where(.training-page--marketing) .section-jyoseimore .flex .item .btn i { margin-left: 5px; } } @media (max-width: 1023px) { :where(.training-page--marketing) .section-hero .pricing-section { position: relative; z-index: 5; margin: 10px auto 30px; padding: 20px 0 10px; background-color: rgba(255,255,255,0.7); padding: 15px 20px 10px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: relative; line-height: 1; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li { position: relative; text-align: center; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:first-child { font-weight: normal; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:first-child p { font-weight: normal; display: inline-block; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:last-child { margin-top: 10px; padding-left: 60px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison li:last-child:after { content: ""; position: absolute; bottom: 2px; left: 0; display: block; content: ""; width: 40px; height: 40px; background-color: #232323; -webkit-mask: url("../image/mobile/fv-arrow.svg") 0 0/contain no-repeat; mask: url("../image/mobile/fv-arrow.svg") 0 0/contain no-repeat; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .mid { font-size: 24px; font-weight: bold; letter-spacing: -0.67px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .big { font-weight: bold; font-size: 48px; letter-spacing: -1.26px; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison small { font-size: var(--font-size-regular); display: block; margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison p { margin-bottom: 5px; font-weight: bold; } :where(.training-page--marketing) .section-hero .pricing-section .price-comparison .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .page-mainimg-wm-child { position: relative; padding: 40px 20px 50px; background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; color: #fff; text-align: center; text-shadow: none; } :where(.training-page--marketing) .page-mainimg-wm-child .page-mainimg-wm-child__bg { width: 100vw; height: 100%; position: absolute; top: 0; left: 0; right: 0; -o-object-fit: cover; object-fit: cover; } :where(.training-page--marketing) .page-mainimg-wm-child .inner { position: relative; z-index: 5; text-align: center; } :where(.training-page--marketing) .page-mainimg-wm-child .sub { display: inline-block; position: relative; z-index: 5; padding: 2px 24px; border-radius: 50px; text-align: center; } :where(.training-page--marketing) .page-mainimg-wm-child .sub:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; background-color: #336699; } :where(.training-page--marketing) .page-mainimg-wm-child .sub span { font-weight: bold; } :where(.training-page--marketing) .page-mainimg-wm-child .date { display: inline-block; } :where(.training-page--marketing) .page-mainimg-wm-child .date li { line-height: 1.4; } :where(.training-page--marketing) .page-mainimg-wm-child .date li span { display: block; position: relative; transform: translate(0,-5px); padding: 3px 8.96px; color: #232323; font-weight: bold; font-size: var(--font-size-regular); text-align: center; } :where(.training-page--marketing) .page-mainimg-wm-child .date li span:before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; background-color: #fff; } :where(.training-page--marketing) .page-mainimg-wm-child .date li em { font-weight: bold; font-size: 32px; } :where(.training-page--marketing) .page-mainimg-wm-child .date .big { font-weight: bold; font-size: var(--font-size-regular); } :where(.training-page--marketing) .page-mainimg-wm-child .date .big a { color: #fff; text-decoration: underline; } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter { position: relative; z-index: 5; margin-top: -5px; padding: 10px 6vw; } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter:after { content: ""; display: block; position: absolute; top: 0; left: 50%; z-index: -1; transform: skewX(-15deg) translateX(-50%); width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,0.1); background-color: rgba(106,139,247,0.8); } :where(.training-page--marketing) .page-mainimg-wm-child .jyoseiOuter-ga4:after { width: 90%; background-color: rgba(237,122,2,0.8); } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei { position: relative; line-height: 1; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei li { text-align: center; white-space: nowrap; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei li:first-child { font-weight: normal; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei li:last-child { position: relative; padding-left: 40px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei li:last-child:before { content: ""; width: 35px; height: 35px; background: url("../image/mobile/arrow-1.svg") 0 0 no-repeat; background-size: contain; display: block; position: absolute; bottom: 3px; left: 0; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .arrow { display: none; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .mid { font-size: 24px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .big { font-weight: bold; font-size: 48px; transform: translateY(6px); } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei small { font-size: 14px; margin-right: 7px; font-weight: bold; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei p { font-size: var(--font-size-regular); margin-top: 10px; padding-bottom: 8px; } :where(.training-page--marketing) .page-mainimg-wm-child .jyosei .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .section-3feature { padding: 40px 20px; } :where(.training-page--marketing) .section-3feature .inner { width: 100%; max-width: 100%; margin: 0 auto; } :where(.training-page--marketing) .section-3feature .grid-3 { margin-top: 30px; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 20px; } :where(.training-page--marketing) .section-3feature .grid-3 .item { border-radius: 10px; padding: 10px; box-shadow: rgba(149,157,165,0.2) 0px 4px 12px; background-color: #fff; } :where(.training-page--marketing) .section-3feature .grid-3 .item img { width: 100%; height: auto; border-radius: 8px; grid-row: 1; } :where(.training-page--marketing) .section-3feature .grid-3 .item .label { margin: 30px 20px 0; background-color: #232323; color: #9fecff; font-weight: bold; display: inline-block; padding: 5px 10px 4px; letter-spacing: 1.44px; font-size: 14px; line-height: 1; } :where(.training-page--marketing) .section-3feature .grid-3 .item h3 { font-size: 20px; font-weight: bold; margin: 25px 20px; grid-row: 2; position: relative; line-height: 1.5; } :where(.training-page--marketing) .section-3feature .grid-3 .item .desc { margin: 0 20px 15px; grid-row: 3; } :where(.training-page--marketing) .section-faq { padding: 50px 20px!important; } :where(.training-page--marketing) .section-fv-wm { position: relative; padding: 0 20px; color: #fff; } :where(.training-page--marketing) .section-fv-wm .section-fv-wm__bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; right: 0; -o-object-fit: cover; object-fit: cover; } :where(.training-page--marketing) .section-fv-wm:before { z-index: 5; content: ""; opacity: 0.4; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(114,114,114); background: linear-gradient(135deg,rgb(114,114,114) 0%,rgb(0,0,0) 65%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#727272',endColorstr='#000000',GradientType=1); } :where(.training-page--marketing) .section-fv-wm .inner { position: relative; z-index: 10; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; position: relative; z-index: 10; padding: 40px 0; } :where(.training-page--marketing) .section-fv-wm .inner .jyoseiOuter { position: relative; z-index: 5; margin-top: 30px; padding: 10px 6vw 5px; } :where(.training-page--marketing) .section-fv-wm .inner .jyoseiOuter:after { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: -1; transform: skewX(-15deg); width: 100%; height: 100%; box-shadow: 0 0 10px 10px rgba(255,255,255,0.1); background-color: rgba(236,170,0,0.8); } :where(.training-page--marketing) .section-fv-wm .inner .jyosei { position: relative; line-height: 1; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei li { text-align: center; white-space: nowrap; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei li:first-child { font-weight: normal; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei li:last-child { position: relative; padding-left: 45px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei li:last-child:before { content: ""; width: 35px; height: 35px; background: url("../image/mobile/arrow-wm.svg") 0 0 no-repeat; background-size: contain; display: block; position: absolute; bottom: 3px; left: 0; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .arrow { display: none; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .mid { font-size: 24px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .big { display: inline-block; margin-top: 8px; font-weight: bold; font-size: 48px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei small { font-size: 14px; margin-right: 7px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei p { font-size: var(--font-size-regular); margin-top: 10px; } :where(.training-page--marketing) .section-fv-wm .inner .jyosei .zei { font-weight: normal; font-size: 14px; } :where(.training-page--marketing) .section-fv-wm .inner .datearea { display: flex; flex-flow: column nowrap; align-items: center; justify-content: center; } :where(.training-page--marketing) .section-fv-wm .inner .datearea .num { font-size: var(--font-size-regular); border-radius: 6px; background-color: #232323; color: #fff; display: inline-block; padding: 0 10px 7px; font-weight: bold; line-height: 1; position: relative; } :where(.training-page--marketing) .section-fv-wm .inner .datearea .num .small { position: absolute; top: 8px; right: 10px; color: #a9ebff; } :where(.training-page--marketing) .section-fv-wm .inner .datearea .num .big { transform: translateY(5px); } :where(.training-page--marketing) .section-fv-wm .inner .datearea .pagetitle { color: #fff; font-size: 40px; text-align: center; font-weight: 900; margin: 0; padding: 0; margin-top: 10px; line-height: 1.3; } :where(.training-page--marketing) .section-fv-wm .inner .cate { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; gap: 10px; margin-bottom: 30px; } :where(.training-page--marketing) .section-fv-wm .inner .cate li { font-size: 14px; padding: 5px 12px 3px; border: 1px solid #fff; border-radius: 50px; font-weight: bold; } :where(.training-page--marketing) .section-fv-wm .inner .label { display: flex; flex-flow: row nowrap; gap: 10px; margin: 0 0 30px; } :where(.training-page--marketing) .section-fv-wm .inner .label li { width: 110px; height: 35px; background: url("../image/mobile/label@0.5x.png") no-repeat 0 0; background-size: 110px 35px; } @media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx),only screen and (-webkit-min-device-pixel-ratio:1.5) { :where(.training-page--marketing) .section-fv-wm .inner .label li { width: 110px; height: 35px; background: url("../image/mobile/label.png") no-repeat 0 0; background-size: 110px 35px; } } :where(.training-page--marketing) .section-fv-wm .inner .label li { position: relative; font-size: var(--font-size-regular); line-height: 1.4; text-align: center; } :where(.training-page--marketing) .section-fv-wm .inner .label li .service-total-note { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%); font-size: var(--font-size-regular); font-weight: normal; line-height: 1.2; white-space: nowrap; } :where(.training-page--marketing) .section-fv-wm .inner .label li span { display: inline-block; font-weight: 900; font-size: var(--font-size-regular); } :where(.training-page--marketing) .section-fv-wm .inner .label li:last-child span { margin-top: 1px; font-size: var(--font-size-regular); } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100%; margin-top: 30px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul { display: flex; flex-flow: row nowrap; justify-content: center; align-items: flex-end; gap: 40px; padding: 15px 0 10px; border-radius: 10px 10px 0 0; background-color: #fff; color: #232323; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li { font-size: var(--font-size-regular); line-height: 1.2; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li span { font-weight: 900; font-size: 24px; letter-spacing: -1.28px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child { position: relative; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child span { color: #ecaa00; font-size: 48px; line-height: 1; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 ul li:last-child:before { content: ""; width: 30px; height: 30px; background: url("../image/mobile/fv-ar.svg") 0 0 no-repeat; background-size: contain; position: absolute; bottom: 0; left: -37px; } :where(.training-page--marketing) .section-fv-wm .inner .grid-2 .btn { transition: all cubic-bezier(0.075,0.820,0.165,1.000) 0.5s; display: flex; justify-content: center; align-items: center; padding: 10px 0; border-radius: 0 0 10px 10px; background-color: #ecaa00; color: #fff; font-weight: bold; font-size: 20px; } :where(.training-page--marketing) .section-teacher { width: 100%; padding: 50px 20px; padding-bottom: 50px; position: relative; } :where(.training-page--marketing) .section-teacher:after { content: ""; width: 100vw; height: 600px; position: absolute; bottom: 0; left: 0; background-image: url("../image/mobile/teacher-bg.png"); background-repeat: no-repeat; background-position: center; background-size: cover; } :where(.training-page--marketing) .section-teacher .inner { width: 100%; margin: 0 auto; position: relative; z-index: 15; background-color: #fff; padding: 0 20px 32px; border-radius: 10px; } :where(.training-page--marketing) .section-teacher .box { position: relative; margin: 40px auto 0; } :where(.training-page--marketing) .section-teacher .box .txt h3 { font-weight: bold; font-size: 24px; line-height: 1.4; letter-spacing: -0.45px; text-align: center; } :where(.training-page--marketing) .section-teacher .box .txt h3 span { display: block; font-size: var(--font-size-regular); letter-spacing: normal; text-align: center; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left { margin: 30px auto; text-align: center; } :where(.training-page--marketing) .section-teacher .box .txt .flex .left img { width: 200px; height: 200px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right h4 { font-weight: bold; text-align: center; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right h4 span { display: block; text-align: center; font-weight: normal; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right .name { margin: 20px 0; text-align: center; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right .name span { font-weight: 900; font-size: 24px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul { line-height: 1.6; margin: 16px 0; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul li { position: relative; margin-bottom: 8px; line-height: 1.5; padding-left: 24px; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul li:before { content: ""; width: 18px; height: 18px; background: currentColor; mask: url("../icons/award.svg") center / contain no-repeat; font-variant: normal; font-weight: normal; font-family: sans-serif!important; text-transform: none; speak: none; font-size: var(--font-size-regular); position: absolute; top: 3px; left: 0; color: #ecaa00; } :where(.training-page--marketing) .section-teacher .box .txt .flex .right .desc { margin-top: 24px; } :where(.training-page--marketing) .section-faq { width: 100%; padding: 50px 20px; } :where(.training-page--marketing) .section-faq .inner { width: 100%; margin: 0 auto; } :where(.training-page--marketing) .section-faq .inner h2 { font-weight: 900; font-size: 6vw; line-height: 1.5; text-align: center; } :where(.training-page--marketing) .section-voice { width: 100%; padding: 50px 20px; position: relative; background-color: #f5f5f5; z-index: 0; } :where(.training-page--marketing) .section-voice .inner { width: 100%; margin: 0 auto; position: relative; } :where(.training-page--marketing) .section-voice .inner .grid-3 { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; gap: 15px; } :where(.training-page--marketing) .section-voice .inner .list { position: relative; margin-top: 40px; } :where(.training-page--marketing) .section-voice .inner .fusen { display: flex; flex-flow: row wrap; align-items: center; position: relative; padding: 20px; padding-left: 80px; background-color: #fff; border-radius: 10px; } :where(.training-page--marketing) .section-voice .inner .fusen:before { content: ""; position: absolute; top: 25px; left: 15px; content: ""; width: 50px; height: 50px; background: url("../image/mobile/user1.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+4):before { content: ""; width: 50px; height: 50px; background: url("../image/mobile/user2.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+3):before { content: ""; width: 50px; height: 50px; background: url("../image/mobile/user3.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .section-voice .inner .fusen:nth-of-type(4n+2):before { content: ""; width: 50px; height: 50px; background: url("../image/mobile/user4.svg") 0 0 no-repeat; background-size: contain; } :where(.training-page--marketing) .sectionPrice { padding: 50px 0; background-color: #fff; } :where(.training-page--marketing) .sectionPrice .inner { padding: 0 20px; } :where(.training-page--marketing) .sectionPrice .btn { margin: 40px 0 0; text-align: center; } :where(.training-page--marketing) .sectionPrice .btn a { display: block; width: 100%; padding: 10px 20px; border: 1px solid #ecaa00; border-radius: 100px; color: #ecaa00; line-height: 1.4; text-align: center; } :where(.training-page--marketing) .sectionPrice .btn a span { font-weight: bold; } :where(.training-page--marketing) .sectionPrice h2 { position: relative; line-height: 1.6; font-size: 24px; } :where(.training-page--marketing) .sectionPrice h2>span { text-align: center; display: block; } :where(.training-page--marketing) .sectionPrice h2 em { display: inline-block; position: relative; transform: translate(0,5px); color: #336699; font-weight: bold; font-size: 48px; line-height: 1; letter-spacing: -1.41px; } :where(.training-page--marketing) .sectionPrice h2 .label { display: inline-block; transform: translate(0,-5px); height: 25px; margin-right: 7.84px; padding: 0 12.54px; border-radius: 50px; background-color: #232323; color: #fff; font-weight: bold; font-size: var(--font-size-regular); line-height: 26px; } :where(.training-page--marketing) .sectionPrice h2 [data-ruby] { position: relative; } :where(.training-page--marketing) .sectionPrice h2 [data-ruby]:before { content: attr(data-ruby); position: absolute; top: -12px; left: 50%; transform: translateX(-50%); margin: auto; color: #336699; font-weight: bold; font-size: var(--font-size-regular); white-space: nowrap; } :where(.training-page--marketing) .sectionPrice h3 { margin: 30px 0; font-size: var(--font-size-regular); line-height: 1.6; text-align: center; } :where(.training-page--marketing) .sectionPrice h3 span { font-weight: 900; } :where(.training-page--marketing) .sectionPrice h3 br { display: none; } :where(.training-page--marketing) .sectionPrice .desc { width: 100%!important; margin: 0 auto 30px; padding: 20px; border-radius: 8px; background-color: #f5f5f5; } :where(.training-page--marketing) .sectionPrice .priceTable { width: 600px; padding: 1px; overflow: hidden; border-radius: 10px; table-layout: fixed; border-collapse: collapse; border-spacing: 0; } :where(.training-page--marketing) .sectionPrice .priceTable td, :where(.training-page--marketing) .sectionPrice .priceTable th { padding: 0 12px; border: 1px dotted #ddd; line-height: 1.4; text-align: center; border-collapse: collapse; vertical-align: middle; } :where(.training-page--marketing) .sectionPrice .priceTable td .big, :where(.training-page--marketing) .sectionPrice .priceTable th .big { font-weight: 900; font-size: 20px; } :where(.training-page--marketing) .sectionPrice .priceTable td .normal, :where(.training-page--marketing) .sectionPrice .priceTable th .normal { font-weight: normal; } :where(.training-page--marketing) .sectionPrice .priceTable tr { height: 60px; min-height: 60px; } :where(.training-page--marketing) .sectionPrice .priceTable tr:first-child { background-color: #ecaa00; } :where(.training-page--marketing) .sectionPrice .priceTable tr:first-child th { background-color: #ecaa00; color: #232323; } :where(.training-page--marketing) .sectionPrice .priceTable th { font-weight: bold; background-color: #f5f5f5; } :where(.training-page--marketing) .sectionPrice .priceTable td:has(.big) { font-size: var(--font-size-regular); } :where(.training-page--marketing) .sectionPrice .priceTable td .small { display: none; margin-top: 5px; font-weight: normal; font-size: 14px; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: stretch; margin: 40px auto 0; } :where(.training-page--marketing) .sectionPrice .flex .left, :where(.training-page--marketing) .sectionPrice .flex .right { width: 49%; } :where(.training-page--marketing) .sectionPrice .flex .left h4, :where(.training-page--marketing) .sectionPrice .flex .right h4 { font-weight: bold; line-height: 1; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex .left .price, :where(.training-page--marketing) .sectionPrice .flex .right .price { margin-top: 20px; line-height: 1; text-align: center; } :where(.training-page--marketing) .sectionPrice .flex .left .price span, :where(.training-page--marketing) .sectionPrice .flex .right .price span { font-weight: 900; font-size: 32px; } :where(.training-page--marketing) .sectionPrice .flex .left { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0; border-radius: 12px; background-color: #f5f5f5; } :where(.training-page--marketing) .sectionPrice .flex .right>div { margin-bottom: 15px; padding: 20px; border-radius: 12px; text-shadow: none; } :where(.training-page--marketing) .sectionPrice .flex .right>div:last-child { margin-bottom: 0; } } @media (min-width: 1024px) { :where(.training-page--marketing) .mainImage-ads-operation .inner, :where(.training-page--marketing) .mainImage-ga4 .inner { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; } :where(.training-page--marketing) .mainImage-ads-operation .inner h1, :where(.training-page--marketing) .mainImage-ga4 .inner h1 { font-weight:900; font-size:56px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .cate, :where(.training-page--marketing) .mainImage-ga4 .inner .cate { display:flex; flex-flow:row wrap; gap:10px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .cate li, :where(.training-page--marketing) .mainImage-ga4 .inner .cate li { margin-bottom:10px; padding:5px 19.2px 3px; border:1px solid #fff; border-radius:50px; font-size:20px; font-weight:bold; line-height:1.8; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea { display:flex; flex-flow:row nowrap; align-items:center; margin:20px 0 50px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num { margin-right:15px; border-radius:10px; background-color:#232323; color:#fff; display:flex; flex-flow:column nowrap; align-items:flex-end; justify-content:center; padding:0 15px 7px; font-weight:bold; line-height:1; font-size:var(--font-size-regular); position:relative; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .small, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .small { position:absolute; top:10px; right:15px; color:#a9ebff; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .big, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .big { transform:translateY(5px); } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .big span:not(.min), :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .big span:not(.min) { font-size:56px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .pagetitle, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .pagetitle { color:#fff; font-size:56px; font-weight:900; margin:0; padding:0; line-height:1; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds { display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr; gap:20px; width:900px; margin-top:50px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li { position:relative; padding:120px 0 15px; border-radius:10px; background-color:#fff; color:#232323; line-height:1.8; text-align:center; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:before { content:""; position:absolute; top:25px; left:50%; transform:translateX(-50%); } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:first-child:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:first-child:before { content:""; width:80px; height:80px; background:url("../image/ads/fv-1.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:nth-child(2):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:nth-child(2):before { content:""; width:80px; height:80px; background:url("../image/ads/fv-2.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:nth-child(3):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:nth-child(3):before { content:""; width:80px; height:80px; background:url("../image/ads/fv-3.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li span, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li span { font-weight:bold; font-size:var(--font-size-regular); } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li { padding-top:145px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%); } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:first-child:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:first-child:before { content:""; width:110px; height:110px; background:url("../image/ga4-point1.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:nth-child(2):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:nth-child(2):before { content:""; width:120px; height:120px; background:url("../image/ga4-point2.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:nth-child(3):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:nth-child(3):before { content:""; width:110px; height:110px; background:url("../image/ga4-point3.svg") 0 0 no-repeat; background-size:contain; } } @media (max-width: 1023px) { :where(.training-page--marketing) .mainImage-ads-operation .inner, :where(.training-page--marketing) .mainImage-ga4 .inner { display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea { margin:20px 0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num { font-size:var(--font-size-regular); border-radius:6px; background-color:#232323; color:#fff; display:inline-block; padding:0 10px 7px; font-weight:bold; line-height:1; position:relative; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .small, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .small { position:absolute; top:8px; right:10px; color:#a9ebff; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .big, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .big { transform:translateY(5px); } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .num .big span, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .num .big span { font-size:48px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .datearea .pagetitle, :where(.training-page--marketing) .mainImage-ga4 .inner .datearea .pagetitle { color:#fff; font-size:40px; text-align:center; font-weight:900; margin:0; padding:0; margin-top:10px; line-height:1.3; } :where(.training-page--marketing) .mainImage-ads-operation .inner .cate, :where(.training-page--marketing) .mainImage-ga4 .inner .cate { font-size:var(--font-size-regular); display:flex; flex-flow:row wrap; justify-content:center; gap:8px; margin-bottom:15px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .cate li, :where(.training-page--marketing) .mainImage-ga4 .inner .cate li { display:flex; align-items:center; padding:5px 12px 3px; border:1px solid #fff; border-radius:50px; font-size:14px; font-weight:bold; line-height:1.8; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds { display:grid; grid-template-columns:1fr; grid-template-rows:1fr; gap:10px; width:100%; margin-top:30px; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li { position:relative; padding:15px; padding-left:90px; border-radius:5px; background-color:#fff; color:#232323; line-height:1.6; text-align:left; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:before { content:""; position:absolute; top:50%; left:20px; transform:translateY(-50%); } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:first-child:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:first-child:before { content:""; width:50px; height:50px; background:url("../image/mobile/ads/fv-1.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:nth-child(2):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:nth-child(2):before { content:""; width:50px; height:50px; background:url("../image/mobile/ads/fv-2.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li:nth-child(3):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li:nth-child(3):before { content:""; width:50px; height:50px; background:url("../image/mobile/ads/fv-3.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds li span, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds li span { font-weight:bold; font-size:var(--font-size-regular); } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:first-child:before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:first-child:before { content:""; width:50px; height:50px; background:url("../image/mobile/ga4-point1.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:nth-child(2):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:nth-child(2):before { content:""; width:50px; height:50px; background:url("../image/mobile/ga4-point2.svg") 0 0 no-repeat; background-size:contain; } :where(.training-page--marketing) .mainImage-ads-operation .inner .labelAds-ga4 li:nth-child(3):before, :where(.training-page--marketing) .mainImage-ga4 .inner .labelAds-ga4 li:nth-child(3):before { content:""; width:50px; height:50px; background:url("../image/mobile/ga4-point3.svg") 0 0 no-repeat; background-size:contain; } } /* 統合したDOMと中間幅の調整。原本の外観を維持しながら固定幅を解除する。 */ .training-page--marketing a:not(.idigi-cta):not(.indexbtn):not(.price-cta__button) { text-underline-offset: 3px; } .training-page--marketing .inner { min-width: 0; } .training-page--marketing .section-fv-wm, .training-page--marketing .page-mainimg-wm-child { isolation: isolate; } .training-page--marketing .section-fv-wm__bg, .training-page--marketing .page-mainimg-wm-child__bg { position: absolute; inset: 0; z-index: -1; width: 100%; max-width: none; height: 100%; object-fit: cover; } .training-page--marketing .page-mainimg-wm-child .inner { z-index: 1; } .training-page--marketing .sectionCurriculum .new-item { padding: 40px 50px; background: #fff; border-radius: 0 0 8px 8px; } .training-page--marketing .sectionCurriculum .row { display: inline-block; margin-right: 24px; white-space: nowrap; } .training-page--marketing .sectionCurriculum .chapter { font-weight: 700; } .training-page--marketing .sectionCurriculum .sp-table-inner td { padding-inline: 16px; overflow-wrap: anywhere; } @media (min-width: 1024px) { .training-page--marketing .sectionCurriculum .new-item { padding: 30px 40px; } .training-page--marketing .sectionCurriculum .new-item td { padding: 8px 24px 8px 0; border-top: 1px solid #ddd; } .training-page--marketing .sectionCurriculum .new-item tr:first-child td:nth-child(-n+2) { width: 30%; } .training-page--marketing .sectionCurriculum .new-item .th { position: relative; padding-right: 50px; } .training-page--marketing .sectionCurriculum .new-item .th::after { content: ""; position: absolute; inset: 0 25px 0 auto; width: 1px; background: #ddd; } .training-page--wm-general .pageModifyDate .inner { font-size: 14px; } } .training-page--marketing .ux-curriculum-note { max-width: 1000px; margin: 20px auto 0; text-align: center; } .training-page--marketing .sectionSwiper { padding: 100px 0; overflow: clip; } .training-page--marketing .sectionSwiper > .inner { width: 100%; max-width: none; } .training-page--marketing .sectionSwiper .splide { margin-top: 50px; } .training-page--marketing .sectionSwiper .splide__track { padding-block: 15px; } .training-page--marketing .sectionSwiper .splide__slide img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 25px rgba(221,221,221,0.4); } .training-page--marketing .section-teacher .box .txt .flex { min-width: 0; } .training-page--marketing .section-teacher .box .txt .flex > * { min-width: 0; } .training-page--marketing .section-teacher li { overflow-wrap: anywhere; } .training-page--marketing .sectionPrice .tableWrap { max-width: 100%; } .training-page--marketing .sectionPrice .priceTable { width: 100%; } .training-page--marketing .sectionOthers .btn { margin-bottom: 20px; color: var(--link); font-size: var(--font-size-regular); } .training-page--marketing .sectionOverview .list { padding-left: 20px; } .training-page--marketing .sectionOverview .list li { list-style: disc; } .training-page--marketing .sec-schedule-table .bleft .title { font-weight: 700; } .thumb-wm { --related-icon: url("../image/thumb-wm.svg"); } .thumb-gmp { --related-icon: url("../image/thumb-gmp.svg"); } .thumb-ga { --related-icon: url("../image/thumb-ga.svg"); } .thumb-ads { --related-icon: url("../image/thumb-ads.svg"); } @media (min-width: 768px) and (max-width: 1023px) { .training-page--marketing .section-3feature .grid-3 .item { display: grid; grid-template-columns: min(40%, 320px) minmax(0, 1fr); column-gap: 24px; padding: 20px; } .training-page--marketing .section-3feature .grid-3 .item img { grid-column: 1; grid-row: 1 / 4; align-self: center; } .training-page--marketing .section-3feature .grid-3 .item .label { grid-column: 2; justify-self: start; margin: 0; } .training-page--marketing .section-3feature .grid-3 .item h3 { grid-column: 2; margin: 16px 0; } .training-page--marketing .section-3feature .grid-3 .item .desc { grid-column: 2; margin: 0; } } @media (min-width: 1024px) and (max-width: 1199px) { .training-page--marketing .section-fv-wm .inner { width: calc(100% - 40px); } .training-page--marketing .datearea .pagetitle { font-size: clamp(32px, 4vw, 48px); } .training-page--marketing .section-fv-wm .datearea { flex-wrap: wrap; justify-content: center; gap: 16px; } .training-page--marketing .section-3feature .grid-3 { gap: 24px; } .training-page--marketing .section-teacher .box .txt { padding-inline: 24px; } .training-page--marketing .section-teacher .box .txt .flex { gap: 24px; } .training-page--marketing .section-jyoseimore .flex { gap: 24px; } .training-page--marketing .labelAds { max-width: 100%; gap: 16px; } .training-page--marketing .labelAds li { min-width: 0; padding-inline: 16px; } } @media (max-width: 1023px) { .training-page--marketing .idigi-cta-group--hero { margin-top: 30px; } .training-page--marketing .section-fv-wm .inner { width: 100%; } .training-page--marketing .section-fv-wm .label { max-width: 100%; } .training-page--marketing .section-fv-wm .label li { min-width: 0; min-height: 45px; height: auto; background-size: 100% 100%; font-size: 14px; } .training-page--marketing .section-fv-wm .label li .service-total-note { top: 100%; bottom: auto; width: max-content; max-width: calc(100vw - 40px); margin-top: 8px; font-size: 14px; white-space: normal; } .training-page--marketing .section-fv-wm .jyoseiOuter { margin-bottom: 0; } .training-page--marketing .page-mainimg-wm-child .datearea .pagetitle { display: block; font-size: clamp(24px, 8vw, 32px); line-height: 1.3; text-wrap: balance; } .training-page--marketing .sectionCurriculum .new-item { padding: 20px; } .training-page--marketing .sectionCurriculum .row { display: block; margin: 0 0 4px; font-size: var(--font-size-regular); } .training-page--marketing .sectionCurriculum .sp-table-inner td { padding-inline: 0; } .training-page--marketing .sectionCurriculum .sp-table-inner .syou, .training-page--marketing .sectionCurriculum .sp-table-inner .chapter { padding: 16px; } .training-page--marketing .sectionCurriculum .sp-table-inner .none:empty { display: none; } .training-page--marketing .sectionSwiper { padding: 50px 0; } .training-page--marketing .sectionSwiper .splide { margin-top: 24px; } .training-page--marketing .sectionPrice .tableWrap { width: 100%; overflow-x: auto; border-radius: 10px; } .training-page--marketing .sectionPrice .priceTable { min-width: 600px; table-layout: auto; } .training-page--marketing .sectionPrice .priceTable tr { height: auto; min-height: 0; } .training-page--marketing .sectionPrice .priceTable th, .training-page--marketing .sectionPrice .priceTable td { padding: 16px 12px; font-size: var(--font-size-regular); white-space: nowrap; overflow-wrap: normal; } .training-page--marketing .sectionPrice .priceTable .big { font-size: 20px; } .training-page--marketing .sectionOthers .btn { display: none; } } .training-page--marketing .datearea .num { flex-shrink: 0; } .training-page--marketing .datearea .num .big > span { font-size: 56px; } .training-page--marketing .section-fv-wm .inner .label li:last-child span { font-size: 24px; } @media (max-width: 1023px) { .training-page--marketing .datearea .num .big > span { font-size: 48px; } .training-page--marketing .section-fv-wm .inner .label li:last-child span { font-size: var(--font-size-regular); } .training-page--marketing .section-fv-wm .inner .datearea .pagetitle { font-size: clamp(24px, 8.2vw, 32px); text-wrap: balance; } } @media (max-width: 1023px) { .training-page--marketing .section-teacher::after { width: 100%; } .training-page--marketing .section-teacher .box .txt h3 { font-size: 20px; } .training-page--marketing .section-teacher .box .txt h3 span { margin-top: 4px; font-size: 14px; } .training-page--marketing .section-teacher .box .txt .flex { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; } /* 同じ講師紹介を使い、SPの読み順だけ写真・氏名・資格・紹介文に揃える。 */ .training-page--marketing .section-teacher .box .txt .flex .left { display: contents; } .training-page--marketing .section-teacher .box .txt .flex .left figure { width: 200px; margin: 0 auto; } .training-page--marketing .section-teacher .box .txt .flex .left .desc { order: 1; margin-top: 0; text-align: left; } .training-page--marketing .section-hero .pricing-section { margin-bottom: 0; } .training-page--marketing .section-hero .pricing-section .price-comparison li:first-child p { display: block; } .training-page--marketing .course-header .page-title, .training-page--marketing .section-fv-wm .inner .datearea .pagetitle { font-size: clamp(24px, 7.2vw, 32px); } .training-page--marketing .course-title-end { display: block; } .training-page--marketing .section-hero .pricing-section .price-comparison .big { font-size: clamp(32px, 10.8vw, 48px); } .training-page--marketing .section-hero .pricing-section .price-comparison li:last-child { padding-left: 45px; } .training-page--marketing .section-hero .pricing-section .price-comparison li:last-child::after { width: 32px; height: 32px; } } @media (max-width: 1023px) { .training-page--marketing .page-mainimg-wm-child > .inner { width: 100%; } .training-page--marketing .page-mainimg-wm-child .flex-2 { width: 100%; } .training-page--marketing .page-mainimg-wm-child .jyoseiOuter, .training-page--marketing .section-fv-wm .inner .jyoseiOuter { width: 100%; max-width: 100%; padding-inline: 16px; } .training-page--marketing .jyosei { width: 100%; } .training-page--marketing .jyosei > li { min-width: 0; max-width: 100%; } .training-page--marketing :is(.page-mainimg-wm-child, .section-fv-wm) .inner .jyosei .big { font-size: clamp(32px, 11vw, 48px); } .training-page--marketing .jyosei p { white-space: normal; line-height: 1.4; } } @media (max-width: 374px) { .training-page--marketing .jyosei > li:first-child { font-size: var(--font-size-regular); text-align: center; } .training-page--marketing .jyosei > li:first-child small, .training-page--marketing .jyosei > li:first-child .ttl { display: block; width: 100%; text-align: center; font-size: 14px; } .training-page--marketing .jyosei .mid { font-size: 20px; } .training-page--marketing .section-fv-wm .inner .jyosei li:last-child { padding-left: 32px; font-size: var(--font-size-regular); } .training-page--marketing .section-fv-wm .inner .jyosei li:last-child p { font-size: var(--font-size-regular); } .training-page--marketing .section-fv-wm .inner .jyosei .big, .training-page--marketing .page-mainimg-wm-child .jyosei .big { font-size: 32px; } } /* SP原本はタブレット幅でもSP構成を保ちつつ、見出しと料金帯を横幅に合わせて広げる。 */ @media (min-width: 768px) and (max-width: 1023px) { .training-page--marketing :is(.section-fv-wm, .page-mainimg-wm-child) .inner .datearea .pagetitle { font-size: 39px; text-wrap: normal; } .training-page--marketing .course-title-end { display: inline; } .training-page--marketing :is(.section-fv-wm, .page-mainimg-wm-child) .inner .jyoseiOuter { width: auto; max-width: 100%; padding-inline: 6vw; } .training-page--marketing .section-fv-wm .inner .label li { min-height: 35px; height: 35px; font-size: 12px; } .training-page--marketing .section-fv-wm .inner .label li span { font-size: 17px; } .training-page--marketing .section-fv-wm .inner .label li:last-child span { font-size: 14px; } .training-page--marketing .section-fv-wm .inner .label li .service-total-note { margin-top: 0; font-size: 8px; white-space: nowrap; } .training-page--marketing .section-fv-wm .inner .cate li { font-size: 13.5px; } .training-page--marketing .section-fv-wm .inner .datearea .num { font-size: 15px; } .training-page--marketing .section-fv-wm .inner .jyosei { font-size: 15px; } .training-page--marketing .section-fv-wm .inner .jyosei .mid { font-size: 21px; } .training-page--marketing .section-fv-wm .inner .jyosei .big { font-size: 45px; } .training-page--marketing .section-fv-wm .inner .jyosei p { font-size: 14px; } } .fixedLink { display: none; } @media (min-width: 1024px) { .fixedLink { display: block; position: fixed; left: 15px; bottom: 15px; z-index: 20; width: max(180px, 13vw); max-width: 220px; opacity: 0; pointer-events: none; transition: opacity 0.3s; filter: drop-shadow(0 0 20px rgba(0,0,0,0.2)); } .fixedLink.visible { opacity: 1; pointer-events: auto; } .fixedLink a { display: block; clip-path: circle(50% at 50% 50%); } .fixedLink img { display: block; width: 100%; height: auto; } } @media (prefers-reduced-motion: reduce) { .fixedLink { transition: none; } } @media (max-width: 1023px) { .training-page--marketing > section > .inner > h2 { font-size: clamp(24px, 4vw, 32px); } .training-page--marketing > .sectionPrice > .inner > h2 { font-size: 20px; } .training-page--marketing .sectionPrice h2 em { font-size: 40px; } .training-page--marketing .sectionPrice h2 :is(.price-heading-amount, .price-heading-result) { display: inline-block; max-width: 100%; white-space: nowrap; } } .training-page--marketing .sectionSwiper .splide__arrow { display: flex; width: 40px; height: 40px; } @media (max-width: 767px) { :where(.training-page--marketing) .section-teacher .box .txt .flex .right ul li:before { top: 2px; } } /* デジタルマーケティング研修のSPヒーローとカードを調整する。 */ @media (max-width: 1023px) { .training-page--digital-marketing .section-hero .pricing-section { isolation: isolate; background: transparent; } .training-page--digital-marketing .section-hero .pricing-section::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: skewX(-15deg); background: rgba(255,255,255,0.7); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } } @media (max-width: 767px) { .training-page--digital-marketing .course-features { flex-direction: column; align-items: center; gap: 6px; } .training-page--digital-marketing .course-features li { padding: 4px 8px 2px; font-size: 13px; } .training-page--digital-marketing .course-features li::before { flex-basis: 13px; width: 13px; height: 13px; } .training-page--digital-marketing .course-header .page-title { font-size: clamp(26px, calc(7.2vw + 2px), 34px); } .training-page--digital-marketing .sectionCurriculum .sp-table-inner .syou { padding-block: 12px; } .training-page--digital-marketing .sectionOthers .item h3.thumb-wm::before { top: 18px; } }