/*==================================== ---------------------------------- 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: #202020; 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: 10vw; height: 20vw; background: url("/common/img/icon_gototop.png") no-repeat 0 0 / 10vw auto; text-indent:-9999px; } /*==================================== 1. Header ====================================*/ header { position: relative; height: 21vw; border-bottom: 0.6vw solid #e0e0e0; } .l-header__h1 { float: left; margin: 4vw 0 0 4vw; width: 75vw; } #panel-btn { position: absolute; top: 0; right: 4vw; z-index: 2000; display: inline-block; width: 11vw; height: 11vw; background: #20a0dd; 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; } ul.l-header_nav 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; } ul.l-header_nav li:last-child { border: none; } ul.l-header_nav 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; } ul.l-header_nav li > a:before { position: absolute; top: 50%; left: 3vw; content: ""; margin-top: -3.5vw; width: 7vw; height: 7vw; } ul.l-header_contact { display: -webkit-flex; display: flex; font-size: 3.4vw; } ul.l-header_contact li { width: 50vw; } ul.l-header_contact li a { position: relative; display: block; padding: 3vw 3vw 3vw 7vw; color: #fff; text-decoration: none; text-align: center; } ul.l-header_contact li a.requestBtn { background: #ef8100 url("/common/img/icon_estimate.svg") no-repeat 5vw 50% / 3.6vw auto; } ul.l-header_contact li a.contactBtn { background: #20a0dd url("/common/img/icon_contact.svg") no-repeat 10vw 50% / 4.8vw auto; } .l-header__tel { padding: 4vw; text-align: center; } .l-header__tel img { width: 50vw; } /*==================================== 2. Main ====================================*/ main { display: block; overflow: hidden; background: #fff; font-size: 4vw; } main.page { margin: 0 5vw; } /*====== [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 ======*/ .titleLV1 { position: relative; margin-top: 5vw; padding-left: 23vw; color: #20a0dd; font-size: 6vw; } .titleLV1 span { letter-spacing: -0.07em; font-size: 4.3vw; } .titleLV1:before { position: absolute; top: 50%; left: 0; margin-top: -10vw; width: 20vw; height: 20vw; content: ""; } .titleLV1.t1:before { background: url("/common/img/bg_titleLV1_01.png") no-repeat 50% 50% / 100% auto; } .titleLV1.t2:before { background: url("/common/img/bg_titleLV1_02.png") no-repeat 50% 50% / 100% auto; } .titleLV1.t3:before { background: url("/common/img/bg_titleLV1_03.png") no-repeat 50% 50% / 100% auto; } .titleLV1.t4 { padding-left: 18vw; } .titleLV1.t4:before { background: url("/common/img/bg_titleLV1_04.png") no-repeat 50% 50% / auto 19vw; } .titleLV1.t5:before { background: url("/common/img/bg_titleLV1_05.png") no-repeat 50% 50% / auto 100%; } .titleLV2 { margin-top: 10vw; padding: 4vw 6vw; background: url("/common/img/bg_btn.png") no-repeat 0 50% / 100% auto; color: #fff; font-size: 5vw; line-height: 1; min-height: 14vw; } .titleLV2 span { font-size: 3.4vw; } .titleLV3 { position: relative; margin-top: 6vw; padding: 0 0 2vw 4vw; border-bottom: 0.4vw solid #d2ecf8; font-size: 5.2vw; line-height: 1; } .titleLV3:before { position: absolute; top: -1vw; left: 0; width: 2vw; height: 7vw; border-radius: 3px; background: #20a0dd; content: ""; } .titleLV4 { display: -webkit-flex; display: flex; margin-top: 10vw; } .titleLV4 span:first-child { float: left; display: -webkit-flex; display: flex; margin: 1vw 2vw 0 0; width: 15vw ;height: 15vw; border-radius: 50%; background: #109954; color: #ffff06; font-size: 4.6vw; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .titleLV4 span:last-child { width: 75vw; } .titleLV4 mark { background: linear-gradient(transparent 50%, #ffff06 50%); color: #109954; font-size: 5.2vw; } /*====== [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; } /*====== [NODULE] table style ======*/ table { width: 100%; border-collapse: collapse; margin: 3vw 0; } caption { margin-bottom: 2vw; color: #009b69; font-weight: bold; font-size: 5.2vw; } th, td { padding: 2vw 1vw; border: 0.2vw solid #b1e1f7; text-align: center; } th { background: #d2ecf8; font-weight: normal; } /*====== [NODULE] btn style ======*/ .btnBlock { margin: 7vw 0 0; text-align: center; } .btn { padding: 4vw 3vw; position: relative; display: block; border-radius: 1.5vw; color: #fff; text-align: center; text-decoration: none; font-weight: bold; line-height: 1; background: #20a0dd; font-size: 4vw; } .arrow { position: relative; padding-left: 7vw; } .arrow:before { position: absolute; top: 0; bottom: 0; left: 0; margin: auto; width: 5vw; height: 5vw; background: url("/common/img/icon_arrow_y.svg") no-repeat 0 50% / 4.5vw auto; content: ""; } /*====== [NODULE] notice style ======*/ span.notice { color: #bf0707; } /*====== [NODULE] block style ======*/ .binder { position: relative; margin-top: 10vw; border: 5vw solid #fccc86; border-radius: 3vw; } .binder:before { position: absolute; top: -7vw; left: 50%; margin-left: -25vw; width: 50vw; height: 20vw; background: url("/common/img/bg_clip.svg") no-repeat 0 0 / 50vw auto; content: ""; } .binderInner { border: solid #fff; border-width: 12vw 5vw 5vw; background: url("/common/img/bg_topblock02.png"); } /*==================================== 3. Footer ====================================*/ footer { font-size: 3.7vw; line-height: 1; } footer.top { margin-top: 0; } footer a { color: #202020; } .l-foot_contact { padding: 5vw; background: #20a0dd; } .l-foot_contact p { color: #fff; text-align: center; font-size: 4.6vw; line-height: 1.3; margin: 0; } .l-foot_contact ul {} .l-foot_contact li { margin-top: 3vw; } .l-foot_contact li a { display: block; padding: 5vw; border-radius: 3vw; background: #fff; color: #20a0dd; text-align: center; text-decoration: none; font-weight: bold; font-size: 5.2vw; } .l-foot_contact li span { position: relative; display: inline-block; padding-left: 11vw; } .l-foot_contact li span:before { position: absolute; top: 50%; left: 0; margin-top: -3.5vw; width: 7vw; height: 7vw; content: ""; } .l-foot_contact li span.requestBtn:before { background: url("/common/img/icon_estimate_o.svg") no-repeat 50% 50% / auto 7vw; } .l-foot_contact li span.contactBtn:before { background: url("/common/img/icon_contact_o.svg") no-repeat 50% 50% / 7vw auto; } .l-foot { padding: 5vw; } .l-foot h1 { font-size: 5vw; margin-top: 5vw; } .l-foot h1 em { display: block; margin-bottom: 5px; font-style: normal; font-size: 4vw; } .l-foot dl { margin-top: 5vw; border-top: 0.2vw solid #ccc; } .l-foot dt { float: left; padding-top: 2vw; } .l-foot dd { padding: 3vw 0 3vw 10em; border-bottom: 0.2vw solid #ccc; } .l-foot address { margin-top: 5vw; font-style: normal; } .l-foot p { line-height: 1.6; } .l-foot ul { margin-bottom: 5vw; } .l-foot ul li { margin: 0 22px 15px 0; } .l-foot ul a { display: inline-block; padding-left: 5vw; background: url("/common/img/icon_window.svg") no-repeat 0 50% / 4vw auto; } #page-nav { display: none; } /*==================================== 4. Contents ====================================*/ /*--------------------- top ---------------------*/ .topBlock01 { background: url("/common/img/top_img00_bg.png") no-repeat 50% 50% / 100vw auto; height: 50vw; padding-top: 9vw; } .topBlock01 h1 { background: rgba(255,255,255,0.5); padding: 6vw 0; text-align: center; } .topBlock01 h1 img { width: 70vw; height: auto; } .topBlock02 { position: relative; border: 5vw solid #fccc86; } .topBlock02:before { position: absolute; top: -7vw; left: 50%; margin-left: -25vw; width: 50vw; height: 20vw; background: url("/common/img/bg_clip.svg") no-repeat 0 0 / 50vw auto; content: ""; } .topBlock02 div { border: solid #fff; border-width: 12vw 5vw 5vw; background: url("/common/img/bg_topblock02.png"); } .topBlock02 h2 { background: url("/common/img/bg_titleLV2.png") no-repeat 50% 50% / auto 5.2vw; color: #fff; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; height: 5.2vw; font-size: 4vw; } .topBlock02 ul { position: relative; display: -webkit-flex; display: flex; margin: 25px auto 0; width: 80vw; -webkit-justify-content: space-between; justify-content: space-between; } .topBlock02 ul:before { position: absolute; content: ""; width: 0; height: 0; margin: auto; top: 0; bottom: 0; right: 0; left: 0; border-top: 10vw solid transparent; border-bottom: 10vw solid transparent; border-left: 3vw solid #ef8100; } .topBlock02 li { width: 35vw; text-align: center; } .topBlock03 { padding: 13vw 5vw 5vw; background: #d2ecf8; position: relative; } .topBlock03:before { position: absolute; content: ""; width: 10vw; height: 10vw; top: 10px; left: 0; right: 0; margin: auto; background: url("/common/img/icon_arrow.svg") no-repeat 50% 50% / 10vw auto; transform:rotate(90deg); } .topBlock03 h2 { margin-bottom: 5vw; color: #20a0dd; text-align: center; font-size: 4.4vw; } .topBlock03 h2 span { font-size: 5vw; } .topBlock03in { background: #fff; border-radius: 3vw; padding: 5vw; } .topBlock03 h3 { margin-bottom: 3vw; color: #20a0dd; text-align: center; font-size: 5vw; } .topBlock03 h3 span { font-size: 4vw; display: block; } .topBlock03 h4 { margin-bottom: 3vw; text-align: center; font-size: 4.6vw; } .topBlock03 p { line-height: 1.4; } .topBlock03 ul { } .topBlock03 li { border-bottom: 1px solid #d2ecf8; padding: 3vw 0; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; font-weight: bold; font-size: 4vw; } .topBlock03 li span { width: 15vw; height: 15vw; border-radius: 50%; font-size: 4vw; color: #ffff00; background: #20a0dd; margin-right: 2vw; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center; line-height: 1.1; } /*--------------------- compensation ---------------------*/ .compBlock01 { } .compBlock01 h2 { position: relative; margin-bottom: 5vw; color: #20a0dd; font-size: 5.2vw; } .compBlock01 dl {} .compBlock01 dt { display: -webkit-flex; display: flex; font-weight: bold; font-size: 4.8vw; -webkit-align-items: center; align-items: center; } .compBlock01 dt span:first-child { display: -webkit-flex; display: flex; margin-right: 2vw; width: 20vw; height: 15vw; border-radius: 50%; background: #20a0dd; color: #ffff00; text-align: center; font-size: 4vw; line-height: 1.1; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .compBlock01 dd { margin: 2vw 0 0; font-size: 4.2vw; } .compBlock01 dd small { font-size: 3.1vw; } .compBlock01 figure { text-align: center; margin-bottom: 5vw; } .compBlock01 .arrowW { position: relative; padding-left: 7vw; } .compBlock01 .arrowW:before { position: absolute; top: 50%; left: 0; margin-top: -3.5vw; width: 5vw; height: 7vw; background: url("/common/img/icon_arrow_w.svg") no-repeat 50% 50% / 5vw auto; content: ""; transform:rotate(90deg); } .compBlock02 { } .compBlock02 p em { color: #ef8100; font-style: normal; } .compBlock02 .setBlock01 { position: relative; display: -webkit-flex; display: flex; margin: 5vw 0; -webkit-justify-content: space-between; justify-content: space-between; } .compBlock02 .setBlock01:before { position: absolute; top: 50%; bottom: 0; left: 50%; margin: -4vw auto auto -4vw; color: #20a0dd; content: "＋"; font-size: 8vw; } .compBlock02 .setBlock01 dl { padding: 5vw 3vw; width: 40vw; border-radius: 3vw; background: #20a0dd; color: #fff; text-align: center; } .compBlock02 .setBlock01 dt { margin-bottom: 2vw; padding-bottom: 2vw; border-bottom: 0.2vw solid #fff; font-weight: bold; } .compBlock02 .setBlock01 dd {} .compBlock02 div.age { overflow: scroll; } .compBlock02 table.age { font-size: 3.1vw; } .compBlock02 table.age caption { color: #333; font-weight: normal; } .compBlock02 table + .komeList { margin-top: -2vw; line-height: 1.2; } .compBlock02 .titleLV3 + .list { margin-top: 1.5em; } .compBlock02 .example { color: #20a0dd; text-align: center; font-weight: bold; } .compBlock02 .example dt { margin: 5vw 0; padding: 3vw; border: 0.4vw solid #20a0dd; border-radius: 3vw; font-size: 4.9vw; } .compBlock02 .example dd { font-size: 5.2vw; } .compBlock02 .example dd span { color: #ef8100; } .compBlock02 .example dd span span { font-size: 6vw; } .compBlock02 .example mark { background: linear-gradient(transparent 50%, #ffff06 50%); color: #20a0dd; font-weight: bold; } /*--------------------- service ---------------------*/ .serviceBlock01 { } .serviceBlock01 > dl { margin-top: 5vw; } .serviceBlock01 > dl dt { margin-bottom: 2vw; font-size: 5vw; } .serviceBlock01 > dl dt mark { display: inline-block; padding: 0 1vw; background: url("/common/img/bg_title_topblock02.png") no-repeat -1vw 100% / auto 100%; color: #009b69; font-weight: bold; } .serviceBlock01 > dl dd { margin-bottom: 3vw; padding-left: 8vw; background: url("/common/img/icon_arrow.svg") no-repeat 0 5px / 6vw auto; font-size: 4.6vw; } .serviceBlock01 .komeList { font-size: 3.1vw; } .serviceBlock01 p.t1, .serviceBlock01 p.t2, .serviceBlock01 p.t3 { position: relative; padding-left: 20vw; } .serviceBlock01 p:before { position: absolute; top: 50%; left: 0; margin-top: -40px; width: 20vw; height: 20vw; content: ""; } .serviceBlock01 p.t1:before { background: url("/common/img/income_img01.png") no-repeat 0 50% / 18vw auto; } .serviceBlock01 p.t2:before { background: url("/common/img/income_img02.png") no-repeat 50% 50% / auto 20vw; } .serviceBlock01 p.t3:before { background: url("/common/img/income_img03.png") no-repeat 0 50% / 18vw auto; } .serviceBlock01 p span { display: inline-block; padding: 0.5vw 1vw; background: #ef8100; color: #fff; font-weight: bold; font-size: 3.4vw; } .serviceBlock01 p em { color: #ef8100; font-style: normal; } .serviceBlock01 div.reception { margin-bottom: 3vw; padding: 3vw 5vw 1vw; background: #d2ecf8; } .serviceBlock01 div.reception h4 { margin-bottom: 2vw; } .serviceBlock01 div.reception h4 span { font-weight: normal; font-size: 3.4vw; } .serviceBlock01 div.reception dl { } .serviceBlock01 div.reception dt { float: left; margin-top: 2vw; } .serviceBlock01 div.reception dd { border-top: 1px solid #97d6d5; padding: 1.5vw 0 1.5vw 12em; } .serviceBlock02 { margin: 5vw 0; padding-top: 5vw; border-top: 0.2vw solid #97d6d5; } .serviceBlock02 h2 { position: relative; color: #ef8100; text-align: center; font-size: 2.4rem; padding-left: 8vw; } .serviceBlock02 h2:before { position: absolute; margin: 0 0 0 -8vw; width: 8vw; height: 8vw; background: url("/common/img/icon_caution.png") no-repeat 0 50% / 8vw auto; content: ""; } .serviceBlock02 p { margin-top: 0; text-align: center; } .serviceBlock02 .list { margin-top: 1.5em; } .serviceBlock02 .komeList { margin-top: 1.5em; font-size: 3.4vw; } /*--------------------- flow ---------------------*/ .flowBlock01 { margin-bottom: 8vw; } .flowBlock01 th { vertical-align: top; width: 30vw !important; } .flowBlock01 td { text-align: left; width: 20vw; vertical-align: top; } .flowBlock01 .day { background: #eee; text-align: right; width: 20vw !important; } .flowBlock01 em { font-weight: bold; font-style: normal; } .flowBlock01 .komeList { margin-top: 1.5em; font-size: 3.4vw; } /*--------------------- contact ---------------------*/ .formBlock { margin-bottom: 8vw; } .formBlock span.required { display: inline-block; padding: 1vw; background: #ef8100; color: #fff; font-weight: bold; font-size: 3.1vw; line-height: 1; margin-right: 2vw; } .formBlock .btn { display: block; text-align: center; margin: 3vw 0; padding: 4vw 2vw 4vw 10vw; font-size: 6vw; position: relative; } .formBlock .btn:before { left: 10vw; position: absolute; width: 10vw; height: 10vw; top: 50%; margin-top: -5vw; background: url("/common/img/icon_arrow_y.svg") no-repeat 50% 50% / 8vw auto; content: ""; } .formBlock small { display: block; font-weight: normal; font-size: 3.1vw; } .formType01 { margin-top: 5vw; border-collapse: collapse; } .formType01 th, .formType01 td { text-align: left; padding: 3vw 4vw; display: block; } .formType01 td input[type=text], .formType01 td input[type=email], .formType01 td input[type=tel] { padding: 3vw 4vw; width: 81vw; border: 0.2vw solid #ccc; } .formType01 td textarea { padding: 3vw 4vw; width: 80vw; height: 8em; border: 0.2vw solid #ccc; } .formType01 label { display: inline-block; margin-right: 3vw; } .formType01 input[type=radio], .formType01 input[type=checkbox] { margin-right: 1vw; } .formType01 select { border: 0.2vw solid #333; border-radius: 2vw; padding: 2vw 7vw 2vw 3vw; background: url("/common/img/icon_arrrow_b.png") no-repeat 100% 50%; } .formType01 select.long { width: 80vw; margin-bottom: 3vw; } .formType01 .col { display: -webkit-flex; display: flex; flex-wrap: wrap; } .formDoneBlock { margin: 10vw 0 7vw; padding: 5vw; background: #f0f0f0; text-align: center; } .formDoneBlock p { margin-bottom: 1.5em; line-height: 1.6; } .formBlock .btnBlock input[type=submit], .formBlock .btnBlock a { display: inline-block; padding: 3vw 5vw 3vw 15vw; font-size: 5vw; position: relative; cursor: pointer; background: #20a0dd url("/common/img/icon_arrow_y.svg") no-repeat 5vw 50% / 7vw auto; color: #fff; font-weight: bold; border-radius: 2vw; text-decoration: none; } /*--------------------- ★riskmanagement ---------------------*/ .risk .case { position: relative; margin: 5vw 0 15vw; padding: 5vw; border-radius: 3vw; background: #cdf1e3; } .risk .case:after { position: absolute; bottom: -12vw; left: 50%; margin-left: -5vw; width: 10vw; height: 7vw; background: url("/common/img/icon_arrow.svg") no-repeat 0 0 / 10vw auto; content: ""; transform:rotate(90deg); } .risk h4 { text-align: center; font-size: 4.6vw; } .risk .moreInfo {} .risk .moreInfo .btn { margin: 2vw; } .risk .caseAnswer { margin-bottom: 7vw; text-align: center; font-size: 4.6vw; } .risk .caseAnswer em { color: #109954; font-style: normal; font-size: 5.2vw; } .risk mark { background: linear-gradient(transparent 50%, #ffff06 50%); font-weight: bold; } .riskBlock01 h2 { padding-bottom: 3vw; background: url("/common/img/bg_title_topblock02.png") no-repeat 50% 80% / 100% auto; color: #009b69; text-align: center; font-size: 6vw; line-height: 1; } .riskBlock01 ul { position: relative; display: -webkit-flex; display: flex; margin: 25px auto 0; width: 70vw; background: url("/common/img/bg_topblock02_02.png") repeat-y 50% 0; -webkit-justify-content: space-between; justify-content: space-between; } .riskBlock01 ul:before { position: absolute; top: -26px; left: 50%; margin-left: -20vw; width: 40vw; height: 58px; background: url("/common/img/bg_topblock02_03.png") no-repeat 50% 0 / 40vw auto; content: ""; } .riskBlock01 li { width: 33vw; text-align: center; } .riskBlock01 mark { color: #009b69; font-size: 5vw; } .riskBlock01 a { display: block; margin: 2vw auto 0; padding: 1.5vw 0; background: url("/common/img/bg_btn.png") no-repeat 0 0 / 100% auto; color: #fff; text-align: center; text-decoration: none; font-weight: bold; font-size: 3vw; line-height: 1; } .riskBlock01 .arrowW { position: relative; padding-left: 4vw; } .riskBlock01 .arrowW:before { position: absolute; top: 50%; left: 0; margin-top: -2vw; width: 4vw; height: 4vw; background: url("/common/img/icon_arrow_w.svg") no-repeat 50% 50% / 3vw auto; content: ""; transform:rotate(90deg); } .riskBlock02 { margin: 10vw 0; } .riskBlock02 .riskList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .riskBlock02 .riskList li { margin-top: 5vw; width: 38vw; } .riskBlock02 .riskList figure { margin-bottom: 3vw; } .riskBlock02 .priceList { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; flex-wrap: wrap; } .riskBlock02 .priceList li { padding: 3vw; margin-top: 3vw; width: 43vw; border-radius: 3vw; background: #009b69; color: #fff; text-align: center; font-weight: bold; line-height: 1; } .riskBlock02 p { line-height: 1.6; } .riskBlock02 .caseList {} .riskBlock02 .caseList > div { margin-top: 7vw; } .riskBlock02 .caseList > div:first-child { padding-bottom: 5vw; border-bottom: 0.4vw solid #cdf1e3; } .riskBlock02 .caseList h5 { margin-bottom: 3vw; padding: 2vw; background: #109954; color: #fff; text-align: center; font-size: 4.6vw; line-height: 1; } .riskBlock02 .caseList dl { display: block; overflow: hidden; margin-bottom: 5vw; } .riskBlock02 .caseList dt { text-align: center; } .riskBlock02 .caseList dd { margin-top: 3vw; } .riskBlock03 { margin-bottom: 5vw; } .riskBlock03 .featureList { font-weight: bold; font-size: 4.6vw; } .riskBlock03 .featureList li { display: -webkit-flex; display: flex; margin-bottom: 3vw; padding-bottom: 3vw; border-bottom: 0.4vw solid #97d6d5; -webkit-align-items: center; align-items: center; } .riskBlock03 .featureList span { display: -webkit-flex; display: flex; margin-right: 2vw; width: 15vw; height: 15vw; border-radius: 50%; background: #009b69; color: #ff0; text-align: center; font-size: 4vw; line-height: 1.1; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } /*--------------------- ★medical ---------------------*/ .medicalBlock01 { margin-bottom: 10vw; } .medicalBlock01 h2 { position: relative; margin-bottom: 5vw; padding-left: 18vw; color: #009b69; font-size: 6vw; } .medicalBlock01 h2 span { position: absolute; top: 0; left: 0; display: -webkit-flex; display: flex; width: 15vw; height: 15vw; border-radius: 50%; background: #ef8100; color: #fff; text-align: center; font-weight: normal; font-size: 3.4vw; line-height: 1.1; transform:rotate(-15deg); -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .medicalBlock01 h3 { margin-bottom: 3vw; text-align: center; font-size: 6vw; line-height: 1.2; } .medicalBlock01 h3 + p { font-size: 4.9vw; margin: 0 5vw 5vw; } .medicalBlock01 .moreInfo { margin-bottom: 5vw; } .medicalBlock01 h4 { display: -webkit-flex; display: flex; margin: 5vw 0; color: #009b69; text-align: center; font-size: 5.2vw; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .medicalBlock01 h4 span:first-child { display: -webkit-flex; display: flex; margin-right: 2vw; width: 15vw; height: 15vw; border: 0.4vw solid #ef8100; border-radius: 50%; color: #ef8100; text-align: center; font-size: 3.4vw; line-height: 1.1; transform:rotate(-15deg); -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .medicalBlock01 h4 span:last-child { width: 55vw; } .medicalBlock01 p {} .medicalBlock01 .arrowW { position: relative; padding-left: 7vw; } .medicalBlock01 .arrowW:before { position: absolute; top: 50%; left: 0; margin-top: -3.5vw; width: 5vw; height: 7vw; background: url("/common/img/icon_arrow_w.svg") no-repeat 50% 50% / 5vw auto; content: ""; transform:rotate(90deg); } .medicalBlock02 {} .medicalBlock02 .setBlock, .medicalBlock02 .setBlock01, .medicalBlock02 .setBlock02 { margin: 5vw 0; } .medicalBlock02 dl.green { border: 0.4vw solid #009b69; border-radius: 3vw; position: relative; } .medicalBlock02 dl.green dt { padding: 3vw; background: #009b69; color: #fff; text-align: center; font-weight: bold; } .medicalBlock02 dl.green dt:first-child { border-top-left-radius: 2vw; border-top-right-radius: 2vw; } .medicalBlock02 dl.green dd { margin: 0 3vw; padding: 3vw 0; } .medicalBlock02 dl.green dd.ex { padding-bottom: 20px; border-top: 0.2vw solid #009b69; } .medicalBlock02 dl.green figure { text-align: center; } .medicalBlock02 span.ex { display: block; text-align: right; } .medicalBlock02 dl.orange { border: 0.4vw solid #ef8100; border-radius: 3vw; position: relative; } .medicalBlock02 dl.orange dt { padding: 3vw; background: #ef8100; color: #fff; text-align: center; font-weight: bold; } .medicalBlock02 dl.orange dt:first-child { border-top-left-radius: 2vw; border-top-right-radius: 2vw; } .medicalBlock02 dl.orange dd { margin: 0 3vw; padding: 3vw 0; } .medicalBlock02 dl.green2 { padding: 5vw 5vw 1vw; background: #bfe6d9; line-height: 1.4; } .medicalBlock02 dl.green2 figure { margin: 3vw 0; text-align: center; } .medicalBlock02 dl.orange2 { padding: 5vw 5vw 1vw; background: #fbdfbf; line-height: 1.4; } .medicalBlock02 dl.orange2 figure { margin: 3vw 0; text-align: center; } .medicalBlock02 dl.orange2 .space {} .medicalBlock02 th.max { background: #009b69; color: #fff; } .medicalBlock02 table { margin-top: 5vw; } .medicalBlock02 table + small { display: block; margin-top: 3vw; font-size: 4vw; } .medicalBlock02 table + .time { margin-top: 0.5em; text-align: right; } .medicalBlock02 p + dl.green { margin-top: 5vw; } .medicalBlock02 small strong { color: #ef8100; font-weight: normal; } .medicalBlock02 .setBlock01 div, .medicalBlock02 .setBlock02 div { margin-top: 5vw; } .medicalBlock02 .setBlock01 div h4, .medicalBlock02 .setBlock02 div h4 { margin-bottom: 2vw; text-align: center; font-size: 5vw; } .medicalBlock02 .setBlock strong { font-size: 4.3vw; } .medicalBlock02 .setBlock01 strong, .medicalBlock02 .setBlock02 strong { display: block; font-size: 4.3vw; } .medicalBlock02 .sum { margin-top: 2vw; padding-top: 2vw; border-top: 0.2vw solid #333; text-align: right; } .medicalBlock02 .sum span { color: #ef8100; font-weight: bold; font-size: 6vw; } .medicalBlock02 .setBlock dl.green:first-child { margin-bottom: 15vw; } .medicalBlock02 .setBlock dl.green:first-child:before { position: absolute; bottom: -15vw; left: 50%; margin-left: -0.5em; color: #009b69; content: "＋"; font-size: 10vw; } .medicalBlock02 .setBlock01 dl.green { margin-bottom: 12vw; } .medicalBlock02 .setBlock01 dl.green:before { position: absolute; bottom: -10vw; left: 50%; margin-left: -10vw; border-top: 5vw solid #009b69; border-right: 10vw solid transparent; border-left: 10vw solid transparent; content: ""; } .medicalBlock02 .setBlock02 dl.orange { margin-bottom: 12vw; } .medicalBlock02 .setBlock02 dl.orange:before { position: absolute; bottom: -10vw; left: 50%; margin-left: -10vw; border-top: 5vw solid #ef8100; border-right: 10vw solid transparent; border-left: 10vw solid transparent; content: ""; } .medicalBlock03 { margin-bottom: 5vw; } .medicalBlock03 small { display: block; margin-top: 0.5em; font-size: 4vw; } /*--------------------- doctor ---------------------*/ .doctorBlock01 { } .doctorBlock01 dl { display: -webkit-flex; display: flex; padding: 3vw 0; border-bottom: 0.2vw solid #e0e0e0; -webkit-align-items: center; align-items: center; } .doctorBlock01 dt { display: -webkit-flex; display: flex; margin-right: 4vw; width: 20vw; height: 20vw; border-radius: 50%; background: #009b69; color: #ffff00; font-weight: bold; font-size: 6vw; line-height: 1.1; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .doctorBlock01 dd { width: 65vw; } .doctorBlock01 .moreInfo { margin-top: 15px; text-align: center; } /*--------------------- example ---------------------*/ .exampleBlock01 {} /*--------------------- fee ---------------------*/ .feeBlock01 { margin-bottom: 6vw; } .feeBlock01 ul { padding: 1vw 5vw 5vw; margin-top: 5vw; background: #cdf1e3; } .feeBlock01 li { position: relative; margin-top: 8vw; padding: 8vw 5vw 5vw; border-radius: 3vw; background: #fff; } .feeBlock01 li h3 { position: relative; margin-bottom: 3vw; color: #009b69; text-align: center; font-size: 6vw; line-height: 1.1; } .feeBlock01 li h3 span { position: absolute; top: -11vw; margin-left: -25vw; left: 50%; display: -webkit-flex; display: flex; width: 50vw; height: 8vw; background: #ef8100; color: #fff; font-size: 4.3vw; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-items: center; } .feeBlock01 li h3 small { display: block; margin-top: 1vw; font-size: 3.4vw; } .feeBlock01 li dt { margin-bottom: 3vw; text-align: center; font-weight: bold; font-size: 5vw; line-height: 1.3; } .feeBlock01 li dd { margin-bottom: 3vw; text-align: center; } /*--------------------- contact ---------------------*/ /*--------------------- sitepolicy ---------------------*/ .sitepolicyBlock { margin-bottom: 10vw; } .sitepolicyBlock .titleLV1 { padding-left: 0; }