@charset "UTF-8"; /* About This CSS File --------------------------------------------------------------------------------------- name:style.css information:はりま電力株式会社 / 家計を応援するお得な家庭向けプラン シンプル電灯ECOプラン LP date:2024.11.25 --------------------------------------------------------------------------------------------------------------*/ /*---------------------------------------------------- base ----------------------------------------------------*/ html { overflow-y:scroll; height:100%; -webkit-text-size-adjust:100%; } body { width:100%; height:auto; margin: 0 auto; font-family:"Noto Sans JP", sans-serif, "Yu Gothic", "YuGothic"!important; color:#000; line-height:1.4; -webkit-text-size-adjust:100%; _display:inline; _zoom:1; position:relative; /*font-feature-settings:"palt"; letter-spacing:0.05em;*/ } a:link { text-decoration:none; } .btnImg:hover { opacity:0.3; transition:0.3s ease-in-out; } .hoverImg { display:block; overflow:hidden; } .flex { display:flex; } .wf-Oswald { font-family:'Oswald', sans-serif; } @media screen and (min-width:769px) { .is-spDisplay { display:none!important; } } @media screen and (max-width:768px) { .is-pcDisplay { display:none!important; } } /*---------------------------------------------------- header ----------------------------------------------------*/ #header { width:100%; position:fixed; top:0; left:0; background:#008350; box-shadow:0 3px 6px #00000014; transition:0.3s ease-in-out; z-index:9999; } #header .wrap { width:100%; max-width:100%!important; justify-content:space-between; align-items:center; transition:all 0.3s 0s ease; } #header .logo { transition:0.3s ease-in-out; } #header .logo img { max-width:100%; } #header .headerPageLink { justify-content:flex-end; align-items:center; position:relative; } #header .headerPageLink li { font-weight:500; border-right:1px solid #fff; } #header .headerPageLink li:last-child { border-right:none; padding-right:0; margin-right:0; } #header .headerPageLink li a { color:#fff; transition:0.2s ease-in-out; } #header .headerPageLink li a:hover { color:#b0d6f1; } #header .headerPageLink .headerLink { width:auto; height:auto; text-align:center; border-radius:150px; box-sizing:border-box; transition:0.3s ease-in-out; position:relative; } #header .headerPageLink .headerLink .telBtn p { color:#fff; transition:all 0.3s 0s ease; } #header .headerPageLink .headerLink .telBtn:hover p { color:#b0d6f1; } #header .headerPageLink .headerLink .pagelinkBtn .contactBtn { position:relative; display:flex; align-items:center; justify-content:center; } #header .headerPageLink .headerLink .pagelinkBtn .contactBtn::before { content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:150px; background:#ffd30d; transition:0.2s ease-in-out; overflow:hidden; z-index:1; } #header .headerPageLink .headerLink .pagelinkBtn .contactBtn a { position:relative; z-index:3; } #header .headerPageLink .headerLink .pagelinkBtn .contactBtn p { color:#000; font-weight:600; line-height:1.0; } /*--ホバー設定--*/ #header .headerPageLink .headerLink .pagelinkBtn .contactBtn:hover::before { background:#b0d6f1; } /*--769px以上------------------------------------------------------*/ @media screen and (min-width:1201px) { #header .wrap { height:120px; } .is-headerMin .wrap { height:90px!important; } #header .logo { width:194px; padding-left:20px; } #header .headerPageLink ul { margin-right:25px; } #header .headerPageLink li { font-size:16px; line-height:1.0; padding-right:15px; margin-right:15px; } #header .headerLink { margin-right:20px; } #header .headerLink .pagelinkBtn .telBtn { margin-right:30px; } #header .headerLink .pagelinkBtn .telBtn p { font-size:16px; line-height:1.3; } #header .headerLink .pagelinkBtn .telBtn .telTxt { font-size:24px; } #header .headerLink .pagelinkBtn .contactBtn { width:170px; height:54px; } #header .headerLink .pagelinkBtn .contactBtn p { font-size:16px; } } @media screen and (min-width:901px) and (max-width:1200px) { #header .wrap { height:clamp(100px,11.0987vw,120px); } .is-headerMin .wrap { height:80px!important; } #header .logo { width:clamp(164px,18.2019vw,194px); padding-left:clamp(15px,1.6648vw,20px); } #header .headerPageLink ul { margin-right:clamp(15px,1.6648vw,20px); } #header .headerPageLink li { font-size:clamp(13px,1.4428vw,16px); line-height:1.0; padding-right:clamp(10px,1.1098vw,15px); margin-right:clamp(10px,1.1098vw,15px); } #header .headerLink { margin-right:clamp(15px,1.6648vw,20px); } #header .headerLink .pagelinkBtn .telBtn { margin-right:clamp(15px,1.6648vw,30px); } #header .headerLink .pagelinkBtn .telBtn p { font-size:clamp(13px,1.4428vw,16px); line-height:1.3; } #header .headerLink .pagelinkBtn .telBtn .telTxt { font-size:clamp(21px,2.3307vw,24px); } #header .headerLink .pagelinkBtn .contactBtn { width:clamp(120px,13.3185vw,170px); height:clamp(44px,4.8834vw,54px); } #header .headerLink .pagelinkBtn .contactBtn p { font-size:clamp(13px,1.4428vw,16px); } } @media screen and (min-width:769px) and (max-width:900px) { #header .wrap { height:80px; } .is-headerMin .wrap { height:80px!important; } #header .logo { width:164px; padding-left:15px; } #header .headerPageLink ul { display:none; } #header .headerLink { margin-right:15px; } #header .headerLink .pagelinkBtn .telBtn { margin-right:15px; } #header .headerLink .pagelinkBtn .telBtn p { font-size:13px; line-height:1.3; } #header .headerLink .pagelinkBtn .telBtn .telTxt { font-size:21px; } #header .headerLink .pagelinkBtn .contactBtn { width:120px; height:44px; } #header .headerLink .pagelinkBtn .contactBtn p { font-size:13px; } } /*--768px以下------------------------------------------------------*/ @media screen and (max-width:768px) { #header .wrap { height:clamp(70px,18.6666vw,80px); } .is-headerMin .wrap { height:clamp(70px,18.6666vw,80px)!important; } #header .logo { width:clamp(124px,33.0666vw,164px); padding-left:clamp(10px,2.6666vw,15px); } #header .headerPageLink ul { display:none; } #header .headerLink { margin-right:clamp(10px,2.6666vw,15px); } #header .headerLink .pagelinkBtn .telBtn { margin-right:clamp(10px,2.6666vw,15px); } #header .headerLink .pagelinkBtn .telBtn p { font-size:clamp(11px,2.9333vw,13px); line-height:1.3; } #header .headerLink .pagelinkBtn .telBtn .telTxt { font-size:clamp(18px,4.8vw,21px); } @media screen and (min-width:501px) and (max-width:768px) { #header .headerLink .pagelinkBtn .contactBtn { width:120px; height:44px; } #header .headerLink .pagelinkBtn .contactBtn p { font-size:13px; } } @media screen and (max-width:500px) { #header .headerLink .pagelinkBtn .contactBtn { width:clamp(40px,10.6666vw,45px); height:clamp(40px,10.6666vw,45px); position:relative; } #header .headerLink .pagelinkBtn .contactBtn a { position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/icon_mail.png) no-repeat center center; background-size:clamp(20px,5.3333vw,25px) auto; } #header .headerLink .pagelinkBtn .contactBtn p { font-size:0!important; } } } /*---------------------------------------------------- フッター ----------------------------------------------------*/ #l-footer-ctt { width:100%; padding:0; text-align:center; position:relative; } .l-footer-ctt__inner { position:relative; z-index:1; } .l-footer-ctt__inner li.l-footer-ctt__tel { background:#eaebec; transition:all 0.2s 0s ease; } .l-footer-ctt__inner li.l-footer-ctt__web { background:#d8d9da; transition:all 0.2s 0s ease; } .l-footer-ctt__inner li:hover { background:#cccccc; transition:all 0.5s 0s ease; } .l-footer-ctt__inner .l-footer-ctt__link { display:block; text-align:center; position:relative; overflow:hidden; } .l-footer-ctt__inner .l-footer-ctt__linkInner { display:inline-block; text-align:left; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background:url(../images/liTel_icon.png) center left no-repeat; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background:url(../images/liWeb_icon.png) center left no-repeat; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { color:#088450; font-weight:500; display:block; position:relative; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { color:#088450; font-weight:600; display:block; position:relative; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { color:#000; display:block; position:relative; } @media screen and (min-width:841px) { .l-footer-ctt__inner .l-footer-ctt__link { padding:35px 0; } .l-footer-ctt__inner ul { display:flex; justify-content:space-between; } .l-footer-ctt__inner li { flex-basis:50%; } .l-footer-ctt__inner .l-footer-ctt__linkInner { padding:20px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 85px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 85px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:32px; line-height:1.1; padding:0 0 0 68px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:28px; line-height:1.25; padding:0 0 0 85px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:18px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 68px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 85px; } } @media screen and (min-width:768px) and (max-width:840px) { .l-footer-ctt__inner .l-footer-ctt__link { padding:35px 0; } .l-footer-ctt__inner ul { display:flex; justify-content:space-between; } .l-footer-ctt__inner li { flex-basis:50%; } .l-footer-ctt__inner .l-footer-ctt__linkInner { padding:10px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 80px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 80px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:30px; line-height:1.05; padding:0 0 0 65px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:26px; line-height:1.20; padding:0 0 0 82px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:16px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 65px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 82px; } } /*--767px以下------------------------------------------------------*/ @media screen and ( max-width:767px ) { .l-footer-ctt__inner .l-footer-ctt__link { padding:35px 0; } .l-footer-ctt__inner li { flex-basis:100%; } .l-footer-ctt__inner .l-footer-ctt__linkInner { padding:10px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 80px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 80px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:30px; line-height:1.05; padding:0 0 0 65px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:26px; line-height:1.20; padding:0 0 0 82px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:16px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 65px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 82px; } } @media screen and ( max-width:600px ) { .l-footer-ctt__inner .l-footer-ctt__link { padding:30px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 70px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 70px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:28px; line-height:1.05; padding:0 0 0 55px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:24px; line-height:1.20; padding:0 0 0 72px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:15px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 55px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 72px; } } @media screen and ( max-width:500px ) { .l-footer-ctt__inner .l-footer-ctt__link { padding:25px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 60px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 60px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:28px; line-height:1.10; padding:0 0 0 46px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:24px; line-height:1.20; padding:0 0 0 62px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:14px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 46px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 62px; } } @media screen and ( max-width:430px ) { .l-footer-ctt__inner .l-footer-ctt__link { padding:20px 0; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner { background-size:auto 50px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner { background-size:auto 50px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:24px; line-height:1.1; padding:0 0 0 40px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtMain { font-size:20px; line-height:1.20; padding:0 0 0 52px; } .l-footer-ctt__inner .l-footer-ctt__linkInner .l-footer-ctt__txtSub { font-size:13px; } .l-footer-ctt__inner .l-footer-ctt__tel .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 40px; } .l-footer-ctt__inner .l-footer-ctt__web .l-footer-ctt__linkInner .l-footer-ctt__txtSub { padding:0 0 0 52px; } } /* footer ----------------------------------------------------*/ #l-footer { width:100%; background:#fff; padding:0; border-top:25px solid #088450; } #l-footer .l-footer__inner { max-width:1200px; margin:0 auto; overflow:hidden; } #l-footer .l-footer__sNav a { color:#000; } #l-footer .l-footer__sNav a:hover { color:#afafaf; } #l-footer .l-footer__sNav span { border-left:1px solid #000; margin-left:1em; padding-left:1em; } #l-footer .l-footer__copyRight { width:100%; background:#088450; text-align:center; color:#fff; } /*--768px以上------------------------------------------------------*/ @media screen and (min-width:841px) { #l-footer .l-footer__inner { padding:35px 0; text-align:center; } #l-footer .l-footer-logo { width:250px; } #l-footer .l-footer__companyAdress { font-size:15px; margin-top:20px; } #l-footer .l-footer__sNav { font-size:14px; margin-top:5px; } #l-footer .l-footer__copyRight { font-size:12px; padding:30px 0; } } @media screen and ( min-width:768px ) and ( max-width:840px ) { #l-footer .l-footer__inner { padding:30px 0; text-align:center; } #l-footer .l-footer-logo { width:230px; } #l-footer .l-footer__companyAdress { font-size:14px; margin-top:20px; } #l-footer .l-footer__sNav { font-size:13px; margin-top:5px; } #l-footer .l-footer__copyRight { font-size:12px; padding:25px 0; } } /*--767px以下------------------------------------------------------*/ @media screen and ( max-width:767px ) { #l-footer { border-top:20px solid #088450; } #l-footer .l-footer__inner { padding:30px 0; text-align:center; } #l-footer .l-footer-logo { width:210px; } #l-footer .l-footer__companyAdress { font-size:14px; margin-top:15px; } #l-footer .l-footer__sNav { font-size:13px; margin-top:5px; } #l-footer .l-footer__copyRight { font-size:12px; padding:25px 0; } } @media screen and ( max-width:600px ) { #l-footer .l-footer__inner { padding:25px 0; } #l-footer .l-footer-logo { width:200px; } #l-footer .l-footer__companyAdress { font-size:14px; } #l-footer .l-footer__sNav { font-size:13px; } #l-footer .l-footer__copyRight { font-size:12px; padding:20px 0; } } @media screen and ( max-width:500px ) { #l-footer { border-top:15px solid #088450; } #l-footer .l-footer__inner { padding:20px 0; } #l-footer .l-footer-logo { width:180px; } #l-footer .l-footer__companyAdress { font-size:13px; } } @media screen and ( max-width:430px ) { #l-footer { border-top:10px solid #088450; } #l-footer .l-footer__inner { padding:15px 0; } #l-footer .l-footer-logo { width:160px; } #l-footer .l-footer__companyAdress { font-size:12px; margin-top:10px; } #l-footer .l-footer__sNav { font-size:11px; } #l-footer .l-footer__copyRight { font-size:11px; padding:15px 0; } } /*---------------------------------------------------- key visual ----------------------------------------------------*/ #keyVisual { width:100%; position:relative; background:#d9efe6; overflow:hidden; } #keyVisual .kv_container { width:100%; height:100%; } #keyVisual .kv_wrap { width:100%; max-width:1360px; margin:0 auto; box-sizing:border-box; } /*--上部--*/ #keyVisual .kv_boxTop { width:100%; background:#d9efe6; position:relative; } #keyVisual .kv_boxTop .kv_boxTop__txt01 { font-weight:600; color:#fff; background:#008350; border-radius:10px; display:inline-block; } #keyVisual .kv_boxTop .kv_boxTop__txt02 { font-weight:600; color:#000; } #keyVisual .kv_boxTop .kv_boxTop__txt02 .txtMax { font-size:117%; } /*--中段--*/ #keyVisual .kv_boxMiddle { position:relative; } /*#keyVisual .kv_boxMiddle::after { content:""; position:absolute; left:0; top:0; width:100%; background:#d9efe6; z-index:0; }*/ #keyVisual .kv_boxMiddle::before { content:""; position:absolute; left:0; bottom:0; width:100%; background:#008350; z-index:0; } #keyVisual .kv_boxMiddle .kv_gorillaCatch { background:url(../images/bg_kv_gorillaCatch.png) no-repeat left top; position:relative; z-index:2; } #keyVisual .kv_boxMiddle .kv_gorillaCatch p { font-weight:600; color:#000; font-feature-settings:"palt"; letter-spacing:0.06em; } #keyVisual .kv_boxMiddle .kv_gorillaCatch img { max-width:100%; } #keyVisual .kv_boxMiddle .kv_salesPoint { display:flex; flex-wrap:wrap; background:#d9efe6; position:relative; z-index:1; } #keyVisual .kv_boxMiddle .kv_salesPoint li { display:flex; align-items:center; /*justify-content:center;*/ box-sizing:border-box; } #keyVisual .kv_boxMiddle .kv_salesPoint li:nth-child(1) { border-bottom:1px solid #aebfb8 } #keyVisual .kv_boxMiddle .kv_salesPoint li:nth-child(2) { border-bottom:1px solid #aebfb8 } #keyVisual .kv_boxMiddle .kv_salesPoint li p { font-weight:500; text-align:left; background:url(../images/kv_salesPoint.png) no-repeat left center; } #keyVisual .kv_boxMiddle .kv_salesPoint li p .txtMax { font-size:118%; font-weight:600; color:#088450; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1361px ) { #keyVisual { padding-top:120px; } #keyVisual .kv_wrap { padding:0 20px; } /*--上部--*/ #keyVisual .kv_boxTop { padding:30px 0 25px 0; } #keyVisual .kv_boxTop .kv_boxTop__txt01 { font-size:30px; padding:6px 30px; border-radius:10px; } #keyVisual .kv_boxTop .kv_boxTop__txt02 { font-size:34px; padding-top:25px; } /*--中段--*/ #keyVisual .kv_boxMiddle { background:url(../images/img_kv_boxMiddle.jpg) no-repeat center top #fff; background-size:auto 100%; padding-top:50px; } #keyVisual .kv_boxMiddle .kv_boxMiddle__spImg { display:none; } #keyVisual .kv_boxMiddle::after { height:50px; } #keyVisual .kv_boxMiddle::before { height:70px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch { height:auto; background-size:auto 218px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch p { font-size:37px; line-height:1.3; padding:110px 0 0 90px; } #keyVisual .kv_boxMiddle h1 { width:600px; margin-top:35px; padding-bottom:70px; } #keyVisual .kv_boxMiddle .kv_salesPoint { width:1100px; margin:0 auto; padding:5px 30px; border-radius:15px; } #keyVisual .kv_boxMiddle .kv_salesPoint li { width:50%; padding:0 25px; } #keyVisual .kv_boxMiddle .kv_salesPoint li p { font-size:22px; padding:25px 0 25px 50px; background-size:auto 42px; } } @media screen and ( min-width:769px) and (max-width:1360px) { @media screen and ( min-width:901px) and (max-width:1360px) { #keyVisual { padding-top:clamp(95px,10.5438vw,120px); } } @media screen and ( min-width:769px) and (max-width:900px) { #keyVisual { padding-top:75px; } } #keyVisual .kv_wrap { padding:0 20px; } /*--上部--*/ #keyVisual .kv_boxTop { padding:30px 0 clamp(15px,1.9505vw,35px) 0; } #keyVisual .kv_boxTop .kv_boxTop__txt01 { font-size:clamp(25px,3.2509vw,30px); padding:6px 30px; border-radius:10px; } #keyVisual .kv_boxTop .kv_boxTop__txt02 { font-size:clamp(25px,3.2509vw,34px); padding-top:clamp(15px,1.9505vw,25px); } /*--中段--*/ #keyVisual .kv_boxMiddle { background:url(../images/img_kv_boxMiddle_cut.jpg) no-repeat right top #fff; background-size:auto clamp(380px,49.4148vw,730px); padding-top:clamp(20px,2.6007vw,50px); } #keyVisual .kv_boxMiddle .kv_boxMiddle__spImg { display:none; } #keyVisual .kv_boxMiddle::after { height:50px; } #keyVisual .kv_boxMiddle::before { height:70px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch { width:clamp(500px,65.0195vw,800px); height:auto; background-size:auto clamp(190px,24.7074vw,218px); } #keyVisual .kv_boxMiddle .kv_gorillaCatch p { font-size:clamp(25px,3.2509vw,37px); line-height:1.3; padding:clamp(90px,11.7035vw,110px) 0 0 clamp(70px,9.1027vw,90px); } #keyVisual .kv_boxMiddle h1 { width:clamp(400px,52.0156vw,600px); margin-top:clamp(15px,1.9505vw,35px); padding-bottom:clamp(15px,1.9505vw,70px); } #keyVisual .kv_boxMiddle .kv_salesPoint { max-width:1100px; margin:0 auto; padding:5px clamp(20px,2.6007vw,30px); border-radius:15px; } #keyVisual .kv_boxMiddle .kv_salesPoint li { width:50%; padding:0 25px; } #keyVisual .kv_boxMiddle .kv_salesPoint li p { font-size:clamp(18px,2.3407vw,22px); padding:clamp(15px,1.9505vw,25px) 0 clamp(15px,1.9505vw,25px) 50px; background-size:auto clamp(38px,4.9414vw,42px); } } /*--768px以下------------------------------------------------------*/ @media screen and (max-width:768px) { @media screen and (min-width:501px) and (max-width:768px) { #keyVisual { padding-top:75px; } } @media screen and (max-width:500px) { #keyVisual { padding-top:clamp(60px,16.0vw,75px); } } #keyVisual .kv_wrap { padding:0 clamp(15px,4.0vw,20px); } /*--上部--*/ #keyVisual .kv_boxTop { padding:30px 0 clamp(15px,1.9505vw,35px) 0; } #keyVisual .kv_boxTop .kv_boxTop__txt01 { font-size:clamp(16px,4.2666vw,25px); padding:6px clamp(20px,5.3333vw,30px); border-radius:10px; } #keyVisual .kv_boxTop .kv_boxTop__txt02 { font-size:clamp(16px,4.2666vw,25px); padding-top:15px; } @media screen and (min-width:661px) and (max-width:768px) { /*--中段--*/ #keyVisual .kv_boxMiddle { background:url(../images/img_kv_boxMiddle_cut.jpg) no-repeat right top 15px #fff; background-size:auto clamp(310px,46.8986vw,380px); padding-top:20px; } #keyVisual .kv_boxMiddle .kv_boxMiddle__spImg { display:none; } #keyVisual .kv_boxMiddle::after { height:50px; } #keyVisual .kv_boxMiddle::before { height:70px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch { width:500px; height:auto; background-size:auto 190px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch p { font-size:25px; line-height:1.3; padding:90px 0 0 70px; } #keyVisual .kv_boxMiddle h1 { width:400px; margin-top:15px; padding-bottom:15px; } #keyVisual .kv_boxMiddle .kv_salesPoint { max-width:1100px; margin:0 auto; padding:5px 20px; border-radius:15px; } #keyVisual .kv_boxMiddle .kv_salesPoint li { width:50%; padding:0 25px; } #keyVisual .kv_boxMiddle .kv_salesPoint li p { font-size:18px; padding:15px 0 15px 50px; background-size:auto 38px; } } @media screen and (max-width:660px) { #keyVisual .kv_wrap { padding-top:25px; } /*--上部--*/ #keyVisual .kv_boxTop { padding-top:0; } /*--中段--*/ #keyVisual .kv_boxMiddle { background:#fff; } #keyVisual .kv_boxMiddle .kv_boxMiddle__spImg { width:clamp(310px,82.6666vw,550px); } #keyVisual .kv_boxMiddle .kv_boxMiddle__spImg { position:absolute; top:5px; right:0; z-index:0; } #keyVisual .kv_boxMiddle::after { height:0; } #keyVisual .kv_boxMiddle::before { height:70px; } #keyVisual .kv_boxMiddle .kv_gorillaCatch { width:100%; height:auto; /*margin-top:calc(clamp(30px,8.0vw,50px) * -1);*/ background-size:auto 95%; } #keyVisual .kv_boxMiddle .kv_gorillaCatch p { font-size:clamp(14px,3.7333vw,25px); padding:clamp(55px,14.6666vw,70px) 0 0 clamp(40px,10.6666vw,70px); line-height:1.4; } /*#keyVisual .kv_boxMiddle .kv_gorillaCatch p .kv_gorillaCatch__br { display:none; }*/ #keyVisual .kv_boxMiddle h1 { width:100%; text-align:center; margin-top:clamp(15px,4.0vw,20px); padding:0 clamp(15px,4.0vw,20px) clamp(15px,4.0vw,30px) clamp(15px,4.0vw,20px); box-sizing:border-box; position:relative; } #keyVisual .kv_boxMiddle .kv_salesPoint { max-width:100%; margin:0 auto; padding:5px clamp(15px,4.0vw,20px); border-radius:15px; } #keyVisual .kv_boxMiddle .kv_salesPoint li { width:100%; padding:0 clamp(5px,1.3333vw,25px); } #keyVisual .kv_boxMiddle .kv_salesPoint li:nth-child(3) { border-bottom:1px solid #aebfb8 } #keyVisual .kv_boxMiddle .kv_salesPoint li p { font-size:clamp(13px,3.4666vw,18px); padding:clamp(15px,4.0vw,20px) 0 clamp(15px,4.0vw,20px) clamp(35px,9.3333vw,50px); background-size:auto clamp(28px,7.4666vw,38px); } } } /*---------------------------------------------------- 共通 ----------------------------------------------------*/ main { position:relative; z-index:1; overflow:hidden; } main .c-secContainer { width:100%; } main .secInner { margin:0 auto; } .sectionTtl { font-weight:600; text-align:center; } .sectionTtl .txtMax{ font-size:118.75%; } .sectionLead { font-weight:500; } .sectionTxt { font-weight:500; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { main .secInner { max-width:1140px; padding:100px 20px; } .sectionTtl { font-size:32px; } .sectionLead { font-size:16px; line-height:1.75; margin-top:40px; } .sectionTxt { font-size:16px; line-height:1.75; } } @media screen and ( min-width:769px ) and ( max-width:1140px ) { main .secInner { max-width:1140px; padding:clamp(50px,6.5019vw,100px) 20px; } .sectionTtl { font-size:clamp(26px,3.381vw,32px); } .sectionLead { font-size:clamp(15px,1.9505vw,16px); line-height:1.75; margin-top:clamp(30px,3.9011vw,40px); } .sectionTxt { font-size:clamp(15px,1.9505vw,16px); line-height:1.75; } } /*--768px以下------------------------------------------------------*/ @media screen and (max-width:768px) { main .secInner { max-width:100%; padding:clamp(35px,9.3333vw,50px) clamp(15px,4.0vw,20px); } .sectionTtl { font-size:clamp(18px,4.8vw,26px); } .sectionTtl br { display:none; } .sectionLead { font-size:clamp(14px,3.7333vw,15px); line-height:1.75; margin-top:clamp(20px,5.3333vw,30px); } .sectionTxt { font-size:clamp(14px,3.7333vw,15px); line-height:1.75; } } /*---------------------------------------------------- CTA ----------------------------------------------------*/ .cta { width:100%; background:#088450; box-sizing:border-box; position:relative; } .cta .catInner { width:100%; text-align:center; margin:0 auto; position:relative; } .cta .cta_item_logo { width:100%; background:#fff; position:relative; } .cta .cta_item_logo::before { content:""; position:absolute; top:0; left:50%; width:10000px; height:100%; background:#fff; transform:translateX(-50%); } .cta .cta_item_logo h1 { text-align:center; } .cta .cta_item_logo img { position:relative; } .cta h3 { font-weight:600; color:#fff; text-align:center; } .cta h3 .txtMax { font-size:119.4444%; } .cta h3 .txtNum { font-size:219.4444%; vertical-align:-0.05em; } .cta .cta_reasonPoint { display:flex; flex-wrap:wrap; justify-content:space-between; } .cta .cta_reasonPoint li { text-align:center; background:#fff; box-sizing:border-box; } .cta .cta_reasonPoint li img { max-width:100%; } .cta .cta_reasonPoint li h4 { color:#088450; font-weight:600; } .cta .cta_reasonPoint li p { text-align:left; } .cta .cta_reasonPoint__plus { width:100%; text-align:center; } .cta .cta_reasonPoint__plus ul { display:flex; flex-wrap:wrap; justify-content:space-between; } .cta .cta_reasonPoint__plus li { background:#fff; display:flex; align-items:center; justify-content:center; } .cta .cta_reasonPoint__plus li h5 { font-weight:600; } .cta .cta_reasonPoint__plus li h5 span { font-size:140%; color:#088450; } /*--ボタン--*/ .cta .cta_linkInner { width:100%; background:#06482c; position:relative; } .cta .cta_linkInner::before { content:""; position:absolute; top:0; left:50%; width:10000px; height:100%; background:#06482c; transform:translateX(-50%); } .cta .ctaLink { width:100%; height:100%; text-align:center; box-sizing:border-box; transition:0.3s ease-in-out; position:relative; } .cta .ctaLink .btn { width:100%; height:100%; border-radius:150px; background:#ffd100; transition:0.2s ease-in-out; overflow:hidden; z-index:1; } .cta .ctaLink .pagelinkBtn { position:relative; } .cta .ctaLink .pagelinkBtn a { width:100%; height:100%; position:relative; z-index:3; } .cta .ctaLink .pagelinkBtn p { color:#000; font-weight:600; background:url(../images/arrow_cta_link.png) no-repeat; } /*--ホバー設定--*/ .cta .ctaLink .btn:hover { background:#b0d6f1; } /*--最下部CTA--*/ .cta-bottom { background:#fff; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { .cta .cta_item_logo { padding:30px 0; margin-top:40px; } .cta .cta_item_logo img { width:550px; } .cta h3 { font-size:36px; margin-top:40px; } .cta .cta_reasonPoint { margin-top:120px; } .cta .cta_reasonPoint li { width:31.8%; padding:0 20px 30px 20px; border-radius:15px; } .cta .cta_reasonPoint li img { width:190px; margin-top:-75px; } .cta .cta_reasonPoint li h4 { font-size:24px; line-height:1.5; } .cta .cta_reasonPoint li p { padding-top:10px; } .cta .cta_reasonPoint__plus img { width:78px; margin:25px 0 20px 0; } .cta .cta_reasonPoint__plus li { width:48%; padding:20px 0; border-radius:15px; } .cta .cta_reasonPoint__plus li h5 { font-size:22px; } /*--ボタン--*/ .cta .cta_linkInner { margin-top:60px; padding:60px 0; } .cta .ctaLink .pagelinkBtn p { font-size:40px; padding:25px 0 25px 30px; background-size:70px auto; background-position: left 25px center; } /*--最下部CTA--*/ .cta-bottom .cta_item_logo { padding:0; margin:30px 0; } .cta-bottom .cta_item_logo img { width:500px; } } @media screen and ( min-width:769px) and (max-width:1140px) { .cta .cta_item_logo { padding:clamp(20px,2.6007vw,30px) 0; margin-top:clamp(30px,3.901vw,40px); } .cta .cta_item_logo img { width:clamp(420px,54.6163vw,550px); } .cta h3 { font-size:clamp(30px,3.901vw,36px); margin-top:clamp(20px,2.6007vw,40px); } .cta .cta_reasonPoint { margin-top:clamp(100px,13.0039vw,120px); } .cta .cta_reasonPoint li { width:31.8%; padding:0 clamp(15px,1.9505vw,20px) clamp(20px,2.607vw,30px) clamp(15px,1.9505vw,20px); border-radius:15px; } .cta .cta_reasonPoint li img { width:clamp(140px,18.2054vw,190px); margin-top:calc(clamp(55px,7.1521vw,75px) * -1); } .cta .cta_reasonPoint li h4 { font-size:clamp(20px,2.6007vw,24px); line-height:1.5; } .cta .cta_reasonPoint li p { padding-top:10px; } .cta .cta_reasonPoint__plus img { width:clamp(60px,7.8023vw,78px); margin:25px 0 20px 0; } .cta .cta_reasonPoint__plus li { width:48%; padding:20px 0; border-radius:15px; } .cta .cta_reasonPoint__plus li h5 { font-size:cclamp(20px,2.6007vw,24px); } /*--ボタン--*/ .cta .cta_linkInner { margin-top:clamp(40px,5.2015vw,60px); padding:clamp(40px,5.2015vw,60px) 0; } .cta .ctaLink .pagelinkBtn p { font-size:clamp(30px,3.901vw,40px); padding:25px 0 25px clamp(25px,3.2509vw,30px); background-size:clamp(50px,6.5019vw,70px) auto; background-position: left clamp(20px,2.6007vw,25px) center; } /*--最下部CTA--*/ .cta-bottom .cta_item_logo { padding:0; margin:20px 0; } .cta-bottom .cta_item_logo img { width:420px; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { .cta .cta_item_logo { padding:clamp(15px,4.0vw,20px) 0; margin-top:clamp(20px,5.3333vw,30px); } .cta .cta_item_logo img { width:clamp(300px,80.0vw,420px); } .cta h3 { font-size:clamp(18px,4.8vw,30px); margin-top:20px; line-height:1.2; } @media screen and ( min-width:701px) and (max-width:768px) { .cta .cta_reasonPoint { margin-top:80px; } .cta .cta_reasonPoint li { width:31.8%; padding:0 15px 20px 15px; border-radius:15px; } .cta .cta_reasonPoint li img { width:140px; margin-top:-55px; } .cta .cta_reasonPoint li h4 { font-size:20px; line-height:1.5; } .cta .cta_reasonPoint li p { padding-top:10px; } } @media screen and ( min-width:501px) and (max-width:700px) { .cta .cta_reasonPoint { margin-top:clamp(55px,10.978vw,80px); } .cta .cta_reasonPoint li { width:48.0%; padding:0 15px 20px 15px; border-radius:15px; } .cta .cta_reasonPoint li:last-child { margin:clamp(55px,10.978vw,80px) 26% 0 26%; } .cta .cta_reasonPoint li img { width:clamp(110px,21.9560vw,140px); margin-top:calc(clamp(35px,6.986vw,55px) * -1); } .cta .cta_reasonPoint li h4 { font-size:clamp(18px,3.5928vw,20px); line-height:1.5; } .cta .cta_reasonPoint li p { padding-top:10px; } } @media screen and (max-width:500px) { .cta .cta_reasonPoint { margin-top:55px; } .cta .cta_reasonPoint li { width:100%; padding:0 15px 20px 15px; margin-top:60px; border-radius:15px; } .cta .cta_reasonPoint li:first-child { margin-top:0; } .cta .cta_reasonPoint li img { width:clamp(100px,26.6666vw,110px); margin-top:-40px; } .cta .cta_reasonPoint li h4 { font-size:clamp(17px,4.53333vw,18px); line-height:1.5; } .cta .cta_reasonPoint li p { padding-top:clamp(5px,1.3333vw,10px); } } .cta .cta_reasonPoint__plus img { width:clamp(50px,13.3333vw,60px); margin:clamp(20px,5.3333vw,25px) 0 clamp(15px,4.0vw,20px) 0; } @media screen and ( min-width:501px) and (max-width:768px) { .cta .cta_reasonPoint__plus li { width:48%; padding:clamp(15px,4.0vw,20px) 10px; border-radius:15px; box-sizing:border-box; } .cta .cta_reasonPoint__plus li h5 { font-size:clamp(15px,2.994vw,20px); } } @media screen and (max-width:500px) { .cta .cta_reasonPoint__plus li { width:100%; padding:clamp(15px,4.0vw,20px) 20px; margin-top:clamp(15px,4.0vw,20px); border-radius:15px; box-sizing:border-box; } .cta .cta_reasonPoint__plus li:first-child { margin-top:0; } .cta .cta_reasonPoint__plus li h5 { font-size:clamp(15px,4.0vw,16px); } } /*--ボタン--*/ .cta .cta_linkInner { margin-top:clamp(25px,6.6666vw,40px); padding:clamp(25px,6.6666vw,40px) 0; } .cta .ctaLink .pagelinkBtn p { font-size:clamp(17px,4.5333vw,30px); padding:clamp(15px,4.0vw,25px) 0 clamp(15px,4.0vw,25px) 25px; background-size:clamp(30px,8.0vw,50px) auto; background-position: left clamp(10px,2.6666vw,20px) center; } /*--最下部CTA--*/ .cta-bottom .cta_item_logo { padding:0; margin:clamp(15px,4.0vw,20px) 0; } .cta-bottom .cta_item_logo img { width:clamp(300px,80.0vw,420px); } } /*---------------------------------------------------- CTA ロゴスクロール ----------------------------------------------------*/ /*--アニメーション設定--*/ @keyframes infinity-scroll-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes infinity-scroll-right { from { transform: translateX(-100%); } to { transform: translateX(0%); } } #p-top-customer { width:100%; background:#fff; } #p-top-customer .scroll-infinity__wrap { display:flex; overflow:hidden; } #p-top-customer .scroll-infinity__list { display:flex; list-style:none; padding:0; } #p-top-customer .scroll-infinity__list--left { animation:infinity-scroll-left 80s infinite linear 0.5s both; } #p-top-customer .scroll-infinity__list--right { animation:infinity-scroll-right 80s infinite linear 0.5s both; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #p-top-customer { padding:20px 0; } #p-top-customer .scroll-infinity__item { width:calc(100vw / 6); } #p-top-customer .scroll-infinity__item>img { width:100%; } } @media screen and ( min-width:769px ) and ( max-width:1140px ) { #p-top-customer { padding:clamp(10px,1.3003vw,20px) 0; } #p-top-customer .scroll-infinity__item { width:calc(100vw / 5); } #p-top-customer .scroll-infinity__item>img { width:100%; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px ) { #p-top-customer { padding:clamp(5px,1.3333vw,10px) 0; } #p-top-customer .scroll-infinity__item>img { width:100%; } @media screen and (min-width:431px) and ( max-width:768px ) { #p-top-customer .scroll-infinity__item { width:calc(100vw / 4); } } @media screen and ( max-width:430px ) { #p-top-customer .scroll-infinity__item { width:calc(100vw / 3); } } } /*---------------------------------------------------- 医療・介護業界が迎える厳しい経営環境 ----------------------------------------------------*/ #environment { position:relative; } #environment .environment_point { width:100%; background:#088450; position:relative; z-index:1; } /*#environment .environment_point::before { content:""; position:absolute; bottom:0; left:50%; width:10000px; height:50%; background:#efefef; transform:translateX(-50%); z-index:-1; }*/ #environment .environment_point img { max-width:100%; } #environment .environment_point h4 { color:#fff; font-weight:600; } #environment .environment_timeline { width:100%; position:relative; } #environment .environment_timeline::before { content:""; position:absolute; top:-70px; left:50%; width:10000px; background:#efefef; transform:translateX(-50%); z-index:0; } #environment .environment_timeline::after { content:""; position:absolute; bottom:0; left:50%; width:10000px; background:#088450; transform:translateX(-50%); z-index:1; } #environment .environment_timeline ul { display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; z-index:2; background:url(../images/arrow_left-right.png) no-repeat; } #environment .environment_timeline li { background:#fff; box-sizing:border-box; overflow:hidden; position:relative; } #environment .environment_timeline li .environment_timeline__ttl { color:#fff; text-align:center; font-weight:600; line-height:1.0; background:#088450; } #environment .environment_timeline li .environment_timeline__sofar { text-align:center; } #environment .environment_timeline li .environment_timeline__sofar p { font-weight:500; } #environment .environment_timeline li .environment_timeline__hereafter { text-align:center; } #environment .environment_timeline li .environment_timeline__hereafter p { font-weight:500; } #environment .environment_bottomTxt { position:relative; } #environment .environment_bottomTxt::before { content:""; position:absolute; top:0; left:50%; width:10000px; height:100%; background:#088450; transform:translateX(-50%); z-index:0; } #environment h5 { color:#fff; font-weight:600; text-align:center; position:relative; z-index:2; } #environment h5 .txtMax { font-size:117.8%; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #environment .environment_point { margin-top:70px; padding:30px 0; border-radius:15px; } #environment .environment_point img { position:absolute; top:50%; left:115px; width:190px; transform:translateY(-50%); } #environment .environment_point h4 { font-size:24px; line-height:1.75; padding-left:350px } #environment .environment_timeline::before { height:calc(100% + 70px); } #environment .environment_timeline::after { height:45px; } #environment .environment_timeline ul { padding:60px 100px 0 100px; background-size:40px auto; background-position:center calc(50% + 30px); } #environment .environment_timeline li { width:46%; border-radius:15px; } #environment .environment_timeline li .environment_timeline__ttl { font-size:20px; padding:15px 0; } #environment .environment_timeline li .environment_timeline__sofar { position:absolute; width:100%; top:calc(50% + 25px); left:0; transform:translateY(-50%); } #environment .environment_timeline li .environment_timeline__sofar p { font-size:22px; } #environment .environment_timeline li .environment_timeline__hereafter { padding:25px 10px; } #environment .environment_timeline li .environment_timeline__hereafter p { font-size:18px; } #environment .environment_timeline li .environment_timeline__hereafter img { padding:10px 0 5px 0; } #environment .environment_timeline li .arrow_environment_timeline { width:28px; } #environment h5 { font-size:28px; padding:35px 0 45px 0; } } @media screen and ( min-width:769px) and (max-width:1140px) { #environment .environment_point { margin-top:clamp(50px,6.5019vw,70px); padding:clamp(25px,3.2509vw,30px) 0; border-radius:15px; } #environment .environment_point img { position:absolute; top:50%; left:clamp(30px,3.9011vw,115px); width:clamp(130px,16.905vw,190px); transform:translateY(-50%); } #environment .environment_point h4 { font-size:clamp(19px,2.4707vw,24px); line-height:1.75; padding-left:clamp(190px,24.7074vw,350px); } #environment .environment_timeline::before { height:calc(100% + 70px); } #environment .environment_timeline::after { height:45px; } #environment .environment_timeline ul { padding:clamp(45px,5.8517vw,60px) clamp(20px,2.6007vw,100px) 0 clamp(20px,2.6007vw,100px); background-size:35px auto; background-position:center calc(50% + 30px); } #environment .environment_timeline li { width:46%; border-radius:15px; } #environment .environment_timeline li .environment_timeline__ttl { font-size:clamp(18px,2.3407vw,20px); padding:15px 0; } #environment .environment_timeline li .environment_timeline__sofar { position:absolute; width:100%; top:calc(50% + clamp(15px,1.9505vw,25px)); left:0; transform:translateY(-50%); } #environment .environment_timeline li .environment_timeline__sofar p { font-size:clamp(18px,2.3407vw,22px); } #environment .environment_timeline li .environment_timeline__hereafter { padding:clamp(20px,2.6007vw,25px) 10px; } #environment .environment_timeline li .environment_timeline__hereafter p { font-size:clamp(16px,2.0806vw,18px); } #environment .environment_timeline li .environment_timeline__hereafter img { padding:10px 0 5px 0; } #environment .environment_timeline li .arrow_environment_timeline { width:clamp(20px,2.6007vw,28px); } #environment h5 { font-size:clamp(22px,2.8608vw,28px); padding:clamp(25px,3.2509vw,35px) 0 clamp(35px,4.5513vw,45px) 0; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { @media screen and ( min-width:601px) and (max-width:768px) { #environment .environment_point { margin-top:clamp(30px,4.9916vw,50px); padding:clamp(20px,3.3277vw,25px) 0; border-radius:15px; } #environment .environment_point img { position:absolute; top:50%; left:clamp(20px,3.3277vw,30px); width:clamp(90px,14.975vw,130px); transform:translateY(-50%); } #environment .environment_point h4 { font-size:clamp(16px,2.6622vw,19px); line-height:1.75; padding-left:clamp(120px,19.9667vw,190px); } } @media screen and (max-width:600px) { #environment .environment_point { text-align:center; margin-top:50px; padding:20px 20px; border-radius:15px; box-sizing:border-box; } #environment .environment_point img { width:90px; margin-top:-40px; } #environment .environment_point h4 { font-size:16px; line-height:1.75; text-align:left; padding-left:0; } #environment .environment_point h4 br { display:none; } } @media screen and ( min-width:601px) and (max-width:768px) { #environment .environment_timeline::before { height:calc(100% + 70px); } #environment .environment_timeline::after { height:45px; } #environment .environment_timeline ul { padding:clamp(35px,5.8236vw,45px) clamp(10px,1.6638vw,20px) 0 clamp(10px,1.6638vw,20px); background-size:25px auto; background-position:center calc(50% + 30px); } #environment .environment_timeline li { width:46%; border-radius:15px; } #environment .environment_timeline li .environment_timeline__ttl { font-size:clamp(16px,2.6622vw,18px); padding:clamp(10px,1.6638vw,15px) 0; } #environment .environment_timeline li .environment_timeline__sofar { position:absolute; width:100%; top:calc(50% + clamp(10px,1.6638vw,15px)); left:0; transform:translateY(-50%); } #environment .environment_timeline li .environment_timeline__sofar p { font-size:clamp(16px,2.6622vw,18px); padding:0 clamp(10px,1.6638vw,20px); } #environment .environment_timeline li .environment_timeline__hereafter { padding:clamp(15px,2.4958vw,20px) 10px; } #environment .environment_timeline li .environment_timeline__hereafter p { font-size:clamp(14px,2.3294vw,16px); } #environment .environment_timeline li .environment_timeline__hereafter img { padding:10px 0 5px 0; } #environment .environment_timeline li .arrow_environment_timeline { width:20px; } } @media screen and (max-width:600px) { #environment .environment_timeline::before { height:calc(100% + 70px); } #environment .environment_timeline::after { height:45px; } #environment .environment_timeline ul { padding:25px clamp(10px,1.6638vw,20px) 0 clamp(10px,1.6638vw,20px); background:url(../images/arrow_top-bottom.png) no-repeat; background-size:25px auto; background-position:center 160px; } #environment .environment_timeline li { width:100%; margin-top:55px; border-radius:15px; } #environment .environment_timeline li:first-child { margin-top:0; } #environment .environment_timeline li .environment_timeline__ttl { font-size:16px; padding:10px 0; } #environment .environment_timeline li .environment_timeline__sofar { padding:30px 20px; } #environment .environment_timeline li .environment_timeline__sofar p { font-size:clamp(15px,4.0vw,16px); padding:0 10px; } #environment .environment_timeline li .environment_timeline__hereafter { padding:15px 10px; } #environment .environment_timeline li .environment_timeline__hereafter p { font-size:14px; } #environment .environment_timeline li .environment_timeline__hereafter img { padding:10px 0 5px 0; } #environment .environment_timeline li .arrow_environment_timeline { width:20px; } } #environment h5 { font-size:clamp(15px,4.0vw,22px); padding:clamp(20px,5.3333vw,25px) 0 clamp(30px,8.0vw,35px) 0; } } /*---------------------------------------------------- システム化が遅れていませんか？ ----------------------------------------------------*/ #question { position:relative; } #question .question_ttl { width:100%; text-align:center; color:#088450; font-weight:bold; background:#d9efe6; box-sizing:border-box; } #question .question_ttl .txtMax { font-size:117.8%; } #question .question_list { display:flex; flex-wrap:wrap; justify-content:space-between; } #question .question_list .question_list__img { background:url(../images/bg_question_list.jpg) no-repeat center top; background-size:auto 100%; } #question .question_list ul { box-sizing:border-box; } #question .question_list p { font-weight:600; background:url(../images/icon_question_list.png) no-repeat left center; } /*--768px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #question .question_ttl { font-size:28px; padding:20px 10px; border-radius:15px; } #question .question_list { margin:50px 0; } #question .question_list .question_list__img { width:calc(100% - 680px); heigh:100%; } #question .question_list ul { width:680px; padding:5px 0 5px 40px; } #question .question_list p { font-size:20px; padding:10px 0 10px 35px; background-size:25px auto; } } @media screen and ( min-width:769px) and (max-width:1140px) { #question .question_ttl { font-size:clamp(22px,2.8608vw,28px); padding:20px 10px; border-radius:15px; } #question .question_list { margin:clamp(40px,5.2015vw,50px) 0; padding:0 10px; } #question .question_list .question_list__img { width:40%; } #question .question_list ul { width:60%; padding:clamp(5px,0.6501vw,10px) 0 clamp(5px,0.6501vw,10px) clamp(30px,3.9011vw,40px); } #question .question_list p { font-size:clamp(16px,2.0806vw,20px); padding:clamp(8px,1.0403vw,10px) 0 clamp(8px,1.0403vw,10px) clamp(30px,3.9011vw,35px); background-size:clamp(20px,2.6007vw,25px) auto; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #question .question_ttl { font-size:clamp(16px,4.2666vw,22px); padding:clamp(15px,4.0vw,20px) 10px; border-radius:15px; } @media screen and ( min-width:651px) and (max-width:768px) { #question .question_list { margin:40px 0; padding:0 10px; } #question .question_list .question_list__img { width:40%; } #question .question_list ul { width:60%; padding:5px 0 5px clamp(20px,2.853vw,30px); } #question .question_list p { font-size:clamp(15px,2.1398vw,16px); padding:8px 0 8px 30px; background-size:20px auto; } } @media screen and (max-width:650px) { #question .question_list { margin:clamp(30px,8.0vw,40px) 0; padding:0; } #question .question_list .question_list__img { width:100%; height:clamp(200px,53.3333vw,300px); } #question .question_list ul { width:100%; padding:20px clamp(10px,2.6666vw,40px) 0 clamp(10px,2.6666vw,40px); } #question .question_list p { font-size:14px; padding:clamp(5px,1.3333vw,8px) 0 clamp(5px,1.3333vw,8px) clamp(26px,4.2666vw,30px); background-size:clamp(16px,4.2666vw,20px) auto; } } } /*---------------------------------------------------- ゴリラSFAにお任せください ----------------------------------------------------*/ #suggestion { text-align:center; position:relative; } #suggestion .arrow_suggestion { max-width:100%; } #suggestion .suggestion_top { background:#088450; } #suggestion .suggestion_item_logo { width:100%; background:#fff; position:relative; } #suggestion .suggestion_item_logo::before { content:""; position:absolute; top:0; left:50%; width:10000px; height:100%; background:#fff; transform:translateX(-50%); } #suggestion .suggestion_item_logo h1 { text-align:center; } #suggestion .suggestion_item_logo img { position:relative; } #suggestion .suggestion_bottom { background:#fff; } #suggestion .suggestion_list { display:flex; flex-wrap:wrap; justify-content:space-between; background:url(../images/icon_plus.png) no-repeat; } #suggestion .suggestion_list li { background:#d9efe6; } #suggestion .suggestion_list li .suggestion_list__category { font-weight:600; line-height:1.0; color:#343a40; } #suggestion .suggestion_list li h4 { font-weight:600; color:#088450; } #suggestion .suggestion_list li .suggestion_list__point { text-align:center; background:#088450; } #suggestion .suggestion_list li .suggestion_list__pointInner { display:inline-block; } #suggestion .suggestion_list li .suggestion_list__point p { color:#fff; font-weight:500; width:100%; text-align:left; } #suggestion .suggestion_list li .suggestion_list__txt { text-align:left; } /*--768px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #suggestion .suggestion_top { padding-bottom:50px; } #suggestion .suggestion__companyLogo { width:220px; padding:50px 0 30px 0; } #suggestion .suggestion_item_logo { padding:30px 0; margin:30px 0; } #suggestion .suggestion_item_logo img { width:550px; } #suggestion .suggestion_list { margin-top:75px; background-size:80px; background-position:center center; } #suggestion .suggestion_list li { width:44%; border-radius:15px; } #suggestion .suggestion_list li .suggestion_list__category { font-size:46px; margin-top:-23px; } #suggestion .suggestion_list li h4 { font-size:24px; margin:20px 0; } #suggestion .suggestion_list li .suggestion_list__point { padding:20px 0; } #suggestion .suggestion_list li .suggestion_list__pointInner { display:inline-block; } #suggestion .suggestion_list li .suggestion_list__point p { font-size:18px; margin-bottom:5px; } #suggestion .suggestion_list li .suggestion_list__point p:nth-of-type(3) { margin-bottom:0; } #suggestion .suggestion_list li .suggestion_list__txt { padding:20px 25px; } } @media screen and ( min-width:769px) and (max-width:1140px) { #suggestion .suggestion_top { padding-bottom:clamp(40px,5.2015vw,50px); } #suggestion .suggestion__companyLogo { width:clamp(190px,23.7074vw,220px); padding:clamp(40px,5.2015vw,50px) 0 clamp(20px,2.6007vw,30px) 0; } #suggestion .suggestion_item_logo { padding:clamp(20px,2.6007vw,30px) 0; margin:clamp(25px,3.2509vw,30px) 0; } #suggestion .suggestion_item_logo img { width:420px; } #suggestion .suggestion_list { margin-top:clamp(60px,7.8023vw,75px); background-size:clamp(50px,6.5019vw,80px); background-position:center center; } #suggestion .suggestion_list li { width:44%; border-radius:15px; } #suggestion .suggestion_list li .suggestion_list__category { font-size:clamp(40px,5.2015vw,46px); margin-top:-23px; } #suggestion .suggestion_list li h4 { font-size:clamp(18px,2.3407vw,24px); margin:20px 0; } #suggestion .suggestion_list li .suggestion_list__point { padding:clamp(15px,1.9058vw,20px) 0; } #suggestion .suggestion_list li .suggestion_list__pointInner { display:inline-block; } #suggestion .suggestion_list li .suggestion_list__point p { font-size:clamp(16px,2.0806vw,18px); margin-bottom:5px; } #suggestion .suggestion_list li .suggestion_list__point p:nth-of-type(3) { margin-bottom:0; } #suggestion .suggestion_list li .suggestion_list__txt { padding:clamp(15px,1.9505vw,20px) clamp(20px,2.6007vw,25px); } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #suggestion .suggestion_top { padding-bottom:clamp(25px,6.6666vw,40px); } #suggestion .suggestion__companyLogo { width:clamp(130px,34.6666vw,190px); padding:clamp(20px,5.3333vw,40px) 0 clamp(10px,2.6666vw,20px) 0; } #suggestion .suggestion_item_logo { padding:clamp(15px,4.0vw,20px) 0; margin:clamp(20px,5.3333vw,25px) 0; } #suggestion .suggestion_item_logo img { width:clamp(300px,80.0vw,420px); } @media screen and ( min-width:701px) and (max-width:768px) { #suggestion .suggestion_list { margin-top:60px; background-size:50px; background-position:center center; } #suggestion .suggestion_list li { width:44%; border-radius:15px; } #suggestion .suggestion_list li .suggestion_list__category { font-size:clamp(38px,5.4208vw,40px); margin-top:calc(clamp(20px,2.853vw,23px) * -1); } #suggestion .suggestion_list li h4 { font-size:clamp(17px,24.251vw,18px); margin:clamp(15px,2.1398vw,20px) 0 20px 0; } #suggestion .suggestion_list li .suggestion_list__point { padding:15px 0; } #suggestion .suggestion_list li .suggestion_list__pointInner { display:inline-block; } #suggestion .suggestion_list li .suggestion_list__point p { font-size:clamp(15px,2.1398vw,16px); margin-bottom:5px; } #suggestion .suggestion_list li .suggestion_list__point p:nth-of-type(3) { margin-bottom:0; } #suggestion .suggestion_list li .suggestion_list__txt { padding:15px 20px; } } @media screen and (max-width:700px) { #suggestion .suggestion_list { margin-top:clamp(45px,12.0vw,60px); background:none; } #suggestion .suggestion_list li { width:100%; margin-top:95px; border-radius:15px; position:relative;} #suggestion .suggestion_list li:first-child { margin-top:0; } #suggestion .suggestion_list li:first-child::before { content:""; position:absolute; bottom:-60px; left:0; width:100%; height:40px; background:url(../images/icon_plus.png) no-repeat center center; background-size:40px; } #suggestion .suggestion_list li .suggestion_list__category { font-size:clamp(32px,8.5333vw,38px); margin-top:-20px; } #suggestion .suggestion_list li h4 { font-size:clamp(16px,4.2666vw,17px); margin:15px 0 clamp(15px,4.0vw,20px) 0; } #suggestion .suggestion_list li .suggestion_list__point { padding:clamp(10px,2.6666vw,15px) 0; } #suggestion .suggestion_list li .suggestion_list__pointInner { display:inline-block; } #suggestion .suggestion_list li .suggestion_list__point p { font-size:clamp(14px,3.7333vw,15px); margin-bottom:5px; } #suggestion .suggestion_list li .suggestion_list__point p:nth-of-type(3) { margin-bottom:0; } #suggestion .suggestion_list li .suggestion_list__txt { padding:15px 20px; } } } /*---------------------------------------------------- 課題を解決 ----------------------------------------------------*/ #solution { background:#efefef; position:relative; } #solution .solution_flow .solution_flow__inner { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl { text-align:center; display:flex; align-items:center; justify-content:center; position:relative; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl img { max-width:100%; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl h4 { font-weight:600; color:#088450; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl p { font-weight:500; } #solution .solution_flow .solution_flow__inner .solution_flow__detail { border-bottom:1px solid #bfbfbf; box-sizing:border-box; } #solution .solution_flow .solution_flow__inner .solution_flow__detailLast { border-bottom:none!important; padding-bottom:0!important; } #solution .solution_flow .solution_flow__inner .solution_flow__detail ul { display:flex; flex-wrap:wrap; justify-content:space-between; box-sizing:border-box; background:url(../images/arrow_left-right.png) no-repeat; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li { background:#fff; box-sizing:border-box; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTtl { color:#fff; font-weight:600; line-height:1.0; text-align:center; background:#088450; border-top-left-radius:15px; border-top-right-radius:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt h5 { color:#088450; font-weight:600; text-align:center; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p { font-weight:500; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #solution .solution_flow { margin-top:20px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl { width:240px; padding-right:30px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl img { width:100px;} #solution .solution_flow .solution_flow__inner .solution_flow__ttl h4 { font-size:20px; padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl p { font-size:14px; padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl .arrow_top-bottom { position:absolute; bottom:0; left:calc(50% - (30px / 2)); width:40px; transform:translate(-50%, 50%) } #solution .solution_flow .solution_flow__inner .solution_flow__detail { width:calc(100% - 270px); padding:40px 20px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail ul { background-size:40px auto; background-position:left 42% center; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li { border-radius:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem { width:38%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla { width:53%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTtl { font-size:18px; padding:15px 0; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt { padding:20px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt h5 { font-size:18px; padding-bottom:10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p { margin-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem .solution_flow__detailTxt p { font-size:14px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla .solution_flow__detailTxt p { font-size:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p:nth-of-type(1) { margin-top:0; } } @media screen and ( min-width:769px) and (max-width:1140px) { #solution .solution_flow { margin-top:clamp(15px,1.9505vw,20px); } #solution .solution_flow .solution_flow__inner .solution_flow__ttl { width:clamp(140px,18.2054vw,240px); padding-right:clamp(20px,2.6007vw,30px); } #solution .solution_flow .solution_flow__inner .solution_flow__ttl img { width:clamp(80px,10.4031vw,100px);} #solution .solution_flow .solution_flow__inner .solution_flow__ttl h4 { font-size:clamp(17px,2.2106vw,20px); padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl p { font-size:clamp(13px,1.6905vw,14px); padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl .arrow_top-bottom { position:absolute; bottom:0; left:calc(50% - (30px / 2)); width:clamp(35px,4.5513vw,40px); transform:translate(-50%, 50%) } #solution .solution_flow .solution_flow__inner .solution_flow__detail { width:calc(100% - clamp(160px,21.0806vw,280px)); padding:clamp(25px,3.2509vw,40px) clamp(10px,1.3003vw,20px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail ul { background-size:clamp(30px,3.9011vw,40px) auto; background-position:left 42% center; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li { border-radius:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem { width:38%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla { width:53%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTtl { font-size:clamp(16px,2.0806vw,18px); padding:15px 0 } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt { padding:clamp(15px,1.9505vw,20px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt h5 { font-size:clamp(15px,1,9505vw,18px); padding-bottom:10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p { margin-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem .solution_flow__detailTxt p { font-size:clamp(13px,1.6905vw,14px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla .solution_flow__detailTxt p { font-size:clamp(14px,1.8205vw,15px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p:nth-of-type(1) { margin-top:0; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #solution .solution_flow { margin-top:clamp(5px,1.3333vw,10px); } #solution .solution_flow .solution_flow__inner .solution_flow__ttl { width:100%; padding:20px 20px 0 20px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl img { width:clamp(90px,24.0vw,140px);} #solution .solution_flow .solution_flow__inner .solution_flow__ttl h4 { font-size:clamp(16px,4.2666vw,17px); padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl p { font-size:13px; padding-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__ttl .arrow_top-bottom { display:none; } @media screen and ( min-width:601px) and (max-width:768px) { #solution .solution_flow .solution_flow__inner .solution_flow__detail { width:100%; padding:25px 10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail ul { background-size:clamp(25px,4.1597vw,30px) auto; background-position:left 42% center; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li { border-radius:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem { width:38%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla { width:53%; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTtl { font-size:clamp(15px,2.4958vw,16px); padding:15px 0 } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt { padding:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt h5 { font-size:15px; padding-bottom:10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p { margin-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem .solution_flow__detailTxt p { font-size:13px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla .solution_flow__detailTxt p { font-size:14px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p:nth-of-type(1) { margin-top:0; } } @media screen and (max-width:600px) { #solution .solution_flow .solution_flow__inner .solution_flow__detail { width:100%; padding:25px 10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail ul { background:none; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li { border-radius:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem { width:100%; position:relative; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem::before { content:""; position:absolute; bottom:calc(clamp(45px,12.0vw,48px) * -1); left:0; width:100%; height:clamp(25px,6.6666vw,35px); background:url(../images/arrow_top-bottom.png) no-repeat center center; background-size:clamp(25px,6.6666vw,35px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla { width:100%; margin-top:60px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTtl { font-size:clamp(15px,4.0vw,16px); padding:15px 0 } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt { padding:15px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt h5 { font-size:15px; padding-bottom:10px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p { margin-top:5px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__problem .solution_flow__detailTxt p { font-size:13px; } #solution .solution_flow .solution_flow__inner .solution_flow__detail .solution_flow__gorilla .solution_flow__detailTxt p { font-size:clamp(13px,3.4666vw,14px); } #solution .solution_flow .solution_flow__inner .solution_flow__detail li .solution_flow__detailTxt p:nth-of-type(1) { margin-top:0; } } } /*---------------------------------------------------- ゴリラSFAの主な特長 ----------------------------------------------------*/ #merit { position:relative; background:#d9efe6; } #merit .merit_list .merit_list__parent { text-align:center; display:flex; flex-wrap:wrap; justify-content:space-between; } #merit .merit_list .merit_list__parent > li { background:#fff; box-sizing:border-box; } #merit .merit_list .merit_list__parent h4 { color:#fff; font-weight:600; background:#088450; display:inline-block; transform:translateY(-50%); box-sizing:border-box; } #merit .merit_list .merit_list__parent h4 .txtMin { font-size:90%; margin-left:0.4em; } #merit .merit_list .merit_list__parent h5 { font-weight:500; } #merit .merit_list .merit_list__parent h5 .txtMax { font-size:125%; font-weight:600; } #merit .merit_list .merit_list__parent .merit_list__childInner h5 { text-align:left; font-weight:500; } #merit .merit_list .merit_list__parent .merit_list__childInner h5:nth-of-type(1) { margin-top:0; } #merit .merit_list .merit_list__child { text-align:center; display:flex; flex-wrap:wrap; justify-content:space-between; } #merit .merit_list .merit_list__child li { background:#efefef; display:flex; align-items:center; justify-content:center; } #merit .merit_list .merit_list__child li p { font-weight:500; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #merit .merit_list .merit_list__parent { margin-top:90px; } #merit .merit_list .merit_list__parent > li { width:48%; margin-top:75px; padding:0 35px 35px 35px; } #merit .merit_list .merit_list__parent > li:first-child { margin-top:0; } #merit .merit_list .merit_list__parent .merit_list__full { width:100%; } #merit .merit_list .merit_list__parent h4 { min-width:480px; font-size:24px; padding:15px 60px; border-radius:15px; } #merit .merit_list .merit_list__parent h5 { font-size:16px; line-height:1.6; } #merit .merit_list .merit_list__child li { width:30%; margin-bottom:20px; } #merit .merit_list .merit_list__child li:last-child { margin-bottom:0; } #merit .merit_list .merit_list__child li p { font-size:16px; padding:20px 0; } } @media screen and ( min-width:769px) and (max-width:1140px) { #merit .merit_list .merit_list__parent { margin-top:clamp(65px,8.4525vw,90px); } #merit .merit_list .merit_list__parent > li { width:48%; margin-top:clamp(60px,7.8023vw,75px); padding:0 15px 25px 15px; } #merit .merit_list .merit_list__parent > li:first-child { margin-top:0; } #merit .merit_list .merit_list__parent .merit_list__full { width:100%; } #merit .merit_list .merit_list__parent h4 { width:calc(100% - 20px); font-size:clamp(18px,2.3407vw,24px); padding:clamp(12px,1.5604vw,15px) 10px; border-radius:15px; } #merit .merit_list .merit_list__parent h5 { font-size:clamp(15px,1.9505vw,16px); line-height:1.6; } #merit .merit_list .merit_list__parent h5 .txtMax { font-size:115%; } #merit .merit_list .merit_list__child li { width:32%; margin-bottom:clamp(15px,1.9505vw,20px); } #merit .merit_list .merit_list__child li:last-child { margin-bottom:0; } #merit .merit_list .merit_list__child li p { font-size:clamp(14px,1.8205vw,16px); padding:clamp(15px,1.9505vw,20px) 0; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #merit .merit_list .merit_list__parent { margin-top:clamp(50px,13.3333vw,65px); } @media screen and ( min-width:701px) and (max-width:768px) { #merit .merit_list .merit_list__parent > li { width:48%; margin-top:clamp(55px,7.8459vw,60px); padding:0 15px clamp(20px,2.853vw,25px) 15px; } #merit .merit_list .merit_list__parent > li:first-child { margin-top:0; } #merit .merit_list .merit_list__parent .merit_list__full { width:100%; } #merit .merit_list .merit_list__parent h4 { width:calc(100% - 10px); font-size:clamp(17px,2.4251vw,18px); padding:12px 10px; border-radius:15px; } #merit .merit_list .merit_list__parent h5 { font-size:clamp(14px,1.9971vw,15px); line-height:1.6; margin-top:-5px; } #merit .merit_list .merit_list__parent .merit_list__childInner h5 { margin-top:0!important; } #merit .merit_list .merit_list__parent h5 .txtMax { font-size:115%; } #merit .merit_list .merit_list__child li { width:32%; margin-bottom:15px; } #merit .merit_list .merit_list__child li:last-child { margin-bottom:0; } #merit .merit_list .merit_list__child li p { font-size:13px; padding:15px 0; } } @media screen and (max-width:700px) { #merit .merit_list .merit_list__parent > li { width:100%; margin-top:clamp(45px,12.0vw,55px); padding:0 15px 20px 15px; } #merit .merit_list .merit_list__parent > li:first-child { margin-top:0; } #merit .merit_list .merit_list__parent .merit_list__full { width:100%; } #merit .merit_list .merit_list__parent h4 { width:calc(100% - 10px); font-size:clamp(16px,4.2666vw,18px); padding:12px 10px; border-radius:15px; } #merit .merit_list .merit_list__parent h5 { font-size:clamp(13px,3.4666vw,15px); line-height:1.6; margin-top:-5px; } #merit .merit_list .merit_list__parent .merit_list__childInner { margin-top:-5px; } #merit .merit_list .merit_list__parent .merit_list__childInner h5 { margin-top:0!important; } #merit .merit_list .merit_list__parent h5 .txtMax { font-size:115%; } #merit .merit_list .merit_list__child li { width:48%; margin-bottom:15px; } #merit .merit_list .merit_list__child li:nth-child(9) { margin-bottom:0; } #merit .merit_list .merit_list__child li:nth-child(10) { margin-bottom:0; } #merit .merit_list .merit_list__child li p { font-size:clamp(12px,3.2vw,14px); padding:15px 5px; } } } /*---------------------------------------------------- ゴリラSFAの主な機能 ----------------------------------------------------*/ #feature { background:#d9efe6; position:relative; } #feature .feature_list { display:flex; flex-wrap:wrap; justify-content:space-between; } #feature .feature_list li { text-align:center; background:#088450; position:relative; } #feature .feature_list li img { position:absolute; left:50%; transform:translateX(-50%); } #feature .feature_list li h4 { font-weight:600; color:#088450; background:#fff; } #feature .feature_list li .feature_list_detail { width:100%; box-sizing:border-box; } #feature .feature_list li .feature_list_detail p { color:#fff; font-weight:500; text-align:left; } #feature .feature_list li .feature_list_detail p:nth-of-type(1) { margin-top:0; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #feature .feature_list__border { border-top-left-radius:15px; border-top-right-radius:15px; } #feature .feature_list { margin-top:70px; } #feature .feature_list li { width:31.5%; margin-top:60px; } #feature .feature_list li:nth-child(1),#feature .feature_list li:nth-child(2),#feature .feature_list li:nth-child(3) { margin-top:0; } #feature .feature_list li img { width:40px; top:-20px; } #feature .feature_list li h4 { font-size:20px; padding:35px 10px 20px 10px; } #feature .feature_list li .feature_list_detail { padding:20px; } #feature .feature_list li .feature_list_detail p { margin-top:5px; } } @media screen and ( min-width:769px) and (max-width:1140px) { #feature .feature_list__border { border-top-left-radius:15px; border-top-right-radius:15px; } #feature .feature_list { margin-top:clamp(60px,7.8023vw,70px); } #feature .feature_list li { width:32.0%; margin-top:clamp(50px,6.5019vw,60px); } #feature .feature_list li:nth-child(1),#feature .feature_list li:nth-child(2),#feature .feature_list li:nth-child(3) { margin-top:0; } #feature .feature_list li img { width:clamp(36px,4.6814vw,40px); top:calc(clamp(18px,2.3407vw,20px) * -1); } #feature .feature_list li h4 { font-size:clamp(17px,2.2106vw,20px); padding:clamp(25px,3.2509vw,35px) 10px clamp(15px,1.9505vw,20px) 10px; } #feature .feature_list li .feature_list_detail { padding:clamp(15px,1.9505vw,20px); } #feature .feature_list li .feature_list_detail p { margin-top:5px; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #feature .feature_list__border { border-top-left-radius:15px; border-top-right-radius:15px; } #feature .feature_list { margin-top:clamp(40px,10.6666vw,60px); } @media screen and ( min-width:701px) and (max-width:768px) { #feature .feature_list li { width:32.0%; margin-top:50px; } #feature .feature_list li:nth-child(1),#feature .feature_list li:nth-child(2),#feature .feature_list li:nth-child(3) { margin-top:0; } #feature .feature_list li img { width:36px; top:-18px; } #feature .feature_list li h4 { font-size:16px; padding:25px 10px 15px 10px; } #feature .feature_list li .feature_list_detail { padding:15px; } #feature .feature_list li .feature_list_detail p { margin-top:5px; } } @media screen and ( min-width:551px) and (max-width:700px) { #feature .feature_list li { width:49.0%; margin-top:50px; } #feature .feature_list li:nth-child(1),#feature .feature_list li:nth-child(2) { margin-top:0; } #feature .feature_list li img { width:36px; top:-18px; } #feature .feature_list li h4 { font-size:16px; padding:25px 10px 15px 10px; } #feature .feature_list li .feature_list_detail { padding:15px; } #feature .feature_list li .feature_list_detail p { margin-top:5px; } } @media screen and (max-width:550px) { #feature .feature_list li { width:100.0%; margin-top:clamp(40px,10.6666vw,50px); } #feature .feature_list li:nth-child(1) { margin-top:0; } #feature .feature_list li img { width:clamp(30px,8.0vw,36px); top:calc(clamp(15px,4.0vw,18px) * -1); } #feature .feature_list li h4 { font-size:16px; padding:clamp(20px,5.3333vw,25px) 10px clamp(10px,2.6666vw,15px) 10px; } #feature .feature_list li .feature_list_detail { padding:15px clamp(10px,2.6666vw,15px); } #feature .feature_list li .feature_list_detail p { margin-top:5px; } } } /*---------------------------------------------------- 事例紹介 ----------------------------------------------------*/ #casestudy { position:relative; } #casestudy .casestudy_detail { text-align:center; background:#efefef; } #casestudy .casestudy_detail h3 { font-weight:600; color:#088450; } #casestudy .casestudy_detail .casestudy_detail__category { font-weight:600; color:#fff; background:#088450; display:inline-block; } #casestudy .casestudy_detail .casestudyt_timeline { display:flex; flex-wrap:wrap; justify-content:space-between; background:url(../images/arrow_left-right.png) no-repeat; } #casestudy .casestudy_detail .casestudyt_timeline li { background:#fff; position:relative; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__category { font-weight:600; color:#343a40; line-height:1.0; transform:translateY(-50%); } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt { background:#088450; text-align:left; box-sizing:border-box; display:flex; align-items:center; justify-content:center; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt p { color:#fff; font-weight:500; } #casestudy .casestudy_result { position:relative; } #casestudy .casestudy_result .casestudy_result__category { font-weight:600; color:#343a40; line-height:1.0; position:relative; z-index:2; } #casestudy .casestudy_result .casestudyt_result__txt { display:flex; flex-wrap:wrap; justify-content:space-between; } #casestudy .casestudy_result .casestudyt_result__txt > div { display:flex; align-items:center; justify-content:center; background:#fff; } #casestudy .casestudy_result .casestudyt_result__txt p { color:#088450; font-weight:500; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #casestudy .casestudy_detail { margin-top:60px; padding:55px 40px; } #casestudy .casestudy_detail h3 { font-size:30px; } #casestudy .casestudy_detail .casestudy_detail__category { font-size:20px; padding:5px 30px; margin-top:10px; border-radius:5px; } #casestudy .casestudy_detail .casestudyt_timeline { margin-top:55px; background-size:40px; background-position:center center; } #casestudy .casestudy_detail .casestudyt_timeline li { width:45%; border-radius:15px; padding-bottom:35px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__category { font-size:46px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt { padding:20px 30px; min-height:130px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt p { font-size:18px; line-height:1.75; } #casestudy .casestudy_result { margin-top:40px; } #casestudy .casestudy_result .casestudy_result__category { font-size:46px; } #casestudy .casestudy_result .casestudyt_result__txt { margin-top:-22px; } #casestudy .casestudy_result .casestudyt_result__txt > div { width:49%; padding:50px 0; } #casestudy .casestudy_result .casestudyt_result__txt p { font-size:22px; } } @media screen and ( min-width:769px) and (max-width:1140px) { #casestudy .casestudy_detail { margin-top:40px; padding:30px 30px 40px 30px; } #casestudy .casestudy_detail h3 { font-size:25px; } #casestudy .casestudy_detail .casestudy_detail__category { font-size:18px; padding:5px 30px; margin-top:10px; border-radius:5px; } #casestudy .casestudy_detail .casestudyt_timeline { margin-top:45px; background-size:35px; background-position:center center; } #casestudy .casestudy_detail .casestudyt_timeline li { width:45%; border-radius:15px; padding-bottom:35px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__category { font-size:40px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt { padding:15px 20px; min-height:145px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt p { font-size:16px; line-height:1.75; } #casestudy .casestudy_result { margin-top:25px; } #casestudy .casestudy_result .casestudy_result__category { font-size:40px; } #casestudy .casestudy_result .casestudyt_result__txt { margin-top:-18px; } #casestudy .casestudy_result .casestudyt_result__txt > div { width:49%; padding:40px 0; } #casestudy .casestudy_result .casestudyt_result__txt p { font-size:18px; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #casestudy .casestudy_detail { margin-top:clamp(30px,8.0vw,40px); padding:clamp(25px,6.6666vw,30px) clamp(25px,6.6666vw,30px) clamp(30px,8.0vw,40px) clamp(25px,6.6666vw,30px); } #casestudy .casestudy_detail h3 { font-size:clamp(18px,4.8vw,25px); } #casestudy .casestudy_detail .casestudy_detail__category { font-size:clamp(15px,4.0vw,18px); padding:5px clamp(20px,5.3333vw,30px); margin-top:10px; border-radius:5px; } @media screen and ( min-width:701px) and (max-width:768px) { #casestudy .casestudy_detail .casestudyt_timeline { margin-top:clamp(40px,5.7061vw,45px); background-size:clamp(30px,4.2796vw,35px); background-position:center center; } #casestudy .casestudy_detail .casestudyt_timeline li { width:45%; border-radius:15px; padding-bottom:clamp(30px,3.9011vw,35px); } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__category { font-size:clamp(36px,5.1355vw,40px); } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt { padding:clamp(10px,1.4265vw,15px) clamp(15px,2.1398vw,20px); min-height:clamp(125px,17.8316vw,145px); } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt p { font-size:clamp(15px,2.1398vw,16px); line-height:1.75; } } @media screen and (max-width:700px) { #casestudy .casestudy_detail .casestudyt_timeline { margin-top:40px; background:url(../images/arrow_top-bottom.png) no-repeat; background-size:clamp(25px,6.6666vw,30px) auto; background-position:50% 49%; } #casestudy .casestudy_detail .casestudyt_timeline li { width:100%; border-radius:15px; padding-bottom:clamp(25px,6.4vw,35px); margin-top:clamp(60px,16.0vw,80px); } #casestudy .casestudy_detail .casestudyt_timeline li:first-child { margin-top:0; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__category { font-size:clamp(28px,7.4666vw,36px); } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt { padding:10px 15px; min-height:100px; } #casestudy .casestudy_detail .casestudyt_timeline li .casestudyt_timeline__txt p { font-size:clamp(14px,3.7333vw,15px); line-height:1.75; } } @media screen and ( min-width:701px) and (max-width:768px) { #casestudy .casestudy_result { margin-top:clamp(20px,2.853vw,25px); } #casestudy .casestudy_result .casestudy_result__category { font-size:clamp(36px,5.1355vw,40px); } #casestudy .casestudy_result .casestudyt_result__txt { margin-top:-18px; } #casestudy .casestudy_result .casestudyt_result__txt > div { width:49%; padding:clamp(30px,4.2796vw,40px) 0; } #casestudy .casestudy_result .casestudyt_result__txt p { font-size:clamp(16px,2.2824vw,18px); } } @media screen and (max-width:700px) { #casestudy .casestudy_result { margin-top:20px; } #casestudy .casestudy_result .casestudy_result__category { font-size:clamp(28px,7.4666vw,36px); } #casestudy .casestudy_result .casestudyt_result__txt { margin-top:calc(clamp(13px,3.4666vw,18px) * -1); } #casestudy .casestudy_result .casestudyt_result__txt > div { width:100%; padding:clamp(20px,5.33333vw,30px) 0; margin-top:clamp(10px,2.666vw,15px); } #casestudy .casestudy_result .casestudyt_result__txt > div:nth-of-type(1) { margin-top:0; } #casestudy .casestudy_result .casestudyt_result__txt p { font-size:clamp(15px,4.0vw,16px); } } } /*---------------------------------------------------- 事例一覧 ----------------------------------------------------*/ #casestudyArticle { position:relative; z-index:1000; } #casestudyArticle .casestudy_detail { text-align:center; background:#efefef; } #casestudyArticle .casestudy_detail h3 { font-weight:600; color:#088450; } #casestudyArticle .casestudyBox { width:100%; display:flex; flex-wrap:wrap; } #casestudyArticle .casestudyBox li { background:#fff; border-radius:10px; overflow:hidden; position:relative; border:1px solid #9f9f9f; box-sizing:border-box; } #casestudyArticle .casestudyBox li .casestudy_logoImg { width:100%; border-bottom:1px solid #d1d1d1; display:flex; align-items:center; justify-content:center; } #casestudyArticle .casestudyBox li .casestudy_logoImg img { max-width:100%; } #casestudyArticle .casestudyBox li .casestudy_companyTtl { color:#000; font-weight:bold; text-align:left; border-bottom:1px solid #d1d1d1; } #casestudyArticle .casestudyBox li .casestudy_companyTxt { text-align:right; } #casestudyArticle .casestudyBox li .casestudy_link { width:100%; color:#fff; font-weight:bold; background:#088450; text-align:center; position:absolute; bottom:0; left:0;} /*--リンク--*/ #casestudyArticle .casestudyBox li a { position:absolute; top:0; left:0; width:100%; height:100%; } #casestudyArticle .casestudyBox li:hover { transform:scale(1.03); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35); transition:0.3s ease-in-out; } #casestudyArticle .casestudyBox li:hover .casestudy_companyTtl { color:#005a37; transition:0.3s ease-in-out; } #casestudyArticle .casestudyBox li:hover .casestudy_link { background:#9f9f9f; transition:0.3s ease-in-out; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #casestudyArticle .casestudy_detail { margin-top:60px; padding:55px 40px; } #casestudyArticle .casestudy_detail h3 { font-size:30px; } #casestudyArticle .casestudyBox { margin-top:40px; } #casestudyArticle .casestudyBox li { width:calc(50% - 15px); margin-right:30px; margin-top:30px; padding:20px 25px 50px 25px; } #casestudyArticle .casestudyBox li:nth-child(1) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2n) { margin-right:0; } #casestudyArticle .casestudyBox li .casestudy_logoImg { padding-bottom:20px; } #casestudyArticle .casestudyBox li .casestudy_logoImg img { max-width:350px; } #casestudyArticle .casestudyBox li .casestudy_companyTtl { font-size:20px; line-height:1.6; padding:15px 10px; } #casestudyArticle .casestudyBox li .casestudy_companyTxt { font-size:16px; padding:15px 10px; } #casestudyArticle .casestudyBox li .casestudy_link { font-size:15px; padding:12px 0; } } @media screen and ( min-width:769px) and (max-width:1140px) { #casestudyArticle .casestudy_detail { margin-top:40px; padding:30px 30px 40px 30px; } #casestudyArticle .casestudy_detail h3 { font-size:25px; } #casestudyArticle .casestudyBox { margin-top:clamp(30px,3.9011vw,40px); } #casestudyArticle .casestudyBox li { width:calc(50% - clamp(10px,1.3003vw,15px)); margin-right:clamp(15px,1.9505vw,30px); margin-top:clamp(20px,2.6007vw,30px); padding:20px clamp(15px,1.9505vw,25px) 50px clamp(15px,1.9505vw,25px); } #casestudyArticle .casestudyBox li:nth-child(1) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2n) { margin-right:0; } #casestudyArticle .casestudyBox li .casestudy_logoImg { padding-bottom:20px; } #casestudyArticle .casestudyBox li .casestudy_logoImg img { max-width:350px; } #casestudyArticle .casestudyBox li .casestudy_companyTtl { font-size:clamp(16px,2.0806vw,20px); line-height:1.6; padding:15px clamp(5px,0.6501vw,10px); } #casestudyArticle .casestudyBox li .casestudy_companyTxt { font-size:clamp(14px,1.8205vw,18px); padding:15px clamp(5px,0.6501vw,10px); } #casestudyArticle .casestudyBox li .casestudy_link { font-size:clamp(13px,1.6905vw,15px); padding:12px 0; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #casestudyArticle .casestudy_detail { margin-top:clamp(30px,8.0vw,40px); padding:clamp(25px,6.6666vw,30px) clamp(25px,6.6666vw,30px) clamp(30px,8.0vw,40px) clamp(25px,6.6666vw,30px); } #casestudyArticle .casestudy_detail h3 { font-size:clamp(18px,4.8vw,25px); } @media screen and (min-width:601px) and ( max-width:768px) { #casestudyArticle .casestudyBox { margin-top:clamp(15px,4.0vw,30px); padding:0; box-sizing:border-box; } #casestudyArticle .casestudyBox li { width:calc(50% - clamp(10px,1.996vw,15px)); margin-right:clamp(20px,3.992vw,30px); margin-top:25px; padding:20px clamp(15px,2.994vw,25px) 50px clamp(15px,2.994vw,25px); } #casestudyArticle .casestudyBox li:nth-child(1) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2) { margin-top:0; } #casestudyArticle .casestudyBox li:nth-child(2n) { margin-right:0; } #casestudyArticle .casestudyBox li .casestudy_logoImg { padding:0 clamp(5px,0.998vw,10px) 20px clamp(5px,0.998vw,10px); box-sizing:border-box; } #casestudyArticle .casestudyBox li .casestudy_companyTtl { font-size:clamp(14px,2.7944vw,15px); padding:15px clamp(5px,0.998vw,10px); } #casestudyArticle .casestudyBox li .casestudy_companyTxt { font-size:clamp(12px,2.3952vw,13px); padding:15px clamp(5px,00.998vw,10px); } #casestudyArticle .casestudyBox li .casestudy_link { font-size:clamp(13px,2.5948vw,14px); padding:12px 0; } } @media screen and (max-width:600px) { #casestudyArticle .casestudyBox { margin-top:clamp(25px,4.1597vw,30px); padding:0; box-sizing:border-box; } #casestudyArticle .casestudyBox li { width:100%; margin-top:clamp(20px,5.3333vw,25px); padding:20px clamp(15px,4.0vw,25px) 50px clamp(15px,4.0vw,25px); } #casestudyArticle .casestudyBox li:nth-child(1) { margin-top:0; } #casestudyArticle .casestudyBox li .casestudy_logoImg { padding:0 clamp(10px,3.7333vw,20px) clamp(15px,4.0vw,20px) clamp(10px,2.6666vw,20px); box-sizing:border-box; } #casestudyArticle .casestudyBox li .casestudy_companyTtl { font-size:clamp(14px,3.4666vw,16px); padding:15px clamp(5px,1.3333vw,10px); } #casestudyArticle .casestudyBox li .casestudy_companyTxt { font-size:clamp(12px,3.2vw,14px); padding:15px clamp(5px,1.3333vw,10px); } #casestudyArticle .casestudyBox li .casestudy_link { font-size:clamp(13px,3.4666vw,15px); padding:clamp(10px,2.6666vw,12px) 0; } } } /*---------------------------------------------------- 事例詳細 ----------------------------------------------------*/ #casestudyDetail { position:relative; background:#fff; z-index:0; } #casestudyDetail .casestudyDetail_company { width:100%; } #casestudyDetail .casestudyDetail_company ul { width:100%; display:flex; flex-wrap:wrap; } #casestudyDetail .casestudyDetail_company ul li { display:flex; align-items:center; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg { box-sizing:border-box; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg img { max-width:100%; } #casestudyDetail .casestudyDetail_company .casestudy_company { border-left:1px solid #d1d1d1; box-sizing:border-box; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-weight:bold; color:#008350; } #casestudyDetail .casestudyDetail_company .casestudy_companyTxt { font-weight:normal; color:#000; font-size:70%; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question { width:100%; position:relative; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionIcon { color:#008350; font-weight:600; position:absolute; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { color:#008350; font-weight:600; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { width:100%; background:#f6f6f6; position:relative; box-sizing:border-box; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt span { font-weight:bold; color:#ba1b1b; } /*--768px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #casestudyDetail { padding-top:180px; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:30px; line-height:1.5; } #casestudyDetail .casestudyDetailBox { margin-top:50px; } #casestudyDetail .casestudyDetailBox__inner { margin-top:40px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:23px; padding-left:45px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:20px; padding:25px 45px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:16px; line-height:1.8; margin-top:15px; } } @media screen and ( min-width:769px) and (max-width:1140px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:clamp(25px,3.2509vw,30px); line-height:1.5; } #casestudyDetail .casestudyDetailBox { margin-top:clamp(40px,5.2015vw,50px); } #casestudyDetail .casestudyDetailBox__inner { margin-top:clamp(30px,3.9011vw,40px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:clamp(20px,2.6007vw,23px); padding-left:clamp(40px,5.2015vw,45px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:clamp(15px,1.9505vw,20px); padding:clamp(20px,2.6007vw,25px) clamp(35px,4.5513vw,45px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:clamp(15px,1.9505vw,16px); line-height:1.8; margin-top:15px; } } @media screen and ( min-width:901px) and (max-width:1140px) { #casestudyDetail { padding-top:clamp(140px,15.5382vw,180px); } } @media screen and ( min-width:769px) and (max-width:900px) { #casestudyDetail { padding-top:180px; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #casestudyDetail { padding-top:clamp(100px,26.6666vw,120px); } @media screen and (min-width:701px) and ( max-width:768px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:25px; line-height:1.5; } } @media screen and ( max-width:700px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:100%; justify-content:center; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg img { max-width:300px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:100%; margin-top:clamp(15px,4.0vw,20px); padding-top:clamp(15px,4.0vw,20px); border-left:none; border-top:1px solid #d1d1d1; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:clamp(21px,5.6vw,25px); line-height:1.5; } } #casestudyDetail .casestudyDetailBox { margin-top:clamp(30px,8.0vw,40px); } #casestudyDetail .casestudyDetailBox__inner { margin-top:clamp(20px,5.3333vw,30px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:clamp(16px,4.2666vw,20px); padding-left:clamp(20px,5.3333vw,40px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:clamp(10px,2.6666vw,15px); padding:clamp(15px,4.0vw,20px) clamp(20px,5.3333vw,35px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:clamp(13px,3.4666vw,15px); line-height:1.6; margin-top:clamp(10px,2.6666vw,15px); } } /*---------------------------------------------------- 事例詳細 ----------------------------------------------------*/ #casestudyDetail { position:relative; background:#fff; z-index:0; } #casestudyDetail .casestudyDetail_company { width:100%; } #casestudyDetail .casestudyDetail_company ul { width:100%; display:flex; flex-wrap:wrap; } #casestudyDetail .casestudyDetail_company ul li { display:flex; align-items:center; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg { box-sizing:border-box; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg img { max-width:100%; } #casestudyDetail .casestudyDetail_company .casestudy_company { border-left:1px solid #d1d1d1; box-sizing:border-box; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-weight:bold; color:#008350; } #casestudyDetail .casestudyDetail_company .casestudy_companyTxt { font-weight:normal; color:#000; font-size:70%; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question { width:100%; position:relative; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionIcon { color:#008350; font-weight:600; position:absolute; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { color:#008350; font-weight:600; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { width:100%; background:#f6f6f6; position:relative; box-sizing:border-box; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt span { font-weight:bold; color:#ba1b1b; } /*--768px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:30px; line-height:1.5; } #casestudyDetail .casestudyDetailBox { margin-top:50px; } #casestudyDetail .casestudyDetailBox__inner { margin-top:40px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:23px; padding-left:45px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:20px; padding:25px 45px; } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:16px; line-height:1.8; margin-top:15px; } } @media screen and ( min-width:769px) and (max-width:1140px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:clamp(25px,3.2509vw,30px); line-height:1.5; } #casestudyDetail .casestudyDetailBox { margin-top:clamp(40px,5.2015vw,50px); } #casestudyDetail .casestudyDetailBox__inner { margin-top:clamp(30px,3.9011vw,40px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:clamp(20px,2.6007vw,23px); padding-left:clamp(40px,5.2015vw,45px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:clamp(15px,1.9505vw,20px); padding:clamp(20px,2.6007vw,25px) clamp(35px,4.5513vw,45px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:clamp(15px,1.9505vw,16px); line-height:1.8; margin-top:15px; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { @media screen and (min-width:701px) and ( max-width:768px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:30%; padding-right:20px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:70%; padding-left:25px; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:25px; line-height:1.5; } } @media screen and ( max-width:700px) { #casestudyDetail .casestudyDetail_company .casestudy_logoImg { width:100%; justify-content:center; } #casestudyDetail .casestudyDetail_company .casestudy_logoImg img { max-width:300px; } #casestudyDetail .casestudyDetail_company .casestudy_company { width:100%; margin-top:clamp(15px,4.0vw,20px); padding-top:clamp(15px,4.0vw,20px); border-left:none; border-top:1px solid #d1d1d1; } #casestudyDetail .casestudyDetail_company .casestudy_companyTtl { font-size:clamp(21px,5.6vw,25px); line-height:1.5; } } #casestudyDetail .casestudyDetailBox { margin-top:clamp(30px,8.0vw,40px); } #casestudyDetail .casestudyDetailBox__inner { margin-top:clamp(20px,5.3333vw,30px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__question .casestudyDetailBox__questionTxt { font-size:clamp(16px,4.2666vw,20px); padding-left:clamp(20px,5.3333vw,40px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer { margin-top:clamp(10px,2.6666vw,15px); padding:clamp(15px,4.0vw,20px) clamp(20px,5.3333vw,35px); } #casestudyDetail .casestudyDetailBox .casestudyDetailBox__answer .casestudyDetailBox__answerTxt { font-size:clamp(13px,3.4666vw,15px); line-height:1.6; margin-top:clamp(10px,2.6666vw,15px); } } /*---------------------------------------------------- ご利用料金 ----------------------------------------------------*/ #price { background:#088450; position:relative; } #price .price_panel { display:flex; flex-wrap:wrap; justify-content:space-between; } #price .price_panel li { text-align:center; background:#fff; overflow:hidden; } #price .price_panel li h4 { font-weight:600; background:#d9efe6; } #price .price_panel li h5 { font-weight:600; } #price .price_panel li h5 span { color:#088450; } #price .price_compare { background:#fff; } #price .price_compare h4 { color:#088450; font-weight:600; text-align:center; } #price .price_compare h4 .txtMax { font-size:122%; } #price .price_compareTable { width:100%; text-align:center; border-collapse: collapse; border-spacing:0; color:#353535; /*table-layout:fixed;*/ } #price .price_compareTable th { background:#efefef; font-weight:500; text-align:center; vertical-align:middle; border:1px solid #fff; } #price .price_compareTable th:nth-child(1) { background-color:#fff; border:1px solid transparent; border-bottom-color:#efefef; color:#fff; } #price .price_compareTable th:nth-child(2) { background-color:#efefef; color:#000; } #price .price_compareTable th:nth-child(3) { background-color:#efefef; color:#000; } #price .price_compareTable th:nth-child(4) { background-color:#088450; color:#fff; } #price .price_compareTable .th_emphasis { font-weight:600; position:relative; border-left:3px solid #088450; border-right:3px solid #088450; } #price .price_compareTable .th_emphasis::before { content:""; position:absolute; top:-15px; left:-3px; width:calc(100% + 6px); height:100%; background:#088450; z-index:0; } #price .price_compareTable .th_emphasis p { position:relative; } #price .price_compareTable td { border:1px solid #dadada; background:#fff; font-weight:500; text-align:center; vertical-align:middle; } #price .price_compareTable .price_compare__ttl { border:1px solid #fff; background:#efefef; text-align:left!important; } #price .price_compareTable .td_emphasis { font-weight:600; border-bottom:1px solid #fff; border-left:3px solid #088450; border-right:3px solid #088450; background:#d9efe6; } #price .price_compareTable .td_emphasis__last { border-bottom:3px solid #088450; } /*--769px以上------------------------------------------------------*/ @media screen and ( min-width:1141px ) { #price .price_panel { margin-top:60px; } #price .price_panel li { width:32%; border-radius:15px; } #price .price_panel li h4 { font-size:24px; padding:20px 0; } #price .price_panel li h5 { font-size:25px; margin-left:0.7em; padding:25px 0; } #price .price_panel li h5 .txtMax { font-size:54px; } #price .price_panel li h5 br { display:none; } #price .price_compare { padding:55px 100px; margin-top:60px; } #price .price_compare h4 { font-size:22px; } #price .price_compareTable { margin-top:55px; font-size:14px; } #price .price_compareTable th { font-size:16px; padding:15px; } #price .price_compareTable .th_emphasis::before { border-radius:15px; } #price .price_compareTable .th_emphasis p { font-size:18px; margin-top:-15px; } #price .price_compareTable td { padding:15px 20px; } /*--サイズ--*/ #price .price_compareTable .price_compare__ttl { width:30%; } #price .price_compareTable .td_default { width:21%; } #price .price_compareTable .td_emphasis { width:28%; } } @media screen and ( min-width:769px) and (max-width:1140px) { #price .price_panel { margin-top:clamp(45px,5.8517vw,60px); } #price .price_panel li { width:32%; border-radius:15px; } #price .price_panel li h4 { font-size:clamp(19px,2.4707vw,24px); padding:clamp(15px,1.9505vw,20px) 0; } #price .price_panel li h5 { font-size:clamp(22px,2.8608vw,25px); padding:clamp(20px,2.6007vw,25px) 0; } #price .price_panel li h5 .txtMax { font-size:clamp(48px,6.2418vw,54px); } #price .price_compare { padding:clamp(35px,4.5513vw,55px) clamp(30px,6.8134vw,100px); margin-top:clamp(45px,5.8517vw,60px); } #price .price_compare h4 { font-size:clamp(20px,2.6007vw,22px); } #price .price_compareTable { margin-top:clamp(45px,5.8517vw,55px); font-size:clamp(13px,1.6905vw,14px); } #price .price_compareTable th { font-size:clamp(15px,1.9505vw,16px); padding:15px; } #price .price_compareTable .th_emphasis::before { border-radius:15px; } #price .price_compareTable .th_emphasis p { font-size:clamp(16px,2.0806vw,18px); margin-top:-15px; } #price .price_compareTable td { padding:15px clamp(15px,1.9505vw,20px); } /*--サイズ--*/ #price .price_compareTable .price_compare__ttl { width:28%; } #price .price_compareTable .td_default { width:22.0%; } #price .price_compareTable .td_emphasis { width:28%; } } /*--768px以下------------------------------------------------------*/ @media screen and ( max-width:768px) { #price .price_panel { margin-top:clamp(30px,8.0vw,45px); } @media screen and ( min-width:551px) and (max-width:768px) { #price .price_panel li { width:32%; border-radius:15px; } #price .price_panel li h4 { font-size:clamp(14px,2.5408vw,19px); padding:clamp(12px,2.1778vw,15px) 0; } #price .price_panel li h5 { font-size:clamp(16px,2.9038vw,22px); padding:clamp(12px,2.1778vw,20px) 0; } #price .price_panel li h5 .txtMax { font-size:clamp(32px,5.8076vw,48px); } } @media screen and (max-width:550px) { #price .price_panel li { width:48%; border-radius:15px; margin-bottom:15px; } #price .price_panel li:last-child { margin:0 26%; } #price .price_panel li h4 { font-size:clamp(14px,3.7333vw,16px); padding:12px 0; } #price .price_panel li h5 { font-size:clamp(16px,4.2666vw,18px); padding:12px 0; } #price .price_panel li h5 .txtMax { font-size:clamp(32px,8.5333vw,42px); } } #price .price_compare { padding:clamp(25px,6.6666vw,35px) clamp(10px,2.6666vw,30px); margin-top:clamp(30px,8.0vw,45px); } #price .price_compare h4 { font-size:clamp(16px,4.2666vw,20px); } #price .price_compareTable { margin-top:clamp(35px,9.3333vw,45px); font-size:clamp(11px,2.9333vw,13px); } #price .price_compareTable th { font-size:clamp(11px,2.9333vw,15px); padding:15px 10px; } #price .price_compareTable .th_emphasis::before { border-radius:15px; } #price .price_compareTable .th_emphasis p { font-size:clamp(12px,3.2vw,16px); margin-top:-15px; } #price .price_compareTable td { padding:clamp(10px,2.6666vw,15px); } /*--サイズ--*/ #price .price_compareTable .price_compare__ttl { width:28%; } #price .price_compareTable .td_default { width:22.0%; } #price .price_compareTable .td_emphasis { width:28%; } } /*---------------------------------------------------- page top link ----------------------------------------------------*/ #page_top { width:50px; height:50px; position:fixed; right:12px; bottom:15px; background:#fff; opacity:1.0; border-radius:50%; z-index:40; box-shadow:0px 0px 4px 4px rgba(0,0,0,.1); } #page_top a { position:relative; display:block; width:50px; height:50px; text-decoration:none; } #page_top a::before { font-family:'Font Awesome 5 Free'; font-weight:900; content:'\f102'; font-size:25px; color:#1e355f; position:absolute; width:25px; height:25px; top:-12px; bottom:0; right:0; left:0; margin:auto; text-align:center; } @media screen and (max-width:640px) { #page_top { width:36px; height:36px; right:10px; bottom:15px; } #page_top a { width:36px; height:36px; } #page_top a::before { font-size:20px; top:5px; } } @media screen and (max-width:480px) { #page_top { width:32px; height:32px; right:10px; bottom:15px; } #page_top a { width:32px; height:32px; } #page_top a::before { font-size:20px; top:-5px; } }