@charset "UTF-8";
@font-face{
    font-family:"Zen Kaku Gothic Antique";
    src:url("../fonts/ZenKakuGothicAntique-Black.ttf") format("truetype");
    font-weight:900;
    font-style:normal;
}
@font-face{
    font-family:"Zen Kaku Gothic Antique";
    src:url("../fonts/ZenKakuGothicAntique-Bold.ttf") format("truetype");
    font-weight:700;
    font-style:normal;
}
@font-face{
    font-family:"Zen Kaku Gothic Antique";
    src:url("../fonts/ZenKakuGothicAntique-Light.ttf") format("truetype");
    font-weight:500;
    font-style:normal;
}
@font-face{
    font-family:"Zen Kaku Gothic Antique";
    src:url("../fonts/ZenKakuGothicAntique-Medium.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}
@font-face{
    font-family:"Zen Kaku Gothic Antique";
    src:url("../fonts/ZenKakuGothicAntique-Regular.ttf") format("truetype");
    font-weight:300;
    font-style:normal;
}

:root {
    --header-height:90px;
    --bg-color:#FDFBF5;
    --point1-color:#F2EE82;
    --point2-color:#A1EBD3;
    --point3-color:#E7AECD;
    --effect-color:#FDFBF5;

    --trans-time:0.5s;
    --trans-delay:var(--trans-time);
}
/* body { font-family:"Zen Kaku Gothic Antique","Noto Sans Japanese","Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;} */
body { font-family:"Zen Kaku Gothic Antique","Noto Sans JP", "Yu Gothic", YuGothic,"Hiragino Kaku Gothic Pro","Meiryo", sans-serif;}
sup { font-size:0.9rem; vertical-align:top;}
a { text-decoration:none;}
a:hover { opacity:0.75;}
a:link,
a:visited { color:currentColor;}
a[target="_blank"]:after {
    content:"";
    display:inline-block;
    width:0.9rem;
    aspect-ratio:1/1;
    background:url(../../image/icon/icon_target_blank.svg) no-repeat center / 100% auto;
    margin-left:0.5rem;
}
.pc { display:block;}
.sp { display:none;}
span.pc { display:inline-block;}
span.sp { display:none;}
#f_fixed { display:none;}

dialog {
    position:fixed;
    border:none;
    padding:0;
}
button:focus-visible { outline:none;}
p { margin:0;}
ul { list-style:none; padding:0;}

ul.white_l li { position:relative; padding-left:40px; /*font-family:"Zen Kaku Gothic Antique"; */ font-size:24px; font-weight:900;}
ul.white_l li + li { margin-top:1.75rem;}
ul.white_l li:before{
    content:"";
    position:absolute;
    display:block;
    width:30px;
    aspect-ratio:1/1;
    background:#fff;
    border-radius:50%;
    top:3px;
    left:0;
}
ul.white_s li { position:relative; padding-left:22px; font-size:22px; font-weight:900;}
ul.white_s li + li { margin-top:23px;}
ul.white_s li:before{
    content:"";
    position:absolute;
    display:block;
    width:16px;
    aspect-ratio:1/1;
    background:#fff;
    border-radius:50%;
    top:8px;
    left:0;
}
ul.green_l li { position:relative; padding-left:40px; font-size:24px; font-weight:900;}
ul.green_l li + li { margin-top:1.75rem;}
ul.green_l li:before{
    content:"";
    position:absolute;
    display:block;
    width:30px;
    aspect-ratio:1/1;
    background:#CBD919;
    border-radius:50%;
    top:3px;
    left:0;
}

ul.cation li { position:relative; padding-left:24px; font-size:18px; font-weight:300;}
ul.cation li.red { color:#FF0000; font-weight:600;}
ul.cation li.large { font-size:20px;}
ul.cation li.bold { font-weight:900;}
ul.cation li:before {
    content:"※";
    position:absolute;
    display:block;
    width:1rem;
    top:0;
    left:0;
}
ul.cation li.ast:before {
    content:"＊";
}

ul.circle li { position:relative; padding-left:20px; font-family:"Noto Sans JP"; font-size:16px; line-height:140%;}
ul.circle li:before{
    content:"◎";
    position:absolute;
    display:block;
    width:1rem;
    top:0;
    left:0;
}
ul.circle li + li { margin-top:0.5rem;}

ul:where(.white_l, .white_s, .green_l, .cation, .circle) li.no-icon { padding-left:0;}
ul:where(.white_l, .white_s, .green_l, .cation, .circle) li.no-icon:before { content:none;}



ul.bg_white { padding:40px; background:#fff; border:solid 1px #EFE9D6;}

h3 { position:relative; padding-left:40px; font-size:34px; font-weight:700;}
h3:before {
    content:"";
    position:absolute;
    display:block;
    width:20px;
    height:100%;
    background:#fff;
    top:0;
    left:0;
}
h3 small { font-size:23px;}

table { width:100%;}

table tr :where(th, td) { padding:23px 25px; border-bottom:solid 1px #C1BA9D;}
table tr th { /*background:#083433;*/ color:#fff; font-size:20px; font-weight:900; text-align:center;}
table thead th { background:#083433;}
table tbody tr { background:#fff;}
table tbody tr :where(th, td) { /*background:#fff;*/ color:#464232; font-size:20px; font-weight:700; position:relative;}
table tbody tr :where(th, td):after {
    content: '';
    display: inline-block;
    position:absolute;
    width:2px;
    height:100%;
    background:url(../../image/border-circle.svg) repeat-y top center / 100% 6px;
    top:0;
    right:0;
}
table tr td:last-of-type:after { content:none;}

/* header ********************************************************/
#h {
    /* position:relative; */
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px;
    box-shadow:0px 3px 6px rgba(0,0,0,16%);
    position:fixed;
    width:100%;
    height:var(--header-height);
    inset:0 auto auto 0;
    background:#fff;
    z-index:999;
}
/* 
* clamp() について
*   viewportが 1280px ～ 1325px の間可変させる（複数ロゴ表示によりヘッダー右要素が崩れるため）
*   @ gap … 最小：10px　最大：25px
*   @ width … 最小：90％　最大：100％
*/
#h .h_logo { display:flex; align-items:center; gap:clamp(0.625rem, -16.518rem + 21.429vw, 1.563rem); padding-left:10px; margin:0; line-height:0;}
/* #h .h_logo a:nth-of-type(1) img { width:clamp(11.475rem, -11.839rem + 29.143vw, 12.75rem); height:auto;}
#h .h_logo a:nth-of-type(2) img { width:clamp(23.794rem, -24.549rem + 60.429vw, 26.438rem); height:auto;} */
#h .h_logo div:nth-of-type(1) img { width:clamp(11.475rem, -11.839rem + 29.143vw, 12.75rem); height:auto;}
#h .h_logo div:nth-of-type(2) img { width:clamp(23.794rem, -24.549rem + 60.429vw, 26.438rem); height:auto;}
#h .h_fund { display:flex; gap:10px; align-items:center; padding:10px; border:solid 2px #CAE0E3; border-radius:6px;}
#h .h_fund div { font-weight:700;}
#h .h_fund div:nth-of-type(1) { color:#0099B3; font-size:20px;}
#h .h_fund div:nth-of-type(2) { font-size:19px;}
#h .h_fund .h_btn { padding:5px 15px; color:#fff; border-radius:6px;}
#h .h_fund .h_btn_g { background:#009B9B;}
#h .h_fund .h_btn_o { background:#F08A52;}

#h :where(.menu, .menu_content) { display:none;}

#line {
    position:fixed;
    display:flex;
    gap:20px;
    justify-content:space-between;
    align-items:center;
    width:260px;
    height:85px;
    border-radius:16px 0 0 0;
    padding:20px;
    right:0;
    bottom:0;
    box-shadow:-5px -2px 11px rgba(0,0,0,16%);
    background:#fff;
    z-index:999;
}
#line:after { content:none;}



/* footer ********************************************************/
#f {
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:47.5px;
    padding:45px 25px 45px 50px;
    background:#393835; color:#fff;
    line-height:193.75%;
    position:relative;
}
#f .f_corp p.flex { display:flex;}
#f .f_corp p.flex span:first-of-type { flex-shrink:0;}
#f .f_corp p:first-of-type { font-size:17px; font-weight:700;}
#f .f_copy { font-size:0.9rem; letter-spacing:0.05rem;}

/* page_top */
#page_top {
    position:absolute;
    width:80px;
    aspect-ratio:1/1;
    background:#005265 url(../../image/icon/icon_page_top.svg) no-repeat center center / 30% auto;
    top:0;
    right:0;
    z-index:99;
    cursor:pointer;
    transition:background 0.25s;
}
#page_top:hover{
    background-size:40% auto;
}

/* main ********************************************************/
#m { margin-top:var(--header-height);}
#m img { width:100%; height:auto;}

/* fv */
#m .fv {
    background:var(--bg-color);
}
#m .fv .fv_wrap {
    display:flex;
    justify-content:center;
    position:relative;
    max-height:calc(100vh - var(--header-height));
    aspect-ratio:192/99;
    margin:auto;
}
#m .fv .fv_l { position:relative; width:44.79166%;}
#m .fv .fv_l:after {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:100%;
    width:2vw;
    height:100%;
    background:linear-gradient(to right, rgba(0,0,0,44%), transparent 50%, transparent);
    z-index:100;
}
#m .fv .fv_r { width:calc(100% - 44.79166%);}

#m .fv :where(.fv_l, .fv_r) img { display:block; width:100%; height:auto;}
#m .fv .fv_text { display:none;}


/* point */
#m .point { position:relative; background:#FDFBF5; padding:0 0 165px;}
#m .point:after { 
    content:"";
    position:absolute;
    display:block;
    top:calc(100% - 1px);
    width:100%;
    height:11.25vw;
    clip-path:polygon(0 0, 100% 0, 50% 100%);
    background:var(--bg-color);
    z-index:1;
}
#m .point .wrap { padding:205px 0 418.5px;}
#m .point .catch { position:relative; max-width:1200px; margin:auto;}
#m .point .catch .catch_text { position:relative; z-index:3;}
#m .point .catch :where(.bg1, .bg2) { position:absolute; z-index:1;}
#m .point .catch .bg1 { rotate:3deg; width:96.778%; top:-5.14%; left:-2.75%;}
#m .point .catch .bg2 { rotate:2deg; width:96%; bottom:-8.72%; right:-1.625%;}


#m .about { position:relative; z-index:1;}
#m .about .title { position:absolute; inset:-10.833vw 0 auto; margin:auto; width:44.583vw; z-index:1;}
#m .about ul { display:flex; margin:0; padding:0;}

#m .about .about_point {
    position:relative;
    flex-basis:calc(100% / 3);
    background:url(none) no-repeat center / 100% auto;
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 6.145vw), calc(100% - 5.729vw) 100%, 0 100%);
    padding:4.491vw 0 6.5625vw;
}
#m .about .about_point .num { position:absolute; top:2.312vw;}
#m .about .about_point .image { width:52.8%; margin:0 auto 1.661vw;}
#m .about .about_point .cap { display:flex; align-items:center; height:7.330vw; margin:0 auto 1.890vw;}
#m .about .about_point .text { /*width:85.31%;*/ width:86%; margin:auto; font-size:1.5625vw; font-weight:700;}

#m .about .about_point1 { background-image:url(../../image/point1_bg_s.jpg);}
#m .about .about_point2 { background-image:url(../../image/point2_bg_s.jpg);}
#m .about .about_point3 { background-image:url(../../image/point3_bg_s.jpg);}

#m .about .about_point1 .num { width:12.11%; left:10.43%;}
#m .about .about_point2 .num { width:20.29%; left:4.95%;}
#m .about .about_point3 .num { width:19.25%; left:6.28%;}

#m .about .about_point2 .image { width:54.07%;}

#m .about .about_point1 .cap { width:24.695vw;}
#m .about .about_point2 .cap { width:28.954vw;}
#m .about .about_point3 .cap { width:20.583vw;}


#m .movie { position:relative; width:900px; margin:170px auto 0; z-index:0;}
#m .movie:before {
    content:"";
    position:absolute;
    display:block;
    background:url(../../image/icon/icon_movie.svg) no-repeat center / 100% auto;
    width:327px;
    aspect-ratio:1/1;
    top:-99px;
    left:-75px;
    z-index:-1;
}
#m .movie .title { width:472.6px;  margin:0 auto 43.3px;}
/* #m .movie video { width:100%; height:auto;} */
#m .movie .umekomi { position:relative; width:100%; aspect-ratio:64/36;}


/* point_ */
section[class^="point"] {
    position:relative;
    padding-top:11.25vw;
    background:url(none) no-repeat center / 100% auto;
}
section[class^="point"]:before{
    content:"";
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    top:0;
    background:url(none) no-repeat top / 100% auto;
    mix-blend-mode:overlay;
}
section[class^="point"]:after {
    content:"";
    position:absolute;
    display:block;
    top:calc(100% - 1px);
    width:100%;
    height:11.25vw;
    clip-path:polygon(0 0, 100% 0, 50% 100%);
    z-index:1;
}



/* point_1 */
#m .point_1 { background:var(--point1-color);}
#m .point_1:before { background-image:url(../../image/point_1/bg.png);}
#m .point_1:after { background:var(--point1-color);}
#m .point_1 .wrap { max-width:1200px; margin:auto; padding:27.6px 0 63px;}
#m .point_1 .title { margin:0 auto 40px;}
#m .point_1 :where(.white_l, .cation) { max-width:1200px; margin:auto;}
#m .point_1 .white_l { margin-bottom:23px;}
#m .point_1 .white_l li { text-align:justify;}
#m .point_1 .graph { max-width:1200px; padding:0 75px; margin:116px auto 60px;}
#m .point_1 .graph .graph_base { position:relative; margin:37px auto;}
#m .point_1 .graph .cation { max-width:100%;}
#m .point_1 .graph .graph_item li {
    position:absolute;
    line-height:0;
}

#m .point_1 .graph :where(.item1, .item2) { background:#E0EA66;}
#m .point_1 .graph :where(.item1, .item2, .item3) { width:17.14%; transform-origin:top center;}

#m .point_1 .graph .item1 { width:17.14%; top:27.433%; left:17.05%;  height:47.17%;}
#m .point_1 .graph .item2 { width:17.14%; top:58.433%; left:45.619%; height:16.17%;}
#m .point_1 .graph .item3 { width:17.14%; top:74.5%;   left:74.19%;  background:#FC8442; rotate:180deg;}
#m .point_1 .graph .item4 { width:12.44%; top:20.167%; left:19.743%;}
#m .point_1 .graph .item5 { width:12.82%; top:51.167%; left:47.876%;}
#m .point_1 .graph .item6 { width:13.05%; top:65%;     left:76.781%; opacity:0;}
/* #m .point_1 .graph .item7 { width:27.14%; top:48.667%; left:69.524%; opacity:0;} */
#m .point_1 .graph .item7 { width:20.29%; top:51.24%; left:71.95%; opacity:0;}


/* ↓ point_1 -- animation */
/* #m .point_1 .graph_base :where(.item1, .item2, .item3){
    clip-path:inset(100% 0% 0% 0%);
    transition:clip-path var(--trans-time);
}
#m .point_1 .graph_base .item2 { transition-delay:calc(var(--trans-delay) * 1)}
#m .point_1 .graph_base .item3 { transition-delay:calc(var(--trans-delay) * 2)}
#m .point_1 .graph_base :where(.item4, .item5, .item6, .item7){
    translate:0 -50%;
    opacity:0;
    transition:all var(--trans-time);
    transition-delay:calc(var(--trans-delay) * 3);
} */

/* move */
/* #m .point_1 .graph_base.move :where(.item1, .item2, .item3){ clip-path:inset(0% 0% 0% 0%);}
#m .point_1 .graph_base.move :where(.item4, .item5, .item6, .item7) { translate:0 0; opacity:1;} */
#m .point_1 .graph_base { --anime-time:1.25s;}
#m .point_1 .graph_base.move .item3 {
    animation:point_1_item3 var(--anime-time) ease forwards;
}
#m .point_1 .graph_base.move .item6 {
    animation:point_1_item6 var(--anime-time) var(--anime-time) ease forwards;
}
#m .point_1 .graph_base.move .item7 {
    animation:point_1_item7 var(--anime-time) calc(var(--anime-time) * 1.5) ease forwards;
}

@keyframes point_1_item3 {
    0% { opacity:0; height:40%;}
    25% { opacity:1; height:40%;}
    100% { opacity:1; height:2.1%;}
}
@keyframes point_1_item6{
    0% { opacity:0;}
    70% { opacity:0;}
    100% { opacity:1}
}
@keyframes point_1_item7{
    0% { opacity:0;}
    70% { opacity:0;}
    100% { opacity:1}
}

/* ↑ point_1 -- animation */

#m .point_1 .graph ul.cation li.ast { padding-left:2.5rem;}
#m .point_1 .graph ul.cation li.ast:nth-of-type(1):before { content:"＊1"; width:2rem;} 
#m .point_1 .graph ul.cation li.ast:nth-of-type(2):before { content:"＊2"; width:2rem;}

/* point_2 */
#m .point_2 { background:var(--point2-color);}
#m .point_2:before { background-image:url(../../image/point_2/bg.png);}
#m .point_2:after { background:var(--point2-color);}
#m .point_2 .wrap { max-width:1200px; margin:auto; padding:63px 0 47.6px;}

#m .point_2 .title { margin-bottom:75px;}

#m .point_2 .benchmark { max-width:1050px; margin:69px auto 0;}
#m .point_2 .benchmark tbody tr td:first-of-type { word-break:keep-all;}
#m .point_2 .textbox {
    --anime-time:1.0s;
    max-width:1050px;
    margin:0 auto 48.7px;
    background:rgba(255,255,255,0.43);
    border-radius:16px;
    padding:31.5px 3.76%;
    font-size:29px;
    font-weight:900;
    text-align:center;
}
#m .point_2 .textbox p:nth-of-type(1) { opacity:0; translate:0 50%; transition:all var(--anime-time) ease;}
#m .point_2 .textbox p:nth-of-type(2) { opacity:0; translate:0 50%; transition:all var(--anime-time) var(--anime-time) ease; color:#FC0F3C; font-size:38px;}
/* ↓ animation */

#m .point_2 .textbox.move p { opacity:1; translate:0 0;}

/* ↑ animation */

#m .point_2 h3 { padding-left:30px; font-size:36px; line-height:1;}
#m .point_2 h3 small { font-size:22px;}
#m .point_2 .graph_base { position:relative; margin-bottom:30px;}
#m .point_2 .graph_item li { position:absolute; line-height:0;}

#m .point_2 .plan table tr :where(th, td) { line-height:1.2;}
#m .point_2 .plan table tr th { padding:12.5px 0;}
#m .point_2 .plan table tbody th { font-size:20px; padding:20px 0; text-align:center; width:26.5%;}
#m .point_2 .plan table tbody td { font-size:28px; /*font-weight:500;*/ font-weight:600; padding:20px 10px; text-align:right; width:24.5%}
#m .point_2 .plan table .pickup { color:#FF7A09; font-weight:900;}

#m .point_2 .cap_1 { margin-top:120.5px;}
#m .point_2 .cap_1 .cap { width:561px; margin:0 auto 37.7px;}
#m .point_2 .plan { display:flex; gap:40px; margin-bottom:53.3px;}
#m .point_2 .plan_1 .graph_item .item_1 { width:83.72%; top:16.222%; left:9.276%; z-index:1;}   /* グラフ　：当ファンド */
#m .point_2 .plan_1 .graph_item .item_2 { width:23.46%; top:17.738%; left:64.793%; z-index:2;}  /* テキスト：当ファンドモデル */
#m .point_2 .plan_1 .graph_item .item_3 { width:28.01%; top:66.923%; left:46.862%; z-index:2;}  /* テキスト：米国株式インデックス */
#m .point_2 .plan_1 .graph_item .item_4 { width:15.13%; top:73.937%; left:75.798%; z-index:2;}  /* テキスト：超過収益率 */
#m .point_2 .plan_1 .graph_item .item_5 { width:83.72%; top:16.222%; left:9.276%; z-index:0;}   /* グラフ　：米国株式インデックス */

#m .point_2 .plan_2 .graph_item .item_1 { width:83.70%; top:21.735%; left:9.345%; z-index:1;}   /* グラフ　：当ファンド */
#m .point_2 .plan_2 .graph_item .item_2 { width:23.46%; top:25.747%; left:65.552%; z-index:2;}  /* テキスト：当ファンドモデル */
#m .point_2 .plan_2 .graph_item .item_3 { width:31.72%; top:65.226%; left:48.810%; z-index:2;}  /* テキスト：米国株式インデックス */
#m .point_2 .plan_2 .graph_item .item_4 { width:15.13%; top:73.937%; left:75.897%; z-index:2;}  /* テキスト：超過収益率 */
#m .point_2 .plan_2 .graph_item .item_5 { width:83.70%; top:23.235%; left:9.345%; z-index:0;}   /* グラフ　：米国株式インデックス */


/* ↓ point_2 -- animation */

#m .point_2 .graph_base { --trans-time:1.0s;}
#m .point_2 .graph_base :where(.item_1, .item_2, .item_3, .item_4, .item_5) { transition-property:all; transition-duration:var(--trans-time);}
#m .point_2 .graph_base :where(.item_1, .item_2, .item_4) { transition-delay:calc(var(--trans-time) + 0.75s);}
#m .point_2 .graph_base :where(.item_1, .item_5) { clip-path:inset(0% 100% 0% 0%);}
#m .point_2 .graph_base :where(.item_2, .item_3, .item_4) { opacity:0;}


#m .point_2 .graph_base.move :where(.item_2, .item_3, .item_4) { opacity:1;}
#m .point_2 .graph_base.move :where(.item_1, .item_5) { clip-path:inset(0% 0% 0% 0%);}

/* ↑ point_2 -- animation */


#m .point_2 .cap_2 { margin-top:166.5px;}
#m .point_2 .cap_2 .cap { width:35.9%; margin:0 auto 59px;}

#m .point_2 .cap_2 ul.white_s { margin-bottom:29.5px;}
#m .point_2 .cap_2 ul.cation { margin-bottom:95px;}
#m .point_2 .cap_2 .image { display:flex; justify-content:center; align-items:center; gap:70px;}
#m .point_2 .cap_2 .image_1 { flex-basis:60%;}
#m .point_2 .cap_2 .image_2 { flex-basis:40%;}
#m .point_2 .cap_2 .image ul.cation { width:fit-content; margin: 0 auto;}
#m .point_2 .cap_2 .image img { display:block; margin-bottom:26px;}


/* point_3 */
#m .point_3 { background:var(--point3-color);}
#m .point_3:before { background-image:url(../../image/point_3/bg.png);}
#m .point_3:after { background:var(--point3-color);}
#m .point_3 .wrap { max-width:1200px; margin:auto; padding:63px 0 47.6px;}

#m .point_3 .title { margin-bottom:70.4px;}
#m .point_3 ul.white_l + ul.cation { margin-bottom:2rem;}
#m .point_3 .mb { margin-bottom:92px;}
#m .point_3 h3 { font-size:36px; font-weight:900; padding-left:30px; line-height:1.2;}

#m .point_3 .graph {
    --gap:5%;
    display:flex;
    justify-content:space-between;
    margin-bottom:44.4px;
}
#m .point_3 .graph p { margin-bottom:16.8px; font-size:21px; font-weight:900;}
#m .point_3 .graph > li { flex-basis:calc((100% - var(--gap)) / 2);}
#m .point_3 .graph ul.cation li { padding-left:21px; font-size:17px;}
#m .point_3 .graph + ul.cation { max-width:800px; margin:0 auto 125px;}
#m .point_3 .graph_base { position:relative; margin-bottom:24px;}
#m .point_3 .graph_item li { position:absolute;}

#m .point_3 .graph_1 .item1 { width:20.55%; top:6.6%;  left:18.125%;}
#m .point_3 .graph_1 .item2 { width:20.55%; top:44.1%; left:57.857%;}
#m .point_3 .graph_1 .item3 { width:61.05%; top:19.443%; left:38.946%;}

#m .point_3 .graph_2 .item1 { width:20.55%; top:49.5%; left:18.036%;}
#m .point_3 .graph_2 .item2 { width:20.55%; top:35.6%; left:57.679%;}
#m .point_3 .graph_2 .item3 { width:35.89%; top:25.0%; left:50.714%;}

#m .point_3 ul.basis {
    --gap:14px;
    display:flex;
    gap:var(--gap) 0;
    justify-content:space-between;
    position:relative;
    margin-bottom:calc(55px + 1.5rem);
}
#m .point_3 ul.basis li:not(:last-of-type) { flex-basis:calc(50% - var(--gap) / 2);}
#m .point_3 ul.basis li:last-of-type { position:absolute; top:50%; left:50%; translate:-50% -50%;}
#m .point_3 ul.basis ul.cation li { top: calc(100% + 1.5rem); left:25%; font-size: 14px; }

#m .point_3 table {
    --border-color:#FC0F3C;
    max-width:1050px;
    margin:0 auto 40.5px;
    position:relative;
}
#m .point_3 table tbody th { width:29.52%; text-align:left; padding:20px 14px; word-break:keep-all;}
#m .point_3 table tbody td { width:17.62%; text-align:center; font-size:25px; font-weight:700; line-height:1;}

#m .point_3 table tbody tr:first-of-type td:last-of-type:after,
#m .point_3 table tbody tr:last-of-type td:last-of-type:after,
#m .point_3 table tbody tr:not(:first-of-type, :last-of-type) td:last-of-type:after{
    content:"";
    position:absolute;
    display:block;
    background:none;
    width:100%;
}
#m .point_3 table tbody tr:first-of-type td:last-of-type:after {
    height:100%;
    border-top:solid 8px var(--border-color);
    border-left:solid 8px var(--border-color);
    border-right:solid 8px var(--border-color);
    top:0;
    left:0;
}
#m .point_3 table tbody tr:last-of-type td:last-of-type:after {
    height:100%;
    border-left:solid 8px var(--border-color);
    border-right:solid 8px var(--border-color);
    border-bottom:solid 8px var(--border-color);
    bottom:0;
    left:0;
}
#m .point_3 table tbody tr:not(:first-of-type, :last-of-type) td:last-of-type:after {
    height:calc(100% + 2px);
    border-left:solid 8px var(--border-color);
    border-right:solid 8px var(--border-color);
    top:-1px;
    left:0;
}

#m .point_3 ul.basis + ul.cation { margin-bottom:75px;}
#m .point_3 ul.basis + ul.cation li:first-of-type:before { content:"＊";}
#m .point_3 .scroll + ul.cation { margin-bottom:75px;}

#m .point_3 ul.calc { display:flex; flex-direction:row-reverse; justify-content:space-between; gap:0 35px; max-width:1050px; margin:0 auto 75px;}
#m .point_3 ul.calc ul.cation { width:fit-content; margin:16.5px auto 0;}
#m .point_3 ul.calc .hukidashi { display:block; position:relative;}
#m .point_3 ul.calc .hukidashi:before{
    content:"";
    position:absolute;
    display:block;
    width:29.28px;
    height:37.24px;
    background:url(../../image/point_3/calc2_icon_pc.svg) no-repeat center / 100% auto;
    top:23.78%;
    left:-4.198%;
}

#m #dialog {
    overflow:visible;
    background:none;
    --trans-time:0.5s;
}
#m #dialog::backdrop { background:rgba(0,0,0,0.6);}
#m #dialog .dialog_content img {
    width:100%;
    height:auto;
    max-width:min(1200px, 90vw);
    max-height:90vh;
}

#m #dialog_open {
    --h:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:87.5%;
    height:var(--h);
    border:none;
    border-radius:calc(var(--h) / 2);
    margin:0 auto 28px;
    padding:0;
    background:#005265;
    cursor:pointer;
}
#m #dialog_open:after {
    --w:27.7px;
    content:"";
    position:absolute;
    display:block;
    background:url(../../image/point_3/detail_open.svg) no-repeat center / 100% auto;
    width:var(--w);
    aspect-ratio:1/1;
    top:50%;
    right:calc((var(--h) - var(--w)) / 2);
    translate:0 -50%;
    transition:rotate var(--trans-time);
}
#m #dialog_open:hover:after { rotate:135deg;}
#m #dialog_open img { width:auto; height:1.5rem;}

#m #dialog_close {
    --w:7%;

    position:absolute;
    background:none;
    border:none;
    top:calc(var(--w) / -2);
    right:0;
    width:var(--w);
    padding:0;
    cursor:pointer;
}
#m #dialog_close img { rotate:0; transition: rotate var(--trans-time);}
#m #dialog_close:hover img { rotate:180deg;}
#m #dialog_close:after {
    content:"閉じる";
    position:absolute;
    display:block;
    font-size:16px;
    font-weight:700;
    left:0;
    right:0;
    margin:auto;
    color:#000;
}

/* ↓ modal --------------------------------------------------*/
.modal_wrap { 
    display:none;

    position:fixed;
    inset:0;
    margin:auto;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:9999;
}
.modal_wrap.open { display:block;}

#m .modal_open {
    --h: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 87.5%;
    height: var(--h);
    border: none;
    border-radius: calc(var(--h) / 2);
    margin: 0 auto 28px;
    padding: 0;
    background: #005265;
    cursor: pointer;
}
#m .modal_open:after { 
    --w: 27.7px;
    content: "";
    position: absolute;
    display: block;
    background: url(../../image/point_3/detail_open.svg) no-repeat center / 100% auto;
    width: var(--w);
    aspect-ratio: 1/1;
    top: 50%;
    right: calc((var(--h) - var(--w)) / 2);
    translate: 0 -50%;
    transition: rotate var(--trans-time);
}
#m .modal_open:hover:after { rotate:135deg;}
#m .modal_open img { width:auto; height:1.5rem;}

#m .modal_close {
    --w: 7%;
    position: absolute;
    background: none;
    border: none;
    top: calc(var(--w) / -2);
    right:0;
    width: var(--w);
    padding: 0;
    cursor: pointer;
    z-index:100;
}
#m .modal_close:after{
    content: "閉じる";
    position: absolute;
    display: block;
    font-size: 16px;
    font-weight: 700;
    left: 0;
    right: 0;
    margin: auto;
    color: #000;
}
#m .modal_close img { rotate:0; transition: rotate var(--trans-time);}
#m .modal_close:hover img { rotate:180deg;}


#m .modal_content {
    /* max-width: min(1200px, 90vw); */
    width:fit-content;
    height:fit-content;
    max-height: 90vh;
    position: absolute;
    inset: 0;
    margin: auto;
}
#m .modal_content img {
    max-width: min(1200px, 90vw);
    max-height: 90vh;
}
#m .modal_content .content_img { aspect-ratio:5/4; width:auto;}

/* ↑ modal --------------------------------------------------*/


/* effect */
#m .effect {
    position:relative;
    background:var(--effect-color) url(none) no-repeat center / 100% auto;
    padding:395.5px 0 0;
    z-index:0;
}
#m .effect:before {
    content:"";
    position:absolute;
    display:block;
    width:100%;
    aspect-ratio:64/29;
    top:0;
    background:var(--effect-color) url(../../image/eff/bg.png) no-repeat top / 100% auto;
    mix-blend-mode:soft-light;
    z-index:-1;
}
#m .effect:after{
    content:"";
    position:absolute;
    display:block;
    width:100%;
    aspect-ratio:64/29;
    background:linear-gradient(to bottom, transparent, transparent 53.4%, var(--effect-color) 100%);
    top:0;
    z-index:-1;
}
#m .effect .wrap { max-width:1200px; margin:auto; padding:0 0 120px;}
#m .effect .title { max-width:761.69px; margin:0 auto 66px;}
#m .effect .title + ul.green_l { width:fit-content; margin-inline:auto;}
#m .effect ul.green_l { margin-bottom:100px;}
#m .effect .cap { width:540px; margin:0 auto 38.5px;}
#m .effect .textbox {
    max-width:780px;
    background:#EFE9D6;
    border:solid 3px #fff;
    box-shadow:0 0 0 13px #EFE9D6;
    margin:0 auto 100px;
    padding:30px 50px;
    font-size:22px;
    font-weight:700;
}
#m .effect h3 { padding-left:30px;}
#m .effect h3:before { background:#CAD918;}

#m .effect .plan { display:flex; gap:40px; justify-content:space-between; margin-bottom:102.5px;}
#m .effect .graph_base { position:relative; margin-bottom:43.5px;}
#m .effect .graph_item > li { position:absolute; line-height:0;}

#m .effect .plan_1 .item1 { width:73.06%; top:28.58%; left:14.43%;}  /* グラフ　：赤線 */
#m .effect .plan_1 .item2 { width:32.98%; top:30.83%; left:46.4%; }  /* テキスト：当ファンドモデル */
#m .effect .plan_1 .item3 { width:37.96%; top:48.43%; left:16.0%; }  /* テキスト：積立投資の評価金額（右軸） */
#m .effect .plan_1 .item4 { width:18.54%; top:74.92%; left:63.4%; }  /* テキスト：積立元本（右軸） */
#m .effect .plan_1 .item5 { width:15.62%; top:53.2%;  left:33.3%; }  /* その他　：詳細線 */
#m .effect .plan_1 .item6 { width:73.06%; top:28.58%; left:14.43%;}  /* グラフ　：積立投資の評価金額・積立元本 */

#m .effect .plan_2 .item1 { width:74.07%; top:31.27%; left:13.86%;} /* グラフ　：赤線 */
#m .effect .plan_2 .item2 { width:32.98%; top:35.89%; left:37.06%;} /* テキスト：当ファンドモデル */
#m .effect .plan_2 .item3 { width:37.96%; top:48.14%; left:15.69%;} /* テキスト：積立投資の評価金額（右軸） */
#m .effect .plan_2 .item4 { width:20.49%; top:74.81%; left:63.41%;} /* テキスト：積立元本（右軸） */
#m .effect .plan_2 .item5 { width:14.57%; top:53.69%; left:33.67%;} /* その他　：詳細線 */
#m .effect .plan_2 .item6 { width:74.07%; top:31.27%; left:13.86%;} /* グラフ　：積立投資の評価金額・積立元本 */

#m .effect :where(.plan_1, .plan_2) :not(.item1, .item6) { z-index:1;}

/* ↓ point_3 -- animation */
#m .effect .graph_base { --anime-time:1.0s;}
#m .effect :where(.plan_1, .plan_2) .item6 { clip-path:inset(0% 100% 0% 0%); transition:clip-path var(--anime-time) ease;}
#m .effect :where(.plan_1, .plan_2) :where(.item3, .item4, .item5) { opacity:0; translate:0 20px; transition:all var(--anime-time) calc(var(--anime-time) + 0.75s) ease;}

#m .effect :where(.plan_1, .plan_2) .graph_base.move .item6 { clip-path:inset(0% 0% 0% 0%);}
#m .effect :where(.plan_1, .plan_2) .graph_base.move :where(.item3, .item4, .item5) { opacity:1; translate:0 0;}
/* ↑ point_3 -- animation */


#m .effect .plan p { font-size:19px; margin-bottom:0.5rem;}

/* banner */
#m .banner ul { display:flex; flex-wrap:wrap; margin:0;}
#m .banner li { flex-basis:100%;}
#m .banner .half { flex-basis:50%;}
#m .banner .half a:after { content:none;}

/* warning */
#m .warning {
    position:relative;
    background:var(--effect-color) url(none) no-repeat center / 100% auto;
    z-index:0;
}
#m .warning:before {
    content:"";
    position:absolute;
    display:block;
    width:100%;
    aspect-ratio:192/81;
    top:0;
    background:var(--effect-color) url(../../image/warning/bg.png) no-repeat top / 100% auto;
    mix-blend-mode:soft-light;
    max-height:100%;
    z-index:-1;
}
#m .warning:after{
    content:"";
    position:absolute;
    display:block;
    width:100%;
    aspect-ratio:192/81;
    background:linear-gradient(to bottom, transparent, transparent 53.4%, var(--effect-color) 100%);
    top:0;
    max-height:100%;
    z-index:-1;
}
#m .warning .wrap { max-width:1200px; margin:auto; padding:150px 0;}
#m .warning .title { width:680px; margin:0 auto 50px;}
#m .warning .text_1 { font-size:35px; font-weight:900; width:fit-content; margin:0 auto 30px;}
#m .warning .text_2 { font-size:20px; font-weight:900; width:fit-content; margin:0 auto 63px; text-align:center;}
#m .warning ul.cation { width:fit-content; margin:0 auto 46px;}
#m .warning ul.cation li { font-weight:700;}