/*==================================== ---------------------------------- Structure ---------------------------------- 0. General 1. Header 2. Main 3. Footer 4. Contents ---------------------------------- Change Log ---------------------------------- -2022/1/17 Fixed all ====================================*/ /*==================================== 0. General ====================================*/ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500&display=swap'); html { font-size: 62.5%; } body { position: relative; background: #fff; color: #202020; font-size: 1.0rem; font-family: 'Noto Sans JP', sans-serif; line-height: 1.5; -webkit-animation: fadeIn 1s ease 0s 1 normal; animation: fadeIn 1s ease 0s 1 normal; } img { vertical-align: bottom; } a { color: #036EB8; text-decoration: underline; cursor: pointer; } a:hover { text-decoration: none; opacity: 0.8; } input:hover { opacity: 0.8; } ul, ol { list-style: none; } div.inner { position: relative; display: block; overflow: hidden; margin: 0 auto; width: 1000px; zoom: 1; } .spOnly { display: none !important; } #page-top { position: fixed; right: 20px; bottom: 20px; z-index: 100; } #page-top a { display: block; width: 62px; height: 62px; background: url(../img/icon_gototop.png) no-repeat 0 0; text-indent:-9999px; } #page-nav { position: fixed; top: 50%; right: 0; z-index: 100; margin-top: -180px; } #page-nav li:nth-child(1) a { display: block; width: 73px; height: 174px; background: url("https://www.ms-do.jp/common/img/btn_request.png") no-repeat 0 0; text-indent:-9999px; } #page-nav li:nth-child(1) { margin-bottom: 12px; } #page-nav li:nth-child(2) a { display: block; width: 73px; height: 174px; background: url("https://www.ms-do.jp/common/img/btn_contact.png") no-repeat 0 0; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; font-weight: 500; line-height: 1; } header a { text-decoration: none; } header .l-header__h1 { float: left; padding: 22px 0 20px; } header nav.m-cmn__nav { padding: 15px 0; background: #119fda; font-size: 1.6rem; } header nav.m-cmn__nav ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 1000px; -webkit-justify-content: flex-start; justify-content: flex-start; } header nav.m-cmn__nav li {-webkit-flex-grow: 1; flex-grow: 1; } header nav.m-cmn__nav li:not(:first-child) { border-left: 1px solid #fff; } header nav.m-cmn__nav a { display: block; padding: 15px 0; color: #fff; text-align: center; } header nav.m-sub__nav { position: absolute; top: 30px; left: 50%; margin-left: -100px; } header nav.m-sub__nav ul { display: -webkit-flex; display: flex; } header nav.m-sub__nav a.btn { display: inline-block; margin-right: 15px; padding: 22px; width: 175px; border: 1px solid #119fda; border-radius: 5px; background: url("../img/bg_btn.png") no-repeat; color: #202020; text-align: center; font-size: 1.6rem; } /*==================================== 2. Main ====================================*/ main { display: block; overflow: hidden; min-width: 1000px; background: #fff; font-size: 1.6rem; } .bgtile { padding: 50px 0; background: url("../img/bg_tile.gif"); } /*====== [NODULE] tytle style ======*/ .titleStyleH1 { margin: 50px 0 25px; padding: 15px; border: 3px solid #ccc; background: #1e769b; box-shadow: inset 0px 9px 7px 0px #15536d; color: #fff; text-align: center; font-size: 3rem; line-height: 1.1; } .titleStyleH2 { margin: 40px 0 20px; padding-bottom: 13px; border-bottom: 3px solid #119fda; vertical-align: middle; font-weight: 500; font-size: 2rem; line-height: 1.1; } .titleStyleH3 { margin-bottom: 30px; padding: 35px 0; border-top: 7px solid #119fda; border-bottom: 1px solid #119fda; text-align: center; font-weight: bold; font-size: 4rem; line-height: 1.1; } .titleStyleH4 { margin-bottom: 30px; color: #119fda; text-align: center; font-weight: bold; font-size: 3.4rem; } .titleStyleH5 { margin-bottom: 20px; padding: 15px 0 15px 150px; background: #fdd000; text-align: center; font-weight: bold; font-size: 2rem; } .titleStyleH5 span { position: relative; display: inline-block; } .titleStyleH5 span:before { position: absolute; top: 0; bottom: 0; left: -150px; margin: auto; width: 128px; height: 71px; background: url("../img/icon_check.png") no-repeat; content: ""; } .titleStyleH6 { margin: 40px 0 20px; padding-bottom: 13px; border-bottom: 3px solid #119fda; vertical-align: middle; font-size: 2rem; line-height: 1.1; } .titleStyleH7 { margin: 2em 0 1.6em; padding-bottom: 0.4em; border-bottom: 1px solid #000; text-align: center; font-weight: normal; font-size: 2rem; } /*====== [NODULE] 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: 2em; text-indent: -2em; } .noteList { list-style: none; } .noteList > li { padding-left: 2.5em; text-indent: -2.5em; } .etc { position: relative; margin-bottom: 1em; } .etc:after { position: absolute; right: 0; bottom: -1em; content: "等"; } /*====== [NODULE] text style ======*/ p { margin: 1.5em 0; } marker { background: linear-gradient(transparent 20%, #fee366 0%); } hr { margin: 1em 0; height: 1px; border: none; border-top: 1px solid #e0e0e0; } .txtM { font-size: 1.4rem; } .txtL { font-size: 1.8rem; } .txtLL { font-size: 2.4rem; } .txtXL { font-size: 3.2rem; } .fwB { font-weight: bold; } .komeTxt { padding-left: 1em; text-indent: -1em; } .noteTxt { padding-left: 2.5em; text-indent: -2.5em; } .refTxt { padding-left: 3em; text-indent: -3em; } .taR { text-align: right; } .taC { text-align: center; } .taL { text-align: left; } .mtReset { margin-top: 0 !important; } .mbReset { margin-bottom: 0 !important; } /*====== [NODULE] table style ======*/ table { width: 100%; border-collapse: collapse; } table th, table td { border: 1px solid #ccc; } table.plan 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 .fontL { font-size: 1.8rem; } 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; width: 1em; white-space: nowrap; line-height: 1em; writing-mode: tb-rl; writing-mode: vertical-rl; text-orientation: upright; } /*====== [NODULE] btn style ======*/ main .btn { position: relative; display: inline-block; padding: 22px 37px; border: 1px solid #119fda; border-radius: 5px; background: url("../img/bg_btn_l.png") no-repeat 0 0 / 100% auto; color: #202020; text-align: center; text-decoration: none; font-size: 1.6rem; } main .btn:after { position: absolute; top: 0; right: 20px; bottom: 0; margin: auto; width: 9px; height: 9px; border-top: 1px solid #000; border-right: 1px solid #000; content: ""; transform: rotate(45deg); } /*==================================== 3. Footer ====================================*/ footer { background: #119fda; color: #fff; font-size: 1.4rem; line-height: 1; } footer a { color: #fff; text-decoration: none; } .l-foot { padding: 40px 0; } .l-foot_right { float: right; width: 500px; } .l-foot_left { float: left; width: 444px; } .l-foot p { font-size: 1.2rem; line-height: 1.5; } .l-foot h1 { margin-bottom: 18px; font-size: 1.9rem; } .l-foot h1 .sub { display: inline-block; background: #fff; padding: 5px 7px; font-size: 1.6rem; color: #119fda; margin-bottom: 5px; } .l-foot dl { margin-bottom: 25px; border-top: 1px solid #fff; } .l-foot dt { float: left; padding-top: 12px; } .l-foot dd { padding: 12px 0 12px 130px; border-bottom: 1px solid #fff; } .l-foot address { font-style: normal; } .l-foot ul.m-sub__nav { display: -webkit-flex; display: flex; margin-bottom: 25px; } .l-foot ul.m-sub__nav a.btn { display: inline-block; margin-right: 15px; padding: 22px; width: 175px; border: 1px solid #119fda; border-radius: 5px; background: #fff url("../img/bg_btn.png") no-repeat; color: #202020; text-align: center; font-size: 1.6rem; } .l-foot ul.m-other__nav { display: -webkit-flex; display: flex; margin-bottom: 20px; flex-wrap: wrap; } .l-foot ul.m-other__nav li { margin: 0 1.5em 0.5em 0; } /*==================================== 4. Contents ====================================*/ /*--------------------- 共通 ---------------------*/ .detailsList { margin: 20px 0; border-right: 1px solid #000; border-bottom: 1px solid #000; border-left: 1px solid #000; } .detailsList > dt { position: relative; padding: 5px 20px; border-top: 1px solid #000; border-bottom: 1px solid #000; background: #efefef; font-weight: bold; font-size: 2rem; } .detailsList > dd { padding: 20px; } .detailsList > dd >*:first-child { margin-top: 0; } .detailsList > dd >*:last-child { margin-bottom: 0; } .detailsList .planOption, .detailsList .planBasic, .detailsList .planWide { position: absolute; top: 8px; display: inline-block; padding: 0 4px; width: 94px; color: #fff; text-align: center; font-weight: bold; font-size: 1.6rem; } .detailsList .planOption { right: 245px; background: #e78700; } .detailsList .planBasic { right: 135px; background: #3fe0c4; } .detailsList .planWide { right: 25px; background: #119fda; } /*--------------------- top ---------------------*/ .topBlock01 { padding: 100px 0; background: url("../img/top_bg01.png"); text-align: center; } .topBlock01 h1 { margin-bottom: 70px; color: #fff; text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.7); font-size: 5rem; } .topBlock01 marker { background: linear-gradient(transparent 70%, #fdd000 0%); } .topBlock01 ul { display: -webkit-flex; display: flex; margin: 0 auto; width: 1047px; } .topBlock01 ul li { width: 349px; text-align: left; } .topBlock02 { margin: 0 auto; width: 1000px; } .topBlock02 figure { margin: 40px 0; } .topBlock02 ul { display: -webkit-flex; display: flex; margin-bottom: 40px; } .topBlock02 li { margin-right: 50px; padding: 10px 20px 20px; width: 300px; border: 1px solid #9fa0a0; border-radius: 10px; background: #fff; } .topBlock02 li:last-child { margin-right: 0; } .topBlock02 dt { margin-bottom: 0.5em; padding: 35px 0 35px 90px; border-bottom: 1px solid #119fda; text-align: center; font-weight: bold; font-size: 2rem; } .topBlock02 .fsS { font-size: 1.4rem; } .topBlock02 li:nth-child(1) dt { background: url("../img/top_bg02.png") no-repeat 10px 50%; padding-top: 15px; padding-bottom: 25px; } .topBlock02 li:nth-child(2) dt { background: url("../img/top_bg03.png") no-repeat 13px 50%; } .topBlock02 li:nth-child(3) dt { padding-left: 130px; background: url("../img/top_bg04.png") no-repeat 13px 50%; } .topBlock02 .arrowBottom { position: relative; padding-bottom: 70px; } .topBlock02 .arrowBottom:before { position: absolute; right: 0; bottom: 0; left: 0; margin: auto; width: 0; height: 0; border-top: 40px solid #e60012; border-right: 60px solid transparent; border-left: 60px solid transparent; content: ""; } .bgtile > .topBlock02 { margin-top: -40px; } .topBlock03 { margin: 0 auto 40px; padding-bottom: 40px; width: 1000px; background: #fff; } .topBlock03 h1 span { display: inline-block; margin-top: 10px; padding: 10px 55px; border-radius: 10px; background: #119fda; color: #fff; } .topBlock03 .flex { display: -webkit-flex; display: flex; margin: 0 auto; width: 920px; border-right: 2px solid #9fa0a0; border-bottom: 2px solid #9fa0a0; flex-wrap: wrap; } .topBlock03 .flex > div { border-top: 2px solid #9fa0a0; border-left: 2px solid #9fa0a0; } .topBlock03 .flex > div:nth-child(1) { width: calc(100% / 3); background: url("../img/needs_bg01.png") no-repeat 100% 100%; } .topBlock03 .flex > div:nth-child(2) { width: calc(100% / 3); background: url("../img/needs_bg02.png") no-repeat 100% 100%; } .topBlock03 .flex > div:nth-child(3) { width: calc(100% / 3); background: url("../img/needs_bg03.png") no-repeat 100% 100%; } .topBlock03 .flex > div:nth-child(4) { width: calc(100% / 3); background: url("../img/needs_bg04.png") no-repeat 100% 100%; } .topBlock03 .flex > div:nth-child(5) { width: calc(100% / 3); background: url("../img/needs_bg05.png") no-repeat 100% 100%; } .topBlock03 .flex > div:nth-child(6) { width: calc(100% / 3); background: url("../img/needs_bg06.png") no-repeat 100% 100%; } .topBlock03 dt { padding: 10px 0; background: #119fda url("../img/needs_bg00.png") no-repeat 0 0 / cover; color: #fdd000; text-align: center; font-weight: bold; font-size: 2.6rem; } .topBlock03 dd { padding: 0 18px; } .topBlock03 p.txtLL { font-size: 2.1rem; } .topBlock03 p.txtS { font-size: 1.2rem; } /*--------------------- risk ---------------------*/ .riskBlock01 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .riskBlock01 figure { margin: 1em auto; } .riskBlock02 { margin: 0 auto; padding-bottom: 40px; width: 1000px; background: #fff; } .riskBlock02in { margin: 0 40px; } .riskBlock02 .list01 { position: relative; display: -webkit-flex; display: flex; padding-bottom: 190px; background: url("../img/risk_img02.png") no-repeat 50% 100%; } .riskBlock02 .list01 > li { padding: 15px 50px; width: 438px; border: 2px solid #9fa0a0; } .riskBlock02 .list01 > li:first-child { margin-right: 40px; } .riskBlock02 .list01 dt { text-align: center; font-weight: bold; font-size: 2.2rem; } .riskBlock02 .list01 dd ul { display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } .riskBlock02 .list01 dd li { margin-top: 0.3em; font-size: 1.8rem; } .riskBlock02 .note { margin-top: 55px; padding: 2px 0 50px; border-radius: 10px; background-image: linear-gradient(to right, #9fa0a0, #9fa0a0 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #9fa0a0, #9fa0a0 10px, transparent 10px, transparent 20px), linear-gradient(to right, #9fa0a0, #9fa0a0 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #9fa0a0, #9fa0a0 10px, transparent 10px, transparent 20px); background-position: left bottom,left bottom,right top, right top; background-size: 20px 2px, 2px 20px,20px 2px, 2px 20px; background-repeat: repeat-x, repeat-y,repeat-x, repeat-y; } .riskBlock02 .note h2 { margin: -20px 0 30px; text-align: center; } .riskBlock02 .note h2 span { display: inline-block; padding: 3px 15px; border: 2px solid #9fa0a0; background: #fff; font-size: 2.2rem; } .riskBlock02 .note ul { display: -webkit-flex; display: flex; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; } .riskBlock02 .note li { margin: 0 5px; width: 165px; border: 1px solid #9fa0a0; } .riskBlock02 .note li.wide { width: 595px; } .riskBlock02 .note li dt { padding: 5px 0; background: #b7e2f4; text-align: center; font-weight: bold; font-size: 1.5rem; } .riskBlock02 .note li dt span { display: block; font-size: 1.2rem; } .riskBlock02 .note li dd { padding: 10px; font-size: 1.4rem; } .riskBlock02 .note .case { position: relative; margin: 0 auto; padding-top: 75px; max-width: 860px; text-align: center; font-weight: bold; } .riskBlock02 .note .case:before { position: absolute; top: 25px; right: 0; left: 0; margin: auto; width: 0; height: 0; border-top: 40px solid #e60012; border-right: 60px solid transparent; border-left: 60px solid transparent; content: ""; } .riskBlock02 .note .case dt { margin-bottom: 15px; font-size: 2.4rem; } .riskBlock02 .note .case dd { padding: 20px 0; background: #e60012; color: #fff; font-size: 3rem; } .riskBlock03 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .riskBlock03 ul { display: -webkit-flex; display: flex; margin-bottom: 40px; -webkit-justify-content: space-between; justify-content: space-between; } .riskBlock03 li { padding: 15px 20px; width: 300px; border: 1px solid #9fa0a0; border-radius: 10px; } .riskBlock03 li:last-child { margin-right: 0; } .riskBlock03 dt { margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #9fa0a0; color: #119fda; text-align: center; font-weight: bold; font-size: 2rem; } .riskBlock03 dt span { display:block; font-size: 1.6rem; } /*--------------------- case ---------------------*/ .caseBlock01 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .caseBlock01 table { margin-bottom: 10px; border-collapse: collapse; } .caseBlock01 th, .caseBlock01 td { border: 1px solid #119fda; } .caseBlock01 thead th { padding: 10px; background: #119fda; color: #fff; font-size: 1.8rem; } .caseBlock01 tbody th { padding: 10px; width: 200px; background: #e7f5fb; color: #119fda; vertical-align: middle; text-align: center; } .caseBlock01 tbody td { padding: 20px; } .caseBlock01 dl { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; } .caseBlock01 dt { width: 160px; } .caseBlock01 dd { padding-left: 20px; width: 590px; border-left: 1px solid #7a7a7a; } .caseBlock02 { margin: 0 auto; padding-bottom: 40px; width: 1000px; background: #fff; } .caseBlock02in { margin: 0 40px; } .caseBlock02 table { margin-bottom: 20px; border: 2px solid #9fa0a0; border-collapse: collapse; font-size: 1.4rem; } .caseBlock02 thead th { font-weight: normal; } .caseBlock02 tbody th { font-size: 1.6rem; } .caseBlock02 th, .caseBlock02 td { padding: 15px; border: 1px solid #9fa0a0; text-align: center; } .caseBlock02 .trstyle01 { background: #fce9e5; } .caseBlock02 .trstyle02 { background: #e5e9f7; } .caseBlock02 .trstyle03 { background: #e5f5f0; } .caseBlock02 .trstyle01 em { color: #e60012; font-style: normal; } .caseBlock02 .trstyle02 em { color: #005bac; font-style: normal; } /*--------------------- details ---------------------*/ .detailsBlock01 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .detailsBlock01 .img { padding: 30px 40px; background: #e7f5fb; } .detailsBlock02 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .detailsBlock02 p.taR { margin: 0; font-size: 1.4rem; } .detailsBlock02 .star { color: #119fda; } .detailsBlock02 .detailsList { margin-top: 0.5em; } .detailsBlock02 .flex { display: -webkit-flex; display: flex; margin-bottom: 40px; -webkit-justify-content: space-between; justify-content: space-between; } .detailsBlock02 .diff { width: 480px; border: 1px solid #119fda; } .detailsBlock02 .diff dt { padding: 0.4em; background: #119fda; color: #fff; text-align: center; font-weight: bold; font-size: 2rem; } .detailsBlock02 .diff dd { padding: 1em 1.5em 1.5em; } .detailsBlock02 .diff dd img { display: block; margin: 1em auto 0; } .detailsBlock02 .diff dd marker { font-weight: bold; } .detailsBlock02 .phase { display: -webkit-flex; display: flex; margin-top: 1em; -webkit-justify-content: space-between; justify-content: space-between; } .detailsBlock02 .phase li { position: relative; padding-bottom: 30px; width: 260px; background: #fff; } .detailsBlock02 .phase li:not(:last-child)::after { position: absolute; top: 0; right: -57px; bottom: 0; margin: auto; width: 43px; height: 33px; background: url("../img/detail_img08.png") no-repeat; content: ""; } .detailsBlock02 .phase em { font-weight: bold; font-style: normal; } .detailsBlock02 .phase dt { padding: 0.4em; background: #119fda; color: #fff; text-align: center; font-weight: bold; font-size: 1.4rem; } .detailsBlock02 .phase dd.phaseCase { position: relative; padding: 85px 30px 55px; font-size: 1.6rem; } .detailsBlock02 .phase dd.phaseCase::before { position: absolute; top: 20px; right: 0; left: 0; margin: auto; width: 220px; height: 50px; content: ""; } .detailsBlock02 .phase li:nth-child(1) dd.phaseCase::before { background: url("../img/detail_img09.png") no-repeat 50% 50%; } .detailsBlock02 .phase li:nth-child(2) dd.phaseCase::before { background: url("../img/detail_img10.png") no-repeat 50% 50%; } .detailsBlock02 .phase li:nth-child(3) dd.phaseCase::before { background: url("../img/detail_img11.png") no-repeat 50% 50%; } .detailsBlock02 .phase dd.phaseCase::after { position: absolute; right: 0; bottom: 20px; left: 0; margin: auto; width: 0; height: 0; border-top: 15px solid #7a7a7a; border-right: 13px solid transparent; border-left: 13px solid transparent; content: ""; } .detailsBlock02 .phase dd.phaseResult em { color: #f00; } .securityList > dt { display: inline-block; margin-bottom: 0.4em; padding: 0.4em 0.6em; border: 2px solid #119fda; color: #119fda; font-weight: bold; font-size: 2rem; } .securityList > dd { margin-bottom: 0.8em; font-size: 1.8rem; line-height: 1.6; } .securityList > dd.img { margin-bottom: 40px; padding: 30px 40px; background: #efefef; text-align: center; } /*--------------------- needs ---------------------*/ .needsBlock01 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .needsBlock01 .flex { display: -webkit-flex; display: flex; margin: 0 auto; width: 1000px; border-right: 2px solid #9fa0a0; border-bottom: 2px solid #9fa0a0; flex-wrap: wrap; } .needsBlock01 .flex > div { border-top: 2px solid #9fa0a0; border-left: 2px solid #9fa0a0; } .needsBlock01 .flex > div:nth-child(1) { width: calc(100% / 3); background: url("../img/needs_bg01.png") no-repeat 100% 100%; } .needsBlock01 .flex > div:nth-child(2) { width: calc(100% / 3); background: url("../img/needs_bg02.png") no-repeat 100% 100%; } .needsBlock01 .flex > div:nth-child(3) { width: calc(100% / 3); background: url("../img/needs_bg03.png") no-repeat 100% 100%; } .needsBlock01 .flex > div:nth-child(4) { width: calc(100% / 3); background: url("../img/needs_bg04.png") no-repeat 100% 100%; } .needsBlock01 .flex > div:nth-child(5) { width: calc(100% / 3); background: url("../img/needs_bg05.png") no-repeat 100% 100%; } .needsBlock01 .flex > div:nth-child(6) { width: calc(100% / 3); background: url("../img/needs_bg06.png") no-repeat 100% 100%; } .needsBlock01 dt { padding: 10px 0; background: #119fda url("../img/needs_bg00.png") no-repeat 0 0 / cover; color: #fdd000; text-align: center; font-weight: bold; font-size: 2.6rem; } .needsBlock01 dd { padding: 0 20px; } .needsBlock01 p.txtLL { font-size: 2.1rem; } .needsBlock02 { margin: 0 auto 40px; width: 1000px; border: 1px solid #fdd000; background: #fff; } .needsBlock02in { margin: 0 28px 30px; } .needsBlock02 ul { display: -webkit-flex; display: flex; margin-bottom: 30px; } .needsBlock02 li { margin-right: 50px; width: 450px; border: 1px solid #9fa0a0; } .needsBlock02 li:last-child { margin-right: 0; } .needsBlock02 dt { padding: 10px; background: #ececec; text-align: center; font-size: 1.8rem; } .needsBlock02 dd { padding: 20px 0; text-align: center; font-weight: bold; font-size: 2.4rem; } .needsBlock03 { margin: 0 auto; padding-bottom: 20px; width: 1000px; background: #fff; } .needsBlock03in { margin: 0 40px 30px; } .needsBlock03 ul li { display: -webkit-flex; display: flex; margin-bottom: 30px; } .needsBlock03 .case { padding: 28px; width: 410px; border-radius: 10px; background-image: linear-gradient(to right, #119fda, #119fda 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #119fda, #119fda 10px, transparent 10px, transparent 20px), linear-gradient(to right, #119fda, #119fda 10px, transparent 10px, transparent 20px), linear-gradient(to bottom, #119fda, #119fda 10px, transparent 10px, transparent 20px); background-position: left bottom,left bottom,right top, right top; background-size: 20px 2px, 2px 20px,20px 2px, 2px 20px; background-repeat: repeat-x, repeat-y,repeat-x, repeat-y; } .needsBlock03 .case dd { margin-top: 15px; font-size: 1.8rem; } .needsBlock03 .case dd.irregular { margin: -4.5em 120px 1.5em 0; } .needsBlock03 .case p { margin: 0; font-size: 1.8rem; } .needsBlock03 .fee { margin-left: 70px; width: 440px; } .needsBlock03 .fee dl { position: relative; border: 2px solid #119fda; } .needsBlock03 .fee dl:before { position: absolute; top: 0; bottom: 0; left: -55px; margin: auto; width: 0; height: 0; border-top: 55px solid transparent; border-bottom: 55px solid transparent; border-left: 40px solid #119fda; content: ""; } .needsBlock03 .fee dt { padding: 10px 0; background: #119fda; color: #fff; text-align: center; font-weight: bold; font-size: 2rem; } .needsBlock03 .fee dd { padding: 20px; font-size: 1.8rem; } .needsBlock03 h2 { display: inline-block; margin-bottom: 20px; padding: 20px 50px; border-radius: 50%; background: #119fda; color: #fff; font-size: 2.8rem; } .needsBlock04 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } /*--------------------- limit ---------------------*/ .limitBlock01 { margin: 0 auto; padding-bottom: 40px; width: 1000px; } .limitBlock02 { margin: 0 auto; width: 1000px; border: 1px solid #fdd000; } .limitBlock02in { margin: 0 28px 30px; } .limitBlock02dl { border-top: 1px solid #9fa0a0; border-right: 1px solid #9fa0a0; border-left: 1px solid #9fa0a0; } .limitBlock02dl dt { float: left; padding: 15px 30px; } .limitBlock02dl dd { position: relative; padding: 15px 30px 15px 770px; border-bottom: 1px solid #9fa0a0; } .limitBlock02dl dd:before { position: absolute; top: 0; bottom: 0; left: 635px; margin: auto; width: 95px; height: 10px; background: #000; content: ""; } .limitBlock02dl dd:after { position: absolute; top: 0; bottom: 0; left: 725px; margin: auto; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 10px solid #000; content: ""; } .limitBlock02dl2 { display: -webkit-flex; display: flex; margin: 0 auto; width: 790px; font-weight: bold; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; } .limitBlock02dl2 dt { display: inline-block; float: left; padding: 20px; background: #fff6cc; font-size: 1.8rem; } .limitBlock02dl2 dd { position: relative; font-size: 2.5rem; } .limitBlock02dl2 dd:before { position: absolute; top: 0; bottom: 0; left: -95px; margin: auto; width: 55px; height: 22px; background: #fdd000; content: ""; } .limitBlock02dl2 dd:after { position: absolute; top: -25%; bottom: -25%; left: -40px; margin: auto; width: 0; height: 0; border-top: 32px solid transparent; border-bottom: 32px solid transparent; border-left: 22px solid #fdd000; content: ""; } .limitBlock03 { margin: 0 auto; width: 1000px; } .limitBlock03 .arrowTop { position: relative; padding-top: 70px; } .limitBlock03 .arrowTop:before { position: absolute; top: 0; right: 0; left: 0; margin: auto; width: 0; height: 0; border-top: 40px solid #e60012; border-right: 60px solid transparent; border-left: 60px solid transparent; content: ""; } /*--------------------- example ---------------------*/ /*--------------------- riskmanagement ---------------------*/ /*--------------------- fee ---------------------*/ .feeCaseBlock { margin: 25px auto; padding: 30px 40px; width: 1000px; background: #f6f6f6; } /*--------------------- glossary ---------------------*/ .glossaryBlock { margin: 0 auto 80px; width: 1000px; } .glossaryBlock p { margin-top: 17px; line-height: 1.6; } /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin: 80px auto; width: 1000px; } .sitepolicyBlock p { margin-top: 17px; line-height: 1.6; } /*--------------------- contact ---------------------*/ .formBlock { margin: 0 auto 60px; width: 1000px; } .formBlock em.required { display: inline-block; padding: 5px 10px; background: #e60012; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock em.optional { display: inline-block; padding: 5px 10px; background: #119fda; color: #fff; font-weight: normal; font-style: normal; font-size: 1.2rem; line-height: 1; } .formBlock h2 { margin-bottom: 20px; } .formBlock h3 { margin-top: 40px; margin-bottom: 10px; } .formBlock h3 em { margin-right: 10px; } .formBlock p { margin-bottom: 1.5em; } .formBlock .borderBoxTopTxt{ margin-bottom: 1em; } .formBlock .innerTxt { margin: 0 0 1.5em; } .formBlock .innerTxt-indent4{ margin-left: 3.55em; text-indent: -3.55em; } .formBlock .borderBoxInput { margin-bottom: 1.5em; } .formBlock .btnBlock { margin-top: 50px; text-align: center; } .formBlock .btn { margin: 0 10px; width: 400px; font-size: 2.2rem; font-weight: 500; white-space: normal; } .formBlock .formNoteList {margin-bottom: 1em;padding-left: 1em;text-indent: -1em;} .formBlock .optionalBlock { display: none; } .formBlock .moreQ { position: relative; margin-bottom: 50px; padding: 0.5em; background: #119fda; color: #fff; text-align: center; font-weight: bold; font-size: 2rem; } .formBlock .moreQ:before { position: absolute; right: 0; bottom: -42px; left: 0; margin: auto; width: 0; height: 0; border-top: 28px solid #119fda; border-right: 85px solid transparent; border-left: 85px solid transparent; content: ""; } .formBlock .noticeBlock { margin: 20px 0 10px; padding: 25px 40px; border: 1px solid #9fa0a0; } .formBlock .noticeBlock dt { text-align: center; font-weight: bold; font-size: 1.8rem; } .formBlock .noticeBlock dd { margin-top: 15px; } .formBlock .noticeBlock dd:last-child { font-size: 1.4rem; } .formType01 { margin-bottom: 20px; border-collapse: collapse; } .formType01 th { padding: 15px 18px; border: 1px solid #ccc; background: #f0f0f0; text-align: left; } .formType01 th em { margin-right: 10px; } .formType01 td { padding: 10px 20px; border: 1px solid #ccc; } .formType01 td input[type=text], .formType01 td input[type=email], .formType01 td input[type=tel], .formType01 td input[type=url] { padding: 5px; width: 470px; border: 1px solid #ccc; } .formType01 td textarea { padding: 5px; width: 700px; height: 160px; border: 1px solid #ccc; } .formType01 label { display: inline-block; margin-right: 25px; } .formType01 input[type=radio], .formType01 input[type=checkbox] { margin-right: 5px; } .formType02 { margin-bottom: 20px; border-collapse: collapse; } .formType02 th { padding: 15px 18px; border: 1px solid #ccc; background: #f0f0f0; text-align: left; } .formType02 th em { margin-right: 10px; } .formType02 td { overflow: hidden; padding: 20px 40px; border: 1px solid #ccc; } .formType02 td .tdWrap { display: block; overflow: hidden; } .formType02 td .tdWrap +.tdWrap { margin-top: 0.3em; } .formType02 td .tdL { float: left; } .formType02 td .tdR { float: right; } .formType02 td input[type=text] { margin: 0 5px; padding: 5px; border: 1px solid #ccc; background: #fff; } .formType02 td input.widthL { width: 340px; } .formType02 td input.widthM { width: 170px; } .formType02 td input.widthS { width: 70px; } .formType02 label { display: inline-block; margin-right: 25px; } .formType02 .mr25 { margin-right: 25px; } .formType02 label:not(:last-child){ margin-bottom: 0.3em; } .formType02 input[type=radio], .formType02 input[type=checkbox] { margin-right: 5px; } .formType02 td textarea { padding: 5px; width: 100%; height: 160px; border: 1px solid #ccc; } .formType02 td input.widthW {width: 100%;} .formType03 { border-collapse: collapse; } .formType03 th { padding: 10px 15px; border-left: 1px solid #ccc; background: #e7f5fb; text-align: center; } .formType03 td { padding: 10px 15px; border: 1px solid #ccc; } .formNestTbl {table-layout: fixed;} .formNestTbl th:first-of-type{ width: 7%; } .formNestTbl td input[type=text] { width: 100%; margin: 0!important;} .formDoneBlock { margin: 40px auto 80px; padding: 0 0 20px; width: 1000px; text-align: center; } .formDoneBlock p { margin-bottom: 1.5em; line-height: 1.6; } .channelSwitch { padding-top: 18px; background: #ecebeb; } .channelSwitchTitle { display: none; } .channelSwitchPanel { display: -webkit-flex; display: flex; margin: 0 auto; width: 1000px; -webkit-justify-content: space-between; justify-content: space-between; } .channelSwitchPanel li { position: relative; width: 178px; } .channelSwitchPanel li:after { position: absolute; bottom: 0; left: 0; width: 178px; height: 3px; content: ""; } .channelSwitchPanel li:nth-child(1):after { background: #00665a; } .channelSwitchPanel li:nth-child(2):after { background: #4754fe; } .channelSwitchPanel li:nth-child(3):after { background: #39b019; } .channelSwitchPanel li:nth-child(4):after { background: #f67db3; } .channelSwitchPanel li:nth-child(5):after { background: #119fda; } .channelSwitchPanel a { display: block; padding: 10px; border-top-left-radius: 5px; border-top-right-radius: 5px; color: #120705; text-align: center; text-decoration: none; font-size: 1.2rem; line-height: 1; } .channelSwitchPanel li a.is-active { color: #fff; } .channelSwitchPanel li:nth-child(1) a.is-active { background: #00665a; } .channelSwitchPanel li:nth-child(2) a.is-active { background: #4754fe; } .channelSwitchPanel li:nth-child(3) a.is-active { background: #39b019; } .channelSwitchPanel li:nth-child(4) a.is-active { background: #f67db3; } .channelSwitchPanel li:nth-child(5) a.is-active { background: #119fda; }