/* Theme Name: Hello Elementor Child Theme URI: https://elementor.com/hello-theme/ Description: Child theme for Hello Elementor Author: Elementor Author URI: https://elementor.com/ Template: hello-elementor Version: 1.0.0 Text Domain: hello-elementor-child */ /* ===== Build with us ブロック ===== */ .bwu { position: relative; overflow: visible; background: linear-gradient( to bottom right, rgba(30,126,195,.6) 0%, rgba(30,126,195,.6) 50%, rgba(232,66,79,.6) 50%, rgba(232,66,79,.6) 100% ); --frame-out: 48px; --bracket-in: 24px; --bracket-len: 24px; --corner-gap: 24px; /* ← 追加: 外枠の四隅で線が途切れる長さ */ } .bwu::after { content: ""; position: absolute; inset: calc(-1 * var(--frame-out)); pointer-events: none; /* border は使わない */ background: /* 外枠 上辺（両端に corner-gap ぶんの空き） */ linear-gradient(#fff,#fff) left var(--corner-gap) top 0 / calc(100% - 2 * var(--corner-gap)) 1px no-repeat, /* 外枠 下辺 */ linear-gradient(#fff,#fff) left var(--corner-gap) bottom 0 / calc(100% - 2 * var(--corner-gap)) 1px no-repeat, /* 外枠 左辺 */ linear-gradient(#fff,#fff) left 0 top var(--corner-gap) / 1px calc(100% - 2 * var(--corner-gap)) no-repeat, /* 外枠 右辺 */ linear-gradient(#fff,#fff) right 0 top var(--corner-gap) / 1px calc(100% - 2 * var(--corner-gap)) no-repeat, /* L字×4（今までと同じ） */ linear-gradient(#fff,#fff) left var(--bracket-in) top var(--bracket-in) / var(--bracket-len) 1px no-repeat, linear-gradient(#fff,#fff) left var(--bracket-in) top var(--bracket-in) / 1px var(--bracket-len) no-repeat, linear-gradient(#fff,#fff) right var(--bracket-in) top var(--bracket-in) / var(--bracket-len) 1px no-repeat, linear-gradient(#fff,#fff) right var(--bracket-in) top var(--bracket-in) / 1px var(--bracket-len) no-repeat, linear-gradient(#fff,#fff) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) 1px no-repeat, linear-gradient(#fff,#fff) left var(--bracket-in) bottom var(--bracket-in) / 1px var(--bracket-len) no-repeat, linear-gradient(#fff,#fff) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) 1px no-repeat, linear-gradient(#fff,#fff) right var(--bracket-in) bottom var(--bracket-in) / 1px var(--bracket-len) no-repeat; } @media (width < 640px) { .bwu::after{ display: none; } } /* ========================================= */ /* .arrowLeft 配下のメニュー li にキャレットアイコン */ .arrowLeft .elementor-nav-menu > li { display: flex; align-items: center; gap: 0.4em; } .arrowLeft .elementor-nav-menu > li::before { content: ""; display: inline-block; width: 0.5em; height: 0.8em; flex-shrink: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,") no-repeat center / contain; } /* ========================================= Icon Widget Custom Burger (Fixed) Target class: .custom-burger (added to Icon Widget) ========================================= */ /* 1. 標準のSVGアイコンを消す */ .custom-burger .elementor-icon svg { display: none !important; } /* 2. アイコンの枠（タグ）をボタンの形にする */ .custom-burger .elementor-icon { display: flex !important; align-items: center; justify-content: center; width: 50px; /* ボタンのサイズ */ height: 50px; padding: 0; text-decoration: none !important; /* 下線消し */ } /* 3. 三本線を描画（box-shadow版） */ .custom-burger .elementor-icon::before { content: ""; display: block; width: 24px; /* 線の長さ */ height: 2px; /* 線の太さ */ background-color: currentColor; /* 真ん中の線 */ /* 上下の線を影で描画 */ box-shadow: 0 -8px 0 0 currentColor, 0 8px 0 0 currentColor; transition: transform 0.1s ease; /* 押した時の動き */ } /* 4. クリックした瞬間（Active）の演出 */ /* ポップアップのトリガーなので、:active（押している間）を使います */ .custom-burger .elementor-icon:active::before { transform: scale(0.9); /* 全体が少し縮む */ opacity: 0.7; /* 少し薄くなる */ } .serviceColumnBG { position: relative; overflow: visible; /* 親に overflow:hidden があると効かないので親側も確認 */ --bracket-color: #1E7EC3; --bracket-len: 20px; --bracket-thick: 1px; --frame-out: 20px; /* ::after を .serviceColumnBG の外側に何px張り出すか */ --bracket-in: 0px; /* ::after 角からL字を内側に何px寄せるか（0で外周にピタリ） */ } .serviceColumnBG::after { content: ""; position: absolute; inset: calc(-1 * var(--frame-out)); /* ←マイナスで外に広げる */ pointer-events: none; background: /* top-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* top-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat; } .visionWrap { position: relative; overflow: visible; --bracket-color: #1E7EC3; /* L字の色 */ --bracket-len: 20px; /* L字の長さ */ --bracket-thick: 1px; /* 線の太さ */ --frame-out: 0px; /* ::after を要素外側に何px張り出すか（マイナスで内側） */ --bracket-in: 0px; /* ::after 角からL字をどれだけ内側に寄せるか */ } .visionWrap::after { content: ""; position: absolute; inset: calc(-1 * var(--frame-out)); pointer-events: none; background: /* top-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* top-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat; } .recruitWrap { position: relative; overflow: visible; --bracket-color: #FFFFFF; /* L字の色 */ --bracket-len: 20px; /* L字の長さ */ --bracket-thick: 1px; /* 線の太さ */ --frame-out: 0px; /* ::after を要素外側に何px張り出すか（マイナスで内側） */ --bracket-in: 0px; /* ::after 角からL字をどれだけ内側に寄せるか */ } .recruitWrap::after { content: ""; position: absolute; inset: calc(-1 * var(--frame-out)); pointer-events: none; background: /* top-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* top-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) top var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-left */ linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) left var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat, /* bottom-right */ linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-len) var(--bracket-thick) no-repeat, linear-gradient(var(--bracket-color), var(--bracket-color)) right var(--bracket-in) bottom var(--bracket-in) / var(--bracket-thick) var(--bracket-len) no-repeat; } .cpel-switcher__list > li:first-child::after { content: "/"; color: #EEA5AB; margin: 0 0.4em; /* 前後の余白。お好みで調整 */ } /* language */ .cky-title span:nth-of-type(1), .cky-notice-des p:nth-of-type(1), .cky-btn span:nth-of-type(1), .cky-preference-title span:nth-of-type(1), .cky-show-desc-btn span:nth-of-type(1), /*.cky-preference-content-wrapper p:nth-of-type(1),*/ .cky-dma-content-wrapper p:nth-of-type(1){ display: block; } .cky-title span:nth-of-type(2), .cky-notice-des p:nth-of-type(2), .cky-btn span:nth-of-type(2), .cky-preference-title span:nth-of-type(2), .cky-show-desc-btn span:nth-of-type(2), /*.cky-preference-content-wrapper p:nth-of-type(2),*/ .cky-dma-content-wrapper p:nth-of-type(2){ display: none; } .cky-title span:nth-of-type(3), .cky-notice-des p:nth-of-type(3), .cky-btn span:nth-of-type(3), .cky-preference-title span:nth-of-type(3), .cky-show-desc-btn span:nth-of-type(3), /*.cky-preference-content-wrapper p:nth-of-type(3),*/ .cky-dma-content-wrapper p:nth-of-type(3){ display: none; } .elementor a{ word-break: break-all; }