@charset "UTF-8";
 
/* common -----------------------------------------------*/

.ict{font-size: 16px;}

.ict html{font-family: "Noto Sans JP", sans-serif;font-optical-sizing: auto;font-style: normal;}
.ict body, .ict h1{margin: 0;padding: 0;overflow-x: hidden;}
.ict .onc{box-sizing: border-box;margin: 0;padding: 0;}
.ict .onc h1{font-size: 1.5em;font-weight: 900;}
.ict .onc h2{font-size: 1.3em;font-weight: 900;text-align: center;  position: relative;  padding-bottom: 15px;margin: 17% 0 10%;}
.ict .onc h2::after{content: "";position: absolute;right: 0;left: 0;margin: 0 auto;bottom: 0;width: 40px;height: 3px;background-color: #212121;border-radius: 100px;}
.ict .onc h2 span{display: block;}
.ict .onc h3{font-size: 0.95em;font-weight: 900;position: relative;padding-left: 10px;position: relative;z-index: 0;padding-left: 85px;}
.ict .onc h3::after{content: '';display: inline-block;vertical-align: middle;position: absolute;top: -10px;left: 10px;width: 80px;height: 80px;background-repeat: no-repeat;z-index:1;background-size: contain;}
.ict .onc h4{font-size: 15px;font-weight: 600;text-align: center;  position: relative;  padding-bottom: 15px;    margin: 0% 0 3%;}
.ict .onc h4::after {content: "";position: absolute;right: 0;left: 0;margin: 0 auto;bottom: 0;width: 40px;height: 3px;background-color: #212121;border-radius: 100px;}
.ict .onc .point1::after{background-image: url(/personal/online/images/ict_icon04.png);}
.ict .onc .point2::after{background-image: url(/personal/online/images/ict_icon05.png);}
.ict .onc .point3::after{background-image: url(/personal/online/images/ict_icon06.png);}
.ict .onc p{font-size: 0.9em;font-weight: 600;word-break: break-word;overflow-wrap: break-word;white-space: normal;line-height: 30px;}
.ict .onc img{width: 100%;display: block;}
.ict .box{padding: 10px;}
.ict #ict_can .box{margin-bottom: 16%;}
.ict .attn{font-size: 0.75em;line-height: 1.8;}
.ict .onc a{transition: .2s;}
.ict .onc a:hover{opacity: .5;}
.ict .attn_text{font-size: 0.75em;margin-top: 5%;display: block;line-height: 1.8;}
.ict .attn_text span{display: block;}

/* cta -----------------------------------------------*/

.ict .cta{margin:12% auto 0;text-align:center;padding: 0 10px 10px;display: none;}
.ict .cta.inner{margin:5% auto 0;display:block;}
.ict button{width:85%;margin:0 auto;}
.ict button a{font-weight:700;}
.ict .reserve_wrap{margin: 0 auto;position:relative;}
.ict .reserve{background-color:#ff6a56;border:none;border-radius:100px;padding: 29px 10px 12px;box-shadow:3px 4px 6px#969696;
 position:relative;font-size:1.1em;text-decoration:none;text-align:center;color:#fff;display:flex;justify-content:center;font-weight: 700;}
.ict .reserve::after{content: '';display: inline-block;width: 19px;height: 19px;background-image: url(/personal/online/images/ict_arr.png);background-size: contain;vertical-align: middle;background-repeat: no-repeat;position: relative;top: 21px;right: 9%;position: absolute;}
.ict .reserve_wrap span{position: absolute;top: 9px;z-index: 1;color: #fff;right: 0;left: 0;margin: 0 auto;font-size: 0.7em;font-weight: 600;pointer-events: none;}
.ict .start{background-color: #ffffff;border: none;border-radius: 100px;padding: 17px 10px;box-shadow: 3px 4px 6px #bee1ee;font-weight: 700;font-size: 1.1em;color: #39a5c9;text-decoration: none;width: 100%;display: block;box-sizing: border-box;position: relative;}
.ict .start::after{content: '';display: inline-block;width: 19px;height: 19px;background-image: url(/personal/online/images/blue_ict_arr.png);background-size: contain;vertical-align: middle;background-repeat: no-repeat;position: relative;top: 21px;right: 9%;position: absolute;}
.ict a.tel{color: #39a5c9;font-size: 0.85em;font-weight: 900;font-family: "Roboto",sans-serif;font-optical-sizing: auto;font-style: normal;pointer-events: none;cursor: default;}
@media screen and (max-width: 767px){
	.ict a.tel{pointer-events: auto;cursor: pointer;}
}
.ict .sub-copy{margin-bottom: 12px;}
.ict .cta .inner{margin: 25px 0;}
.ict .cta p{font-weight: 800;}
.ict .telmark::before{content: '';display: inline-block;width: 15px;height: 15px;background-image: url(/personal/online/images/ict_tel.png);background-size: contain;vertical-align: middle;background-repeat: no-repeat;position: relative;top: -2px;left: -2px;}
.ict .sub-copy span {font-size: 0.6em;padding-left: 2px;}

/* fv -----------------------------------------------*/

.ict .icon-box{display: flex;flex-wrap: nowrap;justify-content: flex-start;}
.ict .icon-box .item{width: 20%;padding: 4px;}
.ict .icon-box .item img{width: 100%;margin: 0 auto;}
.ict .main-v{position: relative;z-index: 0;}
.ict .supplement {right: 0;position: absolute;font-size: clamp(9px, 0.8vw, 10px);bottom: -3vw;font-weight: 600;line-height: 1.6;}
.ict .supplement span {display: block;}
.ict .cover-text{display: block;position: absolute;top: 0;left: 0;z-index: 1;background-color: #39a5c9;
 color: #fff;padding: 6px 19px 6px 6px !important;border-radius: 0 0 20px 0;margin: 0px;}
.ict .icon-box{position: absolute;bottom: -30px;}
.ict .fv-container .wrap{padding-left: 5px;margin-bottom: 15px;}
.ict .des{font-size: 0.65em!important;}
.ict .case{font-size: 0.7em;font-weight: 700;}
.ict .case p{display: inline-block;border: 1.5px solid #5b5b5b;border-radius: 3px;padding: 1px 4px;margin-right: 8px;margin-bottom: 0;}


/* オンライン相談サービスとは？ -----------------------------------------------*/

.ict .goodimg{display: block;margin: 10% auto 0;}


/* 資産運用の相談ってなにができるの？ -----------------------------------------------*/

.ict .heading{display: inline;background: linear-gradient(transparent 50%, #96d1e8 50%);}


/* まだ投信用口座がない方は -----------------------------------------------*/

.ict .toushin-box{position: relative;}
.ict .toushin-box::after{content: '';display: inline-block;width: 70px;height: 70px;background-image: url(/personal/online/images/bakudan02.png);background-size: contain;vertical-align: middle;background-repeat: no-repeat;animation: gizagiza 0.5s ease 0s infinite alternate;transform-origin: center;top: -59px;left: 22px;position: absolute;}
@keyframes gizagiza{from {transform: scale(0.95,0.95);}to {transform: scale(1,1);}}
.ict #more{position: relative;}
.ict #more::after{content: '';display: inline-block;width: 100px;height: 100px;background-image: url(/personal/online/images/ict_icon07.png);background-size: contain;vertical-align: middle;background-repeat: no-repeat;top: 0px;left: 0px;position: absolute;}


/* -- オンライン相談の流れ------------------------------  */

.ict #flow{margin-left: 15%;width: 85%;}
.ict #flow .step{width: 80px;}
.ict #flow .heading{background: linear-gradient(transparent 50%, #f2e47c 50%);}
.ict .onc #flow h3{font-size: 1.1em;font-weight: 900;position: relative;padding-left: 0px;position: relative;z-index: 0;margin-top: 3px;}
.ict #flow .cta{margin: 0;}
.ict #flow .cta .inner{margin: 0  0 25px;}
.ict #flow .box{padding: 10px 10px 20px 10px;}


/* カスタムインジケーター */

.ict .step_wrapper{position: relative;}
.ict .stepper{position: absolute;top: 0;left: 21px;width: 20px;height: 100%;pointer-events: none;}
.ict .step_icon{position: absolute;left: 50%;transform: translateX(-50%);width: 20px;height: 20px;border: 2px solid #39a5c9;border-radius: 50%;background-color: white;z-index: 1;}
.ict .indicator{position: absolute;top: 0;width: 21px;height: 21px;background-color: #39a5c9;border-radius: 50%;left: 50%;transform: translate(-50%, 0);transition: transform 0.42s linear;z-index: 2;box-shadow: 0 0 8px rgba(57, 165, 201, 0.5);animation: glow 2s ease-in-out infinite;border: 6px double #ffffff;}
.ict .line{position: absolute;left: 50%;width: 1px;background: #39a5c9;transform: translateX(-50%);z-index: 0;}
.ict .section-eq {margin: 10% auto;}
.ict #step2 {margin: 10% 0 20%;}

@keyframes glow{0%{box-shadow: 0 0 6px rgba(57, 165, 201, 0.4);}50%{box-shadow: 0 0 14px rgba(57, 165, 201, 0.9);}100%{box-shadow: 0 0 6px rgba(57, 165, 201, 0.4);}}


/* よくある質問------------------------------ */

.ict #qalist{background-color: #39a5c9;margin-top: 10%;padding: 3% 13px 15%;}
.ict #qalist h2{margin: 12% 0 10%!important;color: #fff;font-weight: 700;}
.ict #qalist h2::after{background-color: #fff;}
.ict .quest{position: absolute;top: -14px;left: 19px;background-color: #aadced;width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;font-size: 20px;border-radius: 100px;color: #1c1918;font-weight: 900;font-family: "Roboto", sans-serif;font-optical-sizing: auto;font-style: normal;font-size: 1.5em;font-style: italic;}
/* アコーディオンリスト全体を囲うタグ */
.ict .accordion_wrapper{margin-top: 50px;}
/* 個々のアコーディオンリストを囲うタグ */
.ict .accordion{margin: 0 auto;position: relative;}
/* アコーディオンのタイトル・内容共通 */
.ict .accordion_header,.ict .accordion_content{display: flex;align-items: center;padding: 15px 48px 15px 74px;font-weight: 400;margin: 0;}
/* アコーディオンのタイトル */
.ict .accordion_header{cursor: pointer;background-color: #ffffff;color: #0f0f0f;position: relative;font-weight: 700;border-radius: 100px;}
/* アコーディオンの内容 */
.ict .accordion_content{display: none;color: #fff;font-size: 0.8em;padding: 15px 10px 12px 62px;position: relative;line-height: 1.8;}
.ict .accordion_header:nth-child(n + 1){margin-top: 30px;}
/* タイトル横のプラスマーク縦線 */
.ict .accordion_header::before{position: absolute;content: '';top: 50%;right: 29px;width: 10px;height: 1.5px;background-color: #39a5c9;transform: rotate(90deg);transition: all .3s ease-in-out;}
/* タイトル横のプラスマーク横線 */
.ict .accordion_header::after{position: absolute;content: '';top: 50%;right: 29px;width: 10px;height: 1.5px;background-color: #39a5c9;transition: all .3s ease-in-out;}
/* アコーディオンが開いたとき縦線の変化 */
.ict .accordion_header.open::before{transform: rotate(180deg);}
.ict .accordion_header.open::after{opacity:0;}
.ict .answ{position: absolute;top: 10px;left: 19px;width: 45px;height: 45px;display: flex;justify-content: center;align-items: center;font-size: 20px;border-radius: 100px;color: #1c1918;font-weight: 900;font-family: "Roboto", sans-serif;font-optical-sizing: auto;font-style: normal;font-size: 1.5em;color: #fff;font-style: italic;}


/* 留意事項 */

.ict #note{padding: 10px;margin-top: 0%;}
.ict #note h2{font-size: 0.85em;text-align: center;margin: 3% 0 5%;}
.ict #note p{font-size: 0.75em;text-align: justify;font-weight: 400;letter-spacing: normal;line-height: 1.7;}

/* eq custom */
.ict .eq-bottom{display: block;margin-bottom: 12px;}
.ict .eq-mn-bottom{display: block;margin-bottom: 25px !important;}
.ict .eq-box{padding: 10px 10px 3px 10px !important;}
.ict .pc_none{display:none;}
@media screen and (max-width: 960px){
  .ict .pc_none{display:block;}
}

/* 固定フッター */

.ict .content{width: 100%;background-color: #e0f4fb;bottom: 0px;}
.ict .footer_fix .cta{display: flex;margin: 0;padding: 0 0px 10px;}
.ict .footer_fix .inner{width: 100%;padding: 0px 10px 5px;;margin: 0;}
.ict .footer_fix p{font-size: 0.6em;}
.ict .footer_fix .sub-copy{margin-bottom: 9px;}
.ict .footer_fix .reserve,.ict .footer_fix .start{padding: 8px 10px;font-size: 0.8em;}
.ict .footer_fix .reserve::after,.ict .footer_fix .start::after{display: none;}
.ict .footer_fix a.tel{color: #39a5c9;font-size: 0.7em;}
.ict .stopper_pin{position: relative;background: #fff;}
.ict #stopper{height: 1px;background: transparent;}
.ict #sticky-footer{display: none;position: fixed;bottom: 0;left: 0;z-index: 999;width: 100%;}


/* 下からふわっと / サイドからさっと表示アニメーション */

.ict .fade-up{opacity: 0;transform: translateY(30px);transition: all 0.6s ease-out;}
.ict .fade-up.show{opacity: 1;transform: translateY(0);}
.ict .side-up.show{transform: translateX(0px);}
.ict .side-up{transform: translateX(-200px);transition: .5s;}


/* フレキシブル対応*/

.ict .flexible-container { display: flex; max-width: 1200px; margin: 0 auto;padding-top: 1%;}
.ict .flexible-sidebar { width: 50%; height: 100vh; background-color: #ebf9fe; padding: 3%; box-sizing: border-box; overflow: hidden; top: 0; left: 0; display: flex; flex-wrap: wrap; align-content: center; border-right: 1px solid #c2e5f1; }
.ict .flexible-content { width: 50%; height: 100vh; overflow-y: auto; padding: 10px; box-sizing: border-box; background-color: #fff;
box-shadow: inset 0 7px 7px -7px rgba(0, 0, 0, 0.2), inset 0 -7px 7px -7px rgba(0, 0, 0, 0.2);padding-top: 20px;}
.ict .flexible-sidebar li { font-size: 1.15em; font-weight: 900; word-break: break-word; overflow-wrap: break-word; white-space: normal; line-height: 2.5; list-style: none; position: relative; display: flex; align-items: center; }
.ict .flexible-sidebar .cta { margin: 0 auto; display: block; width: 81%; }
.ict .flexible-sidebar .inner:first-child{margin-bottom:6%;}
.ict .flexible-sidebar .inner { width: 97%; margin: 0 auto;margin-bottom: 0%;} 
.ict .flexible-sidebar li a { text-decoration: none; color: #39a5c9; }
.ict .flexible-sidebar ul { padding-left: 16%; padding-bottom: 3%; }
.ict .flexible-sidebar li::before { content: ''; flex-shrink: 0; display: inline-block; width: 0.3em; height: 0.3em; background-color: #39a5c9; border-radius: 2px; margin-right: 0.4em; }
.ict .flexible-sidebar a:hover { opacity: 0.5; }
.ict .flexible-sidebar a { transition: 0.3s; }
.ict .pc-box-eq { background-color: #c2e5f1; padding: 7% 5%; border-radius: 18px;}


/* os対応表 */
.ict .os-table-wrap {font-size: 0.8em;margin: 10% auto 8%;padding: 0 10px;}
.ict .os-table {display: flex;flex-direction: column;border: 1px solid #ccc;width: 100%;max-width: 800px;}
.ict .os-row {display: flex;border-top: 1px solid #ccc;}
.ict .os-row:first-child {background: #e6e6e6;font-weight: 600;}
.ict .os-cell {flex: 1;padding: 8px;border-left: 1px solid #ccc;}
.ict .os-cell:first-child {border-left: none;}
.ict .os-table-wrap p {font-size: 0.8em !important;font-weight: 400;}


/* PC対応------------------------------------- */

@media screen and (min-width: 961px){

  .ict .onc h1 { font-size: 2em;overflow-y: hidden;margin-top: 8px;}
  .ict .onc p { font-size: 1em; line-height: 33px; } 
  .ict .onc h2 { font-size: 1.85em; padding-bottom: 15px; margin: 12% 0 6%;line-height: 1.4;}
  .ict .des { font-size: 0.8em !important; line-height: 10px !important;margin-top: 16px;}
  .ict .box { padding: 10px; margin-bottom: 10%; }
  .ict .attn { font-size: 0.8em;margin-top: 3%;}
  .ict .onc #flow h3 { font-size: 1.4em;line-height: 1.6;margin-bottom: 5%;}
  .ict .section-eq { margin: 0% auto; }
  .ict #note h2 { font-size: 0.95em; text-align: center; margin: 7% 0 0%; }
  .ict #note p { font-size: 0.7em; line-height: 20px; margin: 7% 0 4%; }
  .ict .onc h3 { font-size: 1.4em; }
  .ict .toushin-box::after { width: 100px; height: 100px; top: -83px; left: 25px; }
  .ict .case p { padding: 0px 11px;font-size: 1.2em;}
  .ict .pc-eq-visible { display: block !important; }
  .ict .eq-box { margin-bottom: 0% !important; }
  .ict #step2 { margin: 0; }
  .toshinbox.box-common {max-width: 1200px;margin: 5% auto 5%;}
}

/* SP対応------------------------------------- */

@media screen and (max-width: 960px){
.ict .flexible-sidebar{display: none;}
.ict .flexible-container{max-width: 100%;padding-top: 4%;}
.ict .flexible-content{width: 100%;padding: 0px;overflow-y: unset;height: auto;}
.ict #qalist {padding: 3% 13px 34%;}
.ict .cta{display: block;}
.ict .cover-text{font-size: 0.97em!important;padding: 6px 19px 9px 6px !important;}
.ict .attn_text {font-size: 0.75em;margin-top: 5%;}
.ict .case p {line-height: normal; font-size: 1.2em; font-weight: 700; padding: 0 6px;}
.ict .onc h1 {margin-top: 3%;overflow-y: hidden;}
.ict .onc h2 {line-height: 1.6;}
.ict .onc h3 {font-size: 1.05em;}
.ict .attn {margin-top: 5%;}
.ict .onc #flow h3 {margin-bottom: 5%; line-height: 1.6;}
.ict .eq-box {padding: 10px 10px 14px 10px !important;}
.ict .footer_fix .sub-copy {margin-bottom: 0px;}
.ict .footer_fix .inner {padding: 0px 15px 5px;}
.ict .footer_fix .reserve, .ict .footer_fix .start {padding: 11px 10px; font-size: 0.9em;}
.ict .footer_fix p {font-size: 0.7em;}
.ict .footer_fix a.tel {font-size: 1em;}
.ict .footer_fix .cta {padding: 5px 0px 10px;}
.ict #more::after {width: 90px; height: 90px;}
.ict .supplement {right: 0; position: absolute; font-size: clamp(7.5px, 0.8vw, 10px); bottom: -3vw; font-weight: 600; text-align: left; line-height: 1.6; padding-right: 5px;}
.ict .supplement span {display: block;}
.ict .flexible-content {box-shadow: inset 0 0px 0px -0px rgba(0, 0, 0, 0), inset 0 -0px 0px -0px rgba(0, 0, 0, 0);}
.scdown{display:none;}
}

/* パンくず */

.breadcrumb.-btm {
margin-top: 3%;
margin-bottom: 1%;
}

@media print, screen and (min-width: 375px) and (max-width: 767px) {
.breadcrumb.-btm {
margin-top: 3%;
margin-bottom: 1%;
padding: 0;
}
}

@media print, screen and (max-width: 374px) {
.breadcrumb.-btm{
margin-top: 4%;
margin-bottom: 1%;
padding: 0;
}
}

/* 最終調整にて追加分 -----------------------------*/

.ict-text-eq{display: block;
}

/* 以下、スクロール示唆 */
.ict .flexible-container{ position:relative;}
.scdown{
position:absolute;
top: -14px;
right: 19%;
transform:translateX(-50%); 
z-index:9999;
animation:bounceBlink 1.6s infinite;
opacity: 1;
}
.scdown img{ width: 4vw;max-width: 60px; display:block; }
.scdown.is-hidden{
opacity:0;
transition: 0.7s;
}
.scdown.stop-anim{
animation: none !important;
}
@keyframes bounceBlink{
0%   { transform:translateX(-50%) translateY(0); }
30%  { transform:translateX(-50%) translateY(8px); }
60%  { transform:translateX(-50%) translateY(0); }
100% { transform:translateX(-50%) translateY(0); }
}


/* 印刷用 style */
@media print {
.ict .flexible-sidebar{display:none;}
.ict .flexible-content{width:100%;}
.accordion_content{display:block!important}
}