.layout { max-width: 1438px; padding: 0 40px; margin: 0 auto; } @media screen and (max-width: 767px) { .layout { padding: 0 10px; } } .imgHover { display: block; transition: all 0.2s ease-in-out; backface-visibility: hidden; backface-visibility: hidden; backface-visibility: hidden; } .imgHover:hover { transform: translateY(-3px); transform: translateY(-3px); } @media screen and (max-width: 767px) { .bg-tools { width: 100%; } } @media screen and (max-width: 767px) { .tools-row { display: block; } } .tools-col { padding-right: 50px; padding-left: 50px; } @media screen and (max-width: 767px) { .tools-col { padding-right: 0; padding-left: 0; } } .col-tools { margin-top: 0; } .col-tools > .heading { font-size: 24px; font-weight: 700; } @media screen and (max-width: 767px) { .col-tools > .heading { font-size: 18px; } } .col-tools > .heading > em { font-size: 32px; font-style: normal; background: rgb(0 0 0 / 0%) linear-gradient(transparent 60%, #ffec0b 0); } @media screen and (max-width: 767px) { .col-tools > .heading > em { font-size: 22px; } } .col-tools > .col-tools-desc { gap: 10px; margin-top: 10px; margin-bottom: 10px; } .col-tools > .col-tools-desc > .left { width: 52%; } @media screen and (max-width: 767px) { .col-tools > .col-tools-desc > .left p { font-size: 16px; line-height: 1.6; } } .col-tools > .col-tools-desc > .left .logo { display: flex; gap: 10px; align-items: center; margin-top: 10px; } @media screen and (max-width: 767px) { .col-tools > .col-tools-desc > .left .logo { margin-top: 30px; } } .col-tools > .col-tools-desc > .left .logo .icon { width: 50px; } .col-tools > .col-tools-desc > .left .logo .text { font-size: 10px; font-weight: 700; line-height: 1; } .col-tools > .col-tools-desc > .left .logo .text .main { display: block; font-size: 20px; } .col-tools > .col-tools-desc > .left .logo .text .sub { display: block; } .col-tools > .col-tools-desc > .left .logo .text span + span { margin-top: 5px; } .col-tools > .col-tools-desc > .image { width: 48%; margin-left: 0; } @media screen and (max-width: 767px) { .col-tools > .col-tools-list { font-size: 16px; } } .col-tools > .button-wrapper { gap: 10px; margin: 40px 0 0; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper { justify-content: flex-start; margin-top: 30px; } } .col-tools > .button-wrapper > * { margin: 0; } .col-tools > .button-wrapper .col-tools-link { width: 250px; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper .col-tools-link { max-width: 180px; } } .col-tools > .button-wrapper .button__small { min-width: 150px; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper .button__small { flex: 1 1 auto; min-width: 140px; } } .plan-column { display: flex; gap: 30px; } @media screen and (max-width: 767px) { .plan-column { display: block; } } .plan-column > .column { position: relative; display: flex; flex-basis: 33%; flex-direction: column; padding: 2vw; border-radius: 20px; box-shadow: 0 0 26px rgb(0 0 0 / 14.1%); transition: 0.3s ease-out; } @media screen and (max-width: 767px) { .plan-column > .column { display: block; padding: 5vw; } } @media screen and (max-width: 767px) { .plan-column > .column + .column { margin-top: 30px; } } .plan-column > .column > .heading { height: 100px; } @media screen and (max-width: 767px) { .plan-column > .column > .heading { height: auto; } } .plan-column > .column:hover { top: -5px; background: #d5d5d5; } .plan-column > .column .block { display: flex; gap: 10px; align-items: center; margin-top: 15px; margin-bottom: 50px; font-size: 16px; } @media screen and (max-width: 767px) { .plan-column > .column .block { display: block; margin-top: 20px; line-height: 2; } } .plan-column > .column .block > .left, .plan-column > .column .block > .right { flex-basis: 50%; } .plan-column > .column .block > .right { margin-top: 20px; } @media screen and (max-width: 767px) { .plan-column > .column .block > .right img { width: 60%; } } .plan-column > .column > .bottom { position: relative; flex: 1; height: 100%; min-height: 0%; padding: 40px 20px 20px; margin-top: 50px; margin-top: auto; background: #f7f7f7; border-radius: 10px; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom { padding: 30px 15px 15px; } } .plan-column > .column > .bottom .heading { position: absolute; top: -20px; left: 50%; padding: 5px 10px; font-size: 18px; color: #fff; white-space: pre; background: #2b3233; border-radius: 20px; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .plan-column > .column > .bottom .heading { padding: 5px 15px; font-size: 16px; } } .plan-column > .column > .bottom ul li { display: flex; font-size: 18px; font-weight: 500; line-height: 1.3; color: #333; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom ul li { font-size: 15px; line-height: 1.4; } } .plan-column > .column > .bottom ul li::before { display: block; width: 18px; min-width: 18px; height: 12px; min-height: 12px; padding-top: 10px; margin-right: 10px; content: ""; background-image: url(https://cloudcircus.jp/dcms_media/other/ic_crown_yellow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom ul li::before { width: 15px; height: 10px; padding-top: 10px; margin-right: 5px; } } .plan-column > .column > .bottom ul li + li { margin-top: 5px; } .sec-banner { position: relative; height: 307px; margin-top: 200px; background: rgb(0 0 0 / 0%) linear-gradient(90deg, #fdf7ff 0%, #fffdd8 100%) 0% 0% no-repeat padding-box; } @media screen and (max-width: 767px) { .sec-banner { height: 260px; } } .sec-banner .block { position: absolute; top: -130px; left: 50%; width: 1200px; height: 360px; padding: 90px 100px; background-image: url(/dcms_media/image/top/banner2.png); background-repeat: no-repeat; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .sec-banner .block { width: 95%; padding: 20px 15px; background-image: url(/dcms_media/image/top/banner2_sp.png); background-size: 100%; } } .sec-banner .block .leadText { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 0.2rem; } @media screen and (max-width: 767px) { .sec-banner .block .leadText { font-size: 18px; line-height: 1.7; } } .sec-banner .block .leadText em { font-style: inherit; background: rgb(0 0 0 / 0%) linear-gradient(transparent 50%, #ffec0b 0); } .sec-banner .block .subText { width: 45%; margin-top: 30px; font-size: 18px; } @media screen and (max-width: 767px) { .sec-banner .block .subText { width: 100%; margin-top: 20px; font-size: 16px; line-height: 2; } } .sec-example { padding-top: 120px; } @media screen and (max-width: 767px) { .sec-example { padding-top: 50px; } } .introduction-list.-kv { grid-template-rows: none; grid-auto-rows: auto; } @media screen and (max-width: 767px) { .introduction-list.-kv { bottom: 16vw; } } .introduction-list.-kv .col { width: 120px; min-width: 100px; padding: 2px 5px; margin-right: 10px; background: #fff; } @media screen and (max-width: 767px) { .introduction-list.-kv .col { width: 60px; min-width: 40px; padding: 2px 6px; margin-right: 5px; } } .introduction-list.-kv.is-moving { animation: moving 40s linear 0s infinite; animation: moving 40s linear 0s infinite; } .introduction-list-wrapper .col { display: flex; align-items: center; justify-content: center; width: 224px; } .introduction-list-wrapper .col img { max-width: 100%; } .introduction { margin-bottom: 100px; } @media screen and (max-width: 767px) { .introduction { margin-bottom: 70px; } } .mb-section { margin-bottom: 100px; } @media screen and (max-width: 767px) { .mb-section { margin-bottom: 70px; } } .bg-tools { padding-top: 100px; } @media screen and (max-width: 767px) { .bg-tools { margin-top: 70px; } } .cta-heading { line-height: 1.5; } @media screen and (max-width: 767px) { .cta-button.type-consult::before { margin-right: 10px; } } .cta-bg.-bottom { margin-top: 80px; } @media screen and (max-width: 767px) { .cta-bg.-bottom { margin-top: 40px; } } .cta-bg .cta { padding-top: 100px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .cta-bg .cta { padding-top: 50px; padding-bottom: 50px; } } .footer-toolNavi-section { padding-top: 100px; padding-bottom: 100px; } @media screen and (max-width: 767px) { .tools-row .col-tools { display: block; } } .renew-content > .inner { width: 100%; max-width: 1200px; } @media screen and (max-width: 767px) { .renew-content > .inner { width: 94%; } } .renew-content > .inner.-w787 { max-width: 787px; } @media screen and (max-width: 767px) { .renew-content > .inner.-w787 { width: 94%; } } .renew-content .tools-row { margin: -110px 0 0 -140px; } @media screen and (max-width: 767px) { .renew-content .tools-row { margin-top: -40px; } } .renew-content .tools-col { flex-wrap: wrap; max-width: 530px; padding: 0; margin-top: 130px; margin-left: 140px; cursor: pointer; } @media screen and (max-width: 767px) { .renew-content .tools-col { margin-top: 50px; } } .renew-content .tools-col.-mt { margin-top: 100px; } @media screen and (max-width: 767px) { .renew-content .tools-col.-mt { margin-top: 50px; } } .renew-content .tools-col > .pa-btob-textbox, .renew-content .tools-col > .textBox { transition: all 0.3s; } .renew-content .tools-col .col-tools::after { display: block; } .renew-content .tools-col:hover .col-tools::after { opacity: 1; } .renew-content .tools-col:hover > .pa-btob-textbox, .renew-content .tools-col:hover > .textBox { background: #fffbbd 0% 0% no-repeat padding-box; } .renew-content .tools-col > .serviceTitle { position: relative; bottom: 0; margin-top: 15px; font-size: 26px; font-weight: 700; } @media screen and (max-width: 767px) { .renew-content .tools-col > .serviceTitle { font-size: 16px; } } .renew-content .tools-col > .serviceTitle > span { position: relative; z-index: 1; } .renew-content .tools-col > .serviceTitle::after { position: absolute; bottom: 7px; left: 0; z-index: 0; display: block; width: 100%; height: 11px; content: ""; background: rgb(0 0 0 / 0%) linear-gradient(90deg, #ffe7de 0%, #ffd8e3 21%, #f4d3ff 39%, #c9d7ff 60%, #cbfff1 77%, #fffabc 100%) 0% 0% no-repeat padding-box; } @media screen and (max-width: 767px) { .renew-content .tools-col > .serviceTitle::after { bottom: 4px; height: 6px; } } .renew-content .tools-col > .textBox { width: 100%; padding: 20px; font-size: 16px; font-weight: 700; background: #fff; border-radius: 20px; } @media screen and (max-width: 767px) { .renew-content .tools-col > .textBox { padding: 14px; font-size: 12px; border-radius: 10px; } } .renew-content .tools-col > .textBox ul li { position: relative; padding-left: 13px; font-weight: 700; } .renew-content .tools-col > .textBox ul li::before { position: absolute; top: 0; left: 0; display: block; content: "・"; } .renew-content .tools-col .col-tools-desc p { max-width: 210px; } .renew-content .tools-col__wide { max-width: 100%; margin-top: 0; } .renew-content .tools-col__wide .col-tools-desc p { max-width: 100%; } .renew-content .col-tools { z-index: 1; width: 100%; margin-top: 30px; } .re-bg-1 { background: rgb(0 0 0 / 0%) linear-gradient(180deg, #f4fbfd 0%, #f9fff4 100%) 0% 0% no-repeat padding-box; } @media screen and (max-width: 767px) { .heading-outer { padding-top: 60px; } } .heading-outer.-type1 { padding-top: 50px; } @media screen and (max-width: 767px) { .heading-outer.-type1 { padding-top: 20px; } } .kv .button-wrapper.-type1 { margin-top: 80px; } @media screen and (max-width: 767px) { .kv .button-wrapper.-type1 { margin-top: 50px; } } @media screen and (max-width: 767px) { .kv .button-wrapper { bottom: 2vw; } } @media screen and (max-width: 767px) { .outer { padding: 50px 0; } } @media screen and (max-width: 767px) { .col-tools-link { max-width: 210px; } } @media screen and (max-width: 767px) { .page-heading-main { width: 100%; } } @media screen and (max-width: 767px) { .page-heading-wrapper { min-height: 330px; padding: 40px 0 30px; } } @media screen and (max-width: 767px) { .page-heading-wrapper .button-wrapper { margin: 0; } } @media screen and (max-width: 767px) { .page-heading-wrapper .button-wrapper .button__full { margin: 0; } } @media screen and (max-width: 767px) { .button__primary .sub { font-size: 12px; font-weight: 300; } } .col-tools-heading .icon { margin-right: 30px; } @media screen and (max-width: 767px) { .col-tools-heading .icon { margin-right: 15px; } } @media screen and (max-width: 767px) { .primary-heading-wrapper { display: flex; align-items: center; } } .primary-heading-wrapper.-type1 { display: block; } .primary-heading { letter-spacing: 0.1rem; } @media screen and (max-width: 767px) { .primary-heading { margin: 0; } } .primary-heading.-type { margin-bottom: 20px; } .megaNavi-heading-link { font-size: 18px; font-weight: 700; } @media screen and (max-width: 767px) { .megaNavi-heading-link { font-size: 16px; } } .header-gnavi-item-inner.-pointer { cursor: pointer; } .header.is-gnav::before { box-shadow: 0 3px 12px #ccc; opacity: 1; } @media screen and (max-width: 767px) { .header.is-gnav::before { box-shadow: none; opacity: 0; } } .header-gnaviChild.type-tools.-seminar { position: fixed; top: 70px; z-index: 5; height: 74px; background: #f2f2f2; } @media all and (min-width: 768px)and (max-width: 1340px) { .header-gnaviChild.type-tools.-seminar { top: 90px; } } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar { position: static; height: auto; } } .header-gnaviChild.type-tools.-seminar .header-gnaviChild-inner { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar .header-gnaviChild-inner { width: 100%; } } .header-gnaviChild.type-tools.-seminar .header-gnaviChild-ui { position: absolute; top: 50%; right: 0; margin-bottom: 0; transform: translateY(-50%); transform: translateY(-50%); } .header-gnaviChild.type-tools.-seminar::before { display: none; } .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner { padding: 20px 0; opacity: 0; transition: all 0.3s ease; } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner { padding: 0; opacity: 1; } } .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner.is-open { opacity: 1; } .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu { display: flex; } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu { display: block; width: 100%; font-weight: 700; } } .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu > li a { font-weight: 700; } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu > li a { display: block; line-height: 44px; } } .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu > li + li { margin-left: 25px; } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu > li + li { margin-left: 0; } } @media screen and (max-width: 767px) { .header-gnaviChild.type-tools.-seminar > .header-gnaviChild-inner > .hoverMegaMenu > li + li a { border-top: 1px solid #ccc; } } .header::before { height: calc(100% + 10px); } @media all and (min-width: 768px)and (max-width: 1340px) { .header-gnaviChild.type-tools.-seminar { height: 74px; } } #contents .main, #contents { width: 94%; max-width: 1120px; margin-right: auto; margin-left: auto; } .page_company #contents, .page_products #contents, .page_tourism #contents, .page_media_publishing #contents, .page_btoc #contents, .page_btob #contents, .page_btob_manufacturing #contents, .page_partner #contents, .page_btoc_manufacturing #contents, .page_trading #contents, .page_it #contents, .page_realestate #contents, .page_price #contents { width: 100%; max-width: inherit; } .page_company .inner { max-width: 1120px; } .company_main { margin-top: 0; } body.media #locator { display: block; margin-top: 25px; } .cmban { position: fixed; right: 0; bottom: 0; z-index: 100; display: none; width: 290px; } @media screen and (max-width: 980px) { .cmban { width: 200px; } } .cmban.is-active { display: block; } .cmban .cmbanimg { width: 100%; } .cmban .cmbanclick { position: absolute; top: 60px; right: 0; z-index: 2; width: 56px; height: auto; cursor: pointer; } @media screen and (max-width: 767px) { .cmban .cmbanclick { top: 30px; right: -10px; } } .section-desc.-large { font-size: 16px; } @media screen and (max-width: 767px) { .section-desc.-large { font-size: 14px; } } .page_2022 > #container > #contents, .page_support > #container > #contents, .page_legal > #container > #contents, .page_cookie > #container > #contents, .page_recruit > #container > #contents, .page_SEO_measure > #container > #contents, .page_content_marketing > #container > #contents, .page_security > #container > #contents { width: 100%; max-width: inherit; font-family: "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif; } .page_2022 > #container > #contents .pageinfoA, .page_support > #container > #contents .pageinfoA, .page_legal > #container > #contents .pageinfoA, .page_cookie > #container > #contents .pageinfoA, .page_recruit > #container > #contents .pageinfoA, .page_SEO_measure > #container > #contents .pageinfoA, .page_content_marketing > #container > #contents .pageinfoA, .page_security > #container > #contents .pageinfoA { margin-top: 0; } @media screen and (max-width: 767px) { .page_2022 > #container > #contents .pageinfoA, .page_support > #container > #contents .pageinfoA, .page_legal > #container > #contents .pageinfoA, .page_cookie > #container > #contents .pageinfoA, .page_recruit > #container > #contents .pageinfoA, .page_SEO_measure > #container > #contents .pageinfoA, .page_content_marketing > #container > #contents .pageinfoA, .page_security > #container > #contents .pageinfoA { padding-top: 0; } } .page_2022 > #container > #contents .pageinfoA .pageinfoAin, .page_support > #container > #contents .pageinfoA .pageinfoAin, .page_legal > #container > #contents .pageinfoA .pageinfoAin, .page_cookie > #container > #contents .pageinfoA .pageinfoAin, .page_recruit > #container > #contents .pageinfoA .pageinfoAin, .page_SEO_measure > #container > #contents .pageinfoA .pageinfoAin, .page_content_marketing > #container > #contents .pageinfoA .pageinfoAin, .page_security > #container > #contents .pageinfoA .pageinfoAin { padding-top: 90px; } .page_2022 > #container > #contents .pageinfoA .pagetitle, .page_support > #container > #contents .pageinfoA .pagetitle, .page_legal > #container > #contents .pageinfoA .pagetitle, .page_cookie > #container > #contents .pageinfoA .pagetitle, .page_recruit > #container > #contents .pageinfoA .pagetitle, .page_SEO_measure > #container > #contents .pageinfoA .pagetitle, .page_content_marketing > #container > #contents .pageinfoA .pagetitle, .page_security > #container > #contents .pageinfoA .pagetitle { margin-bottom: 0; line-height: 1; } .page_2022 > #container > #contents .pageinfoA .pagelead, .page_support > #container > #contents .pageinfoA .pagelead, .page_legal > #container > #contents .pageinfoA .pagelead, .page_cookie > #container > #contents .pageinfoA .pagelead, .page_recruit > #container > #contents .pageinfoA .pagelead, .page_SEO_measure > #container > #contents .pageinfoA .pagelead, .page_content_marketing > #container > #contents .pageinfoA .pagelead, .page_security > #container > #contents .pageinfoA .pagelead { font-size: 14px; } .page_copy_recruit > #container > #contents, .page_recruit > #container > #contents, .page_thanks > #container > #contents, .page_referral > #container > #contents, .page_copy_info_json_ld > #container > #contents, .page_for_creative > #container > #contents, .page_for_any > #container > #contents, .page_cc_plan > #container > #contents, .page_agreement_web > #container > #contents, .page_DX_Academy > #container > #contents, .page_izanai > #container > #contents, .page_fullstar > #container > #contents, .page_creca > #container > #contents, .page_lessar > #container > #contents, .page_appgoose > #container > #contents, .page_bownow > #container > #contents, .page_actibook > #container > #contents, .page_cocoar > #container > #contents, .page_info > #container > #contents, .page_BtoC > #container > #contents, .page_koukoku > #container > #contents, .page_BtoB > #container > #contents, .page_agreement_soft > #container > #contents, .page_BtoP > #container > #contents { width: 100%; max-width: inherit; font-family: "Noto Sans JP", sans-serif, "メイリオ", "Hiragino Kaku Gothic Pro", Meiryo, "MS PGothic", sans-serif; } .page_copy_recruit > #container > #contents .pageinfoA, .page_recruit > #container > #contents .pageinfoA, .page_thanks > #container > #contents .pageinfoA, .page_referral > #container > #contents .pageinfoA, .page_copy_info_json_ld > #container > #contents .pageinfoA, .page_for_creative > #container > #contents .pageinfoA, .page_for_any > #container > #contents .pageinfoA, .page_cc_plan > #container > #contents .pageinfoA, .page_agreement_web > #container > #contents .pageinfoA, .page_DX_Academy > #container > #contents .pageinfoA, .page_izanai > #container > #contents .pageinfoA, .page_fullstar > #container > #contents .pageinfoA, .page_creca > #container > #contents .pageinfoA, .page_lessar > #container > #contents .pageinfoA, .page_appgoose > #container > #contents .pageinfoA, .page_bownow > #container > #contents .pageinfoA, .page_actibook > #container > #contents .pageinfoA, .page_cocoar > #container > #contents .pageinfoA, .page_info > #container > #contents .pageinfoA, .page_BtoC > #container > #contents .pageinfoA, .page_koukoku > #container > #contents .pageinfoA, .page_BtoB > #container > #contents .pageinfoA, .page_agreement_soft > #container > #contents .pageinfoA, .page_BtoP > #container > #contents .pageinfoA { margin-top: 0; } @media screen and (max-width: 767px) { .page_copy_recruit > #container > #contents .pageinfoA, .page_recruit > #container > #contents .pageinfoA, .page_thanks > #container > #contents .pageinfoA, .page_referral > #container > #contents .pageinfoA, .page_copy_info_json_ld > #container > #contents .pageinfoA, .page_for_creative > #container > #contents .pageinfoA, .page_for_any > #container > #contents .pageinfoA, .page_cc_plan > #container > #contents .pageinfoA, .page_agreement_web > #container > #contents .pageinfoA, .page_DX_Academy > #container > #contents .pageinfoA, .page_izanai > #container > #contents .pageinfoA, .page_fullstar > #container > #contents .pageinfoA, .page_creca > #container > #contents .pageinfoA, .page_lessar > #container > #contents .pageinfoA, .page_appgoose > #container > #contents .pageinfoA, .page_bownow > #container > #contents .pageinfoA, .page_actibook > #container > #contents .pageinfoA, .page_cocoar > #container > #contents .pageinfoA, .page_info > #container > #contents .pageinfoA, .page_BtoC > #container > #contents .pageinfoA, .page_koukoku > #container > #contents .pageinfoA, .page_BtoB > #container > #contents .pageinfoA, .page_agreement_soft > #container > #contents .pageinfoA, .page_BtoP > #container > #contents .pageinfoA { padding-top: 0; } } .page_copy_recruit > #container > #contents .pagetitle, .page_recruit > #container > #contents .pagetitle, .page_thanks > #container > #contents .pagetitle, .page_referral > #container > #contents .pagetitle, .page_copy_info_json_ld > #container > #contents .pagetitle, .page_for_creative > #container > #contents .pagetitle, .page_for_any > #container > #contents .pagetitle, .page_cc_plan > #container > #contents .pagetitle, .page_agreement_web > #container > #contents .pagetitle, .page_DX_Academy > #container > #contents .pagetitle, .page_izanai > #container > #contents .pagetitle, .page_fullstar > #container > #contents .pagetitle, .page_creca > #container > #contents .pagetitle, .page_lessar > #container > #contents .pagetitle, .page_appgoose > #container > #contents .pagetitle, .page_bownow > #container > #contents .pagetitle, .page_actibook > #container > #contents .pagetitle, .page_cocoar > #container > #contents .pagetitle, .page_info > #container > #contents .pagetitle, .page_BtoC > #container > #contents .pagetitle, .page_koukoku > #container > #contents .pagetitle, .page_BtoB > #container > #contents .pagetitle, .page_agreement_soft > #container > #contents .pagetitle, .page_BtoP > #container > #contents .pagetitle { margin-bottom: 15px; font-size: 45px; font-weight: 500; } @media screen and (max-width: 767px) { .page_copy_recruit > #container > #contents .pagetitle, .page_recruit > #container > #contents .pagetitle, .page_thanks > #container > #contents .pagetitle, .page_referral > #container > #contents .pagetitle, .page_copy_info_json_ld > #container > #contents .pagetitle, .page_for_creative > #container > #contents .pagetitle, .page_for_any > #container > #contents .pagetitle, .page_cc_plan > #container > #contents .pagetitle, .page_agreement_web > #container > #contents .pagetitle, .page_DX_Academy > #container > #contents .pagetitle, .page_izanai > #container > #contents .pagetitle, .page_fullstar > #container > #contents .pagetitle, .page_creca > #container > #contents .pagetitle, .page_lessar > #container > #contents .pagetitle, .page_appgoose > #container > #contents .pagetitle, .page_bownow > #container > #contents .pagetitle, .page_actibook > #container > #contents .pagetitle, .page_cocoar > #container > #contents .pagetitle, .page_info > #container > #contents .pagetitle, .page_BtoC > #container > #contents .pagetitle, .page_koukoku > #container > #contents .pagetitle, .page_BtoB > #container > #contents .pagetitle, .page_agreement_soft > #container > #contents .pagetitle, .page_BtoP > #container > #contents .pagetitle { margin-bottom: 10px; font-size: 32px; } } .page_CS_BtoB #locator, .page_CS_BtoP #locator, .page_CS_BtoC #locator, .page_support #locator, .page_2022 #locator, .page_thanks_seminer #locator, .page_thanks #locator, .page_bownow_privacy #locator, .page_apply_to_seminar #locator, .page_law #locator, .page_mynumber #locator, .page_privacy #locator, .page_sitemap #locator { display: block; margin-top: 15px; } @media screen and (max-width: 767px) { .page_CS_BtoB #locator, .page_CS_BtoP #locator, .page_CS_BtoC #locator, .page_support #locator, .page_2022 #locator, .page_thanks_seminer #locator, .page_thanks #locator, .page_bownow_privacy #locator, .page_apply_to_seminar #locator, .page_law #locator, .page_mynumber #locator, .page_privacy #locator, .page_sitemap #locator { margin-top: 10px; } } .question-box ul li { font-weight: 700; } .faq-btn { font-weight: 700; } #dcms_layoutPageBlock .question-box ul li::before { z-index: 1; } .bold { font-weight: 700; } .page_content_marketing .header, .page_SEO_measure .header { height: auto; } .page_content_marketing .pageTitleArea, .page_SEO_measure .pageTitleArea { margin-top: 0; } .kv-caution { bottom: 25%; left: 29%; width: 100%; font-size: 11px; color: #555; text-align: center; background: rgb(0 0 0 / 0%); } @media all and (max-width: 1260px) { .kv-caution { bottom: 70px; } } @media screen and (max-width: 767px) { .kv-caution { right: inherit; bottom: 103vw; left: inherit; font-size: 10px; font-size: 2.6666666667vw; transform: translateX(0); transform: translateX(0); } } @media screen and (max-width: 767px) { .kv h1 { position: relative; top: 0; } } @media screen and (max-width: 767px) { .kv h1 img { max-height: 110vh; } } @media screen and (max-width: 767px) { .kv { height: auto; max-height: auto; margin-top: 0; } } .kv > .bannerArea { position: relative; display: flex; flex-direction: column; gap: 0; align-items: flex-end; max-width: 68vw; padding-top: 85px; margin: 0 auto; } @media screen and (max-width: 767px) { .kv > .bannerArea { position: absolute; bottom: 28vw; align-items: center; width: 100vw; max-width: 100vw; padding-top: 0; } } .kv > .bannerArea a { transition: 0.2s ease; } .kv > .bannerArea a:hover { opacity: 0.7; } .kv > .bannerArea a img { width: 20.5vw; max-width: 310px; } @media screen and (max-width: 767px) { .kv > .bannerArea a img { width: 60.4vw; } } .kv > .bannerArea a.b2 { position: relative; right: -0.5vw; margin-top: -0.5vw; } @media screen and (max-width: 767px) { .kv > .bannerArea a.b2 { margin-top: -1vw; } } .kv > .bannerArea a.b2 img { width: 21.2vw; max-width: 100%; max-width: 319px; } @media screen and (max-width: 767px) { .kv > .bannerArea a.b2 img { width: 62vw; } } .kv > .bannerArea a.b3 { position: relative; right: 0.6vw; margin-top: 0.3vw; } @media screen and (max-width: 767px) { .kv > .bannerArea a.b3 { right: 0.3vw; } } .kv > .bannerArea a.b3 img { width: 20.1vw; max-width: 300px; } @media screen and (max-width: 767px) { .kv > .bannerArea a.b3 img { width: 59.5vw; } } @media screen and (max-width: 767px) { .megaNavi-linkGrid.type-tools2 { margin-bottom: 25px !important; } } @media screen and (max-width: 767px) { .megaNavi-linkGrid.type-tools2 .megaNavi-subHeading { display: none; } } .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:nth-child(1), .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:nth-child(4) { width: calc(31.5% - 20px); } .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:nth-child(3) { width: calc(18.5% - 20px); } .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:nth-child(2) { width: calc(50% - 20px); } .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:nth-child(2) .megaNavi-link-list-item { width: calc(50% - 20px); } .megaNavi-linkGrid.type-tools2 .megaNavi-linkGrid-item:last-child { width: calc(68.5% - 20px); } #contents .pa-partner-sec1 > .column > .left .block2 > .title { white-space: pre; } .img-sec2 { display: flex; justify-content: center; margin-top: 60px; } @media screen and (max-width: 767px) { .img-sec2 { display: none; } } .bg-white { background: #fff; } .section-plan { padding-top: 100px; } @media screen and (max-width: 767px) { .section-plan { padding-top: 50px; } } .section-plan .inner { max-width: 2000px; } .bg-case::before { top: 230px; } .pa-renew-success { width: calc(100% - 100px); padding-bottom: 130px; margin-bottom: 130px; background: rgb(0 0 0 / 0%) linear-gradient(180deg, #fffbfa 0%, #f4fbfd 100%) 0% 0% no-repeat padding-box; border-radius: 0 100px 100px 0; } @media screen and (max-width: 767px) { .pa-renew-success { width: calc(100% - 20px); padding-right: 15px; padding-bottom: 50px; } } .pa-renew-success > .inner { position: relative; left: 50px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner { left: 10px; } } .pa-renew-success > .inner > .text { font-size: 28px; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .pa-renew-success > .inner > .text { font-size: 16px; } } .pa-renew-success > .inner > .text .line { background: linear-gradient(transparent 50%, #ffec0b 50%); } .pa-renew-success > .inner .column { display: flex; flex-wrap: wrap; margin-top: -40px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column { display: block; margin-top: -20px; } } .pa-renew-success > .inner .column .item { width: 50%; margin-top: 100px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column .item { width: 100%; margin-top: 30px; } } .pa-renew-success > .inner .column .item > .text { width: 530px; font-size: 16px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column .item > .text { width: 100%; font-size: 13px; } } .pa-renew-success > .inner .column .item > .text.-right { padding-left: 70px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column .item > .text.-right { padding-left: 0; } } .pa-renew-success > .inner .column .item > .text.-left { padding-right: 70px; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column .item > .text.-left { padding-right: 0; } } .pa-renew-success > .inner .column .item > .text > .title { margin-bottom: 20px; font-size: 20px; font-weight: 700; line-height: 1.4; } @media screen and (max-width: 767px) { .pa-renew-success > .inner .column .item > .text > .title { font-size: 14px; } } .pa-renew-plan { padding-bottom: 130px; margin-left: 100px; background: rgb(0 0 0 / 0%) linear-gradient(180deg, #f4fbfd 0%, #fdf7ff 100%) 0% 0% no-repeat padding-box; border-radius: 100px 0 0 100px; } @media screen and (max-width: 767px) { .pa-renew-plan { padding-bottom: 50px; margin-left: 15px; } } .pa-renew-plan .heading-outer { position: relative; left: 50px; } @media screen and (max-width: 767px) { .pa-renew-plan .heading-outer { left: 10px; } } @media screen and (max-width: 767px) { .pa-renew-plan .heading-outer > .inner { width: 100%; } } .pa-renew-plan > .inner { position: relative; left: 50px; } @media screen and (max-width: 767px) { .pa-renew-plan > .inner { left: 0; } } .pa-renew-plan > .inner > .text { text-align: center; } .pa-renew-plan > .inner > .column { display: flex; flex-wrap: wrap; margin-left: -50px; } @media screen and (max-width: 767px) { .pa-renew-plan > .inner > .column { margin-top: 15px; margin-left: -15px; } } .pa-renew-plan > .inner > .column > .item { position: relative; width: 296px; height: 300px; margin-top: 50px; margin-left: 50px; background: #fff; } @media screen and (max-width: 767px) { .pa-renew-plan > .inner > .column > .item { width: calc(50vw - 30px); height: calc(50vw - 30px); margin-top: 15px; margin-left: 15px; } } .pa-renew-plan > .inner > .column > .item > img { position: absolute; top: calc(50% - 10px); left: 50%; transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media screen and (max-width: 767px) { .pa-renew-plan > .inner > .column > .item > img { width: 60px; } } .pa-renew-plan > .inner > .column > .item > .text { position: absolute; bottom: 30px; width: 100%; font-weight: 700; line-height: 1.3; text-align: center; } @media screen and (max-width: 767px) { .pa-renew-plan > .inner > .column > .item > .text { bottom: 10px; font-size: 13px; } } .pa-renew-plan > .inner > .button-wrapper { margin-top: 80px; } @media screen and (max-width: 767px) { .pa-renew-plan > .inner > .button-wrapper { margin-top: 40px; } } .pa-btob-sec1 { margin-top: 40px; } .pa-btob-sec1 > .title { display: flex; justify-content: space-between; } .pa-btob-sec1 > .title > .img { display: flex; margin-left: -10px; } .pa-btob-sec1 > .title > .img img { width: 95px; margin-left: 10px; } .pa-btob-sec1 > .title > .text { font-size: 18px; font-weight: 700; line-height: 1.3; } .pa-btob-sec1 > .title > .text > .main { font-size: 38px; } .pa-btob-sec1 > .content { display: flex; margin-top: 35px; } .pa-btob-sec1 > .content > .left { font-size: 18px; } .pa-btob-sec1 > .content > .left > .col-tools-list { margin-top: 20px; } .pa-btob-sec1 > .content > .right { min-width: 310px; margin-left: 70px; } .pa-btob-sec1 > .col-tools-link { display: flex; margin: 60px auto 0; } .pa-btob-sec2 > .text { margin-top: 80px; font-weight: 700; text-align: center; letter-spacing: 0.2rem; } @media screen and (max-width: 767px) { .pa-btob-sec2 > .text { margin-top: 50px; letter-spacing: normal; } } .pa-btob-sec2 > .text > .inner { position: relative; font-size: 20px; } @media screen and (max-width: 767px) { .pa-btob-sec2 > .text > .inner { font-size: 12px; } } .pa-btob-sec2 > .text > .inner::after, .pa-btob-sec2 > .text > .inner::before { position: absolute; bottom: -5px; display: block; width: 2px; height: 20px; content: ""; background: #707070; } @media screen and (max-width: 767px) { .pa-btob-sec2 > .text > .inner::after, .pa-btob-sec2 > .text > .inner::before { bottom: -3px; height: 14px; } } .pa-btob-sec2 > .text > .inner::before { left: -14px; transform: rotate(-45deg); transform: rotate(-45deg); } @media screen and (max-width: 767px) { .pa-btob-sec2 > .text > .inner::before { left: -7px; } } .pa-btob-sec2 > .text > .inner::after { right: -14px; transform: rotate(45deg); transform: rotate(45deg); } @media screen and (max-width: 767px) { .pa-btob-sec2 > .text > .inner::after { right: -7px; } } .pa-btob-sec2 .cta-buttons { margin-top: -5px; } .pa-btob-sec2 .cta-buttons .type-download::before { width: 130px; height: 75px; } @media screen and (max-width: 767px) { .pa-btob-sec2 .cta-buttons .type-download::before { width: 64px; height: 40px; } } .pa-btob-sec2 .cta-buttons .cta-button { width: 720px; height: 130px; } @media screen and (max-width: 767px) { .pa-btob-sec2 .cta-buttons .cta-button { width: 100%; height: 70px; } } .pa-btob-sec2 .cta-buttons .cta-button .main-text { font-size: 24px; } @media screen and (max-width: 767px) { .pa-btob-sec2 .cta-buttons .cta-button .main-text { font-size: 14px; } } .pa-btob-sec2 .cta-buttons .cta-button .sub-text { font-size: 16px; } @media screen and (max-width: 767px) { .pa-btob-sec2 .cta-buttons .cta-button .sub-text { font-size: 1rem; } } .pa-btob-textbox { width: 530px; padding: 15px 20px; margin: 0 auto 30px; background: #fff; border-radius: 10px; } @media screen and (max-width: 767px) { .pa-btob-textbox { width: 100%; padding: 10px; } } .pa-btob-textbox ul li { position: relative; padding-left: 13px; font-weight: 700; } @media screen and (max-width: 767px) { .pa-btob-textbox ul li { font-size: 12px; } } .pa-btob-textbox ul li::before { position: absolute; top: 0; left: 0; display: block; content: "・"; } .pa-partner-sec1 > .column { display: flex; align-items: flex-end; justify-content: space-between; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column { flex-direction: column-reverse; } } .pa-partner-sec1 > .column .title { font-size: 38px; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column .title { font-size: 20px; line-height: 1.4; text-align: center; } } .pa-partner-sec1 > .column .title > .sub { font-size: 18px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column .title > .sub { font-size: 12px; } } .pa-partner-sec1 > .column > .left .block { position: relative; width: 660px; padding: 30px; margin-top: 35px; border: 2px solid #747474; border-radius: 10px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block { width: 100%; padding: 30px 20px 20px; } } .pa-partner-sec1 > .column > .left .block > .title { position: absolute; top: -20px; left: 50%; width: fit-content; width: fit-content; width: fit-content; padding: 0 30px; font-size: 20px; font-weight: 700; background: #fbf8fe; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > .title { top: -12px; padding: 0 15px; font-size: 16px; } } .pa-partner-sec1 > .column > .left .block > ul { display: flex; justify-content: space-between; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > ul { flex-wrap: wrap; margin-top: -10px; } } .pa-partner-sec1 > .column > .left .block > ul > li { display: flex; align-items: center; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > ul > li { margin-top: 10px; } } .pa-partner-sec1 > .column > .left .block > ul > li img { width: 50px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > ul > li img { width: 35px; } } .pa-partner-sec1 > .column > .left .block > ul > li > .name { margin-left: 10px; font-size: 20px; font-weight: 700; line-height: 1.1; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > ul > li > .name { font-size: 16px; } } .pa-partner-sec1 > .column > .left .block > ul > li > .name > .sub { font-size: 14px; font-weight: 400; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .left .block > ul > li > .name > .sub { font-size: 10px; } } .pa-partner-sec1 > .column > .left .block > ul + ul { justify-content: center; margin-top: 30px; margin-left: -40px; } .pa-partner-sec1 > .column > .left .block > ul + ul li { margin-left: 40px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .column > .right img { width: 80%; margin-top: 40px; } } @media screen and (max-width: 767px) { .pa-partner-sec1 > .button-wrapper { margin-top: 30px; } } .pa-partner-sec1 > .subtitle { margin-top: 50px; font-size: 24px; line-height: 1.3; text-align: left; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .subtitle { margin-top: 30px; font-size: 18px; text-align: center; } } .pa-partner-sec1 > .col-tools-desc { align-items: flex-start; justify-content: space-between; margin-top: 30px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .col-tools-desc { display: block; margin-top: 20px; } } .pa-partner-sec1 > .col-tools-desc > .left { width: 486px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .col-tools-desc > .left { min-width: inherit; } } @media screen and (max-width: 767px) { .pa-partner-sec1 > .col-tools-desc > .left .col-tools-list { margin-top: 20px; } } .pa-partner-sec1 > .col-tools-desc > .button-wrapper { width: 496px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .col-tools-desc > .button-wrapper { width: 100%; margin-top: 30px; margin-left: 0; } } .pa-partner-sec1 > .col-tools-desc > .button-wrapper > .button { align-items: center; height: 80px; } @media screen and (max-width: 767px) { .pa-partner-sec1 > .col-tools-desc > .button-wrapper > .button { height: 50px; } } .ccfc-plan { max-width: 1090px; margin: 40px auto 0; } .ccfc-plan > .title { font-size: 20px; font-weight: 700; } @media screen and (max-width: 767px) { .ccfc-plan > .title { font-size: 16px; } } .ccfc-plan > .card { padding: 20px 30px; margin-top: 10px; border: 1px solid #eaeaea; border-radius: 20px; box-shadow: 0 3px 10px rgb(0 0 0 / 15%); } @media screen and (max-width: 767px) { .ccfc-plan > .card { padding: 15px; } } .ccfc-plan > .card > .title { display: flex; align-items: center; font-size: 36px; font-weight: 700; } @media screen and (max-width: 767px) { .ccfc-plan > .card > .title { font-size: 28px; } } .ccfc-plan > .card > .title > .img { margin-left: 40px; } @media screen and (max-width: 767px) { .ccfc-plan > .card > .title > .img { margin-left: 20px; } } .ccfc-plan > .card > .text { margin-top: 30px; font-size: 16px; font-weight: 400; } @media screen and (max-width: 767px) { .ccfc-plan > .card > .text { font-size: 14px; } } .ccfc-plan > .card + .title { margin-top: 40px; } .ccfc-tool-column { display: flex; justify-content: space-between; max-width: 1300px; margin-top: 80px; } @media screen and (max-width: 980px) { .ccfc-tool-column { display: block; margin-top: 40px; } } .ccfc-tool-column > .left { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 830px; } @media screen and (max-width: 1260px) { .ccfc-tool-column > .left { width: 730px; } } @media screen and (max-width: 767px) { .ccfc-tool-column > .left { display: block; width: 100%; margin-right: 0; } } .ccfc-tool-column > .right { width: 400px; } @media screen and (max-width: 1260px) { .ccfc-tool-column > .right { width: 350px; } } @media screen and (max-width: 980px) { .ccfc-tool-column > .right { width: 100%; margin-top: 40px; } } .ccfc-tool-column__title { position: relative; width: 100%; padding-bottom: 10px; font-size: 16px; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .ccfc-tool-column__title { padding-bottom: 5px; } } .ccfc-tool-column__title::after { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 1px; content: ""; border-bottom: 1px dashed #707070; } .ccfc-tool-column__card { max-width: 400px; padding: 0 0 20px; margin-top: 40px; overflow: hidden; border: 1px solid #eaeaea; border-radius: 20px; box-shadow: 0 3px 10px rgb(0 0 0 / 15%); } @media screen and (max-width: 1260px) { .ccfc-tool-column__card { width: 350px; } } @media screen and (max-width: 767px) { .ccfc-tool-column__card { width: 100%; margin-top: 20px; } } .ccfc-tool-column__card > .sub { display: flex; align-items: center; justify-content: center; width: 224px; height: 38px; font-size: 12px; font-weight: 400; color: #fff; background: #000; border-radius: 0 0 20px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .sub { width: 70%; } } .ccfc-tool-column__card > .innerItem { display: flex; flex-wrap: wrap; justify-content: center; padding: 0 50px; margin-top: 20px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem { padding: 0 15px; } } .ccfc-tool-column__card > .innerItem > .title { width: 100%; font-size: 23px; font-weight: 700; text-align: center; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem > .title { font-size: 18px; } } .ccfc-tool-column__card > .innerItem > .serviceWrap { display: flex; flex-wrap: wrap; align-items: center; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem > .serviceWrap { justify-content: center; } } .ccfc-tool-column__card > .innerItem > .serviceWrap.-item2 { padding-top: 40px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem > .serviceWrap.-item2 { padding-top: 0; } } .ccfc-tool-column__card > .innerItem .service { display: flex; justify-content: flex-start; width: 220px; margin-top: 20px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem .service { width: 72%; } } .ccfc-tool-column__card > .innerItem .service > .img { margin-right: 10px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem .service > .img { width: 50px; } } .ccfc-tool-column__card > .innerItem .service > .img.-sp-l { width: auto; } .ccfc-tool-column__card > .innerItem .service > .text { line-height: 1.2; } .ccfc-tool-column__card > .innerItem .service > .text .sub { font-size: 12px; font-weight: 400; } .ccfc-tool-column__card > .innerItem .service > .text .main { font-size: 30px; } @media screen and (max-width: 767px) { .ccfc-tool-column__card > .innerItem .service > .text .main { font-size: 24px; } } .ccfc-tool-column__card > .innerItem .service + .service { margin-top: 10px; } .ccfc-tool-column__card > .innerItem > .text { margin-top: 30px; font-size: 14px; font-weight: 400; } @media screen and (max-width: 767px) { .bg-tools { width: 100%; } } @media screen and (max-width: 767px) { .tools-row { display: block; } } .tools-col { padding-right: 50px; padding-left: 50px; } @media screen and (max-width: 767px) { .tools-col { padding-right: 0; padding-left: 0; } } .col-tools { margin-top: 0; } .col-tools > .heading { font-size: 24px; font-weight: 700; } @media screen and (max-width: 767px) { .col-tools > .heading { font-size: 18px; } } .col-tools > .heading > em { font-size: 32px; font-style: normal; background: rgb(0 0 0 / 0%) linear-gradient(transparent 60%, #ffec0b 0); } @media screen and (max-width: 767px) { .col-tools > .heading > em { font-size: 22px; } } .col-tools > .col-tools-desc { gap: 10px; margin-top: 10px; margin-bottom: 10px; } .col-tools > .col-tools-desc > .left { width: 52%; } @media screen and (max-width: 767px) { .col-tools > .col-tools-desc > .left p { font-size: 16px; line-height: 1.6; } } .col-tools > .col-tools-desc > .left .logo { display: flex; gap: 10px; align-items: center; margin-top: 10px; } @media screen and (max-width: 767px) { .col-tools > .col-tools-desc > .left .logo { margin-top: 30px; } } .col-tools > .col-tools-desc > .left .logo .icon { width: 50px; } .col-tools > .col-tools-desc > .left .logo .text { font-size: 10px; font-weight: 700; line-height: 1; } .col-tools > .col-tools-desc > .left .logo .text .main { display: block; font-size: 20px; } .col-tools > .col-tools-desc > .left .logo .text .sub { display: block; } .col-tools > .col-tools-desc > .left .logo .text span + span { margin-top: 5px; } .col-tools > .col-tools-desc > .image { width: 48%; margin-left: 0; } @media screen and (max-width: 767px) { .col-tools > .col-tools-list { font-size: 16px; } } .col-tools > .button-wrapper { gap: 10px; margin: 40px 0 0; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper { justify-content: flex-start; margin-top: 30px; } } .col-tools > .button-wrapper > * { margin: 0; } .col-tools > .button-wrapper .col-tools-link { width: 250px; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper .col-tools-link { max-width: 180px; } } .col-tools > .button-wrapper .button__small { min-width: 150px; } @media screen and (max-width: 767px) { .col-tools > .button-wrapper .button__small { flex: 1 1 auto; min-width: 140px; } } .plan-column { display: flex; gap: 30px; } @media screen and (max-width: 767px) { .plan-column { display: block; } } .plan-column > .column { position: relative; display: flex; flex-basis: 33%; flex-direction: column; padding: 2vw; border-radius: 20px; box-shadow: 0 0 26px rgb(0 0 0 / 14.1%); transition: 0.3s ease-out; } @media screen and (max-width: 767px) { .plan-column > .column { display: block; padding: 5vw; } } @media screen and (max-width: 767px) { .plan-column > .column + .column { margin-top: 30px; } } .plan-column > .column > .heading { height: 100px; } @media screen and (max-width: 767px) { .plan-column > .column > .heading { height: auto; } } .plan-column > .column:hover { top: -5px; background: #d5d5d5; } .plan-column > .column .block { display: flex; gap: 10px; align-items: center; margin-top: 15px; margin-bottom: 50px; font-size: 16px; } @media screen and (max-width: 767px) { .plan-column > .column .block { display: block; margin-top: 20px; line-height: 2; } } .plan-column > .column .block > .left, .plan-column > .column .block > .right { flex-basis: 50%; } .plan-column > .column .block > .right { margin-top: 20px; } @media screen and (max-width: 767px) { .plan-column > .column .block > .right img { width: 60%; } } .plan-column > .column > .bottom { position: relative; flex: 1; height: 100%; min-height: 0%; padding: 40px 20px 20px; margin-top: 50px; margin-top: auto; background: #f7f7f7; border-radius: 10px; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom { padding: 30px 15px 15px; } } .plan-column > .column > .bottom .heading { position: absolute; top: -20px; left: 50%; padding: 5px 10px; font-size: 18px; color: #fff; white-space: pre; background: #2b3233; border-radius: 20px; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .plan-column > .column > .bottom .heading { padding: 5px 15px; font-size: 16px; } } .plan-column > .column > .bottom ul li { display: flex; font-size: 18px; font-weight: 500; line-height: 1.3; color: #333; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom ul li { font-size: 15px; line-height: 1.4; } } .plan-column > .column > .bottom ul li::before { display: block; width: 18px; min-width: 18px; height: 12px; min-height: 12px; padding-top: 10px; margin-right: 10px; content: ""; background-image: url(https://cloudcircus.jp/dcms_media/other/ic_crown_yellow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; } @media screen and (max-width: 767px) { .plan-column > .column > .bottom ul li::before { width: 15px; height: 10px; padding-top: 10px; margin-right: 5px; } } .plan-column > .column > .bottom ul li + li { margin-top: 5px; } .sec-banner { position: relative; height: 307px; margin-top: 200px; background: rgb(0 0 0 / 0%) linear-gradient(90deg, #fdf7ff 0%, #fffdd8 100%) 0% 0% no-repeat padding-box; } @media screen and (max-width: 767px) { .sec-banner { height: auto; margin-top: 50px; } } .sec-banner .block { position: absolute; top: -130px; left: 50%; width: 1200px; height: 360px; padding: 90px 100px; background-image: url(/dcms_media/image/top/banner2.png); background-repeat: no-repeat; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .sec-banner .block { width: 95%; padding: 20px 15px; background-image: url(/dcms_media/image/top/banner2_sp.png); background-size: 100%; } } .sec-banner .block .leadText { font-size: 32px; font-weight: 700; line-height: 1.5; letter-spacing: 0.2rem; } @media screen and (max-width: 767px) { .sec-banner .block .leadText { font-size: 18px; line-height: 1.7; } } .sec-banner .block .leadText em { font-style: inherit; background: rgb(0 0 0 / 0%) linear-gradient(transparent 50%, #ffec0b 0); } .sec-banner .block .subText { width: 45%; margin-top: 30px; font-size: 18px; } @media screen and (max-width: 767px) { .sec-banner .block .subText { width: 100%; margin-top: 20px; font-size: 16px; line-height: 2; } } .sec-example { padding-top: 120px; } @media screen and (max-width: 767px) { .sec-example { padding-top: 50px; } } .top-bannerSection { display: flex; flex-wrap: wrap; gap: 40px; justify-content: center; padding: 70px 30px; } @media screen and (max-width: 767px) { .top-bannerSection { gap: 30px; padding: 40px 15px; } } .top-bannerSection > .banner { display: block; line-height: 1; box-shadow: 0 0 14px -6px rgb(0 0 0 / 60%); transition: 0.3s all ease; } .top-bannerSection > .banner:hover { opacity: 0.8; } .carousel-wrapper { padding-bottom: 80px; overflow: hidden; } @media screen and (max-width: 767px) { .carousel-wrapper { padding-bottom: 50px; } } .carousel-wrapper > .innerArea { position: relative; width: 84vw; max-width: 1480px; margin: 0 auto; } @media screen and (max-width: 1260px) { .carousel-wrapper > .innerArea { width: 94vw; height: 52vw; } } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea { width: 100vw; height: auto; padding: 40px 15px 0; } } .carousel-wrapper > .innerArea > .secondary-heading { margin-bottom: 30px; font-size: 32px; } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea > .secondary-heading { font-size: 24px; } } .carousel-wrapper > .innerArea .swiper-container { overflow: visible; } .carousel-wrapper > .innerArea .swiper-wrapper { width: unset; height: unset; } .carousel-wrapper > .innerArea .swiper-slide { max-width: 450px; } .carousel-wrapper > .innerArea .swiper-slide .img { overflow: hidden; border-radius: 10px; } .carousel-wrapper > .innerArea .swiper-slide .img img { height: 200px; object-fit: contain; object-fit: contain; } .carousel-wrapper > .innerArea .swiper-slide .textContent { padding: 15px 0; } .carousel-wrapper > .innerArea .swiper-slide .textContent .label { display: inline-flex; align-items: center; justify-content: center; width: 186px; height: 27px; font-family: Roboto; font-size: 14px; color: #fff; background: #2f3840; border-radius: 14px; } .carousel-wrapper > .innerArea .swiper-slide .textContent .title { font-size: 18px; font-weight: 700; } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea .swiper-slide .textContent .title { font-size: 16px; } } .carousel-wrapper > .innerArea .swiper-slide .textContent .date { margin-top: 10px; font-family: Roboto; font-size: 13px; color: #c7c7c7; } .carousel-wrapper > .innerArea .swiper-slide .textContent .taglist { display: block; margin-top: 10px; } .carousel-wrapper > .innerArea .swiper-button-wrap { position: absolute; top: -70px; right: 90px; display: flex; align-items: center; width: 220px; height: 45px; } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea .swiper-button-wrap { position: static; top: inherit; bottom: 0; width: fit-content; width: fit-content; width: fit-content; margin: 20px auto 0; } } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-pagination { position: static; display: flex; flex-direction: row-reverse; align-items: center; margin-right: 20px; font-family: Roboto; font-weight: 700; line-height: 1; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-pagination .swiper-pagination-current { font-size: 24px; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-pagination .swiper-pagination-total { display: flex; font-size: 16px; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-pagination .swiper-pagination-total::before { display: block; margin: 0 8px; content: "/"; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-prev, .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-next { position: static; display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 45px; height: 45px; margin-top: 0; background: #fff; border-radius: 50%; box-shadow: 0 0 6px rgb(0 0 0 / 14.1%); } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-prev::after, .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-next::after { display: block; content: ""; border-top: 6px solid rgb(0 0 0 / 0%); border-bottom: 6px solid rgb(0 0 0 / 0%); border-left: 6px solid #2f3840; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-prev { margin-right: 10px; } .carousel-wrapper > .innerArea .swiper-button-wrap > .swiper-button-prev::after { transform: rotate(180deg); transform: rotate(180deg); } .carousel-wrapper > .innerArea .button { position: absolute; bottom: -30px; left: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; width: 300px; height: 60px; margin: auto auto 0; font-size: 15px; color: red; background: #fff; border: 1px solid red; border-radius: 60px; box-shadow: 0 3px 10px rgb(0 0 0 / 25.1%); transition: all 0.3s ease; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea .button { position: static; width: 90vw; margin-top: 30px; transform: translateX(0); transform: translateX(0); } } .carousel-wrapper > .innerArea .button:hover { background-color: red; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .carousel-wrapper > .innerArea .button:hover { transform: translateX(0); transform: translateX(0); } } .event-content { padding-top: 100px; padding-bottom: 80px; background: rgb(0 0 0 / 0%) linear-gradient(0deg, #f4fbfd 0%, #fdf7ff 100%) 0% 0% no-repeat padding-box; } @media screen and (max-width: 767px) { .event-content { padding: 50px 15px; } } .main-visual { padding: 55px 20px 65px; background: rgb(0 0 0 / 0%) linear-gradient(90deg, #fffdd9 0%, #f6fceb 54%, #f4fcf0 69%, #f2fcf3 85%, #edfbfe 100%); } @media screen and (max-width: 767px) { .main-visual { height: auto; padding: 30px 15px 40px; } } .main-visual > .innerArea { max-width: 1200px; margin: 0 auto; } .main-visual > .innerArea .heading { margin-top: 0; font-size: 32px; font-weight: 700; } @media screen and (max-width: 767px) { .main-visual > .innerArea .heading { font-size: 24px; } } .main-visual > .innerArea .text { margin-top: 20px; font-size: 18px; } @media screen and (max-width: 767px) { .main-visual > .innerArea .text { margin-top: 10px; font-size: 16px; } } .search-section { padding: 60px 20px; } @media screen and (max-width: 767px) { .search-section { padding: 30px 15px 0; } } .search-section > .searchArea { display: flex; align-items: center; justify-content: center; max-width: 1200px; padding: 40px 0; margin: 0 auto; background: rgb(0 0 0 / 0%) linear-gradient(270deg, #eafaff 0%, #fdf5ff 100%); border-radius: 73px; } @media screen and (max-width: 767px) { .search-section > .searchArea { display: block; padding: 20px 10px; border-radius: 20px; } } .search-section > .searchArea > .text { margin-right: 45px; font-size: 22px; font-weight: 700; } @media screen and (max-width: 767px) { .search-section > .searchArea > .text { margin-right: 0; text-align: center; } } .search-section > .searchArea > form { position: relative; display: flex; flex-shrink: 0; align-items: center; width: 100%; max-width: 790px; } @media screen and (max-width: 767px) { .search-section > .searchArea > form { margin-top: 10px; } } .search-section > .searchArea > form [type="text"] { width: calc(100% - 63px); height: 50px; padding: 0 20px; border: none; border-radius: 10px 0 0 10px; border-radius: 25px 0 0 25px; box-shadow: 0 0 8px rgb(0 0 0 / 18%); } @media screen and (max-width: 767px) { .search-section > .searchArea > form [type="text"] { width: calc(100% - 60px); height: 45px; padding: 0 15px; } } .search-section > .searchArea > form [type="text"]:placeholder { color: #c1c1c1; } .search-section > .searchArea > form [type="submit"] { position: relative; display: inline-block; width: 63px; height: 50px; color: #fff; background-image: url(/dcms_media/image/icon_search.png); background-repeat: no-repeat; border: none; border-radius: 0 40px 40px 0; outline: none; box-shadow: 0 0 8px rgb(0 0 0 / 18%); transition: 0.3s ease; } @media screen and (max-width: 767px) { .search-section > .searchArea > form [type="submit"] { width: 60px; height: 45px; background-size: contain; } } .search-section > .searchArea > form [type="submit"]:hover { opacity: 0.7; } .seminar-block > .innerArea { max-width: 1200px; padding: 60px 40px; margin: 0 auto; background: #fff; border-radius: 100px; box-shadow: 0 0 28px rgb(0 0 0 / 7.84%); } @media screen and (max-width: 767px) { .seminar-block > .innerArea { padding: 30px 15px; margin-top: 0; border-radius: 40px; box-shadow: 0 0 28px rgb(0 0 0 / 7.84%); } } .seminar-block > .innerArea > .secondary-heading { margin-bottom: 30px; font-size: 32px; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .secondary-heading { font-size: 24px; } } .seminar-block > .innerArea > .text { font-size: 16px; line-height: 1.7; text-align: center; } .seminar-block > .innerArea > .text .note { font-size: 14px; color: #666; } .seminar-block > .innerArea > .tabBtns { display: flex; flex-wrap: wrap; align-items: center; margin-top: 20px; margin-left: -10px; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns { margin-top: 0; } } .seminar-block > .innerArea > .tabBtns > li { display: flex; flex-shrink: 0; align-items: center; width: calc(16.6666666667% - 10px); height: 50px; padding: 0 20px; margin-top: 10px; margin-left: 10px; font-size: 16px; font-weight: 700; cursor: pointer; border-radius: 25px; transition: 0.3s ease; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns > li { display: block; width: calc(25% - 10px); padding: 0; margin-top: 20px; font-size: 11px; line-height: 1.5; text-align: center; } } .seminar-block > .innerArea > .tabBtns > li.is-active, .seminar-block > .innerArea > .tabBtns > li:hover { color: #fff; background: #34393e; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns > li.is-active, .seminar-block > .innerArea > .tabBtns > li:hover { color: #000; background: #fff; opacity: 0.6; } } .seminar-block > .innerArea > .tabBtns > li > img { flex-shrink: 0; width: 32px; margin-right: 8px; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns > li > img { width: 36px; margin-right: 0; } } .seminar-block > .innerArea > .tabBtns2 { display: flex; gap: 30px; justify-content: space-between; margin-top: 40px; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns2 { flex-wrap: wrap; gap: 15px; margin-top: 20px; } } .seminar-block > .innerArea > .tabBtns2 .tabItem { position: relative; display: flex; flex-basis: 33.3333333333%; align-items: center; justify-content: center; height: 70px; font-size: 20px; font-weight: 700; color: #333; cursor: pointer; background-repeat: no-repeat; background-position: 10px 50%; background-size: 50px 50px; border-radius: 38px; box-shadow: 0 0 14px rgb(0 0 0 / 16.1%); } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns2 .tabItem { flex-basis: 100%; height: 55px; font-size: 15px; } } .seminar-block > .innerArea > .tabBtns2 .tabItem.is-active { color: #fff; background-color: #34393e; } .seminar-block > .innerArea > .tabBtns2 .tabItem.is-active::before { position: absolute; bottom: -10px; left: 50%; display: block; width: 0; height: 0; content: ""; border-color: #34393e rgb(0 0 0 / 0%) rgb(0 0 0 / 0%); border-style: solid; border-width: 25px 25px 0; transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabBtns2 .tabItem.is-active::before { display: none; } } .seminar-block > .innerArea > .tabBtns2 .tabItem.-btob { background-image: url(/dcms_media/image/icon_btob.svg); } .seminar-block > .innerArea > .tabBtns2 .tabItem.-btoc { background-image: url(/dcms_media/image/icon_btoc.svg); } .seminar-block > .innerArea > .tabBtns2 .tabItem.-print { background-image: url(/dcms_media/image/icon_print.svg); } .seminar-block > .innerArea > .tabContent { margin-top: 60px; } @media screen and (max-width: 767px) { .seminar-block > .innerArea > .tabContent { margin-top: 40px; } } .seminar-block > .innerArea > .tabContent [data-tab-content] { display: none; } .seminar-block > .innerArea > .tabContent [data-tab-content].is-active { display: block; animation: appear 0.5s ease; animation: appear 0.5s ease; } .seminar-block .moreButton { display: flex; align-items: center; justify-content: center; width: 340px; height: 55px; margin: 35px auto 0; font-size: 15px; font-weight: 700; color: red; background: #fff; border: 1px solid red; border-radius: 25px; box-shadow: 0 3px 10px rgb(0 0 0 / 25%); transition: all 0.2s ease; } @media screen and (max-width: 767px) { .seminar-block .moreButton { width: 100%; margin-top: 15px; } } .seminar-block .moreButton:hover { color: #fff; background: red; } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } .seminar-card { display: flex; padding: 30px; background: #fff 0% 0% no-repeat padding-box; border-radius: 10px; box-shadow: 0 0 24px rgb(0 0 0 / 14.1%); } @media screen and (max-width: 767px) { .seminar-card { padding: 12px; } } .seminar-card + .seminar-card { margin-top: 30px; } @media screen and (max-width: 767px) { .seminar-card + .seminar-card { margin-top: 20px; } } .seminar-card > .img { flex-shrink: 0; width: 320px; margin-right: 30px; overflow: hidden; } @media screen and (max-width: 767px) { .seminar-card > .img { width: 80px; margin-right: 15px; } } .seminar-card > .img img { border-radius: 10px; } @media screen and (max-width: 767px) { .seminar-card > .img img { border-radius: 6px; } } .seminar-card > .textContent { display: flex; flex: 1; flex-wrap: wrap; } .seminar-card > .textContent > .heading { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.7; } @media screen and (max-width: 767px) { .seminar-card > .textContent > .heading { font-size: 13px; } } .seminar-card > .textContent > .buttonWrapper { display: flex; flex-shrink: 0; justify-content: flex-end; width: 100%; height: auto; margin-top: auto; } @media screen and (max-width: 767px) { .seminar-card > .textContent > .buttonWrapper { display: none; } } .seminar-card > .textContent .button { align-items: center; width: 230px; height: 50px; font-size: 15px; color: red; background: #fff; border: 1px solid red; border-radius: 25px; box-shadow: 0 3px 10px rgb(0 0 0 / 25.1%); transition: all 0.2s ease; } .seminar-card > .textContent .button:hover { background: red; }