/*--------------------------------------------------
tablet
--------------------------------------------------*/
@media only screen and (max-width:1280px){
:where( #point1, #point2, #point3, #effect) { scroll-margin-top:-11.25vw;}
#movie { scroll-margin-top:25vh;}
/* header */
#h {
--h-height:90px;
width:calc(100% - var(--h-height));
height:var(--h-height);
padding:0;
position:relative;
}
#h .h_logo { gap:0;}
#h .h_logo div:nth-of-type(1) img,
#h .h_logo div:nth-of-type(2) img { width:90%;}
#h .h_fund { display:none;}
#h :where(.menu, .menu_content){ display:block;}
#h .menu {
width:var(--h-height);
aspect-ratio:1/1;
position:fixed;
top:0;
right:0;
background:#005265;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:5px;
}
#h .menu span { width:20px; height:2px; background:#fff;}
#h .menu p { color:#fff; font-size:9px; font-weight:700; line-height:1;}
#h .menu_content {
position:fixed;
background:#005265;
width:100vw;
height:100vh;
color:#fff;
padding:calc(var(--h-height) * 1.5) 10% 10%;
z-index:9999;
top:0;
left:100%;
transition:left 0.5s;
}
body.menu_open #h .menu_content { left:0%; overflow-y:auto;}
#h .menu_content .close {
position:absolute;
top:0;
right:0;
display:flex;
flex-direction:column;
justify-content:space-evenly;
align-items:center;
height:var(--h-height); aspect-ratio:1/1;
}
#h .menu_content .close span {display:block; width:20px; height:2px; background:#fff;}
#h .menu_content .close p { font-size:9px; font-weight:700; line-height:1;}
#h .menu_content .cont { width:100%; margin:0;}
#h .menu_content .cont > li { border:solid 1px #fff; border-radius:11px;}
#h .menu_content .cont > li + li { margin-top:10px;}
#h .menu_content .cont1 {
position:relative;
display:flex;
flex-direction:column;
align-items:start;
gap:23.5px;
padding:31.5px 0 31.5px 6.1%;
}
#h .menu_content .cont1:before{
content:"";
position:absolute;
display:block;
background:#005265 url(../../image/menu/title.svg)no-repeat center / 100% auto;
width:152px;
height:41.5px;
inset:-10% 0 auto 0;
margin:auto;
}
#h .menu_content .cont1 img { display:block;}
#h .menu_content .cont2 { display:flex; justify-content:center; align-items:center; height:74px; position:relative; overflow:hidden;}
#h .menu_content .cont2:before{
content:"";
position:absolute;
display:block;
background:url(../../image/menu/movie_icon.svg) no-repeat center / 100% auto;
width:105px;
aspect-ratio:1/1;
inset:0 auto 0 -23px;
margin:auto;
opacity:0.5;
}
#h .menu_content .cont3 { display:flex; justify-content:center; align-items:center; height:74px;}
#h .menu_content .SMT_iPlus { display:block; width:90%; margin:30px auto 0;}
#h .menu_content .link { display:flex; justify-content:center; gap:10px; margin-top:14px;}
#h .menu_content .link a {
display:block;
flex-basis:50%;
padding:10px 0;
text-align:center;
font-size:17px;
font-weight:700;
border:solid 2px #fff;
border-radius:999px;
line-height:1;
}
#h .menu_content .line {
display:flex;
justify-content:start;
align-items:center;
width:100%;
height:80px;
background:#fff;
border-radius:13px;
padding:20px;
margin-top:30px;
color:#747474;
font-family:"Noto Sans JP";
font-size:17px;
font-weight:700;
text-align:center;
}
#h .menu_content .line:after { content:none;}
#h .menu_content .line span { display:block; width:100%;}
#h .menu_content .cont1 { padding:31.5px 0; align-items:center;}
/* footer */
#f { padding-bottom:calc(45px + (100vw / 375 * 80))}
/* f_fixed */
#f_fixed {
display:flex;
justify-content:end;
background:#fff;
width:100%;
aspect-ratio:375/80;
position:fixed;
bottom:0;
z-index:100;
padding-right:calc((100% - 74.466vmin - 10px - 21.333vw - (21.333vw * 0.25)) / 2);
}
#f_fixed .fix_l { display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; gap:1.813vmin;}
#f_fixed .fix_l .title { width:100%; height:auto; line-height:0;}
#f_fixed .fix_l .title img { width:100%; height:auto;}
#f_fixed .fix_l .link { display:flex; justify-content:space-between; gap:10px;}
#f_fixed .fix_l .link a { display:block; font-size:4vmin; font-weight:700; color:#fff; border-radius:6px; padding:1.866vmin 0; text-align:center;}
#f_fixed .fix_l .link a:after { width:3.5vmin;}
#f_fixed .fix_l .link a:nth-of-type(1) { background:#009B9B; width:32.533vmin;}
#f_fixed .fix_l .link a:nth-of-type(2) { background:#F08A52; width:38.933vmin;}
#f_fixed { justify-content:center; aspect-ratio:auto; height:80px; padding:0; }
#f_fixed .fix_l { gap:0;}
#f_fixed .fix_l .title { width:277px;}
#f_fixed .fix_l .link a { font-size:20px; padding:8px 0;}
#f_fixed .fix_l .link a:after { width:14px;}
#f_fixed .fix_l .link a:nth-of-type(1) { width:122px;}
#f_fixed .fix_l .link a:nth-of-type(2) { width:146px;}
#f_fixed .fix_r { display:grid; place-items:center; height:100%; aspect-ratio:1/1;}
#f_fixed .fix_r a { width:50%; height:auto;}
#f_fixed .fix_r a:after { content:none;}
#f_fixed .fix_r a img { width:100%; height:auto;}
/* #m .fv .fv_wrap { max-height:calc(100vh - var(--header-height) - 100vw / 375 * 80);} */
#m { margin-top:0;}
#m .fv .fv_wrap { flex-direction:column; max-height:none; aspect-ratio:unset;}
#m .fv :is(.fv_l, .fv_r) { width:100%;}
#m .fv :is(.fv_l, .fv_r) img { width:100%; height:auto;}
#m .fv .fv_l:after {
background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,10%) 50%, #000);
opacity:55%;
width:100%;
height:8.533vw;
inset:auto 0 0 0;
}
#m .fv .line { display:none;}
#m .fv .fv_text { display:block;}
#m .fv ul.cation { margin:0; padding:1rem; background:#FFF6ED;}
#m .wrap { width:90%; margin-inline:auto;}
#m .movie { width:100%; padding:0 5%;}
#line { display:none!important;}
/* point_2 */
#m .point_2 .plan { flex-direction:column;}
#m .point_2 .plan + ul.cation li { text-align:justify;}
#m .point_2 .cap_2 ul.white_s li:nth-of-type(2) br.pc { display:none;}
#m .point_2 .cap_2 .image { flex-direction:column;}
/* point_3 */
#m .point_3 ul.basis ul.cation li { left:0; translate:0 -50%;}
#m .point_3 ul.basis > li:last-of-type { width:5vw;}
#m .point_3 .graph { flex-direction:column; gap:33.5px; margin-bottom:0;}
/* effect */
#m .effect .textbox { padding:30px;}
#m .effect .plan { flex-direction:column;}
}
/*--------------------------------------------------
sp
--------------------------------------------------*/
@media only screen and (max-width:768px){
body.menu_open { overflow:hidden;}
.pc { display:none;}
.sp { display:block;}
span.pc { display:none;}
span.sp { display:inline-block;}
h3 { font-size:22px;}
h3:before { width:10px;}
ul li { text-align:justify;}
ul.white_l li { padding-left:30px; font-size:17px; font-weight:700;}
ul.white_l li:before { width:18px;}
ul.white_s li { font-size:17px;}
ul.white_s li + li { margin-top:1rem;}
ul.green_l li { padding-left:30px; font-size:17px; font-weight:700;}
ul.green_l li:before { width:16px; top:10px;}
ul.green_l li + li { margin-top:1.5rem;}
ul.cation li { font-size:12px; padding-left:17px;}
ul.cation li + li { margin-top:1rem;}
ul.cation li.large { font-size:14px;}
ul.circle li { font-size:13px;}
ul.bg_white { padding:20px;}
ul:where(.white_l, .white_s, .green_l, .cation, .circle) li.no-icon { padding-left:0;}
#page_top { width:47px;}
/* header ********************************************************/
#h { --h-height:60px;}
/* footer ********************************************************/
#f { gap:37.5px; padding:60px 0 calc(40px + 21.333vw); gap:30px 0;}
#f .f_corp { width:90%; margin:auto;}
#f .f_corp p { font-size:13px;}
#f .f_corp p:first-of-type { font-size:13px;}
#f .f_corp span { font-size:14.5px;}
#f .f_corp .f_copy { font-size:11px; letter-spacing:0; width:100%; margin-top:30px;}
/* main ********************************************************/
#m .fv .fv_wrap { flex-direction:column; max-height:none; aspect-ratio:unset;}
#m .fv :is(.fv_l, .fv_r) { width:100%;}
#m .fv :is(.fv_l, .fv_r) img { width:100%; height:auto;}
#m .fv .fv_l:after {
background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,10%) 50%, #000);
opacity:55%;
width:100%;
height:8.533vw;
inset:auto 0 0 0;
}
#m .fv .line { display:none;}
#m .fv ul.cation { margin:0; padding:1rem; background:#FFF6ED;}
#m .point { padding:0 0 60px;}
#m .point .wrap { padding:50px 0 200px; overflow:hidden;}
#m .point .catch { width:100%; }
#m .point .catch .catch_text { display:block; width:95%; margin:auto;}
#m .point .catch .bg1 { width:99.415vw; top:-4.26vw; left:-7.386vw;}
#m .point .catch .bg2 { width:98.613vw; bottom:-4.026vw; right:-19.093vw;}
#m .about { }
#m .about .title { width:90%; margin:auto; inset:-30.746vw 0 auto;}
#m .about .about_point {
flex-basis:auto;
padding:15.06vw 0 0;
width:100%;
aspect-ratio:375/502;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 18.28vmin), calc(100% - 17.13vmin) 100%, 0 100%);
}
#m .about .about_point .cap { height:auto;}
#m .about .about_point .text { width:85.3vw; font-size:19px;}
#m .about .about_point1 .num { width:12.10%; top:6.85vw; left:10.51%;}
#m .about .about_point2 .num { width:20.27%; top:6.85vw; left:4.99%;}
#m .about .about_point3 .num { width:19.22%; top:6.85vw; left:6.11%;}
#m .about .about_point1 .image { width:52.26vw; margin-bottom:9.78vw;}
#m .about .about_point2 .image { width:54.08vw; margin-bottom:4.85vw;}
#m .about .about_point3 .image { width:52.26vw; margin-bottom:9.94vw;}
#m .about .about_point1 .cap { width:72.70vw; margin-bottom:11.25vw;}
#m .about .about_point2 .cap { width:85.94vw; margin-bottom:6.21vw;}
#m .about .about_point3 .cap { width:60.59vw; margin-bottom:11.06vw;}
#m .about ul { flex-direction:column;}
#m .movie { margin:78.5px auto 0; }
#m .movie:before { width:185px; top:-100px; left:-65px;}
#m .movie .title { width:85%; margin-bottom:14.5px;}
/* point_1 */
#m .point_1:before {
height:calc(300vw / 1029 * 628);
background-size:300% auto;
}
#m .point_1 .wrap { width:90%; margin:auto; padding:0;}
#m .point_1 h3 { font-size:20px; padding-left:20px;}
#m .point_1 h3 small { font-size:16px;}
#m .point_1 .title { width:100%; margin:65px auto 35px;}
#m .point_1 .graph { width:100%; margin:55px auto 0; padding:0 0 45px;}
#m .point_1 .graph .graph_base { margin:22.5px auto 16.5px;}
#m .point_1 .graph .item1 { width:17.35%; top:29.67%; left:19.12%; height:50%;}
#m .point_1 .graph .item2 { width:17.06%; top:62.64%; left:46.76%; height:17.03%;}
#m .point_1 .graph .item3 { width:17.14%; top:79.93%; left:74.12%; height:2.24%;}
#m .point_1 .graph .item4 { width:12.43%; top:21.76%; left:21.88%;}
#m .point_1 .graph .item5 { width:12.82%; top:54.84%; left:48.88%;}
#m .point_1 .graph .item6 { width:12.82%; top:69.56%; left:76.65%;}
/* #m .point_1 .graph .item7 { width:27.13%; top:52.14%; left:69.41%;} */
#m .point_1 .graph .item7 { width:20.27%; top:55.09%; left:71.94%;}
/* #m .point_1 .graph .item1 { width:; top:; left:;} */
#m .point_1 .graph ul.cation li.ast { padding-left:1.5rem;}
/* point_2 */
#m .point_2:before {
height:calc(300vw / 1029 * 628);
background-size:300% auto;
}
#m .point_2 .wrap { width:90%; margin:auto;}
#m .point_2 .title { margin-bottom:29px;}
#m .point_2 .benchmark { width:100%; margin-top:30px;}
#m .point_2 .benchmark :is(th, td) { font-size:16px;}
#m .point_2 .benchmark th { padding:11.5px 10px;}
#m .point_2 .benchmark td { padding:10px 10px;}
#m .point_2 .benchmark tr td:nth-of-type(1) { width:30%;}
#m .point_2 .benchmark tr td:nth-of-type(2) { width:70%;}
#m .point_2 h3 { font-size:22px; padding-left:20px;}
#m .point_2 h3 small { display:block; line-height:1.25; margin-top:10px; font-size:16px;}
#m .point_2 .cap_1 { margin-top:45px;}
#m .point_2 .cap_1 .cap { width:100%; margin-bottom:18.5px;}
#m .point_2 .textbox { width:100%; padding:20px 0; font-size:18px; margin-bottom:38px;}
#m .point_2 .textbox p:nth-of-type(2) { font-size:24px; line-height:1.25; margin-top:10px;}
#m .point_2 .textbox span { display:block; font-size:24px; line-height:1.25; margin-top:10px;}
#m .point_2 .cap_2 { margin-top:81.5px;}
#m .point_2 .cap_2 .cap { width:100%; margin-bottom:37px;}
#m .point_2 .cap_2 ul.white_s { margin-bottom:23.5px;}
#m .point_2 .cap_2 ul.cation { margin-bottom:31.5px;}
#m .point_2 .cap_2 .image { flex-direction:column;}
#m .point_2 .cap_2 .image img { margin-bottom:15.5px;}
#m .point_2 .cap_2 .image ul.cation li { width:fit-content; margin:auto;}
#m .point_2 .plan { flex-direction:column; margin-bottom:22.5px;}
#m .point_2 .plan table thead th { padding:10px 0px; font-size:13px;}
#m .point_2 .plan table tbody :is(th, td) { padding:5px 5px;}
#m .point_2 .plan table tbody th { font-size:16px; text-align:left;}
#m .point_2 .plan table tbody td { font-size:17px;}
#m .point_2 .plan_1 .graph_item .item_1 { width:83.72%; top:16.21%; left:9.29%;}
#m .point_2 .plan_1 .graph_item .item_2 { width:30.49%; top:17.33%; left:57.82%;}
#m .point_2 .plan_1 .graph_item .item_3 { width:20.27%; top:54.28%; left:72.74%;}
#m .point_2 .plan_1 .graph_item .item_4 { width:19.67%; top:73.54%; left:72.38%;}
#m .point_2 .plan_1 .graph_item .item_5 { width:83.72%; top:16.21%; left:9.29%;}
#m .point_2 .plan_2 .graph_item .item_1 { width:83.70%; top:23.24%; left:9.35%;}
#m .point_2 .plan_2 .graph_item .item_2 { width:30.49%; top:25.13%; left:58.44%;}
#m .point_2 .plan_2 .graph_item .item_3 { width:19.57%; top:55.63%; left:73.50%;}
#m .point_2 .plan_2 .graph_item .item_4 { width:19.67%; top:73.54%; left:72.09%;}
#m .point_2 .plan_2 .graph_item .item_5 { width:83.70%; top:23.24%; left:9.35%;}
/* point_3 */
#m .point_3:before {
height:calc(300vw / 1029 * 628);
background-size:300% auto;
}
#m .point_3 .wrap { width:90%; margin-inline:auto;}
#m .point_3 .title { margin-bottom:30px;}
#m .point_3 ul.white_l { margin-bottom:1.75rem;}
#m .point_3 .mb { margin-bottom:40px;}
#m .point_3 h3 { font-size:20px; padding-left:20px;}
#m .point_3 .graph p { font-size:16px;}
#m .point_3 .graph_base { margin-bottom:22px;}
#m .point_3 .graph ul.cation li { font-size:12px;}
#m .point_3 .graph + ul.cation { width:100%; margin-bottom:33.5px;}
#m .point_3 .graph + ul.cation li + li { margin-top:10px;}
#m .point_3 ul.basis { flex-direction:column; margin-bottom:22px;}
#m .point_3 ul.basis li:last-of-type { width:35px;}
#m .point_3 .scroll { width:100%; overflow-x:auto; margin-bottom:43px;}
#m .point_3 table { width:400px; margin-bottom:0;}
#m .point_3 table :where(th, td) { font-size:15px; padding:15px;}
#m .point_3 table thead th { font-size:16px; }
#m .point_3 table tbody th { width:40%; padding:15px;}
#m .point_3 table tbody td { width:15%; font-size:16px;}
#m .point_3 table tbody tr:last-of-type th { line-height:2;}
#m .point_3 ul.basis + ul.cation { margin-bottom:43px;}
#m .point_3 .scroll + ul.cation { margin-bottom:43px;}
#m .point_3 ul.calc { flex-direction:column; gap:30px 0; width:100%; margin-bottom:22px;}
#m .point_3 ul.calc li:last-of-type img { width:80%; margin:auto; display:block;}
#m .point_3 ul.calc li:last-of-type ul.cation { margin-top:31.5px;}
#m .point_3 ul.calc li:last-of-type ul.cation li { font-size:13px;}
#m .point_3 ul.calc .hukidashi:before {
background-image:url(../../image/point_3/calc2_icon_sp.svg);
top:85%;
left:0;
right:0;
margin:auto;
}
#m #dialog_open {
--h:52px;
width:100%;
}
#m #dialog_open img { height:1.25rem;}
#m #dialog .dialog_content { overflow-x:auto;}
#m #dialog .dialog_content img { width:auto; height:90vh; max-width:none;}
#m #dialog_close {
--w:58.5px;
}
/* ↓ modal */
#m .modal_open { --h:52px; width:100%;}
#m .modal_open img { height:1.25rem;}
#m .modal_close { --w:58.5px;}
#m .modal_content { width:90vw; overflow:visible;}
#m .modal_content .sp_wrap { overflow-x:auto;}
#m .modal_content .content_img { width:auto; height:90vh; max-width:none;}
/* ↑ modal */
/* effect */
#m .effect { padding-top:115px;}
#m .effect:before,
#m .effect:after { height:calc(300vw / 64 * 29); background-size:300% auto;}
#m .effect:before {
background-color:#F4F1EB;
background-position:left 85% top 0;
}
#m .effect .wrap { width:90%; padding-bottom:25px;}
#m .effect h3 { padding-left:20px;}
#m .effect .title { width:100%; margin-bottom:37.5px;}
#m .effect ul.green_l { margin-bottom:38.5px;}
#m .effect .cap { width:100%;}
#m .effect .textbox { width:100%; padding:10px 17.5px; font-size:17px; margin-bottom:40px;}
#m .effect .textbox p { text-align:center;}
#m .effect .plan { flex-direction:column; margin-bottom:25px;}
#m .effect .plan p { font-size:12px;}
#m .effect :is(.plan_1, .plan_2) .graph_base { margin-bottom:20px;}
#m .effect .plan_1 .item1 { width:73.66%; top:29.35%; left:14.35%;}
#m .effect .plan_1 .item2 { width:35.94%; top:31.78%; left:41.74%;}
#m .effect .plan_1 .item3 { width:41.37%; top:49.01%; left:16.03%;}
#m .effect .plan_1 .item4 { width:21.75%; top:75.39%; left:63.29%;}
#m .effect .plan_1 .item5 { width:15.62%; top:54.21%; left:33.29%;}
#m .effect .plan_1 .item6 { width:73.66%; top:29.35%; left:14.35%;}
#m .effect .plan_2 .item1 { width:73.74%; top:32.02%; left:13.85%;}
#m .effect .plan_2 .item2 { width:35.94%; top:36.45%; left:35.62%;}
#m .effect .plan_2 .item3 { width:41.37%; top:48.72%; left:15.71%;}
#m .effect .plan_2 .item4 { width:21.75%; top:73.78%; left:61.06%;}
#m .effect .plan_2 .item5 { width:14.05%; top:54.67%; left:33.68%;}
#m .effect .plan_2 .item6 { width:73.74%; top:32.02%; left:13.85%;}
#m .effect :where(.plan_1, .plan_2) :where(.item3, .item4, .item5) { translate:0 10px;}
/* banner */
#m .banner ul { flex-direction:column;}
/* warning */
#m .warning:before,
#m .warning:after { max-height:none; height:calc(300vw / 192 * 81); background-size:300% auto;}
#m .warning .wrap { width:90%; padding:58.5px 0;}
#m .warning .text_1 { font-size:16px; text-align:center; margin-bottom:1rem;}
#m .warning .title { width:95%; margin-bottom:22px;}
#m .warning .text_2 { font-size:17px; margin-bottom:30px;}
#m .warning ul.cation { margin-bottom:65.5px;}
#m .warning ul.cation li { font-size:12px; font-weight:700;}
}