@charset "utf-8"; /* 枠を見えるようにする。 */ /* * {outline: 1px solid magenta !important;} */ * { box-sizing: border-box; } /* img下のbaselineを消去する。 */ img { vertical-align: top; } html { background-color: white; scroll-behavior: smooth; } /*　要素に背景色が設定されていない場合、要素に背景色を設定すると、の高さがブラウザのウインドウより小さくても背景色はウインドウ全体に拡がります。*/ body { background-color: rgb(238,240,242); margin: 0 auto; /* 背景の模様を設定する */ background-image: linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px), linear-gradient(to right, rgba(0,0,0,0.1) 1px, rgb(238,240,242) 1px); background-size: 20px 20px; } /* ヘッダー */ header { height: 80px; background-color: rgba(110,197,227, 0.8); display: flex; justify-content: space-between; align-items: center; position: fixed; z-index: 10; width: 100vw; } .header_left h1 { font-size: 40px; font-weight: bold; margin-left: 20px; color: white; } .header_right { display: flex; margin-right: 20px; gap: 30px; } header .fa { color: white; display: none; } .header_right li { color: white; font-size: 16px; } .header_right li:last-of-type { /* ヘッダーの各項目の見た目を統一する。 */ padding-right: 15px; } .header_right li a { color: inherit; } /* メイン */ .firstview { position: relative; } .firstview .fv_blank { display: none; } .firstview img { /* width: 1000px; */ width: 100%; height: 600px; object-fit: cover; } .firstview p { color: white; font-size: 40px; font-weight: bold; text-decoration: underline; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); white-space: nowrap; } /* コンテンツ幅を設定する */ .hyperWrapper { max-width: 1200px; margin: 0 auto; } .wrapper { margin: 5% 5%; } /* ページ内リンクの位置を微調整する。 */ section::before { content:''; display: block; padding-top: 80px; margin-top: -80px; } main h2 { font-size: 36px; font-weight: bold; margin-top:30px; margin-bottom: 30px; } main h3 { font-size: 28px; font-weight: bold; margin-top: 20px; margin-bottom: 20px; } main p { font-size: 24px; } /* MST Techについて */ #about p { margin-left: 30px; } #about ul { margin-left: 30px; } #about li { font-size: 24px; margin-bottom: 5px; } /* 業務内容 */ #service .container { display: flex; justify-content: space-around; } /* 改造ポイント */ #service #container__fadeIn { /* visibility: hidden; */ opacity: 0; } #service .container .business { width: 200px } #service .container .business img { width: 200px; height: 200px; } #service .container .business figcaption { margin-top: 10px; margin-bottom: 10px; font-size: 24px; } #service .container .business p { font-size: 18px; line-height: 1.3; } /* 制作実績 */ #achievements .container { display: flex; gap: 5%; justify-content: center; } /* slickの親要素にflexを設定した時、限界突破しないようにする */ /* https://blog.web-dokata.com/218/ */ #achievements .container * { min-height: 0; min-width: 0; } #achievements .container .achievement #fadeReversi > div { max-width: 500px; /* width: 100%; */ } #achievements .container .achievement #fadeTetris > div { max-width: 500px; /* width: 100%; */ } #achievements .container .achievement #fadeEmbedded > div { max-width: 500px; /* width: 100%; */ } #achievements .container .achievement img { max-width: 500px; /* width: 100%; */ } #achievements .container .achievement figcaption { font-size: 24px; margin-top: 5px; text-align: center; } #achievements .container .achievement p { font-size: 18px; margin-top: 10px; /* text-align: center; */ } /* お問い合わせ */ #contact form { display: flex; flex-direction: column; align-items: center; gap: 30px; } #contact form .text { width: 90%; height: 50px; font-size: 14px; } #contact form textarea{ font-size: 14px; max-height: 300px; min-height: 300px; max-width: 90%; min-width: 90%; } #contact form button { color: white; background-color: rgb(7, 111, 170); width: 150px; margin: 0 auto; border: 0; font-size: 24px; margin-top: 50px; } /* フッター */ footer { font-size: 14px; height: 80px; background-color: rgb(110,197,227); text-align: center; line-height: 80px; }