/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer ---------------------------------- Change Log ---------------------------------- -2021/11/10 Fixed all ====================================*/ /*==================================== 0. General ====================================*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@400;500;700&display=swap'); @keyframes fadeIn { 0% {opacity: 0; } 100% {opacity: 1; } } @-webkit-keyframes fadeIn { 0% {opacity: 0; } 100% {opacity: 1; } } html { font-size: 62.5%; } body { position: relative; background: #fff; color: #202020; font-size: 1.0rem; font-family: 'Noto Sans JP', sans-serif; line-height: 1.5; -webkit-animation: fadeIn 1s ease 0s 1 normal; animation: fadeIn 1s ease 0s 1 normal; } img { vertical-align: bottom; } a { color: #036EB8; text-decoration: underline; cursor: pointer; } a:hover { text-decoration: none; opacity: 0.8; } input:hover { opacity: 0.8; } ul, ol { list-style: none; } div.inner { position: relative; display: block; overflow: hidden; margin: 0 auto; width: 1000px; zoom: 1; } .spOnly { display: none !important; } #page-top { position: fixed; right: 20px; bottom: 20px; z-index: 100; } #page-top a { display: block; width: 60px; height: 60px; background: url(/common/img/icon_gototop.png) no-repeat 0 0; text-indent:-9999px; } #page-nav { position: fixed; top: 50%; right: 0; z-index: 100; margin-top: -180px; } #page-nav li:nth-child(1) a { display: block; width: 73px; height: 174px; background: url("/common/img/btn_request.png") no-repeat 0 0; text-indent:-9999px; } #page-nav li:nth-child(1) { margin-bottom: 12px; } #page-nav li:nth-child(2) a { display: block; width: 73px; height: 174px; background: url("/common/img/btn_contact.png") no-repeat 0 0; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; line-height: 1; } .l-header__lead { padding: 17px 0 14px; background: #f0f0f0; font-size: 1.4rem; } .l-header__lead p { line-height: 1.3; } .l-header__h1 { float: left; margin-right: 35px; padding: 15px 0; } .l-header__h2 { float: left; padding-top: 50px; } .l-header__tel { float: right; padding-top: 40px; } header nav { background-image: -moz-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); font-size: 1.8rem; } header nav > ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 1000px; } header nav > ul > li { position: relative; } header nav > ul > li:nth-child(1) { width: 370px; } header nav > ul > li:nth-child(2) { width: 210px; } header nav > ul > li:nth-child(3) { width: 250px; } header nav > ul > li:nth-child(4) { width: 170px; } header nav > ul > li > a { position: relative; display: block; padding: 24px 0 24px 57px; color: #fff; text-decoration: none; font-weight: 700; } header nav > ul > li > a:before { position: absolute; top: 50%; left: 26px; margin-top: -12px; width: 24px; height: 24px; background: url("/common/img/icon_nav_bottom.png"); content: ""; } header nav > ul > li.notDown > a:before { position: absolute; top: 50%; left: 26px; margin-top: -12px; width: 24px; height: 24px; background: url("/common/img/icon_nav_right.png"); content: ""; } header nav > ul > li ul.more { display: none; } header nav > ul > li:nth-child(1) ul.more { width: 480px; } header nav > ul > li:nth-child(2) ul.more { width: 400px; } header nav > ul > li:nth-child(3) ul.more { width: 380px; } header nav > ul > li:hover ul.more { position: absolute; left: 26px; display: block; padding: 15px 30px 30px; background-image: -moz-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); } ul.more li { padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,0.3); } ul.more a { position: relative; display: inline-block; padding-left: 25px; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.6rem; } ul.more a:before { position: absolute; top: 50%; left: 0; margin-top: -10px; width: 19px; height: 19px; background: url("/common/img/icon_nav_right.png") no-repeat 0 0 / 19px auto; content: ""; } header div.glossary { position: absolute; top: 17px; left: 50%; margin-left: 445px; font-size: 1.4rem; } header div.glossary a { position: relative; color: #202020; text-decoration: none; } header div.glossary a:before { position: absolute; top: 50%; left: -25px; margin-top: -10px; width: 20px; height: 20px; background: url("/common/img/icon_help.png") no-repeat 50% 50%; content: ""; } /*==================================== 2. Main ====================================*/ main { display: block; overflow: hidden; min-width: 1000px; background: #fff; font-size: 1.6rem; } div.topPage { background: url("/common/img/bg_tile.png"); } /*====== [MODULE] tytle style ======*/ .titleStyleH1 { padding: 15px; background: url("/common/img/bg_title.png") 50% 50% / cover; } .titleStyleH1 > span { display: block; padding: 45px 0 42px; border: 1px solid rgba(255,255,255,0.6); color: #fff; text-align: center; font-size: 4rem; } .titleStyleH1 span.fsS { font-size: 2rem; } .titleStyleH2 { margin: 40px 0 15px; padding-bottom: 13px; border-bottom: 3px solid #005685; vertical-align: middle; font-size: 2.4rem; line-height: 1; } .titleStyleH2 span { font-size: 1.8rem; } .titleStyleH2 em { display: inline-block; margin-left: 15px; padding: 5px 8px; vertical-align: middle; font-weight: normal; font-style: normal; font-size: 1.4rem; } .titleStyleH2 em.comp { background: #c00; color: #fff; font-weight: 700; } .titleStyleH3 { margin-top: 40px; font-weight: 700; font-size: 2rem; line-height: 1; } /*====== [MODULE] text style ======*/ small { font-size: 80% !important; } .taR { text-align: right !important; } .taC { text-align: center !important; } .taL { text-align: left !important; } .komeTxt { display: block; padding-left: 1em; text-indent: -1em; } .kanaTxt { display: block; padding-left: 1.5em; text-indent: -1.5em; } .komekakkoTxt { padding-left: 3em; text-indent: -3em; } .komeNumkakkoTxt { padding-left: 3.5em; text-indent: -3.5em; } .fwB { font-weight: 700; } /*====== [MODULE] list style ======*/ .list > li { position: relative; padding-left: 1em; } .list > li:before { position: absolute; top: 0; left: 0; content: "・"; } .numList { margin-left: 1.5em; list-style: decimal; } .komeList { list-style: none; } .komeList > li { padding-left: 1em; text-indent: -1em; } .komeNumList { list-style: none; } .komeNumList > li { padding-left: 3.5em; text-indent: -3.5em; } .kanaList > li { padding-left: 1.5em; text-indent: -1.5em; } .hiraganaList { margin-left: 1.5em; list-style: hiragana; } .romanList { margin-left: 1.5em; list-style: lower-roman; } .alphaList { margin-left: 1.5em; list-style: lower-alpha; } .maruNnumList { padding: 0; list-style: none; counter-reset: my-counter; } .maruNnumList > li { position: relative; padding-left: 1.4em; } .maruNnumList > li:before { position: absolute; top: 0.2em; left: 0; display: block; width: 1.2em; height: 1.2em; border: 1px solid #999; border-radius: 50%; color: #333; content: counter(my-counter); counter-increment: my-counter; text-align: center; font-size: 1.4rem; line-height: 1.2; } .etc { position: relative; margin-bottom: 1em; } .etc:after { position: absolute; right: 0; bottom: -1em; content: "等"; } /*====== [MODULE] table style ======*/ table { width: 100%; border-collapse: collapse; } table th, table td { border: 1px solid #ccc; } table td p, table td ul, table td ol { margin-top: 0 !important; margin-bottom: 0 !important; } table.plan th { background: #666666; color: #fff; } table.plan .fsSS { font-size: 1.2rem; } table.plan .fsS { font-size: 1.4rem; } table.plan .fsM { font-size: 1.6rem; } table.plan .gray { background: #e6e6e6; color: #202020; text-align: center; font-weight: 700; } table.plan .nostyle { background: none !important; color: #202020; font-weight: normal; } table .rl { margin: 0 auto; width: 1em; white-space: nowrap; line-height: 1em; writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; } table .economy { background: #05807c !important; color: #fff; vertical-align: top; font-weight: 700; } table .standard, table .basic { background: #143d91 !important; color: #fff; vertical-align: top; font-weight: 700; } table .premium, table .wide { background: #117fc7 !important; color: #fff; vertical-align: top; font-weight: 700; } table .itOption { background: #d77413 !important; color: #fff; vertical-align: top; font-weight: 700; } .txtEconomy { color: #05807c !important; } .txtStandard,.txtBasic { color: #143d91 !important; } .txtPremium,.txtWide { color: #117fc7 !important; } /*====== [MODULE] btn style ======*/ .btn { position: relative; display: block; border: 3px solid #dcdcdc; border-radius: 5px; background-image: -moz-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(0,115,177) 0%, rgb(3,83,123) 100%); color: #fff; text-align: center; text-decoration: none; font-weight: 700; line-height: 1; } .btn:before { position: absolute; top: 50%; margin-top: -12px; width: 24px; height: 24px; background: url("/common/img/icon_nav_right.png"); content: ""; } /*==================================== 3. Footer ====================================*/ footer { font-size: 1.4rem; line-height: 1; } footer a { color: #202020; } .l-foot_contact { padding: 30px 0 10px; min-width: 1000px; background: url("/common/img/bg_tile.png"); text-align: center; font-weight: 700; } .l-foot_contact p { margin-bottom: 20px; font-size: 2.4rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1.7; } .l-foot_contact p.top { color: #03496f; font-size: 3rem; } .l-foot_contact p.top em { border-bottom: 3px solid #ff6000; font-style: normal; } .l-foot_contact ul { display: -webkit-flex; display: flex; margin: 0 auto 30px; width: 960px; line-height: 1; } .l-foot_contact li { margin: 0 20px; width: 440px; } .l-foot_contact li a { display: block; padding: 33px 0; border-radius: 10px; color: #fff; text-decoration: none; font-size: 2.6rem; } .requestBtn { border: 3px solid #dcdcdc; background-image: -moz-linear-gradient( -90deg, rgb(245,121,20) 0%, rgb(239,75,24) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(245,121,20) 0%, rgb(239,75,24) 100%); background-image: -ms-linear-gradient( -90deg, rgb(245,121,20) 0%, rgb(239,75,24) 100%); } .requestBtn span { position: relative; display: inline-block; padding-left: 45px; } .requestBtn span:before { position: absolute; top: 50%; left: 0; margin-top: -25px; width: 39px; height: 50px; background: url("/common/img/icon_resume.png") no-repeat; content: ""; } .contactBtn { border: 3px solid #dcdcdc; background-image: -moz-linear-gradient( -90deg, rgb(50,158,65) 0%, rgb(14,101,26) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(50,158,65) 0%, rgb(14,101,26) 100%); background-image: -ms-linear-gradient( -90deg, rgb(50,158,65) 0%, rgb(14,101,26) 100%); } .contactBtn span { position: relative; display: inline-block; padding-left: 58px; } .contactBtn span:before { position: absolute; top: 50%; left: 0; margin-top: -18px; width: 51px; height: 36px; background: url("/common/img/icon_contact.png") no-repeat; content: ""; } .l-foot { padding: 40px 0; } .l-foot_right { float: right; width: 520px; } .l-foot_left { float: left; width: 440px; } .l-foot ul { display: block; overflow: hidden; margin-bottom: 20px; padding-top: 5px; } .l-foot ul li { float: left; margin: 0 22px 15px 0; } .l-foot ul a { padding-left: 20px; background: url("/common/img/icon_newopen.png") no-repeat 0 50%; } .l-foot p { line-height: 1.5; } .l-foot h1 { margin-bottom: 18px; font-size: 2.4rem; } .l-foot h1 em { display: block; margin-bottom: 5px; font-style: normal; font-size: 1.6rem; } .l-foot dl { margin-bottom: 25px; border-top: 1px solid #ccc; } .l-foot dt { float: left; padding-top: 12px; } .l-foot dd { padding: 12px 0 12px 130px; border-bottom: 1px solid #ccc; } .l-foot address { font-style: normal; } /*==================================== 4. Contents ====================================*/ /*--------------------- top ---------------------*/ .topBlock01 h1 { padding: 15px; background: url("/common/img/bg_top_title.png") 50% 50% / cover; } .topBlock01 span { display: block; padding: 195px 0 265px 145px; border: 1px solid rgba(255,255,255,0.6); color: #fff; font-size: 6rem; line-height: 1.3; } .topBlock02 { position: relative; z-index: 3; margin: -85px auto 0; padding: 15px; width: 1030px; background-image: -moz-linear-gradient( 0deg, rgb(210,210,210) 0%, rgb(246,246,246) 50%, rgb(210,210,210) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(210,210,210) 0%, rgb(246,246,246) 50%, rgb(210,210,210) 100%); background-image: -ms-linear-gradient( 0deg, rgb(210,210,210) 0%, rgb(246,246,246) 50%, rgb(210,210,210) 100%); } .topBlock02 div { padding: 35px 0; background-image: -moz-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -ms-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); } .topBlock02 h2 { color: #fff; text-align: center; font-size: 2.8rem; } .topBlock02 ol { display: -webkit-flex; display: flex; margin: 40px auto 25px; width: 950px; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .topBlock02 ol li { position: relative; margin-top: 1px; width: 316px; background-image: -moz-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -ms-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); } .topBlock02 ol li:nth-child(1), .topBlock02 ol li:nth-child(2), .topBlock02 ol li:nth-child(3) { padding-bottom: 20px; } .topBlock02 ol li:before { position: absolute; top: -25px; left: 50%; margin-left: -44px; width: 88px; height: 88px; content: ""; } .topBlock02 ol li:nth-child(1):before { background: url("/common/img/feature_img09.png") no-repeat; } .topBlock02 ol li:nth-child(2):before { background: url("/common/img/feature_img10.png") no-repeat; } .topBlock02 ol li:nth-child(3):before { background: url("/common/img/feature_img11.png") no-repeat; } .topBlock02 ol li:nth-child(4):before { background: url("/common/img/feature_img12.png") no-repeat; } .topBlock02 ol li:nth-child(5):before { background: url("/common/img/feature_img13.png") no-repeat; } .topBlock02 ol li:nth-child(6):before { background: url("/common/img/feature_img14.png") no-repeat; } .topBlock02 dl { margin: 18px; } .topBlock02 dt { margin-bottom: 10px; text-align: center; font-weight: 700; font-size: 2rem; } .topBlock02 dd { margin-top: 10px; font-size: 1.4rem; line-height: 1.6; } .topBlock02 ul { text-align: center; font-size: 1.8rem; } .topBlock02 ul li { display: inline-block; margin: 0 30px; } .topBlock02 ul a { position: relative; color: #fff; } .topBlock02 ul a:before { position: absolute; top: 50%; left: -25px; margin-top: -10px; width: 20px; height: 20px; background: url("/common/img/icon_nav_right.png") 0 0 / 20px auto; content: ""; } .topBlock02 .basicPlan { display: inline-block; margin: 0 2px; padding: 2px 0; width: 128px; background: #143d91; color: #fff; text-align: center; } .topBlock02 .widePlan { display: inline-block; margin: 0 2px; padding: 2px 0; width: 128px; background: #117fc7; color: #fff; text-align: center; } .topBlock03 { position: relative; z-index: 1; margin-top: -125px; padding: 125px 0 50px; background: #000 url("/common/img/bg_top_cyber.png") no-repeat 0 0 / 100% auto; } .topBlock03 h2 { margin: 50px 0 35px; color: #fff; text-align: center; font-size: 3.2rem; } .topBlock03 figure { margin-top: 35px; text-align: center; } .topBlock03 h3 { margin: 0 auto; padding: 15px 0; width: 1000px; color: #fff; text-align: center; font-size: 2.4rem; line-height: 1; } .topBlock03 h3.compensation { background: #0e6b33; } .topBlock03 h3.cost { background: #005685; } .topBlock03 ul { display: -webkit-flex; display: flex; margin: 0 auto; padding: 0 0 25px 40px; width: 1000px; background: #fff; flex-wrap: wrap; } .topBlock03 ul li { margin-right: 40px; padding: 18px 0; width: 440px; border-bottom: 1px solid #666; font-size: 2.2rem; line-height: 1; } .topBlock03 dl { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .topBlock03 p { margin-top: 10px; color: #fff; text-align: center; font-size: 1.4rem; } .topBlock03 .link { margin-top: 10px; text-align: center; font-size: 1.8rem; } .topBlock03 .link a { position: relative; color: #fff; } .topBlock03 .link a:before { position: absolute; top: 50%; left: -25px; margin-top: -10px; width: 20px; height: 20px; background: url("/common/img/icon_nav_right.png") 0 0 / 20px auto; content: ""; } /*--------------------- feature ---------------------*/ .featureBlock01 { display: block; overflow: hidden; padding: 0 0 45px; background: url("/common/img/bg_tile.png"); text-align: center; } .featureBlock01 h2 { margin: 55px 0 20px; font-size: 3rem; } .featureBlock01 em { border-bottom: 4px solid #ff6000; font-weight: 700; font-style: normal; font-size: 4.2rem; } .featureBlock01 ul { display: -webkit-flex; display: flex; margin: 0 auto 60px; width: 920px; text-align: left; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .featureBlock01 ul li { margin-top: 30px; padding: 15px 20px 30px; width: 440px; background: #fff; } .featureBlock01 ul dt { padding-bottom: 10px; border-bottom: 3px solid #005685; font-weight: 700; font-size: 1.8rem; } .featureBlock01 ul dt .fsL { font-size: 2.4rem; } .featureBlock01 ul dd { margin-top: 15px; } .featureBlock01 p { color: #025883; font-size: 2.4rem; } .featureBlock02 { position: relative; padding: 55px 0; background: url("/common/img/bg_top_cyber.png") no-repeat 50% 0% / cover; text-align: center; } .featureBlock02:before { position: absolute; top: -20px; left: 50%; margin-left: -34px; width: 0; height: 0; border-top: 62px solid #ff6000; border-right: 34px solid transparent; border-bottom: 1px solid transparent; border-left: 34px solid transparent; content: ""; } .featureBlock02 h2 { position: relative; margin: 0 auto 25px; width: 280px; color: #fff; font-size: 3rem; } .featureBlock02 h2:before { position: absolute; top: 20px; left: -320px; width: 320px; height: 1px; background: #fff; content: ""; } .featureBlock02 h2:after { position: absolute; top: 20px; right: -320px; width: 320px; height: 1px; background: #fff; content: ""; } .featureBlock02 > ul {display: -webkit-flex; display: flex; margin: 0 auto; width: 920px; -webkit-justify-content: space-between; justify-content: space-between; } .featureBlock02 > ul > li { position: relative; width: 440px; border: 5px solid #025883; border-radius: 10px; background: #fff; } .featureBlock02 > ul > li:after { position: absolute; right: 34px; bottom: 10px; color: #025883; content: "等"; font-weight: 700; font-size: 2rem; } .featureBlock02 dt { padding: 8px 0 13px; background: #025883; color: #fff; text-align: center; font-weight: 700; font-size: 2rem; } .featureBlock02 ul ul { display: -webkit-flex; display: flex; padding: 15px 34px 50px; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .featureBlock02 ul ul li { padding: 13px 0; width: 160px; border-bottom: 1px solid #025883; color: #025883; text-align: center; font-weight: 700; font-size: 2rem; line-height: 1; } .featureBlock02 ul ul li.last { margin-left: 202px; } .featureBlock02 p { padding-top: 50px; background: url("/common/img/parts_arrow.png") no-repeat 50% 10px; color: #fff; font-weight: 700; font-size: 3rem; } .featureBlock02 p em { font-style: normal; font-size: 5rem; } .featureBlock03 { margin: 30px auto 60px; width: 1000px; } .featureBlock03 h2 { margin: 35px 0 0; text-align: center; font-weight: normal; font-size: 2.8rem; line-height: 1.8; } .featureBlock03 figure { margin-top: 30px; } .featureBlock03 hr { margin-top: 40px; height: 1px; border-top: 1px solid #ccc; } .featureBlock03 ul { display: -webkit-flex; display: flex; margin-top: 30px; } .featureBlock03 li { width: 333px; } .featureBlock03 dt { color: #fff; text-align: center; font-weight: 700; font-size: 2.2rem; } .featureBlock03 dd { padding: 15px 22px; font-size: 1.8rem; } .featureBlock03 li:nth-child(1) { border: 5px solid #05807c; background: #d7fffe; } .featureBlock03 li:nth-child(2) { border: 5px solid #143d91; background: #ebf1fd; } .featureBlock03 li:nth-child(3) { border: 5px solid #117fc7; background: #dbeffc; } .featureBlock03 li:nth-child(1) dt { background: #05807c; } .featureBlock03 li:nth-child(2) dt { background: #143d91; } .featureBlock03 li:nth-child(3) dt { background: #117fc7; } .featureBlock03 li:nth-child(1) dd { color: #05807c; } .featureBlock03 li:nth-child(2) dd { color: #143d91; } .featureBlock03 li:nth-child(3) dd { color: #117fc7; } .featureBlock03 p { margin-top: 10px; } .featureBlock03 .link { margin-top: 30px; } .featureBlock03 .btn { margin: 0 auto; padding: 29px 0 29px 45px; width: 475px; font-size: 2.2rem; } .featureBlock03 .btn:before { left: 45px; } .featureBlock04 { padding: 35px 0 40px; background-image: -moz-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -ms-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); } .featureBlock04 h2 { color: #fff; text-align: center; font-size: 2.8rem; } .featureBlock04 ol { display: -webkit-flex; display: flex; margin: 40px auto 0; width: 950px; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .featureBlock04 li { position: relative; margin-top: 1px; width: 316px; background-image: -moz-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -ms-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); } .featureBlock04 li:nth-child(1), .featureBlock04 li:nth-child(2), .featureBlock04 li:nth-child(3) { padding-bottom: 20px; } .featureBlock04 li:before { position: absolute; top: -25px; left: 50%; margin-left: -44px; width: 88px; height: 88px; content: ""; } .featureBlock04 li:nth-child(1):before { background: url("/common/img/feature_img09.png") no-repeat; } .featureBlock04 li:nth-child(2):before { background: url("/common/img/feature_img10.png") no-repeat; } .featureBlock04 li:nth-child(3):before { background: url("/common/img/feature_img11.png") no-repeat; } .featureBlock04 li:nth-child(4):before { background: url("/common/img/feature_img12.png") no-repeat; } .featureBlock04 li:nth-child(5):before { background: url("/common/img/feature_img13.png") no-repeat; } .featureBlock04 ol li:nth-child(6):before { background: url("/common/img/feature_img14.png") no-repeat; } .featureBlock04 dl { margin: 18px; } .featureBlock04 dt { margin-bottom: 10px; text-align: center; font-weight: 700; font-size: 2rem; } .featureBlock04 dd { margin-top: 10px; font-size: 1.4rem; line-height: 1.6; } .featureBlock04 .basicPlan { display: inline-block; margin: 0 2px; padding: 2px 0; width: 128px; background: #143d91; color: #fff; text-align: center; } .featureBlock04 .widePlan { display: inline-block; margin: 0 2px; padding: 2px 0; width: 128px; background: #117fc7; color: #fff; text-align: center; } /*--------------------- compensation ---------------------*/ .compensationBlock01 { display: block; overflow: hidden; padding: 0 0 40px; background: url("/common/img/bg_tile.png"); text-align: center; } .compensationBlock01 h2 { margin: 50px 0 30px; font-size: 3rem; } .compensationBlock01 p { margin: 30px auto 0; width: 1000px; font-size: 1.8rem; } .compensationBlock01 p small { display: block; margin-top: 15px; text-align: left; font-size: 1.4rem; } .compensationBlock01 span { color: #d77413; } .compensationBlock01 figure { position: relative; margin: 60px auto 0; width: 1000px; } .compensationBlock01 figcaption { position: absolute; right: 20px; bottom: 70px; font-size: 1.4rem; } .compensationBlock01 figcaption a { display: inline-block; padding-left: 16px; background: url("/common/img/icon_arrrow.png") no-repeat 0 50%; color: #fff; } .compensationBlock01 .link { margin-top: 20px; } .compensationBlock01 .btn { margin: 0 auto; padding: 29px 0 29px 45px; width: 475px; font-size: 2.2rem; } .compensationBlock01 .btn:before { left: 45px; } .compensationOption { margin: 30px auto; padding: 25px 40px 40px; width: 1000px; background: #fff; } .compensationOption h2 { margin: 0 0 30px; text-align: center; font-size: 2.6rem !important; } .compensationOption p { font-size: 1.8rem; } .compensationOption2 { margin: 30px auto; padding-bottom: 30px; width: 1000px; background: #fff1e4; } .compensationOption2 h2 { padding: 10px 0; background: #d77413; color: #fff; text-align: center; font-size: 1.8rem; } .compensationOption2 figure { text-align: center; } .compensationOption2 figcaption { margin: 20px 40px 0; text-align: left; } .compensationBlock02 { margin: 60px auto 0; padding-bottom: 60px; width: 1000px; border-bottom: 1px solid #ccc; } .compensationBlock02 h1 { margin-top: 50px; text-align: center; font-size: 3rem; } .compensationBlock02 p { margin: 20px auto 0; } .compensationBlock02 p.subTxt { margin: 1em auto; font-size: 1.8rem; } .compensationBlock02 p + .komeList { margin-top: 20px; } .compensationBlock02 table { margin-top: 40px; } .compensationBlock02 figure { margin-top: 40px; } .compensationBlock02 caption { margin-bottom: 20px; text-align: center; font-weight: 700; font-size: 2rem; line-height: 1; } .compensationBlock02 th { padding: 8px 4px; } .compensationBlock02 td { padding: 8px 10px; font-size: 1.4rem; } .compensationBlock02 small { font-size: 1.4rem; } .compensationBlock02 ul { margin-bottom: 1em; } .compensationBlock02 ul.anchor { margin: 25px 0; text-align: center; } .compensationBlock02 ul.anchor li { display: inline-block; margin: 0 30px; } .compensationBlock02 ul.anchor a { position: relative; display: inline-block; color: #202020; } .compensationBlock02 ul.anchor a:before { position: absolute; top: 50%; left: -20px; margin-top: -5px; width: 10px; height: 10px; background: url("/common/img/icon_arrrow.png") no-repeat 50% 50%; content: "";; } .compensationBlock02 dl.flL { float: left; width: 215px; } .compensationBlock02 dl.border { margin-right: 8px; padding-right: 8px; border-right: 1px solid #ddd; } .compensationBlock02 td small { font-size: 1.2rem; } .compensationBlock02 .link { margin-top: 20px; } .compensationBlock02 .btn { margin: 0 auto; padding: 29px 0 29px 45px; width: 475px; font-size: 2.2rem; } .compensationBlock02 .btn:before { left: 45px; } .compensationBlock03 { margin: 40px auto 80px; width: 1000px; font-size: 1.4rem; } .compensationBlock03 h2 { margin-bottom: 30px; text-align: center; font-size: 3rem; line-height: 1; } .compensationBlock03 h3 { margin: 30px 0 20px; padding-bottom: 13px; border-bottom: 1px solid #005685; font-size: 2rem; line-height: 1; } .compensationBlock03 h4 { margin-top: 10px; font-size: 1.4rem; } .compensationBlock03 p small { display: block; margin-top: 30px; font-size: 1.2rem; } .compensationBlock03 p, .compensationBlock03 ul, .compensationBlock03 ol { line-height: 1.6; } /*--------------------- terms ---------------------*/ .termsBlock { margin: 0 auto 60px; width: 1000px; } .termsBlock h2 { margin-bottom: 20px; } .termsBlock ul, .termsBlock ol, .termsBlock p, .termsBlock table { margin: 0 0 10px; } .termsBlock th { padding: 8px 4px; } .termsBlock td { padding: 8px 10px; font-size: 1.4rem; } .termsBlock p small { display: block; margin-top: -10px; font-size: 1.4rem; } /*--------------------- service ---------------------*/ .serviceBlock { display: block; overflow: hidden; padding: 0 0 40px; background: url("/common/img/bg_tile.png"); text-align: center; } .serviceBlock h2 { margin: 50px 0 30px; font-size: 3rem; } .serviceBlock p { margin: 30px 0 0; font-size: 1.8rem; } .serviceListBlock { padding: 40px 0; background-image: -moz-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -ms-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); } .serviceListBlock ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 950px; -webkit-justify-content: space-between; justify-content: space-between; } .serviceListBlock li { position: relative; width: 316px; background-image: -moz-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); background-image: -ms-linear-gradient( 0deg, rgb(230,230,230) 0%, rgb(255,255,255) 50%, rgb(230,230,230) 100%); } .serviceListBlock dl { margin: 18px 18px 0; padding-bottom: 95px; } .serviceListBlock dt { margin-bottom: 10px; text-align: center; font-weight: 700; font-size: 2rem; } .serviceListBlock dd { font-size: 1.4rem; line-height: 1.6;} .serviceListBlock dd.link { position: absolute; bottom: 25px; left: 20px; width: 276px; } .serviceListBlock .btn { padding: 15px 0 15px 25px; font-size: 1.6rem; } .serviceListBlock .btn:before { position: absolute; top: 50%; left: 71px; margin-top: -9px; width: 17px; height: 17px; background: url("/common/img/icon_nav_right.png") 0 0 / 17px 17px; content: ""; } .serviceInfoBlock { display: block; overflow: hidden; margin: 0 auto 40px; width: 1000px; font-size: 1.8rem; } .serviceInfoBlock h2 { margin-bottom: 30px; } .serviceInfoBlock figure { float: left; margin-top: 30px; } .serviceInfoBlock p { margin: 30px 0 0; } .serviceInfoBlock p.txtR { margin-left: 520px; } .serviceInfoBlock ul.komeList { margin: 15px 0 0 520px; font-size: 1.4rem; } .serviceFlowBlock { display: block; overflow: hidden; margin: 0 auto 40px; padding: 25px 40px 40px; width: 1000px; background: #f6f6f6; } .serviceFlowBlock h2 { margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid #005685; text-align: center; font-size: 2rem; line-height: 1; } .serviceFlowBlock figure { display: block; text-align: center; } .serviceFlowBlock ol.numList { margin: -15px 0 15px; padding: 0; list-style: none; counter-reset: my-counter; } .serviceFlowBlock ol.numList li { position: relative; padding: 15px 0 15px 35px; border-bottom: 1px solid #ccc; } .serviceFlowBlock ol.numList li:before { display: block; float: left; margin-bottom: 20px; margin-left: -35px; width: 25px; height: 25px; border-radius: 50%; background: #005685; color: #fff; content: counter(my-counter); counter-increment: my-counter; text-align: center; text-indent: -0.15em; font-style: italic; font-size: 1.8rem; font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; line-height: 1.5; } .serviceFlowBlock div.sample { display: block; overflow: hidden; margin-top: 30px; padding: 30px 40px; background: #fff; } .serviceFlowBlock div.sample dl { float: right; width: 400px; } .serviceFlowBlock div.sample dt { margin-bottom: 15px; font-weight: 700; } .serviceFlowBlock div.sample dd { margin-top: 10px; font-size: 1.4rem; } .serviceFlowBlock div.sample dd.mail { padding: 10px 15px; border: 1px solid #ccc; } .serviceFlowBlock div.sample em { color: #c00; font-style: normal; } .serviceFlowBlock div.sample figure { float: left; width: 400px; } .serviceFlowBlock div.sample figcaption { margin-bottom: 15px; text-align: left; font-weight: 700; } .serviceFlowBlock ul.squareList { display: -webkit-flex; display: flex; margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #ccc; } .serviceFlowBlock ul.squareList li { margin-right: 30px; } .serviceFlowBlock ul.squareList li:before { color: #005685; content: "■"; } .serviceFlowBlock ul.komeList { font-size: 1.4rem; } .serviceFlowBlock small { font-size: 1.4rem; } .serviceFlowBlock .flL600 { float: left; width: 600px; } .serviceFlowBlock .flR { float: right; } .serviceFlowBlock .flR figcaption { margin-bottom: 10px; font-weight: 700; font-size: 1.4rem; } .serviceFlowBlock hr { margin: 10px 0; height: 1px; border: none; border-top: 1px solid #ccc; } /*--------------------- urgent ---------------------*/ .urgentBlock01 { display: block; overflow: hidden; padding: 0 0 60px; background: url("/common/img/bg_tile.png"); text-align: center; } .urgentBlock01 h2 { margin: 50px 0 30px; font-weight: normal; font-size: 2.8rem; line-height: 1.8; } .urgentBlock01 figure.graph { display: block; margin: 0 auto; padding: 55px 0 30px; width: 1000px; border: 2px solid #025883; background: #fff; } .urgentBlock01 figcaption { margin-top: 20px; } .urgentBlock01 p { margin: 0 auto; width: 1000px; font-size: 1.8rem; line-height: 1.7; } .urgentBlock01 h3 { margin-top: 35px; font-size: 3rem; } .urgentBlock01 ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 920px; text-align: left; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .urgentBlock01 ul li { margin-top: 30px; padding: 15px 20px 30px; width: 440px; background: #fff; } .urgentBlock01 ul dt { padding-bottom: 10px; border-bottom: 3px solid #005685; font-weight: 700; font-size: 1.8rem; } .urgentBlock01 ul dt .fsL { font-size: 2.4rem; } .urgentBlock01 ul dd { margin-top: 15px; } .urgentBlock02 { position: relative; padding: 55px 0; background: url("/common/img/bg_top_cyber.png") no-repeat 50% -100px / cover; text-align: center; } .urgentBlock02:before { position: absolute; top: -20px; left: 50%; margin-left: -34px; width: 0; height: 0; border-top: 62px solid #ff6000; border-right: 34px solid transparent; border-bottom: 1px solid transparent; border-left: 34px solid transparent; content: ""; } .urgentBlock02 h2 { margin: 0 0 25px; color: #fff; font-weight: normal; font-size: 2.8rem; line-height: 1.8; } .urgentBlock02 h2 em { color: #ff6000; font-style: normal; } .urgentBlock02 ul { display: -webkit-flex; display: flex; margin: 0 auto 40px; padding: 30px 0 40px 40px; width: 1000px; background: #fff; } .urgentBlock02 li { margin-right: 40px; padding-bottom: 15px; width: 200px; border-bottom: 2px solid #ff6000; color: #025883; font-weight: 700; font-size: 2.2rem; line-height: 1; } .urgentBlock02 .btn { margin: 0 auto; padding: 29px 0 29px 45px; width: 522px; font-size: 2.2rem; } .urgentBlock02 .btn:before { left: 45px; } /*--------------------- example ---------------------*/ .exampleBlock { margin: 0 auto 25px; padding-bottom: 40px; width: 1000px; border-bottom: 1px solid #ccc; } .exampleBlock p { margin-top: 30px; } .exampleBlock ul { display: -webkit-flex; display: flex; flex-wrap: wrap; } .exampleBlock li { width: 480px; } .exampleBlock li:nth-child(odd) { margin-right: 40px; } .exampleBlock dt { margin-top: 25px; } .exampleBlock dd { margin-top: 25px; } .exampleFeeBlock { margin: 0 auto 65px; width: 1000px; } .exampleFeeBlock dt { margin-top: 20px; padding: 30px 40px; background: #f0f0f0; font-size: 1.8rem; } .exampleFeeBlock dt em { color: #c00; font-weight: 700; font-style: normal; } .exampleFeeBlock dd { margin-top: 20px; } .exampleFeeBlock table { font-size: 1.8rem; } .exampleFeeBlock table caption { margin-bottom: 10px; text-align: left; font-weight: 700; font-size: 2rem; } .exampleFeeBlock table caption:before { color: #005685; content: "■"; } .exampleFeeBlock th, .exampleFeeBlock td { padding: 10px 5px; border-width: 0 0 1px; } .exampleFeeBlock th { text-align: left; font-weight: normal; } .exampleFeeBlock tr:last-child th, .exampleFeeBlock tr:last-child td { border-width: 2px 0 0; border-color: #666; font-weight: 700; } .exampleFeeBlock tr:last-child td { color: #c00; } .exampleFeeBlock small { display: block; margin: 10px 0 40px; font-size: 1.4rem; } .exampleFeeBlock p.judgment { margin-top: 25px; padding: 40px; border: 3px solid #c00; text-align: center; font-weight: 700; font-size: 2.4rem; } .exampleFeeBlock p.judgment em { color: #c00; font-style: normal; } .exampleFeeBlock p.notice { margin-top: 25px; text-align: center; } /*--------------------- riskmanagement ---------------------*/ .riskBlock01 { padding: 50px 0 60px; background: url("/common/img/bg_tile.png"); text-align: center; } .riskBlock01 h2 { margin-bottom: 50px; font-weight: normal; font-size: 2.8rem; line-height: 1.8; } .riskBlock02 { padding: 50px 0; background-image: -moz-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -webkit-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); background-image: -ms-linear-gradient( 0deg, rgb(0,62,96) 0%, rgb(2,96,147) 50%, rgb(0,62,96) 100%); color: #ccc; text-align: center; } .riskBlock02 p { margin-bottom: 35px; font-weight: 700; font-size: 1.8rem; line-height: 1.7; } .riskBlock02 em { font-style: normal; font-size: 2.4rem; } .riskBlock02 span { background: linear-gradient(transparent 90%, #ff6000 90%); font-size: 4.2rem; line-height: 2; } /*--------------------- fee ---------------------*/ .feeCaseBlock { margin: 25px auto; padding: 30px 40px; width: 1000px; background: #f6f6f6; } .feeCaseBlock h2{ text-align: center; font-size: 2.4rem; } .feeCaseBlock dl { margin-top: 30px; } .feeCaseBlock dt { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #005685; font-weight: 700; font-size: 2rem; line-height: 1; } .feeCaseBlock li { font-size: 1.8rem; } .feeCaseBlock li:before { color: #005685; content: "■"; } .feeBlock { margin: 0 auto 80px; width: 1000px; } .feeBlock h1 { position: relative; padding-top: 55px; text-align: center; font-weight: normal; font-size: 2.8rem; } .feeBlock h1:before { position: absolute; top: 0; left: 50%; margin-left: -20px; width: 0; height: 0; border-top: 35px solid #005685; border-right: 20px solid transparent; border-bottom: 1px solid transparent; border-left: 20px solid transparent; content: ""; } .feeBlock table { margin-top: 15px; } .feeBlock table caption { margin-bottom: 10px; text-align: left; font-weight: 700; font-size: 1.6rem; } .feeBlock th, .feeBlock td { padding: 8px; } .feeBlock th[scope="row"] { background: #eee; font-weight: normal; } .feeBlock td { width: 240px; text-align: center; } .feeBlock p small { display: block; margin-top: 50px; font-size: 1.6rem; } /*--------------------- glossary ---------------------*/ .glossaryBlock { margin: 0 auto 80px; width: 1000px; } .glossaryBlock p { margin-top: 17px; line-height: 1.6; } /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin: 80px auto; width: 1000px; } .sitepolicyBlock p { margin-top: 17px; line-height: 1.6; } /*--------------------- contact ---------------------*/ .formBlock { margin: 0 auto 60px; width: 1000px; } .formBlock em.required { display: inline-block; padding: 3px 6px; background: #ca3131; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock em.optional { display: inline-block; padding: 3px 6px; background: #0d58a6; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock h2 { margin-bottom: 20px; } .formBlock h3 { margin-top: 40px; margin-bottom: 10px; } .formBlock h3 em { margin-right: 10px; } .formBlock p { margin-bottom: 1.5em; } .formBlock .btnBlock { margin-top: 50px; text-align: center; } .formBlock .btn { display: inline-block; margin: 0 10px; padding: 29px 0 29px 45px; width: 350px; font-size: 2.2rem; } .formBlock .btn:before { left: 75px; } .formBlock small { display: block; font-weight: normal; font-size: 1.2rem; } .formType01 { margin-bottom: 20px; border-collapse: collapse; } .formType01 th { padding: 10px 20px; border: 1px solid #ccc; background: #f0f0f0; text-align: left; } .formType01 th em { margin-right: 10px; } .formType01 td { padding: 10px 20px; border: 1px solid #ccc; } .formType01 td input[type=text], .formType01 td input[type=email], .formType01 td input[type=tel] { padding: 5px; width: 470px; border: 1px solid #ccc; } .formType01 td textarea { padding: 5px; width: 700px; height: 160px; border: 1px solid #ccc; } .formType01 label { display: inline-block; margin-right: 25px; } .formType01 input[type=radio], .formType01 input[type=checkbox] { margin-right: 5px; } .formType02 { margin: 25px 0; border-collapse: collapse; } .formType02 th { padding: 10px 20px; border: 1px solid #ccc; background: #f0f0f0; text-align: left; } .formType02 td { padding: 10px 15px; border: 1px solid #ccc; } .formType02 td input[type=text] { margin: 0 5px; padding: 3px 5px; width: 70px; border: 1px solid #ccc; } .formType03 { margin: 25px 0; border-collapse: collapse; font-size: 1.4rem; } .formType03 th { padding: 6px 20px; border: 1px solid #ccc; background: #f0f0f0; } .formType03 td { padding: 6px 40px; border: 1px solid #ccc; } .formType04 { margin-bottom: 20px; border-collapse: collapse; } .formType04 th { padding: 10px 20px; border: 1px solid #ccc; text-align: left; } .formType04 th[colspan] { background: #ccc; } .formType04 th.num { background: #f0f0f0; } .formType04 th em { margin-right: 10px; } .formType04 td { padding: 10px 0 10px 30px; border: 1px solid #ccc; font-size: 1.4rem; } .formType04 td[colspan] { padding: 10px 5px 10px 20px; } .formType04 label { display: inline-block; margin-right: 25px; } .formType04 input[type=radio], .formType04 input[type=checkbox] { margin-right: 5px; } .formDoneBlock { margin: 60px auto 80px; padding: 40px 0 20px; width: 1000px; background: #f0f0f0; text-align: center; } .formDoneBlock p { margin-bottom: 1.5em; line-height: 1.6; } /*--------------------- telework ---------------------*/ .teleworkBlock01 { display: block; overflow: hidden; padding: 0 0 45px; background: url("/common/img/bg_tile.png"); text-align: center; } .teleworkBlock01 h2 { margin: 55px 0 25px; font-size: 3rem; line-height: 1.8; } .teleworkBlock01 p { margin-top: 23px; color: #025883; font-size: 2.4rem; line-height: 1.8; } .teleworkBlock01 em { border-bottom: 4px solid #ff6000; font-weight: 700; font-style: normal; font-size: 4.2rem; } .teleworkBlock01 h3 { margin-top: 35px; font-size: 3rem; } .teleworkBlock01 ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 920px; text-align: left; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .teleworkBlock01 ul li { margin-top: 30px; padding: 15px 20px 30px; width: 440px; background: #fff; } .teleworkBlock01 ul dt { padding-bottom: 10px; border-bottom: 3px solid #005685; font-weight: 700; font-size: 1.8rem; } .teleworkBlock01 ul dt .fsL { font-size: 2.4rem; } .teleworkBlock01 ul dd { margin-top: 15px; } .teleworkBlock02 { margin: 60px auto 80px; width: 1000px; font-size: 1.8rem; } .teleworkBlock02 h2 { margin-bottom: 25px; text-align: center; font-size: 3rem; line-height: 1.8; } .teleworkBlock02 h3 { margin: -15px 100px 20px; background: #fff; text-align: center; font-size: 2rem; } .teleworkBlock02 h4 { margin: 0 60px 20px; padding: 6px 0; text-align: center; font-size: 1.8rem; } .teleworkBlock02 h4.typeBlue { border: 2px solid #036eb6; color: #036eb6; } .teleworkBlock02 h4.typeRed { border: 2px solid #e40012; color: #e40012; } .teleworkBlock02 .flex { position: relative; display: -webkit-flex; display: flex; margin: 60px 0 40px; -webkit-justify-content: space-between; justify-content: space-between; } .teleworkBlock02 .flex:before { position: absolute; top: 50%; right: 50%; bottom: 50%; left: 50%; margin: auto auto auto -20px; width: 0; height: 0; border-top: 54px solid transparent; border-right: 1px solid transparent; border-bottom: 54px solid transparent; border-left: 48px solid #005685; content: ""; } .teleworkBlock02 .flex > div { padding: 0 40px 40px; width: 460px; border: 1px solid #9d9d9e; } .teleworkBlock02 .flex p { font-size: 1.6rem; } .teleworkBlock02 .link { margin-top: 30px; } .teleworkBlock02 .btn { margin: 0 auto; padding: 29px 0 29px 45px; width: 475px; font-size: 2.2rem; } .teleworkBlock02 .btn:before { left: 45px; } .teleworkBlock03 { margin: 60px auto 40px; width: 1000px; font-size: 1.8rem; } .teleworkBlock03 h2 { margin-bottom: 25px; text-align: center; font-size: 3rem; line-height: 1.8; } .teleworkBlock03 .flex { display: -webkit-flex; display: flex; margin: 60px 0 40px; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .teleworkBlock03 .flex > div { margin-bottom: 40px; padding: 40px; width: 480px; background: #f6f6f6; } .teleworkBlock03 h4 { margin: 0 0 15px; padding-bottom: 13px; height: 4em; border-bottom: 1px solid #005685; vertical-align: middle; text-align: center; font-size: 1.8rem; } .teleworkBlock03 p { font-size: 1.6rem; } .teleworkBlock03 .result { margin-top: 20px; padding: 8px 0; border: 2px solid #e40012; text-align: center; font-weight: 700; font-size: 2.2rem; } .teleworkBlock03 .fcRed { color: #e40012; } .teleworkBlock03 .fcBlue { color: #005685; font-size: 2.4rem; } .teleworkBlock03 .flex > div:nth-child(5) { position: relative; margin: 50px auto 40px; width: 740px; } .teleworkBlock03 .flex > div:nth-child(5):before { position: absolute; top: -46px; right: 0; left: 0; margin: auto; width: 50px; height: 3px; background: #005685; content: ""; } .teleworkBlock03 .flex > div:nth-child(5):after { position: absolute; top: -70px; right: 0; left: 0; margin: auto; width: 3px; height: 50px; background: #005685; content: ""; }