/* =========================================================
   menu.css  モーダル「menu」専用（スマホのメニューなど）。クラス名はすべて menu- で始まる
   ========================================================= */

/* モーダルの外枠（ヘッダーのボタンで開く）。開閉は site.js */
.modal { position: fixed; inset: 0; z-index: 100; opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; }
.modal[hidden] { display: none; }
.modal.open { opacity: 1; }
.modal > .modal-backdrop { position: fixed; inset: 0; z-index: -1; border: 0; padding: 0; cursor: pointer; pointer-events: auto; }
.modal > .modal-body { height: 100%; pointer-events: none; }
.modal > .modal-body > .b { pointer-events: none; background: none !important; }
.modal > .modal-body > .b > * { pointer-events: all; }
html.modal-opened { overflow: hidden; }
.modal-menu > .modal-backdrop { background: rgba(0, 0, 0, 0.16); }

/* menu-box1: remove サービスについて ピックアップ 経営者イ */
.menu-box1 { background: rgba(0, 0, 0, 0.16); height: 100%; justify-content: center; padding: 20px; width: 100%; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box1 { place-content: center flex-start; align-items: center; padding: 0px; } }

/* menu-box2: remove サービスについて ピックアップ 経営者イ */
.menu-box2 { background: rgb(255, 255, 255); border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 15px 0px; display: none; height: 240px; width: 400px; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box2 { place-content: center flex-start; align-items: center; background: rgb(240, 240, 240); border-radius: 0px; display: flex; flex-flow: column; height: auto; padding: 20px 20px 30px; width: 100%; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-box2 { display: flex; padding: 20px; } }

/* menu-box3: remove */
.menu-box3 { place-content: center space-between; align-items: center; flex: 0 0 auto; flex-flow: row; height: auto; padding: 0px; width: 100%; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box3 { height: auto; justify-content: space-between; margin: 0px 0px 20px; width: 100%; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-box3 { flex: 0 0 auto; justify-content: space-between; width: 100%; } }

/* menu-pic1:  */
.menu-pic1 { flex: 0 0 auto; height: 44px; margin: 0px 20px; width: 100px; max-width: calc(100% - 40px); }
@media screen and (max-width: 840px) { .menu-pic1 { margin: 0px; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-pic1 { flex: 0 0 auto; height: 44px; width: 90px; max-width: 100%; } }

/* menu-btn1: remove */
.menu-btn1 { place-content: center; align-items: center; background: rgb(0, 0, 0); border-radius: 3px; display: flex; flex: 0 0 auto; flex-flow: column; height: 45px; width: 45px; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-btn1 { background: rgb(0, 0, 0); display: flex; height: 45px; width: 45px; } }
@media screen and (max-width: 540px) { .menu-btn1 { display: flex; } }

/* menu-icon1: remove */
.menu-icon1 { color: rgb(255, 255, 255); font-size: 20px; }
@media screen and (max-width: 840px) { .menu-icon1 { color: rgb(255, 255, 255); } }

/* menu-box4: サービスについて ピックアップ 経営者インタビュー 絞 */
.menu-box4 { place-content: center flex-start; align-items: center; flex: 0 0 auto; flex-flow: row; padding: 0px; width: 100%; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box4 { margin: 0px 0px 30px; width: 100%; max-width: 100%; } }

/* menu-list1: サービスについて ピックアップ 経営者インタビュー 絞 */
.menu-list1 { place-content: center flex-end; align-items: center; flex-flow: wrap; gap: 0px; padding: 0px; --gh-menu-list1: 0px; --gv-menu-list1: 0px; }
@media screen and (max-width: 840px) { .menu-list1 { display: flex; flex: 0 0 auto; flex-flow: column; gap: 16px; width: 100%; --gh-menu-list1: 0px; --gv-menu-list1: 16px; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-list1 { display: flex; --gh-menu-list1: 0px; --gv-menu-list1: 0px; } }

/* menu-item1: サービスについて */
.menu-item1 { place-content: center; align-items: center; flex-flow: column; padding: 0px; }
@media screen and (max-width: 840px) { .menu-item1:hover { border-width: 0px 0px 1px; border-style: solid; border-color: rgb(190, 190, 190); } }
@media screen and (max-width: 840px) { .menu-item1 { place-content: flex-start center; align-items: flex-start; border-width: 0px 0px 1px; border-style: solid; border-color: rgb(190, 190, 190); flex: 0 0 auto; height: auto; width: calc(100% - (var(--gh-menu-list1) * 0)); max-width: calc(100% - (var(--gh-menu-list1) * 0)); } }

/* menu-link1: サービスについて */
.menu-link1 { place-content: center; align-items: center; border-radius: 6px; flex-flow: column; padding: 5px 20px 5px 0px; }

/* menu-item1: サービスについて */
.menu-item1:hover .menu-link1:hover { background: rgba(230, 230, 230, 0); opacity: 1; }
@media screen and (max-width: 840px) { .menu-item1:hover .menu-link1:hover { border-width: 0px; border-style: solid; border-color: rgb(190, 190, 190); } }
@media screen and (max-width: 840px) { .menu-link1 { place-content: flex-start center; align-items: flex-start; border-width: 0px; border-style: solid; border-color: rgb(0, 0, 0); border-radius: 0px; flex: 0 0 auto; width: 100%; max-width: 100%; } }

/* menu-txt1: サービスについて */
.menu-txt1 { color: rgb(34, 34, 34); flex: 0 0 auto; font-family: Kosugi, sans-serif; font-feature-settings: "palt"; font-size: 11px; font-style: normal; font-weight: 400; height: auto; letter-spacing: normal; line-height: 1.75; text-align: left; text-decoration: none; width: auto; max-width: 100%; justify-content: flex-start; }

/* menu-link1: サービスについて */
.menu-link1:hover .menu-txt1 { color: rgb(146, 146, 146); }
@media screen and (max-width: 840px) { .menu-txt1 { font-size: 13px; width: auto; } }
@media screen and (max-width: 540px) { .menu-txt1 { font-size: 14px; } }

/* menu-box5: search お問い合わせ chevron_right */
.menu-box5 { place-content: flex-start center; align-items: flex-start; display: flex; flex-flow: column; padding: 0px; width: auto; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box5 { display: flex; flex: 0 0 auto; height: auto; margin: 0px; width: 100%; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-box5 { display: flex; height: auto; } }

/* menu-box6: search お問い合わせ chevron_right */
.menu-box6 { place-content: center; align-items: center; flex: 0 0 auto; flex-flow: row; gap: 5px; height: 45px; padding: 0px; width: auto; --gh-menu-box6: 5px; --gv-menu-box6: 0px; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box6 { flex: 0 0 auto; height: 45px; width: 100%; --gh-menu-box6: 5px; --gv-menu-box6: 0px; max-width: 100%; } }
@media screen and (max-width: 540px) { .menu-box6 { flex-flow: column; gap: 10px; height: auto; --gh-menu-box6: 0px; --gv-menu-box6: 10px; width: 100%; max-width: 100%; } }

/* menu-box7: search */
.menu-box7 { place-content: stretch center; align-items: stretch; flex: 0 0 auto; flex-flow: column; padding: 0px; width: calc(55% - (var(--gh-menu-box6) * 0.44999999999999996)); max-width: calc(55% - (var(--gh-menu-box6) * 0.44999999999999996)); }
@media screen and (max-width: 840px) { .menu-box7 { flex: 0 0 auto; height: calc(100% - (var(--gv-menu-box6) * 0)); width: calc(50% - (var(--gh-menu-box6) * 0.5)); max-width: calc(50% - (var(--gh-menu-box6) * 0.5)); } }
@media screen and (max-width: 540px) { .menu-box7 { flex: 0 0 auto; flex-flow: column; height: auto; width: calc(100% - (var(--gh-menu-box6) * 0)); max-width: calc(100% - (var(--gh-menu-box6) * 0)); } }

/* menu-form1: search */
.menu-form1 { place-content: flex-start center; align-items: flex-start; flex-flow: row; height: auto; width: auto; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-form1 { flex: 0 0 auto; height: 45px; width: 100%; max-width: 100%; } }

/* menu-input1:  */
.menu-input1 { background: rgb(255, 255, 255); border-width: 0px; border-style: solid; border-color: rgb(238, 238, 238); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px; color: rgb(51, 51, 51); flex: 0 0 auto; font-family: Kosugi, sans-serif; font-size: 11px; font-weight: 400; height: 45px; justify-content: center; line-height: 1.4; margin: 0px 3px 0px 0px; padding: 10px 16px; text-align: left; width: 200px; max-width: calc(100% - 3px); }
.menu-input1::-webkit-input-placeholder { color: rgb(174, 174, 174); }
@media screen and (max-width: 840px) { .menu-input1 { flex: 0 0 auto; height: 45px; width: calc(85% - 3px); max-width: calc(85% - 3px); } }
@media screen and (max-width: 540px) { .menu-input1 { flex: 0 0 auto; width: calc(90% - 3px); max-width: calc(90% - 3px); } }

/* menu-btn2: search */
.menu-btn2 { place-content: center; align-items: center; background: rgb(51, 51, 51); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px; color: rgb(51, 51, 51); flex: 0 0 auto; flex-flow: row; font-family: Lato, sans-serif; font-size: 16px; height: 45px; line-height: 1.4; text-align: left; width: 45px; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-btn2 { flex: 0 0 auto; height: 100%; width: 15%; max-width: 15%; } }
@media screen and (max-width: 540px) { .menu-btn2 { flex: 0 0 auto; width: 10%; max-width: 10%; height: 100%; } }

/* menu-icon2: search */
.menu-icon2 { color: rgb(255, 255, 255); font-size: 24px; }

/* menu-link2: お問い合わせ chevron_right */
.menu-link2 { place-content: flex-start center; align-items: flex-start; flex: 0 0 auto; flex-flow: row; margin: 0px; padding: 0px; width: calc(45% - (var(--gh-menu-box6) * 0.55)); max-width: calc(45% - (var(--gh-menu-box6) * 0.55)); }
@media screen and (max-width: 840px) { .menu-link2 { flex: 0 0 auto; height: calc(100% - (var(--gv-menu-box6) * 0)); width: calc(50% - (var(--gh-menu-box6) * 0.5)); max-width: calc(50% - (var(--gh-menu-box6) * 0.5)); } }
@media screen and (max-width: 540px) { .menu-link2 { flex: 0 0 auto; height: auto; width: calc(100% - (var(--gh-menu-box6) * 0)); max-width: calc(100% - (var(--gh-menu-box6) * 0)); } }

/* menu-btn3: お問い合わせ */
.menu-btn3 { background: rgb(15, 111, 180); border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 0px 0px; color: rgb(51, 51, 51); flex: 0 0 auto; font-family: Lato, sans-serif; font-size: 16px; font-weight: 400; height: 45px; justify-content: center; letter-spacing: 0em; line-height: 1.4; margin: 0px 2px 0px 0px; opacity: 1; padding: 15px; text-align: left; width: 150px; max-width: calc(100% - 2px); }
@media screen and (max-width: 840px) { .menu-btn3 { flex: 0 0 auto; width: calc(85% - 2px); max-width: calc(85% - 2px); } }
@media screen and (max-width: 540px) { .menu-btn3 { flex: 0 0 auto; width: calc(90% - 2px); max-width: calc(90% - 2px); } }

/* menu-txt2: お問い合わせ */
.menu-txt2 { border-radius: 0px; color: rgb(255, 255, 255); font-family: Kosugi, sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0em; line-height: 1; margin: 0px; opacity: 1; padding: 0px 0px 2px; text-align: center; max-width: 100%; justify-content: center; }

/* menu-box8: chevron_right */
.menu-box8 { place-content: center; align-items: center; background: rgb(15, 111, 180); border-radius: 3px; flex: 0 0 auto; flex-flow: column; height: 45px; width: 45px; max-width: 100%; }
@media screen and (max-width: 840px) { .menu-box8 { flex: 0 0 auto; width: 15%; max-width: 15%; } }
@media screen and (max-width: 540px) { .menu-box8 { flex: 0 0 auto; width: 10%; max-width: 10%; } }

/* menu-icon3: chevron_right */
.menu-icon3 { color: rgb(255, 255, 255); font-size: 20px; }