/** * CSS-only fluid layout (replaces common.js adjustOnLoadAndResize). * * Framework-agnostic. Same file for: * - Laravel preview: /index.php/preview_hanjuban * - Django katagami: copy to katagami/static/katagami/css/products_fluid.css * then + link this stylesheet + skip JS adjust. * * Enable by adding class "css-fluid" on . * Interpolation range matches JS: 320px → 1001px (span 681px). */ html.css-fluid .slider img:not(.slick_sample):not(.slick_presentation) { width: clamp(50%, calc(90% - (40% * (100vw - 320px) / 681px)), 90%); } html.css-fluid .slick_presentation { width: clamp(80%, calc(90% - (10% * (100vw - 320px) / 681px)), 90%); } /* Laravel: iframe.youtube_iframe / Django: .video1 iframe */ html.css-fluid iframe.youtube_iframe, html.css-fluid .video1 iframe { width: min(100%, 560px); max-width: 100%; aspect-ratio: 16 / 9; height: auto; } html.css-fluid .s1 { height: clamp(700px, calc(700px + 300 * (100vw - 320px) / 681px), 1000px); } @media screen and (min-width: 416px) { html.css-fluid .s1 { height: clamp(450px, calc(450px + 400 * (100vw - 320px) / 681px), 850px); } html.css-fluid .s1_title_logo1 { left: clamp(51px, calc(51px + 120 * (100vw - 320px) / 681px), 171px); } html.css-fluid .s1_title_logo2 { left: clamp(50px, calc(50px + 120 * (100vw - 320px) / 681px), 170px); } html.css-fluid .s1_title_img2 { left: clamp(30px, calc(30px + 86 * (100vw - 320px) / 681px), 116px); } html.css-fluid .s2_img1 { width: clamp(200px, calc(200px + 241 * (100vw - 320px) / 681px), 441px); height: clamp(200px, calc(200px + 241 * (100vw - 320px) / 681px), 441px); } html.css-fluid .text5_orange2 { font-size: clamp(28px, calc(28px + 20 * (100vw - 320px) / 681px), 48px); } html.css-fluid .s2_p1 { font-size: clamp(18px, calc(18px + 4 * (100vw - 320px) / 681px), 22px); } } @media screen and (min-width: 416px) and (max-width: 980px) { html.css-fluid .s1_title_description1 { left: clamp(0px, calc(341px * (100vw - 320px) / 681px), 341px); } } @media screen and (min-width: 981px) { html.css-fluid .s1_title_description1 { left: 441px; } } /* Fixed px widths in products_middle.css overflow below ~750px */ html.css-fluid .text_black_font24, html.css-fluid .ol_1, html.css-fluid .s6_div1, html.css-fluid .text_centering, html.css-fluid .s5_div1, html.css-fluid .s7_div2 { width: auto; max-width: 100%; box-sizing: border-box; padding-left: 15px; padding-right: 15px; } html.css-fluid .text1_black2_13rem.text_centering, html.css-fluid .text_black_font24, html.css-fluid .ol_1, html.css-fluid .s6_div1, html.css-fluid .text2_black { text-align: center; } html.css-fluid .ol_1 { list-style-position: inside; padding-left: 0; padding-right: 0; } html.css-fluid .bg_white_frame, html.css-fluid .bg_beige_frame { margin-left: clamp(12px, 4vw, 50px); margin-right: clamp(12px, 4vw, 50px); max-width: 100%; box-sizing: border-box; overflow: hidden; } /* bg_pink は bg_white_frame なしのブロック（サイズ表・袖図など）があるため横余白を揃える */ html.css-fluid .bg_pink { box-sizing: border-box; padding-left: clamp(12px, 4vw, 50px); padding-right: clamp(12px, 4vw, 50px); } html.css-fluid .purchase-container { width: auto; max-width: min(400px, 100%); box-sizing: border-box; padding-left: 12px; padding-right: 12px; } html.css-fluid img, html.css-fluid .img_size_able { max-width: 100%; height: auto; } /* 袖タイプ図など：旧テンプレ同様 700px 上限で中央寄せ（1033px 付近のはみ出し防止） */ html.css-fluid .bg_pink .img_size_able { display: block; max-width: min(700px, 100%); width: auto; margin-left: auto; margin-right: auto; } html.css-fluid .s6_div1 a, html.css-fluid .text1_black2_13rem a { overflow-wrap: anywhere; word-break: break-word; }