/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer ---------------------------------- 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%; -webkit-text-size-adjust: 100%; } body { position: relative; 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 { height: auto; max-width: 100%; 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: 3vw; bottom: 3vw; z-index: 100; } #page-top a { display: block; width: 14vw; height: 14vw; background: url(/common/img/icon_gototop.png) no-repeat 0 0 / 14vw auto; text-indent: -9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; height: 21vw; border-top: 1vw solid #492b7b; background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 85%, #c8c8c8 98%); background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 85%,#c8c8c8 98%); background: linear-gradient(to bottom, #ffffff 0%,#ffffff 85%,#c8c8c8 98%); } .l-header__h1 { float: left; margin: 2.1vw 0 0 4vw; width: 30vw; } .l-header__h2 { float: left; margin: 6vw 0 0 1.5vw; width: 45vw; } #panel-btn { position: absolute; top: 0; right: 4vw; z-index: 2000; display: inline-block; width: 11vw; height: 11vw; 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-indent: -9999px; } #panel-btn.cls { background: #ffffff; } #panel-btn-icon { position: absolute; top: 50%; left: 50%; display: block; margin: -0.3vw 0 0 -2.3vw; width: 4.6vw; height: 0.6vw; background: #ffffff; transition: .2s; } #panel-btn-icon:before, #panel-btn-icon:after { position: absolute; top: 50%; left: 0; display: block; width: 4.6vw; height: 0.6vw; background: #ffffff; content: ""; transition: .3s; } #panel-btn-icon:before { margin-top: -2.1vw; } #panel-btn-icon:after { margin-top: 1.8vw; } #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: 20vw; z-index: 1000; display: none; width: 100%; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.5); font-weight: bold; } .gnav nav > ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 4.3vw; border-bottom: 0.2vw solid #a495bd; } .gnav nav > ul > li:last-child { border: none; } .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; vertical-align: middle; text-decoration: none; color: #202020; } .gnav nav > ul > li > a:before { position: absolute; top: 50%; left: 3vw; content: ""; margin-top: -3.5vw; width: 7vw; height: 7vw; } .gnav nav > ul > li:nth-child(1) > a:before { background: url("/common/img/icon_feature.png") no-repeat 50% 50% / 6vw auto; } .gnav nav > ul > li:nth-child(2) > a:before { background: url("/common/img/icon_urgent.png") no-repeat 50% 50% / 6.2vw auto; } .gnav nav > ul > li:nth-child(3) > a:before { background: url("/common/img/icon_example.png") no-repeat 50% 50% / 4.5vw auto; } .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: 0.2vw solid #a495bd; font-size: 3.7vw; } 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 16vw; color: #202020; vertical-align: middle; text-decoration: none; } ul.more > li > a:before { position: absolute; top: 3.2vw; left: 10vw; content: ""; width: 4.2vw; height: 4.2vw; background: url("/common/img/icon_arrow_p.png") no-repeat 0 0 / 4.2vw auto; } header ul.contact { padding: 5vw 12vw 10vw; background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 90%, #c8c8c8 98%); background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 90%,#c8c8c8 98%); background: linear-gradient(to bottom, #ffffff 0%,#ffffff 90%,#c8c8c8 98%); } header ul.contact li { margin-top: 3vw; } 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: 17px 0 17px 30px; text-align: center; font-weight: bold; font-size: 1.8rem; line-height: 1; text-decoration: none; position: relative; } header 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; } /*==================================== 2. Main ====================================*/ main { display: block; overflow: hidden; background: #fff; font-size: 3.4vw; } div.topPage { background: url("/common/img/bg_tile.png"); } /*====== [NODULE] p style ======*/ p { margin-top: 1.5em; } p.catch { font-size: 3.7vw; line-height: 1.5; } span.catch { font-size: 3.7vw; font-weight: bold; } /*====== [NODULE] title style ======*/ .titleStyleH1 { padding: 10vw 0; background: url("/common/img/bg_title.png") 50% 50% / cover; color: #fff; text-align: center; font-size: 5.2vw; } .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(1vw 0 0 rgba(73, 43, 123, 1.0)); } .titleStyleH2 { margin-top: 10vw; border-top-left-radius: 1.5vw; border-top-right-radius: 1.5vw; 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: 4vw; line-height: 1.2; padding: 4vw 0; } .titleStyleH3 { margin-top: 10vw; line-height: 1; font-size: 3.7vw; color: #492b7b; background: #e6e6e6; border-left: 0.7vw solid #492b7b; padding: 3vw; } /*====== [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: 1.2em; } .maruNumList > li:before { position: absolute; top: 1vw; left: 0.1vw; display: block; width: 3.6vw; height: 3.6vw; border: 0.2vw solid #0d2159; border-radius: 50%; color: #0d2159; content: counter(my-counter); counter-increment: my-counter; text-align: center; font-size: 3vw; 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 .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; } span.basicTxt { color: #0c6aad; } span.wideTxt { color: #ea555a; } span.basic { background: #0c6aad !important; color: #fff; display: inline-block; padding: 0.5vw 1vw; } span.wide { background: #ea555a !important; color: #fff; display: inline-block; padding: 0.5vw 1vw; } span.property { background: #048273; color: #fff; display: inline-block; padding: 0.5vw 1vw; } /*====== [NODULE] btn style ======*/ .btnBlock { margin: 10vw 0 0; text-align: center; } .btn { padding: 4vw 5vw 4vw 0; position: relative; display: block; border-radius: 1.5vw; color: #fff; text-align: center; 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: 4vw; } .btn:before { position: absolute; top: 50%; right: 5vw; margin-top: -3vw; width: 6vw; height: 6vw; background: url("/common/img/icon_arrow.svg") no-repeat 50% 50% / 6vw 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: 0.5vw; margin-bottom: 1vw; } .markerPurpleThin { background: linear-gradient(transparent 98%, #492b7b 98%); display: inline-block; padding-bottom: 0.5vw; margin-bottom: 1vw; } /*==================================== 3. Footer ====================================*/ footer { font-size: 3.4vw; line-height: 1; background: #666; margin-top: 10vw; padding: 5vw; } footer.top { margin-top: 0; } footer a { color: #202020; } .l-foot { padding: 5vw 0; color: #fff; } .l-foot ul { display: block; overflow: hidden; margin-bottom: 15px; } .l-foot ul li { margin-bottom: 2vw; } .l-foot ul a { color: #fff; text-decoration: underline; } .l-foot ul.contact { width: 75vw; margin: 0 auto 5vw; } .l-foot ul.contact li { line-height: 1; margin-bottom: 3vw; } .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_left { border-top: 1px solid #999; padding-top: 5vw; margin-top: 5vw; } .l-foot p { line-height: 1.5; font-size: 3.4vw; } .l-foot h1 { margin-bottom: 5vw; text-align: center; } .l-foot dl {} .l-foot dt { float: left; } .l-foot dd { padding: 0 0 2vw 9em; } .l-foot address { font-style: normal; } /*==================================== 4. Contents ====================================*/ /*--------------------- top ---------------------*/ .topBlock00 { background: url("/common/img/bg_top_cyber4.png") no-repeat 50% 8vw / auto 20vw, #0d0e10 url("/common/img/bg_top_cyber.png") no-repeat 80% 0 / auto 100%; padding: 11vw 5vw 9vw; color: #fff; } .topBlock00 h2 { font-size: 6vw; line-height: 1; } .topBlock00 .fsL { font-size: 3.2vw; filter: drop-shadow(6px 0 0 rgba(73, 43, 123, 1.0)); } .topBlock00 .fsS { font-size: 2.5vw; margin: 1vw 0 5vw; } .topBlock01 { background: url("/common/img/bg_top_cyber1.png") no-repeat 50% 50% / 100vw auto, url("/common/img/bg_top_cyber2.png") no-repeat 0 0 / 40vw auto, url("/common/img/bg_top_cyber3.png") no-repeat 100% 0 / 40vw auto; padding: 4vw; } .topBlock01 .flex {} .topBlock01 .box { border: 0.4vw solid #492b7b; border-radius: 2vw; padding: 0 3vw 3vw; overflow: hidden; margin-bottom: 4vw; } .topBlock01 h3 { margin: 0 -3vw 2vw; padding: 2vw; line-height: 1.4; background: url("/common/img/top_img06.png") no-repeat 0 0 / 100% auto; color: #fff; font-size: 4vw; text-align: center; } .topBlock01 p { font-size: 3.75vw; color: #0d2159; font-weight: 700; } .topBlock01 figure { text-align: center; font-size: 3vw; } .topBlock01 figcaption { margin-top: 2vw; } .topBlock02 { background: url("/common/img/bg_tile.png"); padding: 5vw 3vw; } .topBlock02 h2 { font-size: 4.6vw; text-align: center; background: url("/common/img/top_img11.png") no-repeat 0 50% / 15vw auto, url("/common/img/top_img11.png") no-repeat 100% 50% / 15vw auto; line-height: 1; } .topBlock02 ul { margin-top: 5vw; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; } .topBlock02 li { width: 30vw; background: #fff; border: 0.5vw solid #492b7b; border-radius: 10px; margin-bottom: 10vw; position: relative; } .topBlock02 li:before { position: absolute; bottom: -3.3vw; left: 50%; margin-left: -2vw; content: ""; width: 4vw; height: 3vw; background: #048273; } .topBlock02 li:after { position: absolute; bottom: -8.1vw; left: 50%; margin-left: -5vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 5vw 5vw 0; border-color: #048273 transparent transparent transparent; } .topBlock02 figure { text-align: center; padding: 0 2vw; } .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%); color: #fff; font-size: 4vw; font-weight: bold; line-height: 1.3; padding: 0 2vw; height: 20vw; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .topBlock02 li dd { margin: 2vw; } .topBlock02 dl.add { text-align: center; } .topBlock02 dl.add dt { background: #bf0707; padding: 4vw 0; color: #fff; font-weight: bold; font-size: 4vw; width: 90vw; margin: 0 auto; position: relative; line-height: 1; } .topBlock02 dl.add dt:before { position: absolute; bottom: 0; left: 0; margin-left: -3vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 3vw 12vw; border-color: transparent transparent #bf0707 transparent; } .topBlock02 dl.add dt:after { position: absolute; bottom: 0; right: 0; margin-right: -3vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 12vw 3vw 0; border-color: #bf0707 transparent transparent transparent; } .topBlock02 dl.add dd { margin-top: 3vw; color: #4b2c7e; font-weight: bold; font-size: 5vw; } .topBlock02 dl.add dd img { width: 50vw; } /*--------------------- feature ---------------------*/ .featureBlock01 { background: url("/common/img/bg_tile.png"); padding: 0.1vw 5vw 10vw; } .featureBlock01 figure { margin-top: 5vw; } .featureBlock02 { margin: 0 5vw; } .featureBlock02 ul { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-top: 3vw; } .featureBlock02 li { background: #efefef; padding: 3vw; width: 43vw; } .featureBlock02 li:nth-child(1) { border: 1px solid #0c6aad; } .featureBlock02 li:nth-child(2) { border: 1px solid #ea555a; } .featureBlock02 figure { margin-top: 20px; } .featureBlock03 { margin: 0 5vw; } .featureBlock03 p.catch + .titleStyleH3 { margin-top: 5vw; } .featureBlock03 ul.list { margin-top: 3vw; } .featureBlock03 ul.exampleList {} .featureBlock03 ul.exampleList li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; } .featureBlock03 ul.exampleList dt { font-weight: bold; font-size: 4.3vw; color: #492b7b; } .featureBlock03 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 1vw 2vw; margin-right: 2vw; font-size: 3.4vw; } .featureBlock03 ul.exampleList span { font-size: 5vw; margin-left: 5px; } .featureBlock03 ul.exampleList figure { margin: 3vw auto; text-align: center; } .featureBlock03 hr { border-top: 0.2vw solid #bcb1ce; height: 0.2vw; margin: 6vw 0; } .featureBlock03 .komeList { font-size: 1.4rem; } .featureBlock04 { margin: 0 5vw; } .featureBlock04 p.catch + .titleStyleH3 { margin-top: 3vw; } /*--------------------- compensation ---------------------*/ .compensationBlock01 { background: url("/common/img/bg_tile.png"); padding: 0.1vw 5vw 10vw; } .compensationBlock01 figure { margin-top: 5vw; } .compensationBlock02 { margin: 0 5vw; } .compensationBlock02 figure { margin-top: 5vw; } .compensationBlock03 { margin: 0 5vw; } .compensationBlock03 .plan { font-size: 3.1vw; margin-top: 3vw; } .compensationBlock03 .plan span { width: 35vw; text-align: center; } .compensationBlock04 { margin: 0 5vw; } .compensationBlock04 table th { padding: 2vw; } .compensationBlock04 tbody th { background: #efefef; font-weight: normal; } .compensationBlock04 table td { padding: 2vw; } .compensationBlock04 p + ul { margin-top: 1.5em; } .compensationBlock04 p, .compensationBlock04 li { line-height: 1.7; } .compensationBlock04 .plan span { width: 30vw; text-align: center; } /*--------------------- terms ---------------------*/ .termsBlock { margin: 0 5vw; } .termsBlock ul, .termsBlock ol, .termsBlock p, .termsBlock table { margin-top: 5vw; } .termsBlock col:nth-child(2) { width: 12%; } .termsBlock col:nth-child(3) { width: 65%; } .termsBlock th[scope=row] { text-align: center; color: #fff; background: #492b7b; } .termsBlock th { color: #492b7b; background: #b6aaca; padding: 2vw 1vw; } .termsBlock td { padding: 2vw; } .termsBlock p small { display: block; margin-top: -2vw; font-size: 3.1vw; } .termsBlock ul.planList { } .termsBlock ul.planList li { padding: 3vw; margin-top: 5vw; background: #efefef; } .termsBlock dt { font-weight: bold; color: #492b7b; margin-bottom: 2vw; } .termsBlock dt span { padding: 2vw 3vw; background: #492b7b; color: #fff; font-size: 4.3vw; line-height: 1; display: inline-block; } .termsBlock .formula { font-size: 4vw; display: inline-block; margin: 1vw 0; } .termsBlock rt { color: #492b7b; font-size: 4vw; font-weight: bold; text-align: center; } .termsBlock rb { display: inline-block; font-size: 3vw; border-radius: 1.5vw; border: 0.7vw solid #492b7b; } /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin: 0 5vw; } .sitepolicyBlock p { margin-top: 5vw; } /*--------------------- introduction ---------------------*/ .introductionBlock01 { background: url("/common/img/bg_tile.png"); padding: 0.1vw 5vw 10vw; } .introductionBlock01 figure { margin-top: 5vw; } .introductionBlock02 { margin: 0 5vw; } .introductionBlock02 figure { margin-top: 5vw; } .introductionBlock02 ul.exampleList {} .introductionBlock02 ul.exampleList > li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; } .introductionBlock02 ul.exampleList dt { font-weight: bold; color: #492b7b; margin-bottom: 2vw; } .introductionBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 2vw 3vw; font-size: 4vw; } /*--------------------- urgent ---------------------*/ .urgentBlock01 { margin: 0 5vw; } .urgentBlock01 ul {} .urgentBlock01 li { margin-top: 3vw; border-radius: 1.5vw; border: 0.7vw solid #492b7b; } .urgentBlock01 figure { display: block; text-align: center; padding: 1vw 2vw; } .urgentBlock01 figcaption { font-size: 2.8vw; color: #666666; } .urgentBlock01 dt { font-size: 4vw; color: #fff; font-weight: bold; text-align: center; padding: 5vw 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%); 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: 3vw; } .urgentBlock02 { margin: 0 5vw 8vw; } .urgentBlock02 h2 { margin-top: 10vw; border-top-left-radius: 1.5vw; border-top-right-radius: 1.5vw; 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: 4vw; line-height: 1; padding: 4vw 2vw; } .urgentBlock02 dl { border-bottom-right-radius: 1.5vw; border-bottom-left-radius: 1.5vw; border: 0.7vw solid #048273; display: block; overflow: hidden; padding: 3vw; } .urgentBlock02 dt { margin-bottom: 3vw; } .urgentBlock02 dd {} .urgentBlock03 { background: #f1e9f3; padding: 6vw 6vw 2vw; margin-bottom: 8vw; } .urgentBlock03 h2 { font-size: 5vw; color: #000; font-weight: 500; } .urgentBlock03 p { font-size: 4.375vw; color: #000; margin-top: 0.5em; } .urgentBlock03 small p { font-size: 2.8vw; color: #0d2159; line-height: 1.4; margin: 1em 0 2em; } .urgentBlock03 figure { margin-top: 3vw; } .urgentBlock03 a { color: #0d2159; } /*--------------------- overview ---------------------*/ .overviewBlock01 { background: url("/common/img/bg_tile.png"); padding: 0.1vw 5vw 10vw; } .overviewBlock01 figure { margin-top: 5vw; } .overviewBlock02 { margin: 0 5vw; } .overviewBlock02 figure { margin-top: 5vw; } .overviewBlock02 ul.exampleList {} .overviewBlock02 ul.exampleList > li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; } .overviewBlock02 ul.exampleList dt { font-weight: bold; color: #492b7b; margin-bottom: 2vw; font-size: 4.3vw; } .overviewBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 2vw 3vw; font-size: 4vw; margin-right: 2vw; } .overviewBlock02 ul.exampleList span { font-size: 4.3vw; margin-left: 1vw; } .overviewBlock03 { margin: 0 5vw; } .overviewBlock03 figure { margin-top: 5vw; } .overviewBlock03 .liskBox { padding: 3vw 5vw; background: #efefef; margin-top: 5vw; } .overviewBlock03 .liskBox h4 { color: #492b7b; font-size: 4.3vw; text-align: center; border-bottom: 0.2vw solid #ccc; padding-bottom: 3vw; } .overviewBlock03 .liskBox ol { border-top: 0.2vw solid #fff; } .overviewBlock03 .liskBox li { margin-top: 5vw; } .overviewBlock03 .liskBox .num { display: block; background: #048273; color: #fff; line-height: 1; padding: 2vw; text-align: center; font-weight: bold; font-size: 4.3vw; } .overviewBlock03 .liskBox figure { margin: 3vw 0; text-align: center; } .overviewBlock03 .liskBox dt { font-size: 4vw; font-weight: bold; margin-bottom: 5px; } .overviewBlock04 { margin: 0 5vw; } .overviewBlock04 figure { margin-top: 5vw; } .overviewBlock04 .flow { margin-top: 3vw; } .overviewBlock04 .flow > li { position: relative; margin: 0 auto 10vw; } .overviewBlock04 .flow > li:first-child { width: 50vw; } .overviewBlock04 .flow > li:before { position: absolute; bottom: -3vw; left: 50%; margin-left: -2vw; content: ""; width: 4vw; height: 3vw; background: #048273; } .overviewBlock04 .flow > li:after { position: absolute; bottom: -7.8vw; left: 50%; margin-left: -5vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 5vw 5vw 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: 4.3vw; line-height: 1; padding: 3vw 0; } .overviewBlock04 .flow ul { border-bottom-right-radius: 1.5vw; border-bottom-left-radius: 1.5vw; border: 0.7vw solid #492b7b; overflow: hidden; padding: 0 3vw 3vw; } .overviewBlock04 .flow ul > li { text-align: center; padding: 3vw; border-bottom: 1px solid #492b7b; } .overviewBlock04 .flow ul > li:last-child { border: none; } .overviewBlock04 .flow dt { font-weight: bold; } .overviewBlock04 .flow figure { margin: 2vw 0; } /*--------------------- example ---------------------*/ .exampleBlock01 { margin: 0 5vw; } .exampleBlock01 ul.exampleList {} .exampleBlock01 ul.exampleList li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; position: relative; } .exampleBlock01 ul.exampleList dt { font-weight: bold; } .exampleBlock01 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 2vw 3vw; font-size: 4vw; margin-right: 2vw; } .exampleBlock01 ul.exampleList span { font-size: 4.3vw; margin-left: 1vw; } .exampleBlock01 ul.exampleList time { position: absolute; top: 7vw; right: 5vw; color: #048273; font-weight: bold; } .exampleBlock01 ul.exampleList figure { margin: 3vw auto; text-align: center; } /*--------------------- riskmanagement ---------------------*/ .riskBlock01 { background: url("/common/img/bg_tile.png"); padding: 0.1vw 5vw 5vw; } .riskBlock01 ul { margin-top: 10vw; } .riskBlock01 li { position: relative; margin: 0 auto 10vw; } .riskBlock01 li:before { position: absolute; bottom: -3.5vw; left: 50%; margin-left: -2vw; content: ""; width: 4vw; height: 3vw; background: #048273; } .riskBlock01 li:after { position: absolute; bottom: -8.3vw; left: 50%; margin-left: -5vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 5vw 5vw 0; border-color: #048273 transparent transparent transparent; } .riskBlock01 li.min { border-radius: 1.5vw; border: 0.7vw solid #492b7b; color: #492b7b; text-align: center; padding: 3vw 0; font-size: 4.3vw; font-weight: bold; } .riskBlock01 li.wide:before { bottom: -3.0vw; } .riskBlock01 li.wide:after { bottom: -7.8vw; } .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: 4.3vw; line-height: 1; padding: 3vw 0; font-weight: bold; } .riskBlock01 dd { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border: 0.7vw solid #492b7b; display: block; overflow: hidden; padding: 3vw; line-height: 1.7; background: #fff; } .riskBlock02 { margin: 0 5vw; } .riskBlock02 ul.exampleList {} .riskBlock02 ul.exampleList > li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; } .riskBlock02 ul.exampleList dt { font-weight: bold; font-size: 4.3vw; margin-bottom: 2vw; } .riskBlock02 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 2vw 3vw; } .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: 12vw 0 0; } .riskBlock02 ul.exampleList dt.last:before { position: absolute; top: -10vw; left: 50%; margin-left: -1.5vw; content: ""; width: 3vw; height: 4vw; background: #048273; } .riskBlock02 ul.exampleList dt.last:after { position: absolute; top: -6vw; left: 50%; margin-left: -3vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 4vw 3vw 0; border-color: #048273 transparent transparent transparent; } .riskBlock02 ul.exampleList dt.last span { padding: 2vw 3vw; font-size: 4.3vw; } /*--------------------- fee ---------------------*/ .feeBlock01 { margin: 0 5vw; } .feeBlock01 .termsBox { margin-top: 5vw; border-radius: 1.5vw; border: 0.7vw solid #492b7b; display: block; overflow: hidden; padding-bottom: 3vw; } .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%); color: #fff; font-size: 4.3vw; line-height: 1.3; padding: 3vw; } .feeBlock01 .termsBox p { margin: 1.5em 5vw 0; } .feeBlock01 .termsBox dl { position: relative; font-size: 4.3vw; margin: 12vw 5vw 5vw; } .feeBlock01 .termsBox dl:before { position: absolute; top: -10vw; left: 50%; margin-left: -1.5vw; content: ""; width: 3vw; height: 4vw; background: #048273; } .feeBlock01 .termsBox dl:after { position: absolute; top: -6vw; left: 50%; margin-left: -3vw; content: ""; width: 0; height: 0; border-style: solid; border-width: 4vw 3vw 0; border-color: #048273 transparent transparent transparent; } .feeBlock01 .termsBox dt { text-align: center; margin-bottom: 3vw; } .feeBlock02 { margin: 0 5vw 8vw; } .feeBlock02 li { padding: 3vw 5vw; margin-top: 5vw; background: #efefef; } .feeBlock02 h4 { font-size: 4.3vw; } .feeBlock02 h4 span { padding: 1.5vw 3vw; text-align: center; } .feeBlock02 dl { margin-top: 3vw; } .feeBlock02 dt { float: left; } .feeBlock02 dd { margin-left: 3em; } .feeBlock02 .sum { text-align: right; border-top: 0.2vw solid #0d2159; color: #bf0707; font-weight: bold; font-size: 4.3vw; margin-top: 2vw; padding-top: 2vw; } .feeBlock03 { position: relative; margin: 0 5vw; padding-top: 2vw; color: #282828; } .feeBlock03::before { position: absolute; content: ""; width: 30vw; height: 1vw; background: #492b7b; top: 0; left: 0; right: 0; margin: auto; } .feeBlock03 .fsL { font-size: 4.6vw; } .feeBlock03 .full { position: relative; margin: 4vw -5vw 1vw; text-align: center; background: url("/common/img/fee_img03.png") repeat-y 50% 0 / 100vw auto; } .feeBlock03in { margin: 5vw 0; background: url("/common/img/fee_img02.png") no-repeat 100% 100% / 50vw auto; font-weight: 700; } .feeBlock03in dt { font-size: 5vw; margin-bottom: 3vw; } .feeBlock03in dd { font-size: 3.7vw; } .feeBlock03in .fsLL { font-size: 5.4vw; } .feeBlock03in .fsL { font-size: 4vw; } .feeBlock04 { background: #f8f3e0; margin: 0 5vw; border-radius: 1vw; padding: 3vw 4vw 1vw; color: #282828; } .feeBlock04 h2 { font-size: 3.9vw; text-align: center; } .feeBlock04 h3 { background: #492b7b; font-size: 3.75vw; text-align: center; color: #fff; padding: 0.4vw 2vw; } .feeBlock04 h3 .fsL { font-size: 4.6vw; } .feeBlock04in { background: #fff; overflow: hidden; padding: 1vw 4vw 3vw; margin-bottom: 4vw; } .feeBlock04in p { margin: 0.5em 0; } .feeBlock04in .fsL { font-size: 4vw !important; } .feeBlock04in .flex { margin-top: 3vw; } .feeBlock04in .flex >* { padding: 10vw 0 3vw; } .feeBlock04in .flex >*:nth-child(1) { background: url("/common/img/fee_img04.png") no-repeat 50% 0 / 8vw auto, url("/common/img/line_dot_y.png") repeat-y 0 100%; } .feeBlock04in .flex >*:nth-child(2) { background: url("/common/img/fee_img05.png") no-repeat 50% 0 / 8vw auto, url("/common/img/line_dot_y.png") repeat-y 0 100%; } .feeBlock04in .flex >*:nth-child(3) { background: url("/common/img/fee_img06.png") no-repeat 50% 0 / 8vw auto; } .feeBlock04in .flex dt { line-height: 1.4; margin-bottom: 1vw; text-align: center; } .feeBlock04in table { width: 100%; border-collapse: collapse; margin-bottom: 2vw; color: #492b7b; } .feeBlock04in th { background: #eddcf9; border: 0.2vw solid #eddcf9; font-weight: 400; padding: 1vw 2vw; display: block; } .feeBlock04in td { border-bottom: 0.2vw solid #999; border-right: 0.2vw solid #999; border-left: 0.2vw solid #999; padding: 1vw 2vw; display: block; margin-top: -0.2vw; } /*--------------------- contact ---------------------*/ .formBlock { margin: 0 4vw 8vw; } .formBlock em.required { font-style: normal; font-weight: normal; font-size: 1.2rem; color: #fff; background: #ca3131; display: inline-block; padding: 1vw 2vw; line-height: 1; } .formBlock em.optional { font-style: normal; font-weight: normal; font-size: 1.2rem; color: #fff; background: #0d58a6; display: inline-block; padding: 1vw 2vw; line-height: 1; } .formBlock h2 { margin-bottom: 4vw; } .formBlock h3 { margin-bottom: 2vw; margin-top: 3vw; } .formBlock h3 em { margin-right: 2vw; } .formBlock p { margin-bottom: 1.5em; } .formBlock .btnBlock { text-align: center; } .formBlock .btn { font-size: 4vw; padding: 5vw 0 5vw 5vw; margin-top: 4vw; } .formBlock .btn:before { left: 10vw; } .formBlock small { font-size: 3.1vw; font-weight: normal; display: block; } .formType01 { margin-bottom: 5vw; border-collapse: collapse; } .formType01 th { background: #f0f0f0; } .formType01 th, .formType01 td { text-align: left; padding: 3vw; border: 0.2vw solid #ccc; display: block; } .formType01 th em { margin-right: 2vw; } .formType01 td input[type=text], .formType01 td input[type=email], .formType01 td input[type=tel] { border: 1px solid #ccc; width: 85vw; padding: 1vw; } .formType01 td textarea { border: 1px solid #ccc; width: 85vw; height: 160px; padding: 5px; } .formType01 label { margin-right: 3vw; display: inline-block; } .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 { text-align: left; padding: 3vw; border: 0.2vw solid #ccc; display: block; } .formType02 td input[type=text] { border: 1px solid #ccc; width: 20vw; padding: 1vw; margin: 0 1vw 1vw; } .formType02 label { margin-right: 3vw; display: inline-block; } .formType02 input[type=radio], .formType02 input[type=checkbox] { margin-right: 1vw; } .formType03 { margin-bottom: 5vw; border-collapse: collapse; } .formType03 th, .formType03 td { text-align: left; padding: 3vw; border: 0.2vw solid #ccc; display: block; } .formType03 th[colspan] { background: #ccc; font-weight: normal; color: #202020; } .formType03 th.num { background: #f0f0f0; } .formType03 th em { margin-right: 10px; } .formType03 td[colspan] { padding: 3vw 1vw 3vw 3vw; } .formType03 label { margin-right: 25px; display: inline-block; } .formType03 input[type=radio], .formType03 input[type=checkbox] { margin-right: 5px; } .formDoneBlock { margin: 8vw 4vw; background: #f0f0f0; padding: 5vw; text-align: center; } .formDoneBlock p { line-height: 1.6; margin-bottom: 1.5em; } .btn.span_btn{ padding:0; } .btn_submit{ padding:5vw 0 5vw 5vw; width:100%; } .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: 0 4vw 4vw; margin-bottom: 7vw; } .teleworkBlock01 ul.exampleList {} .teleworkBlock01 ul.exampleList li { padding: 4vw; margin-top: 4vw; background: #fff; border: 0.2vw solid #492b7b; } .teleworkBlock01 ul.exampleList dt { font-weight: bold; color: #492b7b; } .teleworkBlock01 ul.exampleList em { display: inline-block; font-style: normal; background: #048273; color: #fff; line-height: 1; padding: 1vw 2vw; margin-right: 1vw; font-size: 3.4vw; } .teleworkBlock01 ul.exampleList span { font-size: 4.375vw; margin-left: 5px; } .teleworkBlock01 ul.exampleList dd { margin-top: 2vw; } .teleworkBlock01 ul.exampleList .fsL { font-size: 4.375vw; } .teleworkBlock01 ul.exampleList .fwB { font-weight: 700; } .teleworkBlock02 { margin: 0 5vw; } .teleworkBlock02 figure { margin-top: 3vw; } .teleworkBlock03 .full { position: relative; padding: 0 5vw; text-align: center; background: url("/common/img/telework_img03.png") repeat-y 50% 0 / 120vw auto; } .teleworkBlock03 .btnBlock { margin-left: 5vw; margin-right: 5vw; }