/*==================================== ---------------------------------- 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%; -webkit-text-size-adjust: 100%; } body { position: relative; color: #231815; 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 { max-width: 100%; height: auto; vertical-align: bottom; } a { color: #036EB8; text-decoration: underline; } a:hover { text-decoration: underline; opacity: 0.8; } ul, ol { list-style: none; } .pcOnly { display: none !important; } #page-top { position: fixed; right: 2vw; bottom: 2vw; z-index: 100; } #page-top a { display: block; width: 10vw; height: 10vw; background: url(/common/img/icon_gototop.png) no-repeat 0 0 / 10vw auto; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; height: 17vw; } .l-header__lead { display: none; } .l-header__h1 { float: left; margin: 2vw 0 0 4.6vw; width: 26vw; } .l-header__h2 { float: left; margin: 4vw 0 0 3vw; width: 30vw; } #panel-btn { position: absolute; top: 2vw; right: 3vw; z-index: 2000; display: inline-block; padding: 3.7vw; width: 12.5vw; height: 12.5vw; border-radius: 1.5vw; background: #003e60; text-indent: -9999px; } #panel-btn.cls { background: #ffffff; } #panel-btn-icon { position: absolute; top: 50%; left: 50%; display: block; margin: -0.3vw 0 0 -2.1vw; width: 4.2vw; height: 2px; background: #ffffff; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after { position: absolute; top: 50%; left: 0; display: block; width: 4.2vw; height: 2px; background: #ffffff; content: ""; transition: .3s; } #panel-btn-icon:before { margin-top: -6px; } #panel-btn-icon:after { margin-top: 4px; } #panel-btn .close { background: transparent; } #panel-btn .close:before, #panel-btn .close:after { margin-top: 0; } #panel-btn .close:before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #panel-btn .close:after { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .gnav { position: absolute; top: 17vw; z-index: 1000; display: none; width: 100%; 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%); box-shadow: 0 0 5px rgba(0,0,0,0.5); } .gnav nav > ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid #fff; font-size: 3.6vw; } .gnav nav > ul > li > a { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3vw 5vw 3vw 10vw; color: #fff; vertical-align: middle; text-decoration: none; } .gnav nav > ul > li > a:before { position: absolute; top: 50%; left: 3vw; margin-top: -2.5vw; width: 5vw; height: 5vw; background: url("/common/img/icon_nav_right.png") no-repeat 0 0 / 5vw auto; content: ""; } .gnav nav > ul > li ul.more { display: block !important; } ul.more > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid #fff; font-size: 3.2vw; } ul.more > li > a { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3vw 5vw 3vw 15vw; color: #fff; vertical-align: middle; text-decoration: none; } ul.more > li > a:before { position: absolute; top: 50%; left: 10vw; margin-top: -5px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 8px solid #fff; content: ""; } .gnav address { padding: 3vw; background: #fff; text-align: center; } .gnav div.glossary a { position: relative; display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3vw 5vw 3vw 11vw; color: #fff; vertical-align: middle; text-decoration: none; font-size: 3.6vw; } .gnav div.glossary a:before { position: absolute; top: 50%; left: 4vw; margin-top: -2.5vw; width: 5vw; height: 5vw; background: url("/common/img/icon_help.png") no-repeat 0 0 / 5vw auto; content: ""; } header ol { display: flex; border-top: 1px solid #fff; } header ol li { width: 50vw; text-align: center; font-size: 3.6vw; } header ol li a { display: block; padding: 3vw 2vw; color: #fff; } header .requestBtn { 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%); } header .requestBtn span { position: relative; display: inline-block; padding-left: 5vw; } header .requestBtn span:before { position: absolute; top: 50%; left: 0; margin-top: -2.5vw; width: 5vw; height: 5vw; background: url("/common/img/icon_resume.png") no-repeat 50% 50% / 5vw auto; content: ""; } header .contactBtn { 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%); } header .contactBtn span { position: relative; display: inline-block; padding-left: 10vw; } header .contactBtn span:before { position: absolute; top: 50%; left: 2vw; margin-top: -3.5vw; width: 6vw; height: 6vw; background: url("/common/img/icon_contact.png") no-repeat 50% 50% / 6vw auto; content: "";; } /*==================================== 2. Main ====================================*/ main { font-size: 3.6vw; line-height: 1.4; } div.topPage { background: url("/common/img/bg_tile.png") 0 0 / 100% auto; } /*====== [MODULE] tytle style ======*/ .titleStyleH1 { padding: 2vw; background: url("/common/img/bg_title.png") 50% 50% / cover; } .titleStyleH1 > span { display: block; padding: 4vw 0; border: 1px solid rgba(255,255,255,0.6); color: #fff; text-align: center; font-size: 6vw; } .titleStyleH1 span.fsS { font-size: 4vw; } .titleStyleH2 { margin: 5vw 0 3vw; padding-bottom: 2vw; border-bottom: 2px solid #005685; vertical-align: middle; letter-spacing: -0.04em; font-size: 4vw; line-height: 1; } .titleStyleH2 span { font-size: 3.6vw; } .titleStyleH2 em { display: inline-block; margin-left: 1vw; padding: 1.5vw 1vw; vertical-align: middle; font-weight: normal; font-style: normal; font-size: 3vw; } .titleStyleH2 em.comp { background: #c00; color: #fff; font-weight: bold; } .titleStyleH2 em.economy,.titleStyleH2 em.standard,.titleStyleH2 em.premium { letter-spacing: -0.2em; } .titleStyleH3 { margin-top: 5vw; font-weight: 700; font-size: 5vw; 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; } .fwB { font-weight: 700; } /*====== [MODULE] list style ======*/ .list { margin-left: 1.5em; list-style: disc; } .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 { font-size: 2.6vw; } table.plan th { background: #666666; color: #fff; } table.plan .gray { background: #e6e6e6; color: #202020; text-align: center; font-weight: bold; } 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: bold; line-height: 1; } .btn:before { position: absolute; top: 50%; margin-top: -2vw; width: 4vw; height: 4vw; background: url("/common/img/icon_nav_right.png") 0 0 / 4vw auto; content: ""; } /*==================================== 3. Footer ====================================*/ footer { font-size: 3.6vw; line-height: 1; } footer a { color: #202020; } .l-foot_contact { overflow: hidden; padding: 5vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; font-weight: bold; } .l-foot_contact p { 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: 4.2vw; } .l-foot_contact p.top em { border-bottom: 3px solid #ff6000; font-style: normal; } .l-foot_contact p img { width: 60vw; } .l-foot_contact ul { margin: 4vw 0; line-height: 1; } .l-foot_contact li { margin-bottom: 2vw; } .l-foot_contact li a { display: block; padding: 3vw 0; border-radius: 2vw; color: #fff; text-decoration: none; } footer .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%); } footer .requestBtn span { position: relative; display: inline-block; padding-left: 10vw; } footer .requestBtn span:before { position: absolute; top: 50%; left: 0; margin-top: -2.5vw; width: 5vw; height: 5vw; background: url("/common/img/icon_resume.png") no-repeat 50% 50% / 5vw auto; content: ""; } footer .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%); } footer .contactBtn span { position: relative; display: inline-block; padding-left: 12vw; } footer .contactBtn span:before { position: absolute; top: 50%; left: 0; margin-top: -3.5vw; width: 6vw; height: 6vw; background: url("/common/img/icon_contact.png") no-repeat 50% 50% / 6vw auto; content: "";; } .l-foot { padding: 5vw; } .l-foot ul { display: block; overflow: hidden; margin-bottom: 2vw; } .l-foot ul li { float: left; margin: 0 5vw 3vw 0; } .l-foot ul a { padding-left: 5vw; background: url("/common/img/icon_newopen.png") no-repeat 0 50%; } .l-foot p { margin-bottom: 5vw; font-size: 3.2vw; line-height: 1.5; } .l-foot h1 { margin-bottom: 3vw; font-size: 5vw; } .l-foot h1 em { display: block; margin-bottom: 1vw; font-style: normal; font-size: 3.6vw; } .l-foot dl { margin-bottom: 5vw; border-top: 1px solid #ccc; font-size: 3.2vw; } .l-foot dt { float: left; padding-top: 2vw; } .l-foot dd { padding: 3vw 0 3vw 9em; border-bottom: 1px solid #ccc; } .l-foot address { text-align: center; font-style: normal; } /*==================================== 4. Contents ====================================*/ /*--------------------- top ---------------------*/ .topBlock01 h1 { padding: 3vw; background: url("/common/img/bg_top_title.png") 50% 50% / cover; } .topBlock01 span { display: block; padding: 12vw 5vw 20vw; border: 1px solid rgba(255,255,255,0.6); color: #fff; font-size: 5vw; line-height: 1.3; } .topBlock02 { position: relative; z-index: 3; margin: -10vw 6vw 0; padding: 2vw; 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: 5vw 4vw 7vw; 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: 4vw; } .topBlock02 ol { margin-top: 10vw; } .topBlock02 ol li { position: relative; margin-top: 1px; padding-bottom: 7vw; 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:before { position: absolute; top: -6vw; left: 50%; margin-left: -10vw; width: 20vw; height: 20vw; content: ""; } .topBlock02 ol li:nth-child(1):before { background: url("/common/img/feature_img09.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li:nth-child(2):before { background: url("/common/img/feature_img10.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li:nth-child(3):before { background: url("/common/img/feature_img11.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li:nth-child(4):before { background: url("/common/img/feature_img12.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li:nth-child(5):before { background: url("/common/img/feature_img13.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li:nth-child(6):before { background: url("/common/img/feature_img14.png") no-repeat 50% 50% / 20vw auto; } .topBlock02 ol li figure img { width: 100%; } .topBlock02 dl { margin: 5vw; } .topBlock02 dt { margin-bottom: 3vw; text-align: center; font-weight: bold; font-size: 4vw; } .topBlock02 dd { margin-top: 2vw; } .topBlock02 ul { margin-top: 5vw; } .topBlock02 ul li { margin-top: 2vw; } .topBlock02 ul li a { position: relative; padding-left: 6vw; color: #fff; } .topBlock02 ul li a:before { position: absolute; top: 50%; left: 0; margin-top: -2vw; width: 4vw; height: 4vw; background: url("/common/img/icon_nav_right.png") 0 0 / 4vw auto; content: ""; } .topBlock02 .basicPlan { display: inline-block; margin: 0 1vw; padding: 1vw 2vw; background: #143d91; color: #fff; text-align: center; } .topBlock02 .widePlan { display: inline-block; margin: 0 1vw; padding: 1vw 2vw; background: #117fc7; color: #fff; text-align: center; } .topBlock03 { position: relative; z-index: 1; margin-top: -10vw; padding: 15vw 5vw 10vw; background: #000 url("/common/img/bg_top_cyber.png") no-repeat 0 0 / 100% auto; } .topBlock03 h2 { margin: 5vw 0; color: #fff; text-align: center; font-size: 4vw; } .topBlock03 figure { margin-top: 5vw; text-align: center; } .topBlock03 h3 { margin: 0 auto; padding: 3vw 0; color: #fff; text-align: center; font-size: 4vw; line-height: 1; } .topBlock03 h3.compensation { background: #0e6b33; } .topBlock03 h3.cost { background: #005685; } .topBlock03 ul { display: flex; margin: 0 auto; padding: 0 0 5vw 3vw; background: #fff; flex-wrap: wrap; } .topBlock03 ul li { margin-right: 3vw; padding: 18px 0; width: 40vw; border-bottom: 1px solid #666; line-height: 1; } .topBlock03 dl { display: flex; font-size: 3.2vw; justify-content: space-between; } .topBlock03 p { margin-top: 2vw; color: #fff; text-align: center; font-size: 3vw; } .topBlock03 .link { margin-top: 2vw; text-align: center; font-size: 4vw; } .topBlock03 .link a { position: relative; color: #fff; } .topBlock03 .link a:before { position: absolute; top: 50%; left: -6vw; margin-top: -2vw; width: 4vw; height: 4vw; background: url("/common/img/icon_nav_right.png") 0 0 / 4vw auto; content: ""; } /*--------------------- feature ---------------------*/ .featureBlock01 { padding: 5vw 5vw 7vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .featureBlock01 h2 { margin-bottom: 5vw; font-weight: normal; font-size: 4vw; } .featureBlock01 p { margin-top: 5vw; color: #025883; font-size: 4vw; line-height: 1.8; } .featureBlock01 em { border-bottom: 3px solid #ff6000; font-weight: bold; font-style: normal; font-size: 5vw; } .featureBlock01 h3 { margin-top: 10vw; font-size: 4vw; } .featureBlock01 ul { text-align: left; } .featureBlock01 ul li { margin-top: 4vw; padding: 4vw; background: #fff; } .featureBlock01 ul dt { padding-bottom: 2vw; border-bottom: 0.6vw solid #005685; font-weight: 700; font-size: 4vw; } .featureBlock01 ul dt .fsL { font-size: 4.3vw; } .featureBlock01 ul dd { margin-top: 2vw; } .featureBlock02 { position: relative; padding: 10vw 5vw; background: #000 url("/common/img/bg_kikagaku.png") no-repeat 50% 100% / 100% auto; text-align: center; } .featureBlock02:before { position: absolute; top: -2vw; left: 50%; margin-left: -2.5vw; width: 0; height: 0; border-top: 6vw solid #ff6000; border-right: 3vw solid transparent; border-bottom: 1px solid transparent; border-left: 3vw solid transparent; content: ""; } .featureBlock02 h2 { position: relative; margin: 0 auto 5vw; width: 50vw; color: #fff; font-size: 5vw; } .featureBlock02 h2:before { position: absolute; top: 3vw; left: -20vw; width: 20vw; height: 1px; background: #fff; content: ""; } .featureBlock02 h2:after { position: absolute; top: 3vw; right: -20vw; width: 20vw; height: 1px; background: #fff; content: ""; } .featureBlock02 > ul > li { position: relative; margin-bottom: 3vw; border: 1vw solid #025883; border-radius: 3vw; background: #fff; } .featureBlock02 > ul > li:after { position: absolute; right: 5vw; bottom: 3vw; color: #025883; content: "等"; font-weight: 700; font-size: 4vw; } .featureBlock02 dt { padding: 2vw 0 3vw; background: #025883; color: #fff; text-align: center; font-weight: bold; font-size: 4vw; } .featureBlock02 ul ul { display: flex; padding: 2vw 5vw 10vw; justify-content: space-between; flex-wrap: wrap; } .featureBlock02 ul ul li { padding: 3vw 0; width: 37vw; border-bottom: 1px solid #025883; color: #025883; text-align: center; font-weight: bold; font-size: 4vw; line-height: 1; } .featureBlock02 ul ul li.last { margin-left: 41.5vw; } .featureBlock02 p { padding-top: 10vw; background: url("/common/img/parts_arrow.png") no-repeat 50% 0; color: #fff; font-weight: bold; font-size: 4vw; } .featureBlock02 p em { font-style: normal; font-size: 6vw; } .featureBlock03 { margin: 1vw 5vw 5vw; } .featureBlock03 h2 { margin-top: 5vw; text-align: center; font-weight: normal; font-size: 4vw; line-height: 1.8; } .featureBlock03 figure { margin-top: 5vw; } .featureBlock03 hr { margin-top: 5vw; height: 1px; border-top: 1px solid #ccc; } .featureBlock03 ul { margin-top: 3vw; } .featureBlock03 li { margin-bottom: 2vw; } .featureBlock03 dt { padding: 2vw 0; color: #fff; text-align: center; font-weight: bold; font-size: 4vw; } .featureBlock03 dd { padding: 2vw 3vw; } .featureBlock03 li:nth-child(1) { border: 1vw solid #05807c; background: #d7fffe; } .featureBlock03 li:nth-child(2) { border: 1vw solid #143d91; background: #ebf1fd; } .featureBlock03 li:nth-child(3) { border: 1vw 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: 3vw; } .featureBlock03 .link { margin-top: 3vw; } .featureBlock03 .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .featureBlock03 .btn:before { left: 10vw; } .featureBlock04 { padding: 5vw 5vw 7vw; 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: 5vw; } .featureBlock04 ol { margin-top: 10vw; } .featureBlock04 li { position: relative; margin-top: 1px; padding-bottom: 7vw; 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:before { position: absolute; top: -6vw; left: 50%; margin-left: -10vw; width: 20vw; height: 20vw; content: ""; } .featureBlock04 li:nth-child(1):before { background: url("/common/img/feature_img09.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li:nth-child(2):before { background: url("/common/img/feature_img10.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li:nth-child(3):before { background: url("/common/img/feature_img11.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li:nth-child(4):before { background: url("/common/img/feature_img12.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li:nth-child(5):before { background: url("/common/img/feature_img13.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li:nth-child(6):before { background: url("/common/img/feature_img14.png") no-repeat 50% 50% / 20vw auto; } .featureBlock04 li figure img { width: 100%; } .featureBlock04 dl { margin: 5vw; } .featureBlock04 dt { margin-bottom: 3vw; text-align: center; font-weight: bold; font-size: 4vw; } /*--------------------- compensation ---------------------*/ .compensationBlock01 { padding: 5vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .compensationBlock01 h2 { margin-bottom: 5vw; font-size: 4vw; } .compensationBlock01 p { margin-top: 3vw; font-size: 3.6vw; } .compensationBlock01 p small { display: block; margin-top: 3vw; text-align: left; font-size: 3.2vw; } .compensationBlock01 span { color: #d77413; } .compensationBlock01 figure { position: relative; margin-top: 5vw; } .compensationBlock01 figcaption { margin-top: 2vw; font-size: 1.4rem; } .compensationBlock01 figcaption a { display: inline-block; padding-left: 16px; background: url("/common/img/icon_arrrow.png") no-repeat 0 50%; } .compensationBlock01 .link { margin-top: 5vw; } .compensationBlock01 .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .compensationBlock01 .btn:before { left: 10vw; } .compensationOption { display: block; overflow: hidden; margin: 5vw 0; padding: 5vw; background: #fff; } .compensationOption h2 { margin: 0 0 3vw; font-size: 4vw; } .compensationBlock02 { margin: 5vw; padding-bottom: 5vw; border-bottom: 1px solid #ccc; } .compensationBlock02 h1 { margin-top: 10vw; text-align: center; font-size: 4vw; } .compensationBlock02 p { margin: 1em 0 0; } .compensationBlock02 p.subTxt { font-size: 3.8vw; } .compensationBlock02 table { margin-top: 5vw; } .compensationBlock02 figure { margin-top: 5vw; } .compensationBlock02 caption { margin-bottom: 2vw; text-align: center; font-weight: bold; font-size: 3.6vw; line-height: 1; } .compensationBlock02 th { padding: 2vw 1vw; } .compensationBlock02 td { padding: 2vw; font-size: 3.2vw; } .compensationBlock02 small { font-size: 3.2vw; } .compensationBlock02 ul { margin-bottom: 1em; } .compensationBlock02 ul.anchor { margin: 5vw 0; text-align: center; } .compensationBlock02 ul.anchor li { display: inline-block; margin: 0 5vw; } .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 td small { font-size: 3vw; } .compensationBlock02 .link { margin-top: 5vw; } .compensationBlock02 .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .compensationBlock02 .btn:before { left: 10vw; } .compensationBlock03 { margin: 5vw 5vw 8vw; } .compensationBlock03 h2 { margin-bottom: 3vw; text-align: center; font-size: 4.4vw; line-height: 1; } .compensationBlock03 h3 { margin: 4vw 0 2vw; padding-bottom: 2vw; border-bottom: 1px solid #005685; font-size: 4vw; line-height: 1; } .compensationBlock03 h4 { margin-top: 3vw; font-size: 1.4rem; } .compensationBlock03 p small { display: block; margin-top: 5vw; font-size: 3.2vw; } .compensationBlock03 p, .compensationBlock03 ul, .compensationBlock03 ol { line-height: 1.6; } /*--------------------- terms ---------------------*/ .termsBlock { margin: 5vw; } .termsBlock ul, .termsBlock ol, .termsBlock p, .termsBlock table { margin-top: 3vw; } .termsBlock th, .termsBlock td { padding: 2vw 1vw; } .termsBlock p small { display: block; } /*--------------------- service ---------------------*/ .serviceBlock { display: block; overflow: hidden; padding: 5vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .serviceBlock h2 { font-size: 4vw; } .serviceBlock p { margin: 1em 0 0; } .serviceListBlock { overflow: hidden; padding: 5vw 5vw 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 { } .serviceListBlock li { margin-bottom: 5vw; padding-bottom: 3vw; 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 img { width: 100%; } .serviceListBlock dl { overflow: hidden; margin: 3vw 3vw 0; } .serviceListBlock dt { margin-bottom: 2vw; text-align: center; font-weight: bold; font-size: 4vw; } .serviceListBlock dd { margin-top: 2vw; } .serviceListBlock .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .serviceListBlock .btn:before { left: 10vw; } .serviceInfoBlock { display: block; overflow: hidden; margin: 0 5vw 5vw; margin-top: 3vw; } .serviceInfoBlock h2 { margin-bottom: 3vw; } .serviceInfoBlock figure { margin-top: 3vw; } .serviceInfoBlock ul.komeList { margin-top: 3vw; font-size: 3.2vw; } .serviceFlowBlock { display: block; overflow: hidden; margin: 0 5vw 5vw; padding: 4vw; background: #f6f6f6; } .serviceFlowBlock h2 { margin-bottom: 4vw; padding-bottom: 2vw; border-bottom: 1px solid #005685; text-align: center; font-size: 4vw; line-height: 1; } .serviceFlowBlock figure { display: block; text-align: center; } .serviceFlowBlock ol.numList { margin: -3vw 0 3vw; padding: 0; list-style: none; counter-reset: my-counter; } .serviceFlowBlock ol.numList li { position: relative; padding: 3vw 0 3vw 6vw; border-bottom: 1px solid #ccc; } .serviceFlowBlock ol.numList li:before { display: block; float: left; margin-left: -6vw; width: 5vw; height: 5vw; 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: 3.2vw; 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: 4vw; padding: 4vw; background: #fff; } .serviceFlowBlock div.sample dt { margin-bottom: 2vw; font-weight: bold; } .serviceFlowBlock div.sample dd { margin-top: 2vw; font-size: 3.2vw; } .serviceFlowBlock div.sample dd.mail { padding: 3vw; border: 1px solid #ccc; } .serviceFlowBlock div.sample em { color: #c00; font-style: normal; } .serviceFlowBlock div.sample figure { margin-top: 4vw; } .serviceFlowBlock div.sample figcaption { margin-bottom: 3vw; text-align: left; font-weight: bold; } .serviceFlowBlock ul.squareList { margin-bottom: 3vw; padding-bottom: 3vw; border-bottom: 1px solid #ccc; } .serviceFlowBlock ul.squareList li { margin-bottom: 1vw; } .serviceFlowBlock ul.squareList li:before { color: #005685; content: "■"; } .serviceFlowBlock small { font-size: 3.2vw; } .serviceFlowBlock .flR figcaption { margin-bottom: 2vw; font-weight: bold; } .serviceFlowBlock hr { margin: 5px 0; height: 1px; border-top: 1px solid #ccc; } /*--------------------- urgent ---------------------*/ .urgentBlock01 { display: block; overflow: hidden; padding: 5vw 5vw 10vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .urgentBlock01 h2 { margin-bottom: 5vw; text-align: center; font-weight: normal; font-size: 4.8vw; line-height: 1.8; } .urgentBlock01 figure { margin-bottom: 3vw; } .urgentBlock01 figure.graph { display: block; padding: 5vw; border: 2px solid #025883; background: #fff; } .urgentBlock01 figcaption { margin-top: 3.2vw; } .urgentBlock01 p { font-size: 3.4vw; line-height: 1.7; } .urgentBlock01 h3 { margin-top: 10vw; font-size: 4vw; } .urgentBlock01 ul { text-align: left; } .urgentBlock01 ul li { margin-top: 4vw; padding: 4vw; background: #fff; } .urgentBlock01 ul dt { padding-bottom: 2vw; border-bottom: 0.6vw solid #005685; font-weight: 700; font-size: 4vw; } .urgentBlock01 ul dt .fsL { font-size: 4.3vw; } .urgentBlock01 ul dd { margin-top: 2vw; } .urgentBlock02 { position: relative; padding: 7vw 5vw; background: url("/common/img/bg_kikagaku.png") no-repeat 50% 100% / cover; text-align: center; } .urgentBlock02:before { position: absolute; top: -2vw; left: 50%; margin-left: -2.5vw; width: 0; height: 0; border-top: 6vw solid #ff6000; border-right: 3vw solid transparent; border-bottom: 1px solid transparent; border-left: 3vw solid transparent; content: ""; } .urgentBlock02 h2 { margin-bottom: 5vw; color: #fff; font-weight: normal; font-size: 4.8vw; line-height: 1.8; } .urgentBlock02 h2 em { color: #ff6000; font-style: normal; } .urgentBlock02 ul { display: flex; margin-bottom: 5vw; padding: 5vw 0 2vw 5vw; background: #fff; flex-wrap: wrap; } .urgentBlock02 li { margin: 0 5vw 5vw 0; padding-bottom: 2vw; width: 37vw; border-bottom: 2px solid #ff6000; color: #025883; font-weight: bold; line-height: 1; } .urgentBlock02 .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .urgentBlock02 .btn:before { left: 5vw; } /*--------------------- example ---------------------*/ .exampleBlock { margin: 5vw 5vw 7vw; padding-bottom: 7vw; border-bottom: 1px solid #ccc; } .exampleBlock dt { margin-top: 3vw; } .exampleBlock dd { margin-top: 2vw; } .exampleFeeBlock { margin: 5vw; } .exampleFeeBlock dt { margin-top: 3vw; padding: 3vw; background: #f0f0f0; } .exampleFeeBlock dt em { color: #c00; font-weight: bold; font-style: normal; } .exampleFeeBlock dd { margin-top: 5vw; } .exampleFeeBlock table caption { margin-bottom: 2vw; text-align: left; font-weight: bold; font-size: 4vw; } .exampleFeeBlock table caption:before { color: #005685; content: "■"; } .exampleFeeBlock th, .exampleFeeBlock td { padding: 3vw 2vw; border-width: 0 0 1px; font-size: 3.2vw; } .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: bold; } .exampleFeeBlock tr:last-child td { color: #c00; } .exampleFeeBlock small { display: block; margin: 2vw 0 5vw; font-size: 3.2vw; } .exampleFeeBlock p.judgment { margin-top: 5vw; padding: 5vw 2vw; border: 2px solid #c00; text-align: center; font-weight: bold; font-size: 3.4vw; } .exampleFeeBlock p.judgment em { color: #c00; font-style: normal; } .exampleFeeBlock p.notice { margin-top: 5vw; font-size: 3.1vw; } /*--------------------- riskmanagement ---------------------*/ .riskBlock01 { padding: 5vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .riskBlock01 h2 { margin-bottom: 5vw; text-align: center; font-weight: normal; font-size: 5vw; line-height: 1.8; } .riskBlock02 { padding: 5vw; 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: 5vw; font-weight: bold; font-size: 3.6vw; line-height: 1.7; } .riskBlock02 em { font-style: normal; font-size: 4vw; } .riskBlock02 span { padding-bottom: 3px; border-bottom: 3px solid #ff6000; font-size: 4.8vw; line-height: 1.4; } /*--------------------- fee ---------------------*/ .feeCaseBlock { margin: 4vw; padding: 2vw 3vw; background: #f6f6f6; } .feeCaseBlock h2{ text-align: center; font-size: 5vw; } .feeCaseBlock dl { margin-top: 5vw; } .feeCaseBlock dt { margin-bottom: 2vw; padding-bottom: 2vw; border-bottom: 1px solid #005685; font-weight: bold; font-size: 4vw; line-height: 1.2; } .feeCaseBlock li { } .feeCaseBlock li:before { color: #005685; content: "■"; } .feeBlock { margin: 0 4vw 8vw; } .feeBlock h1 { position: relative; padding-top: 8vw; text-align: center; font-weight: normal; font-size: 5vw; } .feeBlock h1:before { position: absolute; top: 0; left: 50%; margin-left: -2.5vw; width: 0; height: 0; border-top: 6vw solid #005685; border-right: 3vw solid transparent; border-bottom: 1px solid transparent; border-left: 3vw solid transparent; content: ""; } .feeBlock table { margin-top: 3vw; } .feeBlock table caption { margin-bottom: 1.5vw; text-align: left; font-weight: bold; font-size: 3.6vw; } .feeBlock th, .feeBlock td { padding: 2vw; text-align: center; } .feeBlock th[scope="row"] { background: #eee; font-weight: normal; } .feeBlock p small { display: block; margin-top: 5vw; font-size: 3.2vw; } /*--------------------- glossary ---------------------*/ .glossaryBlock { margin: 0 4vw 8vw; } .glossaryBlock p { margin-top: 2vw; line-height: 1.6; } /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin: 8vw 4vw; } .sitepolicyBlock p { margin-top: 2vw; line-height: 1.6; } /*--------------------- contact ---------------------*/ .formBlock { margin: 0 4vw 8vw; } .formBlock em.required { display: inline-block; padding: 1vw 2vw; background: #ca3131; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock em.optional { display: inline-block; padding: 1vw 2vw; background: #0d58a6; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock h2 { margin-bottom: 4vw; } .formBlock h3 { margin-top: 3vw; margin-bottom: 2vw; } .formBlock h3 em { margin-right: 2vw; } .formBlock p { margin-bottom: 1.5em; } .formBlock .btnBlock { text-align: center; } .formBlock .btn { margin-top: 4vw; padding: 5vw 0 5vw 5vw; font-size: 4vw; } .formBlock .btn:before { left: 10vw; } .formBlock small { display: block; font-weight: normal; font-size: 3.1vw; } .formType01 { margin-bottom: 5vw; border-collapse: collapse; } .formType01 th { background: #f0f0f0; } .formType01 th, .formType01 td { display: block; padding: 3vw; border: 0.2vw solid #ccc; text-align: left; } .formType01 th em { margin-right: 2vw; } .formType01 td input[type=text], .formType01 td input[type=email], .formType01 td input[type=tel] { padding: 1vw; width: 85vw; border: 1px solid #ccc; } .formType01 td textarea { padding: 5px; width: 85vw; height: 160px; border: 1px solid #ccc; } .formType01 label { display: inline-block; margin-right: 3vw; } .formType01 input[type=radio], .formType01 input[type=checkbox] { margin-right: 1vw; } .formType02 { margin-bottom: 5vw; border-collapse: collapse; } .formType02 th { background: #f0f0f0; } .formType02 th, .formType02 td { display: block; padding: 3vw; border: 0.2vw solid #ccc; text-align: left; } .formType02 td input[type=text] { margin: 0 1vw 1vw; padding: 1vw; width: 20vw; border: 1px solid #ccc; } .formType03 { margin-bottom: 5vw; border-collapse: collapse; } .formType03 th { background: #f0f0f0; } .formType03 th, .formType03 td { padding: 3vw; width: 46vw !important; border: 0.2vw solid #ccc; } .formType04 { margin-bottom: 5vw; border-collapse: collapse; } .formType04 th, .formType04 td { display: block; padding: 3vw; border: 0.2vw solid #ccc; text-align: left; } .formType04 th[colspan] { background: #ccc; } .formType04 th.num { background: #f0f0f0; } .formType04 th em { margin-right: 10px; } .formType04 td[colspan] { padding: 3vw 1vw 3vw 3vw; } .formType04 label { display: inline-block; margin-right: 25px; } .formType04 input[type=radio], .formType04 input[type=checkbox] { margin-right: 5px; } .formDoneBlock { margin: 8vw 4vw; padding: 5vw; background: #f0f0f0; text-align: center; } .formDoneBlock p { margin-bottom: 1.5em; line-height: 1.6; } /*--------------------- telework ---------------------*/ .teleworkBlock01 { padding: 5vw 5vw 7vw; background: url("/common/img/bg_tile.png") 0 0 / 100% auto; text-align: center; } .teleworkBlock01 h2 { margin: 10vw 0 5vw; font-size: 4vw; } .teleworkBlock01 em { border-bottom: 3px solid #ff6000; font-weight: bold; font-style: normal; font-size: 5vw; } .teleworkBlock01 ul { text-align: left; } .teleworkBlock01 ul li { margin-top: 4vw; padding: 4vw; background: #fff; } .teleworkBlock01 ul dt { padding-bottom: 2vw; border-bottom: 0.6vw solid #005685; font-weight: 700; font-size: 4vw; } .teleworkBlock01 ul dt .fsL { font-size: 4.3vw; } .teleworkBlock01 ul dd { margin-top: 2vw; } .teleworkBlock02 { margin: 10vw 5vw; } .teleworkBlock02 h2 { margin-bottom: 5vw; text-align: center; font-size: 5vw; line-height: 1.6; } .teleworkBlock02 h3 { margin: -2vw 15vw 5vw; background: #fff; text-align: center; font-size: 4vw; } .teleworkBlock02 h4 { margin: 0 0 3vw; padding: 2vw 0; text-align: center; font-size: 4vw; } .teleworkBlock02 h4.typeBlue { border: 2px solid #036eb6; color: #036eb6; } .teleworkBlock02 h4.typeRed { border: 2px solid #e40012; color: #e40012; } .teleworkBlock02 .flex > div:first-child { position: relative; margin-bottom: 16vw; } .teleworkBlock02 .flex > div:first-child:before { position: absolute; right: 50%; bottom: -10vw; left: 50%; margin: auto; width: 0; height: 0; border-top: 5vw solid #005685; border-right: 10vw solid transparent; border-bottom: 0 solid transparent; border-left: 10vw solid transparent; content: ""; } .teleworkBlock02 .flex > div { padding: 0 5vw 5vw; border: 0.2vw solid #9d9d9e; } .teleworkBlock02 .link { margin-top: 5vw; } .teleworkBlock02 .btn { padding: 5vw 0 5vw 5vw; font-size: 4vw; } .teleworkBlock02 .btn:before { left: 10vw; } .teleworkBlock03 { margin: 10vw 5vw; } .teleworkBlock03 h2 { margin-bottom: 5vw; text-align: center; font-size: 5vw; line-height: 1.6; } .teleworkBlock03 h4 { margin: 0 0 3vw; padding-bottom: 2vw; border-bottom: 0.2vw solid #005685; vertical-align: middle; text-align: center; font-size: 1.8rem; } .teleworkBlock03 .result { margin-top: 3vw; padding: 3vw 0; border: 0.4vw solid #e40012; text-align: center; font-weight: 700; font-size: 4vw; } .teleworkBlock03 .fcRed { color: #e40012; } .teleworkBlock03 .fcBlue { color: #005685; font-size: 5vw; } .teleworkBlock03 .flex { } .teleworkBlock03 .flex > div { position: relative; margin-top: 5vw; padding: 5vw; background: #f6f6f6; } .teleworkBlock03 .flex > div:nth-child(5) { margin-top: 15vw; } .teleworkBlock03 .flex > div:nth-child(5):before { position: absolute; top: -7vw; right: 0; left: 0; margin: auto; width: 10vw; height: 0.5vw; background: #005685; content: ""; } .teleworkBlock03 .flex > div:nth-child(5):after { position: absolute; top: -12vw; right: 0; left: 0; margin: auto; width: 0.5vw; height: 10vw; background: #005685; content: ""; }