.elementor-4696 .elementor-element.elementor-element-1cff226 > .elementor-container{min-height:100vh;}.elementor-4696 .elementor-element.elementor-element-1cff226{overflow:hidden;border-style:none;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-4696 .elementor-element.elementor-element-1cff226:not(.elementor-motion-effects-element-type-background), .elementor-4696 .elementor-element.elementor-element-1cff226 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-4696 .elementor-element.elementor-element-1cff226 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-bc-flex-widget .elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-4696 .elementor-element.elementor-element-3cb95b5 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-c381a9c > .elementor-container{min-height:170px;}.elementor-4696 .elementor-element.elementor-element-c381a9c{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-66aa873.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-4696 .elementor-element.elementor-element-66aa873 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-93b7f86{text-align:center;color:#FFFFFF;font-size:1em;font-weight:400;line-height:1.5em;letter-spacing:0.13em;z-index:3;}.elementor-4696 .elementor-element.elementor-element-93b7f86 > .elementor-widget-container{margin:0% 0% 0% 0%;padding:15px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-095e09f{text-align:center;z-index:3;}.elementor-4696 .elementor-element.elementor-element-095e09f .elementor-heading-title{color:#000000;font-family:"Archivo", Sans-serif;font-size:14vw;font-weight:600;}.elementor-4696 .elementor-element.elementor-element-095e09f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-1e9fcd0 > .elementor-container{min-height:170px;}.elementor-4696 .elementor-element.elementor-element-1e9fcd0{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-5a1d0e9.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-4696 .elementor-element.elementor-element-e894815{text-align:left;color:#FFFFFF;font-size:0.8em;font-weight:400;line-height:1.8em;letter-spacing:0.1em;width:var( --container-widget-width, 45% );max-width:45%;--container-widget-width:45%;--container-widget-flex-grow:0;z-index:2;}.elementor-4696 .elementor-element.elementor-element-e894815 > .elementor-widget-container{margin:4% 7% 0% 0%;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-dacf88d.elementor-column > .elementor-widget-wrap{justify-content:flex-start;}.elementor-4696 .elementor-element.elementor-element-dacf88d > .elementor-element-populated{margin:20px 0px 0px 120px;--e-column-margin-right:0px;--e-column-margin-left:120px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button{height:170px;width:170px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:inline-flex;font-family:"Archivo", Sans-serif;font-size:21px;font-weight:500;line-height:1.3em;letter-spacing:1.7px;fill:#FFFFFF;color:#FFFFFF;background-color:var( --e-global-color-text );border-radius:99px 99px 99px 99px;}.elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button:hover, .elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button:focus{color:var( --e-global-color-text );background-color:#FFFFFF;}.elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button:hover svg, .elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button:focus svg{fill:var( --e-global-color-text );}.elementor-4696 .elementor-element.elementor-element-fd483b9 > .elementor-widget-container{margin:0px 0px -20px 0px;padding:0px 0px 0px 0px;border-radius:999px 999px 999px 999px;}.elementor-4696 .elementor-element.elementor-element-fd483b9{width:var( --container-widget-width, 170px );max-width:170px;--container-widget-width:170px;--container-widget-flex-grow:0;z-index:5;}@media(max-width:1024px) and (min-width:768px){.elementor-4696 .elementor-element.elementor-element-5a1d0e9{width:65%;}.elementor-4696 .elementor-element.elementor-element-dacf88d{width:35%;}}@media(max-width:1024px){.elementor-bc-flex-widget .elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column .elementor-widget-wrap{align-items:space-between;}.elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-between;align-items:space-between;}.elementor-4696 .elementor-element.elementor-element-93b7f86{font-size:0.85em;letter-spacing:0.1em;}.elementor-4696 .elementor-element.elementor-element-93b7f86 > .elementor-widget-container{margin:0% 0% 0% 0%;padding:40px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-1e9fcd0{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-5a1d0e9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-e894815{font-size:0.8em;--container-widget-width:80%;--container-widget-flex-grow:0;width:var( --container-widget-width, 80% );max-width:80%;}.elementor-4696 .elementor-element.elementor-element-e894815 > .elementor-widget-container{margin:17% 0% 0% 0%;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-dacf88d > .elementor-element-populated{margin:-30px 0px 0px 20px;--e-column-margin-right:0px;--e-column-margin-left:20px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-fd483b9 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-4696 .elementor-element.elementor-element-1cff226 > .elementor-container{min-height:530px;}.elementor-4696 .elementor-element.elementor-element-1cff226{margin-top:0px;margin-bottom:0px;padding:25px 25px 25px 25px;}.elementor-bc-flex-widget .elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column .elementor-widget-wrap{align-items:space-between;}.elementor-4696 .elementor-element.elementor-element-3cb95b5.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:space-between;align-items:space-between;}.elementor-4696 .elementor-element.elementor-element-3cb95b5 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-c381a9c > .elementor-container{min-height:220px;}.elementor-4696 .elementor-element.elementor-element-93b7f86{text-align:center;font-size:0.8em;line-height:1.6em;letter-spacing:0.5px;}.elementor-4696 .elementor-element.elementor-element-93b7f86 > .elementor-widget-container{margin:35px -10px 0px -10px;padding:0% 0% 0% 0%;}.elementor-4696 .elementor-element.elementor-element-095e09f .elementor-heading-title{font-size:14vw;}.elementor-4696 .elementor-element.elementor-element-095e09f > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0px 0px 1px 0px;}.elementor-4696 .elementor-element.elementor-element-1e9fcd0 > .elementor-container{min-height:220px;}.elementor-4696 .elementor-element.elementor-element-1e9fcd0{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-5a1d0e9{width:67%;}.elementor-4696 .elementor-element.elementor-element-5a1d0e9 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:125px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-e894815{text-align:left;font-size:0.75em;line-height:1.6em;letter-spacing:0.6px;--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-4696 .elementor-element.elementor-element-e894815 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0% 0% 0% 0%;}.elementor-4696 .elementor-element.elementor-element-dacf88d{width:33%;}.elementor-4696 .elementor-element.elementor-element-dacf88d.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-4696 .elementor-element.elementor-element-dacf88d > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-fd483b9 .elementor-button{height:100px;width:100px;font-size:13px;padding:0px 0px 0px 1px;}.elementor-4696 .elementor-element.elementor-element-fd483b9 > .elementor-widget-container{margin:45px 0px 0px 0px;padding:0px 0px 0px 0px;}.elementor-4696 .elementor-element.elementor-element-fd483b9{--container-widget-width:100px;--container-widget-flex-grow:0;width:var( --container-widget-width, 100px );max-width:100px;}}/* Start custom CSS for text-editor, class: .elementor-element-93b7f86 */.elementor-4696 .elementor-element.elementor-element-93b7f86 {
    mix-blend-mode: difference
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-e894815 */.elementor-4696 .elementor-element.elementor-element-e894815 {
    mix-blend-mode: difference
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-1cff226 *//* --- 設定エリア --- */
:root {
    /* 画像URL */
    --bg-image: url('https://demo-260712.shp10.com/wp-content/uploads/2023/12/beansinthehands.jpg');
    /* 正方形の半分のサイズ */
    --square-half-size: 210px; 
}

/* 1. セクションの基本 */
.mask-bg-section {
    position: relative;
    isolation: isolate;
}

/* 2. 画像レイヤー（下層） */
.mask-bg-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: scroll; 
    
    z-index: 1; 
    
    /* マスク設定 */
    clip-path: inset(calc(50% - var(--square-half-size)));
    
    /* ▼ 戻る時の動き（0.6秒でシュッと戻る） */
    transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    
    pointer-events: none;
}

/* 3. 白文字レイヤー（上層） */
.mask-bg-section::after {
    /* ★表示するテキスト★ */
    content: "ABOUT US"; 
    
    /* 位置とサイズの調整 */
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    
    display: flex;
    justify-content: center; 
    align-items: center;     
    
    /* 文字のスタイル */
    color: #FFFFFF; 
    font-size: 14vw; 
    font-weight: 600;
    font-family: 'Archivo', sans-serif;
    
    z-index: 3; 
    
    /* 画像と全く同じマスク設定*/
    clip-path: inset(calc(50% - var(--square-half-size)));
    
    /* ▼ 戻る時の動き（同期） */
    transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    
    pointer-events: none;
}

/* 4. ホバー時の動き */
.mask-bg-section:has(.trigger-btn:hover)::before,
.mask-bg-section:has(.trigger-btn:hover)::after {
    /* 全画面に広げる */
    clip-path: inset(0%);
    
    /* ▼ 広がる時の動き（0.1秒待ってから、0.6秒で素早く広がる） */
    transition: clip-path 0.6s cubic-bezier(0.77, 0, 0.175, 1) 0.1s;
}

/* --- スマホ対策 --- */
@media (max-width: 767px) {
    .mask-bg-section::before,
    .mask-bg-section::after {
        clip-path: inset(26%) !important;
    }
}/* End custom CSS */