/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer 4. Contents ---------------------------------- Change Log ---------------------------------- -2018/5/31 Fixed all ====================================*/ /*==================================== 0. General ====================================*/ @font-face { font-weight: 100; font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); } @font-face { font-weight: 200; font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); } @font-face { font-weight: 300; font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); } @font-face { font-weight: 400; font-family: "Yu Gothic"; src: local("Yu Gothic Medium"); } @font-face { font-weight: 600; font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); } @font-face { font-weight: 700; font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); } @font-face { font-weight: 800; font-family: "Yu Gothic"; src: local("Yu Gothic Bold"); } @font-face { font-weight: 500; font-family: "Yu Mincho"; src: local("Yu Mincho Regular"); } @font-face { font-weight: 500; font-family: "Yu Mincho"; src: local("Yu Mincho Regular"); } @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: #0d2159; font-size: 1.0rem; font-family:"游ゴシック", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", 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: 62px; height: 62px; background: url(/common/img/icon_gototop.png) no-repeat 0 0; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; line-height: 1; border-top: 5px solid #492b7b; background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 90%, #c9c9c9 100%); background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 90%,#c9c9c9 100%); background: linear-gradient(to bottom, #ffffff 0%,#ffffff 90%,#c9c9c9 100%); height: 170px; } .l-header__h1 { float: left; padding: 10px 0 18px; } .l-header__h1 img { width: 166px; height: auto; } .l-header__h2 { float: left; padding: 33px 0 0 298px; } .l-header__tel { float: right; padding-top: 20px; } header nav { font-size: 1.8rem; } .l-header_nav { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; margin: 0 auto; width: 1000px; } .l-header_nav > li { position: relative; line-height: 1; padding-bottom: 27px; } .l-header_nav > li:before { width: 1px; height: 30px; background: #a495bd; content: ""; position: absolute; left: 0; top: 50%; margin-top: -28px; } .l-header_nav > li > a { display: block; font-weight: bold; text-decoration: none; color: #202020; padding: 6px 0 6px 54px; position: relative; } .l-header_nav > li > a:before { width: 29px; height: 29px; content: ""; position: absolute; top: 50%; margin-top: -15px; left: 17px; } .l-header_nav > li:nth-child(1) { width: 316px; } .l-header_nav > li:nth-child(2) { width: 173px; } .l-header_nav > li:nth-child(3) { width: 158px; } .l-header_nav > li:nth-child(4) { width: 353px; } .l-header_nav > li:nth-child(1) > a:before { background: url("/common/img/icon_feature.png") no-repeat 0 50%; } .l-header_nav > li:nth-child(2) > a:before { background: url("/common/img/icon_urgent.png") no-repeat 0 50%; } .l-header_nav > li:nth-child(3) > a:before { background: url("/common/img/icon_example.png") no-repeat 0 50%; } ul.more { display: none; position: absolute; top: 51px; left: 0; background: #fff; padding: 15px 30px 30px; z-index: 10; } ul.more li { border-bottom: 1px solid #a495bd; padding: 10px 0; } .l-header_nav > li:nth-child(1) ul.more { width: 500px; } .l-header_nav > li:nth-child(2) ul.more { width: 420px; } .l-header_nav > li:hover ul.more { } ul.more a { color: #202020; padding-left: 25px; position: relative; text-decoration: none; font-size: 1.8rem; font-weight: bold; display: block; } ul.more a:before { position: absolute; top: 50%; left: 0; margin-top: -10px; width: 21px; height: 21px; background: url("/common/img/icon_arrow_p.png") no-repeat 0 0 / 21px auto; content: ""; } header ul.contact { display: -webkit-flex; display: flex; padding-left: 7px; } header ul.contact li { line-height: 1; margin-left: 7px; } header ul.contact a { display: block; background: -moz-linear-gradient(top, #bf0707 0%, #bf0707 50%, #e06b6d 51%, #bf0707 100%); background: -webkit-linear-gradient(top, #bf0707 0%,#bf0707 50%,#e06b6d 51%,#bf0707 100%); background: linear-gradient(to bottom, #bf0707 0%,#bf0707 50%,#e06b6d 51%,#bf0707 100%); color: #fff; border-radius: 3px; padding: 14px 10px 14px 35px; font-weight: bold; font-size: 1.6rem; line-height: 1; text-decoration: none; position: relative; } header ul.contact a:after { width: 15px; height: 15px; content: ""; position: absolute; top: 50%; left: 13px; background: url("/common/img/icon_arrow.svg") no-repeat; margin-top: -7px; } /*==================================== 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"); } /*====== [NODULE] p style ======*/ p { margin-top: 1.5em; } p.catch { font-size: 1.9rem; line-height: 1.5; } span.catch { font-size: 1.9rem; font-weight: bold; } /*====== [NODULE] title style ======*/ .titleStyleH1 { padding: 45px 0 42px; background: url("/common/img/bg_title.png") 50% 0 / cover; color: #fff; text-align: center; font-size: 4rem; } .titleStyleH1 span { color: #fff; background: -webkit-linear-gradient(top, #e0e0e0 0%, #ffffff 50%, #bab1b1 51%, #f0f0f0 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(6px 0 0 rgba(73, 43, 123, 1.0)); } .titleStyleH2 { margin-top: 50px; border-top-left-radius: 10px; border-top-right-radius: 10px; background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); text-align: center; color: #fff; font-size: 3rem; line-height: 1; padding: 18px 0; } .titleStyleH3 { margin-top: 40px; line-height: 1; font-size: 2.2rem; color: #492b7b; background: #e6e6e6; border-left: 5px solid #492b7b; padding: 15px 10px 15px 32px; } /*====== [NODULE] list style ======*/ .list { margin-left: 1.5em; list-style: disc; } .numList { margin-left: 1.5em; list-style: decimal; } .hiraganaList { margin-left: 1.5em; list-style: hiragana; } .katakanaList { margin-left: 1.5em; list-style: katakana; } .romanList { margin-left: 1.5em; list-style: lower-roman; } .alphaList { margin-left: 1.5em; list-style: lower-alpha; } .komeList { padding-left: 1em; text-indent: -1em; } .maruList { padding: 0; list-style: none; } .maruList > li { position: relative; padding-left: 1em; } .maruList > li:before { content: "●"; position: absolute; top: 0; left: 0; } .maruNumList { padding: 0; list-style: none; counter-reset: my-counter; } .maruNumList > li { position: relative; padding-left: 24px; } .maruNumList > li:before { position: absolute; top: 2px; left: 0; display: block; width: 18px; height: 18px; border: 1px solid #0d2159; border-radius: 50%; color: #0d2159; content: counter(my-counter); counter-increment: my-counter; text-align: center; font-size: 1.4rem; line-height: 1.2; } .maruSmallNumList { padding: 0; list-style: none; counter-reset: my-counter; font-size: 1.4rem; } .maruSmallNumList > li { position: relative; padding-left: 24px; } .maruSmallNumList > li:before { position: absolute; top: 2px; left: 0; display: block; width: 16px; height: 16px; border: 1px solid #0d2159; border-radius: 50%; color: #0d2159; content: counter(my-counter); counter-increment: my-counter; text-align: center; font-size: 1.2rem; line-height: 1.2; } /*====== [NODULE] table style ======*/ table { width: 100%; border-collapse: collapse; } table th, table td { border: 1px solid #ccc; } table.plan thead th { background: #666666; color: #fff; } table.plan .taC { text-align: center; } table.plan .taL { text-align: left; } table.plan .fontM { font-size: 1.6rem; } 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.plan .rl { margin: 0 auto; min-width: 1em; max-width: 2em; white-space: nowrap; line-height: 1em; writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; } .economy { background: #05807c !important; color: #fff; vertical-align: top; font-weight: bold; } .standard { background: #143d91 !important; color: #fff; vertical-align: top; font-weight: bold; } .premium { background: #117fc7 !important; color: #fff; vertical-align: top; font-weight: bold; } span.basicTxt { color: #0c6aad; } span.wideTxt { color: #ea555a; } span.basic { background: #0c6aad !important; color: #fff; display: inline-block; padding: 1px 2px; } span.wide { background: #ea555a !important; color: #fff; display: inline-block; padding: 1px 2px; } span.property { background: #048273; color: #fff; display: inline-block; padding: 1px 2px; } /*====== [NODULE] btn style ======*/ .btnBlock { margin-top: 50px; text-align: center; } .btn { width: 480px; padding: 20px 40px 20px 0; text-align: center; position: relative; display: inline-block; border-radius: 10px; color: #fff; text-decoration: none; font-weight: bold; line-height: 1; background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); font-size: 1.8rem; } .btn:before { position: absolute; top: 50%; right: 65px; margin-top: -15px; width: 29px; height: 29px; background: url("/common/img/icon_arrow.svg") no-repeat 50% 50% / 29px auto; content: ""; } /*====== [NODULE] notice style ======*/ span.notice { color: #bf0707; } .taC { text-align: center; } .taR { text-align: right; } .fwM { font-weight: 500; } .fwB { font-weight: 700; } .fcPurple { color: #492b7b; } .fcBlue { color: #0d2159; } .fcYellow { color: #ffd800; } .fcPink { color: #c41689; } .kakkoTxt { padding-left: 3em; text-indent: -3em; } .markerYellow { background: linear-gradient(transparent 50%, #ffea01 50%); } .markerPurple { background: linear-gradient(transparent 95%, #492b7b 95%); display: inline-block; padding-bottom: 6px; margin-bottom: 10px; } .markerPurpleThin { background: linear-gradient(transparent 98%, #492b7b 98%); display: inline-block; padding-bottom: 6px; margin-bottom: 10px; } /*==================================== 3. Footer ====================================*/ footer { font-size: 1.4rem; line-height: 1; background: #666; margin-top: 100px; } footer.top { margin-top: 0; } footer a { color: #202020; } .l-foot { padding: 40px 0; color: #fff; } .l-foot_right { float: right; width: 560px; } .l-foot_left { float: left; width: 440px; } .l-foot ul { display: block; overflow: hidden; margin-bottom: 15px; padding-top: 3px; } .l-foot ul li { float: left; margin: 0 22px 15px 0; } .l-foot ul a { color: #fff; text-decoration: none; } .l-foot ul.contact { margin-bottom: 20px; } .l-foot ul.contact li { line-height: 1; margin-right: 20px; width: 270px; } .l-foot ul.contact li:last-child { margin-right: 0; } .l-foot ul.contact a { display: block; background: -moz-linear-gradient(top, #bf0707 0%, #bf0707 50%, #e06b6d 51%, #bf0707 100%); background: -webkit-linear-gradient(top, #bf0707 0%,#bf0707 50%,#e06b6d 51%,#bf0707 100%); background: linear-gradient(to bottom, #bf0707 0%,#bf0707 50%,#e06b6d 51%,#bf0707 100%); color: #fff; border-radius: 3px; padding: 17px 0 17px 30px; text-align: center; font-weight: bold; font-size: 1.8rem; line-height: 1; text-decoration: none; position: relative; } .l-foot ul.contact a:after { width: 19px; height: 19px; content: ""; position: absolute; top: 50%; left: 45px; background: url("/common/img/icon_arrow.svg") no-repeat; margin-top: -10px; } .l-foot p { line-height: 1.5; font-size: 1.2rem; } .l-foot h1 { margin-bottom: 30px; } .l-foot h1 img { width: 176px; height: auto; } .l-foot dl {} .l-foot dt { float: left; } .l-foot dd { padding: 0 0 12px 130px; } .l-foot address { font-style: normal; } /*==================================== 4. Contents ====================================*/ /*--------------------- top ---------------------*/ .topBlock00 { background: url("/common/img/bg_top_cyber4.png") no-repeat 50% 80px, #0d0e10 url("/common/img/bg_top_cyber.png") no-repeat 100% 0; height: 435px; padding-top: 100px; color: #fff; } .topBlock00 h2 { font-size: 6rem; line-height: 1; } .topBlock00 .fsL { font-size: 3.2rem; filter: drop-shadow(6px 0 0 rgba(73, 43, 123, 1.0)); } .topBlock00 .fsS { font-size: 1.2rem; margin: 5px 0 55px; } .topBlock01 { background: url("/common/img/bg_top_cyber1.png") no-repeat 50% 50%, url("/common/img/bg_top_cyber2.png") no-repeat 0 0, url("/common/img/bg_top_cyber3.png") no-repeat 100% 0; padding: 40px 0; } .topBlock01 .flex { width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; } .topBlock01 .box { width: 480px; border: 2px solid #492b7b; border-radius: 10px; padding: 0 26px 26px; overflow: hidden; } .topBlock01 .box.full { width: 1000px; margin-bottom: 40px; } .topBlock01 h3 { margin: 0 -26px 20px; padding: 10px; line-height: 1.4; background: url("/common/img/top_img06.png") no-repeat 0 0; color: #fff; font-size: 3rem; text-align: center; } .topBlock01 .box.full h3 { background: url("/common/img/top_img02.png") no-repeat 0 0; } .topBlock01 p { font-size: 1.8rem; color: #0d2159; font-weight: 700; } .topBlock01 figure { text-align: center; font-size: 1.4rem; } .topBlock01 figcaption { margin-top: 10px; } .topBlock01 .flex2 { display: flex; justify-content: space-between; align-items: center; } .topBlock01 .flex2 p { margin-left: 40px; } .topBlock01 .btn { width: 480px; padding: 20px 80px 20px 40px; } .topBlock01 .btn:before { right: 40px; } .topBlock02 { background: url("/common/img/bg_tile.png"); padding: 70px 0 30px; } .topBlock02 h2 { font-size: 3.4rem; text-align: center; background: url("/common/img/top_img11.png") no-repeat 0 50%, url("/common/img/top_img11.png") no-repeat 100% 50%; line-height: 1.3; } .topBlock02 ul { margin-top: 25px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .topBlock02 li { width: 320px; background: #fff; border: 2px solid #492b7b; border-radius: 10px; margin-bottom: 65px; position: relative; } .topBlock02 li:before { position: absolute; bottom: -22px; left: 50%; margin-left: -13px; content: ""; width: 27px; height: 20px; background: #048273; } .topBlock02 li:after { position: absolute; bottom: -55px; left: 50%; margin-left: -33px; content: ""; width: 0; height: 0; border-style: solid; border-width: 33px 33px 0; border-color: #048273 transparent transparent transparent; } .topBlock02 figure { text-align: center; } .topBlock02 li dt { background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); text-align: center; color: #fff; font-size: 2.4rem; font-weight: bold; line-height: 1.3; padding: 10px 0; height: 84px; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .topBlock02 li dd { margin: 20px; } .topBlock02 dl.add { text-align: center; } .topBlock02 dl.add dt { background: #bf0707; padding: 11.5px 0; color: #fff; font-weight: bold; font-size: 3.6rem; width: 980px; margin: 0 auto; position: relative; } .topBlock02 dl.add dt:before { position: absolute; bottom: 0; left: 0; margin-left: -10px; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 10px 77px; border-color: transparent transparent #bf0707 transparent; } .topBlock02 dl.add dt:after { position: absolute; bottom: 0; right: 0; margin-right: -10px; content: ""; width: 0; height: 0; border-style: solid; border-width: 77px 10px 0; border-color: #bf0707 transparent transparent transparent; } .topBlock02 dl.add dd { margin-top: 25px; color: #4b2c7e; font-weight: bold; font-size: 3.6rem; } .topBlock02 dl.add dd img { width: 280px; height: auto; } /*--------------------- feature ---------------------*/ .featureBlock01 { background: url("/common/img/bg_tile.png"); padding-bottom: 40px; } .featureBlock01 figure { margin-top: 20px; } .featureBlock02 { width: 1000px; margin: 0 auto; } .featureBlock02 ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 20px; } .featureBlock02 li { background: #efefef; padding: 10px 15px; width: 480px; } .featureBlock02 li:nth-child(1) { border: 1px solid #0c6aad; } .featureBlock02 li:nth-child(2) { border: 1px solid #ea555a; } .featureBlock02 figure { margin-top: 20px; } .featureBlock03 { width: 1000px; margin: 0 auto; } .featureBlock03 p.catch + .titleStyleH3 { margin-top: 20px; } .featureBlock03 ul.list { margin-top: 10px; } .featureBlock03 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .featureBlock03 ul.exampleList li { padding: 25px 40px; margin-top: 30px; background: #efefef; width: 480px; } .featureBlock03 ul.exampleList dt { font-weight: bold; font-size: 2.2rem; color: #492b7b; } .featureBlock03 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 5px 10px; margin-right: 10px; font-size: 1.6rem; } .featureBlock03 ul.exampleList span { font-size: 2.6rem; margin-left: 5px; } .featureBlock03 ul.exampleList figure { margin: 15px auto; text-align: center; } .featureBlock03 hr { border-top: 1px solid #bcb1ce; height: 1px; margin: 60px 0; } .featureBlock03 .komeList { font-size: 1.4rem; } .featureBlock04 { width: 1000px; margin: 0 auto; } .featureBlock04 p.catch + .titleStyleH3 { margin-top: 20px; } /*--------------------- compensation ---------------------*/ .compensationBlock01 { background: url("/common/img/bg_tile.png"); padding-bottom: 40px; } .compensationBlock01 figure { margin-top: 20px; } .compensationBlock02 { width: 1000px; margin: 0 auto; } .compensationBlock02 figure { margin-top: 40px; } .compensationBlock03 { width: 1000px; margin: 0 auto; } .compensationBlock03 .plan { text-align: right; margin: -37px 10px 40px 0; font-size: 1.4rem; } .compensationBlock03 .plan span { width: 150px; text-align: center; } .compensationBlock04 { width: 1000px; margin: 0 auto; } .compensationBlock04 table th { padding: 10px; } .compensationBlock04 tbody th { background: #efefef; font-weight: normal; } .compensationBlock04 table td { padding: 15px 10px; } .compensationBlock04 p + ul { margin-top: 1.5em; } .compensationBlock04 p, .compensationBlock04 li { line-height: 1.7; } .compensationBlock04 .plan span { width: 150px; text-align: center; } /*--------------------- terms ---------------------*/ .termsBlock { margin: 0 auto; width: 1000px; } .termsBlock ul, .termsBlock ol, .termsBlock p, .termsBlock table { margin-top: 20px; } .termsBlock th[scope=row] { text-align: center; color: #fff; background: #492b7b; } .termsBlock th { color: #492b7b; background: #b6aaca; padding: 8px 4px; } .termsBlock td { padding: 8px 10px; } .termsBlock p small { display: block; margin-top: -10px; font-size: 1.4rem; } .termsBlock ul.planList { } .termsBlock ul.planList li { margin-top: 30px; padding: 25px 40px; background: #efefef; } .termsBlock dt { margin-bottom: 15px; font-weight: bold; } .termsBlock dt span { padding: 10px 15px; background: #492b7b; color: #fff; font-size: 2rem; line-height: 1; } .termsBlock .formula { font-size: 1.8rem; display: inline-block; margin: 10px 0; } .termsBlock rt { color: #492b7b; font-size: 1.8rem; font-weight: bold; text-align: center; } .termsBlock rb { display: inline-block; border-radius: 5px ; border: 4px solid #492b7b; } /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin: 60px auto; width: 1000px; } .sitepolicyBlock p { margin-top: 20px; } /*--------------------- introduction ---------------------*/ .introductionBlock01 { background: url("/common/img/bg_tile.png"); padding-bottom: 40px; } .introductionBlock01 figure { margin-top: 20px; } .introductionBlock02 { width: 1000px; margin: 0 auto; } .introductionBlock02 figure { margin-top: 40px; } .introductionBlock02 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .introductionBlock02 ul.exampleList > li { padding: 25px 40px; margin-top: 30px; background: #efefef; width: 480px; } .introductionBlock02 ul.exampleList dt { font-weight: bold; font-size: 2.2rem; margin-bottom: 10px; } .introductionBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 8px 10px; font-size: 1.6rem; } /*--------------------- urgent ---------------------*/ .urgentBlock01 { width: 1000px; margin: 0 auto; } .urgentBlock01 ul { margin-top: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .urgentBlock01 li { width: 480px; border-radius: 10px; border: 2px solid #492b7b; } .urgentBlock01 figure { display: block; text-align: center; } .urgentBlock01 figcaption { font-size: 1.2rem; color: #666666; } .urgentBlock01 dt { font-size: 2.2rem; color: #fff; font-weight: bold; text-align: center; padding: 10px 0; background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); height: 120px; line-height: 1.3; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .urgentBlock01 dd { margin: 15px 25px; } .urgentBlock02 { width: 1000px; margin: 0 auto 100px; } .urgentBlock02 h2 { margin-top: 50px; border-top-left-radius: 10px; border-top-right-radius: 10px; background: -moz-linear-gradient(top, #048374 0%, #13a795 50%, #048374 51%, #048273 100%); background: -webkit-linear-gradient(top, #048374 0%,#13a795 50%,#048374 51%,#048273 100%); background: linear-gradient(to bottom, #048374 0%,#13a795 50%,#048374 51%,#048273 100%); text-align: center; color: #fff; font-size: 3rem; line-height: 1; padding: 18px 0; } .urgentBlock02 dl { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: 2px solid #048273; display: block; overflow: hidden; padding: 15px 30px 15px 45px; } .urgentBlock02 dt { float: left; } .urgentBlock02 dd { margin: 20px 0 0 480px; font-size: 1.8rem; } .urgentBlock03 { background: #f1e9f3; padding: 60px 0 20px; margin-bottom: 100px; } .urgentBlock03 h2 { font-size: 3rem; color: #000; font-weight: 500; } .urgentBlock03 p { font-size: 2rem; color: #000; margin-top: 0.5em; } .urgentBlock03 small p { font-size: 1.4rem; color: #0d2159; line-height: 1.4; margin: 1em 0 40px; } .urgentBlock03 figure { margin-top: 30px; } .urgentBlock03 a { color: #0d2159; } /*--------------------- overview ---------------------*/ .overviewBlock01 { background: url("/common/img/bg_tile.png"); padding-bottom: 40px; } .overviewBlock01 figure { margin-top: 20px; } .overviewBlock02 { width: 1000px; margin: 0 auto; } .overviewBlock02 figure { margin-top: 20px; } .overviewBlock02 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .overviewBlock02 ul.exampleList li { padding: 25px 40px; margin-top: 30px; background: #efefef; width: 480px; } .overviewBlock02 ul.exampleList dt { font-weight: bold; font-size: 2.2rem; margin-bottom: 15px; color: #492b7b; } .overviewBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 5px 10px; margin-right: 10px; font-size: 1.6rem; } .overviewBlock02 ul.exampleList span { font-size: 2.6rem; margin-left: 5px; } .overviewBlock03 { width: 1000px; margin: 0 auto;} .overviewBlock03 figure { margin-top: 20px; } .overviewBlock03 .liskBox { padding: 15px 20px 20px; background: #efefef; margin-top: 40px; } .overviewBlock03 .liskBox h4 { color: #492b7b; font-size: 2.2rem; text-align: center; border-bottom: 1px solid #ccc; padding-bottom: 10px; } .overviewBlock03 .liskBox ol { border-top: 1px solid #fff; padding-top: 30px; display: -webkit-flex; display: flex; } .overviewBlock03 .liskBox li { width: 290px; margin-right: 41px; } .overviewBlock03 .liskBox li:nth-child(3n) { margin-right: 0; } .overviewBlock03 .liskBox .num { display: block; background: #048273; color: #fff; line-height: 1; padding: 7px 10px; text-align: center; font-weight: bold; font-size: 2.6rem; } .overviewBlock03 .liskBox figure { margin: 10px 0; text-align: center; } .overviewBlock03 .liskBox dt { font-size: 1.8rem; font-weight: bold; margin-bottom: 5px; } .overviewBlock04 { width: 1000px; margin: 0 auto;} .overviewBlock04 figure { margin-top: 20px; } .overviewBlock04 .flow { margin-top: 40px; } .overviewBlock04 .flow > li { position: relative; margin: 0 auto 70px; } .overviewBlock04 .flow > li:first-child { width: 200px; } .overviewBlock04 .flow > li:before { position: absolute; bottom: -20px; left: 50%; margin-left: -13px; content: ""; width: 27px; height: 20px; background: #048273; } .overviewBlock04 .flow > li:after { position: absolute; bottom: -53px; left: 50%; margin-left: -33px; content: ""; width: 0; height: 0; border-style: solid; border-width: 33px 33px 0; border-color: #048273 transparent transparent transparent; } .overviewBlock04 .flow > li:last-child { margin-bottom: 0; } .overviewBlock04 .flow > li:last-child:before, .overviewBlock04 .flow > li:last-child:after { content: none; } .overviewBlock04 .flow h4 { background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); text-align: center; color: #fff; font-size: 2.4rem; line-height: 1; padding: 15px 0; } .overviewBlock04 .flow ul { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: 2px solid #492b7b; overflow: hidden; padding: 20px 0; display: -webkit-flex; display: flex; } .overviewBlock04 .flow ul > li { width: 333px; text-align: center; border-right: 1px solid #492b7b; } .overviewBlock04 .flow ul > li:last-child { border: none; } .overviewBlock04 .flow dt { font-weight: bold; font-size: 1.8rem; } .overviewBlock04 .flow figure { margin: 10px 0; } /*--------------------- example ---------------------*/ .exampleBlock01 { width: 1000px; margin: 0 auto; } .exampleBlock01 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .exampleBlock01 ul.exampleList li { margin-top: 45px; background: #efefef; width: 480px; padding: 24px 20px; position: relative; } .exampleBlock01 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 5px 10px; margin-right: 10px; font-size: 1.6rem; font-weight: bold; } .exampleBlock01 ul.exampleList span { font-size: 2.6rem; margin-left: 5px; } .exampleBlock01 ul.exampleList time { position: absolute; top: 40px; right: 20px; color: #048273; font-weight: bold; } .exampleBlock01 ul.exampleList figure { margin: 15px auto; text-align: center; } .exampleBlock01 ul.exampleList dt { font-size: 2.2rem; color: #492b7b; font-weight: bold; margin-bottom: 8px; } /*--------------------- riskmanagement ---------------------*/ .riskBlock01 { background: url("/common/img/bg_tile.png"); } .riskBlock01 ul { margin-top: 40px; } .riskBlock01 li { position: relative; margin: 0 auto 60px; } .riskBlock01 li:before { position: absolute; bottom: -24px; left: 50%; margin-left: -13px; content: ""; width: 27px; height: 20px; background: #048273; } .riskBlock01 li:after { position: absolute; bottom: -57px; left: 50%; margin-left: -33px; content: ""; width: 0; height: 0; border-style: solid; border-width: 33px 33px 0; border-color: #048273 transparent transparent transparent; } .riskBlock01 li.min { width: 485px; border-radius: 15px; border: 4px solid #492b7b; color: #492b7b; text-align: center; padding: 15px 0; font-size: 2.2rem; font-weight: bold; } .riskBlock01 li.wide:before { bottom: -20px; } .riskBlock01 li.wide:after { bottom: -53px; } .riskBlock01 li:last-child:before, .riskBlock01 li:last-child:after { content: none; } .riskBlock01 dt { background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); text-align: center; color: #fff; font-size: 2.4rem; line-height: 1; padding: 15px 0; font-weight: bold; } .riskBlock01 dd { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: 2px solid #492b7b; display: block; overflow: hidden; padding: 20px 25px; font-size: 1.8rem; line-height: 1.7; background: #fff; } .riskBlock02 { width: 1000px; margin: 0 auto; } .riskBlock02 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .riskBlock02 ul.exampleList > li { padding: 20px 18px; margin-top: 30px; background: #efefef; width: 480px; } .riskBlock02 ul.exampleList dt { font-weight: bold; font-size: 2.4rem; margin-bottom: 15px; } .riskBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 8px 30px; } .riskBlock02 ul.exampleList span { display: inline-block; font-style: normal; background: #bf0707; color: #fff; line-height: 1; padding: 8px 30px; } .riskBlock02 ul.exampleList dt.last { position: relative; margin: 50px 0 0; } .riskBlock02 ul.exampleList dt.last:before { position: absolute; top: -40px; left: 50%; margin-left: -5px; content: ""; width: 10px; height: 15px; background: #048273; } .riskBlock02 ul.exampleList dt.last:after { position: absolute; top: -25px; left: 50%; margin-left: -10px; content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 10px 0; border-color: #048273 transparent transparent transparent; } .riskBlock02 ul.exampleList dt.last span { padding: 10px 8px; font-size: 2rem; } /*--------------------- fee ---------------------*/ .feeBlock01 { width: 1000px; margin: 0 auto; } .feeBlock01 .termsBox { margin-top: 40px; border-radius: 10px; border: 2px solid #492b7b; display: block; overflow: hidden; padding-bottom: 20px; } .feeBlock01 .termsBox h4 { background-image: -moz-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -webkit-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); background-image: -ms-linear-gradient( -90deg, rgb(73,43,123) 0%, rgb(101,74,146) 49%, rgb(73,43,123) 54%, rgb(73,43,123) 100%); text-align: center; color: #fff; font-size: 2.4rem; line-height: 1.3; padding: 12px 0; } .feeBlock01 .termsBox p { text-align: center; } .feeBlock01 .termsBox dl { position: relative; font-size: 1.8rem; margin: 45px auto 20px; width: 600px; } .feeBlock01 .termsBox dl:before { position: absolute; top: -30px; left: 50%; margin-left: -5px; content: ""; width: 10px; height: 15px; background: #048273; } .feeBlock01 .termsBox dl:after { position: absolute; top: -15px; left: 50%; margin-left: -10px; content: ""; width: 0; height: 0; border-style: solid; border-width: 15px 10px 0; border-color: #048273 transparent transparent transparent; } .feeBlock01 .termsBox dt { text-align: center; margin-bottom: 10px; } .feeBlock01 .termsBox dl.col2 dd { float: left; width: 300px; } .feeBlock01 .termsBox dl.col3 dd { float: left; width: 200px; } .feeBlock02 { width: 1000px; margin: 0 auto 100px; } .feeBlock02 li { background: #efefef; padding: 20px; margin-top: 20px; } .feeBlock02 h4 { font-size: 2.4rem; } .feeBlock02 h4 span { padding: 3px; width: 315px; text-align: center; } .feeBlock02 dl { margin-top: 20px; } .feeBlock02 dt { float: left; } .feeBlock02 dd { margin-left: 3em; } .feeBlock02 .sum { text-align: right; border-top: 1px solid #0d2159; color: #bf0707; font-weight: bold; font-size: 1.8rem; margin-top: 7px; padding-top: 7px; } .feeBlock03 { position: relative; padding-top: 45px; color: #282828; } .feeBlock03::before { position: absolute; content: ""; width: 290px; height: 6px; background: #492b7b; top: 0; left: 0; right: 0; margin: auto; } .feeBlock03 .fsL { font-size: 2.4rem; } .feeBlock03 .full { position: relative; margin: 40px 0 10px; text-align: center; background: url("/common/img/fee_img03.png") repeat-y 50% 0; } .feeBlock03in { width: 1000px; margin: 45px auto 0; padding-bottom: 40px; background: url("/common/img/fee_img02.png") no-repeat 100% 100%; font-weight: 700; } .feeBlock03in dt { font-size: 2.2rem; margin-bottom: 18px; } .feeBlock03in dd { font-size: 1.8rem; } .feeBlock03in .fsLL { font-size: 3.2rem; } .feeBlock03in .fsL { font-size: 2.8rem; } .feeBlock04 { background: #f8f3e0; width: 1000px; margin: 0 auto; border-radius: 10px; padding: 30px 40px 10px; color: #282828; } .feeBlock04 h2 { font-size: 2.5rem; text-align: center; } .feeBlock04 h3 { background: #492b7b; font-size: 2rem; text-align: center; color: #fff; padding: 2px; } .feeBlock04 h3 .fsL { font-size: 3rem; } .feeBlock04in { background: #fff; overflow: hidden; padding: 5px 40px 30px; margin-bottom: 40px; } .feeBlock04in p { margin: 0.5em 0; } .feeBlock04in .fsL { font-size: 1.8rem !important; } .feeBlock04in .flex { display: flex; margin-top: 20px; } .feeBlock04in .flex >* { width: 280px; padding: 0 15px; text-align: center; padding-top: 50px; } .feeBlock04in .flex >*:nth-child(1) { background: url("/common/img/fee_img04.png") no-repeat 50% 0, url("/common/img/line_dot.png") repeat-y 100% 0; } .feeBlock04in .flex >*:nth-child(2) { background: url("/common/img/fee_img05.png") no-repeat 50% 0, url("/common/img/line_dot.png") repeat-y 100% 0; } .feeBlock04in .flex >*:nth-child(3) { background: url("/common/img/fee_img06.png") no-repeat 50% 0 } .feeBlock04in .flex dt { height: 6em; font-size: 1.8rem; line-height: 1.4; margin-bottom: 10px; } .feeBlock04in table { width: 100%; border-collapse: collapse; margin-bottom: 15px; color: #492b7b; } .feeBlock04in th { background: #eddcf9; width: 200px; border: 1px solid #eddcf9; font-weight: 400; } .feeBlock04in td { border-top: 1px solid #999; border-bottom: 1px solid #999; border-left: 1px solid #999; padding: 10px 14px; } /*--------------------- contact ---------------------*/ .formBlock { margin: 0 auto 60px; width: 1000px; } .formBlock em.required { font-style: normal; font-weight: normal; font-size: 1.2rem; color: #fff; background: #ca3131; display: inline-block; padding: 3px 6px; line-height: 1; } .formBlock em.optional { font-style: normal; font-weight: normal; font-size: 1.2rem; color: #fff; background: #0d58a6; display: inline-block; padding: 3px 6px; line-height: 1; } .formBlock h2 { margin-bottom: 20px; } .formBlock h3 { margin-bottom: 10px; margin-top: 40px; } .formBlock h3 em { margin-right: 10px; } .formBlock h3 + p { margin-top: 0; } .formBlock p { margin-bottom: 1.5em; } .formBlock .btn { display: inline-block; padding: 29px 0 29px 45px; width: 350px; font-size: 2.2rem; margin: 0 10px; line-height: 1.2; } .formBlock .btn:before { left: 75px; } .formBlock small { font-size: 1.2rem; font-weight: normal; display: block; } .formType01 { margin-bottom: 20px; border-collapse: collapse; } .formType01 th { background: #f0f0f0; text-align: left; padding: 10px 20px; border: 1px solid #ccc; } .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] { border: 1px solid #ccc; width: 470px; padding: 5px; } .formType01 td textarea { border: 1px solid #ccc; width: 700px; height: 160px; padding: 5px; } .formType01 label { margin-right: 25px; display: inline-block; } .formType01 input[type=radio], .formType01 input[type=checkbox] { margin-right: 5px; } .formType02 { margin-bottom: 20px; border-collapse: collapse; } .formType02 th { background: #f0f0f0; text-align: left; padding: 10px 20px; border: 1px solid #ccc; } .formType02 td { padding: 10px 15px; border: 1px solid #ccc; } .formType02 td input[type=text] { border: 1px solid #ccc; width: 100px; padding: 3px 5px; margin: 0 5px; } .formType02 label { margin-right: 25px; display: inline-block; } .formType02 input[type=radio], .formType02 input[type=checkbox] { margin-right: 5px; } .formType03 { margin-bottom: 20px; border-collapse: collapse; } .formType03 th { text-align: left; padding: 10px 20px; border: 1px solid #ccc; } .formType03 th[colspan] { background: #ccc; font-weight: normal; color: #202020; } .formType03 th.num { background: #f0f0f0; } .formType03 th em { margin-right: 10px; } .formType03 td { padding: 10px 0 10px 30px; border: 1px solid #ccc; font-size: 1.4rem; } .formType03 td[colspan] { padding: 10px 5px 10px 20px; } .formType03 label { margin-right: 25px; display: inline-block; } .formType03 input[type=radio], .formType03 input[type=checkbox] { margin-right: 5px; } .formDoneBlock { margin: 60px auto 80px; width: 1000px; background: #f0f0f0; padding: 40px 0 20px; text-align: center; } .formDoneBlock p { line-height: 1.6; margin-bottom: 1.5em; } /*20190628*/ .btn.span_btn{ padding:0; width:auto; } .btn_submit{ padding:29px 0 29px 45px; width:350px; cursor:pointer; } .error_box { color: #ca3131; font-weight: bold; border: 2px #ca3131 solid; background-color: #fbecec; padding: 7px; text-align: left; margin-bottom: 20px; } .error_box ul { margin-bottom: 0; } /*--------------------- telework ---------------------*/ .teleworkBlock01 { background: url("/common/img/bg_tile.png"); padding-bottom: 40px; margin-bottom: 70px; } .teleworkBlock01 ul.exampleList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .teleworkBlock01 ul.exampleList li { padding: 20px; margin-top: 30px; background: #fff; width: 480px; border: 1px solid #492b7b; } .teleworkBlock01 ul.exampleList dt { font-weight: bold; font-size: 2.2rem; color: #492b7b; } .teleworkBlock01 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 5px 10px; margin-right: 10px; font-size: 1.6rem; } .teleworkBlock01 ul.exampleList span { font-size: 2.6rem; margin-left: 5px; } .teleworkBlock01 ul.exampleList dd { margin-top: 10px; } .teleworkBlock01 ul.exampleList .fsL { font-size: 2.2rem; } .teleworkBlock01 ul.exampleList .fwB { font-weight: 700; } .teleworkBlock02 { width: 1000px; margin: 0 auto; } .teleworkBlock02 figure { margin-top: 30px; } .teleworkBlock03 .full { position: relative; margin: 40px 0 10px; text-align: center; background: url("/common/img/telework_img03.png") repeat-y 50% 0; } .teleworkBlock03 .btn { width: auto; padding: 20px 80px 20px 40px; } .teleworkBlock03 .btn:before { right: 40px; }