★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ レイアウト ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { #wrapper{ } main.outer_wrap { position: relative; max-width: none; /* max-width: 1920px; 固定幅レイアウト時 */ width: 100%; min-height: 50vh; display: block; padding: 80px 0; margin: 0 auto; } .inner_wrap { position: relative; width: 1000px; margin: 0 auto; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { #wrapper { } main.outer_wrap { position: relative; width: 100%; min-height: 50vh; padding: 16vw 0; } .inner_wrap { position: relative; width: 100%; padding: 0 4vw; } } /* ================================================================================ メイン画像 ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .main_cate { position: relative; background: url(../img/main_cate.jpg) center top / cover no-repeat #262626; width: 100%; height: 13.2vw; } .main_cate_in { position: relative; width: 100%; height: 100%; display: table; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .main_cate { position: relative; background: url(../img/main_cate.jpg) center top / cover no-repeat #262626; width: 100%; height: 45vw; } .main_cate_in { position: relative; width: 100%; height: 100%; display: table; } } /* ================================================================================ マージンボックス ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin: 120px 0 0 0; } .top_middle { margin: 80px 0 0 0; } .top_short { margin: 40px 0 0 0; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin: 0 0 120px 0; } .bottom_middle { margin: 0 0 80px 0; } .bottom_short { margin: 0 0 40px 0; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin: 120px 0; } .both_middle { margin: 80px 0; } .both_short { margin: 40px 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* 上にマージンを空ける ----------------------------------------------- */ .top_long { margin: 16vw 0 0 0; } .top_middle { margin: 12vw 0 0 0; } .top_short { margin: 8vw 0 0 0; } /* 下にマージンを空ける ----------------------------------------------- */ .bottom_long { margin: 0 0 16vw 0; } .bottom_middle { margin: 0 0 12vw 0; } .bottom_short { margin: 0 0 8vw 0; } /* 両方にマージンを空ける ----------------------------------------------- */ .both_long { margin: 16vw 0; } .both_middle { margin: 12vw 0; } .both_short { margin: 8vw 0; } } /* ================================================================================ 見出し ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { /* h2見出し */ .title_h2 { margin: 0 0 80px 0; } .title_h2 h2 { display: block; letter-spacing: 0.05em; font-size: 30px; font-weight: 400; line-height: 1; text-align: center; } .title_h2 h2 span { display: block; font-size: 2.5em; font-family: 'Roboto', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: 300; line-height: 1; margin: 0 0 0.4em 0; } /* h2見出し */ .title_h3 { margin: 0 0 24px 0 !important; } .title_h3 h3 { color: #171717; font-size: 18px; font-weight: 400; line-height: 1.4 !important; padding: 1em !important; border-bottom: solid; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { /* h2見出し */ .title_h2 { margin: 0 0 12vw 0; } .title_h2 h2 { display: block; letter-spacing: 0.05em; font-size: 4vw; font-weight: 400; line-height: 1; text-align: center; } .title_h2 h2 span { display: block; font-size: 2.5em; font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: 300; line-height: 1; margin: 0 0 0.4em 0; } .title_h2 h2 span.icon_r { vertical-align: -0.1em !important; font-size: 0.9em !important; } /* h3見出し */ .title_h3 { margin: 0 0 4vw 0 !important; } .title_h3 h3 { color: #171717; font-size: 4vw; font-weight: 400; line-height: 1.4 !important; padding: 1em !important; border-bottom: solid; } } /* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ ここから各固定ページ ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */ /* ================================================================================ ハーツ加工®について ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .about_flow { border-bottom: dashed 1px; padding: 30px 40px 40px 40px; } .about_flow h3 { font-size: 20px; font-weight: 500; margin: 0 0 0.5em 0; } .about_flow h3 span { font-size: 1.2em; font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: 300; margin: 0 0.5em 0 0; } .about_flow p { } .triangle { width: 15px; height: 15px; border: 5px solid; border-color: transparent transparent #242424 #242424; transform: rotate(-45deg); margin: 20px auto 35px; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .about_flow { background-color: #ffffff; padding: 5vw 6vw 6vw 6vw; } .about_flow h3 { font-size: 4vw; font-weight: 500; margin: 0 0 0.5em 0; } .about_flow h3 span { font-size: 1.2em; font-family: 'Fjalla One', 'Noto Sans JP',-apple-system, BlinkMacSystemFont, 'Helvetica Neue', YuGothic, 'ヒラギノ角ゴ ProN W3', Hiragino Kaku Gothic ProN, Arial, 'メイリオ', Meiryo, sans-serif; font-weight: 300; margin: 0 0.5em 0 0; } .about_flow p { } .triangle { width: 20px; height: 20px; border: 5px solid; border-color: transparent transparent #242424 #242424; transform: rotate(-45deg); margin: 10px auto 25px; } } /* ================================================================================ カテゴリ別ページ ================================================================================ */ /* PC設定 ----------------------------------------------- */ @media (min-width: 768px) { .link_category { } .link_category ul { width: 100%; } .link_category ul li { float: left; width: 25%; margin: 0 0 40px 0; } .link_category ul li a { display: block; text-align: center; font-size: 18px; color: #242424; } .link_category ul li a img { width: 250px; height: 250px; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ margin: 0 0 8px 0; } } /* SP設定 ----------------------------------------------- */ @media (max-width: 767px) { .link_category { } .link_category ul { width: 100%; } .link_category ul li { float: left; width: 50%; margin: 0 0 6vw 0; } .link_category ul li a { display: block; text-align: center; font-size: 3.8vw; color: #242424; } .link_category ul li a img { width: 100%; height: 43vw; object-fit: cover; font-family: 'object-fit: cover;'; /* IE対策 */ margin: 0 0 1vw 0; } }