@charset "UTF-8"; html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:none;font-style:normal;text-align:left;box-sizing:border-box}html{background:#fff;scroll-behavior:smooth}body{background:#fff;color:#06150e;font-family:"Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif}ul{list-style:none}a{text-decoration:none;color:inherit}img{max-width:100%;height:auto;vertical-align:bottom}a:hover{opacity:.78} :root{--green:#007a41;--deep:#00462e;--dark:#06150e;--soft:#f5f8f6;--line:#e5eee8;--max:1440px;--side:clamp(24px,4.5vw,88px)} #hube-wrap-01,#hube-wrap-02,#hube-wrap-03,#hube-wrap-04,#hube-wrap-05,#hube-wrap-06,#hube-wrap-07,#hube-wrap-08,#hube-wrap-09,#hube-wrap-10{float:left;width:100%}#hube-head-01,#hube-head-02,#hube-head-03,#hube-head-04,#hube-head-05,#hube-head-06,#hube-head-07,#hube-head-08,#hube-head-09,#hube-head-10{position:relative;width:min(calc(100% - (var(--side) * 2)),var(--max));margin:0 auto}#hube-head-03:after,#hube-area-05c ul:after,#hube-area-07b ul:after,#hube-area-08d ul:after{content:"";display:block;clear:both} #hube-wrap-01{position:fixed;top:0;left:0;z-index:9999;background:rgba(255,255,255,.96);box-shadow:0 5px 22px rgba(0,0,0,.05);backdrop-filter:blur(16px)}#hube-head-01{height:86px;display:flex;align-items:center;gap:clamp(20px,3vw,58px)}#hube-area-01a{width:220px;color:#08713c;font-size:clamp(16px,1.1vw,21px);font-weight:bold}#hube-area-01a a,#hube-area-10a{display:flex;align-items:center;gap:10px}#hube-area-01a span,#hube-area-10a span{width:30px;height:23px;background:#08713c;clip-path:polygon(50% 0,100% 32%,62% 44%,92% 78%,50% 58%,8% 78%,38% 44%,0 32%)}#hube-area-01b{flex:1}#hube-area-01b ul{display:flex;justify-content:flex-end;gap:clamp(18px,2.1vw,42px)}#hube-area-01b li{font-size:clamp(11px,.72vw,14px);font-weight:bold;white-space:nowrap}#hube-area-01c{width:clamp(132px,10vw,178px)}#hube-area-01c a{display:block;padding:14px 12px;color:#fff;background:var(--green);border-radius:999px;font-size:clamp(11px,.75vw,14px);font-weight:bold;text-align:center}#hube-area-01c a:after{content:"$203A";margin-left:10px;font-size:18px;line-height:0} #hube-wrap-02{padding-top:86px;background:linear-gradient(90deg,#fff 0,#fff 43%,#eef6f2 100%)}#hube-head-02{min-height:clamp(660px,50vw,790px)}#hube-area-02a{position:absolute;z-index:3;left:clamp(26px,3.8vw,68px);top:clamp(48px,4.5vw,76px);width:clamp(330px,31vw,520px)}#hube-area-02a-01{color:var(--green);font-size:clamp(18px,1.35vw,28px);line-height:1.75;font-weight:bold}#hube-area-02a-02{margin-top:clamp(24px,2vw,38px);font-size:clamp(56px,5.35vw,102px);line-height:1.31;font-weight:900;letter-spacing:.03em}#hube-area-02a-03{margin-top:clamp(22px,1.7vw,34px);font-size:clamp(14px,1vw,19px);line-height:1.85;font-weight:bold}#hube-area-02a-04{margin-top:clamp(26px,2vw,38px);width:min(100%,560px)}#hube-area-02a-04 a{position:relative;display:block;min-height:clamp(78px,5.9vw,112px);padding:clamp(17px,1.35vw,26px) 62px 0 clamp(82px,6.2vw,118px);color:#fff;background:var(--green);border-radius:14px;box-shadow:0 16px 30px rgba(0,94,49,.18)}#hube-area-02a-04 span{position:absolute;left:clamp(14px,1.2vw,22px);top:50%;width:clamp(48px,3.8vw,70px);height:clamp(48px,3.8vw,70px);margin-top:calc(clamp(48px,3.8vw,70px) / -2);color:#08713c;background:#f2df61;border-radius:50%;font-size:clamp(11px,.8vw,15px);font-weight:bold;line-height:clamp(48px,3.8vw,70px);text-align:center}#hube-area-02a-04 em{display:block;color:#e9ef7d;font-size:clamp(12px,.85vw,16px);font-weight:bold}#hube-area-02a-04 strong{display:block;margin-top:6px;font-size:clamp(16px,1.15vw,22px)}#hube-area-02a-04 i{position:absolute;right:28px;top:50%;width:12px;height:12px;margin-top:-6px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg)}#hube-area-02b{position:absolute;right:0;top:0;width:62%;height:100%;overflow:hidden;border-radius:0 0 0 120px}#hube-area-02b img{width:100%;height:100%;object-fit:cover;object-position:center}#hube-area-02b:before{content:"";position:absolute;left:0;top:0;width:42%;height:100%;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.86) 45%,rgba(255,255,255,0) 100%)}#hube-area-02b:after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(0deg,#fff 0,rgba(255,255,255,.86) 40%,rgba(255,255,255,0) 100%)}#hube-area-02c{position:absolute;z-index:4;right:clamp(34px,5vw,94px);bottom:clamp(10px,1.2vw,24px);width:clamp(220px,18vw,335px);height:clamp(220px,18vw,335px);padding:clamp(42px,3.5vw,66px) clamp(30px,2.7vw,50px) 0;background:#fff;border-radius:50%;box-shadow:0 14px 40px rgba(0,0,0,.16)}#hube-area-02c-01{text-align:center;font-size:clamp(14px,1vw,19px);line-height:1.55;font-weight:bold}#hube-area-02c li{position:relative;margin-top:clamp(10px,1vw,18px);padding-left:26px;font-size:clamp(10px,.72vw,14px);line-height:1.55;font-weight:bold}#hube-area-02c li:before{content:"$2713";position:absolute;left:0;top:1px;width:16px;height:16px;border:2px solid #5ba966;color:#168348;border-radius:50%;font-size:10px;text-align:center;line-height:13px} #hube-wrap-03{background-color: #ffffff;padding:0 0 clamp(42px,4vw,68px)}#hube-head-03{padding:28px 0;background:#fff;border:1px solid #edf1ee;border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.05)}#hube-head-03 li{float:left;width:25%;min-height:112px;text-align:center;border-right:1px solid #dfe7e2}#hube-head-03 li:last-child{border-right:0}#hube-head-03 strong{display:block;text-align:center;color:#08713c;font-size:clamp(13px,.9vw,17px);line-height:1.65}.hube-icon-01,.hube-icon-02,.hube-icon-03,.hube-icon-04,.hube-icon-05,.hube-icon-06,.hube-icon-07,.hube-icon-08{display:block;position:relative;width:clamp(50px,4.1vw,72px);height:clamp(50px,4.1vw,72px);margin:0 auto 14px;color:#168348}.hube-icon-01{border:5px solid currentColor;border-radius:7px}.hube-icon-01:before{content:"";position:absolute;left:25%;top:24%;width:45%;height:5px;border-left:5px solid currentColor;border-bottom:5px solid currentColor;transform:rotate(-45deg);box-shadow:0 16px 0 -1px currentColor,0 32px 0 -1px currentColor}.hube-icon-02:before{content:"";position:absolute;left:6%;top:42%;width:30%;height:30%;background:currentColor;border-radius:50%;box-shadow:36px 0 0 currentColor}.hube-icon-02:after{content:"";position:absolute;left:32%;top:8%;width:55%;height:34%;border:5px solid currentColor;border-radius:18px}.hube-icon-03:before{content:"";position:absolute;left:8%;top:42%;width:78%;height:30%;border:6px solid currentColor;border-radius:5px;transform:rotate(-18deg)}.hube-icon-03:after{content:"";position:absolute;left:40%;top:45%;width:26%;height:26%;border-right:6px solid currentColor;border-bottom:6px solid currentColor;transform:rotate(45deg)}.hube-icon-04:before{content:"";position:absolute;left:8%;bottom:8%;width:13%;height:35%;background:currentColor;box-shadow:20px -12px 0 currentColor,40px -30px 0 currentColor}.hube-icon-04:after{content:"";position:absolute;right:2%;top:5%;width:28%;height:28%;border-top:6px solid currentColor;border-right:6px solid currentColor}.hube-icon-05:before{content:"";position:absolute;left:8%;top:25%;width:24%;height:24%;background:currentColor;border-radius:50%;box-shadow:34px 0 0 currentColor,17px -10px 0 currentColor}.hube-icon-05:after{content:"";position:absolute;left:0;bottom:8%;width:90%;height:42%;border:5px solid currentColor;border-radius:24px 24px 8px 8px}.hube-icon-06{border:5px solid currentColor}.hube-icon-06:before{content:"";position:absolute;left:18%;top:18%;width:12%;height:12%;background:currentColor;box-shadow:21px 0 0 currentColor,0 18px 0 currentColor,21px 18px 0 currentColor,0 36px 0 currentColor,21px 36px 0 currentColor}.hube-icon-07:before{content:"";position:absolute;left:8%;top:16%;width:84%;height:56%;border:5px solid currentColor;border-radius:4px}.hube-icon-07:after{content:"";position:absolute;left:25%;bottom:10%;width:50%;height:6px;background:currentColor}.hube-icon-08:before{content:"";position:absolute;left:12%;top:38%;width:58%;height:34%;border:5px solid currentColor;transform:skew(-18deg)}.hube-icon-08:after{content:"";position:absolute;right:2%;top:20%;width:13%;height:58%;background:currentColor;border-radius:8px} #hube-wrap-04{padding:clamp(64px,6vw,100px) 0;background:#f7f9f8}#hube-head-04{min-height:230px}#hube-area-04a,#hube-area-05a,#hube-area-06a{position:absolute;left:0;top:0;color:#edf1ef;font-size:clamp(64px,6vw,115px);font-weight:900;line-height:.8}#hube-area-04b{padding-top:52px;font-size:clamp(28px,2.2vw,42px);font-weight:900}#hube-area-04b:after,#hube-area-05b:after,#hube-area-07a:after{content:"";display:block;width:34px;height:4px;margin-top:13px;background:var(--green)}#hube-area-04c{margin-top:24px;width:70%;font-size:clamp(13px,.9vw,17px);line-height:2;font-weight:bold}#hube-area-04d{position:absolute;right:7%;top:48px;width:220px;height:170px}#hube-area-04d span{position:absolute;width:130px;height:130px;border:25px solid rgba(0,122,65,.65);border-radius:50%}#hube-area-04d span:first-child{left:0;top:0}#hube-area-04d span:last-child{right:0;bottom:0;border-color:rgba(0,122,65,.82)} #hube-wrap-05{padding:clamp(64px,6vw,96px) 0}#hube-head-05{min-height:360px}#hube-area-05b{text-align:center;font-size:clamp(28px,2.2vw,42px);font-weight:900}#hube-area-05b:after{margin-left:auto;margin-right:auto}#hube-area-05c{margin-top:56px}#hube-area-05c li{position:relative;float:left;width:25%;padding:0 clamp(14px,1.7vw,30px);text-align:center}#hube-area-05c li:not(:last-child):after{content:"";position:absolute;right:-10px;top:86px;width:22px;height:42px;background:#d5e8d8;clip-path:polygon(0 0,100% 50%,0 100%)}#hube-area-05c em{display:block;width:46px;height:46px;margin:0 auto 20px;color:#fff;background:#08713c;border-radius:50%;font-size:15px;font-weight:bold;line-height:46px;text-align:center}#hube-area-05c strong{display:block;margin-top:18px;color:#08713c;font-size:clamp(13px,.95vw,18px);text-align:center}#hube-area-05c p{margin-top:16px;font-size:clamp(11px,.78vw,14px);line-height:1.85;font-weight:bold;text-align:center} #hube-wrap-06{background:linear-gradient(135deg,#005f3b 0,#003822 100%)}#hube-head-06{min-height:clamp(430px,32vw,560px);overflow:hidden}#hube-area-06a{color:rgba(255,255,255,.05);top:42px}#hube-area-06b{position:absolute;left:0;top:86px;color:#fff;font-size:clamp(26px,2.1vw,40px);font-weight:900}#hube-area-06b:after{content:"";display:block;width:34px;height:4px;margin-top:14px;background:#fff}#hube-area-06c{position:absolute;left:0;top:160px;width:55%;color:#fff}#hube-area-06c li{position:relative;margin-bottom:clamp(18px,1.4vw,26px);padding-left:48px;font-size:clamp(13px,.95vw,17px);line-height:1.75}#hube-area-06c li:before{content:"$2713";position:absolute;left:0;top:1px;width:28px;height:28px;color:#08713c;background:#fff;border-radius:5px;text-align:center;line-height:28px;font-weight:bold}#hube-area-06c strong{font-size:clamp(18px,1.3vw,25px)}#hube-area-06d{position:absolute;right:8%;top:54px;width:clamp(270px,24vw,420px);height:clamp(330px,27vw,480px);padding:30px;background:#fff;transform:rotate(8deg);box-shadow:0 20px 55px rgba(0,0,0,.22)}.hube-report-head{display:flex;justify-content:space-between;align-items:center}.hube-report-head b{width:70px;height:70px;display:grid;place-items:center;color:#08713c;background:#f2df61;border:16px solid #83b577;border-radius:50%;font-size:28px}.hube-report-head em{color:#08713c;font-size:18px;font-weight:bold;text-align:right}.hube-report-radar{width:48%;height:32%;margin:34px auto 24px;background:repeating-radial-gradient(circle,#dbe8e0 0 1px,transparent 1px 22px),conic-gradient(rgba(0,122,65,.4),rgba(0,122,65,.12),rgba(0,122,65,.5));clip-path:polygon(50% 0,90% 24%,82% 82%,50% 100%,14% 78%,9% 25%)}.hube-report-bars{display:grid;gap:12px}.hube-report-bars i{display:block;height:12px;background:linear-gradient(90deg,#08713c,#8bc68a);border-radius:999px}.hube-report-bars i:nth-child(2){width:74%}.hube-report-bars i:nth-child(3){width:88%}.hube-report-bars i:nth-child(4){width:58%} #hube-wrap-07{padding:clamp(58px,5vw,86px) 0;background:#fff}#hube-area-07a{text-align:center;font-size:clamp(26px,2vw,38px);font-weight:900}#hube-area-07a:after{margin-left:auto;margin-right:auto}#hube-area-07b{margin-top:46px}#hube-area-07b li{float:left;width:23.5%;height:clamp(170px,13vw,230px);margin-right:2%;padding-top:clamp(30px,2.4vw,46px);background:#fff;border-radius:10px;box-shadow:0 15px 40px rgba(0,0,0,.06);text-align:center}#hube-area-07b li:last-child{margin-right:0}#hube-area-07b strong{display:block;font-size:clamp(13px,.92vw,17px);line-height:1.6;text-align:center} #hube-wrap-08{padding:clamp(54px,4.5vw,78px) 0;background:linear-gradient(135deg,#1c8844 0,#006a3d 46%,#00452c 100%);color:#fff}#hube-head-08{min-height:230px}#hube-area-08a{font-size:clamp(16px,1.2vw,22px);font-weight:bold}#hube-area-08b{margin-top:10px;font-size:clamp(44px,4vw,72px);font-weight:900}#hube-area-08c{margin-top:8px;font-size:clamp(16px,1.15vw,22px);font-weight:bold}#hube-area-08d{position:absolute;left:0;bottom:0;width:52%}#hube-area-08d li{float:left;width:31.5%;min-height:56px;margin-right:1.8%;padding:13px 10px 0 42px;color:#064629;background:rgba(255,255,255,.86);border-radius:5px;font-size:clamp(11px,.78vw,14px);font-weight:bold;line-height:1.35}#hube-area-08d li:before{content:"$25A3";margin-left:-26px;margin-right:8px;color:#08713c}#hube-area-08e{position:absolute;right:0;top:0;width:42%;height:100%}#hube-area-08e a{position:relative;display:block;height:100%;min-height:190px;padding:36px 62px 0 120px;color:#08713c;background:#fff;border-radius:10px}#hube-area-08e em{display:block;text-align:center;font-size:clamp(15px,1.1vw,21px);font-weight:bold}#hube-area-08e strong{display:block;margin-top:24px;font-size:clamp(22px,1.65vw,32px);line-height:1.65}#hube-area-08e span{position:absolute;left:46px;top:50%;width:58px;height:58px;margin-top:-12px;color:#08713c;background:#f2df61;border-radius:50%;font-size:15px;font-weight:bold;line-height:58px;text-align:center}#hube-area-08e i{position:absolute;right:34px;top:50%;width:44px;height:44px;background:#08713c;border-radius:50%}#hube-area-08e i:after{content:"";position:absolute;left:15px;top:13px;width:12px;height:12px;border-top:3px solid #fff;border-right:3px solid #fff;transform:rotate(45deg)} #hube-wrap-10{padding:34px 0;background:#fff}#hube-head-10{min-height:82px;display:flex;align-items:center;gap:40px}#hube-area-10a{width:210px;color:#08713c;font-size:20px;font-weight:bold}#hube-area-10b{flex:1;font-size:12px;line-height:1.9;font-weight:bold}#hube-area-10c{width:300px}#hube-area-10c a{display:block;padding:15px 18px;color:#08713c;border:1px solid #9bc8aa;border-radius:999px;font-size:13px;font-weight:bold;text-align:center} @media screen and (max-width:900px){:root{--side:20px}#hube-head-01{height:70px}#hube-area-01b{display:none}#hube-area-01c{margin-left:auto}#hube-wrap-02{padding-top:70px}#hube-head-02{min-height:760px}#hube-area-02a{position:relative;left:auto;top:auto;width:100%;padding:40px 0 0}#hube-area-02a-02{font-size:clamp(48px,14vw,76px)}#hube-area-02b{top:430px;width:100%;height:330px;border-radius:0 0 0 62px}#hube-area-02c{right:18px;bottom:14px;width:210px;height:210px;padding:36px 26px 0}#hube-head-03 li{width:50%;border-bottom:1px solid #dfe7e2}#hube-head-03 li:nth-child(2){border-right:0}#hube-area-04c{width:100%}#hube-area-04d{position:relative;right:auto;top:auto;margin:36px auto 0}#hube-area-05c li{width:50%;min-height:250px}#hube-area-05c li:after{display:none}#hube-head-06{min-height:760px}#hube-area-06c{width:100%}#hube-area-06d{right:50%;top:430px;margin-right:-150px;width:300px;height:330px}#hube-area-07b li{width:48%;margin:0 4% 20px 0}#hube-area-07b li:nth-child(2n){margin-right:0}#hube-head-08{min-height:430px}#hube-area-08d{position:relative;left:auto;bottom:auto;width:100%;margin-top:22px}#hube-area-08d li{width:100%;margin:0 0 9px}#hube-area-08e{position:relative;right:auto;top:auto;width:100%;height:auto;margin-top:22px}#hube-area-08e a{min-height:165px;padding-left:96px}#hube-area-10c{width:100%}#hube-head-10{display:grid;gap:18px}} @media screen and (max-width:520px){#hube-area-02c{position:relative;right:auto;bottom:auto;margin:220px auto 0}.hube-icon-01,.hube-icon-02,.hube-icon-03,.hube-icon-04,.hube-icon-05,.hube-icon-06,.hube-icon-07,.hube-icon-08{width:50px;height:50px}#hube-area-05c li,#hube-area-07b li{width:100%;margin-right:0}#hube-area-08e a{padding:30px 54px 0 86px}#hube-area-08e span{left:28px}} #hube-area-09c button:focus, #hube-area-09c button:active { outline: none !important; box-shadow: none !important; } /* hube-head-02 layout fix */ #hube-wrap-02 { padding-top: 86px; background: linear-gradient(90deg,#fff 0,#fff 44%,#eef6f2 100%); overflow: hidden; } #hube-head-02 { display: grid; grid-template-columns: minmax(360px, 0.9fr) minmax(520px, 1.1fr); column-gap: clamp(28px,4vw,72px); align-items: center; min-height: clamp(660px,50vw,790px); padding: clamp(48px,4.8vw,82px) 0 clamp(34px,3.2vw,58px); } #hube-area-02a { position: relative; z-index: 3; left: auto; top: auto; width: min(100%, 560px); align-self: center; } #hube-area-02a-01 { font-size: clamp(18px,1.35vw,28px); } #hube-area-02a-02 { margin-top: clamp(24px,2vw,38px); font-size: clamp(58px,5.2vw,100px); line-height: 1.24; } #hube-area-02a-03 { width: min(100%, 520px); margin-top: clamp(22px,1.7vw,34px); } #hube-area-02a-04 { width: min(100%, 560px); } #hube-area-02b { position: relative; right: auto; top: auto; width: 100%; height: clamp(520px,40vw,650px); grid-column: 2; grid-row: 1; border-radius: 0 0 0 clamp(64px,7vw,120px); overflow: hidden; box-shadow: 0 24px 70px rgba(0,76,47,.08); } #hube-area-02b img { width: 100%; height: 100%; object-fit: cover; object-position: center center; } #hube-area-02b:before { width: 42%; z-index: 2; pointer-events: none; } #hube-area-02b:after { z-index: 2; pointer-events: none; } #hube-area-02c { z-index: 5; right: clamp(22px,3.8vw,70px); bottom: clamp(8px,1.2vw,22px); width: clamp(230px,17vw,320px); height: clamp(230px,17vw,320px); padding: clamp(42px,3.3vw,62px) clamp(30px,2.5vw,48px) 0; } @media screen and (min-width:901px) { #hube-area-02c { position: absolute; } } @media screen and (max-width:1100px) and (min-width:901px) { #hube-head-02 { grid-template-columns: minmax(330px, .92fr) minmax(440px, 1.08fr); } #hube-area-02a-02 { font-size: clamp(52px,5vw,70px); } #hube-area-02b { height: 560px; } } @media screen and (max-width:900px) { #hube-wrap-02 { padding-top: 70px; background: linear-gradient(180deg,#fff 0,#fff 56%,#eef6f2 100%); } #hube-head-02 { display: block; min-height: auto; padding: 40px 0 44px; } #hube-area-02a { position: relative; width: 100%; padding: 0; } #hube-area-02a-02 { font-size: clamp(48px,13vw,76px); line-height: 1.25; } #hube-area-02a-04 { width: min(100%, 560px); } #hube-area-02b { position: relative; top: auto; right: auto; width: 100%; height: clamp(320px,68vw,470px); margin-top: 34px; border-radius: 0 0 0 62px; } #hube-area-02b:before { width: 30%; } #hube-area-02c { position: absolute; right: 18px; bottom: 20px; width: clamp(190px,44vw,230px); height: clamp(190px,44vw,230px); padding: 34px 24px 0; } } @media screen and (max-width:520px) { #hube-head-02 { padding-bottom: 38px; } #hube-area-02a-01 { font-size: 4.4vw; } #hube-area-02a-02 { font-size: 12.6vw; } #hube-area-02a-03 { font-size: 3.55vw; } #hube-area-02a-04 a { padding-right: 42px; padding-left: 76px; } #hube-area-02b { height: 82vw; min-height: 300px; } #hube-area-02c { position: relative; right: auto; bottom: auto; margin: -74px auto 0; width: 230px; height: 230px; padding: 40px 27px 0; } } /* hube-head-02 compact tune */ #hube-area-02a-02 { max-width: none; white-space: nowrap; font-size: clamp(58px,4.2vw,82px); line-height: 1.22; letter-spacing: .01em; } #hube-head-02 { min-height: clamp(620px,44vw,720px); } #hube-area-02b { height: clamp(500px,35vw,610px); } #hube-area-02a-01 { font-size: clamp(17px,1.12vw,23px); line-height: 1.65; } #hube-area-02a-03 { font-size: clamp(13px,.9vw,17px); line-height: 1.8; } #hube-area-02a-04 a { min-height: clamp(76px,5.1vw,94px); } @media screen and (max-width:1100px) and (min-width:901px) { #hube-area-02a-02 { font-size: clamp(52px,4.8vw,66px); } #hube-area-02b { height: 520px; } } @media screen and (max-width:900px) { #hube-head-02 { min-height: auto; } #hube-area-02a-02 { white-space: nowrap; font-size: clamp(48px,12.2vw,72px); } } @media screen and (max-width:520px) { #hube-area-02a-02 { font-size: clamp(42px,11.8vw,54px); } } /* hube-head-02 mobile final tune */ @media screen and (max-width:900px) { #hube-area-02b { height: clamp(320px,55vw,430px); } #hube-area-02c { bottom: 18px; } } @media screen and (max-width:520px) { #hube-area-02b { height: clamp(285px,76vw,330px); margin-top: 28px; } #hube-area-02c { margin-top: -62px; } #hube-head-02 { padding-bottom: 34px; } } /* hube-head-02 background overlay tune */ #hube-head-02 { display: block; min-height: clamp(620px,44vw,720px); padding: 0; overflow: hidden; } #hube-area-02b { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; grid-column: auto; grid-row: auto; border-radius: 0 0 0 clamp(64px,7vw,120px); box-shadow: none; } #hube-area-02b img { width: 100%; height: 100%; object-fit: cover; object-position: 68% center; } #hube-area-02b:before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 58%; height: 100%; background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 45%,rgba(255,255,255,.64) 74%,rgba(255,255,255,0) 100%); pointer-events: none; } #hube-area-02b:after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(0deg,#fff 0%,rgba(255,255,255,.86) 42%,rgba(255,255,255,0) 100%); pointer-events: none; } #hube-area-02a { position: relative; z-index: 4; left: auto; top: auto; width: min(44%, 560px); padding: clamp(48px,4.8vw,82px) 0 clamp(34px,3.2vw,58px) clamp(26px,3.8vw,68px); } #hube-area-02c { position: absolute; z-index: 5; right: clamp(28px,4.8vw,86px); bottom: clamp(16px,2vw,36px); } @media screen and (max-width:1100px) and (min-width:901px) { #hube-area-02a { width: min(48%, 520px); } #hube-area-02b img { object-position: 72% center; } } @media screen and (max-width:900px) { #hube-head-02 { display: block; min-height: auto; padding: 0 0 44px; overflow: visible; } #hube-area-02b { position: relative; inset: auto; width: 100%; height: clamp(320px,55vw,430px); margin-top: 28px; border-radius: 0 0 0 62px; } #hube-area-02b:before { width: 34%; background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.78) 45%,rgba(255,255,255,0) 100%); } #hube-area-02a { width: 100%; padding: 40px 0 0; } #hube-area-02c { right: 18px; bottom: 18px; } } @media screen and (max-width:520px) { #hube-head-02 { padding-bottom: 34px; } #hube-area-02b { height: clamp(285px,76vw,330px); } #hube-area-02c { position: relative; right: auto; bottom: auto; margin: -62px auto 0; } } /* footer fix */ #hube-wrap-10 { clear: both; overflow: hidden; } #hube-head-10 { max-width: var(--max); } #hube-area-10a, #hube-area-10b, #hube-area-10c { position: static; left: auto; right: auto; top: auto; bottom: auto; } @media screen and (max-width:900px) { #hube-head-10 { width: calc(100% - (var(--side) * 2)); display: grid; grid-template-columns: 1fr; gap: 18px; } #hube-area-10a, #hube-area-10b, #hube-area-10c { width: 100%; } } /* FAQ */ #hube-wrap-09 { padding: clamp(58px,5vw,86px) 0; background: #f7f9f8; } #hube-head-09 { min-height: 360px; } #hube-area-09a { position: absolute; left: 0; top: 0; color: #edf1ef; font-size: clamp(64px,6vw,115px); font-weight: 900; line-height: .8; } #hube-area-09b { padding-top: 52px; text-align: center; font-size: clamp(26px,2vw,38px); font-weight: 900; } #hube-area-09b:after { content: ""; display: block; width: 34px; height: 4px; margin: 13px auto 0; background: var(--green); } #hube-area-09c { width: min(900px,100%); margin: 42px auto 0; } #hube-area-09c dt { margin-top: 12px; } #hube-area-09c button { position: relative; display: block; width: 100%; min-height: 62px; padding: 18px 58px 18px 24px; color: #063b29; background: #ffffff; border: 1px solid #dce8e1; border-radius: 10px; font-family: inherit; font-size: clamp(14px,.95vw,17px); font-weight: bold; text-align: left; cursor: pointer; box-shadow: 0 10px 28px rgba(0,76,47,.05); } #hube-area-09c button:after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--green); font-size: 28px; line-height: 1; } #hube-area-09c dt.active button:after { content: "="; } #hube-area-09c dd { display: none; margin: 0; padding: 0 24px 22px; color: #314039; background: #ffffff; border-right: 1px solid #dce8e1; border-bottom: 1px solid #dce8e1; border-left: 1px solid #dce8e1; border-radius: 0 0 10px 10px; font-size: clamp(13px,.88vw,16px); font-weight: bold; line-height: 2; } #hube-area-09c dt.active + dd { display: block; } #hube-area-09c dt.active button { border-radius: 10px 10px 0 0; border-bottom-color: transparent; } @media screen and (max-width:900px) { #hube-head-09 { min-height: 430px; } #hube-area-09a { left: 0; } #hube-area-09c { margin-top: 34px; } } /* 個別SVGアイコン */ .hube-icon-01, .hube-icon-02, .hube-icon-03, .hube-icon-04 { border: none !important; background-repeat: no-repeat; background-position: center center; background-size: contain; } .hube-icon-01:before, .hube-icon-01:after, .hube-icon-02:before, .hube-icon-02:after, .hube-icon-03:before, .hube-icon-03:after, .hube-icon-04:before, .hube-icon-04:after { display: none !important; content: none !important; } .hube-icon-01 { background-image: url(images/icon-checklist.svg); } .hube-icon-02 { background-image: url(images/icon-meeting.svg); } .hube-icon-03 { background-image: url(images/icon-handshake.svg); } .hube-icon-04 { background-image: url(images/icon-chart.svg); } /* hube-area-02c image card */ #hube-area-02c { width: clamp(400px,20vw,370px) !important; height: auto !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; } #hube-area-02c img { display: block; width: 100%; height: auto; } @media screen and (max-width:900px) { #hube-area-02c { width: clamp(220px,52vw,292px) !important; } } @media screen and (max-width:520px) { #hube-area-02c { width: min(76vw,292px) !important; margin-top: -70px !important; } } /* hube-area-02a-04 image button */ #hube-area-02a-04 { width: min(100%, 560px) !important; } #hube-area-02a-04 a { display: block !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; transition: transform .2s ease, opacity .2s ease; } #hube-area-02a-04 a:hover { transform: translateY(-2px); opacity: .96; } #hube-area-02a-04 img { display: block; width: 100%; height: auto; } @media screen and (max-width:520px) { #hube-area-02a-04 { width: min(100%, 520px) !important; } } /* hube-head-03 image text float */ #hube-head-03 ul { overflow: hidden; } #hube-head-03 li { padding: 0 clamp(18px,1.7vw,32px) !important; text-align: center !important; } #hube-head-03 li:after { content: ""; display: block; clear: both; } #hube-head-03 .hube-head-03-img { float: none; display: block; width: clamp(50px,4.1vw,72px); height: clamp(50px,4.1vw,72px); margin: 0 auto 14px; } #hube-head-03 strong { display: block !important; overflow: visible; padding-top: 0; text-align: center !important; line-height: 1.65; } @media screen and (max-width:900px) { #hube-head-03 li { min-height: 112px; padding: 22px 18px !important; } } @media screen and (max-width:520px) { #hube-head-03 { padding: 18px 0; } #hube-head-03 li { width: 100% !important; min-height: 0; border-right: 0 !important; } #hube-head-03 li:last-child { border-bottom: 0; } #hube-head-03 .hube-head-03-img { width: 50px; height: 50px; margin: 0 auto 12px; } } /* hube-area-01c image button */ #hube-area-01c { width: clamp(142px,10.8vw,188px) !important; } #hube-area-01c a { display: block !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; line-height: 0; } #hube-area-01c a:after { display: none !important; content: none !important; } #hube-area-01c img { display: block; width: 100%; height: auto; } @media screen and (max-width:520px) { #hube-area-01c { width: 148px !important; } } /* hube-wrap-04 about strengthen */ #hube-wrap-04 { padding: clamp(78px,7vw,126px) 0 clamp(72px,6vw,112px); background: linear-gradient(180deg,#f8faf9 0%,#ffffff 54%,#f4f8f6 100%); } #hube-head-04 { min-height: clamp(260px,18vw,330px); padding-left: clamp(18px,2vw,38px); } #hube-area-04a { left: clamp(8px,1.4vw,24px); top: -8px; color: rgba(8,113,60,.055); font-size: clamp(82px,8.4vw,164px); letter-spacing: .02em; line-height: .78; z-index: 0; } #hube-area-04b { position: relative; z-index: 2; padding-top: clamp(56px,5vw,88px); font-size: clamp(30px,2.35vw,46px); letter-spacing: .02em; } #hube-area-04b:after { width: 46px; height: 5px; margin-top: 16px; border-radius: 999px; } #hube-area-04c { position: relative; z-index: 2; margin-top: clamp(24px,2vw,36px); width: min(68%, 880px); color: #26342d; font-size: clamp(14px,.95vw,18px); line-height: 2.12; } #hube-area-04d { position: absolute; right: clamp(38px,6.5vw,130px); top: 50%; width: clamp(230px,19vw,360px); height: auto; transform: translateY(-46%); z-index: 1; } #hube-area-04d img { display: block; width: 100%; height: auto; } #hube-area-04d span { display: none !important; } @media screen and (max-width:900px) { #hube-head-04 { min-height: 0; padding: 0; } #hube-area-04a { left: 0; top: -2px; font-size: clamp(70px,16vw,116px); } #hube-area-04b { padding-top: 50px; } #hube-area-04c { width: 100%; } #hube-area-04d { position: relative; right: auto; top: auto; width: min(58vw,300px); margin: 32px auto 0; transform: none; } } @media screen and (max-width:520px) { #hube-wrap-04 { padding-top: 64px; } #hube-area-04c br { display: none; } #hube-area-04d { width: min(74vw,280px); } } /* hube-wrap-05 flow strengthen */ #hube-wrap-05 { padding: clamp(76px,6.8vw,118px) 0; background: linear-gradient(180deg,#fff 0%,#f6faf8 100%); } #hube-head-05 { min-height: 0; } #hube-area-05a { color: rgba(8,113,60,.055); font-size: clamp(78px,8vw,150px); } #hube-area-05b { position: relative; z-index: 2; } #hube-area-05b:after { width: 46px; height: 5px; border-radius: 999px; } #hube-area-05c { position: relative; z-index: 2; margin-top: clamp(42px,4vw,70px); } #hube-area-05c ul { margin-right: -2%; } #hube-area-05c li { float: left; width: 23%; min-height: clamp(300px,20vw,360px); margin-right: 2%; padding: clamp(24px,2vw,34px) clamp(16px,1.55vw,28px) clamp(22px,1.8vw,30px) !important; background: #fff; border: 1px solid #e2eee7; border-radius: 16px; box-shadow: 0 16px 38px rgba(0,62,35,.08); text-align: center; } #hube-area-05c li:not(:last-child):after { right: -9%; top: 50%; width: clamp(22px,2vw,34px); height: clamp(22px,2vw,34px); margin-top: calc(clamp(22px,2vw,34px) / -2); background: none; border-top: 5px solid #cfe6d5; border-right: 5px solid #cfe6d5; clip-path: none; transform: rotate(45deg); } #hube-area-05c em { position: absolute; left: clamp(18px,1.5vw,28px); top: clamp(18px,1.5vw,28px); width: 48px; height: 48px; margin: 0; background: #08713c; border: 4px solid #eaf7ef; box-shadow: 0 0 0 1px #08713c; } #hube-area-05c .hube-flow-img { display: block; width: clamp(72px,5.6vw,104px); height: clamp(72px,5.6vw,104px); margin: clamp(28px,2.5vw,42px) auto 18px; } #hube-area-05c .hube-flow-img img { display: block; width: 100%; height: auto; } #hube-area-05c strong { margin-top: 0; color: #10261b; font-size: clamp(16px,1.05vw,21px); line-height: 1.55; } #hube-area-05c p { margin-top: 14px; color: #405049; font-size: clamp(12px,.84vw,15px); line-height: 1.85; } @media screen and (max-width:900px) { #hube-area-05c ul { margin-right: -4%; } #hube-area-05c li { width: 46%; min-height: 300px; margin: 0 4% 24px 0; } #hube-area-05c li:after { display: none; } } @media screen and (max-width:520px) { #hube-area-05c ul { margin-right: 0; } #hube-area-05c li { width: 100%; min-height: 0; margin: 0 0 18px 0; } #hube-area-05c p br { display: none; } } /* hube-wrap-05 number image */ #hube-area-05c em.hube-flow-num { position: absolute; left: clamp(16px,1.45vw,28px); top: clamp(14px,1.35vw,26px); display: block; width: clamp(48px,3.7vw,68px); height: clamp(48px,3.7vw,68px); margin: 0; padding: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; line-height: 0; } #hube-area-05c em.hube-flow-num img { display: block; width: 100%; height: auto; } @media screen and (max-width:520px) { #hube-area-05c em.hube-flow-num { width: 58px; height: 58px; } } /* hube-wrap-05 flow balance tune */ #hube-wrap-05 { background: linear-gradient(180deg,#f7fbf8 0%,#eef7f1 52%,#ffffff 100%) !important; } #hube-head-05 { width: min(calc(100% - (var(--side) * 2)), 1540px); } #hube-area-05c { padding: clamp(28px,2.8vw,48px) clamp(20px,2.5vw,44px); background: rgba(255,255,255,.56); border: 1px solid #deeee5; border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); } #hube-area-05c ul { margin-right: -3.6% !important; } #hube-area-05c li { width: 21.4% !important; min-height: clamp(270px,18vw,326px) !important; margin-right: 3.6% !important; padding-top: clamp(24px,1.8vw,30px) !important; background: linear-gradient(180deg,#ffffff 0%,#f6fbf8 100%) !important; border-color: #d6eadf !important; border-radius: 14px !important; } #hube-area-05c li:not(:last-child):after { right: calc(-8.4% - 8px) !important; top: 50% !important; z-index: 3; width: clamp(18px,1.45vw,28px) !important; height: clamp(18px,1.45vw,28px) !important; margin-top: calc(clamp(18px,1.45vw,28px) / -2) !important; border-top: 4px solid #8fbea0 !important; border-right: 4px solid #8fbea0 !important; opacity: .78; } #hube-area-05c .hube-flow-img { margin-top: clamp(24px,2vw,36px) !important; margin-bottom: 14px !important; width: clamp(66px,5vw,92px) !important; height: clamp(66px,5vw,92px) !important; } #hube-area-05c strong { color: #08713c !important; } #hube-area-05c p { margin-top: 12px !important; } @media screen and (max-width:1100px) and (min-width:901px) { #hube-area-05c { padding-left: 26px; padding-right: 26px; } #hube-area-05c ul { margin-right: -2.4% !important; } #hube-area-05c li { width: 23.2% !important; margin-right: 2.4% !important; padding-left: 14px !important; padding-right: 14px !important; } #hube-area-05c li:not(:last-child):after { right: calc(-5.3% - 7px) !important; } } @media screen and (max-width:900px) { #hube-area-05c { padding: 26px 22px; border-radius: 20px; } #hube-area-05c ul { margin-right: -4% !important; } #hube-area-05c li { width: 48% !important; margin: 0 4% 20px 0 !important; } #hube-area-05c li:nth-child(2n) { margin-right: 0 !important; } #hube-area-05c li:after { display: none !important; } } @media screen and (max-width:520px) { #hube-area-05c { padding: 18px; } #hube-area-05c ul { margin-right: 0 !important; } #hube-area-05c li { width: 100% !important; margin: 0 0 16px 0 !important; } } /* hube-wrap-06 reorganize */ #hube-wrap-06 { background: radial-gradient(circle at 78% 42%, rgba(108,177,105,.34) 0%, rgba(0,95,59,0) 32%), linear-gradient(135deg,#00633d 0%,#00331f 100%) !important; } #hube-head-06 { min-height: clamp(560px,38vw,680px) !important; overflow: visible !important; } #hube-area-06a { top: clamp(34px,3.4vw,58px); } #hube-area-06b { top: clamp(84px,6vw,112px) !important; line-height: 1.35; } #hube-area-06b:after { width: 48px !important; height: 5px !important; border-radius: 999px; } #hube-area-06c { top: clamp(180px,12vw,230px) !important; width: min(55%, 760px) !important; } #hube-area-06c li { position: relative; min-height: 68px; margin-bottom: clamp(16px,1.35vw,24px) !important; padding: 4px 0 0 clamp(48px,3.3vw,62px) !important; font-size: clamp(13px,.9vw,16px) !important; line-height: 1.7 !important; color: rgba(255,255,255,.86); } #hube-area-06c li:before { left: 0 !important; top: 5px !important; width: clamp(28px,2.1vw,38px) !important; height: clamp(28px,2.1vw,38px) !important; background: #fff !important; border-radius: 8px !important; color: transparent !important; box-shadow: 0 8px 22px rgba(0,0,0,.12); } #hube-area-06c li:after { content: ""; position: absolute; left: clamp(8px,.65vw,12px); top: clamp(13px,1vw,18px); width: clamp(13px,1vw,18px); height: clamp(8px,.65vw,12px); border-left: 4px solid #168348; border-bottom: 4px solid #168348; transform: rotate(-45deg); } #hube-area-06c strong { display: block; margin-bottom: 5px; color: #fff; font-size: clamp(18px,1.28vw,25px) !important; line-height: 1.42; } #hube-area-06d { position: absolute; right: clamp(8px,5.8vw,102px) !important; top: clamp(48px,4vw,76px) !important; width: clamp(300px,28vw,500px) !important; height: auto !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; } #hube-area-06d img { display: block; width: 100%; height: auto; } .hube-report-head,.hube-report-radar,.hube-report-bars { display: none !important; } @media screen and (max-width:900px) { #hube-head-06 { min-height: 0 !important; padding: 70px 0 56px; } #hube-area-06b, #hube-area-06c, #hube-area-06d { position: relative !important; left: auto !important; right: auto !important; top: auto !important; } #hube-area-06b { padding-top: 0; } #hube-area-06c { width: 100% !important; margin-top: 34px; } #hube-area-06d { width: min(78vw,420px) !important; margin: 34px auto 0 !important; } } @media screen and (max-width:520px) { #hube-area-06c li { padding-left: 48px !important; } #hube-area-06c strong { font-size: 17px !important; } #hube-area-06d { width: min(88vw,360px) !important; } } /* hube-area-06c list refine */ #hube-area-06c ul { width: 100%; } #hube-area-06c li { min-height: 0 !important; margin-bottom: clamp(12px,1vw,18px) !important; padding: clamp(15px,1.2vw,20px) clamp(18px,1.5vw,26px) clamp(15px,1.2vw,20px) clamp(58px,4vw,74px) !important; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; color: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } #hube-area-06c li:last-child { margin-bottom: 0 !important; } #hube-area-06c li:before { content: "" !important; left: clamp(14px,1.1vw,20px) !important; top: clamp(17px,1.35vw,22px) !important; width: clamp(30px,2.3vw,40px) !important; height: clamp(30px,2.3vw,40px) !important; background: url("images/hube-feature-check.png") center / contain no-repeat !important; border-radius: 0 !important; box-shadow: none !important; } #hube-area-06c li:after { display: none !important; } #hube-area-06c strong { display: block; margin: 0 0 2px !important; color: #fff; font-size: clamp(17px,1.2vw,23px) !important; line-height: 1.35 !important; letter-spacing: .01em; } #hube-area-06c span { display: block; margin-top: 3px; color: rgba(255,255,255,.82); font-size: clamp(12px,.86vw,15px); line-height: 1.62; font-weight: bold; } @media screen and (max-width:900px) { #hube-area-06c li { padding-left: 62px !important; } } @media screen and (max-width:520px) { #hube-area-06c li { padding: 14px 14px 14px 54px !important; border-radius: 12px; } #hube-area-06c li:before { left: 13px !important; top: 16px !important; width: 30px !important; height: 30px !important; } #hube-area-06c strong { font-size: 16px !important; } #hube-area-06c span { font-size: 12px; line-height: 1.58; } } /* hube-wrap-06 bottom space */ #hube-wrap-06 { padding-bottom: clamp(54px,5.4vw,96px); } #hube-head-06 { padding-bottom: clamp(44px,4.8vw,86px); } @media screen and (max-width:900px) { #hube-wrap-06 { padding-bottom: 0; } #hube-head-06 { padding-bottom: 72px !important; } } @media screen and (max-width:520px) { #hube-head-06 { padding-bottom: 58px !important; } } /* hube-wrap-07 recommend refine */ #hube-wrap-07 { padding: clamp(76px,6.5vw,116px) 0 clamp(72px,6vw,108px) !important; background: linear-gradient(180deg,#ffffff 0%,#f3faf6 58%,#ffffff 100%) !important; } #hube-head-07 { overflow: visible; } #hube-area-07a { position: relative; z-index: 2; font-size: clamp(28px,2.2vw,42px) !important; line-height: 1.45; } #hube-area-07a:before { content: "RECOMMEND"; position: absolute; left: 50%; top: -42px; z-index: -1; color: rgba(8,113,60,.055); font-size: clamp(62px,7vw,132px); font-weight: 900; line-height: 1; letter-spacing: .04em; transform: translateX(-50%); white-space: nowrap; } #hube-area-07a:after { width: 46px !important; height: 5px !important; border-radius: 999px; } #hube-area-07b { margin-top: clamp(42px,4vw,68px) !important; } #hube-area-07b ul { margin-right: -2%; } #hube-area-07b li { float: left; width: 23% !important; height: auto !important; min-height: clamp(238px,18vw,320px); margin-right: 2% !important; padding: clamp(28px,2.4vw,42px) clamp(16px,1.5vw,26px) clamp(24px,2vw,34px) !important; background: linear-gradient(180deg,#ffffff 0%,#f7fbf8 100%) !important; border: 1px solid #dceee5; border-radius: 16px !important; box-shadow: 0 18px 42px rgba(0,72,42,.08) !important; text-align: center; } #hube-area-07b li:last-child { margin-right: 0 !important; } #hube-area-07b li:hover { transform: translateY(-3px); transition: transform .2s ease; } #hube-area-07b .hube-recommend-img { display: block; width: clamp(70px,5.6vw,104px); height: clamp(70px,5.6vw,104px); margin: 0 auto clamp(16px,1.4vw,24px); } #hube-area-07b .hube-recommend-img img { display: block; width: 100%; height: auto; } #hube-area-07b strong { display: block; color: #10261b; font-size: clamp(14px,1vw,18px) !important; line-height: 1.72 !important; letter-spacing: .01em; } @media screen and (max-width:900px) { #hube-area-07b ul { margin-right: -4%; } #hube-area-07b li { width: 48% !important; min-height: 230px; margin: 0 4% 22px 0 !important; } #hube-area-07b li:nth-child(2n) { margin-right: 0 !important; } } @media screen and (max-width:520px) { #hube-area-07a:before { top: -28px; font-size: 16vw; } #hube-area-07b ul { margin-right: 0; } #hube-area-07b li { width: 100% !important; min-height: 0; margin: 0 0 16px 0 !important; } } /* hube-wrap-07 text added design */ #hube-wrap-07 { background: linear-gradient(180deg,#ffffff 0%,#eef8f2 50%,#ffffff 100%) !important; } #hube-area-07b li { position: relative; min-height: clamp(300px,21vw,382px) !important; padding: clamp(34px,2.7vw,48px) clamp(18px,1.7vw,30px) clamp(28px,2.3vw,38px) !important; overflow: hidden; } #hube-area-07b li:before { position: absolute; left: clamp(18px,1.4vw,26px); top: clamp(16px,1.3vw,24px); z-index: 1; color: rgba(8,113,60,.12); font-size: clamp(42px,3.6vw,68px); font-weight: 900; line-height: 1; letter-spacing: .02em; } #hube-area-07b li:nth-child(1):before { content: "01"; } #hube-area-07b li:nth-child(2):before { content: "02"; } #hube-area-07b li:nth-child(3):before { content: "03"; } #hube-area-07b li:nth-child(4):before { content: "04"; } #hube-area-07b li:after { content: ""; position: absolute; right: -42px; top: -42px; width: clamp(118px,9vw,170px); height: clamp(118px,9vw,170px); background: #edf8f2; border-radius: 50%; z-index: 0; } #hube-area-07b .hube-recommend-img { position: relative; z-index: 2; width: clamp(78px,6.4vw,116px) !important; height: clamp(78px,6.4vw,116px) !important; margin-bottom: clamp(18px,1.5vw,26px) !important; } #hube-area-07b .hube-recommend-img:before { content: ""; position: absolute; left: 50%; top: 50%; width: 128%; height: 128%; background: linear-gradient(180deg,#f0faf4 0%,#dff3e8 100%); border-radius: 50%; transform: translate(-50%,-50%); z-index: -1; } #hube-area-07b strong { position: relative; z-index: 2; min-height: 3.3em; color: #08713c !important; font-size: clamp(15px,1.04vw,19px) !important; line-height: 1.55 !important; } #hube-area-07b strong + span { position: relative; z-index: 2; display: block; margin-top: clamp(10px,.9vw,15px); padding-top: clamp(10px,.85vw,14px); border-top: 1px solid #dceee5; color: #405049; font-size: clamp(12px,.86vw,15px); line-height: 1.7; font-weight: bold; text-align: left; } @media screen and (max-width:900px) { #hube-area-07b li { min-height: 300px !important; } #hube-area-07b strong { min-height: 0; } } @media screen and (max-width:520px) { #hube-area-07b li { min-height: 0 !important; padding: 30px 22px 26px !important; } #hube-area-07b strong + span { text-align: center; } } /* hube-wrap-07 remove icon circle */ #hube-area-07b .hube-recommend-img:before { display: none !important; } /* hube-wrap-07 remove card after */ #hube-area-07b li:after { display: none !important; content: none !important; } /* hube-wrap-08 final cta refine */ #hube-wrap-08 { padding: clamp(68px,5.8vw,104px) 0 !important; background: radial-gradient(circle at 82% 42%, rgba(154,215,142,.32) 0%, rgba(0,106,61,0) 35%), linear-gradient(135deg,#178849 0%,#006a3d 48%,#003f29 100%) !important; } #hube-head-08 { min-height: clamp(280px,22vw,390px) !important; } #hube-area-08a { font-size: clamp(16px,1.15vw,22px) !important; line-height: 1.7; } #hube-area-08b { margin-top: 8px !important; font-size: clamp(42px,3.8vw,72px) !important; line-height: 1.18; } #hube-area-08c { margin-top: 12px !important; font-size: clamp(15px,1.05vw,21px) !important; line-height: 1.75; } #hube-area-08d { bottom: clamp(2px,.4vw,8px) !important; width: 51% !important; } #hube-area-08d li { min-height: clamp(66px,4.8vw,82px) !important; padding: 15px 12px 0 44px !important; background: rgba(255,255,255,.9) !important; border-radius: 8px !important; line-height: 1.42 !important; } #hube-area-08d li:before { content: "" !important; display: inline-block; width: 18px; height: 18px; margin-left: -28px; margin-right: 10px; vertical-align: -3px; background: url("images/hube-feature-check.png") center / contain no-repeat; } #hube-area-08e { right: 0 !important; top: 50% !important; width: min(45%, 620px) !important; height: auto !important; transform: translateY(-50%); } #hube-area-08e a { display: block !important; height: auto !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; color: inherit !important; } #hube-area-08e img { display: block; width: 100%; height: auto; } #hube-area-08e em, #hube-area-08e strong, #hube-area-08e span, #hube-area-08e i { display: none !important; } @media screen and (max-width:900px) { #hube-head-08 { min-height: 0 !important; } #hube-area-08d { width: 100% !important; } #hube-area-08e { position: relative !important; right: auto !important; top: auto !important; width: min(100%, 620px) !important; margin: 28px auto 0 !important; transform: none; } } @media screen and (max-width:520px) { #hube-area-08b { font-size: 10.5vw !important; } #hube-area-08d li { padding-top: 13px !important; } } /* hube-wrap-08 background tone */ #hube-wrap-08 { background: radial-gradient(circle at 78% 42%, rgba(140,208,154,.22) 0%, rgba(9,73,61,0) 36%), linear-gradient(135deg,#0b6f59 0%,#075743 48%,#053526 100%) !important; } /* hube-wrap-08 check cards refine */ #hube-area-08c { margin-top: 10px !important; margin-bottom: clamp(22px,2vw,34px); } #hube-area-08d { bottom: clamp(10px,1vw,20px) !important; } #hube-area-08d ul { margin-right: -2%; } #hube-area-08d li { position: relative; width: 31.333% !important; min-height: clamp(74px,5.3vw,94px) !important; margin-right: 2% !important; padding: clamp(14px,1.1vw,18px) 12px clamp(12px,1vw,16px) clamp(46px,3.2vw,58px) !important; color: #0c3b29 !important; background: linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(235,249,240,.94) 100%) !important; border: 1px solid rgba(255,255,255,.7); border-radius: 10px !important; box-shadow: 0 12px 28px rgba(0,42,25,.12), inset 0 1px 0 rgba(255,255,255,.85); line-height: 1.45 !important; } #hube-area-08d li:before { position: absolute; left: clamp(14px,1vw,18px); top: 50%; width: clamp(22px,1.7vw,30px) !important; height: clamp(22px,1.7vw,30px) !important; margin: 0 !important; transform: translateY(-50%); } #hube-area-08d li:after { content: ""; position: absolute; left: clamp(46px,3.2vw,58px); right: 14px; bottom: 10px; height: 3px; background: linear-gradient(90deg,#168348,rgba(22,131,72,0)); border-radius: 999px; opacity: .42; } #hube-area-08d li:last-child { margin-right: 0 !important; } @media screen and (max-width:900px) { #hube-area-08c { margin-bottom: 18px; } #hube-area-08d { bottom: auto !important; } #hube-area-08d ul { margin-right: 0; } #hube-area-08d li { width: 100% !important; min-height: 66px !important; margin: 0 0 10px 0 !important; padding-left: 58px !important; } #hube-area-08d li:before { left: 18px; } #hube-area-08d li:after { left: 58px; } } @media screen and (max-width:520px) { #hube-area-08d li { padding-right: 14px !important; } } /* hube-area-08d image check float */ #hube-area-08d li { overflow: hidden; padding-left: clamp(14px,1.1vw,18px) !important; } #hube-area-08d li:before { display: none !important; content: none !important; } #hube-area-08d li img { float: left; display: block; width: clamp(24px,1.8vw,32px); height: clamp(24px,1.8vw,32px); margin: 2px clamp(9px,.8vw,13px) 0 0; } #hube-area-08d li:after { left: clamp(48px,3.5vw,62px) !important; } @media screen and (max-width:900px) { #hube-area-08d li { padding-left: 16px !important; } #hube-area-08d li img { width: 30px; height: 30px; margin-right: 12px; } #hube-area-08d li:after { left: 58px !important; } } /* smartphone menu */ #hube-menu-toggle { display: none; } @media screen and (max-width:900px) { #hube-head-01 { height: 70px; gap: 12px; } #hube-area-01a { order: 1; width: auto; min-width: 0; } #hube-area-01b { display: block !important; position: absolute; left: 0; right: 0; top: 70px; z-index: 20; visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; } body.hube-menu-open #hube-area-01b { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; } #hube-area-01b ul { display: grid !important; gap: 0 !important; justify-content: stretch !important; padding: 8px; background: rgba(255,255,255,.98); border: 1px solid #dceee5; border-radius: 14px; box-shadow: 0 18px 42px rgba(0,72,42,.14); backdrop-filter: blur(14px); } #hube-area-01b li { font-size: 14px !important; border-bottom: 1px solid #e7f1eb; } #hube-area-01b li:last-child { border-bottom: 0; } #hube-area-01b li a { display: block; padding: 15px 14px; color: #0c3b29; line-height: 1.35; } #hube-area-01b li a:after { content: ""; float: right; width: 8px; height: 8px; margin-top: 4px; border-top: 2px solid #168348; border-right: 2px solid #168348; transform: rotate(45deg); } #hube-menu-toggle { order: 3; display: grid; place-items: center; width: 46px; height: 46px; margin-left: 0; padding: 8px 0 6px; color: #08713c; background: #f2fbf5; border: 1px solid #cfe6d5; border-radius: 12px; cursor: pointer; } #hube-menu-toggle span { display: block; width: 20px; height: 2px; margin: 2px 0; background: currentColor; border-radius: 999px; transition: transform .22s ease, opacity .22s ease; } #hube-menu-toggle em { margin-top: 1px; font-size: 9px; line-height: 1; font-weight: 900; letter-spacing: .08em; text-align: center; } body.hube-menu-open #hube-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.hube-menu-open #hube-menu-toggle span:nth-child(2) { opacity: 0; } body.hube-menu-open #hube-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } #hube-area-01c { order: 2; margin-left: auto !important; margin-right: 0 !important; flex-shrink: 0; width: clamp(108px,28vw,142px) !important; } } @media screen and (max-width:520px) { #hube-head-01 { width: calc(100% - 24px) !important; } #hube-area-01a a { gap: 7px; font-size: 15px; } #hube-area-01a span { width: 24px; height: 19px; } #hube-area-01c { display: none; } #hube-menu-toggle { margin-left: auto; } } /* smartphone menu backdrop blur */ @media screen and (max-width:900px) { body.hube-menu-open::before { content: ""; position: fixed; left: 0; right: 0; top: 70px; bottom: 0; z-index: 9998; pointer-events: none; background: rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } } /* common footer */ #hube-wrap-10 { clear: both; padding: clamp(38px,4vw,64px) 0 32px !important; color: #dfeee6; background: linear-gradient(135deg,#073524 0%,#061f17 100%) !important; } #hube-head-10 { display: grid !important; grid-template-columns: minmax(180px,240px) minmax(280px,1fr) minmax(260px,390px); align-items: start !important; gap: clamp(28px,3.6vw,64px) !important; min-height: 0 !important; } #hube-area-10a { width: auto !important; color: #fff !important; font-size: clamp(20px,1.5vw,28px) !important; font-weight: 900 !important; } #hube-area-10a a { display: flex; align-items: center; gap: 11px; } #hube-area-10a span { background: #8bd38f !important; } #hube-area-10b { width: auto !important; color: rgba(255,255,255,.78) !important; font-size: clamp(12px,.9vw,15px) !important; line-height: 1.9 !important; font-weight: 700 !important; } #hube-area-10b p { margin: 0; line-height: 1.9; } #hube-area-10b small { display: block; margin-top: 18px; color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .02em; } #hube-area-10c { width: auto !important; } #hube-area-10c ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 12px; } #hube-area-10c li { display: block; } #hube-area-10c a { display: block !important; padding: 11px 16px !important; color: #fff !important; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18) !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.2; text-align: center !important; } #hube-area-10c a:hover { opacity: 1; background: rgba(139,211,143,.16); border-color: rgba(139,211,143,.45) !important; } @media screen and (max-width:900px) { #hube-head-10 { grid-template-columns: 1fr !important; gap: 22px !important; } #hube-area-10c ul { justify-content: flex-start; } } @media screen and (max-width:520px) { #hube-wrap-10 { padding: 34px 0 28px !important; } #hube-area-10b br { display: none; } #hube-area-10c ul { display: grid; gap: 9px; } #hube-area-10c a { width: 100%; } } /* common footer image layout */ #hube-wrap-10 { clear: both; padding: clamp(46px,5vw,76px) 0 24px !important; color: #dfeee6; background: linear-gradient(135deg,#073524 0%,#061f17 100%) !important; } #hube-head-10 { display: block !important; min-height: 0 !important; } #hube-footer-main { display: grid; grid-template-columns: minmax(220px,.9fr) minmax(280px,1.2fr) minmax(300px,1fr); align-items: center; gap: clamp(26px,4vw,64px); } #hube-area-10a, #hube-area-10b, #hube-area-10c { position: relative !important; width: auto !important; min-height: clamp(116px,8.5vw,152px); display: flex; align-items: center; } #hube-area-10a, #hube-area-10b { padding-right: clamp(22px,3vw,48px); border-right: 1px solid rgba(255,255,255,.18); } #hube-area-10a:before, #hube-area-10c:after { content: ""; position: absolute; top: 10px; bottom: 10px; width: 1px; background: rgba(255,255,255,.18); } #hube-area-10a:before { left: 0; } #hube-area-10c:after { right: 0; } #hube-area-10a a { display: grid !important; justify-items: center; gap: 8px; width: 100%; color: #fff; text-align: center; } #hube-area-10a span { width: 54px !important; height: 42px !important; background: #8bd38f !important; } #hube-area-10a strong { display: block; color: #fff; font-size: clamp(20px,1.45vw,28px); font-weight: 900; line-height: 1.2; text-align: center; } #hube-area-10a em { display: block; color: rgba(255,255,255,.64); font-size: clamp(11px,.82vw,14px); font-weight: 800; letter-spacing: .04em; text-align: center; } #hube-area-10b { color: rgba(255,255,255,.78) !important; font-size: clamp(12px,.9vw,15px) !important; line-height: 1.9 !important; font-weight: 700 !important; } #hube-area-10b p { margin: 0; line-height: 1.9; } #hube-area-10c { padding-left: clamp(6px,1vw,14px); } #hube-area-10c ul { display: grid !important; grid-template-columns: 1fr; gap: 12px 20px !important; width: 100%; margin: 0; } #hube-area-10c li { position: relative; padding-left: 16px; color: rgba(255,255,255,.84); font-size: clamp(12px,.84vw,14px); font-weight: 800; line-height: 1.45; } #hube-area-10c li:before { content: ""; position: absolute; left: 0; top: .52em; width: 6px; height: 6px; border-top: 2px solid #8bd38f; border-right: 2px solid #8bd38f; transform: rotate(45deg); } #hube-area-10c a { display: inline !important; padding: 0 !important; color: inherit !important; background: none !important; border: 0 !important; border-radius: 0 !important; font: inherit !important; text-align: left !important; } #hube-area-10c a:hover { color: #a8e7aa !important; opacity: 1; } #hube-footer-copy { margin-top: clamp(28px,3vw,46px); padding-top: 20px; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .04em; text-align: center; } @media screen and (max-width:900px) { #hube-footer-main { grid-template-columns: 1fr; gap: 22px; } #hube-area-10a, #hube-area-10b, #hube-area-10c { min-height: 0; padding: 0 0 22px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); } #hube-area-10a:before, #hube-area-10c:after { display: none; } #hube-area-10a a { justify-items: start; text-align: left; } #hube-area-10a strong, #hube-area-10a em { text-align: left; } #hube-area-10c ul { grid-template-columns: 1fr; } } @media screen and (max-width:520px) { #hube-wrap-10 { padding: 36px 0 24px !important; } #hube-area-10b br { display: none; } #hube-area-10c ul { grid-template-columns: 1fr; gap: 11px !important; } } /* footer without center text */ #hube-footer-main { grid-template-columns: minmax(220px,.8fr) minmax(320px,1.2fr) !important; } #hube-area-10a { padding-right: clamp(22px,3vw,48px) !important; border-right: 1px solid rgba(255,255,255,.18) !important; } #hube-area-10c { padding-left: clamp(8px,2vw,34px) !important; } #hube-area-10c:after { display: none !important; } @media screen and (max-width:900px) { #hube-footer-main { grid-template-columns: 1fr !important; } #hube-area-10a { padding-right: 0 !important; border-right: 0 !important; } #hube-area-10c { padding-left: 0 !important; } } /* footer desktop balance */ @media screen and (min-width:901px) { #hube-footer-main { grid-template-columns: minmax(240px,320px) minmax(240px,340px) !important; justify-content: center; gap: clamp(46px,6vw,92px) !important; } #hube-area-10a { padding-right: clamp(30px,3.4vw,56px) !important; } #hube-area-10c { max-width: 340px; padding-left: clamp(24px,3vw,48px) !important; } #hube-area-10c ul { width: auto; } } /* footer logo image */ #hube-area-10a { justify-content: center !important; padding-right: 0 !important; } #hube-area-10a a { display: block !important; width: min(100%, 260px); margin-right: auto; margin-left: auto; line-height: 0; } #hube-area-10a img { display: block; width: 100%; height: auto; max-height: 110px; object-fit: contain; object-position: center center; } @media screen and (max-width:900px) { #hube-area-10a { justify-content: center !important; } #hube-area-10a a { width: min(100%, 220px); } #hube-area-10a img { object-position: center center; } } /* header logo image */ #hube-area-01a { width: clamp(150px,12vw,220px) !important; flex-shrink: 0; } #hube-area-01a a { display: block !important; line-height: 0; } #hube-area-01a img { display: block; width: 100%; height: auto; max-height: 58px; object-fit: contain; object-position: left center; } @media screen and (max-width:900px) { #hube-area-01a { width: clamp(128px,32vw,180px) !important; } } @media screen and (max-width:520px) { #hube-area-01a { width: clamp(118px,42vw,156px) !important; } } /* iPhone Safari header logo visibility fix */ #hube-area-01a { display: block !important; flex: 0 0 clamp(150px,12vw,220px) !important; min-width: 118px; opacity: 1 !important; visibility: visible !important; } #hube-area-01a a { display: flex !important; align-items: center; width: 100%; min-height: 58px; font-size: 0; line-height: 0; background: url("ime/logo_001.svg") left center / contain no-repeat; } #hube-area-01a img { display: block !important; width: 100% !important; min-width: 118px; height: auto !important; max-height: 58px; aspect-ratio: 600 / 245; opacity: 1 !important; visibility: visible !important; object-fit: contain; object-position: left center; transform: translateZ(0); } @media screen and (max-width:900px) { #hube-area-01a { flex-basis: clamp(128px,32vw,180px) !important; } } @media screen and (max-width:520px) { #hube-area-01a { flex-basis: clamp(118px,42vw,156px) !important; } #hube-area-01a a { min-height: 50px; } } /* hero title mobile width fix */ @media screen and (max-width:900px) { #hube-area-02a-02 { width: 100% !important; max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere; word-break: normal; font-size: clamp(38px,10.2vw,48px) !important; line-height: 1.32 !important; letter-spacing: .01em !important; } } @media screen and (max-width:520px) { #hube-area-02a-02 { font-size: clamp(34px,10vw,40px) !important; } } /* privacy policy page */ #fepp26-privacy-wrap { clear: both; width: 100%; padding: clamp(118px,11vw,168px) 0 clamp(64px,7vw,108px); background: linear-gradient(180deg,#f6fbf8 0%,#ffffff 34%,#ffffff 100%); } #fepp26-privacy-head { width: min(calc(100% - (var(--side) * 2)), 980px); margin: 0 auto; } #fepp26-privacy-article { padding: clamp(34px,4vw,58px) clamp(22px,4vw,64px); background: #fff; border: 1px solid #dceee5; border-radius: 8px; box-shadow: 0 18px 48px rgba(0,70,46,.07); } #fepp26-privacy-title { color: #064629; font-size: clamp(26px,2.7vw,42px); font-weight: 900; line-height: 1.45; letter-spacing: .02em; text-align: left; } #fepp26-privacy-title:after { content: ""; display: block; width: 42px; height: 4px; margin-top: 18px; background: var(--green); border-radius: 999px; } #fepp26-privacy-body { margin-top: clamp(28px,3.2vw,46px); color: #26342d; font-size: clamp(14px,1vw,16px); font-weight: 700; line-height: 2.05; letter-spacing: .01em; word-break: normal; overflow-wrap: anywhere; } #fepp26-privacy-body br { line-height: 1.85; } @media screen and (max-width:900px) { #fepp26-privacy-wrap { padding-top: 102px; } #fepp26-privacy-article { padding: 30px 24px 38px; } } @media screen and (max-width:520px) { #fepp26-privacy-wrap { padding-top: 92px; padding-bottom: 54px; } #fepp26-privacy-head { width: calc(100% - 28px); } #fepp26-privacy-article { padding: 26px 18px 34px; } #fepp26-privacy-title { font-size: clamp(22px,6.4vw,28px); line-height: 1.5; } #fepp26-privacy-body { font-size: 14px; line-height: 1.95; } } /* contact page */ #fecf26-contact-wrap { clear: both; width: 100%; padding: clamp(118px,11vw,168px) 0 clamp(66px,7vw,112px); background: linear-gradient(180deg,#f6fbf8 0%,#ffffff 40%,#ffffff 100%); } #fecf26-contact-head { width: min(calc(100% - (var(--side) * 2)), 980px); margin: 0 auto; } #fecf26-contact-hero { margin-bottom: clamp(26px,3vw,44px); } #fecf26-contact-kicker { color: var(--green); font-size: clamp(13px,1vw,16px); font-weight: 900; letter-spacing: .12em; } #fecf26-contact-title { margin-top: 8px; color: #064629; font-size: clamp(34px,3.6vw,56px); font-weight: 900; line-height: 1.25; letter-spacing: .02em; } #fecf26-contact-title:after { content: ""; display: block; width: 42px; height: 4px; margin-top: 18px; background: var(--green); border-radius: 999px; } #fecf26-contact-lead { margin-top: 22px; color: #405049; font-size: clamp(14px,1vw,17px); font-weight: 700; line-height: 1.9; } #fecf26-contact-formbox { padding: clamp(28px,3.8vw,54px) clamp(18px,3.8vw,58px); background: #fff; border: 1px solid #dceee5; border-radius: 8px; box-shadow: 0 18px 48px rgba(0,70,46,.07); } .fecf26-form-shell { width: 100%; } .fecf26-contact-table { display: block; width: 100%; border-collapse: separate; border-spacing: 0; border-top: 1px solid #dceee5; } .fecf26-contact-table tbody { display: block; } .fecf26-contact-row { display: grid; grid-template-columns: minmax(190px, 28%) 1fr; border-bottom: 1px solid #dceee5; } .fecf26-contact-headcell, .fecf26-contact-field { display: flex; align-items: center; min-height: 78px; padding: 18px 0; border: 0; text-align: left; vertical-align: middle; } .fecf26-contact-headcell { gap: 12px; padding-right: 22px; color: #0c3b29; font-size: 15px; font-weight: 900; } .fecf26-contact-field { display: block; } .fecf26-contact-required { display: inline-grid; place-items: center; min-width: 42px; padding: 4px 8px; color: #fff; background: var(--green); border-radius: 999px; font-size: 12px; font-weight: 900; line-height: 1.2; } .fecf26-contact-label { display: inline-block; } .fecf26-contact-field input, .fecf26-contact-field textarea { width: 100%; padding: 15px 16px; color: #10261b; background: #f8faf9; border: 1px solid #dceee5; border-radius: 8px; font: inherit; font-size: 15px; line-height: 1.6; } .fecf26-contact-field textarea { min-height: 180px; resize: vertical; } .fecf26-contact-field input:focus, .fecf26-contact-field textarea:focus { outline: none; border-color: #168348; box-shadow: 0 0 0 3px rgba(22,131,72,.13); background: #fff; } #fecf26-contact-policy { margin-top: clamp(24px,3vw,38px); overflow: hidden; border: 1px solid #dceee5; border-radius: 8px; background: #fff; } #fecf26-contact-policy-frame { display: block; width: 100%; height: clamp(220px,28vw,340px); border: 0; } #fecf26-contact-consent { margin-top: 22px; color: #26342d; font-size: 14px; font-weight: 800; line-height: 1.7; } #fecf26-contact-consent .wpcf7-list-item { margin: 0; } #fecf26-contact-accept { width: 18px; height: 18px; margin-right: 9px; vertical-align: -4px; accent-color: var(--green); } .fecf26-contact-submit { margin-top: clamp(26px,3vw,42px); text-align: center; } .fecf26-contact-submit-button { display: inline-flex; align-items: center; justify-content: center; min-width: min(100%, 280px); min-height: 58px; padding: 0 34px; color: #fff; background: var(--green); border: 0; border-radius: 999px; font-size: 16px; font-weight: 900; line-height: 1; cursor: pointer; box-shadow: 0 14px 30px rgba(0,94,49,.18); } .fecf26-contact-submit-button:hover { opacity: .86; } #fecf26-contact-formbox .wpcf7-not-valid-tip { margin-top: 8px; color: #c62828; font-size: 13px; font-weight: 800; } #fecf26-contact-formbox .wpcf7-response-output { margin: 26px 0 0; padding: 14px 16px; border-radius: 8px; font-weight: 800; } @media screen and (max-width:900px) { #fecf26-contact-wrap { padding-top: 102px; } #fecf26-contact-formbox { padding: 28px 22px 36px; } .fecf26-contact-row { grid-template-columns: 1fr; padding: 18px 0; } .fecf26-contact-headcell, .fecf26-contact-field { min-height: 0; padding: 0; } .fecf26-contact-field { margin-top: 12px; } } @media screen and (max-width:520px) { #fecf26-contact-wrap { padding-top: 92px; padding-bottom: 54px; } #fecf26-contact-head { width: calc(100% - 28px); } #fecf26-contact-title { font-size: clamp(28px,8vw,36px); } #fecf26-contact-formbox { padding: 24px 16px 32px; } .fecf26-contact-headcell { flex-wrap: wrap; } #fecf26-contact-policy-frame { height: 230px; } } /* thanks pages */ #fetk26-thanks-wrap { clear: both; width: 100%; min-height: clamp(620px,72vw,860px); padding: clamp(118px,11vw,168px) 0 clamp(66px,7vw,112px); background: radial-gradient(circle at 82% 24%, rgba(139,211,143,.22) 0%, rgba(139,211,143,0) 34%), linear-gradient(180deg,#f6fbf8 0%,#ffffff 46%,#ffffff 100%); overflow: hidden; } #fetk26-thanks-head { position: relative; display: grid; grid-template-columns: minmax(0, 700px) minmax(260px, 420px); align-items: center; gap: clamp(30px,5vw,82px); width: min(calc(100% - (var(--side) * 2)), 1180px); margin: 0 auto; } #fetk26-thanks-card { position: relative; z-index: 2; padding: clamp(34px,4vw,62px) clamp(24px,4vw,64px); background: rgba(255,255,255,.94); border: 1px solid #dceee5; border-radius: 8px; box-shadow: 0 18px 48px rgba(0,70,46,.08); } #fetk26-thanks-mark { display: grid; place-items: center; width: clamp(62px,6vw,92px); height: clamp(62px,6vw,92px); margin-bottom: clamp(20px,2.4vw,34px); background: linear-gradient(135deg,#168348,#007a41); border-radius: 50%; box-shadow: 0 16px 30px rgba(0,94,49,.18); } #fetk26-thanks-mark span { display: block; width: 38%; height: 22%; border-left: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(-45deg) translate(2px,-2px); } #fetk26-thanks-kicker { color: var(--green); font-size: clamp(13px,1vw,16px); font-weight: 900; letter-spacing: .12em; } #fetk26-thanks-title { margin-top: 10px; color: #064629; font-size: clamp(32px,3.4vw,54px); font-weight: 900; line-height: 1.34; letter-spacing: .02em; } #fetk26-thanks-title:after { content: ""; display: block; width: 42px; height: 4px; margin-top: 18px; background: var(--green); border-radius: 999px; } #fetk26-thanks-lead { margin-top: clamp(20px,2.3vw,32px); color: #10261b; font-size: clamp(17px,1.35vw,23px); font-weight: 900; line-height: 1.75; } #fetk26-thanks-message { margin-top: clamp(18px,2vw,28px); color: #405049; font-size: clamp(14px,1vw,17px); font-weight: 700; line-height: 1.9; } #fetk26-thanks-message p + p { margin-top: 8px; } #fetk26-thanks-action { margin-top: clamp(28px,3vw,44px); } #fetk26-thanks-action a { display: inline-flex; align-items: center; justify-content: center; min-width: min(100%, 220px); min-height: 56px; padding: 0 30px; color: #fff; background: var(--green); border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 14px 30px rgba(0,94,49,.18); } #fetk26-thanks-action a:after { content: ""; width: 9px; height: 9px; margin-left: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); } #fetk26-thanks-visual { position: relative; z-index: 1; } #fetk26-thanks-visual:before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: clamp(240px,27vw,410px); height: clamp(240px,27vw,410px); background: #eef8f2; border-radius: 50%; transform: translate(-50%,-50%); } #fetk26-thanks-visual img { display: block; width: min(100%, 360px); height: auto; margin: 0 auto; } .fetk26-thanks-wrap--contact #fetk26-thanks-mark { background: linear-gradient(135deg,#0b6f59,#007a41); } @media screen and (max-width:900px) { #fetk26-thanks-wrap { min-height: 0; padding-top: 102px; } #fetk26-thanks-head { grid-template-columns: 1fr; gap: 34px; } #fetk26-thanks-card { padding: 30px 24px 38px; } #fetk26-thanks-visual { order: -1; width: min(72%, 300px); margin: 0 auto; } } @media screen and (max-width:520px) { #fetk26-thanks-wrap { padding-top: 92px; padding-bottom: 54px; } #fetk26-thanks-head { width: calc(100% - 28px); } #fetk26-thanks-card { padding: 26px 18px 34px; } #fetk26-thanks-title { font-size: clamp(26px,7.2vw,34px); } #fetk26-thanks-lead { font-size: 16px; } #fetk26-thanks-action a { width: 100%; } } /* BUSINESS HUB text rewrite tune */ #hube-area-02a-04 a { position: relative !important; min-height: clamp(82px,6vw,112px) !important; padding: clamp(18px,1.35vw,26px) 62px clamp(18px,1.35vw,26px) clamp(30px,2.4vw,44px) !important; color: #fff !important; background: var(--green) !important; border-radius: 14px !important; box-shadow: 0 16px 30px rgba(0,94,49,.18) !important; } #hube-area-02a-04 em { display: block !important; color: #e9ef7d !important; font-size: clamp(12px,.85vw,16px) !important; font-weight: bold !important; line-height: 1.55 !important; } #hube-area-02a-04 strong { display: block !important; margin-top: 6px !important; color: #fff !important; font-size: clamp(17px,1.2vw,23px) !important; line-height: 1.45 !important; } #hube-area-02a-04 i { position: absolute !important; right: 28px !important; top: 50% !important; display: block !important; width: 12px !important; height: 12px !important; margin-top: -6px !important; border-top: 3px solid #fff !important; border-right: 3px solid #fff !important; transform: rotate(45deg) !important; } .hube-head-03-desc { display: block; margin-top: 10px; color: #30443a; font-size: clamp(11px,.72vw,14px); font-weight: bold; line-height: 1.65; text-align: center; } #hube-head-03 li { min-height: 172px !important; } #hube-area-08e a { position: relative !important; display: block !important; min-height: clamp(170px,12vw,220px) !important; padding: clamp(32px,2.5vw,46px) 70px clamp(30px,2.2vw,42px) clamp(76px,5.2vw,110px) !important; color: #08713c !important; background: #fff !important; border-radius: 10px !important; box-shadow: 0 18px 42px rgba(0,0,0,.12) !important; } #hube-area-08e em, #hube-area-08e strong, #hube-area-08e i { display: block !important; } #hube-area-08e em { color: #08713c !important; font-size: clamp(15px,1.1vw,21px) !important; font-weight: bold !important; text-align: left !important; } #hube-area-08e strong { margin-top: 16px !important; color: #08713c !important; font-size: clamp(20px,1.55vw,30px) !important; line-height: 1.55 !important; } #hube-area-08e i { position: absolute !important; right: 34px !important; top: 50% !important; width: 44px !important; height: 44px !important; margin-top: -22px !important; background: #08713c !important; border-radius: 50% !important; } #hube-area-08e i:after { content: "" !important; position: absolute !important; left: 15px !important; top: 13px !important; width: 12px !important; height: 12px !important; border-top: 3px solid #fff !important; border-right: 3px solid #fff !important; transform: rotate(45deg) !important; } @media screen and (max-width:900px) { #hube-head-03 li { min-height: 188px !important; } #hube-area-08e a { min-height: 165px !important; padding-left: 44px !important; } } @media screen and (max-width:520px) { #hube-area-02a-04 a { padding-right: 48px !important; padding-left: 22px !important; } #hube-head-03 li { min-height: 0 !important; } #hube-area-08e a { padding: 28px 54px 30px 28px !important; } #hube-area-08e strong { font-size: 20px !important; } } /* requested banner/layout adjustment */ #hube-area-02a-02 { font-size: clamp(58px,3.2vw,82px) !important; } #hube-area-02a-04 a, #hube-area-08e a { display: block !important; min-height: 0 !important; height: auto !important; padding: 0 !important; color: inherit !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } #hube-area-02a-04 img, #hube-area-08e img { display: block !important; width: 100% !important; height: auto !important; } #hube-area-02a-04 em, #hube-area-02a-04 strong, #hube-area-02a-04 i, #hube-area-08e em, #hube-area-08e strong, #hube-area-08e i { display: none !important; } #hube-area-08c { width: 51% !important; max-width: 760px; } #hube-area-08e { width: min(43%, 620px) !important; } @media screen and (max-width:900px) { #hube-area-02a-02 { font-size: clamp(58px,3.2vw,82px) !important; } #hube-area-08c { width: 100% !important; max-width: none; } #hube-area-08e { width: min(100%, 620px) !important; } } @media screen and (max-width:520px) { #hube-area-02a-02 { font-size: clamp(58px,3.2vw,82px) !important; } } /* hube-wrap-08 removed spacing adjustment */ #hube-wrap-07 { padding-bottom: clamp(82px,6.8vw,122px) !important; } #hube-wrap-09 { padding-top: clamp(74px,6.2vw,112px) !important; } #hube-head-09 { min-height: auto !important; padding-bottom: clamp(18px,2vw,34px); } @media screen and (max-width:900px) { #hube-wrap-07 { padding-bottom: 68px !important; } #hube-wrap-09 { padding-top: 62px !important; } } @media screen and (max-width:520px) { #hube-wrap-07 { padding-bottom: 54px !important; } #hube-wrap-09 { padding-top: 50px !important; } } /* hube-wrap-08 restored without point list */ #hube-wrap-07 { padding-bottom: clamp(72px,6vw,108px) !important; } #hube-wrap-08 { display: block !important; padding: clamp(66px,5.6vw,98px) 0 !important; background: radial-gradient(circle at 78% 42%, rgba(140,208,154,.22) 0%, rgba(9,73,61,0) 36%), linear-gradient(135deg,#0b6f59 0%,#075743 48%,#053526 100%) !important; color: #fff; } #hube-head-08 { display: grid; grid-template-columns: minmax(0, 52%) minmax(300px, 42%); column-gap: 6%; align-items: center; min-height: 0 !important; padding-bottom: 0 !important; } #hube-area-08a, #hube-area-08b, #hube-area-08c { grid-column: 1; } #hube-area-08a { font-size: clamp(16px,1.2vw,22px) !important; line-height: 1.75 !important; } #hube-area-08b { margin-top: 8px !important; font-size: clamp(40px,3.7vw,70px) !important; line-height: 1.18 !important; } #hube-area-08c { width: 100% !important; max-width: none !important; margin-top: clamp(14px,1.4vw,24px) !important; margin-bottom: 0 !important; font-size: clamp(15px,1.02vw,20px) !important; line-height: 1.85 !important; } #hube-area-08d { display: none !important; } #hube-area-08e { position: relative !important; grid-column: 2; grid-row: 1 / span 3; top: auto !important; right: auto !important; width: 100% !important; height: auto !important; margin: 0 !important; transform: none !important; } #hube-area-08e a { display: block !important; min-height: 0 !important; height: auto !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } #hube-area-08e img { display: block !important; width: 100% !important; height: auto !important; } #hube-wrap-09 { padding-top: clamp(58px,5vw,86px) !important; } @media screen and (max-width:900px) { #hube-wrap-08 { padding: 62px 0 !important; } #hube-head-08 { display: block; } #hube-area-08e { width: min(100%, 620px) !important; margin: 30px auto 0 !important; } } @media screen and (max-width:520px) { #hube-wrap-08 { padding: 50px 0 !important; } #hube-area-08b { font-size: 10.5vw !important; } #hube-area-08e { margin-top: 24px !important; } } /* hube-area-02c mobile image size */ @media screen and (max-width:520px) { #hube-area-02c { width: 90vw !important; max-width: 420px !important; margin-left: auto !important; margin-right: auto !important; } #hube-area-02c img { width: 100% !important; height: auto !important; } } /* hube-area-02a-02 mobile line control */ #hube-area-02a-02 .hube-hero-mobile-break { display: none; } #hube-area-02a-02 .hube-hero-nowrap { white-space: nowrap; } @media screen and (max-width:520px) { #hube-area-02a-02 { font-size: clamp(34px,9.2vw,42px) !important; line-height: 1.32 !important; letter-spacing: 0 !important; } #hube-area-02a-02 .hube-hero-mobile-break { display: inline; } } /* hube-area-02a-02 background tune */ #hube-area-02a-02 { background-color: #ffffff7a !important; display: inline-block !important; } /* thanks pages redesign override */ #fetk26-thanks-wrap { clear: both; width: 100%; min-height: clamp(560px,64vw,760px); padding: clamp(104px,9vw,144px) 0 clamp(56px,6vw,92px) !important; background: radial-gradient(circle at 82% 22%, rgba(139,211,143,.2) 0%, rgba(139,211,143,0) 34%), linear-gradient(180deg,#f6fbf8 0%,#fff 48%,#fff 100%) !important; overflow: hidden; } #fetk26-thanks-head { display: block !important; width: min(calc(100% - (var(--side) * 2)), 900px) !important; margin: 0 auto !important; } #fetk26-thanks-card { position: relative; padding: clamp(34px,4.2vw,62px) clamp(22px,4.2vw,68px) !important; background: rgba(255,255,255,.96) !important; border: 1px solid #dceee5 !important; border-radius: 8px !important; box-shadow: 0 18px 48px rgba(0,70,46,.08) !important; text-align: center; } #fetk26-thanks-card:before { content: ""; position: absolute; right: clamp(18px,3vw,42px); top: clamp(18px,3vw,42px); width: clamp(82px,10vw,150px); height: clamp(82px,10vw,150px); background: #eef8f2; border-radius: 50%; z-index: 0; } #fetk26-thanks-mark, #fetk26-thanks-kicker, #fetk26-thanks-title, #fetk26-thanks-lead, #fetk26-thanks-message, #fetk26-thanks-action { position: relative; z-index: 1; } #fetk26-thanks-mark { display: grid !important; place-items: center; width: clamp(64px,6vw,90px) !important; height: clamp(64px,6vw,90px) !important; margin: 0 auto clamp(20px,2.4vw,32px) !important; background: linear-gradient(135deg,#168348,#007a41) !important; border-radius: 50%; box-shadow: 0 16px 30px rgba(0,94,49,.18); } .fetk26-thanks-wrap--contact #fetk26-thanks-mark { background: linear-gradient(135deg,#0b6f59,#007a41) !important; } #fetk26-thanks-mark span { display: block; width: 38%; height: 22%; border-left: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(-45deg) translate(2px,-2px); } #fetk26-thanks-kicker { color: var(--green) !important; font-size: clamp(13px,1vw,16px) !important; font-weight: 900 !important; letter-spacing: .12em; text-align: center; } #fetk26-thanks-title { margin-top: 10px !important; color: #064629 !important; font-size: clamp(30px,3.2vw,50px) !important; font-weight: 900 !important; line-height: 1.34 !important; letter-spacing: .02em; text-align: center; } #fetk26-thanks-title:after { content: ""; display: block; width: 44px; height: 4px; margin: 18px auto 0; background: var(--green); border-radius: 999px; } #fetk26-thanks-lead { margin-top: clamp(20px,2.4vw,32px) !important; color: #10261b !important; font-size: clamp(16px,1.25vw,21px) !important; font-weight: 900 !important; line-height: 1.75 !important; text-align: center; } #fetk26-thanks-message { width: min(100%, 640px); margin: clamp(18px,2vw,28px) auto 0 !important; color: #405049 !important; font-size: clamp(14px,1vw,16px) !important; font-weight: 700 !important; line-height: 1.9 !important; text-align: center; } #fetk26-thanks-message p + p { margin-top: 8px; } #fetk26-thanks-action { margin-top: clamp(28px,3vw,42px) !important; text-align: center; } #fetk26-thanks-action a { display: inline-flex !important; align-items: center; justify-content: center; min-width: min(100%, 220px); min-height: 56px; padding: 0 30px; color: #fff !important; background: var(--green) !important; border-radius: 999px; font-size: 15px; font-weight: 900; letter-spacing: .04em; box-shadow: 0 14px 30px rgba(0,94,49,.18); } #fetk26-thanks-action a:after { content: ""; width: 9px; height: 9px; margin-left: 12px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); } @media screen and (max-width:900px) { #fetk26-thanks-wrap { min-height: 0; padding-top: 92px !important; } #fetk26-thanks-card { padding: 30px 24px 38px !important; } } @media screen and (max-width:520px) { #fetk26-thanks-wrap { padding-top: 84px !important; padding-bottom: 48px !important; } #fetk26-thanks-head { width: calc(100% - 28px) !important; } #fetk26-thanks-card { padding: 26px 18px 34px !important; } #fetk26-thanks-title { font-size: clamp(25px,7vw,32px) !important; } #fetk26-thanks-lead { font-size: 16px !important; } #fetk26-thanks-action a { width: 100%; } }