@charset "UTF-8"; :root { --fs-xxl: 6vw; --fs-xl: 5.5vw; --fs-l: 5.2vw; --fs-m: 4.25vw; --fs-s: 3.8vw; --fs-xs: 3.2vw; --c-paleblue: #F2F8FD; --c-concblue: #124a9b; } body { background-color: #fcfcfc;} .breadcrumbs li a { color: #0765A3;} body.specify-division #foot #extraLinks { right: 1vw; bottom: 1vw;} section.articles time { display: block; margin: 0 0; padding: 2vw 0; text-align: right; color: #666} /*=================================================== limitedLink ===================================================*/ .head-logo > em { display: block; width: 120px; margin-bottom: 5px;} body.popup #maincontents {/* popup ページの際はマージンを増やす */ margin-top: 101px;} .maincontents-top .maincontents-top-box { margin-top: 20px;} /* temp layout */ #maincontents { margin-top: 0; padding-bottom: 0;} #maincontents > section { position: relative; margin: 0 auto; padding: 5vw 0 7vw 0; max-width: 100vw; font-size: var(--fs-m);} #maincontents a:hover { text-decoration: none;} /************************************************** FV section#title **************************************************/ /* Google Fonts */ #maincontents > section#title { margin: 0 0; padding: 6vw 0 15.5vw 0; line-height: 1.2; box-shadow: none; background: linear-gradient(-45deg, #85CBFA 0%, #fff 50%, #85CBFA 100%);} #maincontents > section#title h1 span.line2nd, #maincontents > section#title .line4th, #maincontents > section#title h1 u { font-family: "Mochiy Pop One", sans-serif; font-weight: 400;} /* 金利上昇中の今、おすすめ！ 定期預金【2024年7月】金利比較 定期預金の金利はどのくらい？ */ #maincontents > section#title h1 { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 0 0; font-size: var(--fs-m); font-weight: bold; color: #000; /*min-height: 56.25vw;*/} #maincontents > section#title h1 span.line3rd /*人気のランキングで*/{ display: inline-block; text-shadow: 2px 2px 0 #ccc, -2px -2px 0 #FFF, -2px 2px 0 #ccc, 2px -2px 0 #FFF, 0px 2px 0 #ccc, 0 -2px 0 #FFF, -2px 0 0 #FFF, 2px 0 0 #FFF;} #maincontents > section#title h1 span.line2nd /*金利上昇中の今、おすすめ！*/ { position: relative; top: auto; right: auto; width: auto; margin: 0; padding: 0 0 11vw 0; font-size: 7vw; transform: none; text-align: center; background-color: transparent; border-radius: 0; text-align: center; letter-spacing: -0.04em; color: #333; } /* アーチ */ #maincontents > section#title h1 em, #deposit .char1, #deposit .char2, #deposit .char3, #deposit .char4, #deposit .char5, #fixedDeposit .char1, #fixedDeposit .char2, #fixedDeposit .char3, #fixedDeposit .char4, #fixedDeposit .char5, #factoring .char1, #factoring .char2, #factoring .char3, #factoring .char4, #factoring .char5, #foreignCurrencyDeposit .char6, #foreignCurrencyDeposit .char7, #foreignCurrencyDeposit .char8, #virtualCurrency .char1, #virtualCurrency .char2, #virtualCurrency .char3, #virtualCurrency .char4, #virtualCurrency .char5, #virtualCurrency .char6, #virtualCurrency .char7, #virtualCurrency .char8, #virtualCurrency .char9/* #corporate .char1, #corporate .char2, #corporate .char3, #corporate .char4, #corporate .char5, #corporate .char6, #corporate .char7, #corporate .char8 */ { color: red;} #maincontents > section#title h1 span.line3rd {/*定期預金金利比較*/ padding: 4vw 0 .5vw 0; font-size: 11.25vw; text-align: center; font-weight: bold; } #maincontents > section#title h1 u {/*【2024年7月】*/ position: absolute; display: block; width: 8em; padding: 1vw 0; top: 13.5vw; right: calc(50% - 4em); font-size: 7vw; letter-spacing: -0.4vw; transform: rotate(0); text-decoration: none; text-shadow: none; color: #000; background: linear-gradient(transparent 40%, rgba(256,256,0,0.5) 70%, rgba(256,256,0,0.8) 100%);} #maincontents > section#title .line4th {/*定期預金の金利はどのくらい？*/ font-size: 6vw; text-align: center; font-weight: normal; letter-spacing: 0; color: #333; line-height:1.2;} #maincontents > section#title .line4th span { display: block; text-align: center;} #maincontents > section#title h1 strong { display: inline-block; margin-right: 1vw; font-size: 12vw; color: red; line-height:1; letter-spacing: 0;} /************************************************** section#lead リード文 **************************************************/ section#lead { padding: 8vw 6vw 0 6vw;} /************************************************** section#points ポイント **************************************************/ section#points {/* この記事のポイント */ padding: 6vw 2vw 0 2vw; } section#points div { position: relative; margin: 0 auto; padding: 0 0; color: #666; border: 1px solid #f0ba17; background-color: #fff; border-radius: 8px 0 8px 0;} section#points p.note { margin: 0 0; padding: 2vw 1vw; font-size: var(--fs-s); color: #666;} section#points h5 { display: inline-block; margin: 0 0 !important; padding: .25em .75em .5em .75em; font-size: var(--fs-s); font-weight: normal; background-color: #f0ba17; color: #fcfcfc; border-radius: 7px 0 8px 0; } section#points h5::before { display: inline-block; font-family: "Font Awesome 5 Free"; content: "\f0eb"/*"\f164 "*/; margin: 0 0; padding: 1px .5em 0 0; font-size: var(--fs-m); font-weight: 400; } section#points ul { margin: .75em .5em .75em 2em; padding: 0 0; line-height: 1.2; list-style: square; } section#points ul li { margin: .25em 0 .25em .1em; padding: 0 .1em; list-style: square; } /************************************************** 目次 #maincontents > section#outline **************************************************/ #maincontents > section#outline { position:relative; margin: 5vw 2vw; padding: 0 2vw; border-radius: 0; line-height:1.5; background-color:#fff; border-width:1px 0; border-style:solid; border-color:#ccc} section#outline h5 { margin: 2vw 0; padding: .4vw 0 .4vw 7vw; line-height: 1; font-size: var(--fs-l); font-weight: bold; background: url("/images/special/icon_open-b.png") 0 0 no-repeat; background-size: 5.4vw; color: var(--c-concblue); cursor: pointer;} section#outline.active h5 { color: #333; background-image: url("/images/special/icon_close-b.png")} section#outline ul { display: none; list-style: none; margin: 0 0 1vw 0; font-size: var(--fs-m);} section#outline li { list-style: none; margin: 0 0 1.5vw 0; line-height: 1.2;} section#outline ul li a { display:inline-block; text-decoration:none; background:url("/images/common/gray-arrow.png") 0 4px no-repeat; background-size: 5px auto; padding-left:12px; color: #0765A3;} section#outline.active ul { display: block;} /************************************************** section#productlist まずはチェック！注目の定期預金一覧比較 /**************************************************/ section#productlist { /*box-shadow: 0 8px 3px rgba(0,0,0,.15)*/} #maincontents > section.articles#productlist > h2, #maincontents > section.articles#pickup > h2 { position: relative; margin: 0 auto .5em auto; padding: 0 0 .25em 0; font-size: 8vw; font-weight: bold; color: var(--c-concblue); text-align: center; line-height: 1.25; letter-spacing: 0; border-bottom: var(--c-concblue) 3px solid; } section#productlist h2 span, section#pickup h2 span { display: block; font-size: var(--fs-xxl);} section#productlist h2:after, section#pickup h2:after { position: absolute; content: ""; display: block; height: 10px; width: 20px; left: calc(50% - 10px); bottom: -12px; clip-path: polygon(0 0,50% 100%,100% 0); background-color: var(--c-concblue) } section#productlist > div.layout {} /* ************************************************************ */ div.scrollTable { position: relative; margin: 2vw 0 0 0; overflow: auto; font-size: var(--fs-s); background-color: #fff; border: 1px solid #ccc; } div.scrollTable.initial::before { position: absolute; z-index: 9; content:""; display: block; width: 40vw; height: 25vw; top: calc(50% - 12.5vw); right: calc(50% - 100px); background: url("/images/special/bankingServices/fixedDeposit/icon_scrollable.png") no-repeat; background-size: contain; opacity: .65; transition: all 0.5s 0s ease;} div.scrollTable.initial:active::before, div.scrollTable.initial:hover::before { right: 0; opacity: 0; transition: all 0.5s 0s ease;} div.scrollTable table.productTable { min-width: 143vw; border-spacing: 0px; border-collapse: separate; font-size: var(--fs-s); text-align: center; border-bottom: 1px solid #ccc; } div.scrollTable table.productTable th, div.scrollTable table.productTable td { padding: 1.25vw 2vw; vertical-align: middle;} div.scrollTable table.productTable tbody td { border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; /* white-space:nowrap;*/} /* ヘッダー固定 */ div.scrollTable table.productTable thead th:first-child, div.scrollTable table.productTable thead th.firstCell, div.scrollTable table.productTable tbody th { position: sticky; top: 0; left: -2px; z-index: 2; text-align: center; background-color: var(--c-paleblue); } /* 意匠 */ div.scrollTable table.productTable tbody th { border-top: 1px solid #ccc; border-right: 1px solid #ccc; } div.scrollTable table.productTable thead th.firstCell { background-color: var(--c-paleblue); border-right: 1px solid #ccc; } div.scrollTable table.productTable thead td { padding: 0.25em 0.5em; text-align: center; background-color: var(--c-paleblue); border-right: 1px solid #ccc;} table.productlist thead td { min-width: 13em;} /* 左上端を重なり順一番前へ */ div.scrollTable table.productTable thead tr:first-of-type th:first-of-type { z-index: 2; } div.scrollTable table.productTable small { font-size: var(--fs-s);} div.scrollTable table.productTable thead td { min-width: 12.5em;} div.scrollTable table.productTable thead .lenderName { /* 金融機関名 */ text-align: center; color: #fff; font-weight: bold; background-color: var(--c-concblue); border-right: 1px solid #fff;} div.scrollTable table.productTable .apply a, #corporate div.scrollTable table.productTable .term a, body#foreignExchange table.productTable tbody .datumName a.applyLink { position: relative; display: inline-block; margin: 0 auto; padding: .5em 1.6em .5em .75em; white-space: nowrap; font-size: var(--fs-s); font-weight: bold; text-align: center; color: #fff; background: -webkit-linear-gradient(#ee1f1f, #cc0000) !important; border-radius: 2em; cursor: pointer;} div.scrollTable table.productTable .apply a:after, #corporate div.scrollTable table.productTable .term a:after, body#foreignExchange table.productTable tbody .datumName a.applyLink:after { content:""; position:absolute; display: block; width: 5vw; height: 5vw; top: 1.5vw; right: 1vw; background-image: url("/images/special/bankingServices/fixedDeposit/icon_out-w.png"); background-repeat: no-repeat; background-size: 5vw; background-position: 0 0; cursor: pointer;} div.scrollTable table.productTable .apply a + span { display: block; text-align: center; font-size: var(--fs-s); margin: 0.25em 0 0 0; line-height: 1;} div.scrollTable table.productTable tbody th.term { position: sticky; min-width: 6.65em;} div.scrollTable table.productTable tbody th.subTerm { min-width: 3.3em; left: 6.49em;} #fixedDeposit div.scrollTable table.productTable tbody th.subTerm { left: 7em;} section#productlist time { text-align: left; background-size: var(--fs-s);} /***************************************** CTAボタン *****************************************/ div.linkBtn {/*キャンペーンなどの詳しい情報はこちら*/ position: relative; margin: 5vw auto; width: 96vw; overflow: hidden; } div.linkBtn > a { display: block; position: relative; width: 86vw; margin: 1.5em auto; padding: .5em 18vw .5em 15vw; font-size: var(--fs-l); font-weight: bold; text-align: center; line-height: 1.1; color: #fff; letter-spacing: .1em; border-radius: 6px; cursor: pointer; background: -webkit-linear-gradient(#ee1f1f, #ff0000);/*ボタンの色*/ box-shadow: 0 0 10px red; } div.linkBtn a:after { content: ""; position: absolute; width: 13vw; height: 13vw; bottom: 4px; right: 8px; background-image: url("/images/special/bankingServices/fixedDeposit/icon_hand-w.png"); background-repeat: no-repeat; background-size: contain; } /* ボタンの波紋 */ div.linkBtn::before, div.linkBtn::after { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 86vw; height: 18vw; border: 1px solid red; border-radius: 6px; box-sizing: border-box; pointer-events: none; animation: pulsate 2s linear infinite; } div.linkBtn::after { animation-delay: 1s; } /* ボタンの波紋が広がっていくアニメーション */ @keyframes pulsate { 0% { transform: scale(1); opacity: .2; } 100% { transform: scale(2); opacity: 0; } } span#toItemList { display:none; } span#toItemList.fixed {/* ページ下に固定 */ display: block; position: fixed; z-index: 99; width: 100vw; left: 0; bottom: 0; margin: 0 0; padding: 0 0; background-color: rgba(218, 236, 248,0.85);} span#toItemList.fixed div.linkBtn { margin: 0 auto;} span#toItemList.fixed div.linkBtn a { margin: 3vw auto;} /* ************ ボタンが2つの場合 ************ */ span#toItemList.fixed { display: flex; justify-content: center; } span#toItemList.fixed div.linkBtn { margin: 0 0.5em; width: 46vw; max-width: 50vw; overflow: visible; } span#toItemList.fixed div.linkBtn::before, span#toItemList.fixed div.linkBtn::after { content: none;} span#toItemList.fixed div.linkBtn > a { width: auto;} /* 表示するときの動き */ span#toItemList a { opacity: 0; visibility: hidden; transform: translateY(100%); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); } span#toItemList.fixed a { opacity: 1; visibility: visible; transform: translateY(0); transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); } span#toItemList.fixed div.linkBtn > a { padding: 2vw 1vw; font-size: var(--fs-s);} span#toItemList.fixed div.linkBtn > a::before { content: ""; display: block; width: 8vw; height: 8vw; margin: 0 auto 2vw auto; background-image: url("/images/special/bankingServices/fixedDeposit/icon_hand-w.png"); background-repeat: no-repeat; background-size: contain; } span#toItemList.fixed div.linkBtn > a::after { content:none} span#toItemList.fixed div.linkBtn > a[href="#items"] {/* ファクタリング会社の一覧はこちら */ transition: all 1.5s cubic-bezier(0.25, 1, 0.5, 1);} span#toItemList.fixed div.linkBtn > a[href="#loan-ranking"] {/* ビジネスローンの総合ランキングはこちら */ background: linear-gradient(to bottom, #92D050, #70AD47); box-shadow: 0 0 10px #70AD47;} span#toItemList.fixed div.linkBtn > a[href="#items"]::before {/* 会社の一覧 */ background-image: url("/images/special/bankingServices/common/icon_list.png");} span#toItemList.fixed div.linkBtn > a[href="#loan-ranking"]::before {/* 総合ランキング */ background-image: url("/images/special/bankingServices/common/icon_ranking.png");} /****************************************************************************************************/ /************************************************** 読み物コンテンツレイアウト一括指定：#maincontents > section **************************************************/ #maincontents > section.articles { margin: 0 0; padding: 5vw 3vw 5vw 2vw; border-top: 13vw solid #fcfcfc; background-color: #DAECF8;} /* 飾り */ #maincontents > section.articles:before { position: absolute; content: ""; display: block; z-index: 9; height: 16vw; width: 16vw; top: -10vw; left: calc(50% - 8vw); background-position: center center; background-repeat: no-repeat; background-size: 12vw;} #maincontents > section#productlist:before { background-image: url("/images/special/ttl_howto.png")} #maincontents > section#article:before { background-image: url("/images/special/ttl_article.png")} #maincontents > section.articles:after { position: absolute; content: ""; display: block; height: 13vw; width: 26vw; top: -13vw; left: calc(50% - 13vw); /* 半円の場合 */ border-radius: 13vw 13vw 0 0; /* 三角の場合 clip-path: polygon(50% 0, 100% 100%, 0 100%); */ background-color: #DAECF8; } #maincontents > section.articles:nth-of-type(2) { margin-top: 0; border-top-width: 0px; border: 1px solid rgba(18,74,155,.15); /*box-shadow: 0px -1px 1px rgba(18, 74, 155,.15);*/} #maincontents > section.articles:nth-of-type(2)::after { box-shadow: 0px -1px 1px rgba(18, 74, 155,.15);} /* コーナータイトル */ #maincontents > section.articles > h2 { padding: 3vw 0 4vw 0; font-size: var(--fs-xxl); line-height: 1.1; font-weight: bold; text-align: center; color: #6fb42c;} #maincontents > section#by-type h2 { } #maincontents > section#article h2 { } #maincontents > section#knowledge h2 { } #maincontents > section#faq h2 { letter-spacing: -0.05em;} #maincontents > section#flow h2 { font-size: 5.6vw;letter-spacing: -0.05em;} #maincontents > section#article h2 { } #maincontents > section#dictionary h2 { } #maincontents > section.articles:nth-of-type(2n+1) > h2 { color: #000;} #maincontents > section.articles p { padding: 0.5em 0;} #maincontents > section.articles p.note { margin: 0.2em 0 0.5em 0; text-indent: 0; font-size: var(--fs-s);} #maincontents > section.articles .formula { display: block; margin: .5em 0; padding: 1em .75em; font-weight: bold; text-indent: 0; text-align: left; background-color: #f2f2f2; border: 1px solid #bbb; border-radius: 5px;} /* .description */ .description { margin: 2vw 4vw 2vw 4vw; padding: 0 0; line-height: 1.4; color: #444;} .description p, p.description { } .description p + p { margin-top: .5em;} .message { color: #a94442; border: 1px solid #dca7a7; border-radius: 6px; background-color: #f2dede; background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%); margin: 2vw 4vw; padding: .5em 1em;} section.articles time { display: block; margin: 0 0; padding: 2vw 0; text-align: right; color: #666} section.articles div.fpProfile { margin: 1em 0 0 0; border-color: #eee;} section.articles div.fpProfile h4 { font-size: var(--fs-m) !important;} /* コーナーへのリンク */ section.articles a.link { display: block; margin: 0 auto 2vw auto; padding: 3.5vw 0; max-width: 80vw; color: #fff; text-align: center; border-radius: 2em; background: #6fb42c;} /* 定型カードボックス */ section#article div.section { display: block; width: auto; clear: both; margin: 2vw 0; padding: 0 0; background-color: #fff; border: 1px solid #eee; border-radius: 4px; line-height: 1.4;} /* 記事大見出し */ section#article div.section > h2 { margin: 8px 0 .5em 0; padding: .75em 0 .5em 32px; line-height: 1.1; font-size: var(--fs-l); font-weight: bold; letter-spacing: -0.025em; background-image: url("/images/div/il_title-blue.png"); background-position: left center; background-repeat: no-repeat; background-size: 30px; border-bottom: 1px solid var(--c-concblue);} section#article div.section h2:nth-of-type(1) { margin-top: 0;} /* 読み物記事共通パーツ */ section#article div.section.article > div table { display: block; margin: 0 auto 0 auto; padding: 0 0; width: auto; color: #000; border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc;} section#article div.section.article > div table tr { display: block; margin: 0; padding: 0;} section#article div.section.article > div table th { display: block; padding: .5em .75em; font-weight: bold; border-bottom :1px solid #ddd; text-align: center; background-color: #eee;} section#article div.section.article > div table td { display: block; padding: .5em .75em; border-bottom :1px solid #ccc;} section#article div.section.article > div table thead th, section#article div.section.article > div table thead td { text-align: center; font-weight: bold;} section#article div.section.article > div table thead th { background-color: var(--c-paleblue); } /************************************************** section#article カードローンの選び方のポイント section#article 定期預金で利用したい銀行○選 **************************************************/ section#article div.section { padding: 2vw 4vw 4vw 4vw;} section#article div.section h3, section#article div.section div dl.faqList dt { margin: 1.25em 0 .5em 0; padding: 0 0 0 0; font-size: var(--fs-l); font-weight: bold; line-height: 1.1; letter-spacing: 0; color: #333;} section#article div.section h4 { margin: 1.5em 0 .5em 0; padding: 0 0 0 0; font-weight: bold; line-height: 1; letter-spacing: 0; color: #555;} section#article div.section h4:before { content: ""; display: inline-block; width: .75em; height: .75em; margin: 0 .3em 0 0; background-color: green; vertical-align: middle; border-radius: 0;} /* スペック表 */ ul.productList > li {/* １商品分 */ margin: 2vw auto; padding: 2vw; background-color: #fcfcfc; border: 1px solid #e3e3e3; border-radius: 6px; } /* スペック表 */ ul.productList { font-size: var(--fs-m);} ul.productList > li {/* １商品分 */ margin: 0.5em auto; width: 100%; padding: 2vw; background-color: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 6px; } ul.productList > li > div.specList { display: block; width: 100%; margin: 0 auto; padding: 0 0 4vw 0; border-radius: 6px; background-color: #fff; border: 1px solid #ddd;} ul.productList .lender_name, ul.productList .service_name { position: relative; flex-basis: 100%; margin: 0 0; padding: 0.5em 0; text-align: center; color: #fff; font-size: var(--fs-l); font-weight: bold; background-color: var(--c-concblue); border-radius: 6px 6px 0 0;} ul.productList .feature { margin: 0 0; padding: 1vw 3vw 0; line-height: 1.25;} ul.productList .apply { margin: 0.5em auto; width: 100%; text-align: center;} ul.productList dl dt, ul.productList dl dd { display: block; padding: 0 0;} ul.productList dl dt { font-weight: bold; margin: 3vw 3vw 0 3vw; color: #000;} ul.productList dl dd { margin: .5vw 3vw 0 3vw;} ul.productList dd.rate span { display: inline-block;} dd.rate ul {/* スペック */ display: flex; flex-wrap: wrap; width: auto; margin: 0 0; background-color: var(--c-paleblue); border: 1px solid #ccc; border-radius: 6px; font-size: var(--fs-s); } dd.rate ul > li { display: flex; justify-content: center; margin: 0 0; padding: 0.25em .25em; flex-basis: 50%; border-bottom: 1px solid #ddd; } dd.rate ul > li:nth-child(2n) { border-right: 1px solid #ddd; } dd.rate ul > li:nth-last-child(1), dd.rate ul > li:nth-last-child(2) { border-bottom: none;} dd.rate ul > li > span { display: inline-block; } ul.productList dd.rate span:nth-of-type(1) { margin: 0 .5em 0 0; width: 3.5em; text-align: right; white-space: nowrap;} dd.rate ul > li:nth-of-type(1) { flex-basis: 100%; font-size: var(--fs-l); text-align: center; font-weight: bold; } dd.rate ul > li:nth-of-type(1) span { display: inline; width: auto; } dd.rate ul > li.lowest { color: orangered;} dd.rate ul > li span.small { display:inline; margin:0 !important; padding:0 !important; font-size:11px; } ul.productList dd.rate > ul > li:nth-of-type(n+1) span+sup { /* display:block;*/ text-align:center; } /*************************/ ul.productList span.prText2 /* キャンペーン */{ display: block; margin: .5em 0; padding: .5em 1em; font-size: var(--fs-m); color: #000; background-color: #ffc;} ul.productList span.prText /*フリーテキスト*/{ display: block; margin: .5em .5em; font-size: var(--fs-s); color: #000;} ul.productList span.remarks /* 注記 */, ul.productList span.updatedOn { display: block; margin: .5em .5em; font-size: var(--fs-s); line-height: 1.2;} ul.productList span.updatedOn { text-align: right;} section#article div.section ul.productList ul span.prText em { font-style: normal; color: red;} ul.productList .apply a {/*公式サイトへ*/ position: relative; display: inline-block; margin: .5em auto 0 auto; padding: .75em 3em 0.75em 2em; width: 90%; font-size: var(--fs-m); font-weight: bold; text-align: center; color: #fff !important; letter-spacing: .1em; border-radius: 2em; background: -webkit-linear-gradient(#ee1f1f, #cc0000) !important; cursor: pointer;} ul.productList .apply a:after { content:""; position:absolute; display: block; width: 7vw; height: 7vw; top: .65em; right: 1em; background-image: url("/images/special/bankingServices/fixedDeposit/icon_out-w.png"); background-repeat: no-repeat; background-size: 7vw; background-position: 0 0; cursor: pointer;} ul.productList .apply a + span {/* 公式サイトで無料口座開設 */ display: block; padding-top: .25em; text-align: center; font-size: var(--fs-s);} ul.productList small, ul.productList sup { font-size: var(--fs-xs); color: #000; font-weight: normal;} /* 利息表 */ dl.condition { margin: 1em 0 0.25em 0; padding: 0.5em 1em; width: 16em; border-radius: 6px; font-size: var(--fs-m); border: 1px solid #ccc;} dl.condition div { display: flex;} dl.condition dt { width: 3em;} dl.condition dd { } #maincontents > section.articles#article div.section#interest p.caption { text-indent: 0; margin: 1em 0 .25em 0; font-weight: bold; line-height: 1.25;} #interest div.scrollTable { margin: 0 0 1em 0;} table#interestTable { font-size: var(--fs-m);} table#interestTable th, table#interestTable td { white-space: nowrap;} table#interestTable th { width: 8.5em; background-color: #eee; border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; } table#interestTable thead th { border-top: none;} table#interestTable thead th:first-child { width: 7.6em; } table#interestTable tbody th.term { min-width: 5em; } table#interestTable tbody th.subTerm { min-width: 3.15em; left: 4.85em; } table#interestTable tbody td { padding: .5em .75em; border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: right; } /* FAQ */ section#article div.section div dl.faqList {} section#article div.section div dl.faqList dd { /*display: none;*/} section#article div.section div dl.faqList dt a { display: block; position: relative; margin: 0; padding: 0 0.65em 0 0; letter-spacing: -0.025em; line-height: 1.2; color: #000;} section#article div.section div dl.faqList dt a:after { display: inline-block; position:absolute; content:""; width: 0; height:0; top: 0.2em; right:-0.5em; margin-left: .25em; padding-top: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-top: .8em solid var(--c-concblue); transition: transform 0.5s ease;} section#article div.section div dl.faqList dt.opened {} section#article div.section div dl.faqList dt.opened a:after { transform: rotate(180deg); } section#article div.section div dl.faqList dt.opened + dd { display: block;} /************************************************** section.loanSection ローン /**************************************************/ section#article div.section.loanSection { border: 2px solid #42a420;} section#article div.section.loanSection h2 { background-image: url("/images/div/il_title-green.png"); border-bottom: 1px solid #42a420;} div.section.loanSection ul.linkList { display:flex; flex-direction: column; justify-content:space-between; align-items: stretch; margin: 2vw auto; font-size: 3.5vw; font-weight: bold; } div.section.loanSection ul.linkList li { margin:0 0; padding:0 0 2vw 0; } div.section.loanSection ul.linkList li a { display: flex; justify-content: space-between; align-items: center; padding: 2vw 1vw 2vw 3vw; color: #000; text-align: center; line-height: 1; border: 1px solid #2E6339; border-radius: 6px; background: linear-gradient(#fff, #f2f7da);} div.section.loanSection ul.linkList li a:hover { border-color: #3f9322; background: linear-gradient(#f2f7da, #fff); transition: .1s; text-decoration: none; color: inherit; opacity: 0.95;} div.section.loanSection ul.linkList i { display: block; width: 26vw; height: 16vw; background-position: center center; background-repeat: no-repeat; background-size: contain;} div.section.loanSection ul.linkList .eloan i { background-image: url("/images/common/eloan-logo.svg"); width: 36vw;} div.section.loanSection ul.linkList .ranking i { background-image: url("/images/special/ttl_ranking.png");} div.section.loanSection ul.linkList .sim i { background-image: url("/images/special/ttl_sim.png");} div.section.loanSection ul.linkList a > span { display: block; margin: 0 0; width: 52vw; font-size: 4vw; text-align: left; line-height: 1.4;} div.section.loanSection ul.linkList a > span > span { display: block;} /* 文字修飾 */ div.scrollTable em, .productList em { color: orangered; font-style:normal; font-weight: bold;} div.scrollTable span.small { font-size:12px;} div.scrollTable small, .productList small { font-size: 90%;} div.scrollTable sup { display: none; font-size: var(--fs-xs); color: #000; font-weight: normal; } div.modal-recommend sup { display: none;} /* #guardWording */ ul.guardWording { margin: 4vw 2vw 0 2vw; padding: 0 0 0 0; color: #666; /* background-color: #fcfcfc;*/ font-size:16px; } ul.guardWording > li { margin: 0 0 0 1em; padding: 0 0; text-indent: -1em; background-color: transparent; } ul.guardWording > li:before { content: "※"; } ul.guardWording > li a { color: #3f9322;} p.note + ul.guardWording { padding-top: 0.5em;} ul.guardWording.note { font-size: var(--fs-s);} /************************************************** ************************************************** #foreignCurrencyDeposit 外貨預金金利比較 ************************************************** **************************************************/ #foreignCurrencyDeposit #maincontents > section#title { background-color: #B0C4E4; background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/hero.webp"); background-size: cover; background-position: center center; } #foreignCurrencyDeposit #maincontents > section#title h1 span.line2nd, #foreignCurrencyDeposit #maincontents > section#title .line4th { color: #222;} #foreignCurrencyDeposit #maincontents > section.articles:nth-of-type(2n), #foreignCurrencyDeposit #maincontents > section.articles:nth-of-type(2n):after { background-color: #DAECF8;} /* 外貨預金一覧比較 */ #foreignCurrencyDeposit div.scrollTable table.productTable#fcdProductTable tbody th.term { min-width: 4.5em;} #foreignCurrencyDeposit div.scrollTable table.productTable#fcdProductTable tbody th.term img { width: 3em; height: auto; } #foreignCurrencyDeposit div.scrollTable table.productTable#fcdProductTable tbody th.term span { display: block;} #foreignCurrencyDeposit div.scrollTable table.productTable#fcdProductTable tbody th.subTerm { min-width: 4.7em; left: 4.36em; } #foreignCurrencyDeposit #maincontents > section#title h1 u { } #foreignCurrencyDeposit #maincontents > section#title h1 span.line3rd { padding: 9vw 0 .5vw 0;} /* 金比較表 */ #foreignCurrencyDeposit ul.productList > li > div.specList table { width:96%; margin: 2vw 2% 0 2%; padding: 0 0; font-size: var(--fs-m); border-collapse:collapse; border-right: #ccc solid 1px; } #foreignCurrencyDeposit ul.productList > li > div.specList table thead { display: none;} #foreignCurrencyDeposit ul.productList > li > div.specList table tbody { background-color: #fff;} #foreignCurrencyDeposit ul.productList > li > div.specList table tfoot { font-size: var(--fs-s); background-color: #fff; } #foreignCurrencyDeposit ul.productList > li > div.specList table th, #foreignCurrencyDeposit ul.productList > li > div.specList table td { display: block; padding: 0.25em .5em; } #foreignCurrencyDeposit ul.productList > li > div.specList table th { background: var(--c-paleblue); border-left: #ccc solid 1px; border-bottom: #ccc solid 1px; } #foreignCurrencyDeposit ul.productList > li > div.specList table tbody tr:first-child>:first-child { border-top:#ccc solid 1px } #foreignCurrencyDeposit ul.productList > li > div.specList table th img { width: 2em; margin: 0.25em 0} #foreignCurrencyDeposit ul.productList > li > div.specList table th span { display: inline-block; padding: 0 0 0 .5em; } #foreignCurrencyDeposit ul.productList > li > div.specList table td { background: #fff; border: none; border-left: #ccc solid 1px; border-bottom: #ccc solid 1px; } #foreignCurrencyDeposit ul.productList > li > div.specList table tbody td::before { content:attr(aria-label); display:table-cell; padding-left: 0; width: 7.5em; border:none; white-space:normal; text-align:left } #foreignCurrencyDeposit ul.productList > li > div.specList table tfoot td div, #foreignCurrencyDeposit ul.productList > li > div.specList table tbody td div { display:table-cell; padding-left:1em; border-left:1px solid #ccc; text-align:left } #foreignCurrencyDeposit ul.productList > li > div.specList table tfoot th { padding: 0.75em .5em;} /* 国旗 */ #foreignCurrencyDeposit section#article div.section#kinds h3 { padding: 0.25em 0 0.25em 2.75em; background-position: center left; background-size: contain; background-repeat: no-repeat; line-height: 1; } #foreignCurrencyDeposit ul.productList > li > div.specList table tfoot span { display: inline-block; padding: 0.15em .5em 0.15em 1.65em; background-position: center left; background-size: 1.5em auto; background-repeat: no-repeat; } #foreignCurrencyDeposit .specList table tfoot span.aud, section#article div.section#kinds h3.aud { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-aud.webp")} #foreignCurrencyDeposit .specList table tfoot span.cad, section#article div.section#kinds h3.cad { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-cad.webp")} #foreignCurrencyDeposit .specList table tfoot span.chf, section#article div.section#kinds h3.chf { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-chf.webp")} #foreignCurrencyDeposit .specList table tfoot span.eur, section#article div.section#kinds h3.eur { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-eur.webp")} #foreignCurrencyDeposit .specList table tfoot span.gbp, section#article div.section#kinds h3.gbp { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-gbp.webp")} #foreignCurrencyDeposit .specList table tfoot span.usd, section#article div.section#kinds h3.usd { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-usd.webp")} #foreignCurrencyDeposit .specList table tfoot span.nzd, section#article div.section#kinds h3.nzd { background-image: url("/images/special/bankingServices/foreignCurrencyDeposit/flag-nzd.webp")} /* .section.reference 参考リンク */ section#article div.section.reference { margin: 0 0; padding: 4vw 1vw 2vw 1vw; border: none; line-height: 1; background-color: transparent; } section#article .section.reference h2:nth-of-type(1) { margin: 0 0 3vw 0; padding: 0; line-height: 1; font-size: var(--fs-l); font-weight: bold; background-image: none; border: none; letter-spacing: 0.1em; } section#article .section.reference h2:before { content:none;} /* やっぱり、安心の円預金で選ぶなら！注目の定期預金一覧比較 */ #foreignCurrencyDeposit table.productTable#fdProductTable tbody th.subTerm { left: 6.95em;} /************************************************** ************************************************** #factoring : ファクタリング会社比較 2025.03.17 ************************************************** **************************************************/ body#factoring {} body#factoring #maincontents > section#title { background-color: transparent; background-size: cover; background-position: center center; background-image: url("/images/special/hero-factoring.webp");} body#factoring #maincontents > section#title h1 span.line2nd { padding: 0 0 14vw 0; font-size: var(--fs-l); color: #000;} body#factoring #maincontents > section#title h1 span.line3rd { font-size: 9vw; letter-spacing: -0.05em;} body#factoring #maincontents > section#title h1 u { top: 10vw; border-radius: 3px; font-size: 6vw; background: linear-gradient(transparent 40%, rgba(243, 152, 49,0.5) 70%, rgba(243, 152, 49,0.8) 100%);} body#factoring #maincontents > section#title .line4th { font-size: var(--fs-m); letter-spacing: -0.05em;} body#factoring #maincontents > section#pickup:before {/* お急ぎの方へ！注目のファクタリング会社をピックアップ！ */ background-image: url("/images/special/ttl_pickup.png"); } /* AGビジネスサポートのファクタリング */ body#factoring #maincontents > section#pickup h3, body#factoring section#article div.section#items li h3 {/* 商品名 */ margin: 0 0; margin-top: 0 !important; padding: .5em 2vw; text-align: center; color: #fff; font-size: var(--fs-m); font-weight: bold; background-color: var(--c-concblue); border-radius: 6px 6px 0 0; } body#factoring #maincontents > section.articles#pickup p, body#factoring #maincontents > section#article div.section#items ul p { margin: 0 0; padding: 2vw 3vw;} body#factoring #maincontents > section#pickup > div h4, body#factoring section#article div.section#items h4 {/* AGビジネスサポートが選ばれる6つのポイント */ margin: 1em 0 0; padding: 3vw 3vw 2vw 3vw; text-align: center; font-size: var(--fs-m); font-weight: bold; color: #000; letter-spacing: -0.06em;} section#article div.section#items h4::before { content: none;} body#factoring section#article div.section#items > ul.productList > li,/* １商品 */ body#factoring #maincontents > section#pickup > div {/* 商品枠 */ margin: 0 0 3vw 0; padding: 0; background-color: #fff8ca; border-radius: 10px;} body#factoring section#article div.section#items > ul.productList > li > div > dl, body#factoring #maincontents > section#pickup > div > dl { display: flex; flex-direction: column; margin: 0 0; padding: 1px 3vw; } body#factoring section#article div.section#items > ul.productList > li > div > dl > div, body#factoring #maincontents > section#pickup > div > dl > div { flex-basis: 100%; margin: 0 0 2vw 0; padding: 2vw 3vw; border-radius: 10px; border: 2px solid #325078; background-color: #fff;; } body#factoring section#article div.section#items > ul.productList > li > div > dl dt, body#factoring #maincontents > section#pickup > div > dl dt { margin: 0 0; padding: 0.15em 0.5em; text-align: center; font-size: 1.25rem; font-weight: bold; color: #095DB5; background-color: #E0EDFF; } body#factoring section#article div.section#items > ul.productList > li > div > dl dd, body#factoring #maincontents > section#pickup > div > dl dd { padding: 0.5em 0 0 0; } body#factoring section#article div.section#items div.button, body#factoring #maincontents > section#pickup > div > div.button { margin: 0 0; padding: 1em 0 1.5em 0; text-align: center; } body#factoring #maincontents > section.articles#pickup p + div.button, body#factoring #maincontents > section#article div.section#items p + div.button { padding: 0 0; } body#factoring section#article div.section#items div.button a, body#factoring #maincontents > section#pickup > div > div.button a { display: inline-block; padding: 3vw 4vw; width: 80vw; line-height: 1.3; color: #fff; font-weight: bold; border-radius: 4em; background: linear-gradient(to left, #c2182d 0%, #f26d27 100%); } body#factoring #maincontents > section#pickup > div > p em, body#factoring section#article div.section#items > ul.productList > li p em { color: orangered; font-style: normal; font-weight: bold; } /************************************************** ************************************************** 迅速な資金調達に！安心のファクタリング会社をピックアップ！ 2025.10.29 ************************************************** **************************************************/ body#factoring #maincontents > section#article div.section#items > ul.productList > li { margin: 0.5em auto; width: 100%; padding: 2vw; background-color: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 6px; } body#factoring section#article div.section#items > ul.productList > li > div.specList { margin: 0; padding: 0; width: auto; text-align: center; border-radius: 10px; border: 1px solid #325078; background-color: #fff; } body#factoring section#article div.section#items > ul.productList > li > div.specList div.name {/*商品名*/ margin: 0; padding: .5em 0 0 0; text-align: center; color: #fff; font-size: var(--fs-l); font-weight: bold; letter-spacing: -0.35vw; background-color: var(--c-concblue); border-radius: 6px 6px 0 0;} body#factoring section#article div.section#items > ul.productList > li > div.specList div.company {/* 金融機関名 */ padding: 0 0.5em 0.25em 0.5em; font-size: var(--fs-m); font-weight: normal; color: #fff; background-color: var(--c-concblue);} body#factoring section#article div.section#items > ul.productList div.apply {/* ボタン */ margin: 3vw auto 0 auto;} body#factoring section#article div.section#items > ul.productList div.apply a { margin: 0 auto 0 auto;} body#factoring section#article div.section#items > ul.productList div.feature {/* PRテキスト */ padding: 2vw 2vw 3vw 2vw; font-size: var(--fs-s); text-align: left;} body#factoring section#article div.section#items > ul.productList div.feature u { display: inline !important; text-decoration: none; font-style: normal; background: linear-gradient(transparent 30%, #FF6 80%, transparent 100%); padding: 0 4px 0 4px; } body#factoring section#article div.section#items > ul.productList span.prText2 { display: block; margin: .5em 0; padding: .5em 1em; font-size: var(--fs-m); color: #000; background-color: #ffc;} body#factoring section#article div.section#items > ul.productList div.specList > div.apply, body#factoring section#article div.section#items > ul.productList div.specList > div.apply a { margin-top:0; } body#factoring section#article div.section#items > ul.productList div.specList > div.apply a { margin-bottom:1em; } /************************************************** ************************************************** #loan-ranking.categoryRanking : ランキング追加 2025.04.21 ************************************************** **************************************************/ /* -------------------------------------------------- 総合ランキング -------------------------------------------------- */ .categoryRanking { border: 2px solid #42a420; border-radius: 8px;} section#article div.section .categoryRanking h3 { margin: 0 0 1em 0; padding: 0.5em; font-size: var(--fs-m); color: #fff; background-color: #42a420; } #maincontents > section.articles .categoryRanking > p { text-indent: 0; margin: 4vw;} .categoryRanking .loanlist { padding: 0 0; margin-bottom: 15px; } .categoryRanking .loanlist li { padding: 3vw 3vw; border-top: 1px dotted #42a420; border-radius: 0; background: #fff; } .categoryRanking .loanlist li:not(:last-child) { margin-bottom: 4vw; } .categoryRanking .loanlist li > div:first-child > div:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 5px; } .categoryRanking .loanlist li > div:first-child > div:first-child img.rankmark { width: 50px; margin-right: 25px; } .categoryRanking .loanlist li > div:first-child > div:first-child span.rankmark { background: linear-gradient(to right, #aaa, #bbb); display: block; width: 60px; height: 30px; margin-right: 25px; text-align: center; color: #fff; font-weight: 700; line-height: 30px; font-size: 14px; } .categoryRanking .loanlist li > div:first-child > div:first-child span.rankmark span { display: inline-block; font-size: 18px; min-width: 1em; } .categoryRanking .loanlist li > div:first-child > div:first-child .banklogo { width: 120px; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:first-child { padding-bottom: 15px; margin-bottom: 10px; border-bottom: 1px dotted #ccc; font-size: 16px; } body#topic .readings-main .categoryRanking .loanlist li > div:first-child > div:last-child > div:first-child p { text-indent: 0; margin: 0 0 5px 0; line-height: 1.4; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:first-child p a { color: #3f9322; text-decoration:none; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:first-child span { display: block; line-height: 1; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:last-child dl { font-size: 14px; margin-bottom: 10px; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:last-child dl:not(:last-child) { margin-bottom: .1em; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:last-child dl::after { content: ''; display: block; clear: both; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:last-child dl dt { float: left; min-width: 8.5em; } .categoryRanking .loanlist li > div:first-child > div:last-child > div:last-child dl dd { margin-left: 9em/*97px*/; color: #f28d33; } .categoryRanking .loanlist li > div:last-child { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-between; padding-top: 5px; } .categoryRanking .loanlist li > div:last-child > div:last-child { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%/*calc(65% - 5px)*/; } .categoryRanking .loanlist li > div:last-child .btn-add div.on > span { background: url("../../images/lender_under/ico-check.png") no-repeat left 10px center; background-size: 15px auto; } .categoryRanking .loanlist li > div:last-child > div:last-child a[data-link] { display: inline-block; margin-left: auto; margin-right: auto; width: 100%; max-width: 60%; height: 40px; line-height: 40px; background: #eee; text-align: center; border-radius: 20px; font-size: 15px; color: #fff; text-decoration: none; } .categoryRanking .loanlist li > div:last-child > div:last-child a[data-link]:not(:last-child) { margin-right: 5px; } .categoryRanking .loanlist li > div:last-child > div:last-child a[data-link=application] { background: #ee8e26; } .categoryRanking .loanlist li > div:last-child > div:last-child a[data-link=claim] { background: #6fb42c; } .categoryRanking .loanlist li > div:last-child > div:last-child a[data-link=consultation] { background: #08bbd6; } .categoryRanking > small { display: block; line-height: 1.3; margin: 0 auto; padding: 0vw 4vw 2vw 6vw; font-size: 13px; text-indent: -1em;} .categoryRanking > small:before { content: "※";} /************************************************** ************************************************** #deposit : 普通預金金利比較 2025.05.10 ************************************************** **************************************************/ body#deposit #maincontents > section#title { background-color: transparent; background-size: cover; background-position: center center; background-image: url("/images/special/bankingServices/deposit/hero.webp");} body#deposit #maincontents > section#title h1 span.line2nd { padding: 0 0 14vw 0;} body#deposit #maincontents > section#title .line4th { font-size: 6.5vw;} body#deposit #maincontents > section#title .line4th > span { padding: 0 0;} body#deposit #maincontents > section#title h1 u { top: 11.5vw;} /* まずはチェック！普通預金金利の高い銀行ランキング */ body#deposit div.scrollTable table.productTable { min-width: 190vw; line-height: 1.25;} body#deposit div.scrollTable table.productTable thead th, body#deposit div.scrollTable table.productTable thead td { /* thead */ color: #fff; background-color: var(--c-concblue); border-right: 1px solid #fff; padding: .5em 0; font-weight:bold; text-align: center;} body#deposit div.scrollTable table.productTable tbody th, body#deposit div.scrollTable table.productTable tbody td { /* tbody */ padding: 1em .5em;} body#deposit div.scrollTable table.productTable .datumLender_name { width: 41.5vw;} body#deposit div.scrollTable table.productTable .datumRate { min-width: 9em;} body#deposit div.scrollTable table.productTable tbody .datumFeature { max-width: 44vw; text-align: left;} /*body#deposit div.scrollTable table.productTable tbody .datumUpdated_on { width: 8.4em; white-space: nowrap; }*/ body#deposit div.scrollTable table.productTable td.apply { width: 13em; padding: 0.25em 0; letter-spacing: -0.05em;} body#deposit div.scrollTable table.productTable div.apply { margin: 0 auto;} body#deposit div.scrollTable table.productTable#fdProductTable .apply a { display: inline-flex; align-items: center; white-space: wrap; padding: .5em; border-radius: 2em;} body#deposit div.scrollTable table.productTable#fdProductTable .apply a::after { position: relative; top: 0;} body#deposit div.scrollTable table.productTable#fdProductTable .apply a span { display: block; width: 2em; margin: 0 0.25em 0 0.5em;} /* ランキングアイコン */ body#deposit div.scrollTable table.productTable tbody .datumLender_name div { display: flex; align-items: center;} body#deposit div.scrollTable table.productTable tbody .datumLender_name q {/* ランキングicon：背景色 */ display: block; flex-grow: 0; position: relative; margin-right: 0.3em; width: 2.5em; min-width: 2.5em; height: 2.5em; quotes: none; border-width: 2px; border-style: solid; border-color: #666; background-color: #999; border-radius: 2em;} body#deposit div.scrollTable table.productTable tr.rank-1 .datumLender_name q { border-color: #B78E13; background: linear-gradient(45deg, #B67B03 0%, #DAAF08 25%, #FEE9A0 60%, #DAAF08 75%, #B67B03 95%);} body#deposit div.scrollTable table.productTable tr.rank-2 .datumLender_name q { border-color: #8F8F8F; background: linear-gradient(45deg, #757575 0%, #9E9E9E 25%, #E8E8E8 60%, #9E9E9E 75%, #757575 95%);} body#deposit div.scrollTable table.productTable tr.rank-3 .datumLender_name q { border-color: #562917; background: linear-gradient(45deg, #260202 0%, #7c4828 25%, #fec4a0 60%, #7c4828 75%, #260202 95%);} body#deposit div.scrollTable table.productTable tbody .datumLender_name q::after {/* ランキングicon */ display: block; position: absolute; width: 100%; height: 100%; background-position: center center; background-size: auto 1.4em; background-repeat: no-repeat;} body#deposit div.scrollTable table.productTable tr.rank-1 .datumLender_name q::after { background-image: url("/images/special/label-rank1-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-2 .datumLender_name q::after { background-image: url("/images/special/label-rank2-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-3 .datumLender_name q::after { background-image: url("/images/special/label-rank3-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-4 .datumLender_name q::after { background-image: url("/images/special/label-rank4-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-5 .datumLender_name q::after { background-image: url("/images/special/label-rank5-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-6 .datumLender_name q::after { background-image: url("/images/special/label-rank6-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-7 .datumLender_name q::after { background-image: url("/images/special/label-rank7-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-8 .datumLender_name q::after { background-image: url("/images/special/label-rank8-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-9 .datumLender_name q::after { background-image: url("/images/special/label-rank9-w.webp");} body#deposit div.scrollTable table.productTable tr.rank-10 .datumLender_name q::after { background-image: url("/images/special/label-rank10-w.webp");} body#deposit div.scrollTable table.productTable tbody .datumLender_name span {/* 金融機関名 */ display: block; flex-grow: 1; text-align: left;} .datumRate em { white-space: nowrap;} /* section#article div.section#ranking キャンペーン情報も！普通預金金利が高い銀行ランキング！*/ body#deposit section#article div.section#ranking ul.productList li {/* １商品分の枠 */} body#deposit section#article div.section#ranking ul.productList li div.specList {/* specボックス */} body#deposit section#article div.section#ranking ul.productList li div.specList .feature {/* feature */ padding: 1vw 3vw 1vw 3vw; text-align: center;} body#deposit section#article div.section#ranking ul.productList li div.specList u {/* feature */ display: inline; font-weight: bold; text-decoration: none; background: linear-gradient(transparent 40%, rgba(256,256,0,0.5) 70%, rgba(256,256,0,0.8) 100%);} /* ランキングアイコン */ body#deposit section#article div.section#ranking ul.productList li div.specList .lender_name { padding: 0.5em 0.25em 0.5em 2em;} body#deposit section#article div.section#ranking ul.productList li div.specList .lender_name::before {/* ランキングアイコン背景色 */ content:""; position: absolute; z-index: 1; display: block; margin-right: 0.3em; width: 3em; height: 3em; top: -0.5em; left: -0.75em; border-width: 4px; border-style: solid; border-color: #666; border-radius: 2em; background-color: #999; box-shadow: 1px 1px 6px rgba(0,0,0,0.5);} body#deposit section#article div.section#ranking ul.productList li.rank-1 div.specList .lender_name::before { border-color: #B78E13; background: linear-gradient(45deg, #B67B03 0%, #DAAF08 25%, #FEE9A0 60%, #DAAF08 75%, #B67B03 95%);} body#deposit section#article div.section#ranking ul.productList li.rank-2 div.specList .lender_name::before { border-color: #8F8F8F; background: linear-gradient(45deg, #757575 0%, #9E9E9E 25%, #E8E8E8 60%, #9E9E9E 75%, #757575 95%);} body#deposit section#article div.section#ranking ul.productList li.rank-3 div.specList .lender_name::before { border-color: #562917; background: linear-gradient(45deg, #260202 0%, #7c4828 25%, #fec4a0 60%, #7c4828 75%, #260202 95%);} body#deposit section#article div.section#ranking ul.productList li div.specList .lender_name::after {/* ランキングアイコン背景色 */ content:""; position: absolute; z-index: 2; display: block; width: 3em; height: 3em; top: -0.5em; left: -0.75em; border: 4px solid transparent; background-position: center center; background-size: 2.25em 1.75em; background-repeat: no-repeat;} body#deposit section#article div.section#ranking ul.productList li.rank-1 div.specList .lender_name::after { background-image: url("/images/special/label-rank1-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-2 div.specList .lender_name::after { background-image: url("/images/special/label-rank2-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-3 div.specList .lender_name::after { background-image: url("/images/special/label-rank3-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-4 div.specList .lender_name::after { background-image: url("/images/special/label-rank4-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-5 div.specList .lender_name::after { background-image: url("/images/special/label-rank5-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-6 div.specList .lender_name::after { background-image: url("/images/special/label-rank6-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-7 div.specList .lender_name::after { background-image: url("/images/special/label-rank7-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-8 div.specList .lender_name::after { background-image: url("/images/special/label-rank8-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-9 div.specList .lender_name::after { background-image: url("/images/special/label-rank9-w.webp")} body#deposit section#article div.section#ranking ul.productList li.rank-10 div.specList .lender_name::after { background-image: url("/images/special/label-rank10-w.webp")} /* 11位以下 */ body#deposit section#article div.section#ranking ul.productList li div.specList .lender_name > span { display: flex; justify-content: center; align-items:center; position: absolute; z-index: 2; height: 3.4em; width: 3.4em; top: -0.2em; left: -0.75em; text-align: center; color: #fff;} /* 金利表 */ body#deposit section#article div.section#ranking ul.productList li div.specList dl.rate { display:table; width: 74vw; margin: .5em auto 0 auto; border-collapse: collapse; border :1px solid #ccc;} body#deposit section#article div.section#ranking ul.productList li div.specList dl.rate > div { display: table-row;} body#deposit section#article div.section#ranking ul.productList li div.specList dl.rate > div > dt { display: table-cell; width: 7.1em; padding: 0.25em; font-weight: normal; vertical-align: middle; border :1px solid #ccc; text-align: center;} body#deposit section#article div.section#ranking ul.productList li div.specList dl.rate > div > dd { display: table-cell; padding: 0.25em; font-weight: normal; color: #000; vertical-align: middle; border :1px solid #ccc;} body#deposit section#article div.section#ranking ul.productList li div.specList dl.rate > div.header { background-color: var(--c-paleblue); text-align: center; /*font-weight: bold;*/} /************************************************** #to-article 2026.02.05 : タイアップページへのリンク **************************************************/ body#deposit #maincontents > section.to-article { margin: 6vw 0 0 0; padding: 6vw 0; background-color: transparent; background-size: cover; background-position: center center; background-image: url("/images/special/bankingServices/deposit/hero.webp"); border-radius: 0; box-shadow: 1px 1px 1px rgba(0,0,0,.05); } body#deposit #maincontents > section.to-article h3 { margin: 0 0 3vw 0; padding: 0 0 0 0; text-align: center; line-height: 1; font-size: var(--fs-m); font-weight: bold; letter-spacing: -0.01em; } body#deposit #maincontents > section.to-article ul { margin: 0 2vw; padding: 0 0; } body#deposit #maincontents > section.to-article ul li { margin: 2vw 0 0 0; } body#deposit #maincontents > section.to-article ul li a { display: flex; align-items: center; margin: 0 0; padding: 4vw 3vw 4vw 36vw; height: 100%; font-size: var(--fs-s); color: #333; letter-spacing: -0.02em; background-color: #fff; border: 1px solid #999; border-radius: 6px; text-align: left; background-size: 30vw auto; background-repeat: no-repeat; background-position: left 3vw center; box-shadow: 0px 3px 3px rgba(0,0,0,.15);} body#deposit #maincontents > section.to-article ul li a:hover { opacity: 1.0; color: #3f9322; border-color: #3f9322; box-shadow: none; } body#deposit #maincontents > section#to-article-2602 ul li:nth-of-type(1) a { background-image: url("/special/bankingServices/deposit/article/images/2602001.webp"); } body#deposit #maincontents > section#to-article-2602 ul li:nth-of-type(2) a { background-image: url("/special/bankingServices/deposit/article/images/2602002.webp"); } body#deposit #maincontents > section#to-article-2609 ul li:nth-of-type(1) a { background-image: url("/special/bankingServices/deposit/article/images/2609001.webp"); } /* .section#trend : 【2025年5月】メガバンクの普通預金金利は年0.2% */ .section#trend h2 .ym:before { content:"【";} .section#trend h2 .ym::after { content:"】";} .section#trend p.released_at { text-align: right; font-size: var(--fs-s);} /* .section#calculation : 普通預金の利息の計算方法を理解しておこう */ /* .section#past-trends : 過去の普通預金の金利動向 */ .section#past-trends dl > div:not(:last-child) { margin-bottom: 2em; padding-bottom: 1.5em; border-bottom: 1px dotted #666;} .section#past-trends dt.title { margin: 1.5em 0 .5em 0; padding: 0 0 0 0; font-weight: bold; line-height: 1; letter-spacing: 0; color: #333;} .section#past-trends dt.title span.datumYm::before { content:"【";} .section#past-trends dt.title span.datumYm::after { content: "】";} .section#past-trends dd.released_at { font-size: var(--fs-s); text-align: right;} body#deposit #maincontents > section.articles ul.guardWording { background-color: transparent;} /************************************************** ************************************************** body#fixedDeposit : 定期預金金利比較 ワンポイント追加 2025.06.02 ************************************************** **************************************************/ body#fixedDeposit #maincontents > section#title h1 u { top: 11.5vw;} body#fixedDeposit #maincontents > section.articles#productlist {} body#fixedDeposit #maincontents > section.articles#productlist:after {} body#fixedDeposit section#productlist > div.layout { margin-top:0; background-color: #DAECF8; border: 1px solid transparent;} body#fixedDeposit div.scrollTable table.productTable { background-color: transparent;} body#fixedDeposit div.scrollTable table.productTable thead .lenderName { position: relative; padding: 1em 0.25em;} body#fixedDeposit div.scrollTable table.productTable thead .lenderName > em { position: absolute; content: ""; display: block; top: -1em; left: -3px; padding: 0.15em .5em; width: fit-content; font-size: 12px; font-style: normal; color: #fff; border-radius: 2em; background: linear-gradient(145deg, #ff6b35, #f7931e); border: 1px solid #f7931e; transform: rotate(-2deg); animation: bounce 2s infinite;} @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-10deg); } 40% { transform: translateY(-6px) rotate(-10deg); } 60% { transform: translateY(-3px) rotate(-10deg); } } body#fixedDeposit div.scrollTable table.productTable thead .lenderName > em::after { content: ''; position: absolute; display: block; width: 0; height: 0; bottom: -12px; left: 19px; border-width: 7px 7px 14px 0; border-color: transparent #F07532 transparent transparent; border-style: solid; transform: rotate( 120deg);} /* 壁 */ body#fixedDeposit div.scrollTable table thead tr.shade th.firstCell, body#fixedDeposit div.scrollTable table.productTable thead tr.shade td { background-color: #DAECF8; border: none !important;} body#fixedDeposit div.scrollTable table.productTable tbody td { background-color: #fff;} /************************************************** ************************************************** #virtualCurrency : 仮想通貨取引所比較 2025.06.06 ************************************************** **************************************************/ body#virtualCurrency #maincontents > section#title { background-color: transparent; background-size: cover; background-position: right bottom; background-image: url("/images/special/virtualCurrency/hero.webp");} body#virtualCurrency #maincontents > section#title h1 span.line2nd { font-size: 6vw;} body#virtualCurrency #maincontents > section#title h1 u { top: 10.5vw;} body#virtualCurrency #maincontents > section#title h1 span.line3rd { font-size: 9.5vw; letter-spacing: -0.02em;} body#virtualCurrency #maincontents > section#title .line4th { font-size: 5.75vw; letter-spacing: -0.01em;} body#virtualCurrency #maincontents > section#title #services { display: none; width: auto; margin: 3vw 3vw 0 3vw; padding: 0 0; text-align: center; background-color: rgba(256,256,256,0.25); border-radius: 4px;} body#virtualCurrency #maincontents > section#title #services img { width: 100%; height: auto;} body#virtualCurrency #maincontents > section.articles#productlist > h2 { font-size: 7vw;} /* 仮想通貨（暗号資産）取引所一覧比較 */ /* 表型の場合 body#virtualCurrency #productlist div.scrollTable table#productTable { width: 100%; min-width: auto;} body#virtualCurrency table#productTable thead th { color: #fff; background-color: var(--c-concblue); border-right: 1px solid #fff; padding: 1em 0; font-weight: bold; text-align: center;} body#virtualCurrency table#productTable tbody th, body#virtualCurrency table#productTable tbody td { padding: 1em .5em;} body#virtualCurrency table#productTable tbody th { font-size: var(--fs-m); font-weight: bold;} body#virtualCurrency table#productTable tbody td { text-align: left;} body#virtualCurrency table#productTable tbody th a { position: relative; display: block; width: 9em; margin: .25em auto; padding: .5em 1.25em .5em .25em; font-size: var(--fs-s); font-weight: bold; text-align: center; color: #fff; background: -webkit-linear-gradient(#ee1f1f, #cc0000) !important; letter-spacing: .1em; border-radius: 2em; cursor: pointer;} body#virtualCurrency table#productTable tbody th a:after { content:""; position:absolute; display: block; width: 22px; height: 22px; top: 6px; right: .5em; background-image: url("/images/special/bankingServices/fixedDeposit/icon_out-w.png"); background-repeat: no-repeat; background-size: 22px; background-position: 0 0; cursor: pointer;} */ /* リスト型の場合 */ body#virtualCurrency #productlist table#productTable, body#virtualCurrency #productlist table#productTable tr, body#virtualCurrency #productlist table#productTable tbody, body#virtualCurrency #productlist table#productTable th, body#virtualCurrency #productlist table#productTable td { display: block;} body#virtualCurrency #productlist table#productTable thead { display: none} body#virtualCurrency #productlist table#productTable { width: 100%; min-width: auto; border: none;} body#virtualCurrency table#productTable tbody th, body#virtualCurrency table#productTable tbody td { padding: .5em .5em;} body#virtualCurrency #productlist table#productTable tbody th { align-items: center; padding: 0.5em 0.5em; text-align: center; font-size: var(--fs-m); border: none; font-weight: bold; color: #fff; background-color: var(--c-concblue);} body#virtualCurrency table#productTable tbody th span:first-of-type {/* 金融機関名 */ } body#virtualCurrency table#productTable tbody th a, body#virtualCurrency table#productTable tbody th a + span { display: none;} body#virtualCurrency table#productTable tbody td.apply.spHide { display: block !important; padding: 0 0 0.75em 0; line-height: 1;} body#virtualCurrency table#productTable tbody td.apply.spHide a {/* ボタン */ position: relative; display: block; width: 16em; margin: 0 auto .25em auto; padding: .75em 2em .75em 1.5em; font-size: var(--fs-s); line-height: 1; font-weight: bold; text-align: center; color: #fff; background: -webkit-linear-gradient(#ee1f1f, #cc0000) !important; letter-spacing: .1em; border-radius: 2em; cursor: pointer;} body#virtualCurrency table#productTable tbody td.apply.spHide a:after { content:""; position:absolute; display: block; width: 22px; height: 22px; top: 6px; right: .5em; background-image: url("/images/special/bankingServices/fixedDeposit/icon_out-w.png"); background-repeat: no-repeat; background-size: 22px; background-position: 0 0; cursor: pointer;} body#virtualCurrency table#productTable tbody td.apply.spHide a + span { display: block; padding: 0 0 0 0; font-size: var(--fs-s); color: #444; font-weight: normal; text-align: center; } body#virtualCurrency table#productTable tbody td { font-size: var(--fs-m); text-align: center; border: none;} /* 仮想通貨（暗号資産）取引所をピックアップ！ */ body#virtualCurrency section#article ul.productList div.pr_point, body#virtualCurrency section#article ul.productList div.description, body#corporate ul.productList div.specList > div.pr_point, body#foreignExchange ul.productList div.specList > div.pr_point { display: block; margin: 0 0; padding: 2vw 4vw;} body#virtualCurrency section#article ul.productList div.pr_point span, body#corporate ul.productList div.specList > div.pr_point span, body#foreignExchange ul.productList div.specList > div.pr_point span { display: block; margin: 0.5em auto; padding: 0 0; width: fit-content; text-align: center; font-weight: bold; font-size: 4vw; letter-spacing: -0.06em; line-height: 1.25; background: linear-gradient(transparent 40%, rgba(256,256,0,0.5) 70%, rgba(256,256,0,0.8) 100%);} body#virtualCurrency ul.productList dl { display: block; width: 74vw; margin: 0 auto 0 auto; padding: 0 0; border :1px solid #ccc;} body#virtualCurrency ul.productList dl > div { margin: 0 0;padding: 0 0;} body#virtualCurrency ul.productList dl > div > dt { margin: 0 0; padding: .5em .75em; font-weight: bold; border-bottom :1px solid #ddd; text-align: center; background-color: var(--c-paleblue);} body#virtualCurrency ul.productList dl dd { margin: 0 0; padding: .5em .75em; color: #000; border-bottom :1px solid #ccc;} body#virtualCurrency ul.productList dl > div:last-child dd { border:none} body#virtualCurrency ul.productList dl dd span { display: block; text-align: center; color: orangered; font-weight: bold;} body#virtualCurrency ul.productList dl dd small { display: block; font-size: var(--fs-s);} body#virtualCurrency ul.productList .apply a { width: 90%;} body#virtualCurrency ul.productList .apply a + span { display: block; padding-top: .25em; text-align: center; font-size: var(--fs-m); } /* 20250908 開閉スイッチ */ #article > div.section > div.slideContent { margin: 0 auto; padding: .5em 0 0 0; line-height: 1; text-align: center;} #article > div.section > div.slideContent a { display: inline-block; margin: 0 0; padding: .75em 2.5em .75em 3em; color:var(--c-concblue); border: 1px solid var(--c-concblue); border-radius: 8px; background-color: #fff;} #article > div.section > div.slideContent a:after { display: inline-block; content:""; width: 0; height:0; margin-left: .5em; border-left: .5em solid transparent; border-right: .5em solid transparent; border-bottom: .8em solid var(--c-concblue); transition: transform 0.75s ease;} #article > div.section.closed > div.slideContent a:after { transform: rotate(180deg); transition: transform 0.75s ease;} /* */ div.slideOverview, div.slideCampaign { margin: 0 auto; padding: 0.25em 0 0 0; line-height: 1; text-align: center;} div.slideOverview a, div.slideCampaign a { display: inline-block; position: relative; margin: 0; padding: 0; line-height: 1; color:var(--c-concblue);} div.slideOverview a:after, div.slideCampaign a:after { display: inline-block; position:absolute; content:""; width: 0; height:0; top: 0.1em; margin-left: .25em; padding-top: 0; border-left: .5em solid transparent; border-right: .5em solid transparent; border-top: .8em solid var(--c-concblue); transition: transform 0.75s ease;} div.slideOverview.opened a:after, div.slideCampaign.opened a:after { transform: rotate(180deg); transition: transform 0.75s ease;} div.slideCampaign.opened a { margin: 0.5em;} /************************************************** div.section h2 + div : 読み物コンテンツの意匠 /**************************************************/ div.section.closed h2 + div { position: relative; height: 5em; overflow: hidden;} div.section.closed h2 + div::after { content: ""; height: 100%; width: 100%; position: absolute; bottom: 0; left: 0; background: linear-gradient(to top,rgba(255,255,255,1),rgba(255,255,255,0)); z-index: 2;} div.section h2 + div { max-height: none; transition: transform 0.75s ease;} div.section h2 + div::after { content:none;} /* 仮想通貨（暗号資産）取引所一覧比較 *//* 仮想通貨（暗号資産）取引所をピックアップ！ */ body#virtualCurrency #productlist table#productTable tbody th, body#virtualCurrency ul.productList .service_name, body#corporate ul.productList div.service_name, body#foreignExchange ul.productList div.service_name { display: flex; justify-content: center; align-items: center; padding: 0 0;} body#virtualCurrency table#productTable tbody th.datumName .serviceLogo, body#virtualCurrency ul.productList .service_name .serviceLogo, body#corporate ul.productList div.service_name span.serviceLogo, body#foreignExchange ul.productList div.service_name span.serviceLogo { display: flex; justify-content:flex-start; align-items: center; width: 40vw; height: 20vw; margin: 2vw 2vw; padding: 8vw 4vw; background-color: rgba(256,256,256,0.99); border: 1px solid #DAECF8; border-radius: 3px;} body#virtualCurrency table#productTable tbody th.datumName .serviceLogo img, body#virtualCurrency ul.productList .service_name .serviceLogo img, body#corporate ul.productList div.service_name span.serviceLogo img.serviceLogo, body#foreignExchange ul.productList div.service_name span.serviceLogo img.serviceLogo { max-width: 32vw;} body#virtualCurrency table#productTable tbody th span:first-of-type, body#virtualCurrency ul.productList .service_name a, body#corporate ul.productList div.service_name span.service_name, body#foreignExchange ul.productList div.service_name a { /* 金融機関名 */ display: block; width: 60vw; margin: 2vw 4vw; color: #fff; text-align: left;} /************************************************** ************************************************** #corporate : 法人口座で選ぶ銀行比較 2026.02.10 ************************************************** **************************************************/ #corporate #maincontents > section#title { background-color: #fff; background-image: url("/images/special/bankingServices/corporate/hero.webp"); background-size: cover; background-position: center center; } #corporate #maincontents > section#title h1 span.line2nd { padding: 0 0 13vw 0; } #corporate #maincontents > section#title h1 u { top: 11.5vw;} #corporate #maincontents > section#title h1 span.line3rd { font-size: 9vw; letter-spacing: 0; } #corporate #maincontents > section#title h1 span.line3rd small { font-size: 6.5vw; } #corporate #maincontents > section.articles#productlist > h2 { letter-spacing: -0.025em; } /* #corporate div.scrollTable : スクロール表 */ #corporate div.scrollTable table.productTable thead th, #corporate div.scrollTable table.productTable thead td { /* thead */ min-width: 9em; color: #fff; background-color: var(--c-concblue); border-right: 1px solid #fff; padding: .5em 0; font-weight:bold; text-align: center;} #corporate div.scrollTable table thead th.firstCell { width: 45vw; min-width: 45vw;} /*#corporate div.scrollTable table thead th.datumUpdated_on { min-width: 7.4em;}*/ #corporate table#productTable tbody th.datumName { display: table-cell; width:auto; } #corporate table#productTable tbody th.datumName .serviceLogo { display: flex; justify-content:flex-start; align-items: center; width: 30vw; height: 10vw; margin: 2vw auto; padding: 8vw 4vw; background-color: rgba(256,256,256,0.99); border: 1px solid #DAECF8; border-radius: 3px; } #corporate table#productTable tbody th.datumName .serviceLogo img { max-width: 28vw; /*max-height: 6vw;*/} #corporate table#productTable tbody th.datumName span.serviceName {/* サービス名 */ display: block; margin: 2vw auto; font-weight: bold; font-size: var(--fs-xs); text-align: center; } #corporate div.scrollTable table.productTable .term a { font-size: var(--fs-xs); padding: 1vw 6vw 1vw 3vw; } #corporate div.scrollTable table.productTable .term a:after { width: 4vw; height: 4vw; top: 1.5vw; right: 1.4vw; } #corporate div.scrollTable sup { display: inline !important;} /* #corporate div.scrollTable table.productTable tbody td.datumUpdated_on { font-size: var(--fs-xs);}*/ #corporate #maincontents > section#productlist.articles > div.scrollTable.layout + p.updated_on { margin: 0.5em 0; padding: 0 0; line-height: 1.2; text-align: right; font-size: var(--fs-s); color: #666;} /* #guardWording */ #corporate #productlist ul.guardWording > li { margin: 0 0 0 2.5em; text-indent: -2.5em; font-size: var(--fs-s); } #corporate #productlist ul.guardWording > li:before { content: none;} /* 法人口座が魅力的な銀行をピックアップ！ */ body#corporate ul.productList div.service_name {} body#corporate ul.productList div.service_name span.serviceLogo { width: 30vw;} body#corporate ul.productList div.service_name .service_logo img.serviceLogo {} body#corporate ul.productList div.service_name span.service_name { width: 42vw; flex-basis: auto; font-size: var(--fs-m);} /* ul.productList : 法人口座が魅力的な銀行をピックアップ！ */ body#corporate ul.productList div.specList > div.pr_point {} #corporate ul.productList div.specList > dl.specTable, #foreignExchange ul.productList div.specList > dl.specTable { display: block; margin: 0 auto 0 auto; padding: 0 0; width: 74vw; border-width: 1px 1px 0 1px; border-style: solid; border-color: #ccc;} #corporate ul.productList div.specList > dl.specTable > div, #foreignExchange ul.productList div.specList > dl.specTable > div { display: block; margin: 0; padding: 0;} #corporate ul.productList div.specList > dl.specTable > div > dt, #foreignExchange ul.productList div.specList > dl.specTable > div > dt { margin: 0 0; padding: .5em .75em; font-weight: bold; border-bottom :1px solid #ddd; text-align: center; background-color: var(--c-paleblue);} #corporate ul.productList div.specList > dl.specTable > div > dd, #foreignExchange ul.productList div.specList > dl.specTable > div > dd { margin: 0 0; padding: .5em .75em; color: #000; border-bottom :1px solid #ccc;} body#corporate ul.productList div.specList > ul, body#foreignExchange ul.productList div.specList > ul { margin: 0 0; padding: 2vw 4vw;} body#corporate ul.productList div.specList > ul li, body#foreignExchange ul.productList div.specList > ul li { margin: 0 0 0 1em; text-indent: -1em; } /* 記事内のリスト */ #corporate #maincontents > section.articles div.section#merit > ul ul, #corporate #maincontents > section.articles div.section#faq > ul ul, #corporate #maincontents > section.articles div.section#summary > ul, section.articles div.section > div > ul { list-style: disc; margin: 0 0 0 1.5em;} #corporate #maincontents > section.articles div.section#merit > ul ul li, #corporate #maincontents > section.articles div.section#faq > ul ul li, #corporate #maincontents > section.articles div.section#summary > ul li, section.articles div.section > div > ul li { list-style: disc; text-indent: 0; } #corporate #maincontents > section.articles div.section#other > ul > li > p > a { display:block; margin: 0.5em 0 1em 0.5em; padding-left: 12px; text-decoration:none; background:url("/images/common/gray-arrow.png") left top 1.75vw no-repeat; background-size: 5px auto; color: #0765A3;} #corporate #maincontents > section#title .line3rd > span { font-size:11vw; } #corporate #maincontents > section#title .line4th { font-size:5vw; } #corporate ul.productList div.specList > ul.remarks > li { font-size: var(--fs-s); color: #666; line-height: 1.2; margin: 0 0 0 2.5em; text-indent: -2.5em; } /************************************************** ************************************************** #foreignExchange : FX口座比較 2026.04.10 ************************************************** **************************************************/ body#foreignExchange #maincontents > section#title { background-color: #daeaf5; background-image: url('/images/special/foreignExchange/bg.webp'); background-position: center center; background-repeat: no-repeat; background-size:125vw 150vw;} body#foreignExchange #maincontents > section#title::before { content: ""; display: block; position: absolute; top: 20vw; right: 2vw; width: 40vw; height: 33vw; background: url('/images/special/foreignExchange/hero.webp') top right no-repeat; background-size: contain; } body#foreignExchange #maincontents > section#title h1 {} body#foreignExchange #maincontents > section#title h1 span.line1st { /*【2026年4月】*/ display: block; width: fit-content; margin: 0 auto 10px auto; padding: 0 0 10px 0; font-size: 7vw; background: linear-gradient(transparent 30%,rgba(250, 95, 85,.35) 70%,rgba(250, 95, 85,.8) 100%);} body#foreignExchange #maincontents > section#title h1 span.line2nd {/* はじめての */ padding: 0 0 0 0;}. body#foreignExchange #maincontents > section#title h1 span.line3rd {/* FX口座比較 */} body#foreignExchange #maincontents > section#title .line4th {/* 初心者におすすめの選び方と比較ポイントを解説 */ position: sticky; z-index: 9; margin: 0 auto; padding: 4vw 4vw; width: fit-content; font-size: 4.2vw; letter-spacing: -0.2vw; border-radius: 2em; background-color: rgba(256,256,256,0.7);} body#foreignExchange #maincontents > section#title .line4th span { display:inline;} body#foreignExchange #maincontents > section#title em { color: var(--c-concorange);} /* スペック表 */ body#foreignExchange div.scrollTable { } body#foreignExchange table.productTable { min-width:auto; line-height: 1;} body#foreignExchange table.productTable thead th, body#foreignExchange table.productTable thead td { /* thead */ color: #fff; background-color: var(--c-concblue); border-right: 1px solid #fff; padding: 1em 0; font-weight:bold; line-height: 1;} body#foreignExchange table.productTable tbody th, body#foreignExchange table.productTable tbody td { /* tbody */ padding: 1em .5em;} body#foreignExchange table.productTable thead th { text-align: center; color: #fff; background-color: var(--c-concblue); border-right: 1px solid #fff; padding: 1em 0; font-weight: bold;} body#foreignExchange table.productTable thead th.num2, body#foreignExchange table.productTable thead th.num3 { min-width:25vw;} body#foreignExchange table.productTable thead th.datumPoint { min-width:45vw;} body#foreignExchange table.productTable thead th.apply { min-width: 40vw;} body#foreignExchange table.productTable .datumName { width: 40vw; min-width: 40vw; font-weight: bold;} body#foreignExchange table.productTable .datumRate { width: 10em;} body#foreignExchange table.productTable tbody .datumFeature { min-width: 14em; text-align: left;} body#foreignExchange table.productTable tbody .datumUpdated_on, body#foreignExchange table.productTable tbody .num4 { width: 9.5em; white-space: nowrap; } body#foreignExchange div.scrollTable table.productTable td.apply { padding: 0.25em 0; width: 9.5em;} body#foreignExchange div.scrollTable table.productTable div.apply { margin: 0 auto; width: 9.5em;} body#foreignExchange div.scrollTable table.productTable .apply a { width: 9.5em;} /* ランキングアイコン */ body#foreignExchange table.productTable#productTable tbody th.datumName > div, body#foreignExchange div#ranking table.productTable tbody th.datumName > div { text-align: center;} body#foreignExchange table.productTable tbody .datumName div.serviceLogo, body#foreignExchange div#ranking table.productTable tbody .datumName div.serviceLogo { display: contents;} body#foreignExchange table.productTable tbody .datumName div.serviceLogo a, body#foreignExchange div#ranking table.productTable tbody .datumName div.serviceLogo a { display: flex; justify-content:center; align-items: center; width: 30vw; height: 10vw; margin: 0 auto; padding: 8vw 4vw; background-color: rgba(256,256,256,0.8); border: 1px solid #DAECF8; border-radius: 3px;} body#foreignExchange table.productTable tbody th.datumName .serviceLogo img, body#foreignExchange div#ranking table.productTable tbody th.datumName .serviceLogo img { width:auto; height: auto; max-width: 20vw;} body#foreignExchange table.productTable tbody .datumName q, body#foreignExchange div#ranking table.productTable tbody .datumName q {/* ランキングicon：背景色 */ display: inline-block; position: relative; margin-right: 0.3em; width: 2.5em; min-width: 2.5em; height: 2.5em; quotes: none; background-color: #999; border-width: 2px; border-style: solid; border-color: #666; border-radius: 2em;} body#foreignExchange table#productTable tr.rank-1 .datumName q, body#foreignExchange div#ranking table.productTable tr.rank-1 .datumName q { border-color: #B78E13; background: linear-gradient(45deg, #B67B03 0%, #DAAF08 25%, #FEE9A0 60%, #DAAF08 75%, #B67B03 95%);} body#foreignExchange table#productTable tr.rank-2 .datumName q, body#foreignExchange div#ranking table.productTable tr.rank-2 .datumName q { border-color: #8F8F8F; background: linear-gradient(45deg, #757575 0%, #9E9E9E 25%, #E8E8E8 60%, #9E9E9E 75%, #757575 95%);} body#foreignExchange table#productTable tr.rank-3 .datumName q, body#foreignExchange div#ranking table.productTable tr.rank-3 .datumName q { border-color: #562917; background: linear-gradient(45deg, #260202 0%, #7c4828 25%, #fec4a0 60%, #7c4828 75%, #260202 95%);} body#foreignExchange table#productTable tbody .datumName q::after, body#foreignExchange div#ranking table.productTable tbody .datumName q::after {/* ランキングicon */ display: block; position: absolute; width: 100%; height: 100%; background-position: center center; background-size: auto 1.4em; background-repeat: no-repeat;} body#foreignExchange table#productTable tr.rank-1 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-1 .datumName q::after { background-image: url("/images/special/label-rank1-w.webp");} body#foreignExchange table#productTable tr.rank-2 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-2 .datumName q::after { background-image: url("/images/special/label-rank2-w.webp");} body#foreignExchange table#productTable tr.rank-3 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-3 .datumName q::after { background-image: url("/images/special/label-rank3-w.webp");} body#foreignExchange table#productTable tr.rank-4 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-4 .datumName q::after { background-image: url("/images/special/label-rank4-w.webp");} body#foreignExchange table#productTable tr.rank-5 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-5 .datumName q::after { background-image: url("/images/special/label-rank5-w.webp");} body#foreignExchange table#productTable tr.rank-6 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-6 .datumName q::after { background-image: url("/images/special/label-rank6-w.webp");} body#foreignExchange table#productTable tr.rank-7 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-7 .datumName q::after { background-image: url("/images/special/label-rank7-w.webp");} body#foreignExchange table#productTable tr.rank-8 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-8 .datumName q::after { background-image: url("/images/special/label-rank8-w.webp");} body#foreignExchange table#productTable tr.rank-9 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-9 .datumName q::after { background-image: url("/images/special/label-rank9-w.webp");} body#foreignExchange table#productTable tr.rank-10 .datumName q::after, body#foreignExchange div#ranking table.productTable tr.rank-10 .datumName q::after { background-image: url("/images/special/label-rank10-w.webp");} body#foreignExchange table.productTable tbody .datumName span {/* 金融機関名 */ display: block; margin: 2vw auto 1vw auto; text-align: center; font-size: var(--fs-s); line-height: 1.1;} .datumRate em { white-space: nowrap;} body#foreignExchange table.productTable tbody .datumName a.applyLink, body#foreignExchange div#ranking table.productTable tbody .datumName a.applyLink { width: 100%;} body#foreignExchange table.productTable tbody .datumName a:after, body#foreignExchange div#ranking table.productTable tbody .datumName a:after { width: 4vw; height: 4vw; top: 1.5vw; right: 1.4vw;} /* CTA to ランキング */ div#to-ranking { margin: 4vw 0 0 0;} div#to-ranking span { display: block; margin: 4vw 0; padding: 0 0; text-align: center; font-size: var(--fs-m); font-weight: bold;} div#to-ranking span .linkBtn { width: 100%; margin: 1vw auto 0 auto;} div#to-ranking span .linkBtn::before, div#to-ranking span .linkBtn::after { content: none;} div#to-ranking span .linkBtn a { display: block; margin: 0 auto; padding: 1.25em 0.5em; width: 90%; overflow: hidden; font-size: var(--fs-m); background: linear-gradient(to bottom, #ee1f1f, #cc0000);/*ボタンの色*/ box-shadow: 0 0 10px #c00; } div#to-ranking span div.linkBtn > a::after { right: -4vw; opacity: 0.75;} div#to-ranking span:nth-of-type(1) .linkBtn a { background: linear-gradient(to bottom, #28a745, #1e7e34);box-shadow: 0 0 10px #28a745;} div#to-ranking span:nth-of-type(2) .linkBtn a { background: linear-gradient(to bottom, #FFC107, #FF9800);box-shadow: 0 0 10px #FFC107;} div#to-ranking span:nth-of-type(3) .linkBtn a {} /****** カテゴリ別FX会社ランキング ******/ body#foreignExchange div#ranking div.scrollTable { margin: 0 0; border:none;} body#foreignExchange section#article div.scrollTable h3 { display:none;} body#foreignExchange #maincontents > section.articles div#ranking p.description { margin: 2vw 4vw;} body#foreignExchange section#article div.scrollTable table.productTable { border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; } body#foreignExchange section#article div.scrollTable table.productTable + p { margin: 1em 0 0 0; padding: 0 0; font-size: var(--fs-s); color: #666;} /*************** div.section#itmesキャンペーン情報もチェック！魅力的なFX口座をご紹介 ***************/ body#foreignExchange ul.productList > li > div.specList > dl dl { margin: 0 0; padding: 0 0; display: table;} body#foreignExchange ul.productList > li > div.specList > dl dl > div { display: table-header-group;} body#foreignExchange ul.productList > li > div.specList > dl dl dt, body#foreignExchange ul.productList > li > div.specList > dl dl dd { margin: 0 0; padding: .25em 0; display: table-cell; font-weight: normal;} body#foreignExchange ul.productList > li > div.specList > dl dl dt { width: 9em} /******************************************************************************** body#virtualCurrency.detail 仮想通貨取引所比較 詳細 body#foreignExchange.detail FX口座比較 詳細 /********************************************************************************/ body#virtualCurrency.detail {} body#foreignExchange.detail {} body#virtualCurrency.detail #maincontents > section#title, body#foreignExchange.detail #maincontents > section#title { padding: 12vw 2vw;} body#foreignExchange.detail #maincontents > section#title::before { content:none;} body#virtualCurrency.detail div.layout, body#foreignExchange.detail div.layout { position: relative; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; font-size: 5.5vw; font-weight: bold;; line-height:1; text-align: center; color: #444; background-position: top right; background-repeat: no-repeat; background-size: cover;} body#virtualCurrency.detail span.line2nd, /* 初心者におすすめ！かんたん・安心！ */ body#foreignExchange.detail span.line2nd { position: relative; top: auto; right: auto; width: auto; margin: 0; padding: 0 0 3vw 0; transform: none; text-align: center; background-color: transparent; border-radius: 0; text-align: center; letter-spacing: -0.04em;} body#virtualCurrency.detail span.pageTitle, /* 仮想通貨（暗号資産）取引所比較 */ body#foreignExchange.detail span.pageTitle { display: block; padding: 0 0 3vw 0; font-size: 5.5vw; text-decoration: none; text-shadow: none;} body#virtualCurrency.detail #maincontents > section#title h1.pageDescription, /* ～～の特徴と注目ポイントを詳しくご紹介！ */ body#foreignExchange.detail #maincontents > section#title h1.pageDescription { display: block; padding: 0 0; font-size: 7vw; text-align: center; letter-spacing: 0; color: #000; line-height:1.2; letter-spacing: -0.05em; font-family: "Mochiy Pop One", sans-serif; font-weight: 500;} body#virtualCurrency.detail #maincontents > section#title h1.pageDescription span, body#foreignExchange.detail #maincontents > section#title h1.pageDescription span { display: block;} body#virtualCurrency.detail #maincontents > section#title h1.pageDescription em, body#foreignExchange.detail #maincontents > section#title h1.pageDescription em { color: var(--c-concblue);} /************************** 商品詳細スペック /**************************/ body#virtualCurrency.detail #maincontents > section#item {} body#virtualCurrency.detail section#item div.item, body#foreignExchange.detail section#item div.item { margin:0 auto; padding: 0 2vw;} body#virtualCurrency.detail section#item div.spec-service-logo, body#foreignExchange.detail section#item div.spec-service-logo { display: flex; justify-content:center; align-items: center; width: 80vw; height: 40vw; margin: 1px auto; padding: 6vw 3vw;} body#virtualCurrency.detail section#item div.spec-service-logo img, body#foreignExchange.detail section#item div.spec-service-logo img { max-width: 48vw; max-height: 24vw;} body#virtualCurrency.detail section#item div.item > h2, /* サービス名称 */ body#foreignExchange.detail section#item div.item > h2 { margin: 0 0; font-weight:bold; font-size:var(--fs-l); text-align: center;} body#virtualCurrency.detail section#item .spec-catch, /* 仕様キャッチコピー */ body#foreignExchange.detail section#item .spec-catch { margin: 0 auto; padding: 1em 0 .5em 0; text-align: center; font-weight: bold; line-height: 1.75; letter-spacing: -0.1vw;} body#virtualCurrency.detail section#item .spec-catch span, body#foreignExchange.detail section#item .spec-catch span { display: block; margin: .25em auto; padding: 0 0; width: fit-content; line-height: 1.25; background: linear-gradient(transparent 40%, rgba(256,256,0,0.5) 70%, rgba(256,256,0,0.8) 100%);} body#virtualCurrency.detail section#item div.item dl.spec-1 {/* スペック表 */ margin: .5em auto 0 auto; display: table; border-collapse: collapse; border: 1px solid #ccc;} body#virtualCurrency.detail section#item div.item dl.spec-1 > div { display: table-row; border-bottom: 1px solid #ccc;} body#virtualCurrency.detail section#item div.item dl.spec-1 > div > dt { display: table-cell; width: 8em; padding: .5em .75em; text-align: left; vertical-align: middle; border-right :1px solid #ccc; background-color: var(--c-paleblue);} body#virtualCurrency.detail section#item div.item dl.spec-1 > div > dd { display: table-cell; padding: .5em .75em; vertical-align: middle; text-align: left;} body#virtualCurrency.detail section#item div.item dl.spec-1 > div > dd span, body#foreignExchange.detail section#item div.item dl.spec-1 > div > dd span { display: block; color: orangered; font-weight: bold;} body#virtualCurrency.detail section#item div.item dl.spec-1 > div > dd small, body#foreignExchange.detail section#item div.item dl.spec-1 > div > dd small { display: block; font-size: var(--fs-s);} body#foreignExchange.detail section#item div.item dl.spec-1 { margin: .5em auto 0 auto; border-width: 1px 1px 0 1px; border-color: #ccc; border-style: solid; } body#foreignExchange.detail section#item div.item dl.spec-1 > div { border-bottom: 1px solid #ccc;} body#foreignExchange.detail section#item div.item dl.spec-1 > div > dt { padding: .5em .75em; text-align: center; border-bottom :1px solid #ddd; background-color: var(--c-paleblue); } body#foreignExchange.detail section#item div.item dl.spec-1 > div > dd { padding: .5em .75em; text-align: left; } body#foreignExchange.detail section#item div.item dl.spec-1 dl { display: table;} body#foreignExchange.detail section#item div.item dl.spec-1 dl > div { display: table-row;} body#foreignExchange.detail section#item div.item dl.spec-1 dl > div dt { display:table-cell; width: 8.5em;} body#foreignExchange.detail section#item div.item dl.spec-1 dl > div dd { display: table-cell;} body#foreignExchange.detail section#item dl.spec-2 { margin: 0.5em auto; width: 100%; padding: 2vw; background-color: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 6px; } body#virtualCurrency.detail section#item dl.spec-2 dt, body#foreignExchange.detail section#item dl.spec-2 dt { color:#666; font-size: var(--fs-l); font-weight: bold;} body#virtualCurrency.detail section#item dl.spec-2 div.spec-campaign, body#foreignExchange.detail section#item dl.spec-2 div.spec-campaign { display: block; margin: .5em 0; padding: .75em 1em; font-size: var(--fs-m); color: #000; background-color: #ffc;} body#virtualCurrency.detail section#item dl.spec-2 div.spec-pr-point, body#foreignExchange.detail section#item dl.spec-2 div.spec-pr-point { display: block; margin: .5em 0; padding: .75em 1em; font-size: var(--fs-s); color: #000; background-color: #f6f6f6;} body#virtualCurrency.detail section#item dl.spec-2 div.spec-remarks, body#foreignExchange.detail section#item dl.spec-2 div.spec-remarks { display: block; margin: .5em .5em; font-size: var(--fs-s); background-color: #f6f6f6;} body#virtualCurrency.detail section#item dl.spec-2 div.spec-attention, body#foreignExchange.detail section#item dl.spec-2 div.spec-attention { display: block; margin: .5em 0; padding: .75em 1em; font-size: var(--fs-s); color: #000; background-color: #f6f6f6;} /* 文字修飾 */ body#virtualCurrency.detail section#item em, body#foreignExchange.detail section#item em { color: orangered; font-style: normal; font-weight: bold;} body#virtualCurrency.detail section#item .fs-large, body#foreignExchange.detail section#item .fs-large { font-size: var(--fs-l);} body#virtualCurrency.detail section#item .fs-medium, body#foreignExchange.detail section#item .fs-medium { font-size: var(--fs-m);} body#virtualCurrency.detail section#item .underline, body#foreignExchange.detail section#item .underline { background: linear-gradient(transparent 40%, rgba(256,256,0,0.5) 70%, rgba(256,256,0,0.8) 100%);} body#virtualCurrency.detail section#item .bold, body#foreignExchange.detail section#item .bold { font-weight: bold;} .spec-updated-on { display: block; margin: .5em .5em; font-size: var(--fs-s); text-align: right; line-height: 1.2;} body#virtualCurrency.detail #maincontents > section#item .apply, body#foreignExchange.detail #maincontents > section#item .apply { margin: 0 auto; padding: 0.5em 0; width: 100%; text-align: center;} body#virtualCurrency.detail #maincontents > section#item .apply a, body#foreignExchange.detail #maincontents > section#item .apply a { /*公式サイトへ*/ position: relative; display: inline-block; margin: .5em auto 0 auto; padding: .75em 6em; font-size: var(--fs-m); font-weight: bold; text-align: center; color: #fff !important; background: -webkit-linear-gradient(#ee1f1f, #cc0000) !important; letter-spacing: .1em; border-radius: 2em; cursor: pointer;} body#virtualCurrency.detail #maincontents > section#item .apply a::after, body#foreignExchange.detail #maincontents > section#item .apply a::after { content:""; position:absolute; display: block; width: 30px; height: 30px; top: .75em; right: .5em; background-image: url("/images/special/bankingServices/fixedDeposit/icon_out-w.png"); background-repeat: no-repeat; background-size: 30px; background-position: 0 0; cursor: pointer; } body#virtualCurrency.detail #maincontents > section#item ul.guardWording, body#foreignExchange.detail #maincontents > section#item ul.guardWording { margin: 4vw 4vw 0 4vw;} body#foreignExchange #faq dl.faqList dd { display:none; } /* タブ：切り替えスイッチ */ ul#ranking-switch, ul#pickup-switch { display: flex; justify-content: center; margin: 0 0 1px 0; padding: 0; list-style: none; font-weight: bold; border-bottom: 3px solid rgba(18, 74, 155, 0.8);} ul#ranking-switch li, ul#pickup-switch li { display: block; margin: 0 1px; padding: 0 0; flex-basis: 24.5%; flex-grow: 1; border: 1px solid #aaa; border-bottom: none; border-radius: 6px 6px 0 0; font-size: var(--fs-xs); cursor: pointer;} ul#ranking-switch li.selected, ul#pickup-switch li.selected { border-color: rgba(18, 74, 155, 1); background-color: rgba(18, 74, 155, 0.8);} ul#ranking-switch li a, ul#pickup-switch li a { display: block; margin: 0; padding: 2vw; color: #333;} ul#ranking-switch li.selected a, ul#pickup-switch li.selected a { color: #fff;} #foreignExchange ul#ranking-switch li { text-align:center; flex-basis: auto; } ul#pickup-switch { margin: 0 0; justify-content: flex-start;} ul#pickup-switch + div.scrollTable { margin:0 0;} /**************************************** 外貨預金一覧比較タブ {****************************************/ ul#pickup-switch { margin: 0 0; justify-content: flex-start; border-bottom: 1px solid #ccc} ul#pickup-switch li { margin: 0 1px 0 0; border-radius: 0 0;} ul#pickup-switch li:last-of-type { margin-right: 0;} ul#pickup-switch li { padding: 3px 0 0 0; border-radius: 4px 4px 0 0; border: 1px solid #ccc; border-bottom: none; background-color: #fff; line-height: 1;} ul#pickup-switch li a { display: block; padding: 2vw 2vw; text-align: center; color: #333;} ul#pickup-switch li a span { display: block; margin: 1vw auto 0 auto; font-size: var(--fs-xs); color: #333;} ul#pickup-switch li.selected { padding: 0 0 0 0; border-radius: 6px 6px 0 0; border-style: solid; border-color: var(--c-concblue) #ccc transparent #ccc; border-width: 10px 1px 0 1px; background-color: #fff;} ul#pickup-switch li.selected a { color: var(--c-concblue);} #pickup-switch img { width: auto; height: 8vw; margin-right: auto;} /* 表の意匠 */ ul#pickup-switch + div.scrollTable { margin:0 0; border-top: none;} #foreignCurrencyDeposit #productlist div.scrollTable table#fcdProductTable thead th.firstCell { width: 25vw; min-width: 25vw;} #foreignCurrencyDeposit #productlist #fcdProductTable tbody { display:none;} #foreignCurrencyDeposit #productlist #fcdProductTable td.apply { padding: 0.5em 0.25em;} #foreignCurrencyDeposit #productlist #fcdProductTable td.apply > span { display: block; margin: 0.2em auto; text-align: center; font-size: var(--fs-s); font-weight: normal;} #foreignCurrencyDeposit #productlist #fcdProductTable tfoot {} #foreignCurrencyDeposit #productlist #fcdProductTable tfoot tr {} #foreignCurrencyDeposit #productlist #fcdProductTable tfoot th { position: sticky; top: 0; left: 0; z-index: 2; background-color: var(--c-paleblue); border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; } #foreignCurrencyDeposit #productlist #fcdProductTable tfoot td { padding: .25em .5em; font-weight: normal; border-top: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; } ul.linkList, section#article .section.reference ul, section.articles div.section > div > ul.linkList, ul.linkList li, section#article .section.reference ul li, section.articles div.section > div > ul.linkList li { margin-left: 0 !important; list-style: none; line-height: 1.5;} ul.linkList a, section#article .section.reference a { display:inline-block; text-decoration:none; background:url("/images/common/gray-arrow.png") 0 1.65vw no-repeat; background-size: 1.25vw auto; padding-left: 2.5vw; color: #0765A3; font-size: 4.25vw; letter-spacing: -0.04em; } /* ▼ RECF:BEGIN 不動産クラウドファンディング比較 ── assets/recf-preact.css から生成。手で編集しない ▼ */ /* 不動産クラウドファンディング比較ページ（/special/realestateCrowdfunding/） */ /* 0. トークン */ body#realestateCrowdfunding { /* 色（仕様書3章。値の変更は不可） */ --recf-navy: #0b2348; --recf-burgundy: #b20d2e; --recf-cta: #cf0a2c; --recf-cta-dark: #b00627; --recf-pink-050: #fff8f8; --recf-pink-100: #fff3f4; --recf-pink-200: #f7dde1; --recf-pink-300: #f2c9d0; --recf-text: #17233a; --recf-sub: #667085; --recf-line: #e7e9ee; --recf-white: #ffffff; --recf-surface: #fafafb; --recf-icon-border: #f4e3e6; /* 文字サイズ（PC） */ --recf-fs-display: clamp(44px, 4.4vw, 60px); --recf-fs-subcopy: 20px; --recf-fs-fvlead: 20px; --recf-fs-h2-section: 28px; --recf-fs-h2: 28px; --recf-fs-h3: 21px; --recf-fs-h4: 17px; --recf-fs-lead: 17px; --recf-fs-body: 16px; --recf-fs-small: 14px; --recf-fs-note: 14px; /* 行間・字送り */ --recf-lh-display: 1.25; --recf-lh-head: 1.45; --recf-lh-lead: 1.95; --recf-lh-body: 1.9; --recf-lh-note: 1.7; --recf-ls-body: 0.01em; /* ウェイト（normal / bold の2種類のみ。決定事項1） */ --recf-fw-normal: 400; --recf-fw-bold: 700; /* 余白（4pxグリッド） */ --recf-sp-1: 4px; --recf-sp-2: 8px; --recf-sp-3: 12px; --recf-sp-4: 16px; --recf-sp-5: 20px; --recf-sp-6: 24px; --recf-sp-8: 32px; --recf-sp-10: 40px; --recf-sp-12: 48px; --recf-sp-14: 56px; --recf-sp-16: 64px; --recf-sp-20: 80px; /* 記事の縦リズム */ --recf-h2-mt: 56px; --recf-h2-mb: 24px; --recf-h3-mt: 40px; --recf-h3-mb: 16px; --recf-h4-mt: 28px; --recf-h4-mb: 12px; --recf-p-mb: 20px; --recf-block-mb: 32px; --recf-section-mb: 64px; /* 角丸 */ --recf-radius-sm: 4px; --recf-radius-md: 10px; --recf-radius-lg: 16px; --recf-radius-pill: 999px; /* 影 */ --recf-shadow-card: 0 5px 16px rgba(11, 35, 72, .04); --recf-shadow-cta: 0 4px 10px rgba(176, 6, 39, .14); --recf-shadow-page: 0 16px 50px rgba(11, 35, 72, .08); /* レイアウト */ --recf-page-max: 1440px; --recf-container-max: 1180px; --recf-gutter: 32px; --recf-article-max: 1020px; --recf-page-min: 990px; /* 装飾 */ --recf-rule-w: 44px; --recf-rule-h: 3px; --recf-icon-circle: 48px; --recf-icon-glyph: 28px; /* フォーカス（仕様書5-3） */ --recf-focus: 3px solid rgba(11, 35, 72, .55); } body#realestateCrowdfunding { --recf-fs-display: clamp(24px, 8.0vw, 36px); --recf-fs-subcopy: clamp(15px, 4.4vw, 18px); --recf-fs-fvlead: clamp(14px, 4.0vw, 16px); --recf-fs-h2-section: 21px; --recf-fs-h2: 21px; --recf-fs-h3: 18px; --recf-fs-h4: 16px; --recf-fs-lead: 15px; --recf-fs-body: 15px; --recf-fs-small: 14px; --recf-fs-note: 14px; --recf-lh-lead: 1.85; --recf-lh-body: 1.85; --recf-h2-mt: 40px; --recf-h2-mb: 18px; --recf-h3-mt: 28px; --recf-h3-mb: 12px; --recf-h4-mt: 20px; --recf-h4-mb: 8px; --recf-p-mb: 18px; --recf-block-mb: 24px; --recf-section-mb: 44px; --recf-gutter: 16px; --recf-rule-w: 36px; --recf-icon-circle: 40px; --recf-icon-glyph: 24px; } /* 1. 土台の打ち消し */ /* 1-1. 改行の制御 */ body#realestateCrowdfunding #maincontents, body#realestateCrowdfunding #maincontents * { word-break: normal; overflow-wrap: break-word; } /* 1-2. セクションの器 */ /* 1-1b. ページの地色と幅 */ body#realestateCrowdfunding { background: #f3f4f6; } body#realestateCrowdfunding #maincontents { box-sizing: border-box; max-width: var(--recf-page-max); margin-inline: auto; padding-bottom: 0; background: var(--recf-white); box-shadow: var(--recf-shadow-page); } body#realestateCrowdfunding #maincontents > section { max-width: none; margin: 0; padding: 0; font-size: var(--recf-fs-body); line-height: var(--recf-lh-body); letter-spacing: var(--recf-ls-body); color: var(--recf-text); background: var(--recf-white); box-shadow: none; } body#realestateCrowdfunding #maincontents > section.articles { padding: 0; background-color: var(--recf-white); border-top: 0; } body#realestateCrowdfunding #maincontents > section.articles::before, body#realestateCrowdfunding #maincontents > section.articles::after { display: none; content: none; } body#realestateCrowdfunding #maincontents > section.articles:nth-of-type(2) { border: 0; } body#realestateCrowdfunding #maincontents > section > h2, body#realestateCrowdfunding #maincontents > section > p, body#realestateCrowdfunding #maincontents > section > ul, body#realestateCrowdfunding #maincontents > section > span, body#realestateCrowdfunding #maincontents > section > div.section, body#realestateCrowdfunding #maincontents > section > section, body#realestateCrowdfunding #maincontents > section > div.scrollTable { box-sizing: border-box; max-width: calc(var(--recf-container-max) + var(--recf-gutter) * 2); margin-inline: auto; padding-inline: var(--recf-gutter); } /* 1-3. FVの意匠 */ body#realestateCrowdfunding #maincontents > section#title { position: relative; isolation: isolate; width: 100%; max-width: none; min-height: 500px; margin: 0; padding: 150px 0 0; overflow: hidden; text-align: center; background: var(--recf-white); box-shadow: none; } body#realestateCrowdfunding #maincontents > section#title::before { position: absolute; z-index: -2; top: 42px; right: 8%; width: 120px; height: 92px; background-image: radial-gradient(circle, rgba(178, 13, 46, .12) 2px, transparent 2.4px); background-size: 16px 16px; pointer-events: none; content: ""; } body#realestateCrowdfunding #maincontents > section#title::after { position: absolute; z-index: -1; inset: 0; height: 500px; background: url("/images/special/realestateCrowdfunding/fv-pc.svg") center top / 100% 500px no-repeat; pointer-events: none; content: ""; } body#realestateCrowdfunding #maincontents > section#title h1, body#realestateCrowdfunding #maincontents > section#title .line4th { position: relative; box-sizing: border-box; max-width: calc(var(--recf-container-max) + var(--recf-gutter) * 2); margin-inline: auto; padding-inline: var(--recf-gutter); } body#realestateCrowdfunding #maincontents > section#title h1 { width: auto; font-size: var(--recf-fs-display); font-weight: var(--recf-fw-bold); line-height: var(--recf-lh-display); color: var(--recf-navy); background: none; } body#realestateCrowdfunding #maincontents > section#title h1 span.line1st, body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd, body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd { margin: 0; padding: 0; font-family: inherit; font-weight: inherit; font-size: inherit; letter-spacing: normal; text-shadow: none; background: none; } body#realestateCrowdfunding #maincontents > section#title .line4th { padding-block: 0; font-family: inherit; font-weight: inherit; background: none; } body#realestateCrowdfunding #maincontents > section#title h1 span.line1st { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 var(--recf-sp-4); font-size: var(--recf-fs-subcopy); font-weight: var(--recf-fw-bold); line-height: 1.5; color: var(--recf-navy); } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::before, body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::after { flex: none; width: 2px; height: 26px; background: var(--recf-burgundy); content: ""; } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::before { transform: rotate(-28deg); } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::after { transform: rotate(28deg); } body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd { display: block; letter-spacing: .01em; white-space: nowrap; } body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd > span, body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd > em { display: inline; font-style: normal; } body#realestateCrowdfunding #maincontents > section#title h1 em { color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents > section#title h1::after { flex: none; width: 54px; height: 4px; margin: 22px auto; border-radius: var(--recf-radius-pill); background: var(--recf-burgundy); content: ""; } body#realestateCrowdfunding #maincontents > section#title .line4th { margin-block: 0; font-size: var(--recf-fs-fvlead); font-weight: var(--recf-fw-normal); line-height: 1.5; letter-spacing: -.05em; color: var(--recf-text); } body#realestateCrowdfunding #maincontents > section#title .line4th > span { display: block; padding: 0; white-space: normal; } body#realestateCrowdfunding .recf-fv__br--sp { display: none; } body#realestateCrowdfunding #maincontents > section#title { min-height: 440px; padding: 40px 0 calc(21vw + 8px); background-image: url("/images/special/realestateCrowdfunding/fv-sp-city.svg"); background-position: center bottom; background-size: 100% auto; background-repeat: no-repeat; } body#realestateCrowdfunding #maincontents > section#title::before { display: none; content: none; } body#realestateCrowdfunding #maincontents > section#title::after { inset: 0 0 auto 0; height: 76.923vw; background: url("/images/special/realestateCrowdfunding/fv-sp-deco.svg") center top / 100% 100% no-repeat; } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd { gap: 12px; margin-bottom: 14px; } body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::before, body#realestateCrowdfunding #maincontents > section#title h1 span.line2nd::after { height: 20px; } body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd { line-height: 1.32; letter-spacing: 0; white-space: normal; } body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd > span, body#realestateCrowdfunding #maincontents > section#title h1 span.line3rd > em { display: block; } body#realestateCrowdfunding #maincontents > section#title h1::after { width: 44px; height: 3px; margin: 18px auto; } body#realestateCrowdfunding #maincontents > section#title .line4th { line-height: 1.8; letter-spacing: -.02em; } body#realestateCrowdfunding .recf-fv__br--sp { display: inline; } /* 1-4. 横スクロール枠の扱い */ body#realestateCrowdfunding div.scrollTable { margin: 0; background: none; border: 0; font-size: inherit; } body#realestateCrowdfunding div.scrollTable.initial::before { display: none; content: none; } body#realestateCrowdfunding div.scrollTable table.productTable { border-spacing: 0; } /* 1-4b. 目次の初期状態 */ /* 1-5. リンクの既定 */ body#realestateCrowdfunding :where(#maincontents a) { color: inherit; } /* 1-6. フォーカス表示（仕様書5-3・8章） */ body#realestateCrowdfunding #maincontents a:focus-visible, body#realestateCrowdfunding #maincontents button:focus-visible, body#realestateCrowdfunding #maincontents [tabindex]:focus-visible { outline: var(--recf-focus); outline-offset: 2px; } /* 2. 上部比較表（section#productlist） */ body#realestateCrowdfunding #maincontents > section#productlist { padding: 42px 0 70px; } /* 2-1. 見出しと更新日 */ body#realestateCrowdfunding #maincontents > section.articles#productlist > h2 { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto; padding: 0 0 13px; color: var(--recf-navy); font-size: var(--recf-fs-h2-section); font-weight: var(--recf-fw-bold); line-height: 1.4; text-align: center; border-bottom: 0; } body#realestateCrowdfunding #maincontents > section#productlist > h2::before { flex: 0 0 42px; width: 42px; height: 42px; transform: translateY(2px); background: url("/images/special/realestateCrowdfunding/title-cloud-buildings.svg") center / contain no-repeat; content: ""; } body#realestateCrowdfunding #maincontents > section#productlist > h2::after { position: absolute; bottom: 0; left: 50%; width: var(--recf-rule-w); height: var(--recf-rule-h); border-radius: var(--recf-radius-pill); background: var(--recf-burgundy); transform: translateX(-50%); clip-path: none; content: ""; } body#realestateCrowdfunding #maincontents > section#productlist > p.updatedOn { margin: -22px 0 24px; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: 1.5; text-align: right; } /* 2-2. 表の外枠 */ body#realestateCrowdfunding #maincontents > section#productlist > div.scrollTable { width: calc(100% - var(--recf-gutter) * 2); max-width: var(--recf-container-max); padding-inline: 0; overflow: hidden; border: 1px solid var(--recf-line); background: var(--recf-white); box-shadow: var(--recf-shadow-card); } body#realestateCrowdfunding table.productTable { width: 100%; min-width: 0; border-collapse: separate; border-spacing: 0; table-layout: fixed; line-height: var(--recf-lh-head); } body#realestateCrowdfunding table.productTable th, body#realestateCrowdfunding table.productTable td { border-right: 1px solid var(--recf-line); } body#realestateCrowdfunding table.productTable tr > *:last-child { border-right: 0; } /* 2-3. ヘッダー行 */ body#realestateCrowdfunding table.productTable thead th { height: 118px; padding: 12px 12px 11px; border-bottom: 1px solid var(--recf-line); background-color: var(--recf-pink-100); color: var(--recf-burgundy); font-size: 15px; font-weight: var(--recf-fw-bold); line-height: 1.35; letter-spacing: .01em; text-align: center; vertical-align: middle; white-space: normal; } body#realestateCrowdfunding table.productTable thead th.yield::before, body#realestateCrowdfunding table.productTable thead th.period::before, body#realestateCrowdfunding table.productTable thead th.minimum::before { display: block; width: var(--recf-icon-circle); height: var(--recf-icon-circle); margin: 0 auto 7px; border: 1px solid var(--recf-icon-border); border-radius: 50%; background-color: var(--recf-white); background-position: center center; background-repeat: no-repeat; background-size: var(--recf-icon-glyph) var(--recf-icon-glyph); content: ""; } body#realestateCrowdfunding table.productTable thead th.yield::before { background-image: url("/images/special/realestateCrowdfunding/comparison.svg"); } body#realestateCrowdfunding table.productTable thead th.period::before { background-image: url("/images/special/realestateCrowdfunding/calendar.svg"); } body#realestateCrowdfunding table.productTable thead th.minimum::before { background-image: url("/images/special/realestateCrowdfunding/yen.svg"); } /* 2-4. 本文行 */ body#realestateCrowdfunding table.productTable tbody th, body#realestateCrowdfunding table.productTable tbody td { height: 136px; padding: 17px 14px; border-bottom: 1px solid var(--recf-line); background-color: var(--recf-white); color: var(--recf-navy); font-weight: var(--recf-fw-normal); text-align: center; vertical-align: middle; } body#realestateCrowdfunding table.productTable tbody tr:last-child th, body#realestateCrowdfunding table.productTable tbody tr:last-child td { border-bottom: 0; } body#realestateCrowdfunding table.productTable tbody th.datumName { padding: 14px 12px; } body#realestateCrowdfunding table.productTable tbody th.datumName .serviceName { display: block; color: var(--recf-navy); font-size: 18px; font-weight: var(--recf-fw-bold); line-height: 1.32; overflow-wrap: anywhere; text-align: left; } body#realestateCrowdfunding table.productTable tbody th.datumName .serviceName a { display: block; padding-block: 11px; margin-block: -11px; color: inherit; text-decoration: none; } body#realestateCrowdfunding table.productTable tbody th.datumName .serviceName a:hover { text-decoration: underline; opacity: 1; } body#realestateCrowdfunding table.productTable tbody th.datumName .companyName { display: block; margin-top: 3px; color: var(--recf-sub); font-size: var(--recf-fs-note); font-weight: var(--recf-fw-normal); line-height: 1.45; overflow-wrap: anywhere; text-align: left; } body#realestateCrowdfunding table.productTable tbody th.datumName .servicePoint { display: inline-block; margin-top: 7px; padding: 4px 9px 5px; border-radius: var(--recf-radius-pill); background: var(--recf-pink-100); color: var(--recf-burgundy); font-size: var(--recf-fs-note); font-weight: var(--recf-fw-bold); line-height: 1.3; } body#realestateCrowdfunding table.productTable tbody th.datumName .servicePoint:empty, body#realestateCrowdfunding table.productTable tbody th.datumName .companyName:empty { display: none; } body#realestateCrowdfunding table.productTable tbody td .value { display: inline-block; font-size: 17px; font-weight: var(--recf-fw-bold); line-height: 1.4; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; } body#realestateCrowdfunding table.productTable tbody td .value small { font-size: var(--recf-fs-note); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding table.productTable tbody td .value .memo { display: none; } body#realestateCrowdfunding table.productTable tbody td.yield .value { color: var(--recf-burgundy); font-size: 21px; } /* 2-5. CTA（仕様書5-3） */ body#realestateCrowdfunding div.scrollTable table.productTable .apply a { position: static; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 172px; height: 54px; margin: 0 auto; padding: 0; border-radius: var(--recf-radius-md); background: linear-gradient(90deg, var(--recf-cta), var(--recf-cta-dark)) !important; box-shadow: var(--recf-shadow-cta); color: var(--recf-white); font-size: 15px; font-weight: var(--recf-fw-bold); line-height: 1; letter-spacing: normal; text-decoration: none; white-space: nowrap; } body#realestateCrowdfunding div.scrollTable table.productTable .apply a::after { position: static; width: auto; height: auto; background: none; content: "＞"; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding div.scrollTable table.productTable .apply a:hover { filter: brightness(1.06); opacity: 1; text-decoration: none; } body#realestateCrowdfunding div.scrollTable table.productTable .apply a:focus-visible { outline: var(--recf-focus); outline-offset: 3px; } /* 2-6. 表の下 */ body#realestateCrowdfunding #maincontents > section#productlist > p.recf-comparison__note { margin: 16px 2px 0; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: var(--recf-lh-note); text-align: center; } body#realestateCrowdfunding #maincontents > section ul.guardWording { padding-block: 20px 0; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: var(--recf-lh-note); } body#realestateCrowdfunding #maincontents > section ul.guardWording > li a { color: var(--recf-burgundy); } /* 2-7. SPの比較表（〜768px）── 横スクロール */ body#realestateCrowdfunding #maincontents > section#productlist { padding: 28px 0 40px; } body#realestateCrowdfunding #maincontents > section.articles#productlist > h2 { flex-direction: column; gap: 6px; padding-bottom: 11px; font-size: var(--recf-fs-h2-section); line-height: 1.45; } body#realestateCrowdfunding #maincontents > section#productlist > h2::before { flex-basis: 32px; width: 32px; height: 32px; transform: none; } body#realestateCrowdfunding #maincontents > section#productlist > p.updatedOn { margin: 12px 0 16px; text-align: center; } /* スクロールの器 */ body#realestateCrowdfunding #maincontents > section#productlist > div.scrollTable { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; background-color: var(--recf-white); background-image: linear-gradient(to right, var(--recf-white) 40%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--recf-white) 40%, rgba(255, 255, 255, 0)), radial-gradient(farthest-side at 0 50%, rgba(11, 35, 72, .13), rgba(11, 35, 72, 0)), radial-gradient(farthest-side at 100% 50%, rgba(11, 35, 72, .13), rgba(11, 35, 72, 0)); background-position: left center, right center, left center, right center; background-size: 36px 100%, 36px 100%, 13px 100%, 13px 100%; background-repeat: no-repeat; background-attachment: local, local, scroll, scroll; } /* 表の幅 */ body#realestateCrowdfunding table.productTable { width: auto; min-width: 100%; table-layout: auto; font-size: var(--recf-fs-small); } /* ヘッダー行 */ body#realestateCrowdfunding table.productTable thead th { height: auto; min-height: 0; padding: 12px 8px 11px; font-size: var(--recf-fs-note); white-space: nowrap; } body#realestateCrowdfunding table.productTable thead th.yield::before, body#realestateCrowdfunding table.productTable thead th.period::before, body#realestateCrowdfunding table.productTable thead th.minimum::before { width: 34px; height: 34px; margin-bottom: 5px; background-size: 20px 20px; } /* 1列目を固定する */ body#realestateCrowdfunding table.productTable thead th.datumName, body#realestateCrowdfunding table.productTable tbody th.datumName { position: sticky; left: 0; z-index: 2; min-width: calc(10.5em + 24px); box-shadow: 1px 0 0 var(--recf-line); } body#realestateCrowdfunding table.productTable thead th.datumName { background-color: var(--recf-pink-100); } body#realestateCrowdfunding table.productTable tbody th.datumName { background-color: var(--recf-white); } body#realestateCrowdfunding table.productTable th.datumName { border-right: 0; } /* 本文行 */ body#realestateCrowdfunding table.productTable tbody th, body#realestateCrowdfunding table.productTable tbody td { height: auto; padding: 16px 8px; vertical-align: middle; } body#realestateCrowdfunding table.productTable tbody th.datumName { padding: 16px 12px; } body#realestateCrowdfunding table.productTable tbody th.datumName .serviceName { font-size: 16px; text-align: left; } body#realestateCrowdfunding table.productTable tbody th.datumName .serviceName a { padding-block: 12px; margin-block: -12px; } /* 列幅 */ body#realestateCrowdfunding table.productTable .yield, body#realestateCrowdfunding table.productTable .period, body#realestateCrowdfunding table.productTable .minimum { min-width: calc(6em + 16px); } body#realestateCrowdfunding table.productTable thead th.apply, body#realestateCrowdfunding table.productTable tbody td.apply { display: none; } /* サービス名セル内CTA */ body#realestateCrowdfunding table.productTable tbody th.datumName > a.applyLink { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin: 10px 0 0; padding: 12px 10px; border-radius: var(--recf-radius-md); background: linear-gradient(90deg, var(--recf-cta), var(--recf-cta-dark)) !important; box-shadow: var(--recf-shadow-cta); color: var(--recf-white); font-size: 14px; font-weight: var(--recf-fw-bold); line-height: 1; text-decoration: none; white-space: nowrap; } body#realestateCrowdfunding table.productTable tbody th.datumName > a.applyLink::after { content: ""; width: 8px; height: 13px; background: url('/images/common/footLoanList-arrow.png') no-repeat; background-size: contain; } body#realestateCrowdfunding table.productTable tbody th.datumName > a.applyLink:hover { filter: brightness(1.06); opacity: 1; text-decoration: none; } body#realestateCrowdfunding table.productTable tbody th.datumName > a.applyLink:focus-visible { outline: var(--recf-focus); outline-offset: 3px; } body#realestateCrowdfunding table.productTable tbody th.datumName > a.applyLink + .companyName { margin-top: 9px; } /* 値 */ body#realestateCrowdfunding table.productTable tbody td .value { font-size: 15px; } body#realestateCrowdfunding table.productTable tbody td.yield .value { font-size: 17px; } /* 3. 読み物（section#article） */ body#realestateCrowdfunding #maincontents > section#article { padding: 0 0 72px; font-size: var(--recf-fs-body); line-height: var(--recf-lh-body); letter-spacing: var(--recf-ls-body); } body#realestateCrowdfunding #maincontents > section#article > h2, body#realestateCrowdfunding #maincontents > section#article > div.section, body#realestateCrowdfunding #maincontents > section#article > section, body#realestateCrowdfunding #maincontents > section#article > ul { max-width: calc(var(--recf-article-max) + var(--recf-gutter) * 2); } body#realestateCrowdfunding :where(#maincontents > section#article p) { margin: 0 0 var(--recf-p-mb); padding: 0; } body#realestateCrowdfunding :where(#maincontents > section#article p:last-child) { margin-bottom: 0; } /* 3-1. 読み物先頭の見出し */ body#realestateCrowdfunding #maincontents > section.articles#article > h2.recf-lede-title { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 auto 28px; padding: 42px 0 13px; color: var(--recf-navy); font-size: var(--recf-fs-h2-section); font-weight: var(--recf-fw-bold); line-height: 1.4; text-align: center; background: none; border-bottom: 0; } body#realestateCrowdfunding #maincontents > section#article > h2.recf-lede-title::before { flex: 0 0 42px; width: 42px; height: 42px; margin: 0; transform: translateY(2px); background: url("/images/special/realestateCrowdfunding/title-open-book.svg") center / contain no-repeat; content: ""; } body#realestateCrowdfunding #maincontents > section#article > h2.recf-lede-title::after { position: absolute; bottom: 0; left: 50%; width: var(--recf-rule-w); height: var(--recf-rule-h); border-radius: var(--recf-radius-pill); background: var(--recf-burgundy); transform: translateX(-50%); content: ""; } body#realestateCrowdfunding .recf-sp-br { display: none; } /* 3-1b. 節の器 */ body#realestateCrowdfunding section#article div.section { margin: 0 auto var(--recf-section-mb); padding-block: 0; border: 0; border-radius: 0; background: none; line-height: var(--recf-lh-body); } body#realestateCrowdfunding section#article div.section:last-of-type { margin-bottom: 0; } /* 3-2. 導入文 */ body#realestateCrowdfunding #maincontents > section#article > div.section#lead { padding-block: 0; margin-bottom: var(--recf-block-mb); } body#realestateCrowdfunding #maincontents > section#article > div.section#lead p { font-size: var(--recf-fs-lead); line-height: var(--recf-lh-lead); text-align: left; } /* 3-3. この記事のポイント */ body#realestateCrowdfunding #maincontents > section#article > section#points { padding-block: 0; margin-bottom: var(--recf-block-mb); } body#realestateCrowdfunding section#points > div { padding: var(--recf-sp-6) var(--recf-sp-6) var(--recf-sp-5); border: 0; border-radius: var(--recf-radius-lg); background: var(--recf-pink-100); color: var(--recf-text); } body#realestateCrowdfunding section#points h5 { display: block; margin: 0 0 var(--recf-sp-4) !important; padding: 0; border-radius: 0; background: none; color: var(--recf-navy); font-size: var(--recf-fs-h4); font-weight: var(--recf-fw-bold); line-height: 1.5; } body#realestateCrowdfunding section#points h5::before { display: none; content: none; } body#realestateCrowdfunding section#points ul { margin: 0; padding: 0; list-style: none; } body#realestateCrowdfunding section#points ul li { position: relative; margin: 0 0 var(--recf-sp-3); padding: 0 0 0 30px; list-style: none; font-size: var(--recf-fs-small); font-weight: var(--recf-fw-normal); line-height: 1.75; } body#realestateCrowdfunding section#points ul li:last-child { margin-bottom: 0; } body#realestateCrowdfunding section#points ul li:empty::after { content: "\00a0"; } body#realestateCrowdfunding section#points ul li::before { position: absolute; top: calc(0.875em - 9px); left: 0; width: 18px; height: 18px; background-repeat: no-repeat; background-position: center; background-size: 18px 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9' fill='none' stroke='%23b20d2e' stroke-width='1.6'/%3E%3Cpath d='M5.8 10.3l2.7 2.7 5.7-5.7' fill='none' stroke='%23b20d2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); content: ""; } /* 3-4. 目次 */ body#realestateCrowdfunding #maincontents > section#article > section#outline { padding-block: 0; margin-bottom: var(--recf-section-mb); border: 0; } body#realestateCrowdfunding section#outline > ul { width: auto; margin: 0; padding: var(--recf-sp-6); border: 1px solid var(--recf-line); border-width: 1px; border-radius: var(--recf-radius-lg); background: var(--recf-white); box-shadow: var(--recf-shadow-card); list-style: none; line-height: var(--recf-lh-body); } body#realestateCrowdfunding section#outline > ul::before { display: none; content: none; } body#realestateCrowdfunding section#outline > ul > li { margin: 0 0 var(--recf-sp-2); padding: 0; list-style: none; } body#realestateCrowdfunding section#outline > ul > li:last-child { margin-bottom: 0; } body#realestateCrowdfunding section#outline > ul > li > a { position: relative; display: block; padding: 13px 40px 13px 16px; border-radius: var(--recf-radius-md); background: var(--recf-surface); color: var(--recf-navy); font-size: var(--recf-fs-small); font-weight: var(--recf-fw-bold); line-height: 1.6; text-decoration: none; } body#realestateCrowdfunding section#outline > ul > li > a::after { position: absolute; top: 50%; right: 18px; width: 7px; height: 7px; border-top: 2px solid var(--recf-burgundy); border-right: 2px solid var(--recf-burgundy); transform: translateY(-50%) rotate(45deg); background: none; content: ""; } body#realestateCrowdfunding section#outline > ul > li > a:hover { background: var(--recf-pink-050); text-decoration: none; opacity: 1; } /* 3-5. 各節の見出し */ body#realestateCrowdfunding section#article div.section h2 { position: relative; margin: var(--recf-h2-mt) 0 var(--recf-h2-mb); padding: 0 0 14px; border-bottom: 1px solid var(--recf-line); color: var(--recf-navy); font-size: var(--recf-fs-h2); font-weight: var(--recf-fw-bold); line-height: var(--recf-lh-head); background: none; } body#realestateCrowdfunding section#article div.section h2::before { display: none; content: none; } body#realestateCrowdfunding section#article div.section h2::after { position: absolute; bottom: -1px; left: 0; width: var(--recf-rule-w); height: var(--recf-rule-h); border-radius: var(--recf-radius-pill); background: var(--recf-burgundy); content: ""; } body#realestateCrowdfunding section#article div.section + div.section { margin-top: 0; } body#realestateCrowdfunding section#article div.section h3 { margin: var(--recf-h3-mt) 0 var(--recf-h3-mb); padding: 0 0 0 14px; border-left: 4px solid var(--recf-burgundy); color: var(--recf-navy); font-size: var(--recf-fs-h3); font-weight: var(--recf-fw-bold); line-height: var(--recf-lh-head); } body#realestateCrowdfunding section#article div.section h4 { margin: var(--recf-h4-mt) 0 var(--recf-h4-mb); padding: 0; color: var(--recf-navy); font-size: var(--recf-fs-h4); font-weight: var(--recf-fw-bold); line-height: 1.6; } body#realestateCrowdfunding section#article div.section h4::before { display: none; content: none; } /* 3-6. 「おすすめの選び方」の dl */ body#realestateCrowdfunding section#article div.section > div > dl:not(.faqList) > div { margin: 0; } body#realestateCrowdfunding section#article div.section > div > dl:not(.faqList) > div > dt { margin: var(--recf-h3-mt) 0 var(--recf-h3-mb); padding: 0 0 0 14px; border-left: 4px solid var(--recf-burgundy); color: var(--recf-navy); font-size: var(--recf-fs-h3); font-weight: var(--recf-fw-bold); line-height: var(--recf-lh-head); } body#realestateCrowdfunding section#article div.section > div > dl:not(.faqList) > div > dd { margin: 0; padding: 0; } /* 3-7. 箇条書き・注記・本文中の表・誘導リンク */ body#realestateCrowdfunding section#article .recf-list { margin: 0 0 var(--recf-p-mb); padding: 0; list-style: none; } body#realestateCrowdfunding section#article .recf-list > li { position: relative; margin-bottom: var(--recf-sp-2); padding-left: 1.35em; list-style: none; } body#realestateCrowdfunding section#article .recf-list > li::before { position: absolute; top: calc(var(--recf-lh-body) * 0.5em - 3px); left: 2px; width: 6px; height: 6px; border-radius: 1px; background: var(--recf-burgundy); content: ""; } body#realestateCrowdfunding section#article .recf-note { margin: 0 0 var(--recf-p-mb); padding-left: 1em; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: var(--recf-lh-note); text-indent: -1em; } body#realestateCrowdfunding section#article .recf-basic-table-wrap { margin: 0 0 var(--recf-block-mb); overflow: hidden; border: 1px solid var(--recf-line); border-radius: 0; background: var(--recf-white); } body#realestateCrowdfunding section#article table.recf-basic-table { width: 100%; margin: 0; table-layout: fixed; border: 0; border-collapse: separate; border-spacing: 0; } body#realestateCrowdfunding section#article table.recf-basic-table thead th:first-child { width: 22%; } body#realestateCrowdfunding section#article table.recf-basic-table th, body#realestateCrowdfunding section#article table.recf-basic-table td { padding: 14px 16px; border: 0; border-right: 1px solid var(--recf-line); border-bottom: 1px solid var(--recf-line); font-size: var(--recf-fs-small); line-height: 1.7; text-align: left; vertical-align: top; } body#realestateCrowdfunding section#article table.recf-basic-table tr > *:last-child { border-right: 0; } body#realestateCrowdfunding section#article table.recf-basic-table tbody tr:last-child > * { border-bottom: 0; } body#realestateCrowdfunding section#article table.recf-basic-table thead th { background: var(--recf-pink-100); color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); text-align: center; } body#realestateCrowdfunding section#article table.recf-basic-table tbody th { background: var(--recf-surface); color: var(--recf-navy); font-weight: var(--recf-fw-bold); white-space: nowrap; } body#realestateCrowdfunding section#article .recf-guide { margin: 0 0 var(--recf-p-mb); } body#realestateCrowdfunding section#article .recf-guide__link { position: relative; display: inline-block; padding-left: 21px; color: var(--recf-burgundy); font-size: var(--recf-fs-small); font-weight: var(--recf-fw-bold); line-height: 1.7; text-decoration: none; } body#realestateCrowdfunding section#article .recf-guide__link::before { position: absolute; top: .62em; left: 5px; width: 6px; height: 6px; border-top: 2px solid var(--recf-burgundy); border-right: 2px solid var(--recf-burgundy); transform: rotate(45deg); content: ""; } body#realestateCrowdfunding section#article .recf-guide__link:hover { text-decoration: underline; opacity: 1; } /* 3-8. よくある質問 */ body#realestateCrowdfunding section#article div.section#faq div dl.faqList { margin: 0 0 var(--recf-block-mb); overflow: hidden; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-lg); background: var(--recf-white); box-shadow: var(--recf-shadow-card); } body#realestateCrowdfunding section#article div.section#faq dl.faqList > div + div { border-top: 1px solid var(--recf-line); } body#realestateCrowdfunding section#article div.section#faq dl.faqList dt { margin: 0; padding: 0; color: var(--recf-navy); font-size: var(--recf-fs-small); font-weight: var(--recf-fw-bold); line-height: 1.65; } body#realestateCrowdfunding section#article div.section#faq dl.faqList dt a { position: relative; display: block; min-height: 44px; padding: 18px 48px 18px 20px; color: inherit; text-decoration: none; } body#realestateCrowdfunding section#article div.section#faq dl.faqList dt a::after { position: absolute; top: calc(50% - 6px); right: 22px; width: 8px; height: 8px; margin: 0; border: 0; border-bottom: 2px solid var(--recf-burgundy); border-right: 2px solid var(--recf-burgundy); transform: rotate(45deg); transition: transform .15s ease; background: none; content: ""; } body#realestateCrowdfunding section#article div.section#faq dl.faqList dt.opened a::after { transform: rotate(-135deg); } body#realestateCrowdfunding section#article div.section#faq dl.faqList dt a:hover { background: var(--recf-pink-050); text-decoration: none; opacity: 1; } body#realestateCrowdfunding section#article div.section#faq dl.faqList dd { margin: 0; padding: 0 20px 20px; font-size: var(--recf-fs-small); line-height: 1.85; } body#realestateCrowdfunding section#article div.section#faq dl.faqList dd p { margin: 0 0 var(--recf-sp-3); } body#realestateCrowdfunding section#article div.section#faq dl.faqList dd p:last-child { margin-bottom: 0; } body#realestateCrowdfunding #maincontents > section#article { padding-bottom: 44px; } body#realestateCrowdfunding #maincontents > section.articles#article > h2.recf-lede-title { flex-direction: column; gap: 6px; margin-bottom: 20px; padding: 28px 0 11px; line-height: 1.45; } body#realestateCrowdfunding #maincontents > section#article > h2.recf-lede-title::before { flex-basis: 32px; width: 32px; height: 32px; transform: none; } body#realestateCrowdfunding .recf-sp-br { display: inline; } body#realestateCrowdfunding section#points > div { padding: var(--recf-sp-5) var(--recf-sp-4); } body#realestateCrowdfunding section#outline h5 { display: block; margin: 0; padding: 14px 44px 14px 16px; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-lg); background: var(--recf-white); box-shadow: var(--recf-shadow-card); color: var(--recf-navy); font-size: var(--recf-fs-h4); font-weight: var(--recf-fw-bold); line-height: 1.5; cursor: pointer; } body#realestateCrowdfunding section#outline.active h5, body#realestateCrowdfunding section#outline h5:hover { background: var(--recf-pink-050); } body#realestateCrowdfunding section#outline > ul { margin-top: var(--recf-sp-2); padding: var(--recf-sp-4); } /* FAQ内の3列比較表 */ body#realestateCrowdfunding section#article #faq .recf-basic-table-wrap { max-width: 100%; overflow: hidden; border: 1px solid var(--recf-line); border-radius: 0; } body#realestateCrowdfunding section#article #faq table.recf-basic-table, body#realestateCrowdfunding section#article #faq table.recf-basic-table > tbody, body#realestateCrowdfunding section#article #faq table.recf-basic-table > tbody > tr { display: block; width: 100%; } body#realestateCrowdfunding section#article #faq table.recf-basic-table { margin: 0; border: 0; border-collapse: separate; border-spacing: 0; } body#realestateCrowdfunding section#article #faq table.recf-basic-table > thead { display: none; } body#realestateCrowdfunding section#article #faq table.recf-basic-table th, body#realestateCrowdfunding section#article #faq table.recf-basic-table td { box-sizing: border-box; width: 100%; border: 0; border-bottom: 1px solid var(--recf-line); } body#realestateCrowdfunding section#article #faq table.recf-basic-table th { display: block; padding: .65em .75em; background: var(--recf-pink-100); color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); text-align: center; white-space: normal; } body#realestateCrowdfunding section#article #faq table.recf-basic-table td { display: flex; align-items: center; padding: 0 .75em 0 0; line-height: 1.35; background: var(--recf-white); min-height: 3.4em; } body#realestateCrowdfunding section#article #faq table.recf-basic-table td::before { content: attr(data-label); display: flex; flex: 0 0 8.5em; align-self: stretch; align-items: center; box-sizing: border-box; margin-right: .75em; padding: .65em .5em; border-right: 1px solid var(--recf-line); background: var(--recf-surface); color: var(--recf-navy); font-weight: var(--recf-fw-bold); line-height: 1.25; } body#realestateCrowdfunding section#article #faq table.recf-basic-table > tbody > tr:last-child > td:last-child { border-bottom: 0; } /* 4. 会社紹介（div.section#items） */ body#realestateCrowdfunding section#article div.section#items ul.productList { margin: 0; padding: 0; font-size: var(--recf-fs-body); list-style: none; } /* 4-1. カード */ body#realestateCrowdfunding section#article div.section#items ul.productList > li { width: auto; margin: 0 0 var(--recf-block-mb); padding: 0; overflow: hidden; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-lg); background: var(--recf-white); box-shadow: var(--recf-shadow-card); list-style: none; } body#realestateCrowdfunding section#article div.section#items ul.productList > li:last-child { margin-bottom: 0; } /* 4-2. 上段の帯 */ body#realestateCrowdfunding ul.productList > li > div.specList { display: grid; grid-template-columns: 1fr auto; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; } body#realestateCrowdfunding ul.productList > li > div.specList > div.service_name, body#realestateCrowdfunding ul.productList > li > div.specList > div.apply { display: flex; align-items: center; margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--recf-line); border-radius: 0; background: var(--recf-pink-050); text-align: left; } body#realestateCrowdfunding ul.productList > li > div.specList > div.service_name { flex-wrap: wrap; gap: 6px 16px; color: var(--recf-navy); font-size: inherit; font-weight: var(--recf-fw-normal); } body#realestateCrowdfunding ul.productList > li > div.specList > div.apply { padding-left: 0; justify-content: flex-end; } body#realestateCrowdfunding ul.productList > li > div.specList > dl.specTable { grid-column: 1 / -1; margin: 0; padding: 20px 24px 24px; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceLogo { display: flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 160px; height: 60px; padding: 0 0; border-radius: var(--recf-radius-sm); background: var(--recf-white); } body#realestateCrowdfunding div.specList > div.service_name > span.serviceLogo img { display: block; width: auto; height: auto; max-width: 120px; max-height: 30px; object-fit: contain; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceLogo:not(:has(img)) { display: none; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceName { color: var(--recf-navy); font-size: 24px; font-weight: var(--recf-fw-bold); line-height: 1.3; overflow-wrap: anywhere; } body#realestateCrowdfunding div.specList > div.service_name > span.servicePoint { padding: 4px 9px 5px; border-radius: var(--recf-radius-pill); background: var(--recf-pink-100); color: var(--recf-burgundy); font-size: var(--recf-fs-note); font-weight: var(--recf-fw-bold); line-height: 1.3; } body#realestateCrowdfunding div.specList > div.service_name > span.servicePoint:empty { display: none; } /* 4-3. スペック表 */ body#realestateCrowdfunding dl.specTable > div { display: flex; align-items: stretch; border-bottom: 1px solid var(--recf-line); } body#realestateCrowdfunding dl.specTable > div:last-child { border-bottom: 0; } body#realestateCrowdfunding dl.specTable > div > dt, body#realestateCrowdfunding dl.specTable > div > dd { display: block; margin: 0; padding: 13px 16px; font-size: var(--recf-fs-small); line-height: 1.6; text-align: left; } body#realestateCrowdfunding dl.specTable > div > dt { flex: 0 0 34%; min-width: calc(7.5em + 32px); background: var(--recf-surface); color: var(--recf-navy); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding dl.specTable > div > dd { flex: 1 1 auto; min-width: 0; color: var(--recf-navy); font-weight: var(--recf-fw-bold); overflow-wrap: anywhere; text-wrap: balance; } body#realestateCrowdfunding dl.specTable > div > dd small { font-size: var(--recf-fs-note); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding dl.specTable > div > dd .memo { margin-left: 8px; color: var(--recf-sub); font-size: var(--recf-fs-note); font-weight: var(--recf-fw-normal); white-space: normal; } body#realestateCrowdfunding dl.specTable > div:first-child > dd { color: var(--recf-burgundy); font-size: 17px; } body#realestateCrowdfunding dl.specTable > div:has(> dd:empty) { display: none; } /* 4-4. PRテキスト・注記・更新日 */ body#realestateCrowdfunding ul.productList > li > span.prText { display: block; margin: 0 24px 20px; padding: 14px 16px; border-left: 3px solid var(--recf-pink-300); border-radius: var(--recf-radius-sm); background: var(--recf-pink-100); color: var(--recf-text); font-size: var(--recf-fs-small); line-height: 1.8; } body#realestateCrowdfunding ul.productList > li > span.remarks { display: block; margin: 0 24px 16px; padding-left: 1em; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: var(--recf-lh-note); text-indent: -1em; } body#realestateCrowdfunding ul.productList > li > span.updatedOn { display: block; margin: 0 24px 16px; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: 1.5; text-align: right; } body#realestateCrowdfunding ul.productList > li > span.prText2 { display: block; margin: 0 24px 16px; font-size: var(--recf-fs-small); line-height: 1.8; } body#realestateCrowdfunding ul.productList > li > span.prText2 > div:not(.slideCampaign) { padding: 14px 16px; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-sm); background: var(--recf-white); } body#realestateCrowdfunding ul.productList > li div.slideCampaign { text-align: center; } body#realestateCrowdfunding ul.productList > li div.slideCampaign > a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 22px; border: 1px solid var(--recf-pink-300); border-radius: var(--recf-radius-pill); background: var(--recf-pink-050); color: var(--recf-burgundy); font-size: var(--recf-fs-small); font-weight: var(--recf-fw-bold); text-decoration: none; } /* 4-5. CTA（仕様書5-3の配色・文言・矢印をPC/SPで統一） */ body#realestateCrowdfunding ul.productList .apply a { position: static; display: flex; align-items: center; justify-content: center; gap: 6px; width: 200px; height: 54px; margin: 0; padding: 0; border-radius: var(--recf-radius-md); background: linear-gradient(90deg, var(--recf-cta), var(--recf-cta-dark)) !important; box-shadow: var(--recf-shadow-cta); color: var(--recf-white); font-size: 15px; font-weight: var(--recf-fw-bold); line-height: 1; letter-spacing: normal; text-decoration: none; white-space: nowrap; } body#realestateCrowdfunding ul.productList .apply a::after { content: ""; position: static; margin: 0; width: 9px; height: 16px; background: url('/images/common/footLoanList-arrow.png') no-repeat; background-size: contain; } body#realestateCrowdfunding ul.productList .apply a + span { display: none; } body#realestateCrowdfunding ul.productList .apply a:hover { filter: brightness(1.06); opacity: 1; text-decoration: none; } body#realestateCrowdfunding ul.productList .apply a:focus-visible { outline: var(--recf-focus); outline-offset: 3px; } body#realestateCrowdfunding ul.productList > li > div.apply { margin: 0; padding: 0 24px 24px; text-align: center; } body#realestateCrowdfunding ul.productList > li > div.apply a { width: 100%; max-width: 360px; height: 56px; margin: 0 auto; font-size: 17px; } body#realestateCrowdfunding ul.productList > li > div.specList { grid-template-columns: 1fr; } body#realestateCrowdfunding ul.productList > li > div.specList > div.service_name { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px 16px 0; border-bottom: 0; } body#realestateCrowdfunding ul.productList > li > div.specList > div.apply { justify-content: stretch; padding: 14px 16px 16px; } body#realestateCrowdfunding ul.productList > li > div.specList > div.apply a { width: 100%; height: 52px; font-size: 16px; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceLogo { height: 48px; padding: 6px 12px; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceLogo img { max-width: 170px; max-height: 36px; } body#realestateCrowdfunding div.specList > div.service_name > span.serviceName { font-size: 21px; } body#realestateCrowdfunding ul.productList > li > div.specList > dl.specTable { padding: 16px; } body#realestateCrowdfunding dl.specTable > div > dt, body#realestateCrowdfunding dl.specTable > div > dd { padding: 11px 12px; } body#realestateCrowdfunding dl.specTable > div > dt { flex-basis: 42%; min-width: calc(7.5em + 24px); } body#realestateCrowdfunding dl.specTable > div:first-child > dd { font-size: 16px; } body#realestateCrowdfunding ul.productList > li > span.prText { margin: 0 16px 16px; padding: 12px 14px; } body#realestateCrowdfunding ul.productList > li > span.remarks, body#realestateCrowdfunding ul.productList > li > span.updatedOn, body#realestateCrowdfunding ul.productList > li > span.prText2 { margin-inline: 16px; } body#realestateCrowdfunding ul.productList > li > div.apply { padding: 0 16px 16px; } body#realestateCrowdfunding ul.productList > li > div.apply a { max-width: none; height: 54px; font-size: 16px; } /* 5. リスク・リターン図（figure.recf-posmap） */ /* 5-0. 既存サイトの要素セレクタの打ち消し */ body#realestateCrowdfunding #maincontents :where(figure.recf-posmap p) { padding: 0; } /* 図全体 */ body#realestateCrowdfunding #maincontents .recf-posmap { margin: 0 0 var(--recf-block-mb); } body#realestateCrowdfunding #maincontents .recf-posmap > .recf-posmap__caption { margin: 0 0 var(--recf-sp-4); color: var(--recf-navy); font-size: var(--recf-fs-h4); line-height: 1.5; font-weight: var(--recf-fw-bold); text-align: left; } body#realestateCrowdfunding #maincontents .recf-posmap__frame { margin: 0 0 var(--recf-sp-6); padding: var(--recf-sp-6); border: 1px solid var(--recf-line); border-radius: var(--recf-radius-lg); background: var(--recf-white); } body#realestateCrowdfunding #maincontents .recf-posmap__lead { margin: 0 0 var(--recf-sp-5); color: var(--recf-text); font-size: var(--recf-fs-small); line-height: 1.75; } body#realestateCrowdfunding #maincontents .recf-posmap__lead strong { color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); } /* 軸とプロット */ body#realestateCrowdfunding #maincontents .recf-posmap__stage { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: var(--recf-sp-2); } body#realestateCrowdfunding #maincontents .recf-posmap__axis-y, body#realestateCrowdfunding #maincontents .recf-posmap__axis-x { display: flex; margin: 0; color: var(--recf-sub); font-size: var(--recf-fs-small); line-height: 1.4; font-weight: var(--recf-fw-bold); justify-content: space-between; align-items: center; } body#realestateCrowdfunding #maincontents .recf-posmap__axis-y { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; text-orientation: upright; -webkit-text-orientation: upright; } body#realestateCrowdfunding #maincontents .recf-posmap__axis-x { grid-column: 2; grid-row: 2; } body#realestateCrowdfunding #maincontents .recf-posmap__tick { color: var(--recf-sub); font-weight: var(--recf-fw-normal); } body#realestateCrowdfunding #maincontents .recf-posmap__plot { position: relative; grid-column: 2; grid-row: 1; aspect-ratio: 16 / 12; background: repeating-linear-gradient(90deg, var(--recf-line) 0 1px, transparent 1px 10%), repeating-linear-gradient(0deg, var(--recf-line) 0 1px, transparent 1px 10%), var(--recf-white); border-left: 1px solid var(--recf-navy); border-bottom: 1px solid var(--recf-navy); } /* 帯（ミドルリスク・ミドルリターン） */ body#realestateCrowdfunding #maincontents .recf-posmap__band { position: absolute; left: 28%; right: 28%; top: 26%; bottom: 26%; border: 1px dashed var(--recf-burgundy); background: rgba(178, 13, 46, .06); } body#realestateCrowdfunding #maincontents .recf-posmap__band-name { position: absolute; top: 0; right: 0; padding: 3px 6px; color: var(--recf-burgundy); font-size: var(--recf-fs-small); line-height: 1.4; font-weight: var(--recf-fw-bold); white-space: nowrap; } /* ノード（ドット＋ラベル） */ body#realestateCrowdfunding #maincontents .recf-posmap__nodes { margin: 0; padding: 0; list-style: none; } body#realestateCrowdfunding #maincontents .recf-posmap__node { position: absolute; left: var(--x); bottom: var(--y); width: 0; height: 0; } body#realestateCrowdfunding #maincontents .recf-posmap__dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--recf-sub); } body#realestateCrowdfunding #maincontents .recf-posmap__node--focus .recf-posmap__dot { background: var(--recf-burgundy); box-shadow: 0 0 0 4px rgba(178, 13, 46, .14); } body#realestateCrowdfunding #maincontents .recf-posmap__num { display: none; } body#realestateCrowdfunding #maincontents .recf-posmap__label { position: absolute; padding: 4px 8px; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-pill); background: var(--recf-white); color: var(--recf-navy); font-size: var(--recf-fs-small); line-height: 1.4; font-weight: var(--recf-fw-bold); white-space: nowrap; } body#realestateCrowdfunding #maincontents .recf-posmap__node--focus .recf-posmap__label { border-color: var(--recf-burgundy); border-radius: 14px; background: var(--recf-burgundy); color: var(--recf-white); width: 138px; white-space: normal; text-align: center; } body#realestateCrowdfunding #maincontents .recf-posmap__node--n .recf-posmap__label { left: 0; bottom: 12px; transform: translateX(-50%); } body#realestateCrowdfunding #maincontents .recf-posmap__node--s .recf-posmap__label { left: 0; top: 12px; transform: translateX(-50%); } body#realestateCrowdfunding #maincontents .recf-posmap__node--e .recf-posmap__label { left: 12px; top: 0; transform: translateY(-50%); } body#realestateCrowdfunding #maincontents .recf-posmap__node--w .recf-posmap__label { right: 12px; top: 0; transform: translateY(-50%); } body#realestateCrowdfunding #maincontents .recf-posmap__node--ne .recf-posmap__label { left: 6px; bottom: 6px; } body#realestateCrowdfunding #maincontents .recf-posmap__node--nw .recf-posmap__label { right: 6px; bottom: 6px; } body#realestateCrowdfunding #maincontents .recf-posmap__node--se .recf-posmap__label { left: 6px; top: 6px; } body#realestateCrowdfunding #maincontents .recf-posmap__node--sw .recf-posmap__label { right: 6px; top: 6px; } /* 凡例（SPのみ表示） */ body#realestateCrowdfunding #maincontents .recf-posmap__legend { display: none; margin: var(--recf-sp-4) 0 0; align-items: center; gap: var(--recf-sp-2); color: var(--recf-burgundy); font-size: var(--recf-fs-small); line-height: 1.4; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__legend-swatch { flex: 0 0 auto; width: 28px; height: 16px; border: 1px dashed var(--recf-burgundy); background: rgba(178, 13, 46, .06); } /* 番号と商品名の対応表 */ body#realestateCrowdfunding #maincontents .recf-posmap__key { margin: var(--recf-sp-4) 0 0; padding: 0; list-style: none; } body#realestateCrowdfunding #maincontents .recf-posmap__key--sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } body#realestateCrowdfunding #maincontents .recf-posmap__key > li { display: flex; align-items: center; gap: var(--recf-sp-2); margin-bottom: var(--recf-sp-2); color: var(--recf-text); font-size: var(--recf-fs-small); line-height: 1.5; } body#realestateCrowdfunding #maincontents .recf-posmap__key > li:last-child { margin-bottom: 0; } body#realestateCrowdfunding #maincontents .recf-posmap__key-num { display: flex; flex: 0 0 auto; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--recf-sub); color: var(--recf-white); font-size: var(--recf-fs-small); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__key > li.is-focus { color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__key > li.is-focus .recf-posmap__key-num { background: var(--recf-burgundy); } /* 主役の詳細パネル */ body#realestateCrowdfunding #maincontents .recf-posmap__panel { margin: 0 0 var(--recf-sp-5); overflow: hidden; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-lg); background: var(--recf-white); box-shadow: var(--recf-shadow-card); } body#realestateCrowdfunding #maincontents .recf-posmap__panel-head { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--recf-line); background: var(--recf-pink-100); color: var(--recf-burgundy); font-size: var(--recf-fs-small); line-height: 1.5; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__panel-name { margin: 0; padding: 16px 20px 4px; color: var(--recf-navy); font-size: var(--recf-fs-h4); line-height: 1.5; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__dl { margin: 0; padding: 8px 20px 16px; } body#realestateCrowdfunding #maincontents .recf-posmap__dl > div { display: grid; grid-template-columns: 172px 1fr; gap: var(--recf-sp-4); padding: 10px 0; border-bottom: 1px solid var(--recf-line); } body#realestateCrowdfunding #maincontents .recf-posmap__dl > div:last-child { border-bottom: 0; } body#realestateCrowdfunding #maincontents .recf-posmap__dl dt { margin: 0; color: var(--recf-navy); font-size: var(--recf-fs-small); line-height: 1.7; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__dl dd { margin: 0; color: var(--recf-text); font-size: var(--recf-fs-small); line-height: 1.7; } body#realestateCrowdfunding #maincontents .recf-posmap__dl dd.is-accent { color: var(--recf-burgundy); font-weight: var(--recf-fw-bold); } /* 注記 */ body#realestateCrowdfunding #maincontents .recf-posmap__note { margin: 0 0 var(--recf-sp-2); padding-left: 1em; color: var(--recf-sub); font-size: var(--recf-fs-note); line-height: var(--recf-lh-note); text-indent: -1em; } body#realestateCrowdfunding #maincontents .recf-posmap__note:last-child { margin-bottom: 0; } /* SP（〜768px） */ body#realestateCrowdfunding #maincontents .recf-posmap__frame { padding: var(--recf-sp-4); } body#realestateCrowdfunding #maincontents .recf-posmap__plot { aspect-ratio: auto; height: 400px; } body#realestateCrowdfunding #maincontents .recf-posmap__band { left: 24%; right: 24%; top: 28%; bottom: 28%; } body#realestateCrowdfunding #maincontents .recf-posmap__band-name { display: none; } body#realestateCrowdfunding #maincontents .recf-posmap__label { display: none; } body#realestateCrowdfunding #maincontents .recf-posmap__dot { display: none; } body#realestateCrowdfunding #maincontents .recf-posmap__num { display: flex; position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--recf-sub); color: var(--recf-white); font-size: var(--recf-fs-small); line-height: 1; font-weight: var(--recf-fw-bold); } body#realestateCrowdfunding #maincontents .recf-posmap__node--focus .recf-posmap__num { background: var(--recf-burgundy); box-shadow: 0 0 0 3px rgba(178, 13, 46, .18); } body#realestateCrowdfunding #maincontents .recf-posmap__legend { display: flex; } body#realestateCrowdfunding #maincontents .recf-posmap__key--sr { position: static; width: auto; height: auto; margin: var(--recf-sp-4) 0 0; overflow: visible; clip-path: none; white-space: normal; } body#realestateCrowdfunding #maincontents .recf-posmap__panel-head, body#realestateCrowdfunding #maincontents .recf-posmap__panel-name { padding-inline: var(--recf-sp-4); } body#realestateCrowdfunding #maincontents .recf-posmap__dl { padding: 4px var(--recf-sp-4) 12px; } body#realestateCrowdfunding #maincontents .recf-posmap__dl > div { grid-template-columns: 1fr; gap: 2px; } /* 6. 優先劣後システムの図解（.recf-seniority） */ body#realestateCrowdfunding #maincontents .recf-seniority { margin: var(--recf-block-mb) 0; } body#realestateCrowdfunding #maincontents .recf-seniority__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--recf-sp-6); } body#realestateCrowdfunding #maincontents .recf-seniority__label { margin: 0 0 var(--recf-sp-3); padding: 0; color: var(--recf-navy); font-size: var(--recf-fs-h4); font-weight: var(--recf-fw-bold); line-height: 1.5; text-align: center; } body#realestateCrowdfunding #maincontents .recf-seniority__bar { display: flex; flex-direction: column; justify-content: flex-end; height: 260px; overflow: hidden; border: 1px solid var(--recf-line); border-radius: var(--recf-radius-md); background: var(--recf-white); } body#realestateCrowdfunding #maincontents .recf-seniority__seg { display: flex; flex: none; align-items: center; justify-content: center; padding: 4px 8px; color: var(--recf-white); font-size: var(--recf-fs-note); font-weight: var(--recf-fw-bold); line-height: 1.45; text-align: center; overflow-wrap: anywhere; } body#realestateCrowdfunding #maincontents .recf-seniority__seg--senior { background: var(--recf-navy); } body#realestateCrowdfunding #maincontents .recf-seniority__seg--junior { background: var(--recf-burgundy); } body#realestateCrowdfunding #maincontents .recf-seniority__seg--loss { border-bottom: 1px solid var(--recf-line); background: repeating-linear-gradient(45deg, var(--recf-line) 0 1.2px, var(--recf-surface) 1.2px 10px); color: var(--recf-sub); } body#realestateCrowdfunding #maincontents .recf-seniority__cap { margin: var(--recf-sp-4) 0 0; padding: var(--recf-sp-4) var(--recf-sp-5); border-left: 3px solid var(--recf-burgundy); border-radius: 0 var(--recf-radius-sm) var(--recf-radius-sm) 0; background: var(--recf-pink-100); color: var(--recf-text); font-size: var(--recf-fs-small); line-height: 1.85; } body#realestateCrowdfunding #maincontents .recf-seniority__cols { grid-template-columns: 1fr; gap: var(--recf-sp-4); } body#realestateCrowdfunding #maincontents .recf-seniority__bar { height: 210px; } body#realestateCrowdfunding #maincontents .recf-seniority__cap { padding: var(--recf-sp-4); } /* ▲ RECF:END ▲ */