/* RESET----------------------------------------------------------------------------------------------------*/
:root {
    --c-bg       : #f7f8fc;
    --c-surface  : #ffffff;
    --c-border   : #e5e7eb;
    --c-text     : #1a1f2e;
    --c-muted    : #6b7280;
    --c-title    : #002cac;
    --c-accent   : rgba(255, 0, 0, 0.68);
    --c-accent-bg: #f8e5e3;
    --c-accent-tx: #e83828;
    --c-teal-bg  : #e3fbf9;
    --c-teal-tx  : #0F6E56;
    --c-purple-bg: #dae2f8;
    --c-purple-tx: #1d4ed8;
    --c-primary  : #2563a8;
    --c-tag      : #eff6ff;
    --c-tag-text : #1d4ed8;
    --shadow     : 0 2px 16px rgba(0,0,0,.06);
    --radius     : 8px;
}
*,*::before,*::after {box-sizing: border-box;}
/**{border: 1px solid #eb6100;}*/
html{font-size: 62.5%; max-height: 100%; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;}
body{font-size: 1.55rem; margin: 0; padding: 0; width: 100%; height: 100%; font-family: 'Kosugi','Roboto','Fira Sans','Open Sans','Oswald','inxray-font',sans-serif; font-weight: 400; color:#1E1E1E;}
a {text-decoration: none;}
/* =========================HEAD========================= */
header {width: 100%; height: 60px; position: fixed; top: 0; left: 0; margin: 0; padding: 0; display: table; background: #fff; border-bottom: 2px solid #e3e3e3; font-size: 0.9em; font-family: 'Noto Sans JP',sans-serif; z-index: 99;}
.ul_head{display: flex; flex-wrap: wrap; width: 100%; height:60px; list-style: none; margin: 0; padding: 0; overflow: hidden; background: #fff;}
.ul_head > li{display: inline-block; margin: 0; border-collapse: collapse; column-gap: 1px; line-height: 1.6;}
.head_logo{width: 250px; color:#fff; align-content: center; justify-self: center; z-index: 111;}
.li-login{width: 200px; color:#fff; align-content: center; text-align: center;}
.head-free{width: calc(100% - 450px);}
.mem_info {width: 100%; height: 100%; margin: 0; color: #fff; padding: 4px 2px 0 0; display: flex; align-items: end;}
.mem_info img{width: 100%; height: auto; align-items: end}
.mem_info img:hover{background:#fff; opacity: 0.5; transform: scale(0.95); transition: transform .2s;}

.nav-login{border-radius: 3px; padding: 0.4em 20px; text-decoration:none; display:inline-block; cursor: pointer; transition: .5s; background: #fff; color: #6c6c6c; border: 1px solid #a8a8a8;}
.nav-login:after{font-weight: 600; font-family:'inxray-font', serif; content: "\e90d"; margin: 0 0 0 0.5em; position: relative; top: 0.1em; cursor: pointer;}
.nav-login:hover{background: #6c6c6c; color: #fff;}
.btn-primary{border-radius: 3px; padding: 0.75em 20px; text-decoration:none; display:inline-block; cursor: pointer; transition: .5s; background: #fff; color: #ff4949; border: 1px solid #ff4949;}
.btn-primary:after{font-weight: 600; font-family:'inxray-font', serif; content: "\e90d"; margin: 0 0 0 0.5em; position: relative; top: 0.1em; cursor: pointer;}
.btn-primary:hover{background: #ff4949; color: #fff;}
.btn-secondary{border-radius: 3px; padding: 0.75em 20px; text-decoration:none; display:inline-block; cursor: pointer; transition: .5s; background: #fff; color: #ff4949; border: 1px solid #ff4949;}

.btn-white{border-radius: 3px; padding: 0.75em 30px; text-decoration:none; display:inline-block; cursor: pointer; transition: .5s; background: #fff; color: #ff4949; border: 1px solid #ff4949;}
.btn-white:after{font-weight: 600; font-family:'inxray-font', serif; content: "\e90d"; margin: 0 0 0 0.5em; position: relative; top: 0.1em; cursor: pointer;}
.btn-white:hover{background: #ff8686; color: #fff;}
/* =========================MODAL========================= */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; cursor: pointer; z-index:9999;}
.modal.show{display:flex;}
.modal_bg{position:absolute; inset:0; background:#00000080;}
.modal_content{position:relative; width:90%; max-width:480px; background:#fff; border-radius:12px; padding: 0.5em; z-index:1; box-shadow:0 10px 40px #0003;}
.modal_close{position:absolute; top: 1px; right:8px; width:40px; height:40px; border:none; background:none; font-size:2.6em; cursor:pointer;}
.modal_close i:hover{color: #9a0000;}
.login_wrap{width:100%;}
.login_title{font-size:24px; font-weight:700; margin-bottom:24px; text-align:center;}
.login_title img{width: 240px; height:auto;}
.login_row{width:100%; margin-bottom:1.0em;}
.but_row{width:100%; margin: 0 auto 1.0em; text-align: center;}
.login_label{display:block; margin-bottom:8px; font-size: 1.1em;}
.inputbox{width:100%; font-size: 1.1em; height:44px; padding:0 12px; border:1px solid #ccc; border-radius:6px;}
.password-input{width:100%; font-size: 1.1em; height:44px; padding:0 12px; border:1px solid #ccc; border-radius:6px;}
.login_btn{width: 240px; height:48px; margin: 0 auto; border:none; background: rgba(255, 37, 21, 0.8); color:#fff; border-radius:6px; cursor:pointer;}
.login_btn:hover{background: #ff2515;}
.error{margin-bottom:16px; color:red; font-size:14px;}
.password-wrap{position: relative; display: inline-block; width: 100%;}
.password-wrap .inputbox{width: 100%; padding-right: 40px;}
.toggle-password{position: absolute; top: 50%; right: 12px; font-size: 1.5em; transform: translateY(-50%); cursor: pointer; user-select: none; color: #676767; z-index: 10000;}
.toggle-password:hover{color: #ae0000;}

/* =========================Main========================= */
.contents-main{position: relative; top: 100px;}
.hero-badge {display: inline-block;background: var(--c-accent-bg); color: var(--c-accent-tx); font-size: 1.0em; font-weight: 500; padding: 4px 0; border-radius: 20px; margin-bottom: 20px; letter-spacing: .08em;}

.hero-btns {display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;}

.section {width: 100%; padding: 36px 24px; max-width: 1280px; margin: 0 auto;}
.section-label {font-size: 1.1em;font-weight: 500; color: var(--c-title); letter-spacing: .1em; text-align: center; margin-bottom: 8px;}
.section-title {font-size: 1.5em; font-weight: 500; text-align: center; margin-bottom: 12px;}
.section-desc {font-size: 1.1em; color: var(--c-muted); text-align: center; margin-bottom: 40px; line-height: 1.8;}
.badge {display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 1.1em; flex-shrink: 0;}
.feature-cards {display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px;}
.feature-card {background:var(--c-surface); border:0.5px solid var(--c-border); border-radius:12px; padding:28px 24px; text-decoration:none; color:inherit; display:block; transition:border-color .15s, box-shadow .15s;}
.feature-card:hover {border-color:var(--c-accent); box-shadow:0 0 0 3px var(--c-accent-bg);}
.card-icon {width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; font-size:20px;}
.card-icon.gantt {background:var(--c-accent-bg); color:var(--c-accent-tx);}
.card-icon.process {background:var(--c-teal-bg); color:var(--c-teal-tx);}
.card-icon.project {background:var(--c-purple-bg); color:var(--c-purple-tx);}
.feature-card h3 {font-size:16px; font-weight:500; margin-bottom:8px;}
.feature-card p {font-size:13px; color:var(--c-muted); line-height:1.7; margin-bottom:16px;}
.card-tags {display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px;}
.tag {font-size:11px; padding:2px 8px; border-radius:4px; font-weight:500;}
.tag.gantt {background:var(--c-accent-bg); color:var(--c-accent-tx);}
.tag.process {background:var(--c-teal-bg); color:var(--c-teal-tx);}
.tag.project {background:var(--c-purple-bg); color:var(--c-purple-tx);}
.card-link {display:inline-flex; align-items:center; float: right; gap:4px; font-size:1.0em; font-weight:500; color:var(--c-purple-tx);}
.card-link i {font-size:1.0em;}

/* =====================================================
   特徴
===================================================== */
.merits {display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:12px;}
.merit {background:var(--c-surface); border:0.5px solid var(--c-border); border-radius:12px; padding:15px 10px; display:flex; align-items:flex-start; gap:6px;}
.merit i {font-size:1.15em; font-weight: 600; color:var(--c-purple-tx); flex-shrink:0; margin-top:2px;}
.merit h4 {font-size:0.95em; font-weight:600; margin: 0.35em 0 0;}
.merit p {font-size:12px; color:var(--c-muted); line-height:1.6;}
/* =====================================================
    ステップ
 ===================================================== */
.divider {border:none; border-top:0.5px solid var(--c-border);}
.steps {display:flex; flex-direction:column;}
.step {display:flex; width:720px; margin: 0 auto; gap:16px; padding:20px 0; border-bottom:0.5px solid var(--c-border);}
.step:last-child {border-bottom:none;}
.step-num {width:26px; height:26px; border-radius:50%; background:var(--c-accent); color:#fff; font-size:1.0em; font-weight:500; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px;}
.step h4 {font-size:0.95em; font-weight:600; margin: 0.5em 0 0;}
.step p {font-size:13px; color:var(--c-muted); line-height:1.7;}

.cta-sec {background:var(--c-accent); padding:64px 24px; text-align:center; color:#fff;}
.cta-sec h2 {font-size:22px; font-weight:500; margin-bottom:10px;}
.cta-sec p {font-size:14px; color:rgba(255,255,255,.8); margin-bottom:28px;}
footer{width: 100%; background:var(--c-border );}
.footer-menu{width: 100%; max-width: 1280px; margin: 0 auto; padding: 0;}
.ul_foot {display:flex; width:100%; max-width: 1280px; height:60px; list-style:none; margin:0; padding:0;}
.ul_foot > li {flex:1; display:flex; margin:0;}
.ul_foot > li a {display:flex; width:100%; height:100%; align-items:center; justify-content:center; color:#0a0a0a; text-decoration:none;}
.ul_foot > li a:hover {background:#f0f9ff;}
.footer-fream{width: 100%; background: #fff; padding: 0.5em 0;}
.footer-copy{width: 100%; max-width: 1280px; margin: 0 auto; padding:0; background: #fff;  text-align: center; font-family: 'Fira Sans', sans-serif;}

.guide-head-main{width: 100%; height:420px; margin: 0; padding: 1.5em 1.0em; color: #fff; overflow: hidden;}
.guide-head-gant{width: 100%; margin: 0; padding: 1.5em 1.0em; color: #fff; background: linear-gradient(135deg, #c30d23 0%, #e83828 60%, #f748b0 100%);}
.guide-head-gant::before {content: ''; position: absolute; left: 0; top: -30px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.2);}
.guide-head-process{width: 100%; margin: 0; padding: 1.5em 1.0em; color: #fff; background: linear-gradient(135deg, #006934 0%, #13ae67 60%, #8fc31f 100%);}
.guide-head-process::before {content: ''; position: absolute; left: 0; top: -30px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.2);}
.guide-head-project{width: 100%; margin: 0; padding: 1.5em 1.0em; color: #fff; background: linear-gradient(135deg, #1e3a6e 0%, #2563a8 60%, #3b82f6 100%);}
.guide-head-project::before {content: ''; position: absolute; left: 0; top: -30px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,0.2);}
.guide-head-index{position: relative; overflow: hidden; width: 100%; margin: 0; padding: 1.5em 1.0em; color: #fff; background: rgba(223, 35, 35, 0.68);}

.hero-all{display: flex; width: 100%; max-width: 1280px; margin: 0 auto;}
.hero-hf-txt{width: 60%;}
.hero-hf-img{width: 40%; text-align: center; padding: 2.0em 2.0em 1.0em;}
.hero-hf-img img{width: 100%; height:auto; border-radius: 6px; box-shadow: 0 2px 16px rgba(0,0,0,.06);}
.hero-com{line-height: 1.6;}
.hero-link{width: 220px; height: 40px; text-align: center; align-content: center; background: #fdfd2d; border-radius: 2px; box-shadow: var(--shadow); cursor: pointer; z-index: 10;}
.hero-link a{display: block;}
.hero-link:hover{background: #ff773e;}


.guide_main{width: 100%; margin: 60px 0; padding:0;}
.guide_main h1 {font-size: 2.6em; font-weight: 700; line-height: 1.25; margin-bottom: 18px;}
.hero-main-all{position: relative; width: 100%; max-width: 1280px; margin: 0 auto; z-index: 20;}

.line{position: absolute; left: -10%; width: 200%; height: 260px; transform: rotate(-5deg); z-index:0;}

.line1{top: 51px; background: linear-gradient(135deg, #006934 0%, #13ae67 60%, #8fc31f 100%); z-index:10;}
.line2{top: -200px; background: linear-gradient(135deg, #c30d23 0%, #e83828 60%, #f748b0 100%); z-index:10;}
.line3{top: 300px;background: linear-gradient(135deg, #1e3a6e 0%, #2563a8 60%, #3b82f6 100%); z-index:10;}
.hero-main-img{display:flex; width: 100%; max-width: 1280px; margin: 0 auto;}
.hero-main-img-parts{width: calc(100% / 3); padding: 1.0em;}
.hero-main-img-parts img{width: 100%; height: auto; border-radius: 5px;}

.hero-eyebrow {letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 14px;}
.hero-eyebrow i{font-size: 1.3em; font-weight: 600; margin-right: 0.5em;}
.container{max-width: 1280px; margin: 0 auto; padding: 0 2.0em 60px;}
.section {margin: 20px 0;}
.section-title{width:fit-content; margin: 0 auto 1.0em;font-size: 1.3em; font-weight: 600;}
.card {background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 20px 30px; box-shadow: var(--shadow); margin-bottom: 16px;}

/* ガントバープレビュー */
.gantt-preview {background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; overflow: hidden; box-shadow: var(--shadow);}
.gantt-row {display: flex; align-items: center; gap: 12px; margin-bottom: 10px;}
.gantt-label {width: 80px;color: var(--c-muted); flex-shrink: 0; font-weight: 500;}
.gantt-track {flex: 1; height: 22px; background: #f1f5f9; border-radius: 4px; position: relative; overflow: hidden;}
.gantt-bar {position: absolute; height: 100%; border-radius: 4px; opacity: .85;}
/* プロジェクト表示プレビュー */
.project-preview {background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);}
.proj-header {display: grid; grid-template-columns: 120px 1fr 80px; background: #faf5ff; border-bottom: 1px solid var(--c-border); font-size: 1.0em; font-weight: 700; letter-spacing: .08em; color: var(--c-muted); text-transform: uppercase; padding: 10px 16px; gap: 12px;}
.proj-row {display: grid; grid-template-columns: 120px 1fr 80px; padding: 10px 16px; border-bottom: 1px solid #f3f4f6; gap: 12px; align-items: center; font-size: 1.1em;}
.proj-row:last-child { border-bottom: none; }
.proj-name {font-weight: 600; color: var(--c-text); }
.proj-task {color: var(--c-muted); }
.proj-progress {display: flex; align-items: center; gap: 6px; font-size: 1.0em;}
.progress-bar {flex: 1; height: 6px; background: #e5e7eb; border-radius: 3px; overflow: hidden;}
.progress-fill { height: 100%; border-radius: 3px; background: var(--c-accent); }
.progress-pct { color: var(--c-muted); white-space: nowrap; }
/* 工程ツリー表示 */
.process-tree {background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);}
.process-parent {display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f0fdfa; border-left: 4px solid var(--c-accent); border-radius: 6px; margin-bottom: 8px; font-weight: 600; font-size: 1.0em;}
.process-bar-preview {flex: 1; height: 14px; border-radius: 3px; opacity: .75;}
.process-children {padding-left: 24px; margin-bottom: 16px;}
.process-child {display: flex; align-items: center; gap: 12px; padding: 7px 12px; background: #f8fafc; border-left: 2px solid #cbd5e1; border-radius: 4px; margin-bottom: 5px; font-size: 1.0em; color: var(--c-muted);}
.process-child-bar {flex: 1; height: 10px; border-radius: 3px; opacity: .65;}