他で使う予定がなさそうな CSS を inline に変更し、モバイル画面での layout-break を修正

Author: yasulab

app/assets/stylesheets/custom.scss

@@ -1055,20 +1055,3 @@ section {
   line-height: 1.7em;
   color: #909090;
 }
-
-.stretch3-notes {
-  margin-top: 100px;
-  font-size: 11.8px;
-  line-height: 1.7em;
-  color: #909090;
-}
-
-.stretch3-eyecatch-container {
-  height: 35rem;
-  margin-bottom: 50px;
-}
-
-.stretch3-eyecatch {
-  border-radius: 10px;
-  object-fit: cover;
-}

app/views/stretch3s/new.html.haml

@@ -3,20 +3,31 @@
 - provide(:url,         '/stretch3')
 - provide(:meta_image,  '/img/stretch3_cover.webp')
 
+:css
+  .stretch3-notes {
+    margin-top: 100px;
+    font-size: 11.8px;
+    line-height: 1.7em;
+    color: #909090;
+  }
+  .stretch3-eyecatch {
+    border-radius: 10px;
+    object-fit: cover;
+  }
+
 .container
   %section.introduction{style: "padding: 50px 0px;"}
     %div.text-center
       %h1{style: "line-height: 1.4em; margin-bottom: 50px;"}
         Stretch3 × AI
         %br.ignore-pc
         利用申請フォーム
-      .stretch3-eyecatch-container
-        = lazy_image_tag '/img/stretch3_cover.webp',
-                         alt: 'AI 拡張ブロック利用例のスクリーンショット画像',
-                         min: true,
-                         class: 'stretch3-eyecatch',
-                         style: 'box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);'
-    %p
+      = lazy_image_tag '/img/stretch3_cover.webp',
+                       alt: 'AI 拡張ブロック利用例のスクリーンショット画像',
+                       min: true,
+                       class: 'stretch3-eyecatch',
+                       style: 'box-shadow: 0 2.5rem 2rem -2rem hsl(200 50% 20% / 40%);'
+    %p{style: 'margin-top: 70px;'}
       Stretch3 内にある AI 拡張ブロックの利用申請フォームです。
       %small<>
         (
@@ -81,7 +92,7 @@
         = f.label     :term_of_use, "上記の利用規約に同意する", style: "display:inline"
 
       = f.submit "同意して利用を始める", class: "form__submit"
-      .text-center
+      .text-center{style: 'color: gray;'}
         %small
           %small
             %b