- {/*
-
-
*/}
+ {backBtn &&
+
+
+
+ }
{name}
diff --git a/src/components/main/MainContents.tsx b/src/components/main/MainContents.tsx
new file mode 100644
index 0000000..2945986
--- /dev/null
+++ b/src/components/main/MainContents.tsx
@@ -0,0 +1,63 @@
+export default function MainContents(){
+ return(
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
new file mode 100644
index 0000000..17abd78
--- /dev/null
+++ b/src/styles/components/_index.scss
@@ -0,0 +1 @@
+@forward 'main';
\ No newline at end of file
diff --git a/src/styles/components/_main.scss b/src/styles/components/_main.scss
new file mode 100644
index 0000000..fedeef9
--- /dev/null
+++ b/src/styles/components/_main.scss
@@ -0,0 +1,89 @@
+@use "../abstracts" as *;
+
+.main-contens{
+ width: 100%;
+ padding: 0 20px;
+}
+.main-head-block{
+ padding: 33px 30px;
+ background: linear-gradient(102deg, #F8F9EC 2.93%, rgba(249, 239, 236, 0.80) 98.22%);
+ border-radius: 16px;
+ .head-block-tit{
+ @include defaultFont($font-s-18, $font-w-600, #F86A56)
+ }
+ .head-block-text{
+ @include defaultFont($font-s-13, $font-w-500, #F86A56)
+ }
+ .head-block-link-wrap{
+ margin-top: 18px;
+ .head-block-link{
+ @include flex(10px);
+ align-items: center;
+ padding: 8px 13px;
+ background-color: #CD8888;
+ border-radius: 100px;
+ @include defaultFont($font-s-12, $font-w-600, $white-fff);
+ .block-arr{
+ display: block;
+ width: 6px;
+ height: 11px;
+ background: url(/assets/images/main/block_arr.svg)no-repeat center;
+ background-size: cover;
+ }
+ }
+ }
+}
+
+.main-grid-wrap{
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 15px;
+ margin-top: 15px;
+ .main-grid-bx{
+ min-height: 160px;
+ padding: 40px 20px 10px;
+ border-radius: 16px;
+ &.bx01{
+ background: linear-gradient(134deg, #F0EDFF 5.92%, #F0FFF6 96.24%);
+ }
+ &.bx02{
+ background: linear-gradient(134deg, #FFF4F4 3.38%, #F2FFF5 98.09%);
+ }
+ &.bx03{
+ background: linear-gradient(136deg, #F7FAF1 3.75%, #E6FCF7 98.46%);
+ }
+ &.bx04{
+ background: linear-gradient(133deg, #FFFBEF 3.32%, rgba(243, 236, 255, 0.33) 100%);
+ }
+ .grid-bx-head{
+ @include flex(0px);
+ align-items: center;
+ .main-bx-icon{
+ @include flex(0px);
+ }
+ .main-bx-arr{
+ display: block;
+ margin-left: auto;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #fff;
+ background-image: url(/assets/images/main/main_contens_arr.svg);
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: 12px 12px;
+ }
+ }
+ .grid-bx-body{
+ margin-top: 16px;
+ .grid-bx-body-tit{
+ @include defaultFont($font-s-14, $font-w-600, #7896BA);
+ }
+ .grid-bx-body-txt{
+ @include defaultFont($font-s-12, $font-w-500, #7896BA);
+ opacity: 0.6;
+ margin-top: 3px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/layout/_layout.scss b/src/styles/layout/_layout.scss
index bc1fbf7..7865316 100644
--- a/src/styles/layout/_layout.scss
+++ b/src/styles/layout/_layout.scss
@@ -23,7 +23,6 @@ header{
left: 0;
width: 100%;
height: 66px;
- border-bottom:1px solid rgba(236, 236, 236, 0.80);
background-color: $white-fff;
.header-inner{
position: relative;
diff --git a/src/styles/style.scss b/src/styles/style.scss
index f4b1988..091e269 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,5 +1,5 @@
@use 'abstracts';
@use 'base';
@use 'layout';
-
+@use 'components';
+
+ 屋根材の照会
+ ご使用の屋根材の適合性をご確認いただけます
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+ 調査物件一覧
+ 作成物件確認
+
+
+
+
+
+ 
+
+
+
+
+
+ 調査物件登録
+ 新規物件作成
+
+
+
+
+
+ 
+
+
+
+
+
+ 1:1お問い合わせ リスト
+ 作成問い合わせの確認
+
+
+
+
+
+ 
+
+
+
+
+
+ 1:1問い合わせ登録
+ 新規お問い合わせの 作成
+